# THREE.js-PathTracing-Renderer: fifty browser path tracers, not a package

> erichlof's repository is a gallery of single-file WebGL demos on GitHub Pages. Here is what the tree, the CC0 licence and the demo naming tell you about how to use it.

**erichlof/THREE.js-PathTracing-Renderer** — Real-time PathTracing with global illumination and progressive rendering, all on top of the Three.js WebGL framework. Click here for Live Demo: https://erichlof.github.io/THREE.js-PathTracing-Renderer/Geometry_Showcase.html

- Repository: https://github.com/erichlof/THREE.js-PathTracing-Renderer
- Stars: 2,250 · Forks: 202
- Language: GLSL
- License: CC0-1.0
- Published: 2026-10-06 · Updated: 2026-10-06 · Language: en
- Canonical page: https://hysenlabs.com/projects/erichlof-three-js-pathtracing-renderer

## The repository is a gallery, and the tree says so first

The most useful thing about this repository is that its structure answers your questions before the README does. There are 49 HTML files at the root of the tree, alongside a README, a LICENSE, and six directories: css/, js/, models/, shaders/, textures/ and readme-Images/.

Forty-nine HTML files at the top level is the shape of a gallery, not the shape of a library. There is no package.json, no build directory, no src/ and no test suite in that listing. The default branch is gh-pages, which is the branch GitHub Pages serves, so the published site and the source of the site are the same thing.

That single decision has a practical consequence. You do not install this project. There is no npm package to add to a dependency list, no version to pin, and therefore no upgrade path to plan for. What you do instead is open a file, read it, and copy the parts you understand. The repository description links straight to one such file, Geometry_Showcase.html, as the live demo.

The repository has roughly 2,200 stars and 200 forks, and its topic list is entirely graphics vocabulary: global-illumination, path-tracer, pathtracing, ray, raytracing, realtime, three-js, threejs, tracer, tracing and webgl. There are no releases at all, which for a project with no package manifest is consistent rather than a red flag.

## What path tracing buys you in a browser, and what it costs

The README's opening line states the scope: real-time path tracing with global illumination and progressive rendering, all on top of the three.js WebGL framework.

Path tracing differs from rasterisation in a way that explains both the appeal and the difficulty. A rasteriser decides, per pixel, which triangle is in front. A path tracer instead fires rays into the scene and follows them, following each ray until it hits something, computing the light that arrived along the way, and then shooting more rays from that point. Because light transport is simulated rather than approximated, you get true reflections, refractions, soft shadows and colour bleeding from indirect light without authoring any of it.

The cost is variance. A path tracer produces a noisy estimate that refines over successive frames, which is where progressive rendering comes in: the image starts grainy and cleans up. The README describes the Geometry Showcase demo as showing off global illumination, true reflections and refractions, bounce lighting, soft shadows, caustics, and near-instant image convergence at 30 to 60fps on any device.

The Cornell Box demo makes the same claim about the famous test scene from computer graphics, and the README places a photograph of the original Cornell Box next to a rendering produced by this path tracer. That side-by-side is the honest way to present a renderer, since the Cornell Box exists precisely so that lighting errors are easy to spot.

## Ray marching is not a separate renderer here

Several demo names in the tree would surprise you if you assumed everything was triangle-based, and the README is explicit about the split.

The Terrain Rendering demo combines traditional ray tracing with ray marching, and it does so with a total of two triangles for the screen quad, since the land is procedurally generated. The Ocean and Sky demo mixes ray tracing with ray marching to model an ocean under a physical sky with procedural clouds. The Water Rendering demo says it needs no triangle meshes for the water, unlike traditional engines, and achieves the surface through ray marching while the Cornell Box in the same scene is standard path tracing.

The Planet Rendering demo pushes this furthest. It renders an Earth-like planet with a physically based atmosphere, at a scale that lets you hover at 5000 Km altitude and then descend to a single rock or a single lake wave at one metre, with all planet and atmosphere measurements to scale. The README marks it as work in progress and notes that the mountains and lakes look repetitive for that reason.

Reading those together, the pattern is that this author treats ray marching as a first-class alternative to mesh geometry inside the same renderer, rather than as a separate technique in a separate demo. Several demo names make the comparison explicit, including Compare_Bi-Directional_Approach.html and Compare_Uni-Directional_Approach.html.

## The BVH group is the part closest to production work

The largest cluster of demos concerns bounding volume hierarchy acceleration, and these are the ones with concrete numbers attached.

BVH_Point_Light_Source.html lights the Stanford Bunny, which the README puts at more than 30,000 triangles, with a point light. The claim attached to it is a convergence one: normally a dark scene lit by one very bright small light is extremely noisy, but randomized direct light targeting makes the image converge almost instantly. BVH_Spot_Light_Source.html is the same scene with a spotlight, where the fixture is dark metal on the outside and reflective metal on the inside, and light falloff is visible on a checkered floor.

HDRI_Environment.html is the heaviest of the group. It loads an equi-rectangular HDRI map as the surrounding environment and uses the optimised BVH accelerator to load the Stanford Dragon model, which the README puts at 100,000 triangles, rendering in real time. It also includes a material and colour picker for switching the dragon between glass, metal and ceramic. The README warns that the large HDR image needs five to ten seconds to download, which is the one place a demo of this weight shows its size.

