rename dithering to grain, adjust grain based on luminance

dist/preview release/typedocValidationBaseline.json

@@ -38929,7 +38929,7 @@
             "MissingText": true
           }
         },
-        "DITHERING": {
+        "GRAIN": {
           "Naming": {
             "NotCamelCase": true
           }

materialsLibrary/src/custom/babylon.customMaterial.ts

@@ -77,7 +77,7 @@ module BABYLON {
         public SAMPLER3DBGRMAP = false;
         public IMAGEPROCESSINGPOSTPROCESS = false;
         public EXPOSURE = false;
-        public DITHERING = false;
+        public GRAIN = false;
 
         constructor() {
             super();

src/Materials/Background/babylon.backgroundMaterial.ts

@@ -85,7 +85,7 @@
         public SAMPLER3DBGRMAP = false;
         public IMAGEPROCESSINGPOSTPROCESS = false;
         public EXPOSURE = false;
-        public DITHERING = false;
+        public GRAIN = false;
 
         // Reflection.
         public REFLECTION = false;

src/Materials/PBR/babylon.pbrBaseMaterial.ts

@@ -119,7 +119,7 @@
         public SAMPLER3DBGRMAP = false;
         public IMAGEPROCESSINGPOSTPROCESS = false;
         public EXPOSURE = false;
-        public DITHERING = false;
+        public GRAIN = false;
 
         public USEPHYSICALLIGHTFALLOFF = false;
         public TWOSIDEDLIGHTING = false;

src/Materials/babylon.imageProcessingConfiguration.ts

@@ -18,9 +18,9 @@ module BABYLON {
         SAMPLER3DBGRMAP: boolean;
         IMAGEPROCESSINGPOSTPROCESS: boolean;
         /** 
-         * If the dithering should be performed in the image processing shader.
+         * If the grain should be performed in the image processing shader.
          */
-        DITHERING: boolean;
+        GRAIN: boolean;
     }
 
     /**
@@ -220,19 +220,37 @@ module BABYLON {
         public vignetteCameraFov = 0.5;
 
         @serialize()
-        private _ditheringVarianceAmount = 0;
+        private _grainVarianceAmount = 0;
         /**
-         * Amount of dithering to be applied by the dithering effect.
+         * Amount of grain to be applied by the grain effect.
          */
-        public get ditheringVarianceAmount(): number {
-            return this._ditheringVarianceAmount;
+        public get grainVarianceAmount(): number {
+            return this._grainVarianceAmount;
         }
-        public set ditheringVarianceAmount(value: number) {
-            if (this._ditheringVarianceAmount === value) {
+        public set grainVarianceAmount(value: number) {
+            if (this._grainVarianceAmount === value) {
                 return;
             }
 
-            this._ditheringVarianceAmount = value;
+            this._grainVarianceAmount = value;
+            this._updateParameters();
+        }
+
+        @serialize()
+        private _grainAnimated = false;
+
+        /**
+         * If the grain effect should be animated.
+         */
+        public get grainAnimated(): boolean {
+            return this._grainAnimated;
+        }
+        public set grainAnimated(value: boolean) {
+            if (this._grainAnimated === value) {
+                return;
+            }
+
+            this._grainAnimated = value;
             this._updateParameters();
         }
 
@@ -356,8 +374,9 @@ module BABYLON {
             if (defines.COLORCURVES) {
                 ColorCurves.PrepareUniforms(uniforms);
             }
-            if (defines.DITHERING){
-                uniforms.push("ditherVarianceAmount");
+            if (defines.GRAIN){
+                uniforms.push("grainVarianceAmount");
+                uniforms.push("grainAnimatedSeed");
             }
         }
 
@@ -407,7 +426,7 @@ module BABYLON {
             defines.SAMPLER3DBGRMAP = this.colorGradingBGR;
             defines.IMAGEPROCESSINGPOSTPROCESS = this.applyByPostProcess;
             defines.IMAGEPROCESSING = defines.VIGNETTE || defines.TONEMAPPING || defines.CONTRAST || defines.EXPOSURE || defines.COLORCURVES || defines.COLORGRADING;
-            defines.DITHERING = (this.ditheringVarianceAmount != 0.0);
+            defines.GRAIN = (this.grainVarianceAmount != 0.0);
         }
 
         /**
@@ -466,7 +485,8 @@ module BABYLON {
                 );
             }
 
-            effect.setFloat("ditherVarianceAmount", this.ditheringVarianceAmount);
+            effect.setFloat("grainVarianceAmount", this.grainVarianceAmount);
+            effect.setFloat("grainAnimatedSeed", this.grainAnimated ? Math.random() : 1);
         }
 
         /**

src/Materials/babylon.standardMaterial.ts

@@ -88,7 +88,7 @@ module BABYLON {
         public SAMPLER3DBGRMAP = false;
         public IMAGEPROCESSINGPOSTPROCESS = false;
         public EXPOSURE = false;
-        public DITHERING = false;
+        public GRAIN = false;
 
         constructor() {
             super();

src/PostProcess/babylon.imageProcessingPostProcess.ts

@@ -310,7 +310,7 @@
             SAMPLER3DBGRMAP: false,
             IMAGEPROCESSINGPOSTPROCESS: false,
             EXPOSURE: false,
-            DITHERING: false,
+            GRAIN: false,
         }
 
         constructor(name: string, options: number | PostProcessOptions, camera: Nullable<Camera> = null, samplingMode?: number, engine?: Engine, reusable?: boolean, textureType: number = Engine.TEXTURETYPE_UNSIGNED_INT, imageProcessingConfiguration?: ImageProcessingConfiguration) {

src/Shaders/ShadersInclude/helperFunctions.fx

@@ -72,7 +72,16 @@ float getRand(vec2 seed) {
 
 vec3 dither(vec2 seed, vec3 color, float varianceAmount) {
 	float rand = getRand(seed);
-	color += mix(-varianceAmount/255.0, varianceAmount/255.0, rand);
+	float grain = mix(-varianceAmount/255.0, varianceAmount/255.0, rand);
+	
+	// Add less grain when luminance is high or low
+	float lum = getLuminance(color);	
+	if(lum > 0.5){
+		lum = 0.5-(lum-0.5);
+	}
+	float grainAmount = smoothstep(0., 1., lum/0.5);
+	color += grain * grainAmount;
+
 	color = max(color, 0.0);
 	return color;
 }

src/Shaders/ShadersInclude/imageProcessingDeclaration.fx

@@ -27,6 +27,7 @@
 	uniform vec4 colorTransformSettings;
 #endif
 
-#ifdef DITHERING
-	uniform float ditherVarianceAmount;
+#ifdef GRAIN
+	uniform float grainVarianceAmount;
+	uniform float grainAnimatedSeed;
 #endif

src/Shaders/background.fragment.fx

@@ -287,10 +287,10 @@ vec4 color = vec4(finalColor, finalAlpha);
     color.rgb *= color.a;
 #endif
 
-#ifdef DITHERING
-    // Handled in image processing shader
-#elif NOISE
-    color.rgb = dither(vPositionW.xy, color.rgb, 0.5);
+#ifndef GRAIN // Do not apply noise multiple times
+    #ifdef NOISE
+        color.rgb = dither(vPositionW.xy, color.rgb, 0.5);
+    #endif
 #endif
 
     gl_FragColor = color;

src/Shaders/imageProcessing.fragment.fx

@@ -26,8 +26,8 @@ void main(void)
 	#endif
 #endif
 
-#ifdef DITHERING
-	result.rgb = dither(vUV, result.rgb, ditherVarianceAmount);
+#ifdef GRAIN
+	result.rgb = dither(vUV*(grainAnimatedSeed+1.), result.rgb, grainVarianceAmount);
 #endif
 	gl_FragColor = result;
 }