typescript - ฉันสามารถใช้ GPUBuffer ซึ่งเป็นผลลัพธ์จาก compute shader เป็น buffer ตำแหน่ง vertex สำหรับ Three.js หรือ Babylon.js ได้หรือไม่?

ฉันกำลังทดลองใช้ webgpu ฉันพบว่าการถ่ายโอนข้อมูลระหว่าง CPU และ GPU อาจช้าได้

เป้าหมายของฉันคือการจำลองฟิสิกส์อนุภาคบน GPU โดยใช้ compute shaders ของ WebGPU จากนั้นใช้ความสะดวกในการใช้งานของ Three.js หรือ Babylon.js เพื่อแสดงผลลัพธ์

ปัจจุบัน การจำลองของฉันทำงานได้ แต่ฉันส่งข้อมูลไปยังและจาก GPU ทุกเฟรม เพื่อคำนวณตำแหน่งใหม่ และจากนั้นเพื่อการแสดงผลโดยใช้ Three.js ดังที่คุณเห็นในโค้ดด้านล่าง

import { Cloth } from "./physim.js";
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { InitDevice } from './webgpu/webgpu.js';

import * as THREE from 'three';
import WebGPURenderer from 'three/examples/jsm/renderers/webgpu/WebGPURenderer.js';

export async function Simulate() {
    const gpu = await InitDevice();
    const cloth = new Cloth(gpu);

    const width = window.innerWidth * 0.9;
    const height = window.innerHeight * 0.9;
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

    const renderer = new WebGPURenderer({
        antialias: true,
        forceWebGL: false,
    });
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);
    const controls = new OrbitControls(camera, renderer.domElement);

    const geometry = new THREE.BufferGeometry();

    // Get a Float32Array reference representing the vertex positions
    const vertices = cloth.GetPositions();

    // Get a Uint32Array reference representing the vertex indices
    const indices = cloth.GetVertexIndices();

    geometry.setIndex(indices);
    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 4));

    const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
    const mesh = new THREE.Mesh(geometry, material);

    scene.add(mesh);
    // Calculate the bounding box of the mesh
    const box = new THREE.Box3().setFromObject(mesh);

    // Get the center of the bounding box
    const center = box.getCenter(new THREE.Vector3());

    // Set the camera's position to the center of the bounding box
    camera.position.copy(center);

    // Move the camera back so the object isn't too large in the view
    camera.position.z += 5;

    // Make the controls look at the center of the bounding box
    controls.target.copy(center);

    async function animate() {
        // uodate the vertices positions buffer. It is quite slow because the buffer is transffered to and from the GPU every frame
        await cloth.Update(0.001);
        geometry.getAttribute("position").needsUpdate = true;
        await renderer.render(scene, camera);
        controls.update();
        requestAnimationFrame(animate);
    }

    await animate()
}

มีวิธีใดบอก Three.js หรือ Babylon.js ให้ใช้บัฟเฟอร์ (เป็นตำแหน่งเวอร์เท็กซ์) ที่อยู่บน GPU อยู่แล้วเพื่อเพิ่มประสิทธิภาพสูงสุดหรือไม่? ฉันต้องการใช้ wgsl shaders ต่อไป แทนที่จะใช้ภาษาของไลบรารีเฉพาะสำหรับส่วนการคำนวณ

ในอีกแง่หนึ่ง โดยเฉพาะสำหรับ Three.js ฉันสามารถใช้ GPUBuffer เป็น BufferAttribute ได้หรือไม่?