[작성자:] 김 형준

작성일자

three.js, TSL 노드 varying 예제

vertex shader의 결과를 fragment shader로 전달하기 위한 varying을 TSL 노드로 사용하기 위한 예제입니다. 먼저 varying으로 사용될 데이터를 정의합니다.

const colorVarying = vec3(0).toVarying(); // same as varying(vec3(0))

이 varying 데이터의 값을 재질의 vertex shader에 해당하는 positionNode에서 할당합니다.

material.positionNode = Fn(() => {
  ...

  colorVarying.assign(texture(colorTexture, colorUv).rgb)

  ...
}

varying 데이터를 재질의 다양한 fragment shader 중 하나에 해당하는 colorNode에서 사용합니다.

material.colorNode = colorVarying
작성일자

three.js, WebGPU의 storage 데이터를 CPU와 GPU에서 변경하기

일단 GPU 단에 storage를 생성하기 위해서는 다음과 같은 코드가 필요합니다.

import * as THREE from 'three/webgpu';
import { storage, compute, float, Fn } from 'three/tsl';

const count = 4;
const initialData = new Float32Array([1.0, 2.0, 3.0, 4.0]);
const storageAttr = new THREE.StorageBufferAttribute(initialData, 1);
const storageNode = storage(storageAttr, 'float', count);

이 상태에서 CPU에서 storage의 값을 변경하기 위한 코드 예시는 다음과 같습니다.

// CPU 배열의 첫 번째 값을 100.0으로 변경
storageAttr.array[0] = 100.0;
    
// 변경 사항이 있음을 렌더러/GPU에 알림
storageAttr.needsUpdate = true;

GPU에서 변경하는 코드 예시는 다음과 같구요.

// 첫 번째 값에 1을 더함
storageNode.element(0).addAssign(1.0);

다음 코드는 storage 데이터 전체를 CPU에서 접근할 수 있도록 비동기적으로 읽는 코드입니다.

async function readDataFromGPU(renderer) {
    // GPU 버퍼 데이터를 CPU TypedArray로 가져옴
    const arrayBuffer = await renderer.getArrayBufferAsync(storageAttr);
    const cpuResultArray = new Float32Array(arrayBuffer);
    
    console.log("CPU에서 읽어온 GPU 스토리지 값:", cpuResultArray);
}

(코드 검증이 필요함)

작성일자

three.js, 특정 각도에 항상 수렴하도록 하는 코드

const tick = () => {
    timer.update()
    const deltaTime = Math.min(1 / 30, timer.getDelta())

    const wantedDegree = 0;
    mesh.rotation.x += 
        (THREE.MathUtils.degToRad(wantedDegree) - mesh.rotation.x) * deltaTime
 
    // Render
    renderPipeline.render()
}

위의 코드는 mesh를 x축에 대한 rotation이 변경될 경우 점진적으로 wantedDegree 값으로 복구하도록 하는 코드입니다. 이 코드는 각도 뿐만 아니라 일반적인 값에도 적용할 수 있습니다.