Real-time global illumination with path tracing, once the domain of offline renderers or native GPU APIs, is now pushing into browser environments thanks to WebGL2 and clever engineering. The THREE.js-PathTracing-Renderer project showcases this by combining ray tracing, ray marching, and BVH acceleration to deliver interactive frame rates on complex 3D models right in the browser.
A path tracing renderer built on Three.js with BVH acceleration
This project is a WebGL2/GLSL path tracing engine built atop Three.js that achieves real-time global illumination in the browser. The key architectural choice is the use of Bounding Volume Hierarchy (BVH) acceleration structures to speed up ray-triangle intersection tests. This enables the renderer to handle complex scenes with 100,000+ triangles efficiently, a scale that would otherwise be prohibitive for real-time path tracing.
Under the hood, the renderer combines traditional path tracing with ray marching to handle hybrid rendering scenarios. This means geometry (meshes) are ray traced using BVH traversal while volumetric effects like fog, water, and atmospheres are rendered via ray marching. This hybrid approach balances visual fidelity and performance.
The renderer supports PBR (Physically Based Rendering) materials, HDRI environment maps for realistic lighting, and GLTF model loading including animated transforms. It also excels in extreme instancing scenarios, where a single mesh is instanced thousands or millions of times to reach geometry counts on the order of billions of polygons. This is demonstrated by the BVH Model Instancing demo that scales a 1,000-triangle mesh into a million polygons, or the Stanford Dragon model scaled to 10 billion polygons, all path-traced with frame rates between 30 and 60 FPS.
Efficient GPU ray tracing and hybrid rendering techniques
What sets this renderer apart is the careful engineering of GPU-side acceleration and shader logic. The BVH structures are built and traversed entirely on the GPU using GLSL compute shaders, maximizing parallelism and reducing CPU-GPU data transfer overhead.
The hybrid approach of combining ray tracing and ray marching is a tradeoff: ray tracing excels at sharp geometry intersections with accurate reflections and shadows, while ray marching handles volumetric and procedural effects that would be difficult or expensive to represent as meshes. This design choice broadens the visual effects achievable without sacrificing too much performance.
The codebase is surprisingly clean for such a complex domain, with well-structured GLSL shader modules and clear separation of concerns between geometry handling, material evaluation, and lighting calculations. The progressive rendering technique used here means that the image converges over time, allowing near-instant feedback even on mobile devices, which is crucial for usability.
Benchmarks from the README are concrete: 30,000+ triangles for the Stanford Bunny, 15,000+ for GLTF models, 100,000+ for the Stanford Dragon, and scaling to 1 million and even 10 billion polygons with instancing, all at interactive frame rates. This is a solid proof point of the engine’s design and GPU acceleration capabilities.
However, it’s worth noting the tradeoffs: path tracing in WebGL2 is limited by GPU memory and shader complexity compared to native ray tracing APIs like Vulkan RTX or DXR. The progressive rendering means initial image quality is low and converges over time, which may not suit all use cases. Also, the reliance on WebGL2 restricts this to relatively modern browsers and GPUs.
Explore the project and its demos
The repository hosts a variety of demos showcasing different features. The standout demo is the BVH Model Instancing, which demonstrates scaling geometry counts by instancing a base mesh many times.
To explore the code, start with the src directory where the core GLSL shaders and JavaScript integration with Three.js live. The renderer is built as an extension on top of Three.js, replacing the rasterization pipeline with GPU-powered path tracing.
The README provides detailed explanations of the rendering pipeline, BVH construction, and material models. There are also example HTML files in the examples folder where you can see the renderer in action with different models and scenes.
While there are no explicit installation or quickstart commands, the project runs in the browser and can be tested by opening the example HTML files or serving the repo with a simple HTTP server.
Verdict: for graphics developers exploring browser-based ray tracing
THREE.js-PathTracing-Renderer is a technically impressive project demonstrating the limits of real-time path tracing in browsers using WebGL2. It’s a valuable resource for graphics developers, researchers, and enthusiasts interested in GPU ray tracing, BVH acceleration, and hybrid rendering.
That said, it’s not a drop-in production renderer. The progressive rendering and GPU memory requirements mean it’s best suited for experimentation and learning rather than high-throughput commercial use. Also, it requires a decent GPU and modern browser for smooth performance.
If you want to understand how far browser graphics can go with path tracing and learn about GPU BVH traversal and shader design, this repo is worth a close look. The code is accessible for those familiar with GLSL and Three.js, and the demos provide tangible proof of concept for rendering billions of polygons interactively in a browser environment.
→ GitHub Repo: erichlof/THREE.js-PathTracing-Renderer ⭐ 2,193 · GLSL