Volume Shader Test

What is this tool?

The Volume Shader Test renders a real volumetric cloud with a single-pass WebGL2 ray-marcher in GLSL 3.00 ES. It steps a ray through 3D value-noise, adds a short shadow march and a Henyey-Greenstein light phase, and stops early once the ray is opaque — the same technique used for game and film volumetrics, running live in your browser.

It is the interactive, exploratory member of the pair. You change the octaves, ray-march steps, density, lighting and render scale and watch the frame rate respond immediately, which makes it a good way to feel where your GPU's fragment budget runs out. Its sibling, the Volume Shader Benchmark, exists to produce a repeatable score instead.

Every metric is measured from real frames with performance.now(); the orange light sweep is purely cosmetic and does not change the workload. No temperature, power, clock or utilisation figure is produced, because a browser cannot read them.

How to use it

1. Set the volume complexity and stepsVolume Complexity (low / medium / high / extreme) sets the noise octaves from 1 to 4; Ray March Steps (32-192) sets how finely each ray is sampled. Both raise fragment cost sharply.
2. Adjust density and lightingDensity (low / medium / high) changes how thick the cloud reads; Lighting Complexity adds shadows (medium) or shadows plus phase scattering (high). More lighting means more work per sample.
3. Pick a render scale and durationRender Scale (0.5x-1.5x) super-samples the canvas; Duration is 15, 30 or 60 seconds, or Free to run continuously. A Quick Test 15s button is provided.
4. Watch the live metricsCurrent, average, min and max FPS, frame time, 1% low, jitter and stability update as it renders. Drag the sliders while it runs to see the cost of each setting.

What the results mean

FPS readouts

Current FPS is taken from the last 30 frames; average, minimum and maximum cover the run. Watching current versus average while you change a setting shows its immediate cost.

1% low (99th-percentile frame)

Here the 1% low is the 99th-percentile frame time turned into an FPS — the single frame that all but 1% beat — so it flags the worst hitches rather than averaging the slow tail.

Stability

Stability is the share of frames whose frame time lands within ±20% of the mean, shown as a percentage. A stability rating of Stable / Variable / Unstable is derived from the frame-time standard deviation.

Frame time and jitter

Frame time is the wall-clock interval between frames from performance.now(), not isolated GPU time; jitter is the mean absolute difference between consecutive frames. A frame over 25 ms counts as a drop.

What it can detect

• How your GPU handles heavy volumetric fragment work as you scale octaves, steps and lighting
• The immediate frame-rate cost of each individual setting, changed live
• Worst-case hitching through the 99th-percentile 1% low, not just the average
• Whether frame pacing stays tight (high stability) under a chosen load

Limits worth knowing

A browser can only report what the platform gives it. These are the honest boundaries of this page, so a result is never read as more than it is.

• It cannot read GPU temperature, power, clocks, utilisation or VRAM — none of those is computed, because the browser does not expose them.
• Its statistics are defined differently from the other GPU tools: current FPS uses the last 30 frames, the 1% low is a 99th-percentile frame, and stability is a within-±20% share. Compare those figures within this tool, not one-for-one against the benchmark.
• There is no warm-up exclusion — timing starts on the first frame, so early shader-compilation cost is included in the run.
• There is no background-tab pause, so switching tabs during a run can inflate frame times.
• Frame rate is capped by the display refresh rate via requestAnimationFrame, and the reported frame time is wall-clock, not pure GPU time.

Tips

• Use this tool to explore and the Volume Shader Benchmark to score: change one slider at a time here to feel its cost, then lock a configuration in the benchmark for a comparable number.
• If the average FPS looks fine but the picture stutters, read the 99th-percentile 1% low — that is where volumetric hitches show up.
• Raise ray-march steps last; they multiply the cost of every other setting because they run the whole sample loop more times.

Troubleshooting

Related documentation

• DisplayVolume Shader BenchmarkA repeatable volumetric-shader benchmark with a warm-up, a transparent score and a controlled comparison mode.
• DisplayShader Performance TestMeasure fragment-shader throughput with a real WebGL2 ray-marcher and a four-tier complexity sweep.
• DisplayStress My GPUPush your GPU with a real WebGL2 ray-marching load and watch FPS, frame time and stability hold up — or drop off.
• Display3D Rendering Performance TestBenchmark your WebGL 3D graphics rendering performance, real-time FPS, frame timing, and pacing stability.