Support for dithering using interleaved gradient noise

examples/src/examples/graphics/dithered-transparency/controls.mjs

@@ -31,7 +31,8 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
                     options: [
                         { v: pc.DITHER_NONE, t: 'None' },
                         { v: pc.DITHER_BAYER8, t: 'Bayer8' },
-                        { v: pc.DITHER_BLUENOISE, t: 'BlueNoise' }
+                        { v: pc.DITHER_BLUENOISE, t: 'BlueNoise' },
+                        { v: pc.DITHER_IGNNOISE, t: 'IGNNoise' }
                     ]
                 })
             ),
@@ -45,7 +46,8 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
                     options: [
                         { v: pc.DITHER_NONE, t: 'None' },
                         { v: pc.DITHER_BAYER8, t: 'Bayer8' },
-                        { v: pc.DITHER_BLUENOISE, t: 'BlueNoise' }
+                        { v: pc.DITHER_BLUENOISE, t: 'BlueNoise' },
+                        { v: pc.DITHER_IGNNOISE, t: 'IGNNoise' }
                     ]
                 })
             ),

src/scene/constants.js

@@ -1023,9 +1023,17 @@ export const DITHER_NONE = 'none';
 export const DITHER_BAYER8 = 'bayer8';
 
 /**
- * Opacity is dithered using a blue noise texture.
+ * Opacity is dithered using a blue noise.
  *
  * @type {string}
  * @category Graphics
  */
 export const DITHER_BLUENOISE = 'bluenoise';
+
+/**
+ * Opacity is dithered using an interleaved gradient noise.
+ *
+ * @type {string}
+ * @category Graphics
+ */
+export const DITHER_IGNNOISE = 'ignnoise';

src/scene/graphics/noise-textures.js

@@ -0,0 +1,39 @@
+import { blueNoiseData } from "../../core/math/blue-noise.js";
+import { ADDRESS_REPEAT, FILTER_NEAREST, PIXELFORMAT_RGBA8, TEXTURETYPE_DEFAULT } from "../../platform/graphics/constants.js";
+import { DeviceCache } from "../../platform/graphics/device-cache.js";
+import { Texture } from "../../platform/graphics/texture.js";
+
+const createTexture = (device, namePrefix, size, data) => {
+    const texture = new Texture(device, {
+        name: `${namePrefix}${size}`,
+        width: size,
+        height: size,
+        format: PIXELFORMAT_RGBA8,
+        addressU: ADDRESS_REPEAT,
+        addressV: ADDRESS_REPEAT,
+        type: TEXTURETYPE_DEFAULT,
+        magFilter: FILTER_NEAREST,
+        minFilter: FILTER_NEAREST,
+        anisotropy: 1,
+        mipmaps: false
+    });
+
+    texture.lock().set(data);
+    texture.unlock();
+
+    return texture;
+};
+
+// device cache storing the blue noise texture for the device
+const deviceCacheBlueNoise = new DeviceCache();
+
+const getBlueNoiseTexture = (device) => {
+    return deviceCacheBlueNoise.get(device, () => {
+
+        const data = blueNoiseData();
+        const size = Math.sqrt(data.length / 4);
+        return createTexture(device, "BlueNoise", size, data);
+    });
+};
+
+export { getBlueNoiseTexture };

src/scene/materials/standard-material.js

@@ -384,15 +384,17 @@ let _params = new Set();
  *
  * - {@link DITHER_NONE}: Opacity dithering is disabled.
  * - {@link DITHER_BAYER8}: Opacity is dithered using a Bayer 8 matrix.
- * - {@link DITHER_BLUENOISE}: Opacity is dithered using a blue noise texture.
+ * - {@link DITHER_BLUENOISE}: Opacity is dithered using a blue noise.
+ * - {@link DITHER_IGNNOISE}: Opacity is dithered using an interleaved gradient noise.
  *
  * Defaults to {@link DITHER_NONE}.
  * @property {boolean} opacityShadowDither Used to specify whether shadow opacity is dithered, which
  * allows shadow transparency without alpha blending.  Can be:
  *
  * - {@link DITHER_NONE}: Opacity dithering is disabled.
  * - {@link DITHER_BAYER8}: Opacity is dithered using a Bayer 8 matrix.
- * - {@link DITHER_BLUENOISE}: Opacity is dithered using a blue noise texture.
+ * - {@link DITHER_BLUENOISE}: Opacity is dithered using a blue noise.
+ * - {@link DITHER_IGNNOISE}: Opacity is dithered using an interleaved gradient noise.
  *
  * Defaults to {@link DITHER_NONE}.
  * @property {number} alphaFade Used to fade out materials when

src/scene/renderer/renderer.js

@@ -38,7 +38,7 @@ import { ShadowRendererDirectional } from './shadow-renderer-directional.js';
 import { ShadowRenderer } from './shadow-renderer.js';
 import { WorldClustersAllocator } from './world-clusters-allocator.js';
 import { RenderPassUpdateClustered } from './render-pass-update-clustered.js';
-import { getBlueNoiseTexture } from '../graphics/blue-noise-texture.js';
+import { getBlueNoiseTexture } from '../graphics/noise-textures.js';
 import { BlueNoise } from '../../core/math/blue-noise.js';
 
 let _skinUpdateIndex = 0;

src/scene/shader-lib/chunks/standard/frag/opacity-dither.js

@@ -2,7 +2,7 @@ export default /* glsl */`
 
 uniform vec4 blueNoiseJitter;
 
-#ifndef DITHER_BAYER8
+#ifdef DITHER_BLUENOISE
     uniform sampler2D blueNoiseTex32;
 #endif
 
@@ -11,10 +11,18 @@ void opacityDither(float alpha, float id) {
 
         float noise = bayer8(floor(mod(gl_FragCoord.xy + blueNoiseJitter.xy + id, 8.0))) / 64.0;
 
-    #else   // blue noise
+    #else
 
-        vec2 uv = fract(gl_FragCoord.xy / 32.0 + blueNoiseJitter.xy + id);
-        float noise = texture2DLodEXT(blueNoiseTex32, uv, 0.0).y;
+        #ifdef DITHER_BLUENOISE
+            vec2 uv = fract(gl_FragCoord.xy / 32.0 + blueNoiseJitter.xy + id);
+            float noise = texture2DLodEXT(blueNoiseTex32, uv, 0.0).y;
+        #endif
+
+        #ifdef DITHER_IGNNOISE
+            // based on https://www.iryoku.com/next-generation-post-processing-in-call-of-duty-advanced-warfare/
+            vec3 magic = vec3(0.06711056, 0.00583715, 52.9829189);
+            float noise = fract(magic.z * fract(dot(gl_FragCoord.xy + blueNoiseJitter.xy + id, magic.xy)));
+        #endif
 
     #endif
 

src/scene/shader-lib/programs/lit-shader.js

@@ -226,7 +226,7 @@ class LitShader {
         }
 
         if (this.options.pass === SHADER_PREPASS_VELOCITY) {
-            Debug.error("SHADER_PREPASS_VELOCITY not implemented");
+            Debug.warnOnce("SHADER_PREPASS_VELOCITY not implemented");
         }
 
         if (this.options.useInstancing) {