TSL: Some patterns

TSL(Three.js Shading Language)을 사용하여 다양한 패턴을 생성하는 방법을 살펴봅니다.

2025-11-28

소개

참고: Some Patterns - Three.js Shading Language Tutorials

Start Script

<nodeMaterial fragmentNode={positionLocal} />
Vertex Shader WGSL 생성 코드
Fragment Shader WGSL생성 코드

단순히 positionLocal 노드를 프래그먼트 셰이더에 연결하면, 정점 셰이더에서 전달된 로컬 좌표를 프래그먼트 셰이더에서 사용할 수 있습니다.

Example 1 : Checkered Cube

<nodeMaterial fragmentNode={positionLocal.mul(5).fract().step(0.5)} />
Vertex Shader WGSL 생성 코드
Fragment Shader WGSL생성 코드

크기가 1인 큐브의 로컬 좌표를 5배 확대한 후, 소수점 이하를 잘라내어 0과 1 사이의 값을 만들고, 0.5를 기준으로 계단 함수를 적용하여 체크무늬 패턴을 생성합니다.

Example 2 : Ringed Cube

<nodeMaterial fragmentNode={positionLocal.length().mul(15).fract().step(0.5)} />
Vertex Shader WGSL 생성 코드
Fragment Shader WGSL생성 코드

큐브의 로컬 좌표의 길이를 계산하여 중심에서 멀어질수록 값이 커지도록 한 후, 15배 확대한 후 소수점 이하를 잘라내어 0과 1 사이의 값을 만들고, 0.5를 기준으로 계단 함수를 적용하여 링 패턴을 생성합니다.

Example 3 : Animated Resizing Rings

const main = React.useMemo(() => {
  const ret = Fn(() => {
    const p = positionLocal.toVar();
    p.mulAssign(5);
    p.assign(p.fract().step(0.5));
    p.assign(length(p));
    p.assign(sin(p.mul(10).add(time)));
    p.assign(abs(p));
    p.assign(step(0.5, p));
    return p;
  });
  return ret();
}, []);
Vertex Shader WGSL 생성 코드
Fragment Shader WGSL생성 코드

Example 4 : Psychedelic Swirl

const main = React.useMemo(() => {
  const ret = Fn(() => {
    const p = positionLocal.toVar();
    p.assign(rotateUV(p.xy, time, vec2()));
    p.assign(length(p.mul(5)).sub(atan(p.zy, p.zx)).mul(5));
    p.sinAssign();
    p.mulAssign(5);
    p.assign(vec3(p.x.add(sin(time).mul(5)), p.y.add(cos(time).mul(5)), 0));
    return p;
  });
  return ret();
}, []);
Vertex Shader WGSL 생성 코드
Fragment Shader WGSL생성 코드

마치며

이번 포스트에서는 TSL(Three.js Shading Language)을 사용하여 다양한 패턴을 생성하는 방법을 살펴보았습니다.

Loading script...