Real-time PathTracing with global illumination in WebGL
3 days ago
- #raytracing
- #threejs
- #webgl
- Real-time PathTracing with global illumination and progressive rendering on Three.js WebGL framework.
- Desktop controls: Mouse click to capture, WASD/QZ for movement, mousewheel for zoom, O/P for camera modes, arrow keys for aperture and focal distance, ESC to exit.
- Mobile controls: Swipe to rotate, arrow buttons for movement, pinch for zoom and aperture, GUI checkbox for orthographic mode.
- Geometry Showcase Demo features primitive shapes with global illumination, reflections, refractions, soft shadows, and caustics at 30-60fps.
- Ocean and Sky Demo combines ray tracing with ray marching for a realistic ocean and sky with procedural clouds.
- Billiard Table Demo demonstrates image textures for materials like cloth and wood.
- Cornell Box Demo renders the famous Cornell Box at 30-60 FPS, even on mobile.
- Volumetric Rendering Demo shows objects in dust/fog with volumetric caustics.
- Water Rendering Demo simulates photo-realistic water and waves without triangle meshes.
- Light Shaft Demo renders volumetric light shafts (God rays) with participating media.
- Terrain Demo combines raytracing and raymarching for stunning outdoor environments.
- Arctic Circle Demo explores ray marching with parameters simulating summer in the far north.
- Planet Demo (WIP) renders an Earth-like planet with a physically-based atmosphere.
- BVH Point Light Source Demo illuminates the Stanford Bunny with randomized direct light targeting.
- BVH Spot Light Source Demo features a spotlight aimed at the Stanford Bunny with reflective metal.
- Animated BVH Model Demo loads and animates a 15,000+ triangle GLTF model with PBR materials.
- HDRI Environment Demo loads equi-rectangular HDRI maps for scene environments and features a material picker.
- BVH Visualizer Demo shows the BVH acceleration structure with axis-aligned bounding boxes.
- GLTF Model Viewer loads models in glTF format with HDR background lighting.
- BVH Model Instancing Demo replaces each triangle of a model with a smaller instance, enabling millions of polygons.
- Quadric Geometry Demo showcases mathematical ray tracing shapes like spheres, cylinders, and cones.
- Quadric Shapes Explorer allows adjusting parameters to create and modify quadric shapes in real-time.
- Transforming Quadric Geometry Demo demonstrates creating and transforming multiple objects with Three.js.
- Quads-Only Model Demo advocates for using Quads instead of Triangles for 3D model rendering.
- Cheap Torus Alternative Demo presents an efficient approximation to the Torus shape using hyperboloids and spheres.
- Classic Torus Shape Demo uses a numerical solver to accurately render the Torus shape.
- CSG_Museum Demos showcase Constructive Solid Geometry techniques with various shape combinations.
- Convex Polyhedra Demo renders faceted shapes using cutting planes and half-spaces.
- Switching Materials Demo features different surface materials like diffuse, refractive, and specular.
- Material Roughness Demo demonstrates increasing roughness levels on various materials.
- Invisible Date scene recreated with a Shapes BVH system for efficient rendering.
- Sphereflake fractal scene with 7,381 spheres rendered in real-time.
- Bi-Directional Path Tracing Demo implements Eric Veach's technique for hidden light sources.
- Path traced games: AntiGravity Pool, Path Traced Pong, The Sentinel: 2nd Look, and Glider Ball 3D.
- Experimental demos include terrain rendering, multi-sample per frame, and denoising techniques.
- Historical context on ray tracing pioneers like Arthur Appel, J. Turner Whitted, and James T. Kajiya.