Fix First Step

Tools/Gulp/config.json

@@ -21,7 +21,8 @@
                 "additionalPostProcess_blur", "additionalPostProcess_fxaa", "additionalPostProcess_imageProcessing",
                 "bones", "hdr", "polygonMesh", "csg", "lensFlares", "physics", "textureFormats", "debug", "morphTargets",
                 "colorCurves", "octrees", "simd", "vr", "virtualJoystick", "optimizations", "highlights", "assetsManager",
-                "mapTexture", "dynamicFloatArray", "serialization", "probes", "layer", "textureTools"
+                "mapTexture", "dynamicFloatArray",
+                "imageProcessing", "serialization", "probes", "layer", "textureTools"
         ],
         "minimal": ["standardMaterial", "freeCamera", "hemisphericLight"],
         "minimalWithBuilder": ["meshBuilder", "standardMaterial", "freeCamera", "hemisphericLight"],
@@ -30,7 +31,8 @@
                 "shadows", "pointLight", "directionalLight", "spotLight",
                 "multiMaterial", "pbrMaterial",
                 "meshBuilder", "layer",
-                "additionalPostProcess_blur", "additionalPostProcess_fxaa", "additionalPostProcess_highlights", "additionalPostProcess_imageProcessing", "colorCurves", "defaultRenderingPipeline",
+                "additionalPostProcess_blur", "additionalPostProcess_fxaa", "additionalPostProcess_highlights", 
+                "additionalPostProcess_imageProcessing", "colorCurves", "defaultRenderingPipeline", "imageProcessing",
                 "debug", "textureTools", "hdr",
                 "loader"
         ],
@@ -244,10 +246,8 @@
                 "shadowsFragmentFunctions",
                 "fresnelFunction",
                 "reflectionFunction",
-                "colorGradingDefinition",
-                "colorGrading",
-                "colorCurvesDefinition",
-                "colorCurves",
+                "imageProcessingDeclaration",
+                "imageProcessingFunctions",
                 "bumpFragmentFunctions",
                 "clipPlaneFragmentDeclaration",
                 "logDepthDeclaration",
@@ -299,12 +299,10 @@
                 "pbrUboDeclaration",
                 "fresnelFunction",
                 "reflectionFunction",
-                "colorGradingDefinition",
-                "colorCurvesDefinition",
                 "shadowsFragmentFunctions",
                 "pbrFunctions",
-                "colorGrading",
-                "colorCurves",
+                "imageProcessingDeclaration",
+                "imageProcessingFunctions",
                 "harmonicsFunctions",
                 "pbrLightFunctions",
                 "helperFunctions",
@@ -570,7 +568,7 @@
                 "instancesVertex",
                 "bonesVertex"
             ]
