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 이미지로 캡쳐가 안되서 너무 구리게 보이는데….