rectangle을 두 triangle로 그리기

Figma-like 에디터에서 가장 기본이 되는 도형은 rectangle입니다. CSS에서는 div 하나면 됩니다. WebGL에서는 rectangle primitive가 없습니다.

대신 triangle 두 개로 rectangle을 만듭니다.

rectangle vertex를 만드는 함수

처음에는 rectangle 하나를 vertex 여섯 개로 펴는 함수부터 만들면 됩니다.

function pushRect(vertices, x, y, width, height) {
  const x0 = x;
  const y0 = y;
  const x1 = x + width;
  const y1 = y + height;

  vertices.push(
    x0, y0,
    x1, y0,
    x0, y1,
    x0, y1,
    x1, y0,
    x1, y1
  );
}

const vertices = [];
pushRect(vertices, 40, 32, 160, 96);

gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 2);

여기서 x, y, width, height는 아직 editor world 좌표라고 보면 됩니다. 이후 lesson에서는 이 좌표를 matrix uniform으로 screen/clip까지 변환합니다.

rectangle은 vertex 여섯 개다

사각형 네 모서리를 이렇게 두 triangle로 나눌 수 있습니다.

(0,0) ---- (w,0)
  |      /   |
  |    /     |
(0,h) ---- (w,h)

triangle 목록으로 쓰면 보통 여섯 vertex입니다.

(0,0), (w,0), (0,h)
(0,h), (w,0), (w,h)

이 local 좌표를 node transform과 camera matrix로 화면에 보냅니다.

왜 사각형마다 여섯 점을 보내는가

초반에는 단순하게 시작합니다. node마다 vertex 여섯 개를 만들어 buffer에 넣습니다. 이 방식은 이해하기 쉽습니다.

나중에는 unit rectangle 하나를 두고, 각 instance가 transform과 size를 따로 갖도록 바꿀 수 있습니다. 그게 instancing입니다.

하지만 지금은 먼저 이렇게 생각합니다.

rectangle node -> six vertices -> draw triangles

stroke와 radius는 아직 미룬다

CSS rectangle은 border, radius, shadow를 쉽게 가집니다. WebGL rectangle renderer는 처음부터 그 모든 것을 처리하지 않습니다.

첫 목표는 fill rectangle입니다.

position
size
transform
fill color

이 네 가지가 안정되면 stroke, outline, corner radius로 확장합니다.

오늘의 핵심

WebGL 2D renderer는 복잡한 도형을 GPU가 이해하는 triangle 데이터로 바꾸는 번역기입니다.

CSS box 감각
-> rectangle node
-> two triangles
-> GPU draw call

사각형을 triangle로 보는 순간 WebGL renderer의 재료가 보이기 시작합니다.