Add Color Grading and Color Curves in standard

src/Debug/babylon.debugLayer.ts

@@ -356,7 +356,8 @@
             StandardMaterial.OpacityTextureEnabled = true;
             StandardMaterial.ReflectionTextureEnabled = true;
             StandardMaterial.LightmapTextureEnabled = true;
-            StandardMaterial.RefractionTextureEnabled = true;
+            StandardMaterial.RefractionTextureEnabled = true;            
+            StandardMaterial.ColorGradingTextureEnabled = true;
 
             this._scene.shadowsEnabled = true;
             this._scene.particlesEnabled = true;
@@ -689,6 +690,7 @@
                 this._generateCheckBox(this._optionsSubsetDiv, "Opacity", StandardMaterial.OpacityTextureEnabled, (element) => { StandardMaterial.OpacityTextureEnabled = element.checked });
                 this._generateCheckBox(this._optionsSubsetDiv, "Reflection", StandardMaterial.ReflectionTextureEnabled, (element) => { StandardMaterial.ReflectionTextureEnabled = element.checked });
                 this._generateCheckBox(this._optionsSubsetDiv, "Refraction", StandardMaterial.RefractionTextureEnabled, (element) => { StandardMaterial.RefractionTextureEnabled = element.checked });
+                this._generateCheckBox(this._optionsSubsetDiv, "ColorGrading", StandardMaterial.ColorGradingTextureEnabled, (element) => { StandardMaterial.ColorGradingTextureEnabled = element.checked });
                 this._generateCheckBox(this._optionsSubsetDiv, "Lightmap", StandardMaterial.LightmapTextureEnabled, (element) => { StandardMaterial.LightmapTextureEnabled = element.checked });
                 this._generateCheckBox(this._optionsSubsetDiv, "Fresnel", StandardMaterial.FresnelEnabled, (element) => { StandardMaterial.FresnelEnabled = element.checked });
                 this._optionsSubsetDiv.appendChild(document.createElement("br"));

src/Materials/Textures/babylon.colorGradingTexture.ts

@@ -186,6 +186,48 @@ module BABYLON {
             }
         }
 
+         /**
+         * Binds the color grading to the shader.
+         * @param colorGrading The texture to bind
+         * @param effect The effect to bind to
+         */
+        public static Bind(colorGrading: BaseTexture, effect: Effect) : void {
+            effect.setTexture("cameraColorGrading2DSampler", colorGrading);
+                        
+     	    let x = colorGrading.level;                 // Texture Level
+            let y = colorGrading.getSize().height;      // Texture Size example with 8
+            let z = y - 1.0;                    // SizeMinusOne 8 - 1
+            let w = 1 / y;                      // Space of 1 slice 1 / 8
+            
+            effect.setFloat4("vCameraColorGradingInfos", x, y, z, w);
+            
+            let slicePixelSizeU = w / y;    // Space of 1 pixel in U direction, e.g. 1/64
+            let slicePixelSizeV = w;		// Space of 1 pixel in V direction, e.g. 1/8					    // Space of 1 pixel in V direction, e.g. 1/8
+            
+            let x2 = z * slicePixelSizeU;   // Extent of lookup range in U for a single slice so that range corresponds to (size-1) texels, for example 7/64
+            let y2 = z / y;	                // Extent of lookup range in V for a single slice so that range corresponds to (size-1) texels, for example 7/8
+            let z2 = 0.5 * slicePixelSizeU;	// Offset of lookup range in U to align sample position with texel centre, for example 0.5/64 
+            let w2 = 0.5 * slicePixelSizeV;	// Offset of lookup range in V to align sample position with texel centre, for example 0.5/8
+            
+            effect.setFloat4("vCameraColorGradingScaleOffset", x2, y2, z2, w2);
+        }
+        
+        /**
+         * Prepare the list of uniforms associated with the ColorGrading effects.
+         * @param uniformsList The list of uniforms used in the effect
+         * @param samplersList The list of samplers used in the effect
+         */
+        public static PrepareUniformsAndSamplers(uniformsList: string[], samplersList: string[]): void {
+            uniformsList.push(
+                "vCameraColorGradingInfos", 
+                "vCameraColorGradingScaleOffset"
+            );
+
+            samplersList.push(
+                "cameraColorGrading2DSampler"
+            );
+        }
+
         /**
          * Parses a color grading texture serialized by Babylon.
          * @param parsedTexture The texture information being parsedTexture

src/Materials/babylon.pbrMaterial.ts

@@ -153,9 +153,6 @@
          */
         @serializeAsTexture()
         public cameraColorGradingTexture: BaseTexture = null;
