positionLocal

PositionLocal - Three.js Shading Language Tutorials

positionLocal 노드는 TSL(Three.js Shading Language)에서 제공하는 유용한 노드 중 하나로, 객체의 로컬 좌표계를 활용할 수 있게 해줍니다.

이를 통해 셰이더에서 객체의 위치 정보를 보다 직관적으로 다룰 수 있습니다.

const main = React.useMemo(
  () =>
    Fn(() => {
      const p = positionLocal.mul(2);

      p.assign(rotateUV(p.xy, time, vec2()));

      If(abs(p.x).greaterThan(0.95), () => {
        // @ts-ignore
        p.z = 1.0;
      });

      If(abs(p.y).greaterThan(0.95), () => {
        // @ts-ignore
        p.z = 1.0;
      });

      return p;
    }),
  []
);

rotateUV 함수는 주어진 UV 좌표를 회전시키는 역할을 합니다. time 변수를 사용하여 시간에 따라 회전이 변화하도록 설정할 수 있습니다.

x, y 좌표의 절대값이 0.95보다 클 경우 z 좌표를 1.0으로 설정합니다.

main 노드는 fragmentNode에 연결되어 객체의 색상을 결정하는 데 사용됩니다.

따라서 0.95를 초과하는 x 또는 y 좌표를 가진 픽셀은 z 값이 1.0으로 설정되어 blue 색상을 최대값으로 적용합니다.

Vertex Shader WGSL 생성 코드

Fragment Shader WGSL생성 코드

셰이더 코드

  // p = positionLocal.mul(2);
  nodeVar0 = ( positionLocal * vec3<f32>( 2.0 ) );

  // rotateUV(p.xy, time, vec2())
	nodeVar1 = cos( render.nodeUniform0 );
	nodeVar2 = sin( render.nodeUniform0 );
	nodeVar0 = vec3<f32>( ( ( mat2x2<f32>( nodeVar1, nodeVar2, ( - nodeVar2 ), nodeVar1 ) * ( nodeVar0.xy - vec2<f32>( 0.0, 0.0 ) ) ) + vec2<f32>( 0.0, 0.0 ) ), 0.0 );

  // If(abs(p.x).greaterThan(0.95), () => { p.z = 1.0; });
	if ( ( abs( nodeVar0.x ) > 0.95 ) ) {
		nodeVar0.z = 1.0;
	}

  // If(abs(p.y).greaterThan(0.95), () => { p.z = 1.0; });
	if ( ( abs( nodeVar0.y ) > 0.95 ) ) {
		nodeVar0.z = 1.0;
	}

	// result
	output.color = vec4<f32>( nodeVar0, 1.0 );
	return output;

위와 같이 fragment shader 코드가 생성됩니다.

마치며

이번 포스트에서는 TSL의 positionLocal 노드를 사용하여 객체의 로컬 좌표계를 활용하는 방법을 알아보았습니다.

그 밖에 mul, rotateUV, If, abs, greaterThan 등의 노드도 함께 살펴보았습니다.

TSL: positionLocal

positionLocal

Vertex Shader WGSL 생성 코드

Fragment Shader WGSL생성 코드

셰이더 코드

마치며