Creative WebGL and Shaders

WebGL is a cost, not a credential. It is justified when the effect needs per-pixel work, a real 3D scene, or thousands of independent elements. Everything else should stay in the DOM.

Core principle: every WebGL scene must have a designed life without WebGL.

When to Use

• A hero or full-screen visual needs shader work: gradients, noise, displacement, liquid, RGB split, refraction.
• Images or video must bend, ripple, or transition as shader planes.
• A product must be viewed in 3D, rotated, configured, or revealed through a scroll-driven camera.
• A particle field, instanced mesh system, or generative background is part of the concept.
• A DOM-to-WebGL effect is required for editorial imagery.
• A Three.js/R3F scene needs postprocessing, performance review, or cleanup.

When Not to Use