Developing a GPU-Resident WebGPU Engine with Advanced Occlusion Culling and Deferred Shading

I've long envisioned a graphics engine that combines the ease and elegance of three.js with advanced features seen in engines like Unreal. With WebGPU now available, I decided to create an engine that runs the entire rendering pipeline on the GPU, offering high performance and advanced effects.

Below are some mandatory screenshots from different stages of development:

[

Screenshot 2025-02-09 1746141075×1074 103 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/5/f5cf021a4f2fa2b83b5cdb9d7eaa193fa29ae171.jpeg "Screenshot 2025-02-09 174614")

[

Screenshot 2025-02-09 1744321075×1076 131 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/3/f3afee2f96abfb21cb1f3691814605c9375b18a7.jpeg "Screenshot 2025-02-09 174432")

[

Screenshot 2025-02-09 1740081075×1074 84.9 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/8/88ffe5dd25f2169948415fa98a9513153cad3d19.jpeg "Screenshot 2025-02-09 174008")

Original screenshots from 2024/06/17:

[

Screenshot 2024-06-17 1444251078×895 78.7 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/e/9e4412b7acb9ebc85636e1862d7d41ee0362a548.jpeg "Screenshot 2024-06-17 144425")

[

Screenshot 2024-06-17 1445151075×892 141 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/a/0af213a2317442de4aeceb1c535f8b9018eb372b.jpeg "Screenshot 2024-06-17 144515")

[

Screenshot 2024-06-17 1450191078×900 146 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/a/8a1e5764238fb509ff7acc00137f21f63c17d896.jpeg "Screenshot 2024-06-17 145019")

[

Screenshot 2024-06-17 1430561078×894 114 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/1/711420cd1437ef5cc16e33c2e00f653eb3c229ef.jpeg "Screenshot 2024-06-17 143056")

[

Screenshot 2024-06-17 1457221074×895 83.7 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/2/22f5185eb38387896ada84f01de4edc69f67a4cd.jpeg "Screenshot 2024-06-17 145722")

Why create a new graphics engine?

I have set specific goals for this project:

• Occlusion culling – avoid drawing objects hidden behind others, which is crucial for performance in complex scenes.
• GPU draw dispatch – send the entire scene to the GPU, eliminating per-mesh draw calls. This enables drawing millions of objects per frame by leveraging the GPU entirely, similar to engines like Unreal and the emerging capabilities in Unity.
• Deferred visibility-based shading – perform shading only on visible pixels, reducing unnecessary material and lighting calculations.
• Efficient post-processing – include modern effects like SSAO, SSR, and anti-aliasing out of the box.
• Global illumination – incorporate a turnkey solution for realistic lighting effects, similar to in-house engines in AAA studios.
• Robust shadowing – develop a reliable shadowing solution that simplifies adjustments and avoids technical headaches.

While three.js is excellent for its simplicity and extensibility, its design favors ease of use over the complexity needed for high-performance, feature-rich graphics. Over the years, I've extended three.js with custom shaders, lighting modifications, and simulations, but I've often encountered its inherent limitations.

What has been achieved already:

GPU Draw Dispatch

A Blender Foundation scene with 40,765 individual pebbles demonstrates the power of GPU draw dispatch:

[

image1077×893 107 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/8/e8809679072ad22d0e6fe4bc77608bbc539d9c43.jpeg "image")

In three.js 162, this scene runs at around 9.5 FPS, while my implementation (Shade) shows a significant improvement:

[

image1076×893 109 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/d/adcf151ec97f7db2e91afb36354f3e7dcf4f43ac.jpeg "image")

[

image1078×892 75 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/5/7518cfaa6db5ab2d665426af4f03f73fddefd51d.jpeg "image")

By comparison, three.js shows roughly 1.5 FPS:

[

image1073×830 154 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/4/b4684a12e61d8cf116bf92cc7ee57a5f441251c1.jpeg "image")

Regardless of scene complexity, the CPU work remains O(1) because actual culling and command dispatch occur entirely on the GPU. The limitation is solely based on what the GPU can render per frame.

Occlusion Culling

The Sponza scene demonstrates effective occlusion culling. Although the scene contains around 270,000 triangles, only ~96,000 are drawn in view:

[

image1078×894 92.3 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/6/5639b652946250904c3fa886c28651644737ddd1.jpeg "image")

[

image292×134 6.79 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/a/1a5d339252898f939b23fee3d2b9620a275c9315.png "image")

When moving the camera behind a pillar, occlusion culling ensures that hidden details (like the complex geometry of curtains or distant lion head) are not drawn, reducing the GPU workload by approximately 85%.

Deferred Visibility-Based Shading

This technique ensures that only visible pixels receive shading, eliminating unnecessary material and lighting calculations. It also groups pixels by material, improving performance in high-poly scenes.

Efficient Post-Processing

Using a FrameGraph system, the engine handles resource allocation and aliasing dynamically. For example, my SSAO implementation based on the GTAO paper uses temporal and spatial blue noise – achieving excellent visuals with just 9 taps:

[

image1077×892 152 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/f/2f43c29e69f8d23d3ce7f8bbbc74cc714c65f80c.jpeg "image")

[

image1089×892 162 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/9/f93348587b6ae3bf53454a3e2109823e63efd6ed.jpeg "image")

[

image1078×890 148 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/3/f3fa36cd55034348e7f9d992e6335a1463385a40.jpeg "image")

[

image1075×900 97.5 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/9/593b0a3a02c6fd7de1b2c50ce25d363651a0d576.jpeg "image")

[

image1075×900 100 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/4/f4a2afca02c0dd679d9b488d8f0c2f21723b5001.jpeg "image")

With TAA (Temporal Anti-Aliasing), further improvements are achieved compared to FXAA, which tends to look subpar. Screenshots compare results with and without TAA:

[

image1076×895 111 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/2/a2bac3b9a7c5350e3e698b5c6913d68258086ce6.jpeg "image")

[

image1077×893 107 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/1/016802b022b8ee5484f53fae35b33b14302c4c1f.jpeg "image")

[

image1077×892 116 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/e/1e36126983b055b810bb1ba7a5fb6851e062a9d9.jpeg "image")

For comparison, here’s FXAA:

[

image1078×897 109 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/d/adc2d7158285d49e99053db6e3a7e70335b5f3e0.jpeg "image")

[

Screenshot 2024-06-17 1430561078×894 114 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/1/711420cd1437ef5cc16e33c2e00f653eb3c229ef.jpeg "Screenshot 2024-06-17 143056")

Conclusion

This project marks a new era for graphics engines by fully leveraging a GPU-driven pipeline with WebGPU. With most data and processing residing on the GPU, performance bottlenecks are minimized and features such as occlusion culling, deferred visibility-based shading, advanced post-processing, and TAA create an efficient, high-quality rendering solution.

I am still working on a robust shadowing solution and planning to integrate global illumination using light probes. Overall, I'm excited about the future of this project and the possibilities for high-performance 3D rendering on the web.

PS:
Almost 90% of the shading model is derived from three.js – much appreciation goes out to the team for their excellent work, which has laid the groundwork for these advances.