billboarding
Makes a 2D plane always face the camera, efficiently simulating 3D objects or UI elements at a low cost.
Core Advantages
Encapsulates the complex matrix transformation (billboarding algorithm) into a single function, greatly simplifying vertex shader logic. It eliminates the need for manual matrix math and provides flexible orientation control through parameters.
Common Uses
Particle systems (smoke, sparks, raindrops)
In-game UI (name tags, health bars)
Distant object optimization (Imposters, e.g., distant trees)
Lens flare effects
How to adjust
Adjust the `horizontal` and `vertical` boolean parameters to achieve different styles: spherical billboarding (both `true`, for particles/UI) or cylindrical billboarding (only `horizontal` is `true`, for imposters like distant trees). Use the `position` parameter to apply the effect to a dynamically calculated position (e.g., from a GPU particle system), decoupling it from the object's original transform.
Code Examples
1// Apply billboarding to a dynamic position calculated by the GPU
2const particleWorldPosition = particleDataBuffer.element( instanceId ).position;
3model.positionNode = billboarding( { position: particleWorldPosition } );