Skip to main content
GitHub

Open Visualization Effects to browse an accordion for each technique: cascaded and local shadow maps, contact shadows, SSAO, the shared SSR pipeline, height fog, outlines, temporal AA, motion blur, and depth-aware blur. Each section explains its role before exposing its controls.

Why This Is Not Illumination Lab

Visualization City is the breadth-first hybrid rendering showcase: light-space directional, spot, point, and contact shadows combine with SSAO, height fog, outlines, temporal AA, and motion blur. Its split view makes those shadow and postprocessing choices easy to compare.

Drag the divider directly across the city to compare the original lighting with the complete effect stack. The divider is also keyboard accessible: focus it, use the arrow keys for precise adjustments, or press Home and End to reveal either side completely.

Deferred Rendering: Illumination Lab focuses on physically based deferred materials, hundreds of compute-clustered lights, higher-quality GTAO, colored diffuse global illumination, and participating-media scattering. Both examples use the same reusable createSSRShaderPassPipeline(); they do not maintain competing reflection effects.

Scene contract

The example deliberately keeps scene rendering outside ShaderPassRenderer. Its MRT pass writes:

  • rgba8unorm light-space-shadowed scene color;
  • rgba8unorm view-space normals in RGB and roughness in alpha;
  • rg16float unjittered motion vectors as currentUv - previousUv;
  • rgba8unorm unshadowed scene color for the split comparison;
  • rgba16float shadowed directional direct light for contact-only composition;
  • rgba16float directional, spot, point, and cascade debug data;
  • sampled depth24plus depth.

Those textures are passed as bindings to a normal ordered list of ShaderPassPipeline objects. The renderer owns only intermediate and temporal history textures. The standalone example requests the adapter's supported max feature level so this six-target layout is created only with limits the selected WebGPU adapter actually exposes.

Shadow callback and effect order

ShadowMapRenderer owns depth32float directional and spot arrays plus a point cube array. The example reuses the city's instance buffers in depth-only caster models and supplies one independent uniform buffer per cascade or cube face. This preserves every view matrix until command submission.

Scene shading applies each light-space factor only to that light's direct contribution. Contact shadows then ray march the camera depth toward the sun and bilateral-filter the result using depth and normals. Their composite consumes the dedicated directional-direct attachment, so ambient and emissive terms remain untouched.

The complete order is light-space scene shading, contact shadows, SSAO, reflections, volumetric fog, outlines, temporal antialiasing, and motion blur. History resets whenever shadow quality, shadow/light configuration, framebuffer dimensions, presets, or enabled effects change.

These pipelines use the same ordered previous chain as the existing image effects. For example, bloom and depth of field can be inserted between the scene-aware stages without bypassing earlier results. Adding any advanced pipeline makes the combined renderer WebGPU-only, even when the other effects in the list also support WebGL.

The advanced effects extend the existing catalog rather than duplicating it:

  • Depth-aware blur is a bilateral building block that preserves depth edges. The existing depth of field effect instead computes lens defocus, while Gaussian and triangle blur are depth-independent.
  • TAA uses motion and history to stabilize edges over time; FXAA is a single-frame alternative.
  • Motion blur follows the scene velocity attachment; zoom blur is a stylized radial effect.
  • Persistence intentionally creates fading trails from application-provided history. TAA and fog history are stabilization mechanisms owned by their respective pipelines.
  • SSAO, screen-space reflections, outlines, and volumetric fog have no older equivalents in the effects module.

The depth, normal, and velocity attachments continue to describe the original scene geometry. Place coordinate-warping effects after the scene-aware stack unless the application transforms all of those attachments in the same way.

For side-by-side comparisons of the shared SSR pipeline, SSAO versus GTAO, shadow and transparency approaches, and other related effects, see Rendering Techniques and Tradeoffs.