Skip to main content

Shader visualization test

A fullscreen animated field: polar math, palettes, and nested loops per pixel. Raise quality and effects to swing FPS. This is not the volume shader BM scene.

Rated 4.4 out of 5 based on 412 reviews

Your browser does not support the HTML canvas element.
Frame rate
--
FPS
Frame time
--
ms
Quality preset
--
Effects preset
--
Load index
--
×100 ops
Rendering resolution
--
Frame stability
--
%
Status
--

What this test measures

This page is a procedural animation that loads fragment throughput. There is no ray-marched volume here. If you want a volume shader BM test, open /tests/vsbm/ instead.

  • Quality raises layer count and inner-sample loops.
  • Effects add extra harmonic and palette work in the same shader stage.
  • Load index is a relative scalar-work hint for comparing presets.
  • Heavy plus high is meant for strong desktop GPUs.

Graphics adapter

Renderer
-
Vendor
-

How to run the visualization test

  1. Start at medium quality and standard effects.
  2. Watch FPS and the load index.
  3. Step quality or effects one notch at a time.
  4. Read the reported resolution; mobile browsers may downscale.
  5. Use the volume shader pages if you wanted a 3D volumetric scene.

Shader visualization

Fullscreen WebGL fragment animation (ALU-bound)

What you measureFPS, frame time, stability, and a relative load index
Not the same asVolume shader BM or the entry volume shader test

Not a volume shader BM test

This page fills the screen with animated fields. It does not march a volumetric implicit surface. If you want that workload, open the volume shader test or the volume shader BM test.

Phone and PC

Start at medium quality and standard effects. Step one control at a time and watch FPS. Heavy plus high is meant for a desktop GPU with cooling headroom. Stop if a phone gets uncomfortably hot.

Visualization questions

Why is this separate from volume shader BM?
The BM test is a volumetric-style 3D scene. This test is a 2D fullscreen shader animation. Both load the GPU; they are not the same workload.
Which preset should I start with?
Minimal effects and low quality for a sanity check. Heavy and high only on a desktop GPU with cooling headroom.
Can I run it on a phone?
Yes. Stay on low or medium quality. High plus heavy can stall a mobile browser.