add dithering to default pipeline

dist/preview release/typedocValidationBaseline.json

@@ -38928,6 +38928,11 @@
           "Comments": {
             "MissingText": true
           }
+        },
+        "DITHERING": {
+          "Naming": {
+            "NotCamelCase": true
+          }
         }
       }
     },

dist/preview release/what's new.md

@@ -14,7 +14,7 @@
 - Added [VideoDome](http://doc.babylonjs.com/how_to/360videodome) class to easily support 360 videos ([DavidHGillen](https://github.com/DavidHGillen))
 - Added [GlowLayer](https://doc.babylonjs.com/how_to/glow_layer) to easily support glow from emissive materials ([sebavan](https://github.com/sebavan))
 - New [AssetContainer](http://doc.babylonjs.com/how_to/how_to_use_assetcontainer) Class and loading methods ([trevordev](https://github.com/trevordev))
-- Added depth of field, MSAA, sharpening and chromatic aberration effect to the default pipeline ([trevordev](https://github.com/trevordev))
+- Added depth of field, MSAA, sharpening, dithering and chromatic aberration effect to the default pipeline ([trevordev](https://github.com/trevordev))
 
 ## Updates
 

materialsLibrary/src/custom/babylon.customMaterial.ts

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

src/Materials/Background/babylon.backgroundMaterial.ts

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

src/Materials/PBR/babylon.pbrBaseMaterial.ts

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

src/Materials/babylon.imageProcessingConfiguration.ts

@@ -17,6 +17,10 @@ module BABYLON {
         SAMPLER3DGREENDEPTH: boolean;
         SAMPLER3DBGRMAP: boolean;
         IMAGEPROCESSINGPOSTPROCESS: boolean;
+        /** 
+         * If the dithering should be performed in the image processing shader.
+         */
+        DITHERING: boolean;
     }
 
     /**
@@ -216,6 +220,23 @@ module BABYLON {
         public vignetteCameraFov = 0.5;
 
         @serialize()
+        private _ditheringVarianceAmount = 0;
+        /**
+         * Amount of dithering to be applied by the dithering effect.
+         */
+        public get ditheringVarianceAmount(): number {
+            return this._ditheringVarianceAmount;
+        }
+        public set ditheringVarianceAmount(value: number) {
+            if (this._ditheringVarianceAmount === value) {
+                return;
+            }
+
+            this._ditheringVarianceAmount = value;
+            this._updateParameters();
+        }
+
+        @serialize()
         private _vignetteBlendMode = ImageProcessingConfiguration.VIGNETTEMODE_MULTIPLY;
         /**
          * Gets the vignette blend mode allowing different kind of effect.
@@ -335,6 +356,9 @@ module BABYLON {
             if (defines.COLORCURVES) {
                 ColorCurves.PrepareUniforms(uniforms);
             }
+            if (defines.DITHERING){
+                uniforms.push("ditherVarianceAmount");
+            }
         }
 
         /**
@@ -383,6 +407,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);
         }
 
         /**
@@ -440,6 +465,8 @@ module BABYLON {
                     this.colorGradingTexture.level // weight
                 );
             }
+
+            effect.setFloat("ditherVarianceAmount", this.ditheringVarianceAmount);
         }
 
         /**

src/Materials/babylon.standardMaterial.ts

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

src/PostProcess/babylon.imageProcessingPostProcess.ts

@@ -310,6 +310,7 @@
             SAMPLER3DBGRMAP: false,
             IMAGEPROCESSINGPOSTPROCESS: false,
             EXPOSURE: false,
+            DITHERING: 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

@@ -70,9 +70,9 @@ float getRand(vec2 seed) {
 	return fract(sin(dot(seed.xy ,vec2(12.9898,78.233))) * 43758.5453);
 }
 
-vec3 dither(vec2 seed, vec3 color) {
+vec3 dither(vec2 seed, vec3 color, float varianceAmount) {
 	float rand = getRand(seed);
-	color += mix(-0.5/255.0, 0.5/255.0, rand);
+	color += mix(-varianceAmount/255.0, varianceAmount/255.0, rand);
 	color = max(color, 0.0);
 	return color;
 }

src/Shaders/ShadersInclude/imageProcessingDeclaration.fx

@@ -25,4 +25,8 @@
 		uniform sampler2D txColorTransform;
 	#endif
 	uniform vec4 colorTransformSettings;
+#endif
+
+#ifdef DITHERING
+	uniform float ditherVarianceAmount;
 #endif

src/Shaders/background.fragment.fx

@@ -287,8 +287,10 @@ vec4 color = vec4(finalColor, finalAlpha);
     color.rgb *= color.a;
 #endif
 
-#ifdef NOISE
-    color.rgb = dither(vPositionW.xy, color.rgb);
+#ifdef DITHERING
+    // Handled in image processing shader
+#elif NOISE
+    color.rgb = dither(vPositionW.xy, color.rgb, 0.5);
 #endif
 
     gl_FragColor = color;

src/Shaders/imageProcessing.fragment.fx

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