Some improvements from Three.JS port

 * Incorporating improvements from the Three.JS devs here: mrdoob/three.js#32888
 * Use Poisson disk sampling for the depth-aware blend
 * Replace blue noise texture with a computed noise implementation

Author: Ameobea

src/bluenoise.ts

@@ -41,17 +41,28 @@ void main() {
   float rawDepth = texture2D(sceneDepth, vUv).x;
   float correctDepth = linearize_depth(rawDepth, near, far);
 
+  const vec2 poissonDisk[8] = vec2[8](
+    vec2( 0.493393,  0.394269),
+    vec2( 0.798547,  0.885922),
+    vec2( 0.259143,  0.650754),
+    vec2( 0.605322,  0.023588),
+    vec2(-0.574681,  0.137452),
+    vec2(-0.430397, -0.638423),
+    vec2(-0.849487, -0.366258),
+    vec2( 0.170621, -0.569941)
+  );
+
   vec2 pushDir = vec2(0.0);
   float count = 0.0;
-  for (float x = -edgeRadius; x <= edgeRadius; x++) {
-    for (float y = -edgeRadius; y <= edgeRadius; y++) {
-      vec2 sampleUv = (vUv * resolution + vec2(x, y)) / resolution;
-      float sampleDepth = texelFetch(sceneDepth, ivec2(sampleUv * resolution), 0).x;
-      sampleDepth = linearize_depth(sampleDepth, near, far);
-      if (abs(sampleDepth - correctDepth) < 0.05 * correctDepth) {
-        pushDir += vec2(x, y);
-        count += 1.0;
-      }
+  vec2 pixelStep = 1.0 / resolution;
+  for (int i = 0; i < 8; i++) {
+    vec2 offset = poissonDisk[i] * edgeRadius;
+    vec2 sampleUv = vUv + offset * pixelStep;
+    float sampleDepth = texture2D(sceneDepth, sampleUv).x;
+    sampleDepth = linearize_depth(sampleDepth, near, far);
+    if (abs(sampleDepth - correctDepth) < 0.05 * correctDepth) {
+      pushDir += offset;
+      count += 1.0;
     }
   }
 

src/compositor.frag

@@ -8,7 +8,6 @@
 varying vec2 vUv;
 
 uniform sampler2D sceneDepth;
-uniform sampler2D blueNoise;
 uniform vec3 lightPos;
 uniform vec3 cameraPos;
 uniform vec2 resolution;
@@ -19,7 +18,6 @@ uniform samplerCube shadowMap;
 #else
 uniform sampler2D shadowMap;
 #endif
-uniform vec2 noiseResolution;
 uniform float texelSizeY;
 uniform float lightCameraNear;
 uniform float lightCameraFar;
@@ -232,8 +230,8 @@ void main() {
   }
   float illum = 0.0;
 
-  vec4 blueNoiseSample = texture2D(blueNoise, vUv * (resolution / noiseResolution));
-  float samplesFloat = round(raymarchSteps + ((raymarchSteps / 8.) + 2.) * blueNoiseSample.x);
+  float noise = fract(52.9829189 * fract(0.06711056 * gl_FragCoord.x + 0.00583715 * gl_FragCoord.y));
+  float samplesFloat = round(raymarchSteps + ((raymarchSteps / 8.) + 2.) * noise);
   int samples = int(samplesFloat);
   for (int i = 0; i < samples; i++) {
     vec3 samplePos = mix(startPos, worldPos, float(i) / samplesFloat);

src/godrays.frag

@@ -1,7 +1,6 @@
 import { Pass, type Resizable } from 'postprocessing';
 import * as THREE from 'three';
 
-import { getBlueNoiseTexture } from './bluenoise';
 import GodraysFragmentShader from './godrays.frag';
 import GodraysVertexShader from './godrays.vert';
 import type { GodraysPassParams } from './index';
@@ -33,8 +32,6 @@ class GodraysMaterial extends THREE.ShaderMaterial {
       lightCameraFar: { value: 1000 },
       near: { value: 0.1 },
       far: { value: 1000.0 },
-      blueNoise: { value: null as THREE.Texture | null },
-      noiseResolution: { value: new THREE.Vector2(1, 1) },
       fNormals: { value: DIRECTIONS.map(() => new THREE.Vector3()) },
       fConstants: { value: DIRECTIONS.map(() => 0) },
       raymarchSteps: { value: 60 },
@@ -59,13 +56,6 @@ class GodraysMaterial extends THREE.ShaderMaterial {
       defines: defines as any,
     });
 
-    getBlueNoiseTexture().then(blueNoiseTexture => {
-      uniforms.blueNoise.value = blueNoiseTexture;
-      uniforms.noiseResolution.value.set(
-        blueNoiseTexture.image.width,
-        blueNoiseTexture.image.height
-      );
-    });
   }
 }