New refraction channel for Standardd material

dist/preview release/what's new.md

@@ -1,5 +1,6 @@
 - 2.4.0:
   - **Major updates**
+    - New refraction channel for Standardd material. [See demo here](NEED FEATURE DEMO) ([deltakosh](https://github.com/deltakosh))
   - **Updates**
     - New OnPickTrigger support for spritesManager ([deltakosh](https://github.com/deltakosh))
   - **Bug fixes**

src/Loading/babylon.sceneLoader.js

@@ -39,6 +39,15 @@ var BABYLON;
             return this._registeredPlugins[this._registeredPlugins.length - 1];
         };
         // Public functions
+        SceneLoader.GetPluginForExtension = function (extension) {
+            for (var index = 0; index < this._registeredPlugins.length; index++) {
+                var plugin = this._registeredPlugins[index];
+                if (plugin.extensions.indexOf(extension) !== -1) {
+                    return plugin;
+                }
+            }
+            return null;
+        };
         SceneLoader.RegisterPlugin = function (plugin) {
             plugin.extensions = plugin.extensions.toLowerCase();
             SceneLoader._registeredPlugins.push(plugin);

src/Loading/babylon.sceneLoader.ts

@@ -52,6 +52,18 @@
         }
 
         // Public functions
+        public static GetPluginForExtension(extension: string): ISceneLoaderPlugin {
+            for (var index = 0; index < this._registeredPlugins.length; index++) {
+                var plugin = this._registeredPlugins[index];
+
+                if (plugin.extensions.indexOf(extension) !== -1) {
+                    return plugin;
+                }
+            }
+
+            return null;
+        }
+
         public static RegisterPlugin(plugin: ISceneLoaderPlugin): void {
             plugin.extensions = plugin.extensions.toLowerCase();
             SceneLoader._registeredPlugins.push(plugin);

src/Materials/babylon.standardMaterial.js

@@ -123,6 +123,7 @@ var BABYLON;
             this.REFLECTIONMAP_EQUIRECTANGULAR_FIXED = false;
             this.INVERTCUBICMAP = false;
             this.LOGARITHMICDEPTH = false;
+            this.REFRACTION = false;
             this._keys = Object.keys(this);
         }
         return StandardMaterialDefines;
@@ -144,6 +145,7 @@ var BABYLON;
             this.useSpecularOverAlpha = false;
             this.disableLighting = false;
             this.roughness = 0;
+            this.indexOfRefraction = 1.05;
             this.useLightmapAsShadowmap = false;
             this.useGlossinessFromSpecularMapAlpha = false;
             this._renderTargets = new BABYLON.SmartArray(16);
@@ -157,6 +159,9 @@ var BABYLON;
                 if (_this.reflectionTexture && _this.reflectionTexture.isRenderTarget) {
                     _this._renderTargets.push(_this.reflectionTexture);
                 }
+                if (_this.refractionTexture && _this.refractionTexture.isRenderTarget) {
+                    _this._renderTargets.push(_this.refractionTexture);
+                }
                 return _this._renderTargets;
             };
         }
@@ -443,14 +448,23 @@ var BABYLON;
                         this._defines.GLOSSINESS = this.useGlossinessFromSpecularMapAlpha;
                     }
                 }
