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.