The Animated BVH Model demo loads and renders a GLTF model with more than 15,000 triangles with correct PBR materials, covering albedo, emissive, metallic roughness and normal maps, and translates and rotates both the model and its BVH structure in real time. The README is careful about the limit: loading and ray tracing bone animations for rigged models is still under investigation, but rigid models moving, rotating and scaling arbitrarily was a step forward.

## A licence that puts the work in the public domain

The licence is CC0-1.0, which is the most permissive dedication available. The repository tree includes a LICENSE file at the root alongside the demos.

CC0 is worth pausing on, because it is an unusual choice for software. It is a public domain dedication rather than a permissive software licence, and it works for code as well as for images and text. The practical effect is that you can take a demo, a shader, or the geometry and light setup from a demo, use it in a commercial or closed project, and owe nothing: no attribution requirement, no copyleft obligation, no notice to preserve.

For a reference gallery whose main value is that the code is readable, that is a coherent choice. The repository is not trying to compete for adoption against Material-Design-libraries or engine vendors, so there is no ecosystem to protect with a restrictive licence. What it wants is for people to learn from the shaders, and CC0 removes every legal reason not to.

The asset directories support the same reading. A models/ directory and a textures/ directory mean third-party assets are present in the tree, and readme-Images/ holds the images used in the documentation. Anyone reusing those specific assets should check their provenance separately from the repository licence, since the licence covers what the author can license.

## Controls, targets and why the demos read the way they do

The README spends a section on controls, which is unusual and turns out to be informative about the project's scope.

On desktop, you click anywhere to capture the mouse, then mouse movement and the WASD and QZ keys drive a first-person camera, the mouse wheel zooms, O and P toggle orthographic and perspective camera modes, the left and right arrows control camera aperture size for depth-of-field blur, the up and down arrows control the focal point distance, and Escape exits pointer capture. On mobile, swiping rotates the camera, four large arrow buttons control movement, horizontal pinch zooms, vertical pinch changes aperture size, two smaller up and down buttons change focal distance, and orthographic mode is available through a GUI checkbox.

That the same scenes work on a phone explains a structural choice visible in the demo names. Many files carry explicit multi-sample or multi-frame labels, such as MultiSamples_Per_Frame.html and MultiSPF_Dynamic_Scene.html, which suggests the renderer can take more than one sample per frame and handles dynamic scenes by bounding how much work a frame does. Invisible_Date.html is a curiosity, and Fractal3D.html, Sphereflake.html, Convex_Polyhedra.html, Cheap_Torus.html and Classic_Torus.html belong to a cluster of geometry stress tests.

There is also a set of demos that are explicitly educational rather than photographic. Classic_Scene_Whitted_TheCompleat_Angler.html, Classic_Scene_Kajiya_TheRenderingEquation.html and Classic_Scene_Appel_ShadingMachineRenderingsOfSolids.html reference the papers and milestone renders that established the field, and RayTracing_In_One_Weekend.html, Global_Illumination_Wikipedia.html and GameEngine_PathTracer.html map to the tutorials and topics most newcomers arrive from. A visitor can trace a path from a beginner tutorial to the Cornell Box without leaving the repository.

## Conclusion

The concrete next step is to open Geometry_Showcase.html, which the repository description names as the live demo link, and treat it as a reading reference rather than a dependency: with the default branch set to gh-pages and no package manifest anywhere in the tree, this repository gives you fifty working reference implementations and no upgrade path to manage.

## FAQ

### Can I install THREE.js-PathTracing-Renderer as an npm package?

No. The repository tree contains no package manifest; it holds 49 HTML files at the root alongside css/, js/, models/, shaders/, textures/ and readme-Images/ directories. The default branch is gh-pages, so the repository is a published site rather than a distributed library, and it is used as reference code to read and copy from.

### What licence does the three.js path tracing repository use?

CC0-1.0, with a LICENSE file at the repository root. That is a public domain dedication rather than a permissive software licence, so the demos, shaders and code can be reused in commercial or closed projects without attribution or copyleft obligations. Individual third-party assets in the models/ and textures/ directories carry their own provenance.

### What is the CC0-licensed three.js path tracing repository used for?

The repository description states real-time path tracing with global illumination and progressive rendering, all on top of the three.js WebGL framework. The demos cover geometry showcases, ocean and sky, a Cornell Box, volumetric rendering, water and terrain through ray marching, BVH acceleration with the Stanford Bunny and Stanford Dragon models, and GLTF model loading with PBR materials.

### Do the three.js path tracing demos run on mobile devices?

The README describes mobile controls including swipe rotation, on-screen arrow buttons for movement, pinch to zoom and a GUI checkbox for orthographic mode, and states that the Geometry Showcase and Cornell Box demos converge at 30 to 60 FPS even on mobile. The terrain demos instead highlight near-instant convergence on any device.

## Sources

- [erichlof/THREE.js-PathTracing-Renderer on GitHub](https://github.com/erichlof/THREE.js-PathTracing-Renderer)
- [Issues](https://github.com/erichlof/THREE.js-PathTracing-Renderer/issues)
- [License: CC0-1.0](https://github.com/erichlof/THREE.js-PathTracing-Renderer/blob/gh-pages/LICENSE)
- [README](https://github.com/erichlof/THREE.js-PathTracing-Renderer/blob/gh-pages/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/erichlof-three-js-pathtracing-renderer