texture로 image node 그리기

rectangle renderer가 solid color를 그렸다면, image node는 texture를 입힌 rectangle입니다. 도형 geometry는 여전히 quad이고, 달라지는 것은 fragment shader가 색을 어디서 가져오느냐입니다.

texture quad를 그리는 WebGL 코드

image node는 position attribute와 uv attribute를 함께 보냅니다. fragment shader는 uv로 texture를 sample합니다.

const vertices = new Float32Array([
  // x, y, u, v
  40, 40, 0, 0,
  240, 40, 1, 0,
  40, 180, 0, 1,
  40, 180, 0, 1,
  240, 40, 1, 0,
  240, 180, 1, 1
]);

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

const stride = 4 * Float32Array.BYTES_PER_ELEMENT;
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, stride, 0);
gl.vertexAttribPointer(uvLocation, 2, gl.FLOAT, false, stride, 2 * 4);

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, imageTexture);
gl.uniform1i(textureLocation, 0);
gl.drawArrays(gl.TRIANGLES, 0, 6);

in vec2 v_uv;
uniform sampler2D u_texture;
out vec4 outColor;

void main() {
  outColor = texture(u_texture, v_uv);
}

image node도 quad다

이미지 하나는 화면에서 사각형 영역을 차지합니다.

image node
  position
  size
  transform
  texture reference

geometry 관점에서는 rectangle node와 비슷합니다. 두 triangle로 만든 quad에 texture coordinate를 함께 보냅니다.

texture coordinate가 필요하다

vertex position은 화면 어디에 그릴지 정합니다. texture coordinate는 이미지의 어느 부분을 가져올지 정합니다.

position: (x, y)
uv: (0..1, 0..1)

fragment shader는 uv로 texture를 sample합니다.

vec4 color = texture(u_texture, v_uv);

이미지 로딩은 비동기다

이미지 파일은 즉시 GPU texture가 되지 않습니다. fetch, decode, upload 과정을 거칩니다.

image url
-> decode
-> create texture
-> renderer texture cache

이 과정은 scene model과 분리해야 합니다. node에는 asset id나 url을 저장하고, renderer가 texture cache를 관리합니다.

오늘의 핵심

image node는 texture를 가진 rectangle입니다.

scene image node
-> quad vertices + uv
-> texture cache
-> fragment shader sample

문서에는 이미지 참조를 저장하고, GPU texture는 다시 만들 수 있는 renderer resource로 둡니다.