GIS Developer

Y축으로 회전하는 TSL 코드를 2가지 관점에서 정리하면, 먼저 Y축으로 회전하는 행렬을 직접 구성해 회전하고자 하는 정점에 적용하는 방식이다.

export const rotateY = /*@__PURE__*/ Fn( ( [ theta ] ) => {
	const c = cos( theta );
	const s = sin( theta );
    return mat3(
        c, 0, s,
        0, 1, 0,
        s.negate(), 0, c
    );

	// same as : return mat3( vec3( c, 0, s ), vec3( 0, 1, 0 ), vec3( s.negate(), 0, c ) );
}, { theta: 'float', return: 'mat3' } );

...

const p = vec3(x, y, z);
const rMat = rotateY(angle);
const rotatedP = rMat.mul(p).add(offset); // 회전하고 offsect 만큼 이동

두번째는 TSL에서 제공하는 범용적인 회전 노드 함수를 이용하는 것이다.

const rotatedP = rotate(p, vec3(0, angle, 0)).add(offset); // 회전하고 offsect 만큼 이동

TSL의 uniform은 GLSL의 uniform이다. 다음처럼 간단히 정의할 수 있다.

const myColor = uniform(new THREE.Color(0x0066ff));
material.colorNode = myColor;

TSL의 uniform은 update에 대한 3가지 이벤트를 제공한다.

이 uniform 노드를 사용하는 재질이 적용되는 Object(Mesh 등)에 대해서 호출(하나의 재질은 여러개의 매시에 적용될 수 있음)된다.

myColor.onFrameUpdate(({ object }) => { 
  myColor.value = new THREE.Color(Math.random() * 0xffffff)
})

한번의 프레임을 완성하기 위해 여러번의 렌더 pass가 필요할 수 있는데, 렌더 pass마다 호출된다.

myColor.onRenderUpdate(({ object }) => {
  myColor.value = new THREE.Color(Math.random() * 0xffffff)
})

렌더 pass가 여러번일지라도 프레임 당 딱 1번 호출된다.

myColor.onFrameUpdate(({ object }) => {
  myColor.value = new THREE.Color(Math.random() * 0xffffff)
})