[Three] 11. Sprite & Mesh - 텍스트 출력하기

Three.js의 캔버스에 텍스트를 랜더링할 때는 크게 아래 과정을 따릅니다.

 

1. 또 다른 캔버스를 만들어 그 안에 텍스트를 '그리고'
2. 해당 캔버스를 '텍스쳐'로 만든 후
3. 만든 텍스쳐를 원래 three.js 캔버스 내의 물체에 '씌운다'

1단계까지는 three.js의 요소가 아닌 canvas와 그 context만을 사용하며,

2단계 부터는 three.js의 CanvasTexture와 sprite(혹은 mesh)를 사용합니다.

 

	작업	사용 객체
1단계	텍스트 작성	HTMLCanvasElement, CanvasRenderingContext2D
2단계	텍스쳐 변환	THREE.CanvasTexture
3단계	three.js 내 구현	THREE.SpriteMaterial, THREE.Sprite or THREE.MeshBasicMaterial, THREE.Mesh

1. 텍스트 작성

Canvas

Canvas는 일반적으로 HTMLCanvasElement를 생성하는 방법을 따릅니다.

const canvas = document.createElement('canvas');

이 캔버스는 three.js에서 작업하고 있는 캔버스와는 다른 객체입니다.

오직 텍스트를 담는 목적으로만 사용되며 이후 텍스쳐로 변환되기 때문에 크기에 영향을 받지 않습니다.

단, 가로 세로 비율과 폰트 크기에 대한 비율엔 영향을 줄 수 있습니다.

canvas.width = 256;
canvas.height = 256;

Context

Context는 HTMLCanvasElement에서 그림을 그릴 때 사용하는 렌더링 환경 객체입니다.

쉽게 말하자면 캔버스 위에 픽셀 단위로 2D 그래픽을 직접 그리는 도구라고 할 수 있습니다.

우리는 이걸로 위에서 생성한 캔버스 위에 텍스트를 '그릴' 수 있습니다.

const context = this.canvas.getContext('2d') as CanvasRenderingContext2D;

위에서 명시하듯, 여기서는 CanvasRenderingContext2D라는 객체 타입을 사용합니다.

타입을 명시한 이유는 getContext( ) 함수가 [context 타입] | null의 형태로 반환하기 때문인데,

이는 함수로 전달하는 매개변수(여기서는 '2d')가 올바르지 않으면 null을 반환하기 때문입니다.

 

매개변수		반환 타입 (null 생략)
2d	⇒	CanvasRenderingContext2D
webgl	⇒	WebGLRenderingContext
bitmaprenderer	⇒	ImageBitmapRenderingContext
...	⇒	...

전달 가능한 매개변수 중 일부는 아래와 같으며, 이에 따라 반환하는 타입 또한 달라집니다.

 

context에서는 아래와 같은 값들을 설정할 수 있습니다.

context.fillStyle = 'white';                // 칠하는 색
context.strokeStyle = 'black';              // 선(테두리)의 색
context.lineWidth = fontSize * 0.1;         // 선의 두께
context.font = `${fontSize}px Pretendard`;  // 글꼴
context.textAlign = 'center';               // 텍스트 가로 정렬
context.textBaseline = 'middle';            // 텍스트 세로 정렬
context.lineJoin = 'round';                 // 코너 처리

마지막으로 남은 작업이 실제로 캔버스에 그림을 그리는 것입니다.

이전에 설정했던 context대로 stroke(선)와 fill(칠)을 그릴 수 있습니다.

const text = "....";
context.strokeText(text, canvas.width/2, canvas.height/2); // 선 그리기
context.fillText(text, canvas.width/2, canvas.height/2);   // 칠 그리기

2. 텍스쳐 변환

Context를 이용해 그림(텍스트)을 그린 캔버스를 material로 사용할 수 있도록 텍스쳐로 변환합니다.

const textTexture = new THREE.CanvasTexture(canvas);

필터에 대한 설정도 가능합니다.

textTexture.minFilter = THREE.LinearFilter; // 축소 필터를 선형 필터로 설정

3. Three.js로 구현

텍스트 텍스쳐를 Three.js 공간에 랜더링하는 방법은 공간 내에 물체를 만들어 거기에 텍스쳐를 씌우는 것인데,

어떤 타입의 물체에 씌울 것인지에 따라 크게 두 가지 방법이 있습니다.

 

• Sprite : 2d 이미지를 랜더링하기 위해 사용하는 물체로, 항상 화면을 바라보는 방향으로 위치해 있습니다.
• Mesh : 일반적인 물체에 사용하던 그 mesh 타입입니다. 공간에 고정되기 때문에 화면 시점과 무관하게 방향이 고정됩니다.

Sprite

material은 SpriteMaterial( ) 객체를 사용합니다.

시점에 따라 객체가 회전하므로 회전값을 별도로 넣을 필요가 없습니다.

// material
const spriteMaterial = new THREE.SpriteMaterial({
    map: textTexture,
    transparent: true, // background opacity
})

// sprite
const sprite = new THREE.Sprite(spriteMaterial);
sprite.position.copy(position);
scene.add(sprite);

Mesh

material은 MeshBasixMaterial( ) 객체를 사용하였습니다(다른 종류의 material을 사용해도 무방할 듯 합니다).

객체의 회전방향이 고정되어 있기 때문에 별도의 회전값을 넣어주어야 합니다.

또한 geometry의 경우 면만 필요하기 때문에 PlaneGeometry( )를 사용하였습니다.

// material
const material = new THREE.MeshBasicMaterial({
    map: textTexture,
    transparent: true,
})
// mesh
const mesh = new THREE.Mesh(new THREE.PlaneGeometry(width, height), material);
mesh.position.copy(position);
mesh.rotation.copy(rotation);
scene.add(mesh);

Mesh(TextPlane)은 시점에 따라 보이는 모습이 달라지지만 Sprite(TextSprite)는 시점이 바뀌어도 항상 정면을 바라봄.