Building the Grace Cathedral Experience

a day ago

The Grace Cathedral experience was built using PlayCanvas Engine with a WebGPU hybrid renderer and streamed SOG format.
WebGPU compute shaders handle culling, projection, and sorting of Gaussian splats on the GPU, outperforming the WebGL 2 CPU-based sorting method.
Splat data is delivered via streamed SOG format with chunked LODs, allowing progressive loading and per-device budgets (3.5 million splats on desktop, 1.4 million on mobile).
Optimizations include on-demand rendering, resolution caps, and depth pre-pass occlusion for performance on modest hardware and phones.
The peek effect uses shader chunks to carve wall sections near the camera, with compute and fragment stages for efficient cutout rendering and a glowing rim.
A hidden flag animation is implemented via shader chunks that move splats along a traveling wave with amplitude and tilting effects.
Moving traffic is created by isolating and duplicating parked cars from the original capture, spawning at intervals with randomized speeds.
Camera navigation uses an exterior orbit controller with a rounded-box envelope and interior routing via waypoint graphs and collision mesh for smooth flights.
Interactive features include a layered soundscape (city loops, cathedral ambience, footsteps) and a CSS-drawn rose window loading screen.
The project is built on open source foundations: PlayCanvas Engine, SuperSplat Editor, and SOG format, with resources for developers to create similar experiences.

Hasty Briefsbeta