Featured Article

Deep dive: how the four Volume Shader presets work

Volume Shader Team
2025-11-09
8 min read
590 views
Presets
Ray Marching
Tutorial
GLSL
Deep dive: how the four Volume Shader presets work

Deep dive: how the four Volume Shader presets work

The four presets in the Volume Shader editor are compact lessons in real-time volumetric rendering. Fog Sphere teaches distance fields and density. Twirl Smoke shows how coordinate warping can look volumetric without a full 3D field. Cloud Layer introduces true density accumulation. 3D Fractal pushes ray marching toward procedural surface rendering.

Use this article as a map before opening the presets page. Each preset becomes easier to edit once you know what it is trying to teach.

Quick comparison

Preset Core idea Best lesson Cost
Fog Sphere SDF density Turning distance into fog Medium
Twirl Smoke 2D noise warp Motion through coordinates Low
Cloud Layer 3D noise Volume accumulation Medium
3D Fractal Iterative field Ray-marched surfaces High

Ray marching samples through a cyan fog sphere

Fog Sphere: distance becomes density

Fog Sphere is the best first preset because the logic is visible. A camera ray steps through space. At each point, the shader asks how far the point is from a sphere. That distance becomes density, and density becomes color.

float sdSphere(vec3 p, float r) {
  return length(p) - r;
}

float density = clamp(0.7 - sdSphere(p, 0.7), 0.0, 1.0);
fog += density * 0.04;

Change the radius, density multiplier, or step size in the editor. The same shader can feel like mist, plasma, glass, or atmosphere.

Twirl Smoke: cheap motion from warped coordinates

Twirl Smoke uses 2D noise, but it bends the sample coordinates in polar space. The farther a point is from the center, the more the angle turns. This creates a vortex without marching through a full 3D volume.

That makes the preset useful for lightweight backgrounds, loading states, and mobile-friendly shader effects. If performance matters more than physical depth, this pattern is worth remembering.

Cloud Layer: a real density field

Cloud Layer marches through 3D noise. Instead of one hard surface, it adds many soft samples together. Threshold controls where cloud material appears. Step count controls smoothness. Density controls how fast the cloud becomes opaque.

The tradeoff is direct: more samples usually look smoother, but every sample runs for every pixel. Test heavy edits against the GPU performance test before assuming they are safe.

Four shader preset previews in a dark WebGL editor

3D Fractal: math as geometry

3D Fractal uses an iterative field. The shader marches through space until the field behaves like a hit, estimates a normal, and applies lighting. The result feels more solid than fog or clouds because the volume function is being used as a procedural surface.

This preset is the strongest art showcase, but also the easiest to overload. Reduce ray steps first when tuning performance. Then reduce fractal iterations if the frame time is still unstable.

Learning path

Start with Fog Sphere, then Twirl Smoke, then Cloud Layer, then 3D Fractal. That order moves from the cleanest mental model to the most advanced. Keep the leaderboard nearby when you want hardware context for heavier experiments.

FAQ

Which Volume Shader preset should I start with?
Start with Fog Sphere because its distance-field density is the easiest to read and edit. Move to Twirl Smoke, Cloud Layer, and 3D Fractal after the ray marching loop feels familiar.
Why is Cloud Layer more expensive than Twirl Smoke?
Cloud Layer samples a 3D density field across many ray steps, while Twirl Smoke mostly warps 2D coordinates. More samples and more field evaluation usually mean higher fragment shader cost.
How should I tune a preset that runs slowly?
Lower ray steps first, then reduce fractal iterations or noise complexity. If the shader is still unstable, test it in the GPU performance page and compare against leaderboard devices.

Related Articles

Enjoyed this article?

Stay updated with the latest volume shading tutorials, techniques, and updates delivered straight to your inbox.

Subscribe to our newsletter