Background Material Step 2

materialsLibrary/src/background/babylon.backgroundMaterial.ts

@@ -6,40 +6,34 @@ namespace BABYLON {
      */
     class BackgroundMaterialDefines extends MaterialDefines implements IImageProcessingConfigurationDefines {
         /**
-         * True if the opacity texture is in use.
+         * True if the diffuse texture is in use.
          */
-        public OPACITY = false;
+        public DIFFUSE = false;
 
         /**
          * The direct UV channel to use.
          */
-        public OPACITYDIRECTUV = 0;
+        public DIFFUSEDIRECTUV = 0;
 
         /**
-         * True if the opacity texture is used in gray scale.
+         * True if the diffuse texture is in gamma space.
          */
-        public OPACITYRGB = false;
+        public GAMMADIFFUSE = false;
 
         /**
-         * True if the environment texture is in use.
+         * True if the diffuse texture has opacity in the alpha channel.
          */
-        public ENVIRONMENT = false;
+        public DIFFUSEHASALPHA = false;
 
         /**
-         * True if the environment is defined in gamma space.
+         * True if you want the material to fade to transparent at grazing angle.
          */
-        public GAMMAENVIRONMENT = false;
-
-        /**
-         * True if the environment texture does not contain background dedicated data.
-         * The material will fallback to use the luminance of the background.
-         */
-        public RGBENVIRONMENT = false;
+        public OPACITYFRESNEL = false;
 
         /**
-         * True if an extra blur needs to be added in the environment.
+         * True if an extra blur needs to be added in the reflection.
          */
-        public ENVIRONMENTBLUR = false;
+        public REFLECTIONBLUR = false;
 
         /**
          * False if the current Webgl implementation does not support the texture lod extension.
@@ -47,16 +41,14 @@ namespace BABYLON {
         public TEXTURELODSUPPORT = false;
 
         /**
-         * True if you want the material to fade to the environment color at grazing angle.
+         * True to ensure the data are premultiplied.
          */
-        public OPACITYFRESNEL = false;
+        public PREMULTIPLYALPHA = false;
 
         /**
-         * True if you want the shadow being generated from the diffuse color of the light.
-         * It is actually using 1 - diffuse to adpat the color to the color not reflected
-         * by the target.
+         * True if the texture contains cooked RGB values and not gray scaled multipliers.
          */
-        public SHADOWFROMLIGHTCOLOR = false;
+        public USERGBCOLOR = false;
 
         // Image Processing Configuration.
         public IMAGEPROCESSING = false;
@@ -73,6 +65,23 @@ namespace BABYLON {
         public IMAGEPROCESSINGPOSTPROCESS = false;
         public EXPOSURE = false;
 
+        // Reflection.
+        public REFLECTION = false;
+        public REFLECTIONMAP_3D = false;
+        public REFLECTIONMAP_SPHERICAL = false;
+        public REFLECTIONMAP_PLANAR = false;
+        public REFLECTIONMAP_CUBIC = false;
+        public REFLECTIONMAP_PROJECTION = false;
+        public REFLECTIONMAP_SKYBOX = false;
+        public REFLECTIONMAP_EXPLICIT = false;
+        public REFLECTIONMAP_EQUIRECTANGULAR = false;
+        public REFLECTIONMAP_EQUIRECTANGULAR_FIXED = false;
+        public REFLECTIONMAP_MIRROREDEQUIRECTANGULAR_FIXED = false;
+        public INVERTCUBICMAP = false;
+        public REFLECTIONMAP_OPPOSITEZ = false;
+        public LODINREFLECTIONALPHA = false;
+        public GAMMAREFLECTION = false;
+
         // Default BJS.
         public MAINUV1 = false;
         public MAINUV2 = false;
@@ -149,45 +158,33 @@ namespace BABYLON {
         public thirdLevel: float = 1;
 
         /**
-         * Environment Texture used in the material.
+         * Reflection Texture used in the material.
          * Should be author in a specific way for the best result (refer to the documentation).
          */
         @serializeAsTexture()
-        protected _environmentTexture: Nullable<BaseTexture>;
+        protected _reflectionTexture: Nullable<BaseTexture>;
         @expandToProperty("_markAllSubMeshesAsTexturesDirty")
-        public environmentTexture: Nullable<BaseTexture> = null;
+        public reflectionTexture: Nullable<BaseTexture> = null;
 
         /**
-         * Opacity Texture used in the material.
-         * If present, the environment will be seen as a reflection when the luminance is close to 1 and a skybox
-         * where close from 0.
-         * This helps achieving a nice grounding effect by simulating a reflection on the ground but not the skybox.
-         * If not present only the skybox mode is used.
-         */
-        @serializeAsTexture()
-        protected _opacityTexture: Nullable<BaseTexture>;
-        @expandToProperty("_markAllSubMeshesAsTexturesDirty")
-        public opacityTexture: Nullable<BaseTexture> = null;
-
-        /**
-         * Environment Texture level of blur.
+         * Reflection Texture level of blur.
          * 
          * Can be use to reuse an existing HDR Texture and target a specific LOD to prevent authoring the 
          * texture twice.
          */
         @serialize()
-        protected _environmentBlur: float;
+        protected _reflectionBlur: float;
         @expandToProperty("_markAllSubMeshesAsTexturesDirty")
-        public environmentBlur: float = 0;
-
+        public reflectionBlur: float = 0;
+        
         /**
-         * Specify wether or not the different channels of the environment represents background lighting information.
-         * If no, the lumiance will be use equally on each channels.
+         * Diffuse Texture used in the material.
+         * Should be author in a specific way for the best result (refer to the documentation).
          */
-        @serialize()
-        protected _lightChannelsInTexture: boolean;
+        @serializeAsTexture()
+        protected _diffuseTexture: Nullable<BaseTexture>;
         @expandToProperty("_markAllSubMeshesAsTexturesDirty")
-        public lightChannelsInTexture: boolean = false;
+        public diffuseTexture: Nullable<BaseTexture> = null;
 
         /**
          * Specify the list of lights casting shadow on the material.
@@ -225,6 +222,22 @@ namespace BABYLON {
         public opacityFresnel: boolean = true;
 
         /**
+         * Helps to directly use the maps channels instead of their level.
+         */
+        @serialize()
+        protected _useRGBColor: boolean;
+        @expandToProperty("_markAllSubMeshesAsTexturesDirty")
+        public useRGBColor: boolean = true;
+
+        /**
+         * Number of Simultaneous lights allowed on the material.
+         */
+        @serialize()
+        private _maxSimultaneousLights: int = 4;
+        @expandToProperty("_markAllSubMeshesAsTexturesDirty")
+        public maxSimultaneousLights: int = 4;
+
+        /**
          * Default configuration related to image processing available in the Background Material.
          */
         @serializeAsImageProcessingConfiguration()
@@ -384,11 +397,6 @@ namespace BABYLON {
             (<ImageProcessingConfiguration>this.imageProcessingConfiguration).colorCurves = value;
         }
 
-        /**
-         * Number of Simultaneous lights allowed on the material.
-         */
-        private _maxSimultaneousLights: int = 4;
-
         // Temp values kept as cache in the material.
         private _renderTargets = new SmartArray<RenderTargetTexture>(16);
 
@@ -406,12 +414,12 @@ namespace BABYLON {
             this.getRenderTargetTextures = (): SmartArray<RenderTargetTexture> => {
                 this._renderTargets.reset();
 
-                if (this._opacityTexture && this._opacityTexture.isRenderTarget) {
-                    this._renderTargets.push(this._opacityTexture as RenderTargetTexture);
+                if (this._diffuseTexture && this._diffuseTexture.isRenderTarget) {
+                    this._renderTargets.push(this._diffuseTexture as RenderTargetTexture);
                 }
 
-                if (this._environmentTexture && this._environmentTexture.isRenderTarget) {
-                    this._renderTargets.push(this._environmentTexture as RenderTargetTexture);
+                if (this._reflectionTexture && this._reflectionTexture.isRenderTarget) {
+                    this._renderTargets.push(this._reflectionTexture as RenderTargetTexture);
                 }
 
                 return this._renderTargets;
@@ -428,22 +436,10 @@ namespace BABYLON {
 
         /**
          * The entire material has been created in order to prevent overdraw.
-         * @returns false
+         * @returns true if blending is enable
          */
         public needAlphaBlending(): boolean {
-            return false;
-        }
-
-        /**
-         * Gets the environment texture to use in the material.
-         * @returns the texture
-         */
-        private _getEnvironmentTexture(): Nullable<BaseTexture> {
-            if (this._environmentTexture) {
-                return this._environmentTexture;
-            }
-
-            return this.getScene().environmentTexture;
+            return ((this.alpha < 0) || (this._diffuseTexture != null && this._diffuseTexture.hasAlpha));
         }
 
         /**
@@ -485,36 +481,92 @@ namespace BABYLON {
                         defines.TEXTURELODSUPPORT = true;
                     }
 
-                    if (this._opacityTexture && StandardMaterial.OpacityTextureEnabled) {
-                        if (!this._opacityTexture.isReadyOrNotBlocking()) {
+                    if (this._diffuseTexture && StandardMaterial.DiffuseTextureEnabled) {
+                        if (!this._diffuseTexture.isReadyOrNotBlocking()) {
                             return false;
                         }
 
-                        MaterialHelper.PrepareDefinesForMergedUV(this._opacityTexture, defines, "OPACITY");
-                        defines.OPACITYRGB = this._opacityTexture.getAlphaFromRGB;
+                        MaterialHelper.PrepareDefinesForMergedUV(this._diffuseTexture, defines, "DIFFUSE");
+                        defines.DIFFUSEHASALPHA = this._diffuseTexture.hasAlpha;
+                        defines.GAMMADIFFUSE = this._diffuseTexture.gammaSpace;
                         defines.OPACITYFRESNEL = this._opacityFresnel;
                     } else {
-                        defines.OPACITY = false;
-                        defines.OPACITYRGB = false;
+                        defines.DIFFUSE = false;
+                        defines.DIFFUSEHASALPHA = false;
+                        defines.GAMMADIFFUSE = false;
                         defines.OPACITYFRESNEL = false;
                     }
 
-                    var environmentTexture = this._getEnvironmentTexture();
-                    if (environmentTexture && StandardMaterial.ReflectionTextureEnabled) {
-                        if (!environmentTexture.isReadyOrNotBlocking()) {
+                    var reflectionTexture = this._reflectionTexture;
+                    if (reflectionTexture && StandardMaterial.ReflectionTextureEnabled) {
+                        if (!reflectionTexture.isReadyOrNotBlocking()) {
                             return false;
                         }
+                        
+                        defines.REFLECTION = true;
+                        defines.GAMMAREFLECTION = reflectionTexture.gammaSpace;
+                        defines.REFLECTIONBLUR = this._reflectionBlur > 0;
+                        defines.REFLECTIONMAP_OPPOSITEZ = this.getScene().useRightHandedSystem ? !reflectionTexture.invertZ : reflectionTexture.invertZ;
+                        defines.LODINREFLECTIONALPHA = reflectionTexture.lodLevelInAlpha;
+
+                        if (reflectionTexture.coordinatesMode === Texture.INVCUBIC_MODE) {
+                            defines.INVERTCUBICMAP = true;
+                        }
 
-                        MaterialHelper.PrepareDefinesForMergedUV(environmentTexture, defines, "ENVIRONMENT"); 
-                        defines.GAMMAENVIRONMENT = environmentTexture.gammaSpace;
-                        defines.ENVIRONMENTBLUR = this._environmentBlur > 0;
-                        defines.RGBENVIRONMENT = !this.lightChannelsInTexture;
+                        defines.REFLECTIONMAP_3D = reflectionTexture.isCube;
+
+                        switch (reflectionTexture.coordinatesMode) {
+                            case Texture.CUBIC_MODE:
+                            case Texture.INVCUBIC_MODE:
+                                defines.REFLECTIONMAP_CUBIC = true;
+                                break;
+                            case Texture.EXPLICIT_MODE:
+                                defines.REFLECTIONMAP_EXPLICIT = true;
+                                break;
+                            case Texture.PLANAR_MODE:
+                                defines.REFLECTIONMAP_PLANAR = true;
+                                break;
+                            case Texture.PROJECTION_MODE:
+                                defines.REFLECTIONMAP_PROJECTION = true;
+                                break;
+                            case Texture.SKYBOX_MODE:
+                                defines.REFLECTIONMAP_SKYBOX = true;
+                                break;
+                            case Texture.SPHERICAL_MODE:
+                                defines.REFLECTIONMAP_SPHERICAL = true;
+                                break;
+                            case Texture.EQUIRECTANGULAR_MODE:
+                                defines.REFLECTIONMAP_EQUIRECTANGULAR = true;
+                                break;
+                            case Texture.FIXED_EQUIRECTANGULAR_MODE:
+                                defines.REFLECTIONMAP_EQUIRECTANGULAR_FIXED = true;
+                                break;
+                            case Texture.FIXED_EQUIRECTANGULAR_MIRRORED_MODE:
+                                defines.REFLECTIONMAP_MIRROREDEQUIRECTANGULAR_FIXED = true;
+                                break;
+                        }
                     } else {
-                        defines.ENVIRONMENT = false;
-                        defines.GAMMAENVIRONMENT = false;
-                        defines.RGBENVIRONMENT = false;
+                        defines.REFLECTION = false;
+                        defines.REFLECTIONBLUR = false;
+                        defines.REFLECTIONMAP_3D = false;
+                        defines.REFLECTIONMAP_SPHERICAL = false;
+                        defines.REFLECTIONMAP_PLANAR = false;
+                        defines.REFLECTIONMAP_CUBIC = false;
+                        defines.REFLECTIONMAP_PROJECTION = false;
+                        defines.REFLECTIONMAP_SKYBOX = false;
+                        defines.REFLECTIONMAP_EXPLICIT = false;
+                        defines.REFLECTIONMAP_EQUIRECTANGULAR = false;
+                        defines.REFLECTIONMAP_EQUIRECTANGULAR_FIXED = false;
+                        defines.REFLECTIONMAP_MIRROREDEQUIRECTANGULAR_FIXED = false;
+                        defines.INVERTCUBICMAP = false;
+                        defines.REFLECTIONMAP_OPPOSITEZ = false;
+                        defines.LODINREFLECTIONALPHA = false;
+                        defines.GAMMAREFLECTION = false;
                     }
                 }
+
+                defines.PREMULTIPLYALPHA = (this.alphaMode === Engine.ALPHA_PREMULTIPLIED || this.alphaMode === Engine.ALPHA_PREMULTIPLIED_PORTERDUFF);
+                defines.USERGBCOLOR = this._useRGBColor;
             }
 
             if (defines._areImageProcessingDirty) {
@@ -585,14 +637,14 @@ namespace BABYLON {
                         "vClipPlane", "mBones", 
 
                         "vPrimaryColor", "vSecondaryColor", "vThirdColor",
-                        "vEnvironmentInfo", "environmentMatrix", "vEnvironmentMicrosurfaceInfos",
+                        "vReflectionInfos", "reflectionMatrix", "vReflectionMicrosurfaceInfos",
 
-                        "shadowLevel",
+                        "shadowLevel", "alpha",
 
-                        "vOpacityInfo", "opacityMatrix",
+                        "vDiffuseInfos", "diffuseMatrix",
                 ];
 
-                var samplers = ["opacitySampler", "environmentSampler", "environmentSamplerLow", "environmentSamplerHigh"];
+                var samplers = ["diffuseSampler", "reflectionSampler", "reflectionSamplerLow", "reflectionSamplerHigh"];
                 var uniformBuffers = ["Material", "Scene"];
 
                 ImageProcessingConfiguration.PrepareUniforms(uniforms, defines);
@@ -648,13 +700,14 @@ namespace BABYLON {
             this._uniformBuffer.addUniform("vPrimaryColor", 4);
             this._uniformBuffer.addUniform("vSecondaryColor", 4);
             this._uniformBuffer.addUniform("vThirdColor", 4);
-            this._uniformBuffer.addUniform("vOpacityInfo", 2);
-            this._uniformBuffer.addUniform("vEnvironmentInfo", 2);
-            this._uniformBuffer.addUniform("opacityMatrix", 16);
-            this._uniformBuffer.addUniform("environmentMatrix", 16);
-            this._uniformBuffer.addUniform("vEnvironmentMicrosurfaceInfos", 3);
+            this._uniformBuffer.addUniform("vDiffuseInfos", 2);
+            this._uniformBuffer.addUniform("vReflectionInfos", 2);
+            this._uniformBuffer.addUniform("diffuseMatrix", 16);
+            this._uniformBuffer.addUniform("reflectionMatrix", 16);
+            this._uniformBuffer.addUniform("vReflectionMicrosurfaceInfos", 3);
             this._uniformBuffer.addUniform("pointSize", 1);
             this._uniformBuffer.addUniform("shadowLevel", 1);
+            this._uniformBuffer.addUniform("alpha", 1);
             this._uniformBuffer.create();
         }
 
@@ -662,12 +715,12 @@ namespace BABYLON {
          * Unbind the material.
          */
         public unbind(): void {
-            if (this._opacityTexture && this._opacityTexture.isRenderTarget) {
-                this._uniformBuffer.setTexture("opacitySampler", null);
+            if (this._diffuseTexture && this._diffuseTexture.isRenderTarget) {
+                this._uniformBuffer.setTexture("diffuseSampler", null);
             }
 
-            if (this._environmentTexture && this._environmentTexture.isRenderTarget) {
-                this._uniformBuffer.setTexture("environmentSampler", null);
+            if (this._reflectionTexture && this._reflectionTexture.isRenderTarget) {
+                this._uniformBuffer.setTexture("reflectionSampler", null);
             }
 
             super.unbind();
@@ -712,29 +765,31 @@ namespace BABYLON {
 
                 this.bindViewProjection(effect);
 
-                var environmentTexture = this._getEnvironmentTexture();
+                let reflectionTexture = this._reflectionTexture;
                 if (!this._uniformBuffer.useUbo || !this.isFrozen || !this._uniformBuffer.isSync) {
 
                     // Texture uniforms
                     if (scene.texturesEnabled) {
-                        if (this._opacityTexture && StandardMaterial.OpacityTextureEnabled) {
-                            this._uniformBuffer.updateFloat2("vOpacityInfo", this._opacityTexture.coordinatesIndex, this._opacityTexture.level);
-                            MaterialHelper.BindTextureMatrix(this._opacityTexture, this._uniformBuffer, "opacity");
+                        if (this._diffuseTexture && StandardMaterial.DiffuseTextureEnabled) {
+                            this._uniformBuffer.updateFloat2("vDiffuseInfos", this._diffuseTexture.coordinatesIndex, this._diffuseTexture.level);
+                            MaterialHelper.BindTextureMatrix(this._diffuseTexture, this._uniformBuffer, "diffuse");
                         }
 
-                        if (environmentTexture && StandardMaterial.ReflectionTextureEnabled) {
-                            this._uniformBuffer.updateMatrix("environmentMatrix", environmentTexture.getReflectionTextureMatrix());
-                            this._uniformBuffer.updateFloat2("vEnvironmentInfo", environmentTexture.level, this._environmentBlur);
-                            this._uniformBuffer.updateFloat3("vEnvironmentMicrosurfaceInfos", 
-                                environmentTexture.getSize().width, 
-                                environmentTexture.lodGenerationScale,
-                                environmentTexture.lodGenerationOffset);
+                        if (reflectionTexture && StandardMaterial.ReflectionTextureEnabled) {
+                            this._uniformBuffer.updateMatrix("reflectionMatrix", reflectionTexture.getReflectionTextureMatrix());
+                            this._uniformBuffer.updateFloat2("vReflectionInfos", reflectionTexture.level, this._reflectionBlur);
+
+                            this._uniformBuffer.updateFloat3("vReflectionMicrosurfaceInfos", 
+                                reflectionTexture.getSize().width, 
+                                reflectionTexture.lodGenerationScale,
+                                reflectionTexture.lodGenerationOffset);
                         }
                     }
 
                     if (this.shadowLevel > 0) {
                         this._uniformBuffer.updateFloat("shadowLevel", this.shadowLevel);
                     }
+                    this._uniformBuffer.updateFloat("alpha", this.alpha);
 
                     // Point size
                     if (this.pointsCloud) {
@@ -748,21 +803,21 @@ namespace BABYLON {
 
                 // Textures
                 if (scene.texturesEnabled) {
-                    if (this._opacityTexture && StandardMaterial.OpacityTextureEnabled) {
-                        this._uniformBuffer.setTexture("opacitySampler", this._opacityTexture);
+                    if (this._diffuseTexture && StandardMaterial.DiffuseTextureEnabled) {
+                        this._uniformBuffer.setTexture("diffuseSampler", this._diffuseTexture);
                     }
 
-                    if (environmentTexture && StandardMaterial.ReflectionTextureEnabled) {
-                        if (defines.ENVIRONMENTBLUR && defines.TEXTURELODSUPPORT) {
-                            this._uniformBuffer.setTexture("environmentSampler", environmentTexture);
+                    if (reflectionTexture && StandardMaterial.ReflectionTextureEnabled) {
+                        if (defines.REFLECTIONBLUR && defines.TEXTURELODSUPPORT) {
+                            this._uniformBuffer.setTexture("reflectionSampler", reflectionTexture);
                         }
-                        else if (!defines.ENVIRONMENTBLUR) {
-                            this._uniformBuffer.setTexture("environmentSampler", environmentTexture);
+                        else if (!defines.REFLECTIONBLUR) {
+                            this._uniformBuffer.setTexture("reflectionSampler", reflectionTexture);
                         }
                         else {
-                            this._uniformBuffer.setTexture("environmentSampler", environmentTexture._lodTextureMid || environmentTexture);
-                            this._uniformBuffer.setTexture("environmentSamplerLow", environmentTexture._lodTextureLow || environmentTexture);
-                            this._uniformBuffer.setTexture("environmentSamplerHigh", environmentTexture._lodTextureHigh || environmentTexture);
+                            this._uniformBuffer.setTexture("reflectionSampler", reflectionTexture._lodTextureMid || reflectionTexture);
+                            this._uniformBuffer.setTexture("reflectionSamplerLow", reflectionTexture._lodTextureLow || reflectionTexture);
+                            this._uniformBuffer.setTexture("reflectionSamplerHigh", reflectionTexture._lodTextureHigh || reflectionTexture);
                         }
                     }
                 }
@@ -805,11 +860,11 @@ namespace BABYLON {
          */
         public dispose(forceDisposeEffect: boolean = false, forceDisposeTextures: boolean = false): void {
             if (forceDisposeTextures) {
-                if (this.opacityTexture) {
-                    this.opacityTexture.dispose();
+                if (this.diffuseTexture) {
+                    this.diffuseTexture.dispose();
                 }
-                if (this.environmentTexture) {
-                    this.environmentTexture.dispose();
+                if (this.reflectionTexture) {
+                    this.reflectionTexture.dispose();
                 }
             }
 

materialsLibrary/src/background/background.fragment.fx

@@ -24,31 +24,52 @@ varying vec3 vPositionW;
 varying vec3 vNormalW;
 #endif
 
-#ifdef OPACITY
-    #if OPACITYDIRECTUV == 1
-        #define vOpacityUV vMainUV1
-    #elif OPACITYDIRECTUV == 2
-        #define vOpacityUV vMainUV2
+#ifdef DIFFUSE
+    #if DIFFUSEDIRECTUV == 1
+        #define vDiffuseUV vMainUV1
+    #elif DIFFUSEDIRECTUV == 2
+        #define vDiffuseUV vMainUV2
     #else
-        varying vec2 vOpacityUV;
+        varying vec2 vDiffuseUV;
     #endif
-    uniform sampler2D opacitySampler;
+    uniform sampler2D diffuseSampler;
 #endif
 
-// Environment
-#ifdef ENVIRONMENT
-    #define sampleEnvironment(s, c) textureCube(s, c)
-
-    uniform samplerCube environmentSampler;
-
-    #ifdef ENVIRONMENTBLUR
-        #ifdef TEXTURELODSUPPORT
-            #define sampleEnvironmentLod(s, c, l) textureCubeLodEXT(s, c, l)
-        #else
-            uniform samplerCube environmentSamplerLow;
-            uniform samplerCube environmentSamplerHigh;
-        #endif
-    #endif
+// Reflection
+#ifdef REFLECTION
+	#ifdef REFLECTIONMAP_3D
+		#define sampleReflection(s, c) textureCube(s, c)
+
+		uniform samplerCube reflectionSampler;
+		
+		#ifdef TEXTURELODSUPPORT
+			#define sampleReflectionLod(s, c, l) textureCubeLodEXT(s, c, l)
+		#else
+			uniform samplerCube reflectionSamplerLow;
+			uniform samplerCube reflectionSamplerHigh;
+		#endif
+	#else
+		#define sampleReflection(s, c) texture2D(s, c)
+
+		uniform sampler2D reflectionSampler;
+
+		#ifdef TEXTURELODSUPPORT
+			#define sampleReflectionLod(s, c, l) texture2DLodEXT(s, c, l)
+		#else
+			uniform samplerCube reflectionSamplerLow;
+			uniform samplerCube reflectionSamplerHigh;
+		#endif
+	#endif
+
+	#ifdef REFLECTIONMAP_SKYBOX
+		varying vec3 vPositionUVW;
+	#else
+		#if defined(REFLECTIONMAP_EQUIRECTANGULAR_FIXED) || defined(REFLECTIONMAP_MIRROREDEQUIRECTANGULAR_FIXED)
+			varying vec3 vDirectionW;
+		#endif
+	#endif
+
+	#include<reflectionFunction>
 #endif
 
 // Forces linear space for image processing
@@ -91,143 +112,122 @@ void main(void) {
 
 // _____________________________ Light Information _______________________________
     float shadow = 1.;
+    float globalShadow = 0.;
+    float shadowLightCount = 0.;
 
 #include<lightFragment>[0..maxSimultaneousLights]
 
-// _____________________________ Environment ______________________________________
-#ifdef ENVIRONMENT
-    vec3 environmentColor = vec3(0., 0., 0.);
-
-    // Skybox Fetch.
-    vec3 environmentCoords = (vPositionW.xyz - vEyePosition.xyz);
-    #ifdef INVERTCUBICMAP
-            environmentCoords.y = 1.0 - environmentCoords.y;
-    #endif
-    // Rotate Environment
-    environmentCoords = vec3(environmentMatrix * vec4(environmentCoords, 0));
+#ifdef SHADOWINUSE
+    globalShadow /= shadowLightCount;
+#else
+    globalShadow = 1.0;
+#endif
 
-    #ifdef ENVIRONMENTBLUR
-        float environmentLOD = vEnvironmentInfo.y;
+// _____________________________ REFLECTION ______________________________________
+vec3 environmentColor = vec3(1., 1., 1.);
+#ifdef REFLECTION
+	vec3 reflectionVector = computeReflectionCoords(vec4(vPositionW, 1.0), normalW);
+	#ifdef REFLECTIONMAP_OPPOSITEZ
+		reflectionVector.z *= -1.0;
+	#endif
+
+	// _____________________________ 2D vs 3D Maps ________________________________
+	#ifdef REFLECTIONMAP_3D
+		vec3 reflectionCoords = reflectionVector;
+	#else
+		vec2 reflectionCoords = reflectionVector.xy;
+		#ifdef REFLECTIONMAP_PROJECTION
+			reflectionCoords /= reflectionVector.z;
+		#endif
+		reflectionCoords.y = 1.0 - reflectionCoords.y;
+	#endif
+
+    #ifdef REFLECTIONBLUR
+        float reflectionLOD = vReflectionInfos.y;
 
         #ifdef TEXTURELODSUPPORT
             // Apply environment convolution scale/offset filter tuning parameters to the mipmap LOD selection
-            environmentLOD = environmentLOD * log2(vEnvironmentMicrosurfaceInfos.x) * vEnvironmentMicrosurfaceInfos.y + vEnvironmentMicrosurfaceInfos.z;
-            environmentColor = sampleEnvironmentLod(environmentSampler, environmentCoords, environmentLOD).rgb;
+            reflectionLOD = reflectionLOD * log2(vReflectionMicrosurfaceInfos.x) * vReflectionMicrosurfaceInfos.y + vReflectionMicrosurfaceInfos.z;
+            environmentColor = sampleReflectionLod(reflectionSampler, reflectionCoords, reflectionLOD).rgb;
         #else
-            float lodEnvironmentNormalized = clamp(environmentLOD, 0., 1.);
-            float lodEnvironmentNormalizedDoubled = lodEnvironmentNormalized * 2.0;
+            float lodReflectionNormalized = clamp(reflectionLOD, 0., 1.);
+            float lodReflectionNormalizedDoubled = lodReflectionNormalized * 2.0;
 
-            vec3 environmentSpecularMid = sampleEnvironment(environmentSampler, environmentCoords).rgb;
-            if(lodEnvironmentNormalizedDoubled < 1.0){
+            vec3 reflectionSpecularMid = sampleReflection(reflectionSampler, reflectionCoords).rgb;
+            if(lodReflectionNormalizedDoubled < 1.0){
                 environmentColor = mix(
-                    sampleEnvironment(environmentSamplerHigh, environmentCoords).rgb,
-                    environmentSpecularMid,
-                    lodEnvironmentNormalizedDoubled
+                    sampleReflection(reflectionSamplerHigh, reflectionCoords).rgb,
+                    reflectionSpecularMid,
+                    lodReflectionNormalizedDoubled
                 );
             } else {
                 environmentColor = mix(
-                    environmentSpecularMid,
-                    sampleEnvironment(environmentSamplerLow, environmentCoords).rgb,
-                    lodEnvironmentNormalizedDoubled - 1.0
+                    reflectionSpecularMid,
+                    sampleReflection(reflectionSamplerLow, reflectionCoords).rgb,
+                    lodReflectionNormalizedDoubled - 1.0
                 );
             }
         #endif
     #else
-        environmentColor = sampleEnvironment(environmentSampler, environmentCoords).rgb;
+        environmentColor = sampleReflection(reflectionSampler, reflectionCoords).rgb;
     #endif
 
-    #ifdef GAMMAENVIRONMENT
+    #ifdef GAMMAREFLECTION
         environmentColor = toLinearSpace(environmentColor.rgb);
     #endif
 
     // _____________________________ Levels _____________________________________
-    environmentColor *= vEnvironmentInfo.x;
-
-    // _____________________________ Alpha Information _______________________________
-    #ifdef OPACITY
-        vec3 reflectEnvironmentColor = vec3(0., 0., 0.);
-        vec4 opacityMap = texture2D(opacitySampler, vOpacityUV);
-
-        #ifdef OPACITYRGB
-            float environmentMix = getLuminance(opacityMap.rgb);
-        #else
-            float environmentMix = opacityMap.a;
-        #endif
-
-        environmentMix *= vOpacityInfo.y;
-
-        #ifdef OPACITYFRESNEL
-            // TODO. Change by camera forward Direction.
-            float viewAngleToFloor = dot(normalW, normalize(vEyePosition));
+    environmentColor *= vReflectionInfos.x;
+#endif
 
-            // Fade out the floor plane as the angle between the floor and the camera tends to 0 (starting from startAngle)
-            const float startAngle = 0.1;
-            float fadeFactor = clamp(viewAngleToFloor/startAngle, 0.0, 1.0);
+// _____________________________ Alpha Information _______________________________
+vec3 groundColor = vec3(1., 1., 1.);
+float finalAlpha = alpha;
+#ifdef DIFFUSE
+    vec4 diffuseMap = texture2D(diffuseSampler, vDiffuseUV);
+    #ifdef GAMMADIFFUSE
+        diffuseMap.rgb = toLinearSpace(diffuseMap.rgb);
+    #endif
 
-            environmentMix *= fadeFactor * fadeFactor;
-            shadow = mix(1., shadow, environmentMix);
-        #endif
+// _____________________________ Levels _____________________________________
+    diffuseMap.rgb *= vDiffuseInfos.y;
 
-        // Cubic Fetch
-        vec3 viewDir = vPositionW.xyz - vEyePosition.xyz;
-        vec3 reflectEnvironmentCoords = reflect(viewDir, normalW);
-        #ifdef INVERTCUBICMAP
-            reflectEnvironmentCoords.y = 1.0 - reflectEnvironmentCoords.y;
-        #endif
-        // Rotate Environment
-        reflectEnvironmentCoords = vec3(environmentMatrix * vec4(reflectEnvironmentCoords, 0));
-
-        #ifdef ENVIRONMENTBLUR
-            #ifdef TEXTURELODSUPPORT
-                // Apply environment convolution scale/offset filter tuning parameters to the mipmap LOD selection
-                reflectEnvironmentColor = sampleEnvironmentLod(environmentSampler, reflectEnvironmentCoords, environmentLOD).rgb;
-            #else
-                vec3 reflectEnvironmentSpecularMid = sampleEnvironment(environmentSampler, reflectEnvironmentCoords).rgb;
-                if(lodEnvironmentNormalizedDoubled < 1.0){
-                    reflectEnvironmentColor = mix(
-                        sampleEnvironment(environmentSamplerHigh, reflectEnvironmentCoords).rgb,
-                        environmentSpecularMid,
-                        lodEnvironmentNormalizedDoubled
-                    );
-                } else {
-                    reflectEnvironmentColor = mix(
-                        environmentSpecularMid,
-                        sampleEnvironment(environmentSamplerLow, reflectEnvironmentCoords).rgb,
-                        lodEnvironmentNormalizedDoubled - 1.0
-                    );
-                }
-            #endif
-        #else
-            reflectEnvironmentColor = sampleEnvironment(environmentSampler, reflectEnvironmentCoords).rgb;
-        #endif
+    #ifdef DIFFUSEHASALPHA
+        finalAlpha *= diffuseMap.a;
+    #endif
 
-        #ifdef GAMMAENVIRONMENT
-            reflectEnvironmentColor = toLinearSpace(reflectEnvironmentColor.rgb);
-        #endif
+    groundColor = diffuseMap.rgb;
+#endif
 
-        // _____________________________ Levels _____________________________________
-        reflectEnvironmentColor *= vEnvironmentInfo.x;
+    // _____________________________ MIX ________________________________________
+    vec3 colorBase = environmentColor * groundColor;
+    colorBase = max(colorBase, 0.0);
 
-        // _____________________________ MIX ________________________________________
-        environmentColor = mix(environmentColor, reflectEnvironmentColor, environmentMix);
-    #endif
+    // ___________________________ COMPOSE _______________________________________
+#ifdef USERGBCOLOR
+    vec3 finalColor = colorBase;
 #else
-    vec3 environmentColor = vec3(1., 1., 1.);
+    vec3 finalColor = colorBase.r * vPrimaryColor.rgb * vPrimaryColor.a;
+    finalColor += colorBase.g * vSecondaryColor.rgb * vSecondaryColor.a;
+    finalColor += colorBase.b * vThirdColor.rgb * vThirdColor.a;
 #endif
 
-// _____________________________ Composition ____________________________________
-#ifdef RGBENVIRONMENT
-    environmentColor = vec3(1., 1., 1.) * getLuminance(environmentColor);
+#ifdef SHADOWINUSE
+    finalColor = mix(finalColor * shadowLevel, finalColor, globalShadow);
 #endif
 
-    // Might think of conserving energy here.
-    vec3 colorBase = environmentColor.r * vPrimaryColor.rgb * vPrimaryColor.a;
-    colorBase += environmentColor.g * vSecondaryColor.rgb * vSecondaryColor.a;
-    colorBase += environmentColor.b * vThirdColor.rgb * vThirdColor.a;
+#ifdef OPACITYFRESNEL
+    // TODO. Change by camera forward Direction.
+    float viewAngleToFloor = dot(normalW, normalize(vEyePosition));
 
-    colorBase = mix(colorBase * shadowLevel, colorBase, shadow);
+    // Fade out the floor plane as the angle between the floor and the camera tends to 0 (starting from startAngle)
+    const float startAngle = 0.1;
+    float fadeFactor = clamp(viewAngleToFloor/startAngle, 0.0, 1.0);
 
-    vec4 color = vec4(colorBase, 1.0);
+    finalAlpha *= fadeFactor * fadeFactor;
+#endif
+
+    vec4 color = vec4(colorBase, finalAlpha);
 
 #include<fogFragment>
 
@@ -240,5 +240,10 @@ void main(void) {
 	color = applyImageProcessing(color);
 #endif
 
+#ifdef PREMULTIPLYALPHA
+	// Convert to associative (premultiplied) format if needed.
+	color.rgb *= color.a;
+#endif
+
     gl_FragColor = color;
 }

materialsLibrary/src/background/background.vertex.fx

@@ -35,8 +35,8 @@ varying vec2 vMainUV1;
 varying vec2 vMainUV2; 
 #endif
 
-#if defined(OPACITY) && OPACITYDIRECTUV == 0
-varying vec2 vOpacityUV;
+#if defined(DIFFUSE) && DIFFUSEDIRECTUV == 0
+varying vec2 vDiffuseUV;
 #endif
 
 #include<clipPlaneVertexDeclaration>
@@ -44,8 +44,20 @@ varying vec2 vOpacityUV;
 #include<fogVertexDeclaration>
 #include<__decl__lightFragment>[0..maxSimultaneousLights]
 
+#ifdef REFLECTIONMAP_SKYBOX
+varying vec3 vPositionUVW;
+#endif
+
+#if defined(REFLECTIONMAP_EQUIRECTANGULAR_FIXED) || defined(REFLECTIONMAP_MIRROREDEQUIRECTANGULAR_FIXED)
+varying vec3 vDirectionW;
+#endif
+
 void main(void) {
 
+#ifdef REFLECTIONMAP_SKYBOX
+    vPositionUVW = position;
+#endif 
+
 #include<instancesVertex>
 #include<bonesVertex>
 
@@ -64,6 +76,10 @@ void main(void) {
 	vNormalW = normalize(normalWorld * normal);
 #endif
 
+#if defined(REFLECTIONMAP_EQUIRECTANGULAR_FIXED) || defined(REFLECTIONMAP_MIRROREDEQUIRECTANGULAR_FIXED)
+    vDirectionW = normalize(vec3(finalWorld * vec4(position, 0.0)));
+#endif
+
 #ifndef UV1
     vec2 uv = vec2(0., 0.);
 #endif
@@ -79,14 +95,14 @@ void main(void) {
 	vMainUV2 = uv2;
 #endif
 
-#if defined(OPACITY) && OPACITYDIRECTUV == 0 
-    if (vOpacityInfo.x == 0.)
+#if defined(DIFFUSE) && DIFFUSEDIRECTUV == 0 
+    if (vDiffuseInfos.x == 0.)
     {
-        vOpacityUV = vec2(opacityMatrix * vec4(uv, 1.0, 0.0));
+        vDiffuseUV = vec2(diffuseMatrix * vec4(uv, 1.0, 0.0));
     }
     else
     {
-        vOpacityUV = vec2(opacityMatrix * vec4(uv2, 1.0, 0.0));
+        vDiffuseUV = vec2(diffuseMatrix * vec4(uv2, 1.0, 0.0));
     }
 #endif
 

materialsLibrary/src/background/backgroundFragmentDeclaration.fx

@@ -2,13 +2,14 @@
     uniform vec4 vSecondaryColor;
     uniform vec4 vThirdColor;
     uniform float shadowLevel;
+    uniform float alpha;
 
-#ifdef OPACITY
-    uniform vec2 vOpacityInfo;
+#ifdef DIFFUSE
+    uniform vec2 vDiffuseInfos;
 #endif
 
-#ifdef ENVIRONMENT
-    uniform vec2 vEnvironmentInfo;
-    uniform mat4 environmentMatrix;
-    uniform vec3 vEnvironmentMicrosurfaceInfos;
+#ifdef REFLECTION
+    uniform vec2 vReflectionInfos;
+    uniform mat4 reflectionMatrix;
+    uniform vec3 vReflectionMicrosurfaceInfos;
 #endif

materialsLibrary/src/background/backgroundUboDeclaration.fx

@@ -5,14 +5,15 @@ uniform Material
 	uniform vec4 vPrimaryColor;
 	uniform vec4 vSecondaryColor;
 	uniform vec4 vThirdColor;
-	uniform vec2 vOpacityInfo;
-	uniform vec2 vEnvironmentInfo;
-	uniform mat4 opacityMatrix;
-	uniform mat4 environmentMatrix;
-	uniform vec3 vEnvironmentMicrosurfaceInfos;
+	uniform vec2 vDiffuseInfos;
+	uniform vec2 vReflectionInfos;
+	uniform mat4 diffuseMatrix;
+	uniform mat4 reflectionMatrix;
+	uniform vec3 vReflectionMicrosurfaceInfos;
 
 	uniform float pointSize;
 	uniform float shadowLevel;
+	uniform float alpha;
 };
 
 uniform Scene {

materialsLibrary/src/background/backgroundVertexDeclaration.fx

@@ -2,15 +2,15 @@ uniform mat4 view;
 uniform mat4 viewProjection;
 uniform float shadowLevel;
 
-#ifdef OPACITY
-uniform mat4 opacityMatrix;
-uniform vec2 vOpacityInfo;
+#ifdef DIFFUSE
+uniform mat4 diffuseMatrix;
+uniform vec2 vDiffuseInfos;
 #endif
 
-#ifdef ENVIRONMENT
-uniform vec2 vEnvironmentInfo;
-uniform mat4 environmentMatrix;
-uniform vec3 vEnvionmentMicrosurfaceInfos;
+#ifdef REFLECTION
+    uniform vec2 vReflectionInfos;
+    uniform mat4 reflectionMatrix;
+    uniform vec3 vReflectionMicrosurfaceInfos;
 #endif
 
 #ifdef POINTSIZE

materialsLibrary/test/addbackground.js

@@ -1,15 +1,14 @@
 window.prepareBackgroundMaterial = function() {
-	var back = new BABYLON.BackgroundMaterial("back", scene);
 	var backSky = new BABYLON.BackgroundMaterial("backSky", scene);
+	//var hdrTexture = new BABYLON.HDRCubeTexture("../assets/textures/hdr/environment.hdr", scene, 512);
+	var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("/playground/textures/environment.dds", scene);
+	hdrTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE
+	backSky.reflectionTexture = hdrTexture;
 	backSky.backFaceCulling = false;
-
-    var hdrTexture = new BABYLON.HDRCubeTexture("../assets/textures/hdr/environment.hdr", scene, 512);
-	back.environmentTexture = hdrTexture;
-	back.opacityTexture = new BABYLON.Texture("../assets/textures/amiga.jpg", scene);
-	back.opacityTexture.getAlphaFromRGB = true;
-	back.opacityTexture.uScale = 5;
-	back.opacityTexture.vScale = 5;
-	backSky.environmentTexture = hdrTexture;
+	
+	var back = new BABYLON.BackgroundMaterial("back", scene);
+	back.diffuseTexture = new BABYLON.Texture("/playground/textures/WhiteTransarentRamp.png", scene);
+	back.diffuseTexture.hasAlpha = true;
 
     // Skybox
     backgroundSkybox = BABYLON.Mesh.CreateBox("hdrSkyBox", 1000.0, scene);
@@ -100,11 +99,11 @@ window.prepareBackgroundMaterial = function() {
 		return back.thirdLevel;
 	});
 
-	registerRangeUI("background", "environmentBlur", 0, 1, function(value) {
-		back.environmentBlur = value;
-		backSky.environmentBlur = value;
+	registerRangeUI("background", "reflectionBlur", 0, 1, function(value) {
+		back.reflectionBlur = value;
+		backSky.reflectionBlur = value;
 	}, function() {
-		return back.environmentBlur;
+		return back.reflectionBlur;
 	});
 
 	registerRangeUI("background", "shadowLevel", 0, 1, function(value) {
@@ -114,5 +113,20 @@ window.prepareBackgroundMaterial = function() {
 		return back.shadowLevel;
 	});
 
+	registerRangeUI("background", "alpha", 0, 1, function(value) {
+		back.alpha = value;
+	}, function() {
+		return back.alpha;
+	});
+
+	registerButtonUI("background", "ToggleBackRGB", function() {
+		back.useRGBColor = !back.useRGBColor;
+	});
+
+	registerButtonUI("background", "ToggleSkyRGB", function() {
+		backSky.useRGBColor = !backSky.useRGBColor;
+	});
+
+
 	return back;
 }

src/Shaders/ShadersInclude/lightFragment.fx

@@ -54,6 +54,14 @@
 				#endif
 			#endif
 		#endif
+
+		#ifdef SHADOWONLY
+			#ifndef SHADOWINUSE
+				#define SHADOWINUSE
+			#endif
+			globalShadow += shadow;
+			shadowLightCount += 1.0;
+		#endif
 	#else
 		shadow = 1.;
 	#endif