ComputeNode
A powerful GPGPU (General-Purpose GPU Computing) interface that allows developers to leverage the parallel processing power of the GPU for non-rendering tasks like physics simulations, image processing, and procedural generation, greatly simplifying the complexity of low-level WebGPU/WebGL.
Core Advantages
It encapsulates complex GPGPU setup into a 'one-click' solution, seamlessly integrating with the Three.js node system. This allows developers to focus on the computational logic itself, like writing a normal program, without worrying about low-level details like pipelines, buffers, and synchronization.
Common Uses
Physics simulation for large-scale particle systems (e.g., nebulas, waterfalls)
Real-time image processing and post-processing effects (e.g., Gaussian blur, depth of field)
Procedural geometry generation and deformation (e.g., waving flags, water surfaces)
Complex physical simulations like fluids and cloth
How to adjust
Adjusting the `count` parameter directly increases or decreases the total number of computation units, e.g., changing the particle count in a system. Modifying its core computation logic (the `node` parameter) completely changes its behavior: introducing a `time` node can create acceleration/deceleration effects; connecting a `uniform` node representing the mouse position enables real-time user interaction; using a `texture` node as a force field can create complex turbulent or swirling dynamics based on the texture pattern.
Code Examples
1
2// Add a velocity vector to the particle based on the current computation index.
3// This operation directly modifies the data in the buffer.
4positionBuffer.element( globalIndex ).addAssign( velocity );
5