-
-        private _cameraColorGradingScaleOffset: Vector4 = new Vector4(1.0, 1.0, 0.0, 0.0);
-        private _cameraColorGradingInfos: Vector4 = new Vector4(1.0, 1.0, 0.0, 0.0);
         
         /**
          * The color grading curves provide additional color adjustmnent that is applied after any color grading transform (3D LUT). 
@@ -778,7 +775,7 @@
                     }
                 }
             
-                if (this.cameraColorGradingTexture) {
+                if (this.cameraColorGradingTexture && StandardMaterial.ColorGradingTextureEnabled) {
                     if (!this.cameraColorGradingTexture.isReady()) {
                         return false;
                     } else {
@@ -1025,13 +1022,13 @@
                         "vSphericalXX", "vSphericalYY", "vSphericalZZ",
                         "vSphericalXY", "vSphericalYZ", "vSphericalZX",
                         "vMicrosurfaceTextureLods",
-                        "vCameraInfos", "vCameraColorGradingInfos", "vCameraColorGradingScaleOffset"
+                        "vCameraInfos"
                 ];
 
-                var samplers = ["albedoSampler", "ambientSampler", "opacitySampler", "reflectionCubeSampler", "reflection2DSampler", "emissiveSampler", "reflectivitySampler", "bumpSampler", "lightmapSampler", "refractionCubeSampler", "refraction2DSampler",
-                    "cameraColorGrading2DSampler"];
+                var samplers = ["albedoSampler", "ambientSampler", "opacitySampler", "reflectionCubeSampler", "reflection2DSampler", "emissiveSampler", "reflectivitySampler", "bumpSampler", "lightmapSampler", "refractionCubeSampler", "refraction2DSampler"];
                 
                 ColorCurves.PrepareUniforms(uniforms); 
+                ColorGradingTexture.PrepareUniformsAndSamplers(uniforms, samplers); 
                 MaterialHelper.PrepareUniformsAndSamplersList(uniforms, samplers, this._defines, this.maxSimultaneousLights); 
                 
                 this._effect = scene.getEngine().createEffect(shaderName,
@@ -1214,33 +1211,8 @@
                         this._effect.setFloat2("vMicrosurfaceTextureLods", this._microsurfaceTextureLods.x, this._microsurfaceTextureLods.y);
                     }
                     
-                    if (this.cameraColorGradingTexture) {
-                        this._effect.setTexture("cameraColorGrading2DSampler", this.cameraColorGradingTexture);
-                        
-                        this._cameraColorGradingInfos.x = this.cameraColorGradingTexture.level;                     // Texture Level
-                        this._cameraColorGradingInfos.y = this.cameraColorGradingTexture.getSize().height;          // Texture Size example with 8
-                        this._cameraColorGradingInfos.z = this._cameraColorGradingInfos.y - 1.0;                    // SizeMinusOne 8 - 1
-                        this._cameraColorGradingInfos.w = 1 / this._cameraColorGradingInfos.y;                      // Space of 1 slice 1 / 8
-                        
-                        this._effect.setFloat4("vCameraColorGradingInfos", 
-                            this._cameraColorGradingInfos.x,
-                            this._cameraColorGradingInfos.y,
-                            this._cameraColorGradingInfos.z,
-                            this._cameraColorGradingInfos.w);
-                        
-                        var slicePixelSizeU = this._cameraColorGradingInfos.w / this._cameraColorGradingInfos.y;    // Space of 1 pixel in U direction, e.g. 1/64
-                        var slicePixelSizeV = 1.0 / this._cameraColorGradingInfos.y;							    // Space of 1 pixel in V direction, e.g. 1/8
-                        this._cameraColorGradingScaleOffset.x = this._cameraColorGradingInfos.z * slicePixelSizeU;  // Extent of lookup range in U for a single slice so that range corresponds to (size-1) texels, for example 7/64
-                        this._cameraColorGradingScaleOffset.y = this._cameraColorGradingInfos.z / 
-                            this._cameraColorGradingInfos.y;							                            // Extent of lookup range in V for a single slice so that range corresponds to (size-1) texels, for example 7/8
-                        this._cameraColorGradingScaleOffset.z = 0.5 * slicePixelSizeU;						        // Offset of lookup range in U to align sample position with texel centre, for example 0.5/64 
-                        this._cameraColorGradingScaleOffset.w = 0.5 * slicePixelSizeV;						        // Offset of lookup range in V to align sample position with texel centre, for example 0.5/8
-                        
-                        this._effect.setFloat4("vCameraColorGradingScaleOffset", 
-                            this._cameraColorGradingScaleOffset.x,
-                            this._cameraColorGradingScaleOffset.y,
-                            this._cameraColorGradingScaleOffset.z,
-                            this._cameraColorGradingScaleOffset.w);
+                    if (this.cameraColorGradingTexture && StandardMaterial.ColorGradingTextureEnabled) {
+                        ColorGradingTexture.Bind(this.cameraColorGradingTexture, this._effect);
                     }
                 }
 

src/Materials/babylon.standardMaterial.ts

@@ -55,6 +55,8 @@
         public INVERTNORMALMAPX = false;
         public INVERTNORMALMAPY = false;
         public SHADOWFULLFLOAT = false;
+        public CAMERACOLORGRADING = false;
+        public CAMERACOLORCURVES = false;
 
         constructor() {
             super();
@@ -180,6 +182,22 @@
         @serialize()
         public invertNormalMapY = false;
 
+        /**
+         * Color Grading 2D Lookup Texture.
+         * This allows special effects like sepia, black and white to sixties rendering style. 
+         */
+        @serializeAsTexture()
+        public cameraColorGradingTexture: BaseTexture = null;
+        
+        /**
+         * The color grading curves provide additional color adjustmnent that is applied after any color grading transform (3D LUT). 
+         * They allow basic adjustment of saturation and small exposure adjustments, along with color filter tinting to provide white balance adjustment or more stylistic effects.
+         * These are similar to controls found in many professional imaging or colorist software. The global controls are applied to the entire image. For advanced tuning, extra controls are provided to adjust the shadow, midtone and highlight areas of the image; 
+         * corresponding to low luminance, medium luminance, and high luminance areas respectively.
+         */
+        @serializeAsColorCurves()
+        public cameraColorCurves: ColorCurves = null;
+
         private _renderTargets = new SmartArray<RenderTargetTexture>(16);
         private _worldViewProjectionMatrix = Matrix.Zero();
         private _globalAmbientColor = new Color3(0, 0, 0);