-            }
-            if (scene.getEngine().getCaps().standardDerivatives && this.bumpTexture && StandardMaterial.BumpTextureEnabled) {
-                if (!this.bumpTexture.isReady()) {
-                    return false;
+                if (scene.getEngine().getCaps().standardDerivatives && this.bumpTexture && StandardMaterial.BumpTextureEnabled) {
+                    if (!this.bumpTexture.isReady()) {
+                        return false;
+                    }
+                    else {
+                        needUVs = true;
+                        this._defines.BUMP = true;
+                    }
                 }
-                else {
-                    needUVs = true;
-                    this._defines.BUMP = true;
+                if (this.refractionTexture && StandardMaterial.ReflectionTextureEnabled) {
+                    if (!this.refractionTexture.isReady()) {
+                        return false;
+                    }
+                    else {
+                        needUVs = true;
+                        this._defines.REFRACTION = true;
+                    }
                 }
             }
             // Effect
@@ -644,13 +658,13 @@ var BABYLON;
                     "vLightData2", "vLightDiffuse2", "vLightSpecular2", "vLightDirection2", "vLightGround2", "lightMatrix2",
                     "vLightData3", "vLightDiffuse3", "vLightSpecular3", "vLightDirection3", "vLightGround3", "lightMatrix3",
                     "vFogInfos", "vFogColor", "pointSize",
-                    "vDiffuseInfos", "vAmbientInfos", "vOpacityInfos", "vReflectionInfos", "vEmissiveInfos", "vSpecularInfos", "vBumpInfos", "vLightmapInfos",
+                    "vDiffuseInfos", "vAmbientInfos", "vOpacityInfos", "vReflectionInfos", "vEmissiveInfos", "vSpecularInfos", "vBumpInfos", "vLightmapInfos", "vRefractionInfos",
                     "mBones",
                     "vClipPlane", "diffuseMatrix", "ambientMatrix", "opacityMatrix", "reflectionMatrix", "emissiveMatrix", "specularMatrix", "bumpMatrix", "lightmapMatrix",
                     "shadowsInfo0", "shadowsInfo1", "shadowsInfo2", "shadowsInfo3", "depthValues",
                     "diffuseLeftColor", "diffuseRightColor", "opacityParts", "reflectionLeftColor", "reflectionRightColor", "emissiveLeftColor", "emissiveRightColor",
                     "logarithmicDepthConstant"
-                ], ["diffuseSampler", "ambientSampler", "opacitySampler", "reflectionCubeSampler", "reflection2DSampler", "emissiveSampler", "specularSampler", "bumpSampler", "lightmapSampler",
+                ], ["diffuseSampler", "ambientSampler", "opacitySampler", "reflectionCubeSampler", "reflection2DSampler", "emissiveSampler", "specularSampler", "bumpSampler", "lightmapSampler", "refractionSampler",
                     "shadowSampler0", "shadowSampler1", "shadowSampler2", "shadowSampler3"
                 ], join, fallbacks, this.onCompiled, this.onError);
             }
@@ -751,6 +765,10 @@ var BABYLON;
                         this._effect.setFloat2("vBumpInfos", this.bumpTexture.coordinatesIndex, 1.0 / this.bumpTexture.level);
                         this._effect.setMatrix("bumpMatrix", this.bumpTexture.getTextureMatrix());
                     }
+                    if (this.refractionTexture && StandardMaterial.RefractionEnabled) {
+                        this._effect.setTexture("refractionSampler", this.refractionTexture);
+                        this._effect.setFloat2("vRefractionInfos", this.refractionTexture.level, this.indexOfRefraction);
+                    }
                 }
                 // Clip plane
                 if (scene.clipPlane) {
@@ -816,6 +834,12 @@ var BABYLON;
             if (this.bumpTexture && this.bumpTexture.animations && this.bumpTexture.animations.length > 0) {
                 results.push(this.bumpTexture);
             }
+            if (this.lightmapTexture && this.lightmapTexture.animations && this.lightmapTexture.animations.length > 0) {
+                results.push(this.lightmapTexture);
+            }
+            if (this.refractionTexture && this.refractionTexture.animations && this.refractionTexture.animations.length > 0) {
+                results.push(this.refractionTexture);
+            }
             return results;
         };
         StandardMaterial.prototype.dispose = function (forceDisposeEffect) {
@@ -840,6 +864,12 @@ var BABYLON;
             if (this.bumpTexture) {
                 this.bumpTexture.dispose();
             }
+            if (this.lightmapTexture) {
+                this.lightmapTexture.dispose();
+            }
+            if (this.refractionTexture) {
+                this.refractionTexture.dispose();
+            }
             _super.prototype.dispose.call(this, forceDisposeEffect);
         };
         StandardMaterial.prototype.clone = function (name) {
@@ -872,6 +902,9 @@ var BABYLON;
                 newStandardMaterial.lightmapTexture = this.lightmapTexture.clone();
                 newStandardMaterial.useLightmapAsShadowmap = this.useLightmapAsShadowmap;
             }
+            if (this.refractionTexture && this.refractionTexture.clone) {
+                newStandardMaterial.refractionTexture = this.refractionTexture.clone();
+            }
             newStandardMaterial.ambientColor = this.ambientColor.clone();
             newStandardMaterial.diffuseColor = this.diffuseColor.clone();
             newStandardMaterial.specularColor = this.specularColor.clone();
@@ -943,6 +976,9 @@ var BABYLON;
             if (this.bumpTexture) {
                 serializationObject.bumpTexture = this.bumpTexture.serialize();
             }
