Fog Sphere volume shader preset
Fog Sphere is the safest starting point for learning how a volume shader becomes a benchmark workload. It casts a camera ray, samples a simple signed-distance sphere, turns distance into density, and accumulates fog over a fixed loop.
The preset is intentionally readable: the scene has one density source, one camera path, one adaptive step rule, and one color mix. That makes it useful for testing whether a browser can compile WebGL2 GLSL and whether a device can sustain basic fragment-shader loops before moving to heavier smoke, cloud, or fractal scenes.
Performance factors
Ray steps
The 96-iteration loop is the main cost. Lowering the loop cap gives an immediate FPS increase.
Adaptive stepping
Dense regions advance slightly faster, which reduces oversampling while keeping the fog readable.
Resolution
Every pixel runs the loop, so device pixel ratio and canvas size can change results more than the sphere math.
Editable parameters
Sphere radius
Larger radii keep more rays inside dense space and can reduce FPS.
Density multiplier
Higher density reaches full fog faster and can make early-exit experiments easier to see.
Step distance
Bigger steps are faster but can make the fog edge look banded.
Best fit
- First WebGL2 compatibility checks
- Teaching ray origin, ray direction, and density accumulation
- Low-end laptops, integrated GPUs, and phones at modest canvas sizes
Shader preview
#version 300 es
precision highp float;
out vec4 outColor;
in vec2 v_uv;
uniform float u_time;
uniform vec2 u_resolution;
// Simple fake volumetric fog via raymarch toward a sphere
float sdSphere(vec3 p, float r) { return length(p) - r; }
float map(vec3 p) {
// Central sphere as density source
float d = sdSphere(p, 0.7);
return d;
}