@@ -422,6 +440,14 @@
                         this._defines.REFRACTIONMAP_3D = this.refractionTexture.isCube;
                     }
                 }
+
+                if (this.cameraColorGradingTexture && StandardMaterial.ColorGradingTextureEnabled) {
+                    if (!this.cameraColorGradingTexture.isReady()) {
+                        return false;
+                    } else {
+                        this._defines.CAMERACOLORGRADING = true;
+                    }
+                }
             }
 
             // Effect
@@ -448,6 +474,10 @@
             if (this.useLogarithmicDepth) {
                 this._defines.LOGARITHMICDEPTH = true;
             }
+            
+            if (this.cameraColorCurves) {
+                this._defines.CAMERACOLORCURVES = true;
+            }
 
             // Point size
             if (this.pointsCloud || scene.forcePointsCloud) {
@@ -645,6 +675,8 @@
 
                 var samplers = ["diffuseSampler", "ambientSampler", "opacitySampler", "reflectionCubeSampler", "reflection2DSampler", "emissiveSampler", "specularSampler", "bumpSampler", "lightmapSampler", "refractionCubeSampler", "refraction2DSampler"]
 
+                ColorCurves.PrepareUniforms(uniforms); 
+                ColorGradingTexture.PrepareUniformsAndSamplers(uniforms, samplers); 
                 MaterialHelper.PrepareUniformsAndSamplersList(uniforms, samplers, this._defines, this.maxSimultaneousLights);
 
                 this._effect = scene.getEngine().createEffect(shaderName,
@@ -801,6 +833,10 @@
                         }
                         this._effect.setFloat4("vRefractionInfos", this.refractionTexture.level, this.indexOfRefraction, depth, this.invertRefractionY ? -1 : 1);
                     }