+            if (this.refractionTexture) {
+                serializationObject.refractionTexture = this.refractionTexture.serialize();
+            }
             return serializationObject;
         };
         StandardMaterial.Parse = function (source, scene, rootUrl) {
@@ -999,6 +1035,9 @@ var BABYLON;
             if (source.bumpTexture) {
                 material.bumpTexture = BABYLON.Texture.Parse(source.bumpTexture, scene, rootUrl);
             }
+            if (source.refractionTexture) {
+                material.refractionTexture = BABYLON.Texture.Parse(source.refractionTexture, scene, rootUrl);
+            }
             if (source.checkReadyOnlyOnce) {
                 material.checkReadyOnlyOnce = source.checkReadyOnlyOnce;
             }
@@ -1017,6 +1056,7 @@ var BABYLON;
         StandardMaterial.BumpTextureEnabled = true;
         StandardMaterial.FresnelEnabled = true;
         StandardMaterial.LightmapEnabled = true;
+        StandardMaterial.RefractionEnabled = true;
         return StandardMaterial;
     })(BABYLON.Material);
     BABYLON.StandardMaterial = StandardMaterial;

src/Materials/babylon.standardMaterial.ts

@@ -121,6 +121,7 @@
         public REFLECTIONMAP_EQUIRECTANGULAR_FIXED = false;
         public INVERTCUBICMAP = false;
         public LOGARITHMICDEPTH = false;
+        public REFRACTION = false;
 
         constructor() {
             super();
@@ -137,6 +138,7 @@
         public specularTexture: BaseTexture;
         public bumpTexture: BaseTexture;
         public lightmapTexture: BaseTexture;
+        public refractionTexture: BaseTexture;
 
         public ambientColor = new Color3(0, 0, 0);
         public diffuseColor = new Color3(1, 1, 1);
@@ -152,6 +154,8 @@
 
         public roughness = 0;
 
+        public indexOfRefraction = 1.05;
+
         public useLightmapAsShadowmap = false;
 
         public diffuseFresnelParameters: FresnelParameters;
@@ -183,6 +187,10 @@
                     this._renderTargets.push(this.reflectionTexture);
                 }
 
+                if (this.refractionTexture && this.refractionTexture.isRenderTarget) {
+                    this._renderTargets.push(this.refractionTexture);
+                }
+
                 return this._renderTargets;
             }
         }
@@ -506,14 +514,23 @@
                         this._defines.GLOSSINESS = this.useGlossinessFromSpecularMapAlpha;
                     }
                 }
-            }
 
-            if (scene.getEngine().getCaps().standardDerivatives && this.bumpTexture && StandardMaterial.BumpTextureEnabled) {
-                if (!this.bumpTexture.isReady()) {
-                    return false;
-                } else {
-                    needUVs = true;
-                    this._defines.BUMP = true;
+                if (scene.getEngine().getCaps().standardDerivatives && this.bumpTexture && StandardMaterial.BumpTextureEnabled) {
+                    if (!this.bumpTexture.isReady()) {
+                        return false;
+                    } else {
+                        needUVs = true;
+                        this._defines.BUMP = true;
+                    }
+                }
+
+                if (this.refractionTexture && StandardMaterial.ReflectionTextureEnabled) {
+                    if (!this.refractionTexture.isReady()) {
+                        return false;
+                    } else {
+                        needUVs = true;
+                        this._defines.REFRACTION = true;
+                    }
                 }
             }
 
@@ -758,14 +775,14 @@
                         "vLightData2", "vLightDiffuse2", "vLightSpecular2", "vLightDirection2", "vLightGround2", "lightMatrix2",
                         "vLightData3", "vLightDiffuse3", "vLightSpecular3", "vLightDirection3", "vLightGround3", "lightMatrix3",
                         "vFogInfos", "vFogColor", "pointSize",
-                        "vDiffuseInfos", "vAmbientInfos", "vOpacityInfos", "vReflectionInfos", "vEmissiveInfos", "vSpecularInfos", "vBumpInfos", "vLightmapInfos",
+                        "vDiffuseInfos", "vAmbientInfos", "vOpacityInfos", "vReflectionInfos", "vEmissiveInfos", "vSpecularInfos", "vBumpInfos", "vLightmapInfos", "vRefractionInfos",
                         "mBones",
                         "vClipPlane", "diffuseMatrix", "ambientMatrix", "opacityMatrix", "reflectionMatrix", "emissiveMatrix", "specularMatrix", "bumpMatrix", "lightmapMatrix",
-                        "shadowsInfo0", "shadowsInfo1", "shadowsInfo2", "shadowsInfo3", "depthValues", 
+                        "shadowsInfo0", "shadowsInfo1", "shadowsInfo2", "shadowsInfo3", "depthValues",
                         "diffuseLeftColor", "diffuseRightColor", "opacityParts", "reflectionLeftColor", "reflectionRightColor", "emissiveLeftColor", "emissiveRightColor",
                         "logarithmicDepthConstant"
                     ],
