Radiance Cascades 3D - three.js

HTML

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.181.2/build/three.module.js",
      "three/examples/jsm/": "https://unpkg.com/three@0.181.2/examples/jsm/",
      "three-mesh-bvh": "https://unpkg.com/three-mesh-bvh@0.9.2/build/index.module.js"
    }
  }
</script>

CSS

body {
  margin: 0;
  background: black;
}

canvas {
  cursor: grab;
  display: block;
}

canvas:active {
  cursor: grabbing;
}

JavaScript

// https://github.com/CodyJasonBennett/rc-3d
//
// An implementation of "Radiance Cascades: A Novel Approach to Calculating Global Illumination"[1]
// in 3D using screen-space probes and a BVH[2]. This algorithm captures any number of offscreen
// occluders or emitters and results in noise-free diffuse and specular global illumination without
// any temporal accumulation. Probe storage is fixed-cost and stored in a screen-sized texture.
// A novel upscaler by Alexander Sannikov[3] is used for depth-aware interpolation, which cannot
// be licensed. I have omitted a license here for this reason.
//
// https://github.com/user-attachments/assets/c3ca3123-0724-4945-8098-ba3845658b49
//
// Tracing can be made fixed-cost or scene-independent with a different tracing function, such as
// a screen-space raymarcher. Below, it uses the raymarcher from Tiny Glade[4] for fast and accurate
// tracing but no longer models offscreen occluders or emitters. Prefiltering and min/max probes can
// be added without much performance penalty to stabilize probes during camera motion while under
// high depth complexity.
//
// https://github.com/user-attachments/assets/d7a899a4-1a94-4b9c-9645-c7077eaec0b8
//
// Future work would include a more robust BVH and material lookup to scale to more complex scenes
// (poor Bistro below does not look up emissive triangles in the correct order). I did not want to
// spend time on a bespoke BVH implementation in WebGL due to its tight performance constraints and
// cross-platform bugs. Additionally, a short gather pass in screen-space can be performed for
// pixel-perfect contact effects without much added performance penalty and would allow aggressive
// upscaling (e.g., 16x) without much quality loss.
//
// https://github.com/user-attachments/assets/8a1916c2-34cf-464f-bc19-ce34963f9acb
//
// [1]: https://drive.google.com/file/d/1L6v1_7HY2X-LV3Ofb6oyTIxgEaP4LOI6/view
// [2]:...