TSL Tips

normalNode에 대한 적용을 위해 bumpMap 노드를 사용

const diffuseTex = loader.load('./brick_diffuse.jpg');
diffuseTex.colorSpace = THREE.SRGBColorSpace;

const bumpTex = loader.load('./brick_bump.jpg');

const wallMat = new THREE.MeshStandardNodeMaterial();

wallMat.colorNode = texture(diffuseTex);
wallMat.normalNode = bumpMap(texture(bumpTex), float(5));

각도와 거리에 대한 가하학적 계산식

GPU를 통해 쓰고 읽을 수 있는 텍스쳐

/* 필요한 API 임포트 */
import { texture, textureStore, Fn, instanceIndex, float, uvec2, vec4, time } from 'three/tsl';

/* 스토리지 텍스쳐 생성 */
const width = 512, height = 512;
const storageTexture = new THREE.StorageTexture(width, height);

/* 텍스쳐 내용 생성 함수 정의 */
const computeTexture = Fn(({ storageTexture }) => {
  const posX = instanceIndex.mod(width);
  const posY = instanceIndex.div(width);
  const indexUV = uvec2(posX, posY);

  const x = float(posX).div(50.0);
  const y = float(posY).div(50.0);

  const v1 = x.sin();
  const v2 = y.sin();
  const v3 = x.add(y.add(time.mul(1))).sin();
  const v4 = x.mul(x).add(y.mul(y)).sqrt().add(5.0).sin();
  const v = v1.add(v2, v3, v4);

  const r = v.sin();
  const g = v.add(Math.PI).sin();
  const b = v.add(Math.PI).sub(0.5).sin();

  textureStore(storageTexture, indexUV, vec4(r, g, b, 1)).toWriteOnly();
});

/* 텍스쳐 내용 생성 함수 실행 */
const computeNode = computeTexture({ storageTexture }).compute(width * height);
this._renderer.compute(computeNode);

/* 텍스쳐 활용 */
const material = new THREE.MeshBasicNodeMaterial({ color: 0x00ff00 });
material.colorNode = texture(storageTexture);