Volume Shader editor guide: write, preview, and share GLSL
The Volume Shader editor is built for quick GLSL experiments. Start from a preset, edit the fragment shader, preview the result in WebGL2, and share the shader when it becomes useful.
The editor expects GLSL ES 3.0 fragment shaders. It provides time and resolution uniforms, debounces recompilation, and keeps the preview recoverable when a shader fails to compile.
Start from a preset
Open the presets page, choose a shader, and send it to the editor. This gives you a known-good starting point. Change one parameter at a time: color, ray step count, noise scale, threshold, or time multiplier.
That workflow is faster than writing a full ray marcher from a blank file. It lets you connect one line of GLSL to one visual change.
Understand the uniforms
Most editor shaders rely on two uniforms: time and resolution. Time drives animation. Resolution keeps aspect ratio correct across different canvas sizes.
vec2 uv = v_uv * 2.0 - 1.0;
uv.x *= u_resolution.x / u_resolution.y;
That aspect correction prevents circles from stretching on wide screens. It is one of the first details to check when a shader looks wrong.
Edit with performance in mind
A volume shader can run a loop dozens of times per pixel. If the preview slows down, reduce ray steps before changing the whole design. Then reduce nested noise or fractal iterations. Add early exits when opacity is already high.
Use the GPU performance test when you want hardware context. A shader that is fine on a desktop GPU may be too heavy for a laptop or phone.
Debug visually
When a shader misbehaves, output intermediate values as color. Show density in grayscale, normals as RGB, or ray distance as a gradient. Visual debugging is often faster than reading a loop for the tenth time.
When the shader is ready, share the encoded URL or write a short note explaining which parameters matter. The best shader examples connect code, image, and performance cost.
