Merge branch 'master' of https://github.com/BabylonJS/Babylon.js

materialsLibrary/src/water/water.fragment.fx

@@ -26,6 +26,9 @@ varying vec4 vColor;
 // Helper functions
 #include<helperFunctions>
 
+#include<imageProcessingDeclaration>
+#include<imageProcessingFunctions>
+
 // Lights
 #include<__decl__lightFragment>[0..maxSimultaneousLights]
 
@@ -125,6 +128,9 @@ void main(void) {
         // Water
         vec2 projectedRefractionTexCoords = clamp(vRefractionMapTexCoord.xy / vRefractionMapTexCoord.z + perturbation*0.5, 0.0, 1.0);
         vec4 refractiveColor = texture2D(refractionSampler, projectedRefractionTexCoords);
+        #ifdef IS_REFRACTION_LINEAR
+            refractiveColor.rgb = toGammaSpace(refractiveColor.rgb);
+        #endif
 
         vec2 projectedReflectionTexCoords = clamp(vec2(
             vReflectionMapTexCoord.x / vReflectionMapTexCoord.z + perturbation.x * 0.3,
@@ -132,6 +138,9 @@ void main(void) {
         ),0.0, 1.0);
 
         vec4 reflectiveColor = texture2D(reflectionSampler, projectedReflectionTexCoords);
+        #ifdef IS_REFLECTION_LINEAR
+            reflectiveColor.rgb = toGammaSpace(reflectiveColor.rgb);
+        #endif
 
         vec3 upVector = vec3(0.0, 1.0, 0.0);
 
@@ -178,9 +187,15 @@ void main(void) {
         // Water
         vec2 projectedRefractionTexCoords = clamp(vRefractionMapTexCoord.xy / vRefractionMapTexCoord.z + perturbation, 0.0, 1.0);
         vec4 refractiveColor = texture2D(refractionSampler, projectedRefractionTexCoords);
+        #ifdef IS_REFRACTION_LINEAR
+            refractiveColor.rgb = toGammaSpace(refractiveColor.rgb);
+        #endif
 
         vec2 projectedReflectionTexCoords = clamp(vReflectionMapTexCoord.xy / vReflectionMapTexCoord.z + perturbation, 0.0, 1.0);
         vec4 reflectiveColor = texture2D(reflectionSampler, projectedReflectionTexCoords);
+        #ifdef IS_REFLECTION_LINEAR
+            reflectiveColor.rgb = toGammaSpace(reflectiveColor.rgb);
+        #endif
 
         vec3 upVector = vec3(0.0, 1.0, 0.0);
 
@@ -226,6 +241,15 @@ vec4 color = vec4(finalDiffuse + finalSpecular, alpha);
 
 #include<logDepthFragment>
 #include<fogFragment>
+
+// Apply image processing if relevant. As this applies in linear space, 
+// We first move from gamma to linear.
+#ifdef IMAGEPROCESSINGPOSTPROCESS
+	color.rgb = toLinearSpace(color.rgb);
+#elif IMAGEPROCESSING
+    color.rgb = toLinearSpace(color.rgb);
+    color = applyImageProcessing(color);
+#endif
 	
 	gl_FragColor = color;
 }

materialsLibrary/src/water/waterMaterial.ts

@@ -6,10 +6,12 @@ import { Plane } from 'babylonjs/Maths/math.plane';
 import { IAnimatable } from 'babylonjs/Animations/animatable.interface';
 import { Constants } from "babylonjs/Engines/constants";
 import { SmartArray } from "babylonjs/Misc/smartArray";
+import { Observer } from 'babylonjs/Misc/observable';
 import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
 import { RenderTargetTexture } from "babylonjs/Materials/Textures/renderTargetTexture";
 import { EffectFallbacks, EffectCreationOptions } from "babylonjs/Materials/effect";
 import { MaterialDefines } from "babylonjs/Materials/materialDefines";
+import { IImageProcessingConfigurationDefines, ImageProcessingConfiguration } from "babylonjs/Materials/imageProcessingConfiguration";
 import { MaterialHelper } from "babylonjs/Materials/materialHelper";
 import { PushMaterial } from "babylonjs/Materials/pushMaterial";
 import { MaterialFlags } from "babylonjs/Materials/materialFlags";
@@ -24,7 +26,7 @@ import { _TypeStore } from 'babylonjs/Misc/typeStore';
 import "./water.fragment";
 import "./water.vertex";
 
-class WaterMaterialDefines extends MaterialDefines {
+class WaterMaterialDefines extends MaterialDefines implements IImageProcessingConfigurationDefines {
     public BUMP = false;
     public REFLECTION = false;
     public CLIPPLANE = false;
@@ -49,6 +51,21 @@ class WaterMaterialDefines extends MaterialDefines {
     public BUMPSUPERIMPOSE = false;
     public BUMPAFFECTSREFLECTION = false;
 
+    public IMAGEPROCESSING = false;
+    public VIGNETTE = false;
+    public VIGNETTEBLENDMODEMULTIPLY = false;
+    public VIGNETTEBLENDMODEOPAQUE = false;
+    public TONEMAPPING = false;
+    public TONEMAPPING_ACES = false;
+    public CONTRAST = false;
+    public EXPOSURE = false;
+    public COLORCURVES = false;
+    public COLORGRADING = false;
+    public COLORGRADING3D = false;
+    public SAMPLER3DGREENDEPTH = false;
+    public SAMPLER3DBGRMAP = false;
+    public IMAGEPROCESSINGPOSTPROCESS = false;
+
     constructor() {
         super();
         this.rebuild();
@@ -158,6 +175,12 @@ export class WaterMaterial extends PushMaterial {
     */
     @serialize()
     public waveSpeed: number = 1.0;
+    /**
+     * Sets or gets wether or not automatic clipping should be enabled or not. Setting to true will save performances and
+     * will avoid calculating useless pixels in the pixel shader of the water material.
+     */
+    @serialize()
+    public disableClipPlane: boolean = false;
 
     protected _renderTargets = new SmartArray<RenderTargetTexture>(16);
 
@@ -179,6 +202,9 @@ export class WaterMaterial extends PushMaterial {
 
     private _waitingRenderList: Nullable<string[]>;
 
+    private _imageProcessingConfiguration: Nullable<ImageProcessingConfiguration>;
+    private _imageProcessingObserver: Nullable<Observer<ImageProcessingConfiguration>>;
+
     /**
      * Gets a boolean indicating that current material needs to register RTT
      */
@@ -202,6 +228,13 @@ export class WaterMaterial extends PushMaterial {
 
             return this._renderTargets;
         };
+
+        this._imageProcessingConfiguration = this.getScene().imageProcessingConfiguration;
+        if (this._imageProcessingConfiguration) {
+            this._imageProcessingObserver = this._imageProcessingConfiguration.onUpdateParameters.add(() => {
+                this._markAllSubMeshesAsImageProcessingDirty();
+            });
+        }
     }
 
     @serialize()
@@ -328,6 +361,18 @@ export class WaterMaterial extends PushMaterial {
         // Lights
         defines._needNormals = MaterialHelper.PrepareDefinesForLights(scene, mesh, defines, true, this._maxSimultaneousLights, this._disableLighting);
 
+        // Image processing
+        if (defines._areImageProcessingDirty && this._imageProcessingConfiguration) {
+            if (!this._imageProcessingConfiguration.isReady()) {
+                return false;
+            }
+
+            this._imageProcessingConfiguration.prepareDefines(defines);
+
+            defines.IS_REFLECTION_LINEAR = (this.reflectionTexture != null && !this.reflectionTexture.gammaSpace);
+            defines.IS_REFRACTION_LINEAR = (this.refractionTexture != null && !this.refractionTexture.gammaSpace);
+        }
+
         // Attribs
         MaterialHelper.PrepareDefinesForAttributes(mesh, defines, true, true);
 
@@ -405,6 +450,11 @@ export class WaterMaterial extends PushMaterial {
             ];
             var uniformBuffers = new Array<string>();
 
+            if (ImageProcessingConfiguration) {
+                ImageProcessingConfiguration.PrepareUniforms(uniforms, defines);
+                ImageProcessingConfiguration.PrepareSamplers(samplers, defines);
+            }
+
             MaterialHelper.PrepareUniformsAndSamplersList(<EffectCreationOptions>{
                 uniformsNames: uniforms,
                 uniformBuffersNames: uniformBuffers,
@@ -525,6 +575,11 @@ export class WaterMaterial extends PushMaterial {
         this._activeEffect.setFloat("colorBlendFactor2", this.colorBlendFactor2);
         this._activeEffect.setFloat("waveSpeed", this.waveSpeed);
 
+        // image processing
+        if (this._imageProcessingConfiguration && !this._imageProcessingConfiguration.applyByPostProcess) {
+            this._imageProcessingConfiguration.bind(this._activeEffect);
+        }
+
         this._afterBind(mesh, this._activeEffect);
     }
 
@@ -550,11 +605,14 @@ export class WaterMaterial extends PushMaterial {
                 isVisible = this._mesh.isVisible;
                 this._mesh.isVisible = false;
             }
+
             // Clip plane
-            clipPlane = scene.clipPlane;
+            if (!this.disableClipPlane) {
+                clipPlane = scene.clipPlane;
 
-            var positiony = this._mesh ? this._mesh.position.y : 0.0;
-            scene.clipPlane = Plane.FromPositionAndNormal(new Vector3(0, positiony + 0.05, 0), new Vector3(0, 1, 0));
+                var positiony = this._mesh ? this._mesh.position.y : 0.0;
+                scene.clipPlane = Plane.FromPositionAndNormal(new Vector3(0, positiony + 0.05, 0), new Vector3(0, 1, 0));
+            }
         };
 
         this._refractionRTT.onAfterRender = () => {
@@ -563,7 +621,9 @@ export class WaterMaterial extends PushMaterial {
             }
 
             // Clip plane
-            scene.clipPlane = clipPlane;
+            if (!this.disableClipPlane) {
+                scene.clipPlane = clipPlane;
+            }
         };
 
         this._reflectionRTT.onBeforeRender = () => {
@@ -573,13 +633,16 @@ export class WaterMaterial extends PushMaterial {
             }
 
             // Clip plane
-            clipPlane = scene.clipPlane;
+            if (!this.disableClipPlane) {
+                clipPlane = scene.clipPlane;
+
+                var positiony = this._mesh ? this._mesh.position.y : 0.0;
+                scene.clipPlane = Plane.FromPositionAndNormal(new Vector3(0, positiony - 0.05, 0), new Vector3(0, -1, 0));
 
-            var positiony = this._mesh ? this._mesh.position.y : 0.0;
-            scene.clipPlane = Plane.FromPositionAndNormal(new Vector3(0, positiony - 0.05, 0), new Vector3(0, -1, 0));
+                Matrix.ReflectionToRef(scene.clipPlane, mirrorMatrix);
+            }
 
             // Transform
-            Matrix.ReflectionToRef(scene.clipPlane, mirrorMatrix);
             savedViewMatrix = scene.getViewMatrix();
 
             mirrorMatrix.multiplyToRef(savedViewMatrix, this._reflectionTransform);
@@ -663,6 +726,11 @@ export class WaterMaterial extends PushMaterial {
             this._refractionRTT.dispose();
         }
 
+        // Remove image-processing observer
+        if (this._imageProcessingConfiguration && this._imageProcessingObserver) {
+            this._imageProcessingConfiguration.onUpdateParameters.remove(this._imageProcessingObserver);
+        }
+
         super.dispose(forceDisposeEffect);
     }
 

src/PostProcesses/volumetricLightScatteringPostProcess.ts

@@ -212,7 +212,7 @@ export class VolumetricLightScatteringPostProcess extends PostProcess {
         if (this._cachedDefines !== join) {
             this._cachedDefines = join;
             this._volumetricLightScatteringPass = mesh.getScene().getEngine().createEffect(
-                { vertexElement: "depth", fragmentElement: "volumetricLightScatteringPass" },
+                "volumetricLightScatteringPass",
                 attribs,
                 ["world", "mBones", "viewProjection", "diffuseMatrix"],
                 ["diffuseSampler"],

src/Shaders/volumetricLightScatteringPass.fragment.fx

@@ -17,4 +17,3 @@ void main(void)
 
 	gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
 }
-

src/Shaders/volumetricLightScatteringPass.vertex.fx

@@ -0,0 +1,45 @@
+// Attribute
+attribute vec3 position;
+#include<bonesDeclaration>
+
+#include<morphTargetsVertexGlobalDeclaration>
+#include<morphTargetsVertexDeclaration>[0..maxSimultaneousMorphTargets]
+
+// Uniform
+#include<instancesDeclaration>
+
+uniform mat4 viewProjection;
+uniform vec2 depthValues;
+
+#if defined(ALPHATEST) || defined(NEED_UV)
+varying vec2 vUV;
+uniform mat4 diffuseMatrix;
+#ifdef UV1
+attribute vec2 uv;
+#endif
+#ifdef UV2
+attribute vec2 uv2;
+#endif
+#endif
+
+void main(void)
+{
+    vec3 positionUpdated = position;
+#if (defined(ALPHATEST) || defined(NEED_UV)) && defined(UV1)
+    vec2 uvUpdated = uv;
+#endif
+#include<morphTargetsVertex>[0..maxSimultaneousMorphTargets]
+
+#include<instancesVertex>
+
+#include<bonesVertex>
+
+#if defined(ALPHATEST) || defined(BASIC_RENDER)
+#ifdef UV1
+	vUV = vec2(diffuseMatrix * vec4(uvUpdated, 1.0, 0.0));
+#endif
+#ifdef UV2
+	vUV = vec2(diffuseMatrix * vec4(uv2, 1.0, 0.0));
+#endif
+#endif
+}