[작성자:] 김 형준

WebGL은 결국 WebGPU로 대체될 기술이기에 그간 개발된 프로젝트를 WebGPU 기반으로 변경하고 있습니다. 다행히 많은 코드가 WebGL과 WebGPU에서도 동일하게 작동하기는 하지만 제대로 작동하지 않는 코드도 상당합니다. 특히 재질과 관련된 부분이 문제고 이는 재질이 쉐이더와 직접적으로 연결되어 있기 때문입니다. WebGL과 WebGPU에서 사용하는 쉐이더는 그 언어부터가 다른데 각각 GLSL과 WGSL입니다. 이 글은 WebGL에서는 정상적으로 작동하던 포인트 레더링 코드가 WebGPU에서는 더 이상 정상적으로 작동하지 않는 부분에 대한 정리입니다. 바로 포인트의 크기에 대한 부분인데요. WebGPU에서 포인트에 대한 렌더링 코드는 다음과 같습니다.

private setupModel() {
  const count = 10000;
  const positions = new Float32Array(count * 3);
  for (let i = 0; i < count; i++) {
    positions[i * 3 + 0] = THREE.MathUtils.randFloatSpread(5);
    positions[i * 3 + 1] = THREE.MathUtils.randFloatSpread(5);
    positions[i * 3 + 2] = THREE.MathUtils.randFloatSpread(5);
  }
  const positionAttribute = new THREE.InstancedBufferAttribute(positions, 3);

  const material = new THREE.PointsNodeMaterial({
    color: 0xffff00,
    positionNode: instancedBufferAttribute(positionAttribute),
    sizeNode: float(.1),
    sizeAttenuation: true,

    alphaTestNode: float(1).sub(shapeCircle()),
  });

  const points = new THREE.Sprite(material);
  points.count = count;
  this.scene.add(points);
}

이 코드는 10000개의 포인트를 렌더링하는 것으로 WebGL에서는 THREE.Points 였던 것이 WebGPU에서는 THREE.Sprite로.. THREE.PointsMaterial 였던 것이 THREE.PointsNodeMaterial로.. 그밖에 포인트들의 위치를 정의하는 부분의 코드 역시도 변경되었습니다. WebGPU 기반에서는 상당 부분을 TSL이라는 개념이 적용되는데 THREE.PointsNodeMaterial을 생성할때 positionNode와 sizeNode 그리고 사각형 모양의 포인트가 아닌 원 모양의 포인트를 만들기 위한 alphaTestNode에서 TSL가 사용되고 있습니다.

WebGPU는 WebGL을 대체하는 기술이고 보다 효율적이고 보다 빠릅니다. 이미 모바일에서도 문제없이 잘작동하고 있구요. 만약 three.js로 새로운 3D 프로젝트를 기획하고 있다면 WebGPU로 방향을 잡아 진행하는 것을 추천합니다.

SVG 파일은 2차원 벡터 그래픽 데이터인데, 이를 이용해 three.js에서 완전한 3차원 모델로 렌더링하는 코드의 정리입니다. 먼저 사용할 SVG 파일은 다음과 같습니다.

이 SVG 데이터 파일을 3차원 모델, 즉 Mesh로 만들기 위해서는 Geometry가 필요합니다. 이를 위해 three.js는 SVG 데이터를 받아 처리해주는 SVGLoader를 제공해주고 SVGLoader를 통해 데이터를 해석해 입체감있는 Geometry로 만들어주는 ExtrudeGeometry를 제공합니다. 이 둘을 이용한 코드는 다음과 같습니다.

const svg = await new SVGLoader().loadAsync("./flower.svg");
const paths = svg.paths
const geometries = [];

for (let i = 0; i < paths.length; i++) {
  const path = paths[i];

  const shapes = SVGLoader.createShapes(path);
  const shapeGeometry = new THREE.ExtrudeGeometry(shapes, {
    depth: 1,
    steps: 2,
    curveSegments: 16,
    bevelEnabled: true,
    bevelThickness: 0.5,
    bevelSize: .5,
    bevelOffset: -.15,
    bevelSegments: 8,
  });
  geometries.push(shapeGeometry);
}

const geometry = BufferGeometryUtils.mergeGeometries(geometries)
geometry.center();
geometry.rotateZ(Math.PI);
geometry.scale(.15, .15, .15);

이렇게 만들어진 geometry를 시각해 보면 다음과 같습니다.

빙고! 하지만 곧 꽃의 중심에 대한 구멍(hole)이 이상하게 표현되고 있다는 것을 알 수 있습니다. 직관을 통해 재질의 속성(side: THREE.DoubleSide)을 조정해 보면 다음과 같은 결과를 볼 수 있습니다.

아! 꽃 중심의 구멍의 노말벡터가 뒤짚혔다는 것을 알 수 있습니다. SVG는 구멍을 정의하기 위해서 정점의 구성 순서를 시계 방향으로 해야 합니다. 구멍이 아닌 외곽은 반시계 방향으로 구성해야 하구요. 그런데 사용하고 있는 SVG 데이터는 이러한 규칙을 무시하고 있습니다. 정해준 규칙을 따르는 SVG 데이터를 제공받아 사용하면 좋겠지만, 저는 그렇게 하지 않고 코드를 통해 해당 규칙을 따르도록 만들겠습니다.해당 코드가 적용된 것은 같습니다.

const svg = await new SVGLoader().loadAsync("./flower.svg");
const paths = svg.paths
const geometries = [];

for (let i = 0; i < paths.length; i++) {
  const path = paths[i];

  const correctedShapes = [];
  const shapes = SVGLoader.createShapes(path);
  for (let j = 0; j < shapes.length; j++) {
    const shape = shapes[j];

    // 외곽 포인트
    const outerPts = shape.getPoints(64);
    if (THREE.ShapeUtils.isClockWise(outerPts)) outerPts.reverse();
    const newShape = new THREE.Shape(outerPts);

    // 홀 처리
    shape.holes.forEach(hole => {
      const holePts = hole.getPoints(64);
      // 홀은 시계 방향이어야 하므로, 반대인 경우 뒤집음
      if (!THREE.ShapeUtils.isClockWise(holePts)) holePts.reverse();
      newShape.holes.push(new THREE.Path(holePts));
    });

    correctedShapes.push(newShape);
  }

  const shapeGeometry = new THREE.ExtrudeGeometry(correctedShapes, {
    ...
  });
  geometries.push(shapeGeometry);
}

const geometry = BufferGeometryUtils.mergeGeometries(geometries)
...

이제 결과를 보면 다음처럼 SVG에 대한 완전한 지오메트리 구성이 된 것을 확인할 수 있습니다.