+                    
+                    if (this.cameraColorGradingTexture && StandardMaterial.ColorGradingTextureEnabled) {
+                        ColorGradingTexture.Bind(this.cameraColorGradingTexture, this._effect);
+                    }
                 }
 
                 // Clip plane
@@ -842,6 +878,11 @@
 
                 // Log. depth
                 MaterialHelper.BindLogDepth(this._defines, this._effect, scene);
+
+                // Color Curves
+                if (this.cameraColorCurves) {
+                    ColorCurves.Bind(this.cameraColorCurves, this._effect);
+                }
             }
 
             super.bind(world, mesh);
@@ -885,6 +926,10 @@
             if (this.refractionTexture && this.refractionTexture.animations && this.refractionTexture.animations.length > 0) {
                 results.push(this.refractionTexture);
             }
+            
+            if (this.cameraColorGradingTexture && this.cameraColorGradingTexture.animations && this.cameraColorGradingTexture.animations.length > 0) {
+                results.push(this.cameraColorGradingTexture);
+            }
 
             return results;
         }
@@ -926,6 +971,10 @@
                 if (this.refractionTexture) {
                     this.refractionTexture.dispose();
                 }
+                
+                if (this.cameraColorGradingTexture) {
+                    this.cameraColorGradingTexture.dispose();
+                }
             }
 
             super.dispose(forceDisposeEffect, forceDisposeTextures);
@@ -954,6 +1003,7 @@
         public static BumpTextureEnabled = true;
         public static FresnelEnabled = true;
         public static LightmapTextureEnabled = true;
-        public static RefractionTextureEnabled = true;
+        public static RefractionTextureEnabled = true;        
+        public static ColorGradingTextureEnabled = true;
     }
 } 

src/Shaders/default.fragment.fx

@@ -142,6 +142,16 @@ uniform vec4 reflectionRightColor;
 
 #endif
 
+#ifdef CAMERACOLORGRADING
+	#include<colorGradingDefinition>	
+	#include<colorGrading>
+#endif
+
+#ifdef CAMERACOLORCURVES
+	#include<colorCurvesDefinition>
+	#include<colorCurves>
+#endif
+
 #include<bumpFragmentFunctions>
 #include<clipPlaneFragmentDeclaration>
 #include<logDepthDeclaration>
@@ -390,5 +400,13 @@ void main(void) {
 #include<logDepthFragment>
 #include<fogFragment>
 
+#ifdef CAMERACOLORGRADING
+	color = colorGrades(color);
+#endif
+
+#ifdef CAMERACOLORCURVES
+	color.rgb = applyColorCurves(color.rgb);
+#endif
+
 	gl_FragColor = color;
 }