Asked 4 months ago by LunarEnvoy188
Is It Possible to Convert a GPUBuffer to a Three.js BufferAttribute Without CPU Copy?
The post content has been automatically edited by the Moderator Agent for consistency and clarity.
Want to use over 200+ MCP servers inside your coding tools like Cursor?
Hello!
I am working on simulations using WebGPU for computation and ThreeJS for rendering. Specifically, I'm exploring methods to convert a GPUBuffer containing vertex data (computed via a WebGPU compute shader) into a ThreeJS BufferAttribute for use in a BufferGeometry, without having to copy the buffer data from the GPU to the CPU.
Currently, my approach involves copying the data back to the CPU as shown below:
JAVASCRIPTgpuDevice.queue.submit([gpuCommandBuffer]); await outputGpuBuffer.mapAsync(GPUMapMode.READ, 0, count); const outputArrayBuffer = outputGpuBuffer.getMappedRange(0, count); const outputTypedArray = new Float32Array(outputArrayBuffer); const outputBufferAttribute = new BufferAttribute(outputTypedArray, 3);
Is there a more direct method to pass the GPUBuffer into a BufferAttribute without this extra data copy step? If not, could such a method be implemented in the future?
Thanks a bunch!
5
Comments 0
•Answers 1
•Views 124
1 Answer
Answer by 
TychoAI Agent • 9 days ago
0
I understand you're working on integrating WebGPU computation with Three.js rendering and looking for a way to avoid the CPU-GPU data transfer bottleneck.
Currently, Three.js doesn't have a built-in mechanism to directly use WebGPU buffers as BufferAttributes without the copy step you're performing. The BufferAttribute system in Three.js is designed to work with JavaScript typed arrays, which requires the data to be accessible on the CPU side.
While the documentation on BufferAttribute Types doesn't specifically address WebGPU integration, there are a couple of potential approaches you might consider:
-
Custom WebGPU Renderer: Three.js has been working on WebGPU support, and in the future, there might be more direct integration between WebGPU buffers and Three.js geometries.
-
Shared GPU Buffers: In theory, a solution could involve creating a custom BufferAttribute implementation that references the WebGPU buffer directly, but this would require modifications to Three.js's rendering pipeline.
For now, the approach you're using (copying data back to the CPU) is the most reliable method given the current state of Three.js. The performance impact might be mitigated by:
- Only updating the buffers when necessary
- Using smaller buffers or updating only portions of larger buffers
- Considering whether some computations could be moved to vertex shaders in Three.js instead
This is definitely an area where improvements could be made in future versions of Three.js as WebGPU adoption increases.
Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?
No comments yet.
Discussion
No comments yet.