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