-        },            
+        },
         "postProcesses" : 
         {
             "files": [
@@ -639,8 +637,12 @@
             ], 
             "shaders" : [
                 "imageProcessing.fragment"
+            ],
+            "shaderIncludes": [
+                "imageProcessingDeclaration",
+                "imageProcessingFunctions"
             ]
-        },                                          
+        },
         "additionalPostProcesses" : 
         {
             "files": [
@@ -837,17 +839,30 @@
         {
             "files": [
                 "../../src/Materials/Textures/babylon.colorGradingTexture.js",
-                "../../src/Materials/babylon.colorCurves.js"                       
+                "../../src/Materials/babylon.colorCurves.js"
             ],
             "dependUpon" : [
                 "core"
             ]
         },
+        "imageProcessing" : 
+        {
+            "files": [
+                "../../src/Materials/babylon.imageProcessing.js"
+            ],
+            "dependUpon" : [
+                "colorCurves"
+            ],
+            "shaderIncludes": [
+                "imageProcessingDeclaration",
+                "imageProcessingFunctions"
+            ]
+        },
         "octrees" : 
         {
             "files": [
                 "../../src/Culling/Octrees/babylon.octree.js",
-                "../../src/Culling/Octrees/babylon.octreeBlock.js"                       
+                "../../src/Culling/Octrees/babylon.octreeBlock.js"
             ],
             "dependUpon" : [
                 "core"
@@ -1171,7 +1186,7 @@
                     "../../materialsLibrary/src/legacyPBR/legacyColorCurves.fx",
                     "../../materialsLibrary/src/legacyPBR/legacyColorCurvesDefinition.fx",
                     "../../materialsLibrary/src/legacyPBR/legacyColorGrading.fx",
-                    "../../materialsLibrary/src/legacyPBR/legacyColorGradingDefinition.fx",
+                    "../../materialsLibrary/src/legacyPBR/legacyColorGradingDefinition.fx"
                 ],
                 "output": "babylon.legacyPbrMaterial.js"
             }

loaders/src/glTF/2.0/babylon.glTFLoader.ts

@@ -871,14 +871,12 @@ module BABYLON.GLTF2 {
         public createPbrMaterial(material: IGLTFMaterial): void {
             var babylonMaterial = new PBRMaterial(material.name || "mat" + material.index, this._babylonScene);
             babylonMaterial.sideOrientation = Material.CounterClockWiseSideOrientation;
-            babylonMaterial.useScalarInLinearSpace = true;
             material.babylonMaterial = babylonMaterial;
         }
 
         public loadMaterialBaseProperties(material: IGLTFMaterial): void {
             var babylonMaterial = material.babylonMaterial as PBRMaterial;
 
-            babylonMaterial.useEmissiveAsIllumination = (material.emissiveFactor || material.emissiveTexture) ? true : false;
             babylonMaterial.emissiveColor = material.emissiveFactor ? Color3.FromArray(material.emissiveFactor) : new Color3(0, 0, 0);
             if (material.doubleSided) {
                 babylonMaterial.backFaceCulling = false;

materialsLibrary/src/legacyPBR/babylon.legacyPBRMaterial.ts

@@ -1164,7 +1164,14 @@ module BABYLON {
                     ColorCurves.PrepareUniforms(uniforms);
                 }
                 if (this._defines.CAMERACOLORGRADING) {
-                    ColorGradingTexture.PrepareUniformsAndSamplers(uniforms, samplers);
+                    uniforms.push(
+                        "vCameraColorGradingInfos", 
+                        "vCameraColorGradingScaleOffset"
+                    );
+
+                    samplers.push(
+                        "cameraColorGrading2DSampler"
+                    );
                 }
                 MaterialHelper.PrepareUniformsAndSamplersList(<EffectCreationOptions>{
                     uniformsNames: uniforms, 
@@ -1527,7 +1534,24 @@ module BABYLON {
                     }
 
                     if (this.cameraColorGradingTexture && StandardMaterial.ColorGradingTextureEnabled) {
-                        ColorGradingTexture.Bind(this.cameraColorGradingTexture, this._effect);
+                        this._effect.setTexture("cameraColorGrading2DSampler", this.cameraColorGradingTexture);
+
+                        let x = this.cameraColorGradingTexture.level;                 // Texture Level
+                        let y = this.cameraColorGradingTexture.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
+                        
+                        this._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
+                        
+                        this._effect.setFloat4("vCameraColorGradingScaleOffset", x2, y2, z2, w2);
                     }
                 }
 
@@ -1545,7 +1569,7 @@ module BABYLON {
 
                 // Lights
                 if (this._myScene.lightsEnabled && !this.disableLighting) {
-                    PBRMaterial.BindLights(this._myScene, mesh, this._effect, this._defines, this.useScalarInLinearSpace, this.maxSimultaneousLights, this.usePhysicalLightFalloff);
+                    LegacyPBRMaterial.BindLights(this._myScene, mesh, this._effect, this._defines, this.useScalarInLinearSpace, this.maxSimultaneousLights, this.usePhysicalLightFalloff);
                 }
 
                 // View

materialsLibrary/test/addlegacypbr.js

@@ -7,7 +7,7 @@ window.prepareLegacyPBR = function() {
     
     var hdrTexture = new BABYLON.HDRCubeTexture("../assets/textures/hdr/environment.hdr", scene, 512);
 
-    var colorGradingTexture = new BABYLON.ColorGradingTexture("../assets/textures/ColorGrading.3DL", scene);
+    //var colorGradingTexture = new BABYLON.ColorGradingTexture("../assets/textures/ColorGrading.3DL", scene);
     
     // Uncomment for PMREM Generation
     // var hdrTexture = new BABYLON.HDRCubeTexture("textures/hdr/environment.hdr", scene, 128, false, true, false, true);

materialsLibrary/test/addpbr.js

@@ -7,7 +7,7 @@ window.preparePBR = function() {
     
     var hdrTexture = new BABYLON.HDRCubeTexture("../assets/textures/hdr/environment.hdr", scene, 512);
 
-    var colorGradingTexture = new BABYLON.ColorGradingTexture("../assets/textures/ColorGrading.3DL", scene);
+    //var colorGradingTexture = new BABYLON.ColorGradingTexture("../assets/textures/ColorGrading.3DL", scene);
     
     // Uncomment for PMREM Generation
     // var hdrTexture = new BABYLON.HDRCubeTexture("textures/hdr/environment.hdr", scene, 128, false, true, false, true);
@@ -15,7 +15,12 @@ window.preparePBR = function() {
     pbr.refractionTexture = hdrTexture;
     pbr.linkRefractionWithTransparency = true;
     pbr.indexOfRefraction = 0.52;
-    
+
+	// var colorGrading = new BABYLON.ColorGradingTexture("../assets/textures/lateSunset.3DL", scene);
+	var colorGrading = new BABYLON.Texture("../assets/textures/colorGrade.png", scene, true);
+	pbr.cameraColorGradingTexture = colorGrading;
+	pbr.colorGradingEnabled = true;
+
 	pbr.reflectivityColor = new BABYLON.Color3(0.3, 0.3, 0.3);
 	pbr.microSurface = 0.9;
     

src/Materials/PBR/babylon.pbrBaseMaterial.ts

@@ -87,8 +87,9 @@
         public CONTRAST = false;
         public COLORCURVES = false;
         public COLORGRADING = false;
-
-        public HDRLINEAROUTPUT = false;
+        public SAMPLER3DGREENDEPTH = false;
+        public SAMPLER3DBGRMAP = false;
+        public IMAGEPROCESSINGPOSTPROCESS = false;
 
         constructor() {
             super();
@@ -360,9 +361,6 @@
          */
         protected _useAlphaFresnel = false;
 
-        @serialize()
-        protected _hdrLinearOutput = false;
-
         /**
          * Default configuration related to image processing available in the PBR Material.
          */
@@ -400,9 +398,6 @@
             this._imageProcessingObserver = this._imageProcessingConfiguration.onUpdateParameters.add(conf => {
                 this._markAllSubMeshesAsTexturesDirty();
             });
-
-            // Ensure the effect will be rebuilt.
-            this._markAllSubMeshesAsTexturesDirty();
         }
 
         private _renderTargets = new SmartArray<RenderTargetTexture>(16);
@@ -731,7 +726,6 @@
                 }
 
                 defines.ALPHATESTVALUE = this._alphaCutOff;
-                defines.HDRLINEAROUTPUT = this._hdrLinearOutput;
                 defines.PREMULTIPLYALPHA = this._premultiplyAlpha;
                 defines.ALPHABLEND = this.needAlphaBlending();
                 defines.ALPHAFRESNEL = this._useAlphaFresnel;

src/Materials/PBR/babylon.pbrMaterial.ts

@@ -389,59 +389,49 @@
          */
         public set imageProcessingConfiguration(value: ImageProcessing) {
             this._attachImageProcessingConfiguration(value);
-        }
 
-        /**
-         * Gets Color curves setup used in the effect if colorCurvesEnabled is set to true .
-         */
-        public get colorCurves(): ColorCurves {
-            return this.imageProcessingConfiguration.colorCurves;
-        }
-        /**
-         * Sets Color curves setup used in the effect if colorCurvesEnabled is set to true .
-         */
-        public set colorCurves(value: ColorCurves) {
-            this.imageProcessingConfiguration.colorCurves = value;
+            // Ensure the effect will be rebuilt.
+            this._markAllSubMeshesAsTexturesDirty();
         }
 
         /**
          * Gets wether the color curves effect is enabled.
          */
-        public get colorCurvesEnabled(): boolean {
+        public get cameraColorCurvesEnabled(): boolean {
             return this.imageProcessingConfiguration.colorCurvesEnabled;
         }
         /**
          * Sets wether the color curves effect is enabled.
          */
-        public set colorCurvesEnabled(value: boolean) {
+        public set cameraColorCurvesEnabled(value: boolean) {
             this.imageProcessingConfiguration.colorCurvesEnabled = value;
         }
 
         /**
-         * Gets Color grading LUT texture used in the effect if colorGradingEnabled is set to true.
+         * Gets wether the color grading effect is enabled.
          */
-        public get colorGradingTexture(): BaseTexture {
-            return this.imageProcessingConfiguration.colorGradingTexture;
+        public get cameraColorGradingEnabled(): boolean {
+            return this.imageProcessingConfiguration.colorGradingEnabled;
         }
         /**
-         * Sets Color grading LUT texture used in the effect if colorGradingEnabled is set to true.
+         * Gets wether the color grading effect is enabled.
          */
-        public set colorGradingTexture(value: BaseTexture) {
-            this.imageProcessingConfiguration.colorGradingTexture = value;
+        public set cameraColorGradingEnabled(value: boolean) {
+            this.imageProcessingConfiguration.colorGradingEnabled = value;
         }
 
         /**
-         * Gets wether the color grading effect is enabled.
+         * Gets wether tonemapping is enabled or not.
          */
-        public get colorGradingEnabled(): boolean {
-            return this.imageProcessingConfiguration.colorGradingEnabled;
-        }
+        public get cameraToneMappingEnabled(): boolean {
+            return this._imageProcessingConfiguration.toneMappingEnabled;
+        };
         /**
-         * Gets wether the color grading effect is enabled.
+         * Sets wether tonemapping is enabled or not
          */
-        public set colorGradingEnabled(value: boolean) {
-            this.imageProcessingConfiguration.colorGradingEnabled = value;
-        }
+        public set cameraToneMappingEnabled(value: boolean) {
+            this._imageProcessingConfiguration.toneMappingEnabled = value;
+        };
 
         /**
          * The camera exposure used on this material.
@@ -507,16 +497,6 @@
         }
 
         /**
-         * If true, it allows the output of the shader to be in hdr space (e.g. more than one) which is useful
-         * in combination of post process in float or half float mode.
-         * 
-         * This also disable the image procesing that require to be applied separately.
-         */
-        @serialize()
-        @expandToProperty("_markAllSubMeshesAsTexturesDirty")
-        public hdrLinearOutput = false;
-
-        /**
          * Instantiates a new PBRMaterial instance.
          * 
          * @param name The material name

src/Materials/Textures/babylon.colorGradingTexture.ts

@@ -122,7 +122,6 @@ module BABYLON {
                         tempData[pixelStorageIndex + 0] = r;
                         tempData[pixelStorageIndex + 1] = g;
                         tempData[pixelStorageIndex + 2] = b;
-                        tempData[pixelStorageIndex + 3] = 0;
 
                         pixelIndexSlice++;
                         if (pixelIndexSlice % size == 0) {
@@ -137,8 +136,13 @@ module BABYLON {
                 }
 
                 for (let i = 0; i < tempData.length; i++) {
-                    var value = tempData[i];
-                    data[i] = (value / maxColor * 255);
+                    if (i > 0 && (i+1) % 4 === 0) {
+                        data[i] = 255;
+                    }
+                    else {
+                        var value = tempData[i];
+                        data[i] = (value / maxColor * 255);
+                    }
                 }
 
                 this.getScene().getEngine().updateTextureSize(texture, size * size, size);

src/Materials/babylon.imageProcessing.ts

@@ -12,6 +12,9 @@ module BABYLON {
         CONTRAST: boolean;
         COLORCURVES: boolean;
         COLORGRADING: boolean;
+        SAMPLER3DGREENDEPTH: boolean;
+        SAMPLER3DBGRMAP: boolean;
+        IMAGEPROCESSINGPOSTPROCESS: boolean;
     }
 
     /**
@@ -28,7 +31,7 @@ module BABYLON {
         public colorCurves = new ColorCurves();
 
         @serialize()
-        private _colorCurvesEnabled = true;
+        private _colorCurvesEnabled = false;
         /**
          * Gets wether the color curves effect is enabled.
          */
@@ -54,7 +57,7 @@ module BABYLON {
         public colorGradingTexture: BaseTexture;
 
         @serialize()
-        private _colorGradingEnabled = true;
+        private _colorGradingEnabled = false;
         /**
          * Gets wether the color grading effect is enabled.
          */
@@ -62,7 +65,7 @@ module BABYLON {
             return this._colorGradingEnabled;
         }
         /**
-         * Gets wether the color grading effect is enabled.
+         * Sets wether the color grading effect is enabled.
          */
         public set colorGradingEnabled(value: boolean) {
             if (this._colorGradingEnabled === value) {
@@ -74,22 +77,68 @@ module BABYLON {
         }
 
         @serialize()
-        protected _cameraExposure = 1.0;
+        private _colorGradingWithGreenDepth = false;
         /**
-         * Gets Camera exposure used in the effect.
+         * Gets wether the color grading effect is using a green depth for the 3d Texture.
          */
-        public get cameraExposure(): number {
-            return this._cameraExposure;
+        public get colorGradingWithGreenDepth(): boolean {
+            return this._colorGradingWithGreenDepth;
         }
         /**
-         * Gets Camera exposure used in the effect.
+         * Sets wether the color grading effect is using a green depth for the 3d Texture.
          */
-        public set cameraExposure(value: number) {
-            if (this._cameraExposure === value) {
+        public set colorGradingWithGreenDepth(value: boolean) {
+            if (this._colorGradingWithGreenDepth === value) {
                 return;
             }
 
-            this._cameraExposure = value;
+            this._colorGradingWithGreenDepth = value;
+            this._updateParameters();
+        }
+
+        @serialize()
+        private _colorGradingBGR = false;
+        /**
+         * Gets wether the color grading texture contains BGR values.
+         */
+        public get colorGradingBGR(): boolean {
+            return this._colorGradingBGR;
+        }
+        /**
+         * Sets wether the color grading texture contains BGR values.
+         */
+        public set colorGradingBGR(value: boolean) {
+            if (this._colorGradingBGR === value) {
+                return;
+            }
+
+            this._colorGradingBGR = value;
+            this._updateParameters();
+        }
+
+        /**
+         * Camera exposure used in the effect.
+         */
+        @serialize()
+        public cameraExposure = Math.log(Math.PI) * Math.LOG2E;
+
+        @serialize()
+        private _toneMappingEnabled = false;
+        /**
+         * Gets wether the tone mapping effect is enabled.
+         */
+        public get toneMappingEnabled(): boolean {
+            return this._toneMappingEnabled;
+        }
+        /**
+         * Sets wether the tone mapping effect is enabled.
+         */
+        public set toneMappingEnabled(value: boolean) {
+            if (this._toneMappingEnabled === value) {
+                return;
+            }
+
+            this._toneMappingEnabled = value;
             this._updateParameters();
         }
 
@@ -171,7 +220,7 @@ module BABYLON {
         }
 
         @serialize()
-        private _vignetteEnabled = true;
+        private _vignetteEnabled = false;
         /**
          * Gets wether the vignette effect is enabled.
          */
@@ -190,6 +239,26 @@ module BABYLON {
             this._updateParameters();
         }
 
+        @serialize()
+        private _applyByPostProcess = false;
+        /**
+         * Gets wether the image processing is applied through a post process or not.
+         */
+        public get applyByPostProcess(): boolean {
+            return this._applyByPostProcess;
+        }
+        /**
+         * Sets wether the image processing is applied through a post process or not.
+         */
+        public set applyByPostProcess(value: boolean) {
+            if (this._applyByPostProcess === value) {
+                return;
+            }
+
+            this._applyByPostProcess = value;
+            this._updateParameters();
+        }
+
         /**
         * An event triggered when the configuration changes and requires Shader to Update some parameters.
         * @type {BABYLON.Observable}
@@ -247,10 +316,13 @@ module BABYLON {
             defines.VIGNETTE = this.vignetteEnabled;
             defines.VIGNETTEBLENDMODEMULTIPLY = (this.vignetteBlendMode === ImageProcessing._VIGNETTEMODE_MULTIPLY);
             defines.VIGNETTEBLENDMODEOPAQUE = !defines.VIGNETTEBLENDMODEMULTIPLY;
-            defines.TONEMAPPING = (this.cameraExposure !== 1.0);
+            defines.TONEMAPPING = this.toneMappingEnabled;
             defines.CONTRAST = (this.cameraContrast !== 1.0);
             defines.COLORCURVES = (this.colorCurvesEnabled && !!this.colorCurves);
             defines.COLORGRADING = (this.colorGradingEnabled && !!this.colorGradingTexture);
+            defines.SAMPLER3DGREENDEPTH = this.colorGradingWithGreenDepth;
+            defines.SAMPLER3DBGRMAP = this.colorGradingBGR;
+            defines.IMAGEPROCESSINGPOSTPROCESS = this.applyByPostProcess;
             defines.IMAGEPROCESSING = defines.VIGNETTE || defines.TONEMAPPING || defines.CONTRAST || defines.COLORCURVES || defines.COLORGRADING;
         }
 
@@ -276,7 +348,7 @@ module BABYLON {
             if (this._vignetteEnabled) {
                 var inverseWidth = 1 / effect.getEngine().getRenderWidth();
                 var inverseHeight = 1 / effect.getEngine().getRenderHeight();
-                effect.setFloat2("vInverseScreenSize", 1 / inverseWidth, 1 / inverseHeight);
+                effect.setFloat2("vInverseScreenSize", inverseWidth, inverseHeight);
 
                 let vignetteScaleY = Math.tan(this.cameraFov * 0.5);
                 let vignetteScaleX = vignetteScaleY * aspectRatio;

src/Materials/babylon.materialHelper.ts

@@ -327,7 +327,7 @@
             light.transferToEffect(effect, lightIndex + "");
         }
 
-        public static BindLights(scene: Scene, mesh: AbstractMesh, effect: Effect, defines: MaterialDefines, maxSimultaneousLights = 4, , usePhysicalLightFalloff = false) {
+        public static BindLights(scene: Scene, mesh: AbstractMesh, effect: Effect, defines: MaterialDefines, maxSimultaneousLights = 4, usePhysicalLightFalloff = false) {
             var lightIndex = 0;
             for (var light of mesh._lightSources) {
                 let scaledIntensity = light.getScaledIntensity();

src/Materials/babylon.standardMaterial.ts

@@ -71,6 +71,9 @@ module BABYLON {
         public CONTRAST = false;
         public COLORCURVES = false;
         public COLORGRADING = false;
+        public SAMPLER3DGREENDEPTH = false;
+        public SAMPLER3DBGRMAP = false;
+        public IMAGEPROCESSINGPOSTPROCESS = false;
 
         constructor() {
             super();
@@ -296,6 +299,9 @@ module BABYLON {
          */
         public set imageProcessingConfiguration(value: ImageProcessing) {
             this._attachImageProcessingConfiguration(value);
+
+            // Ensure the effect will be rebuilt.
+            this._markAllSubMeshesAsTexturesDirty();
         }
 
         /**
@@ -329,62 +335,46 @@ module BABYLON {
             this._imageProcessingObserver = this._imageProcessingConfiguration.onUpdateParameters.add(conf => {
                 this._markAllSubMeshesAsTexturesDirty();
             });
-
-            // Ensure the effect will be rebuilt.
-            this._markAllSubMeshesAsTexturesDirty();
-        }
-
-        /**
-         * Gets Color curves setup used in the effect if colorCurvesEnabled is set to true .
-         */
-        public get colorCurves(): ColorCurves {
-            return this.imageProcessingConfiguration.colorCurves;
-        }
-        /**
-         * Sets Color curves setup used in the effect if colorCurvesEnabled is set to true .
-         */
-        public set colorCurves(value: ColorCurves) {
-            this.imageProcessingConfiguration.colorCurves = value;
         }
 
         /**
          * Gets wether the color curves effect is enabled.
          */
-        public get colorCurvesEnabled(): boolean {
+        public get cameraColorCurvesEnabled(): boolean {
             return this.imageProcessingConfiguration.colorCurvesEnabled;
         }
         /**
          * Sets wether the color curves effect is enabled.
          */
-        public set colorCurvesEnabled(value: boolean) {
+        public set cameraColorCurvesEnabled(value: boolean) {
             this.imageProcessingConfiguration.colorCurvesEnabled = value;
         }
 
         /**
-         * Gets Color grading LUT texture used in the effect if colorGradingEnabled is set to true.
+         * Gets wether the color grading effect is enabled.
          */
-        public get colorGradingTexture(): BaseTexture {
-            return this.imageProcessingConfiguration.colorGradingTexture;
+        public get cameraColorGradingEnabled(): boolean {
+            return this.imageProcessingConfiguration.colorGradingEnabled;
         }
         /**
-         * Sets Color grading LUT texture used in the effect if colorGradingEnabled is set to true.
+         * Gets wether the color grading effect is enabled.
          */
-        public set colorGradingTexture(value: BaseTexture) {
-            this.imageProcessingConfiguration.colorGradingTexture = value;
+        public set cameraColorGradingEnabled(value: boolean) {
+            this.imageProcessingConfiguration.colorGradingEnabled = value;
         }
 
         /**
-         * Gets wether the color grading effect is enabled.
+         * Gets wether tonemapping is enabled or not.
          */
-        public get colorGradingEnabled(): boolean {
-            return this.imageProcessingConfiguration.colorGradingEnabled;
-        }
+        public get cameraToneMappingEnabled(): boolean {
+            return this._imageProcessingConfiguration.toneMappingEnabled;
+        };
         /**
-         * Gets wether the color grading effect is enabled.
+         * Sets wether tonemapping is enabled or not
          */
-        public set colorGradingEnabled(value: boolean) {
-            this.imageProcessingConfiguration.colorGradingEnabled = value;
-        }
+        public set cameraToneMappingEnabled(value: boolean) {
+            this._imageProcessingConfiguration.toneMappingEnabled = value;
+        };
 
         /**
          * The camera exposure used on this material.
@@ -430,25 +420,6 @@ module BABYLON {
             this._imageProcessingConfiguration.colorGradingTexture = value;
         }
 
-        /**
-         * 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.
-         */
-        public get cameraColorCurves(): ColorCurves {
-            return this._imageProcessingConfiguration.colorCurves;
-        }
-        /**
-         * 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.
-         */
-        public set cameraColorCurves(value: ColorCurves) {
-            this._imageProcessingConfiguration.colorCurves = value;
-        }
-
         public customShaderNameResolve: (shaderName: string, uniforms: string[], uniformBuffers: string[], samplers: string[], defines: StandardMaterialDefines) => string;
 
         protected _renderTargets = new SmartArray<RenderTargetTexture>(16);
@@ -1246,10 +1217,6 @@ module BABYLON {
                 activeTextures.push(this._refractionTexture);
             }
 
-            if (this._cameraColorGradingTexture) {
-                activeTextures.push(this._cameraColorGradingTexture);
-            }
-
             return activeTextures;
         }
 

src/PostProcess/babylon.imageProcessingPostProcess.ts

@@ -126,6 +126,19 @@
         }
 
         /**
+         * Gets wether tonemapping is enabled or not.
+         */
+        public get toneMappingEnabled(): boolean {
+            return this._imageProcessingConfiguration.toneMappingEnabled;
+        };
+        /**
+         * Sets wether tonemapping is enabled or not
+         */
+        public set toneMappingEnabled(value: boolean) {
+            this._imageProcessingConfiguration.toneMappingEnabled = value;
+        };
+
+        /**
          * Gets Camera contrast used in the effect.
          */
         public get cameraContrast(): number {
@@ -245,7 +258,7 @@
         }
 
         @serialize()
-        private _fromLinearSpace = false;
+        private _fromLinearSpace = true;
         /**
          * Gets wether the input of the processing is in Gamma or Linear Space.
          */
@@ -268,6 +281,7 @@
          * Defines cache preventing GC.
          */
         private _defines: IImageProcessingDefines & { FROMLINEARSPACE: boolean } = {
+            IMAGEPROCESSING: false,
             VIGNETTE: false,
             VIGNETTEBLENDMODEMULTIPLY: false,
             VIGNETTEBLENDMODEOPAQUE: false,
@@ -276,6 +290,9 @@
             COLORCURVES: false,
             COLORGRADING: false,
             FROMLINEARSPACE: false,
+            SAMPLER3DGREENDEPTH: false,
+            SAMPLER3DBGRMAP: false,
+            IMAGEPROCESSINGPOSTPROCESS: false,
         }
 
         constructor(name: string, options: number | PostProcessOptions, camera?: Camera, samplingMode?: number, engine?: Engine, reusable?: boolean, textureType: number = Engine.TEXTURETYPE_UNSIGNED_INT) {
@@ -285,6 +302,8 @@
             // Setup the default processing configuration to the scene.
             this._attachImageProcessingConfiguration(null);
 
+            this.imageProcessingConfiguration.applyByPostProcess = true;
+
             this._updateParameters();
 
             this.onApply = (effect: Effect) => {
@@ -310,5 +329,15 @@
 
             this.updateEffect(defines, uniforms, samplers);
         }
+
+        public dispose(camera?: Camera): void {
+            super.dispose(camera);
+
+            if (this._imageProcessingConfiguration && this._imageProcessingObserver) {
+                this._imageProcessingConfiguration.onUpdateParameters.remove(this._imageProcessingObserver);
+            }
+            
+            this.imageProcessingConfiguration.applyByPostProcess = false;
+        }
     }
 }

src/Shaders/ShadersInclude/imageProcessingDeclaration.fx

@@ -1,4 +1,6 @@
-#ifdef CONTRAST
+uniform float cameraExposureLinear;
+
+#ifdef CONTRAST
 	uniform float contrast;
 #endif
 
@@ -8,10 +10,6 @@
 	uniform vec4 vignetteSettings2;
 #endif
 
-#ifdef TONEMAPPING
-	uniform float cameraExposureLinear;
-#endif
-
 #ifdef COLORCURVES
 	uniform vec4 vCameraColorCurveNegative;
 	uniform vec4 vCameraColorCurveNeutral;

src/Shaders/ShadersInclude/imageProcessingFunctions.fx

@@ -8,25 +8,42 @@ vec3 sampleTexture3D(sampler2D colorTransform, vec3 color, vec2 sampler3dSetting
 {
 	float sliceSize = 2.0 * sampler3dSetting.x; // Size of 1 slice relative to the texture, for example 1/8
 
-	float sliceContinuous = (color.y - sampler3dSetting.x) * sampler3dSetting.y;
+#ifdef SAMPLER3DGREENDEPTH
+	float sliceContinuous = (color.g - sampler3dSetting.x) * sampler3dSetting.y;
+#else
+	float sliceContinuous = (color.b - sampler3dSetting.x) * sampler3dSetting.y;
+#endif
 	float sliceInteger = floor(sliceContinuous);
 
 	// Note: this is mathematically equivalent to fract(sliceContinuous); but we use explicit subtract
 	// rather than separate fract() for correct results near slice boundaries (matching sliceInteger choice)
 	float sliceFraction = sliceContinuous - sliceInteger;
 
-	vec2 sliceUV = color.xz;
+#ifdef SAMPLER3DGREENDEPTH
+	vec2 sliceUV = color.rb;
+#else
+	vec2 sliceUV = color.rg;
+#endif
 	
 	sliceUV.x *= sliceSize;
 	sliceUV.x += sliceInteger * sliceSize;
 
+	sliceUV = clamp(sliceUV, 0., 1.);
+
 	vec4 slice0Color = texture2D(colorTransform, sliceUV);
 
 	sliceUV.x += sliceSize;
+	
+	sliceUV = clamp(sliceUV, 0., 1.);
 	vec4 slice1Color = texture2D(colorTransform, sliceUV);
 
 	vec3 result = mix(slice0Color.rgb, slice1Color.rgb, sliceFraction);
+
+#ifdef SAMPLER3DBGRMAP
+	color.rgb = result.rgb;
+#else
 	color.rgb = result.bgr;
+#endif
 
 	return color;
 }
@@ -34,14 +51,12 @@ vec3 sampleTexture3D(sampler2D colorTransform, vec3 color, vec2 sampler3dSetting
 
 vec4 applyImageProcessing(vec4 result) {
 
-#ifdef TONEMAPPING
 	result.rgb *= cameraExposureLinear;
-#endif
 
 #ifdef VIGNETTE
 		//vignette
 		vec2 viewportXY = gl_FragCoord.xy * vInverseScreenSize;
-		viewportXY = viewportXY * 2.0 - 1.0
+		viewportXY = viewportXY * 2.0 - 1.0;
 		vec3 vignetteXY1 = vec3(viewportXY * vignetteSettings1.xy + vignetteSettings1.zw, 1.0);
 		float vignetteTerm = dot(vignetteXY1, vignetteXY1);
 		float vignette = pow(vignetteTerm, vignetteSettings2.w);
@@ -60,7 +75,7 @@ vec4 applyImageProcessing(vec4 result) {
 #endif
 	
 #ifdef TONEMAPPING
-	float tonemappingCalibration = 1.590579;
+	const float tonemappingCalibration = 1.590579;
 	result.rgb = 1.0 - exp2(-tonemappingCalibration * result.rgb);
 #endif
 

src/Shaders/default.fragment.fx

@@ -101,8 +101,6 @@ varying vec3 vDirectionW;
 
 #include<imageProcessingDeclaration>
 
-#include<helperFunctions>
-
 #include<imageProcessingFunctions>
 
 #include<bumpFragmentFunctions>
@@ -359,9 +357,13 @@ void main(void) {
 
 // Apply image processing if relevant. As this applies in linear space, 
 // We first move from gamma to linear.
-#ifdef IMAGEPROCESSING
-	color.rgb = toLinearSpace(result.rgb);
-	color.rgb = applyImageProcessing(color);
+#ifdef IMAGEPROCESSINGPOSTPROCESS
+	color.rgb = toLinearSpace(color.rgb);
+#else
+	#ifdef IMAGEPROCESSING
+		color.rgb = toLinearSpace(color.rgb);
+		color = applyImageProcessing(color);
+	#endif
 #endif
 
 	gl_FragColor = color;

src/Shaders/pbr.fragment.fx

@@ -604,13 +604,13 @@ void main(void) {
 #include<logDepthFragment>
 #include<fogFragment>(color, finalColor)
 
-#ifdef HDRLINEAROUTPUT
+#ifdef IMAGEPROCESSINGPOSTPROCESS
 	// Sanitize output incase invalid normals or tangents have caused div by 0 or undefined behavior
 	// this also limits the brightness which helpfully reduces over-sparkling in bloom (native handles this in the bloom blur shader)
 	finalColor.rgb = clamp(finalColor.rgb, 0., 30.0);
 #else
 	// Alway run even to ensure going back to gamma space.
-	finalColor.rgb = applyImageProcessing(finalColor);
+	finalColor = applyImageProcessing(finalColor);
 #endif
 
 #ifdef PREMULTIPLYALPHA

src/babylon.scene.ts

@@ -807,7 +807,7 @@
             this._createUbo();
 
             // Default Image processing definition.
-            this._imageProcessingConfiguration = new ImageProcessingConfiguration();
+            this._imageProcessingConfiguration = new ImageProcessing();
         }
 
         // Properties