-                    ["diffuseSampler", "ambientSampler", "opacitySampler", "reflectionCubeSampler", "reflection2DSampler", "emissiveSampler", "specularSampler", "bumpSampler", "lightmapSampler",
+                    ["diffuseSampler", "ambientSampler", "opacitySampler", "reflectionCubeSampler", "reflection2DSampler", "emissiveSampler", "specularSampler", "bumpSampler", "lightmapSampler", "refractionSampler",
                         "shadowSampler0", "shadowSampler1", "shadowSampler2", "shadowSampler3"
                     ],
                     join, fallbacks, this.onCompiled, this.onError);
@@ -898,6 +915,12 @@
                         this._effect.setFloat2("vBumpInfos", this.bumpTexture.coordinatesIndex, 1.0 / this.bumpTexture.level);
                         this._effect.setMatrix("bumpMatrix", this.bumpTexture.getTextureMatrix());
                     }
+
+                    if (this.refractionTexture && StandardMaterial.RefractionEnabled) {
+                        this._effect.setTexture("refractionSampler", this.refractionTexture);
+
+                        this._effect.setFloat2("vRefractionInfos", this.refractionTexture.level, this.indexOfRefraction);
+                    }
                 }
 
                 // Clip plane
@@ -922,7 +945,7 @@
                 }
                 this._effect.setColor3("vEmissiveColor", this.emissiveColor);
             }
-            
+
             if (scene.getCachedMaterial() !== this || !this.isFrozen) {
                 // Diffuse
                 this._effect.setColor4("vDiffuseColor", this.diffuseColor, this.alpha * mesh.visibility);
@@ -983,6 +1006,14 @@
                 results.push(this.bumpTexture);
             }
 
+            if (this.lightmapTexture && this.lightmapTexture.animations && this.lightmapTexture.animations.length > 0) {
+                results.push(this.lightmapTexture);
+            }
+
+            if (this.refractionTexture && this.refractionTexture.animations && this.refractionTexture.animations.length > 0) {
+                results.push(this.refractionTexture);
+            }
+
             return results;
         }
 
@@ -1015,6 +1046,14 @@
                 this.bumpTexture.dispose();
             }
 
+            if (this.lightmapTexture) {
+                this.lightmapTexture.dispose();
+            }
+
+            if (this.refractionTexture) {
+                this.refractionTexture.dispose();
+            }
+
             super.dispose(forceDisposeEffect);
         }
 
@@ -1050,6 +1089,9 @@
                 newStandardMaterial.lightmapTexture = this.lightmapTexture.clone();
                 newStandardMaterial.useLightmapAsShadowmap = this.useLightmapAsShadowmap;
             }
+            if (this.refractionTexture && this.refractionTexture.clone) {
+                newStandardMaterial.refractionTexture = this.refractionTexture.clone();
+            }
 
             newStandardMaterial.ambientColor = this.ambientColor.clone();
             newStandardMaterial.diffuseColor = this.diffuseColor.clone();
@@ -1139,6 +1181,10 @@
                 serializationObject.bumpTexture = this.bumpTexture.serialize();
             }
 
+            if (this.refractionTexture) {
+                serializationObject.refractionTexture = this.refractionTexture.serialize();
+            }
+
             return serializationObject;
         }
 
@@ -1153,6 +1199,7 @@
         public static BumpTextureEnabled = true;
         public static FresnelEnabled = true;
         public static LightmapEnabled = true;
+        public static RefractionEnabled = true;
 
         public static Parse(source: any, scene: Scene, rootUrl: string): StandardMaterial {
             var material = new StandardMaterial(source.name, scene);
@@ -1226,6 +1273,10 @@
                 material.bumpTexture = Texture.Parse(source.bumpTexture, scene, rootUrl);
             }
 
+            if (source.refractionTexture) {
+                material.refractionTexture = Texture.Parse(source.refractionTexture, scene, rootUrl);
+            }
+
             if (source.checkReadyOnlyOnce) {
                 material.checkReadyOnlyOnce = source.checkReadyOnlyOnce;
             }

src/PostProcess/babylon.tonemapPostProcess.js

@@ -20,7 +20,7 @@ var BABYLON;
             if (samplingMode === void 0) { samplingMode = BABYLON.Texture.BILINEAR_SAMPLINGMODE; }
             if (textureFormat === void 0) { textureFormat = BABYLON.Engine.TEXTURETYPE_UNSIGNED_INT; }
             this._operator = operator;
