# erichlof/three.js-pathtracing-renderer

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/erichlof-three-js-pathtracing-renderer).**

2,216 stars · 197 forks · GLSL · CC0-1.0

## Links

- GitHub: https://github.com/erichlof/THREE.js-PathTracing-Renderer
- awesome-repositories: https://awesome-repositories.com/repository/erichlof-three-js-pathtracing-renderer.md

## Topics

`global-illumination` `path` `path-tracer` `pathtracing` `ray` `raytracing` `realtime` `three-js` `threejs` `tracer` `tracing` `webgl`

## Description

This project is a browser-based, physically based path-tracing renderer built on WebGL and integrated with Three.js. It functions as a real-time global illumination engine, calculating light bouncing, soft shadows, reflections, refractions, and color bleeding interactively within web environments. 

The rendering system incorporates progressive multi-pass accumulation to refine noisy images iteratively over multiple frames, alongside GPU-accelerated spatial acceleration structures and bounding volume hierarchies to handle complex geometry. It supports diverse material types such as refractive glass, subsurface scattering, clearcoat, and metallic surfaces, paired with analytical geometric primitives, constructive solid geometry evaluations, and ray marching capabilities. 

The feature set further encompasses volumetric media simulation, dynamic water and planetary body rendering, animated model support, and procedural environment generation including atmospheric sky simulation.

## Tags

### Graphics & Multimedia

