Merge pull request #3841 from TrevorDev/ditheringInDefaultPipeline

add grain to default pipeline

dist/preview release/typedocValidationBaseline.json

@@ -1,7 +1,7 @@
 {
-  "errors": 7219,
+  "errors": 7220,
   "babylon.typedoc.json": {
-    "errors": 7219,
+    "errors": 7220,
     "AnimationKeyInterpolation": {
       "Enumeration": {
         "Comments": {

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, grain 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 GRAIN = false;
 
         constructor() {
             super();

src/Materials/Background/babylon.backgroundMaterial.ts

@@ -64,8 +64,6 @@
          */
         public NOISE = false;
 
-
-
         /**
          * is the reflection texture in BGR color scheme? 
          * Mainly used to solve a bug in ios10 video tag
@@ -85,6 +83,7 @@
         public SAMPLER3DBGRMAP = false;
         public IMAGEPROCESSINGPOSTPROCESS = false;
         public EXPOSURE = false;
+        public GRAIN = 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 GRAIN = false;
 
         public USEPHYSICALLIGHTFALLOFF = false;
         public TWOSIDEDLIGHTING = false;

src/Materials/babylon.imageProcessingConfiguration.ts

@@ -2,6 +2,7 @@ module BABYLON {
     /**
      * Interface to follow in your material defines to integrate easily the
      * Image proccessing functions.
+     * @ignore
      */
     export interface IImageProcessingConfigurationDefines {
         IMAGEPROCESSING: boolean;
@@ -17,6 +18,10 @@ module BABYLON {
         SAMPLER3DGREENDEPTH: boolean;
         SAMPLER3DBGRMAP: boolean;
         IMAGEPROCESSINGPOSTPROCESS: boolean;
+        /** 
+         * If the grain should be performed in the image processing shader.
+         */
+        GRAIN: boolean;
     }
 
     /**
@@ -216,6 +221,57 @@ module BABYLON {
         public vignetteCameraFov = 0.5;
 
         @serialize()
+        private _grainEnabled = false;
+
+        /**
+         * If the grain effect should be enabled.
+         */
+        public get grainEnabled(): boolean {
+            return this._grainEnabled;
+        }
+        public set grainEnabled(value: boolean) {
+            if (this._grainEnabled === value) {
+                return;
+            }
+
+            this._grainEnabled = value;
+            this._updateParameters();
+        }
+
+        @serialize()
+        private _grainIntensity = 30;
+        /**
+         * Amount of grain to be applied by the grain effect.
+         */
+        public get grainIntensity(): number {
+            return this._grainIntensity;
+        }
+        public set grainIntensity(value: number) {
+            if (this._grainIntensity === value) {
+                return;
+            }
+            this._grainIntensity = value;
+        }
+
+        @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();
+        }
+
+        @serialize()
         private _vignetteBlendMode = ImageProcessingConfiguration.VIGNETTEMODE_MULTIPLY;
         /**
          * Gets the vignette blend mode allowing different kind of effect.
@@ -335,6 +391,10 @@ module BABYLON {
             if (defines.COLORCURVES) {
                 ColorCurves.PrepareUniforms(uniforms);
             }
+            if (defines.GRAIN){
+                uniforms.push("grainVarianceAmount");
+                uniforms.push("grainAnimatedSeed");
+            }
         }
 
         /**
@@ -382,7 +442,8 @@ module BABYLON {
             defines.SAMPLER3DGREENDEPTH = this.colorGradingWithGreenDepth;
             defines.SAMPLER3DBGRMAP = this.colorGradingBGR;
             defines.IMAGEPROCESSINGPOSTPROCESS = this.applyByPostProcess;
-            defines.IMAGEPROCESSING = defines.VIGNETTE || defines.TONEMAPPING || defines.CONTRAST || defines.EXPOSURE || defines.COLORCURVES || defines.COLORGRADING;
+            defines.GRAIN = this.grainEnabled;
+            defines.IMAGEPROCESSING = defines.VIGNETTE || defines.TONEMAPPING || defines.CONTRAST || defines.EXPOSURE || defines.COLORCURVES || defines.COLORGRADING || defines.GRAIN;
         }
 
         /**
@@ -440,6 +501,9 @@ module BABYLON {
                     this.colorGradingTexture.level // weight
                 );
             }
+
+            effect.setFloat("grainVarianceAmount", this.grainIntensity);
+            effect.setFloat("grainAnimatedSeed", this.grainAnimated ? Math.random() + 1 : 1);
         }
 
         /**

src/Materials/babylon.standardMaterial.ts

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

src/PostProcess/babylon.imageProcessingPostProcess.ts

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

@@ -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) {
+float dither(vec2 seed, float varianceAmount) {
 	float rand = getRand(seed);
-	color += mix(-0.5/255.0, 0.5/255.0, rand);
-	color = max(color, 0.0);
-	return color;
+	float dither = mix(-varianceAmount/255.0, varianceAmount/255.0, rand);
+	
+	return dither;
 }

src/Shaders/ShadersInclude/imageProcessingDeclaration.fx

@@ -25,4 +25,9 @@
 		uniform sampler2D txColorTransform;
 	#endif
 	uniform vec4 colorTransformSettings;
+#endif
+
+#ifdef GRAIN
+	uniform float grainVarianceAmount;
+	uniform float grainAnimatedSeed;
 #endif

src/Shaders/background.fragment.fx

@@ -287,8 +287,11 @@ vec4 color = vec4(finalColor, finalAlpha);
     color.rgb *= color.a;
 #endif
 
-#ifdef NOISE
-    color.rgb = dither(vPositionW.xy, color.rgb);
+#ifndef GRAIN // Do not apply noise multiple times
+    #ifdef NOISE
+        color.rgb += dither(vPositionW.xy, 0.5);
+        color = max(color, 0.0);
+    #endif
 #endif
 
     gl_FragColor = color;

src/Shaders/imageProcessing.fragment.fx

@@ -18,6 +18,18 @@ void main(void)
 		result.rgb = toLinearSpace(result.rgb);
 	#endif
 
+	#ifdef GRAIN
+		vec2 seed = vUV*(grainAnimatedSeed);
+		float grain = dither(seed, grainVarianceAmount);
+
+		// Add less grain when luminance is high or low
+		float lum = getLuminance(result.rgb);
+		float grainAmount = (cos(-PI + (lum*PI*2.))+1.)/2.;
+		result.rgb += grain * grainAmount;
+
+		result.rgb = max(result.rgb, 0.0);
+	#endif
+
 	result = applyImageProcessing(result);
 #else
 	// In case where the input is in linear space we at least need to put it back in gamma.