소개

지난 포스팅에 이어 TSL에 대한 기초적인 내용을 다룹니다.

TSL(Three.js Shading Language)은 Three.js에서 셰이더 프로그래밍을 보다 쉽게 할 수 있도록 도와주는 라이브러리입니다.

이번 포스팅에서는 SBCODE 사이트에서 제공하는 Three.js Shading Language Tutorials의 내용을 살펴보겠습니다.

Getting Started - Three.js Shading Language Tutorials

기본 설정

function App01() {
  const fragmentNode = React.useMemo(() => TSL.color('crimson'), []); // 2. 간단한 색상 노드 생성
  return (
    <TslDebugProvider>
      <Area>
        {() => (
          <Canvas
            camera={{ position: [0, 0, 1.8] }}
            gl={async (props) => {
              // 1. WebGPU 렌더러 설정
              const renderer = new THREE.WebGPURenderer(props as any);
              renderer['capabilities'] = {
                getMaxAnisotropy() {
                  return 0;
                },
              };
              await renderer.init();
              return renderer;
            }}
          >
            <ambientLight />
            <pointLight position={[10, 10, 10]} />
            <group>
              <mesh name="node-mesh">
                <boxGeometry args={[1, 1, 1]} />
                <nodeMaterial fragmentNode={fragmentNode} /> {/* 3. 노드 머티리얼에 프래그먼트 노드 연결 */}
                <TslDebug meshName={'node-mesh'} />
              </mesh>
            </group>
            <OrbitControls />
            <gridHelper args={[10, 10]} />
            <GizmoHelper alignment="bottom-right" margin={[80, 80]}>
              <GizmoViewport axisColors={['red', 'green', 'blue']} labelColor="black" />
            </GizmoHelper>
          </Canvas>
        )}
      </Area>
      <TslDebugViewer showFragmentShader />
    </TslDebugProvider>
  );
}

1. WebGPU 렌더러 설정: gl prop을 사용하여 Three.js의 WebGPU 렌더러를 설정합니다.
2. 간단한 색상 노드 생성: TSL.color('crimson')를 사용하여 빨간색을 반환하는 프래그먼트 노드를 생성합니다.
3. 노드 머티리얼에 프래그먼트 노드 연결: 생성한 프래그먼트 노드를 nodeMaterial 컴포넌트의 fragmentNode prop에 연결하여 메시에 적용합니다.

TSL은 변수와 함수를 노드라는 개념을 사용하여 조합합니다.

기존 fragment shader 코드 대신 색상 노드를 정의하여 material에 적용합니다.

아래는 위 코드의 실행 결과입니다. 하단에는 TSL가 생성한 WGSL 코드를 표시하였습니다.

텍스쳐 사용

const fragmentNode = React.useMemo(() => TSL.texture(new THREE.TextureLoader().load(srcGrid.src)), []);

텍스처를 적용해 보겠습니다.

생성한 shader 코드를 살펴 보면, uv 좌표가 nodeVarying3 varying 변수로 전달되는 것을 볼 수 있습니다.

결국 정육면체의 각 면에 텍스처가 올바르게 매핑되도록 하기 위해 TSL이 자동으로 varying 변수를 생성하고 전달하는 것을 알 수 있습니다.

Position 정보를 색상으로 사용

<nodeMaterial fragmentNode={TSL.positionLocal} />

이번에는 TSL에서 제공하는 positionLocal 노드를 사용하여 정육면체의 로컬 좌표를 색상으로 매핑해 보았습니다.

vertex shader에서 position 값을 positionLocal varying 변수로 전달하면 보간과정을 통해 각 픽셀에 대한 색상을 결정하는 fragment shader로 전달합니다.

fragment shader에서는 이 값을 색상으로 사용하여 정육면체의 각 면이 좌표에 따라 색상이 변하는 것을 확인할 수 있습니다.

마치며

이번 포스팅에서는 TSL의 간단한 예제를 살펴보았습니다.

node라는 개념을 사용하여 fragment shader를 구성해보고 색상, 텍스처, 위치 정보를 활용하는 방법을 알아보았습니다.