- [Physically Based Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/materials-shading/physically-based-rendering-materials/physically-based-rendering.md) — Provides a browser-based rendering library supporting advanced material types such as refractive glass, subsurface scattering, and metallic surfaces.
- [Indirect Lighting Simulation](https://awesome-repositories.com/f/graphics-multimedia/indirect-lighting-simulation.md) — Simulates realistic light bouncing between surfaces in real time to produce accurate shadows, color bleeding, and ambient occlusion. ([source](https://erichlof.github.io/THREE.js-PathTracing-Renderer/HDRI_Environment.html))
- [Progressive Rendering](https://awesome-repositories.com/f/graphics-multimedia/animation-motion/animated-image-rendering/progressive-rendering.md) — Refines visual quality incrementally over multiple rendering passes to reduce noise and achieve convergence in complex lighting scenarios. ([source](https://erichlof.github.io/THREE.js-PathTracing-Renderer/CSG_Museum_4.html))
- [Physically Based Rendering Materials](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/materials-shading/physically-based-rendering-materials.md) — Implements surface reflection, refraction, subsurface scattering, and metalness rules through custom shaders that simulate real-world light interactions.
- [Ray Intersection Acceleration](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/3d-graphics-pipelines/3d-intersection-ray-calculators/ray-intersection-acceleration.md) — Organises scene geometry into a spatial tree structure evaluated directly on the GPU to speed up ray-triangle intersection tests.
- [Game-Ready Path Tracing](https://awesome-repositories.com/f/graphics-multimedia/path-tracing-implementations/game-ready-path-tracing.md) — Calculates realistic global illumination, reflections, refractions, and soft shadows by tracing light rays interactively at high frame rates. ([source](https://erichlof.github.io/THREE.js-PathTracing-Renderer/Cornell_Box.html))
- [Real-Time Raytracing](https://awesome-repositories.com/f/graphics-multimedia/real-time-neural-renderers/real-time-3d-rendering-engines/real-time-raytracing.md) — Simulates realistic light bouncing, soft shadows, and color bleeding interactively for three-dimensional web graphics.
- [Three.js Path Tracing Engines](https://awesome-repositories.com/f/graphics-multimedia/three-js-path-tracing-engines.md) — Implements progressive sampling, bounding volume hierarchies, and physically based materials within WebGL scenes.
- [Web-Based Graphics Acceleration](https://awesome-repositories.com/f/graphics-multimedia/web-based-graphics-acceleration.md) — Creating interactive 3D graphics and visual experiences inside web browsers using hardware-accelerated rendering frameworks.
- [Solid Boolean Operations](https://awesome-repositories.com/f/graphics-multimedia/boolean-mesh-operations/solid-boolean-operations.md) — Performs real-time boolean operations on geometric shapes directly inside shading passes to build complex compound models on the fly.
- [Cinematic Camera Simulations](https://awesome-repositories.com/f/graphics-multimedia/camera-view-controllers/camera-zooms/camera-movement-simulations/cinematic-camera-simulations.md) — Provides first-person navigation, adjustable depth of field, aperture size, focal distance, and supersampling anti-aliasing for polished visual output. ([source](https://erichlof.github.io/THREE.js-PathTracing-Renderer/CSG_Museum_4.html))
- [Constructive Solid Geometry Kernels](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/3d-math-and-geometry-toolkits/geometry-primitives/constructive-solid-geometry-kernels.md) — Combines multiple 3D shapes using boolean operations like union, intersection, and difference to build complex compound models. ([source](https://erichlof.github.io/THREE.js-PathTracing-Renderer/CSG_Museum_1.html))
- [Terrain Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/graphics-pipeline-architectures/hardware-accelerated-rendering/terrain-rendering.md) — Generates large-scale outdoor landscapes and ground geometry within a path-traced rendering environment for visual simulation. ([source](https://erichlof.github.io/THREE.js-PathTracing-Renderer/Terrain_Rendering.html))
- [Volumetric Media Simulations](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/post-processing-effects/atmospheric-fog/atmospheric-scattering/volumetric-media-simulations.md) — Simulating smoke, fog, clouds, and atmospheric scattering to produce realistic light shafts and participating media effects.
- [GPU-Accelerated Ray Marching](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/3d-graphics-pipelines/3d-intersection-ray-calculators/hardware-accelerated-ray-tracing/gpu-accelerated-ray-marching.md) — Combines analytical signed distance fields with ray tracing inside shader programs to render complex procedural environments and volumetric media.
- [Procedural Environment Simulators](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/3d-graphics-pipelines/3d-intersection-ray-calculators/hardware-accelerated-ray-tracing/photorealistic-ray-tracing/ray-tracing-engines/procedural-environment-simulators.md) — Combines ray marching with ray tracing to render expansive natural environments including oceans, physical skies, clouds, and terrains. ([source](https://github.com/erichlof/three.js-pathtracing-renderer#readme))
- [Geometry Instancing](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/3d-graphics-pipelines/geometry-instancing.md) — Duplicates geometry efficiently across scenes while sharing underlying mesh data to render complex environments with low overhead. ([source](https://erichlof.github.io/THREE.js-PathTracing-Renderer/BVH_Model_Instancing.html))
- [Quadric Shape Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/3d-graphics-pipelines/geometry-instancing/complex-geometry-rendering/quadric-shape-renderers.md) — Generates mathematical quadric surfaces like spheres, cylinders, and cones using ray-tracing equations directly in three-dimensional scenes. ([source](https://erichlof.github.io/THREE.js-PathTracing-Renderer/Quadric_Shapes_Explorer.html))
- [Volumetric Rendering Engines](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/scene-management-systems/3d-rendering-engines/volumetric-rendering-engines.md) — Simulates participating media like smoke, fog, and dust to produce volumetric light shafts, caustics, and atmospheric scattering effects. ([source](https://erichlof.github.io/THREE.js-PathTracing-Renderer/Volumetric_Rendering.html))
- [Path Tracing Algorithms](https://awesome-repositories.com/f/graphics-multimedia/path-tracing-algorithms.md) — Combines camera and light-source ray paths to illuminate difficult scenes with hidden light sources or indirect crack lighting. ([source](https://github.com/erichlof/three.js-pathtracing-renderer#readme))

### Artificial Intelligence & ML

- [Progressive Multi-Pass Accumulations](https://awesome-repositories.com/f/artificial-intelligence-ml/generative-upscalers/multi-pass-refinement/progressive-multi-pass-accumulations.md) — Refines noisy path-traced images iteratively over multiple frames by blending past samples to achieve a converged photorealistic output.

### Scientific & Mathematical Computing

- [Geometric Intersection Calculators](https://awesome-repositories.com/f/scientific-mathematical-computing/geometric-algorithms/geometric-intersection-calculators.md) — Computes exact ray intersections against mathematical formulas for shapes like spheres and toruses instead of relying on triangle meshes.

### Education & Learning Resources

- [Dynamic Water Simulations](https://awesome-repositories.com/f/education-learning-resources/unity-rendering-examples/water-simulation-frameworks/dynamic-water-simulations.md) — Simulates realistic ocean waves, refraction, reflection, and water movement in real time using procedural surface generation techniques. ([source](https://erichlof.github.io/THREE.js-PathTracing-Renderer/Ocean_And_Sky_Rendering.html))

### Game Development

- [Procedural Environment Generation](https://awesome-repositories.com/f/game-development/tooling-asset-pipeline/procedural-generation/procedural-landscape-generators/procedural-environment-generation.md) — Generating expansive natural landscapes, oceans, skies, and terrain dynamically using mathematical algorithms and ray tracing.