Updated dithered transparency to support blue noise

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

@@ -5,7 +5,7 @@ import * as pc from 'playcanvas';
  * @returns {JSX.Element} The returned JSX Element.
  */
 function controls({ observer, ReactPCUI, React, jsx, fragment }) {
-    const { BindingTwoWay, LabelGroup, Panel, SliderInput, BooleanInput } = ReactPCUI;
+    const { BindingTwoWay, LabelGroup, Panel, SliderInput, BooleanInput, SelectInput } = ReactPCUI;
     return fragment(
         jsx(Panel, { headerText: 'Settings' },
             jsx(LabelGroup, { text: 'Opacity' },
@@ -18,19 +18,27 @@ function controls({ observer, ReactPCUI, React, jsx, fragment }) {
                 })
             ),
             jsx(LabelGroup, { text: 'Dither Color' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
+                jsx(SelectInput, {
                     binding: new BindingTwoWay(),
                     link: { observer, path: 'data.opacityDither' },
-                    value: true
+                    type: "string",
+                    options: [
+                        { v: pc.DITHER_NONE, t: 'None' },
+                        { v: pc.DITHER_BAYER8, t: 'Bayer8' },
+                        { v: pc.DITHER_BLUENOISE, t: 'BlueNoise' }
+                    ]
                 })
             ),
             jsx(LabelGroup, { text: 'Dither Shadow' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
+                jsx(SelectInput, {
                     binding: new BindingTwoWay(),
                     link: { observer, path: 'data.opacityShadowDither' },
-                    value: true
+                    type: "string",
+                    options: [
+                        { v: pc.DITHER_NONE, t: 'None' },
+                        { v: pc.DITHER_BAYER8, t: 'Bayer8' },
+                        { v: pc.DITHER_BLUENOISE, t: 'BlueNoise' }
+                    ]
                 })
             )
         )
@@ -62,6 +70,9 @@ async function example({ canvas, deviceType, assetPath, glslangPath, twgslPath,
     createOptions.touch = new pc.TouchDevice(document.body);
     createOptions.keyboard = new pc.Keyboard(document.body);
 
+    // render at full native resolution
+    device.maxPixelRatio = window.devicePixelRatio;
+
     createOptions.componentSystems = [
         pc.RenderComponentSystem,
         pc.CameraComponentSystem,
@@ -197,7 +208,7 @@ async function example({ canvas, deviceType, assetPath, glslangPath, twgslPath,
 
                 // turn on / off blending depending on the dithering of the color
                 if (propertyName === 'opacityDither') {
-                    material.blendType = value ? pc.BLEND_NONE : pc.BLEND_NORMAL;
+                    material.blendType = value === pc.DITHER_NONE ? pc.BLEND_NORMAL : pc.BLEND_NONE;
                 }
                 material.update();
             });
@@ -206,8 +217,8 @@ async function example({ canvas, deviceType, assetPath, glslangPath, twgslPath,
         // initial values
         data.set('data', {
             opacity: 0.5,
-            opacityDither: true,
-            opacityShadowDither: true
+            opacityDither: pc.DITHER_BAYER8,
+            opacityShadowDither: pc.DITHER_BAYER8
         });
     });
     return app;

extras/splat/shader-generator-splat.js

@@ -1,5 +1,6 @@
 import {
     ShaderUtils,
+    DITHER_NONE,
     SEMANTIC_ATTR13,
     SEMANTIC_POSITION,
     ShaderGenerator,
@@ -28,6 +29,7 @@ const splatCoreVS = `
 
     varying vec2 texCoord;
     varying vec4 color;
+    varying float id;
 
     mat3 quatToMat3(vec3 R)
     {
@@ -233,12 +235,15 @@ const splatCoreVS = `
                 vec4((vertex_position.x * v1 + vertex_position.y * v2) / viewport * 2.0,
                     0.0, 0.0) * splat_proj.w;
         #endif
+
+        id = float(vertex_id);
     }
 `;
 
 const splatCoreFS = /* glsl_ */ `
     varying vec2 texCoord;
     varying vec4 color;
+    varying float id;
 
     vec4 evalSplat() {
 
@@ -253,17 +258,17 @@ const splatCoreFS = /* glsl_ */ `
             if (A < -4.0) discard;
             float B = exp(A) * color.a;
 
+            #ifndef DITHER_NONE
+                opacityDither(B, id * 0.013);
+            #endif
+
             // the color here is in gamma space, so bring it to linear
             vec3 diffuse = decodeGamma(color.rgb);
 
             // apply tone-mapping and gamma correction as needed
             diffuse = toneMap(diffuse);
             diffuse = gammaCorrectOutput(diffuse);
 
-            #ifdef DITHER
-                opacityDither(B);
-            #endif
-
             return vec4(diffuse, B);
 
         #endif
@@ -282,11 +287,11 @@ class ShaderGeneratorSplat {
         const defines =
             (options.debugRender ? '#define DEBUG_RENDER\n' : '') +
             (device.isWebGL1 ? '' : '#define INT_INDICES\n') +
-            (options.dither ? '#define DITHER\n' : '');
+            `#define DITHER_${options.dither.toUpperCase()}\n`;
 
         const vs = defines + splatCoreVS + options.vertex;
         const fs = defines + shaderChunks.decodePS +
-            (options.dither ? shaderChunks.bayerPS + shaderChunks.opacityDitherPS : '') +
+            (options.dither === DITHER_NONE ? '' : shaderChunks.bayerPS + shaderChunks.opacityDitherPS) +
             ShaderGenerator.tonemapCode(options.toneMapping) +
             ShaderGenerator.gammaCode(options.gamma) +
             splatCoreFS + options.fragment;

extras/splat/splat-instance.js

@@ -5,6 +5,7 @@ import {
     Mat4,
     createBox,
     BUFFER_DYNAMIC,
+    DITHER_NONE,
     VertexBuffer
 } from "playcanvas";
 
@@ -96,7 +97,7 @@ class SplatInstance {
         // clone centers to allow multiple instancing of sorter
         this.centers = new Float32Array(splat.centers);
 
-        if (!options.dither) {
+        if (options.dither !== DITHER_NONE) {
             this.sorter = new SplatSorter();
             this.sorter.init(this.vb, this.centers, !this.splat.device.isWebGL1);
 

extras/splat/splat-material.js

@@ -5,6 +5,7 @@ import {
     CULLFACE_BACK,
     CULLFACE_NONE,
     Material,
+    DITHER_NONE,
     SHADER_FORWARDHDR,
     TONEMAP_LINEAR,
     GAMMA_SRGBHDR,
@@ -45,12 +46,13 @@ const splatMainFS = `
  */
 const createSplatMaterial = (options = {}) => {
 
-    const { debugRender, dither } = options;
+    const { debugRender } = options;
+    const dither = options.dither ?? DITHER_NONE;
 
     const material = new Material();
     material.name = 'splatMaterial';
     material.cull = debugRender ? CULLFACE_BACK : CULLFACE_NONE;
-    material.blendType = dither ? BLEND_NONE : BLEND_NORMAL;
+    material.blendType = dither === DITHER_NONE ? BLEND_NORMAL : BLEND_NONE;
     material.depthWrite = dither;
 
     material.getShaderVariant = function (device, scene, defs, unused, pass, sortedLights, viewUniformFormat, viewBindGroupFormat) {
@@ -62,7 +64,7 @@ const createSplatMaterial = (options = {}) => {
             vertex: options.vertex ?? splatMainVS,
             fragment: options.fragment ?? splatMainFS,
             debugRender: debugRender,
-            dither: !!dither
+            dither: dither
         };
 
         const processingOptions = new ShaderProcessorOptions(viewUniformFormat, viewBindGroupFormat);

src/scene/constants.js

@@ -887,3 +887,24 @@ export const SKYTYPE_BOX = 'box';
  * @type {string}
  */
 export const SKYTYPE_DOME = 'dome';
+
+/**
+ * Opacity dithering is disabled.
+ *
+ * @type {string}
+ */
+export const DITHER_NONE = 'none';
+
+/**
+ * Opacity is dithered using a Bayer 8 matrix.
+ *
+ * @type {string}
+ */
+export const DITHER_BAYER8 = 'bayer8';
+
+/**
+ * Opacity is dithered using a blue noise texture.
+ *
+ * @type {string}
+ */
+export const DITHER_BLUENOISE = 'bluenoise';

src/scene/graphics/blue-noise-texture.js

@@ -0,0 +1,37 @@
+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";
+
+// device cache storing the blue noise texture for the device
+const deviceCache = new DeviceCache();
+
+function getBlueNoiseTexture(device) {
+
+    return deviceCache.get(device, () => {
+
+        const data = blueNoiseData();
+        const size = Math.sqrt(data.length / 4);
+
+        const texture = new Texture(device, {
+            name: `BlueNoise${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;
+    });
+}
+
+export { getBlueNoiseTexture };

src/scene/materials/lit-material.js

@@ -1,5 +1,5 @@
 import { ShaderProcessorOptions } from '../../platform/graphics/shader-processor-options.js';
-import { FRESNEL_SCHLICK, SPECOCC_AO, SPECULAR_BLINN } from "../constants.js";
+import { DITHER_NONE, FRESNEL_SCHLICK, SPECOCC_AO, SPECULAR_BLINN } from "../constants.js";
 import { Material } from './material.js';
 import { LitMaterialOptions } from './lit-material-options.js';
 import { LitMaterialOptionsBuilder } from './lit-material-options-builder.js';
@@ -53,9 +53,9 @@ class LitMaterial extends Material {
 
     opacityFadesSpecular = true;
 
-    opacityDither = false;
+    opacityDither = DITHER_NONE;
 
-    opacityShadowDither = false;
+    opacityShadowDither = DITHER_NONE;
 
     conserveEnergy = true;
 

src/scene/materials/standard-material-options-builder.js

@@ -11,7 +11,8 @@ import {
     SHADERDEF_DIRLM, SHADERDEF_INSTANCING, SHADERDEF_LM, SHADERDEF_MORPH_POSITION, SHADERDEF_MORPH_NORMAL, SHADERDEF_NOSHADOW, SHADERDEF_MORPH_TEXTURE_BASED,
     SHADERDEF_SCREENSPACE, SHADERDEF_SKIN, SHADERDEF_TANGENTS, SHADERDEF_UV0, SHADERDEF_UV1, SHADERDEF_VCOLOR, SHADERDEF_LMAMBIENT,
     TONEMAP_LINEAR,
-    SPECULAR_PHONG
+    SPECULAR_PHONG,
+    DITHER_NONE
 } from '../constants.js';
 import { _matTex2D } from '../shader-lib/programs/standard.js';
 import { LitMaterialOptionsBuilder } from './lit-material-options-builder.js';
@@ -150,7 +151,7 @@ class StandardMaterialOptionsBuilder {
             options[vname] = false;
             options[vcname] = '';
 
-            if (isOpacity && stdMat.blendType === BLEND_NONE && stdMat.alphaTest === 0.0 && !stdMat.alphaToCoverage && !stdMat.opacityDither) {
+            if (isOpacity && stdMat.blendType === BLEND_NONE && stdMat.alphaTest === 0.0 && !stdMat.alphaToCoverage && stdMat.opacityDither === DITHER_NONE) {
                 return;
             }
 
@@ -188,7 +189,7 @@ class StandardMaterialOptionsBuilder {
     }
 
     _updateMinOptions(options, stdMat) {
-        options.opacityTint = stdMat.opacity !== 1 && (stdMat.blendType !== BLEND_NONE || stdMat.opacityShadowDither);
+        options.opacityTint = stdMat.opacity !== 1 && (stdMat.blendType !== BLEND_NONE || stdMat.opacityShadowDither !== DITHER_NONE);
         options.litOptions.opacityShadowDither = stdMat.opacityShadowDither;
         options.litOptions.lights = [];
     }
@@ -215,7 +216,7 @@ class StandardMaterialOptionsBuilder {
 
         const isPackedNormalMap = stdMat.normalMap ? (stdMat.normalMap.format === PIXELFORMAT_DXT5 || stdMat.normalMap.type === TEXTURETYPE_SWIZZLEGGGR) : false;
 
-        options.opacityTint = (stdMat.opacity !== 1 && (stdMat.blendType !== BLEND_NONE || stdMat.alphaTest > 0 || stdMat.opacityDither)) ? 1 : 0;
+        options.opacityTint = (stdMat.opacity !== 1 && (stdMat.blendType !== BLEND_NONE || stdMat.alphaTest > 0 || stdMat.opacityDither !== DITHER_NONE)) ? 1 : 0;
         options.ambientTint = stdMat.ambientTint;
         options.diffuseTint = diffuseTint ? 2 : 0;
         options.specularTint = specularTint ? 2 : 0;

src/scene/materials/standard-material-parameters.js

@@ -95,8 +95,8 @@ const standardMaterialParameterTypes = {
     opacity: 'number',
     ..._textureParameter('opacity'),
     opacityFadesSpecular: 'boolean',
-    opacityDither: 'boolean',
-    opacityShadowDither: 'boolean',
+    opacityDither: 'string',
+    opacityShadowDither: 'string',
 
     reflectivity: 'number',
     refraction: 'number',