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

(코드 검증이 필요함)

답글 남기기 응답 취소