Real-Time Global Illumination on the Web: A Deep Dive into Surfel-Based Rendering

The quest for real-time global illumination (GI) has long been a battle between visual fidelity and computational cost. While path tracing provides the gold standard for light simulation, its demand for thousands of rays per pixel makes it prohibitively slow for real-time applications, especially on the open web. However, the emergence of WebGPU is shifting the landscape, enabling the construction of compute-heavy rendering pipelines that were previously the domain of native AAA engines.

One promising approach to this problem is the use of surfels (surface elements). By decoupling lighting calculations from screen resolution, surfels allow developers to shade a relatively small number of surface patches to approximate global illumination, caching that work over time to achieve smooth, real-time performance even on lower-end hardware.

Understanding Surfels

A surfel is a flat disc floating in 3D space, defined by its position, normal (orientation), and radius. Instead of calculating light for every pixel on the screen, the engine calculates light for these discrete surface elements. The primary advantage is efficiency: shading 50,000 surfels is significantly cheaper than shading 2 million pixels, yet it can provide a convincing approximation of how light bounces across a scene.

The Rendering Pipeline: From Geometry to Pixels

Implementing a surfel-based GI system requires a sophisticated multi-stage pipeline. A production-ready implementation involves over a dozen compute passes to manage the lifecycle of these elements and the light they carry.

1. Surfelization

The first step is converting triangle-based geometry into surfels. This process involves rendering a G-buffer (containing normals, depth, and albedo) and analyzing screen space to identify where surfels are missing or overly dense. Through a competitive allocation process, the system spawns new surfels to cover the geometry and destroys those that are no longer needed.

2. The Spatial Grid

To avoid the brute-force cost of comparing every surfel against every other, a camera-centered cascaded 3D spatial index is used. This grid partitions space into multi-resolution cubic cells: fine cells near the camera for high precision and coarser cells further away to save memory.

Building this structure involves several compute passes: clearing counters, counting surfel references per cell, performing a segmented prefix-sum scan to create contiguous write ranges, and finally slotting surfel indices into a combined buffer. This allows the engine to query relevant surfels in $O(1)$ time.

3. The Integrator and Ray Tracing

Since WebGPU lacks native hardware ray tracing support, the pipeline utilizes three-mesh-bvh to emulate ray tracing via compute shaders. The integrator's job is to determine the irradiance for each surfel by shooting rays into the scene.

To handle materials efficiently in a compute shader, the system uses a 2D array texture (diffuseArrayTex) where each layer represents a material's diffuse color. When a ray hits geometry, the BVH provides a material ID, allowing the shader to sample the correct color from the array.

4. Guiding the Light

Uniformly sampling a hemisphere is inefficient, as most rays hit dark areas or the void. To optimize this, each surfel maintains an 8x8 grid of weights representing 64 directional bins using a hemi-oct-square mapping.

Over time, the surfel learns which directions are bright. The integrator then uses a mixed probability density function (PDF) to sample:

• Guided sampling: Exploiting known bright areas.
• Cosine sampling: Exploring the hemisphere to discover new light sources.

5. Temporal Stability and Denoising

Raw sampling produces significant noise. To stabilize the image without introducing massive lag, the pipeline employs a Multi-Scale Mean Estimator (MSME). Unlike a simple Exponential Moving Average (EMA), MSME tracks both short-term and long-term averages. It can react quickly to actual lighting changes while ignoring high-variance noise (fireflies), providing a stable yet responsive result.

6. Solving Light Leaks with Radial Depth

A common issue with surfels is "light leaking," where a surfel on one side of a thin wall shares its light with pixels on the other side. To combat this, each surfel is equipped with a radial depth atlas—essentially a 360-degree depth camera stored as a 4x4 pixel tile.

Using Moment Shadow Mapping (MSM), the system records the distance to surrounding geometry. When a pixel queries a surfel for light, the surfel checks its depth map; if the geometry obstructs the path, the light is blocked, effectively eliminating most leaks.

7. The Resolve Pass

The final stage is the resolve pass, which transfers irradiance from the surfels to the screen pixels. For every pixel, the engine queries the spatial grid for neighboring surfels and blends their contributions based on:

• Distance: Closer surfels have more influence.
• Orientation: Surfels facing the same direction as the pixel are weighted higher.
• Age & Confidence: New, noisy surfels are faded in gradually.
• Occlusion: The radial depth atlas is checked to ensure the surfel is visible to the pixel.

Technical Constraints and Trade-offs

Building this on the web introduces unique challenges. A notable limitation in Chrome is the hard limit of 10 storage buffers per compute pass, forcing developers to merge buffers or use read-write float storage textures (which may lack cross-browser compatibility).

Furthermore, the absence of hardware-accelerated ray tracing means that while the system is performant, it cannot yet support highly dynamic geometry or complex specular reflections. The current implementation focuses on static geometry and diffuse inter-reflections.

Conclusion

The successful implementation of a surfel-based GI pipeline in WebGPU demonstrates that the browser is no longer limited to simple rasterization. By synthesizing techniques from AAA research—such as those from EA SEED—and leveraging clever spatial data structures, it is possible to achieve physically plausible, real-time lighting on a web page, and even on mobile devices. While limitations remain, the foundation is set for a new era of high-fidelity, compute-driven graphics on the open web.