WebGPURenderer와 TSL로 넘어가는 길

Three.js는 WebGLRenderer만 있는 도구가 아닙니다. 최신 Three.js에는 WebGPU renderer와 TSL(Three.js Shading Language) 흐름이 함께 발전하고 있습니다.

backend factory로 실험 범위를 제한한다

WebGPURenderer와 TSL은 Three.js 버전에 따라 API가 변할 수 있으므로, 앱 전체에 직접 퍼뜨리지 않고 backend factory 안에 가둡니다.

async function createThreeBackend(kind: "webgl" | "webgpu", canvas: HTMLCanvasElement) {
  if (kind === "webgpu") {
    const { WebGPURenderer } = await import("three/webgpu");
    const renderer = new WebGPURenderer({ canvas });
    await renderer.init();
    return new ThreeWebGPUBackend(renderer);
  }

  const renderer = new THREE.WebGLRenderer({ canvas });
  return new ThreeWebGLBackend(renderer);
}

나머지 editor는 둘 다 같은 인터페이스로 다룹니다.

const backend = await createThreeBackend(preferWebGPU ? "webgpu" : "webgl", canvas);
backend.render(editor.getSnapshot());

이렇게 해야 WebGPU 실험이 실패해도 editor core, command model, document format이 흔들리지 않습니다.

renderer backend를 교체 가능한 구조로 둔다

editor core
  -> ThreeWebGLBackend
  -> ThreeWebGPUBackend

강의의 핵심은 WebGPU로 바로 뛰어드는 것이 아니라, editor core를 유지한 채 renderer backend를 실험할 수 있게 만드는 것입니다.

shader 표현도 바뀔 수 있다

TSL은 shader를 JavaScript/Node 기반 표현으로 구성해 renderer backend 차이를 줄이려는 방향입니다. 이 단계에서는 문법을 깊게 외우기보다 “shader 코드도 backend 경계 안에 둔다”는 구조만 잡습니다.

오늘의 핵심

WebGPURenderer와 TSL은 다음 단계입니다. 지금 만든 renderer-independent core가 있어야 이 실험이 위험하지 않습니다.