Support adaptive raymarch step count

 * Fix some issues with the way the camera frustum intersection checks are handled
 * Add debug mode to view step count

Author: Ameobea

README.md

@@ -20,7 +20,7 @@ Adapted from [original implementation](https://github.com/n8python/goodGodRays)
 Or import from unpkg as a module:
 
 ```ts
-import { GodraysPass } from 'https://unpkg.com/three-good-godrays@0.10.0/build/three-good-godrays.esm.js';
+import { GodraysPass } from 'https://unpkg.com/three-good-godrays@0.11.0/build/three-good-godrays.esm.js';
 ```
 
 ## Supported Three.JS Version

demo/src/BaseDemo.ts

@@ -8,12 +8,18 @@ import { GodraysPass, GodraysPassParams, GodraysUpsampleQuality } from '../../sr
 
 THREE.ColorManagement.enabled = true;
 
-interface GodraysPassParamsState extends Omit<GodraysPassParams, 'color' | 'blur'> {
+interface GodraysPassParamsState
+  extends Omit<GodraysPassParams, 'color' | 'blur' | 'adaptiveSteps' | 'debugSteps'> {
   color: number;
   enableBlur: boolean;
   blurVariance: number;
   blurKernelSize: KernelSize;
   upsampleQuality: GodraysUpsampleQuality;
+  debugSteps: boolean;
+  useAdaptiveSteps: boolean;
+  stepSize: number;
+  minSteps: number;
+  maxSteps: number;
 }
 
 export class BaseDemo extends Demo {
@@ -26,11 +32,16 @@ export class BaseDemo extends Demo {
     color: new THREE.Color(0xffffff).getHex(),
     raymarchSteps: 60,
     enableBlur: true,
-    blurVariance: 0.1,
-    blurKernelSize: KernelSize.SMALL,
+    blurVariance: 0.125,
+    blurKernelSize: KernelSize.MEDIUM,
     gammaCorrection: false,
     resolutionScale: 0.5,
     upsampleQuality: GodraysUpsampleQuality.HIGH,
+    useAdaptiveSteps: false,
+    stepSize: 3.5,
+    minSteps: 8,
+    maxSteps: 125,
+    debugSteps: false,
   };
 
   public composer: EffectComposer;
@@ -40,16 +51,35 @@ export class BaseDemo extends Demo {
     this.composer = composer;
   }
 
-  public onParamChange = (key: string, value: any) => {
-    this.params[key] = value;
-
-    this.godraysPass.setParams({
-      ...this.params,
+  public buildPassParams(): Partial<GodraysPassParams> {
+    const passParams: Partial<GodraysPassParams> = {
+      density: this.params.density,
+      maxDensity: this.params.maxDensity,
+      distanceAttenuation: this.params.distanceAttenuation,
       color: new THREE.Color(this.params.color),
       blur: this.params.enableBlur
         ? { variance: this.params.blurVariance, kernelSize: this.params.blurKernelSize }
         : false,
-    });
+      gammaCorrection: this.params.gammaCorrection,
+      resolutionScale: this.params.resolutionScale,
+      upsampleQuality: this.params.upsampleQuality,
+      debugSteps: this.params.debugSteps,
+    };
+    if (this.params.useAdaptiveSteps) {
+      passParams.adaptiveSteps = {
+        stepSize: this.params.stepSize,
+        minSteps: this.params.minSteps,
+        maxSteps: this.params.maxSteps,
+      };
+    } else {
+      passParams.raymarchSteps = this.params.raymarchSteps;
+    }
+    return passParams;
+  }
+
+  public onParamChange = (key: string, value: any) => {
+    this.params[key] = value;
+    this.godraysPass.setParams(this.buildPassParams());
   };
 
   registerOptions(menu: GUI) {
@@ -69,6 +99,11 @@ export class BaseDemo extends Demo {
       .onChange(mkOnChange('upsampleQuality'));
     menu.add(this.params, 'resolutionScale', 0.1, 1, 0.05).onChange(mkOnChange('resolutionScale'));
     menu.add(this.params, 'raymarchSteps', 1, 200, 1).onChange(mkOnChange('raymarchSteps'));
+    menu.add(this.params, 'debugSteps').onChange(mkOnChange('debugSteps'));
+    menu.add(this.params, 'useAdaptiveSteps').onChange(mkOnChange('useAdaptiveSteps'));
+    menu.add(this.params, 'stepSize', 0.1, 50, 0.1).onChange(mkOnChange('stepSize'));
+    menu.add(this.params, 'minSteps', 1, 50, 1).onChange(mkOnChange('minSteps'));
+    menu.add(this.params, 'maxSteps', 10, 300, 1).onChange(mkOnChange('maxSteps'));
     menu.add(this.params, 'enableBlur', true).onChange(mkOnChange('enableBlur'));
     menu.add(this.params, 'blurVariance', 0.001, 0.5, 0.001).onChange(mkOnChange('blurVariance'));
     menu

demo/src/dirlightDemo.ts

@@ -82,11 +82,12 @@ export default class DirlightDemo extends BaseDemo {
     this.controls.enableDamping = true;
     this.controls.dampingFactor = 0.1;
 
-    this.camera.position.set(-140, 110, -200);
+    this.camera.position.set(-140, 140, -200);
     this.controls.target.set(0, 0, 0);
     this.controls.update();
 
     const renderPass = new RenderPass(this.scene, this.camera);
+    renderPass.renderToScreen = false;
     this.composer.addPass(renderPass);
 
     const dirLight = new THREE.DirectionalLight(0xffffff, 0.3);
@@ -112,16 +113,19 @@ export default class DirlightDemo extends BaseDemo {
     // const dirLightCameraHelper = new THREE.CameraHelper(dirLight.shadow.camera);
     // this.scene.add(dirLightCameraHelper);
 
-    this.godraysPass = new GodraysPass(dirLight, this.camera as THREE.PerspectiveCamera, {
-      ...this.params,
-      gammaCorrection: false,
-      color: new THREE.Color(this.params.color),
-    });
+    this.params.useAdaptiveSteps = true;
+    this.godraysPass = new GodraysPass(
+      dirLight,
+      this.camera as THREE.PerspectiveCamera,
+      this.buildPassParams()
+    );
+    this.godraysPass.renderToScreen = false;
     this.composer.addPass(this.godraysPass);
 
     const smaaEffect = new SMAAEffect();
     const smaaPass = new EffectPass(this.camera, smaaEffect);
     smaaPass.encodeOutput = false;
+    smaaPass.renderToScreen = true;
     this.composer.addPass(smaaPass);
   }
 

demo/src/pointlightDemo.ts

@@ -109,11 +109,7 @@ export default class PointlightDemo extends BaseDemo {
     pointLight.position.copy(lightPos);
     this.scene.add(pointLight);
 
-    this.godraysPass = new GodraysPass(pointLight, this.camera as THREE.PerspectiveCamera, {
-      ...this.params,
-      gammaCorrection: false,
-      color: new THREE.Color(this.params.color),
-    });
+    this.godraysPass = new GodraysPass(pointLight, this.camera as THREE.PerspectiveCamera, this.buildPassParams());
     this.godraysPass.renderToScreen = false;
     this.composer.addPass(this.godraysPass);
 

demo/src/sponzaDemo.ts

@@ -69,11 +69,7 @@ export class SponzaDemo extends BaseDemo {
     this.renderer.shadowMap.needsUpdate = true;
 
     this.params.density = 0.11;
-    this.godraysPass = new GodraysPass(pointLight, this.camera as THREE.PerspectiveCamera, {
-      ...this.params,
-      gammaCorrection: false,
-      color: new THREE.Color(this.params.color),
-    });
+    this.godraysPass = new GodraysPass(pointLight, this.camera as THREE.PerspectiveCamera, this.buildPassParams());
     this.godraysPass.renderToScreen = false;
     this.composer.addPass(this.godraysPass);
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "three-good-godrays",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Screen-space raymarched godrays for three.js using the pmndrs postprocessing library",
   "type": "module",
   "main": "build/three-good-godrays.js",

src/bilateralFilter.frag

@@ -41,6 +41,11 @@ float normpdf(in float x, in float sigma) {
 void main() {
   ivec2 fragCoord = ivec2(vUv * resolution);
   vec4 centerSample = texelFetch(tInput, fragCoord, 0);
+
+  #if defined(DEBUG_STEPS)
+  // Pass through heatmap colors unmodified — blurring would distort the visualization
+  gl_FragColor = centerSample;
+  #else
   float c = centerSample.r;
   float finalValue = 0.;
 
@@ -56,4 +61,5 @@ void main() {
   }
 
   gl_FragColor = vec4(vec3(finalValue / totalFactor), centerSample.a);
+  #endif
 }

src/bilateralFilter.ts

@@ -62,6 +62,17 @@ export class BilateralFilterPass extends Pass implements Resizable, Disposable {
     this.material.defines.KSIZE_ENUM = params.kernelSize;
   }
 
+  public updateDebugSteps(enabled: boolean) {
+    const has = this.material.defines.DEBUG_STEPS !== undefined;
+    if (enabled && !has) {
+      this.material.defines.DEBUG_STEPS = '';
+      this.material.needsUpdate = true;
+    } else if (!enabled && has) {
+      delete this.material.defines.DEBUG_STEPS;
+      this.material.needsUpdate = true;
+    }
+  }
+
   public override dispose() {
     this.material.dispose();
     super.dispose();

src/compositor.frag

@@ -84,7 +84,29 @@ void main() {
   float bestChoice = totalWeight > 0.0 ? totalIllum / totalWeight : 0.0;
 
   vec3 diffuse = texture2D(sceneDiffuse, vUv).rgb;
+
+  #if defined(DEBUG_STEPS)
+  // In debug mode, the godrays texture contains heatmap RGB — pass through directly
+  vec3 totalColor = vec3(0.0);
+  float totalColorWeight = 0.0;
+  for (int y = -JBU_EXTENT; y <= 1 + JBU_EXTENT; y++) {
+    for (int x = -JBU_EXTENT; x <= 1 + JBU_EXTENT; x++) {
+      vec2 sampleUv = (base + vec2(float(x), float(y)) + 0.5) * texelSize;
+      vec4 data = texture2D(godrays, sampleUv);
+      float sampleDepth = data.a;
+      vec2 d = vec2(float(x), float(y)) - f;
+      float spatialW = exp(-dot(d, d) / (2.0 * JBU_SPATIAL_SIGMA * JBU_SPATIAL_SIGMA));
+      float depthDiff = (sampleDepth - correctDepth) / max(correctDepth, 0.001);
+      float depthW = exp(-0.5 * depthDiff * depthDiff / (JBU_DEPTH_SIGMA * JBU_DEPTH_SIGMA));
+      float w = spatialW * depthW;
+      totalColorWeight += w;
+      totalColor += data.rgb * w;
+    }
+  }
+  gl_FragColor = vec4(totalColorWeight > 0.0 ? totalColor / totalColorWeight : vec3(0.0), 1.0);
+  #else
   gl_FragColor = vec4(mix(diffuse, color, bestChoice), 1.0);
+  #endif
 
   #include <dithering_fragment>
 

src/compositorPass.ts

@@ -97,6 +97,18 @@ export class GodraysCompositorPass extends Pass {
     );
   }
 
+  public updateDebugSteps(enabled: boolean): void {
+    const mat = this.fullscreenMaterial as GodraysCompositorMaterial;
+    const has = mat.defines.DEBUG_STEPS !== undefined;
+    if (enabled && !has) {
+      mat.defines.DEBUG_STEPS = '';
+      mat.needsUpdate = true;
+    } else if (!enabled && has) {
+      delete mat.defines.DEBUG_STEPS;
+      mat.needsUpdate = true;
+    }
+  }
+
   public updateUpsampleQuality(quality: GodraysUpsampleQuality): void {
     const mat = this.fullscreenMaterial as GodraysCompositorMaterial;
     const jbuExtent = quality >= 1 ? 1 : 0;