Three.JS – GIS Developer

2026-01-252026-01-25

TSL에서 법선벡터와 관련된 노드 함수에 대한 고찰

fragmentNode에서 사용할 수 있는 일반적인 법선벡터는 normalWorld 노드이다. normalWorld은 이미 normalize가 되어 있다. transform이 전혀 이뤄지지 않았을지라도 normalLocal은 normalWorld와 다르며 normalLocal을 정규화해야 비로써 normalWorld와 같아진다. 즉, normalWorld.sub(normalLocal)은 0 벡터가 아니며 normalWorld.sub(normalLocal.normalize())가 0 벡터라는 것인데, 전제 조건은 transform이 전혀 이뤄지지 않았을때이다. normalWorld를 직접 계산해 보면 다음과 같다.

const normalView = vertexStage( modelNormalMatrix.mul( normalLocal ) );

vertexStage 노드는 vertex shader에서 varying(보간)으로 fragment로 넘겨준다. varying으로 넘겨줬고 법선벡터는 단위벡터로 사용되어야 하므로 넘겨받은 fragment 측에서 반드시 정규화를 시켜야 한다. 즉, normalWorld와 직접 계산한 normalView가 동일한 값을 가지려면 normalView를 정규화해야 한다.

가끔 시각화를 통해 normal의 동일성 여부를 확인하려고 할때가 있다. 즉, 아래의 코드처럼 말이다.

material.fragmentNode = Fn(([]) => {
  const color = normalWorld.sub(normalLocal);
  return vec4(color, 1);
})();

결과는 마치 normalWorld와 normalLocal이 동일하기라도 한것처럼 까맣게 표시된다. 하지만 아니다. 위의 코드 중 normalWorld.sub(normalLocal)의 결과값에 1000정도 곱해줘 값을 증폭시켜 보면 다음처럼 값에 대한 차이값을 눈으로 볼 수 있다.

쉐이더 프로그래밍의 디버깅은 이처럼 사람의 눈으로 직접 확인하는 방법 이외에 뾰족한 수가 없다는 문제가 있는데, 위와 같은 상황도 있다는 것을 미리 알아두면 좋을 것이다.

2026-01-202026-01-20

뭐야, 이 볼록볼록한 느낌은 …

material.fragmentNode = Fn(([]) => {
  const { x, y } = uv().mul(10).fract();

  const a = float(.1).div( atan(x, y).div(Math.PI*2).add(.5) ).pow(2).mul(10);

  return vec4(vec3(a), 1);
})();

2026-01-202026-01-20

TSL에서 2D 회전

어떤 2차원 좌표(st)를 정해진 중심점(mid)을 기준으로 원하는 각도(rotation)만큼 회전된 결과를 얻는 TSL 함수 정의는 다음과 같다.

const _rotate = Fn(([st, rotation, mid]) => {
  return vec2(
    cos(rotation).mul(st.x.sub(mid.x)).add(sin(rotation).mul(st.y.sub(mid.y))).add(mid.x),
    cos(rotation).mul(st.y.sub(mid.y)).sub(sin(rotation).mul(st.x.sub(mid.x))).add(mid.y),
  );
}, { st: 'vec2', rotation: 'float', mid: 'vec2', return: 'vec2'})

TSL에서 위의 함수처럼 2D 회전에 대한 내장 함수를 제공하는데 바로 rotateUV 노드 함수이다. rotateUV 노드 함수는 3차원 좌표를 회전하는 TSL 내장 함수인 rotate를 사용한 것에 지나지 않는다.

즉, 아래의 결과는 모두 같다.

material.fragmentNode = Fn(([]) => {
  const { x, y } = uv().toVar();

  const rotatedUv = _rotate(vec2(x, y), Math.PI * 0.25, vec2(0.5));
  // const rotatedUv = rotateUV(vec2(x, y), Math.PI * 0.25, vec2(0.5)); // 위와 같고
  // const rotatedUv = rotate(vec2(x, y).sub(vec2(0.5)), Math.PI * 0.25).add(vec2(0.5)) // 또 위와 같고..

  const l1 = float(0.03).div(length(rotatedUv.sub(vec2(.5, .5)).mul(vec2(.2, 1))));
  const l2 = float(0.03).div(length(rotatedUv.sub(vec2(.5, .5)).mul(vec2(1, .2))));

  return vec4(vec3(mul(l1, l2)), 2);
})();

아래 이미지는 위의 코드를 통해 45도 회전된 결과이다.

HDR 이미지로 캡쳐가 안되서 너무 구리게 보이는데….

2026-01-152026-01-15

Y축으로 회전 (TSL 관점)

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 만큼 이동

2026-01-122026-01-12

uniform TSL 노드 함수의 update 이벤트

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)
})