能否将Compute Shader输出的GPUBuffer用作Three.js/Babylon.js顶点位置缓冲？

我正在进行WebGPU实验，发现CPU与GPU之间的数据传输速度较慢。我的目标是使用WebGPU的Compute Shader在GPU上模拟粒子物理，再借助Three.js或Babylon.js的易用性展示结果。目前我的模拟已实现，但每帧都需要在GPU与CPU间传输数据以计算新位置并通过Three.js展示，核心瓶颈在cloth.Update()后的顶点数据回传与更新。

现有核心代码片段：

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();
    // 获取顶点位置的Float32Array引用
    const vertices = cloth.GetPositions();
    // 获取顶点索引的Uint32Array引用
    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);

    // 计算网格包围盒并设置相机位置
    const box = new THREE.Box3().setFromObject(mesh);
    const center = box.getCenter(new THREE.Vector3());
    camera.position.copy(center);
    camera.position.z += 5;
    controls.target.copy(center);

    async function animate() {
        // 每帧更新顶点位置，瓶颈在于GPU与CPU间的数据传输
        await cloth.Update(0.001);
        geometry.getAttribute("position").needsUpdate = true;
        await renderer.render(scene, camera);
        controls.update();
        requestAnimationFrame(animate);
    }
    await animate()
}

核心疑问 #

1. 是否可以让Three.js或Babylon.js直接使用GPU上已有的缓冲作为顶点位置缓冲以最大化性能？
2. 希望继续使用WGSL编写计算部分而非库特定语言，具体来说，在Three.js中能否将GPUBuffer用作BufferAttribute？

Three.js 实现零数据传输渲染 #

Three.js的WebGPU渲染器支持直接复用外部创建的GPUBuffer，完全避免CPU-GPU数据回传。核心思路是让计算管线和渲染管线共享同一块GPU内存，计算 shader 直接写入顶点缓冲，渲染管线直接读取该缓冲。

具体步骤 #

1. 调整Cloth类，暴露GPU缓冲而非CPU数组

修改你的物理模拟类，创建同时支持计算写入和顶点读取的GPUBuffer，并对外暴露该缓冲：

class Cloth {
    constructor(gpuDevice) {
        this.device = gpuDevice;
        const vertexCount = /* 你的顶点数量 */;
        // 创建兼容计算存储和顶点读取的缓冲
        this.positionBuffer = this.device.createBuffer({
            size: vertexCount * 4 * 4, // 4个float/顶点 × 4字节/float
            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
            mappedAtCreation: true // 初始化时映射填充数据
        });
        // 填充初始顶点数据（仅执行一次）
        const initialVertices = new Float32Array(/* 初始顶点数组 */);
        new Float32Array(this.positionBuffer.getMappedRange()).set(initialVertices);
        this.positionBuffer.unmap();

        // 初始化你的WGSL计算管线、绑定组等逻辑
        this.computePipeline = /* 你的计算管线实例 */;
        this.bindGroup = /* 包含positionBuffer的绑定组 */;
    }

    // 返回GPUBuffer，而非CPU数组
    GetPositionGPUBuffer() {
        return this.positionBuffer;
    }

    // Update仅在GPU执行计算，无需回传数据
    async Update(deltaTime) {
        const commandEncoder = this.device.createCommandEncoder();
        const computePass = commandEncoder.beginComputePass();
        computePass.setPipeline(this.computePipeline);
        computePass.setBindGroup(0, this.bindGroup);
        computePass.dispatchWorkgroups(Math.ceil(vertexCount / 64));
        computePass.end();
        this.device.queue.submit([commandEncoder.finish()]);
        // 无需等待CPU映射，直接让渲染管线读取更新后的缓冲
    }
}

2. 在Three.js中绑定外部GPUBuffer

使用Three.js的WebGPUBufferAttribute（需确保使用最新稳定版Three.js），直接关联你的外部GPU缓冲：

// 替换原BufferAttribute创建逻辑
const positionGPUBuffer = cloth.GetPositionGPUBuffer();
const positionAttribute = new THREE.WebGPUBufferAttribute(
    positionGPUBuffer,
    4, // 每个顶点的分量数
    THREE.Float32BufferAttribute // 数据类型
);
geometry.setAttribute('position', positionAttribute);

// 动画循环中移除CPU端更新逻辑
async function animate() {
    await cloth.Update(0.001);
    // 不需要设置needsUpdate，GPU缓冲已被计算shader直接更新
    await renderer.render(scene, camera);
    controls.update();
    requestAnimationFrame(animate);
}

关键注意事项

• 必须确保GPUBuffer的usage包含GPUBufferUsage.STORAGE（计算写入）和GPUBufferUsage.VERTEX（渲染读取）。
• 绝对不要在每帧映射缓冲到CPU，彻底切断CPU-GPU数据传输路径。
• Three.js会自动管理缓冲的引用生命周期，只要缓冲在渲染期间保持有效即可。

Babylon.js 实现零数据传输渲染 #

Babylon.js同样支持复用外部WebGPU资源，核心逻辑与Three.js一致：

1. 创建带有VERTEX和STORAGE usage的GPUBuffer。
2. 使用VertexBuffer.CreateFromNativeBuffer将外部缓冲包装为Babylon.js的顶点缓冲：

// 将外部GPUBuffer转为Babylon.js顶点缓冲
const nativeVertexBuffer = BABYLON.VertexBuffer.CreateFromNativeBuffer(
    engine, // Babylon.js的WebGPUEngine实例
    positionGPUBuffer, // 你的外部GPUBuffer
    BABYLON.VertexBuffer.PositionKind,
    false, // 由计算shader更新，设为不可CPU更新
    4, // 顶点分量数
    BABYLON.Engine.FLOAT, // 数据类型
    0, // 偏移量
    0 // 步长（0表示紧密排列）
);

// 绑定到网格
mesh.geometry.setVerticesBuffer(nativeVertexBuffer);

计算 shader 更新GPU缓冲后，Babylon.js会直接读取最新数据渲染，无需回传CPU。

WGSL兼容性说明 #

无论是Three.js还是Babylon.js，都允许你完全自定义WGSL计算 shader，无需使用库特定着色器语言。只需保证计算 shader 写入的缓冲格式（分量数、数据类型、内存布局）与渲染管线期望的顶点格式完全匹配即可。

内容的提问来源于stack exchange，提问作者Victor