BufferGeometry, Material, ShaderMaterial

raw WebGL에서 직접 만들던 vertex buffer와 shader program은 Three.js에서 BufferGeometry와 Material로 나뉩니다.

geometry는 attribute를 담는다

const geometry = new THREE.BufferGeometry();
geometry.setAttribute(
  "position",
  new THREE.BufferAttribute(new Float32Array(vertices), 3)
);

rectangle을 직접 그리고 싶다면 두 triangle의 position attribute를 geometry에 넣습니다. 여러 node를 그릴 때는 geometry cache와 instance 전략을 함께 생각합니다.

material은 GPU 상태를 고른다

const material = new THREE.MeshBasicMaterial({
  color: 0x4f8cff,
  transparent: true,
  opacity: 0.8
});

기본 material로 충분하지 않을 때는 ShaderMaterial을 사용해 vertex shader와 fragment shader를 직접 제공합니다.

rectangle geometry를 직접 만든다

function createRectangleGeometry(width, height) {
  const x0 = 0;
  const y0 = 0;
  const x1 = width;
  const y1 = height;

  const positions = new Float32Array([
    x0, y0, 0,
    x1, y0, 0,
    x1, y1, 0,
    x0, y0, 0,
    x1, y1, 0,
    x0, y1, 0
  ]);

  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
  geometry.computeBoundingBox();
  return geometry;
}

function createRectMesh(node) {
  const geometry = createRectangleGeometry(node.width, node.height);
  const material = new THREE.MeshBasicMaterial({
    color: node.fill,
    transparent: node.opacity < 1,
    opacity: node.opacity
  });

  const mesh = new THREE.Mesh(geometry, material);
  mesh.position.set(node.x, node.y, 0);
  return mesh;
}

raw WebGL에서 직접 만들던 Float32Array가 Three.js에서는 BufferAttribute가 됩니다. 추상화가 생겨도 vertex data의 모양은 계속 직접 설계해야 합니다.

오늘의 핵심

Three.js를 쓰더라도 geometry, material, shader의 역할은 WebGL과 같습니다. 이름이 달라졌을 뿐 GPU에 넘기는 데이터와 상태를 설계해야 합니다.