소개

Uniforms - Three.js Shading Language Tutorials

Uniform 변수는 셰이더에서 모든 정점이나 픽셀에 대해 동일한 값을 갖는 변수입니다. TSL에서는 time과 같은 내장 uniform 변수를 제공하여 시간에 따라 변화하는 애니메이션을 쉽게 만들 수 있습니다.

이번 포스트에서는 time uniform을 활용하여 화려한 애니메이션 패턴을 만드는 방법을 알아보겠습니다.

기본 구조

먼저 fragment shader 노드를 정의합니다. 이 노드는 각 픽셀의 색상을 결정하는 역할을 합니다.

const fragmentNode = Fn(() => {
  const p = positionLocal.toVar();
  p.mulAssign(5);
  const radius = float(0.1);
  const intensity = 2;

  const colours = [vec3(1.0, 0.05, 0.3), vec3(0.1, 0.4, 1.0), vec3(0.2, 1.0, 0.2)];

  const finaleColor = vec3(0.0, 0.0, 0.0);

  for (let i = 0; i < colours.length; i++) {
    p.mulAssign(sin(i).add(0.5));
    p.assign(fract(p).sub(0.5));
    const distance = length(p);

    distance.assign(sin(distance.mul(10).sub(time)));
    distance.assign(abs(distance));

    distance.assign(pow(radius.div(distance), intensity));

    const col = colours[i];
    finaleColor.assign(max(finaleColor, col.mul(distance)));
  }

  return finaleColor;
});

코드 설명

좌표 변환

const p = positionLocal.toVar();
p.mulAssign(5);

positionLocal을 변수로 만들고 5배 확대합니다. 이를 통해 패턴의 스케일을 조정할 수 있습니다.

색상 정의

const colours = [vec3(1.0, 0.05, 0.3), vec3(0.1, 0.4, 1.0), vec3(0.2, 1.0, 0.2)];

빨강, 파랑, 초록 계열의 3가지 색상을 정의합니다. 이 색상들이 반복문을 통해 혼합되어 최종 패턴을 만듭니다.

반복문을 통한 패턴 생성

for (let i = 0; i < colours.length; i++) {
  p.mulAssign(sin(i).add(0.5));
  p.assign(fract(p).sub(0.5));
  const distance = length(p);

  distance.assign(sin(distance.mul(10).sub(time)));
  distance.assign(abs(distance));

  distance.assign(pow(radius.div(distance), intensity));

  const col = colours[i];
  finaleColor.assign(max(finaleColor, col.mul(distance)));
}

각 색상에 대해:

좌표 변형: sin 함수로 좌표를 비선형적으로 변형합니다
fract 함수: 좌표의 소수 부분만 취하여 반복 패턴을 만듭니다
거리 계산: 중심으로부터의 거리를 계산합니다
time uniform 활용: distance.mul(10).sub(time)을 통해 시간에 따라 변화하는 파동 패턴을 만듭니다
밝기 조정: pow(radius.div(distance), intensity)로 중심에서 멀어질수록 밝기를 조정합니다
색상 혼합: max 함수를 사용하여 여러 색상 중 가장 밝은 값을 선택합니다

time Uniform의 역할

time은 TSL에서 제공하는 내장 uniform 변수로, 렌더링이 시작된 이후의 경과 시간(초)을 나타냅니다.

distance.assign(sin(distance.mul(10).sub(time)));

이 코드에서 time을 빼줌으로써, 거리에 따른 sin 함수의 위상이 시간에 따라 이동하며 파동이 움직이는 효과를 만듭니다.

결과

Vertex Shader WGSL 생성 코드

Fragment Shader WGSL생성 코드

위 예제를 실행하면 시간에 따라 변화하는 화려한 색상 패턴을 볼 수 있습니다. 세 가지 색상이 서로 다른 방식으로 변형되어 복잡하고 아름다운 패턴을 만들어냅니다.

마치며

이번 포스트에서는 TSL의 time uniform 변수를 활용하여 애니메이션 패턴을 만드는 방법을 알아보았습니다.

fract, sin, length, abs, pow 등의 수학 함수와 time uniform을 조합하면 무한히 다양한 시각 효과를 만들 수 있습니다.

TSL: Uniforms

소개