-            this._exposureAdjustment = exposureAdjustment;
+            this.exposureAdjustment = exposureAdjustment;
             var params = ["_ExposureAdjustment"];
             var defines = "#define ";
             if (operator === TonemappingOperator.Hable)
@@ -33,7 +33,7 @@ var BABYLON;
                 defines += "PHOTOGRAPHIC_TONEMAPPING";
             _super.call(this, name, "tonemap", params, null, 1.0, camera, samplingMode, engine, true, defines, textureFormat);
             this.onApply = function (effect) {
-                effect.setFloat("_ExposureAdjustment", _this._exposureAdjustment);
+                effect.setFloat("_ExposureAdjustment", _this.exposureAdjustment);
             };
         }
         return TonemapPostProcess;

src/PostProcess/babylon.tonemapPostProcess.ts

@@ -11,12 +11,12 @@
     export class TonemapPostProcess extends PostProcess
     {
         private _operator : TonemappingOperator;
-        private _exposureAdjustment : number;
+        public exposureAdjustment : number;
 
         constructor(name: string, operator: TonemappingOperator, exposureAdjustment: number, camera: Camera, samplingMode: number = Texture.BILINEAR_SAMPLINGMODE, engine?: Engine, textureFormat = Engine.TEXTURETYPE_UNSIGNED_INT)
         {
             this._operator = operator;
-            this._exposureAdjustment = exposureAdjustment;
+            this.exposureAdjustment = exposureAdjustment;
 
             var params = ["_ExposureAdjustment"];
             var defines = "#define ";
@@ -34,7 +34,7 @@
 
             this.onApply = (effect: Effect) =>
             {
-                effect.setFloat("_ExposureAdjustment", this._exposureAdjustment);
+                effect.setFloat("_ExposureAdjustment", this.exposureAdjustment);
             };
         }
     }

src/Shaders/default.fragment.fx

@@ -154,6 +154,11 @@ uniform vec2 vLightmapInfos;
 uniform sampler2D lightmapSampler;
 #endif
 
+#ifdef REFRACTION
+uniform vec2 vRefractionInfos;
+uniform samplerCube refractionSampler;
+#endif
+
 #if defined(SPECULAR) && defined(SPECULARTERM)
 varying vec2 vSpecularUV;
 uniform vec2 vSpecularInfos;
@@ -847,6 +852,20 @@ void main(void) {
 #endif
 #endif
 
+	// Refraction http://www.babylonjs-playground.com/#22KZUW#0
+	vec3 refractionColor = vec3(0., 0., 0.);
+
+#ifdef REFRACTION
+	vec3 refractionVector = normalize(refract(-viewDirectionW, normalW, vRefractionInfos.y));
+
+	refractionVector.y = -refractionVector.y;
+
+	if (dot(refractionVector, viewDirectionW) < 0.01)
+	{
+		refractionColor = textureCube(refractionSampler, refractionVector).rgb * vRefractionInfos.x;
+	}
+#endif
+
 	// Reflection
 	vec3 reflectionColor = vec3(0., 0., 0.);
 
@@ -961,9 +980,9 @@ void main(void) {
 
 	// Composition
 #ifdef EMISSIVEASILLUMINATION
-	vec4 color = vec4(clamp(finalDiffuse * baseAmbientColor + finalSpecular + reflectionColor + emissiveColor, 0.0, 1.0), alpha);
+	vec4 color = vec4(clamp(finalDiffuse * baseAmbientColor + finalSpecular + reflectionColor + emissiveColor + refractionColor, 0.0, 1.0), alpha);
 #else
-	vec4 color = vec4(finalDiffuse * baseAmbientColor + finalSpecular + reflectionColor, alpha);
+	vec4 color = vec4(finalDiffuse * baseAmbientColor + finalSpecular + reflectionColor + refractionColor, alpha);
 #endif
 
 #ifdef LIGHTMAP

src/babylon.scene.js

@@ -1173,7 +1173,7 @@ var BABYLON;
                     if (material.getRenderTargetTextures) {
                         if (this._processedMaterials.indexOf(material) === -1) {
                             this._processedMaterials.push(material);
-                            this._renderTargets.concat(material.getRenderTargetTextures());
+                            this._renderTargets.concatWithNoDuplicate(material.getRenderTargetTextures());
                         }
                     }
                     // Dispatch

src/babylon.scene.ts

@@ -1490,7 +1490,7 @@
                         if (this._processedMaterials.indexOf(material) === -1) {
                             this._processedMaterials.push(material);
 
-                            this._renderTargets.concat(material.getRenderTargetTextures());
+                            this._renderTargets.concatWithNoDuplicate(material.getRenderTargetTextures());
                         }
                     }