Introducing RefractionTexture

dist/preview release/what's new.md

@@ -1,6 +1,6 @@
 - 2.4.0:
   - **Major updates**
-    - New refraction channel for Standard material (including fresnel support). [See demo here](http://www.babylonjs.com/Demos/refraction/) ([deltakosh](https://github.com/deltakosh))
+    - New refraction channel for Standard material (including fresnel support). Refraction texture can be provided by a reflection probe or a refraction texture. [See demo here](http://www.babylonjs.com/Demos/refraction/) ([deltakosh](https://github.com/deltakosh))
   - **Updates**
     - New OnPickTrigger support for spritesManager ([deltakosh](https://github.com/deltakosh))
     - New SPS method `digest()` ([jerome](https://github.com/jbousquie))

src/Debug/babylon.debugLayer.js

@@ -249,7 +249,8 @@ var BABYLON;
             BABYLON.StandardMaterial.BumpTextureEnabled = true;
             BABYLON.StandardMaterial.OpacityTextureEnabled = true;
             BABYLON.StandardMaterial.ReflectionTextureEnabled = true;
-            BABYLON.StandardMaterial.LightmapEnabled = true;
+            BABYLON.StandardMaterial.LightmapTextureEnabled = true;
+            BABYLON.StandardMaterial.RefractionTextureEnabled = true;
             this._scene.shadowsEnabled = true;
             this._scene.particlesEnabled = true;
             this._scene.postProcessesEnabled = true;
@@ -518,8 +519,9 @@ var BABYLON;
                 this._generateCheckBox(this._optionsSubsetDiv, "Bump", BABYLON.StandardMaterial.BumpTextureEnabled, function (element) { BABYLON.StandardMaterial.BumpTextureEnabled = element.checked; });
                 this._generateCheckBox(this._optionsSubsetDiv, "Opacity", BABYLON.StandardMaterial.OpacityTextureEnabled, function (element) { BABYLON.StandardMaterial.OpacityTextureEnabled = element.checked; });
                 this._generateCheckBox(this._optionsSubsetDiv, "Reflection", BABYLON.StandardMaterial.ReflectionTextureEnabled, function (element) { BABYLON.StandardMaterial.ReflectionTextureEnabled = element.checked; });
+                this._generateCheckBox(this._optionsSubsetDiv, "Refraction", BABYLON.StandardMaterial.RefractionTextureEnabled, function (element) { BABYLON.StandardMaterial.RefractionTextureEnabled = element.checked; });
+                this._generateCheckBox(this._optionsSubsetDiv, "Lightmap", BABYLON.StandardMaterial.LightmapTextureEnabled, function (element) { BABYLON.StandardMaterial.LightmapTextureEnabled = element.checked; });
                 this._generateCheckBox(this._optionsSubsetDiv, "Fresnel", BABYLON.StandardMaterial.FresnelEnabled, function (element) { BABYLON.StandardMaterial.FresnelEnabled = element.checked; });
-                this._generateCheckBox(this._optionsSubsetDiv, "Lightmap", BABYLON.StandardMaterial.LightmapEnabled, function (element) { BABYLON.StandardMaterial.LightmapEnabled = element.checked; });
                 this._optionsSubsetDiv.appendChild(document.createElement("br"));
                 this._generateTexBox(this._optionsSubsetDiv, "<b>Options:</b>", this.accentColor);
                 this._generateCheckBox(this._optionsSubsetDiv, "Animations", this._scene.animationsEnabled, function (element) { _this._scene.animationsEnabled = element.checked; });

src/Debug/babylon.debugLayer.ts

@@ -353,7 +353,8 @@
             StandardMaterial.BumpTextureEnabled = true;
             StandardMaterial.OpacityTextureEnabled = true;
             StandardMaterial.ReflectionTextureEnabled = true;
-            StandardMaterial.LightmapEnabled = true;
+            StandardMaterial.LightmapTextureEnabled = true;
+            StandardMaterial.RefractionTextureEnabled = true;
 
             this._scene.shadowsEnabled = true;
             this._scene.particlesEnabled = true;
@@ -661,8 +662,9 @@
                 this._generateCheckBox(this._optionsSubsetDiv, "Bump", StandardMaterial.BumpTextureEnabled, (element) => { StandardMaterial.BumpTextureEnabled = element.checked });
                 this._generateCheckBox(this._optionsSubsetDiv, "Opacity", StandardMaterial.OpacityTextureEnabled, (element) => { StandardMaterial.OpacityTextureEnabled = element.checked });
                 this._generateCheckBox(this._optionsSubsetDiv, "Reflection", StandardMaterial.ReflectionTextureEnabled, (element) => { StandardMaterial.ReflectionTextureEnabled = element.checked });
+                this._generateCheckBox(this._optionsSubsetDiv, "Refraction", StandardMaterial.RefractionTextureEnabled, (element) => { StandardMaterial.RefractionTextureEnabled = element.checked });
+                this._generateCheckBox(this._optionsSubsetDiv, "Lightmap", StandardMaterial.LightmapTextureEnabled, (element) => { StandardMaterial.LightmapTextureEnabled = element.checked });
                 this._generateCheckBox(this._optionsSubsetDiv, "Fresnel", StandardMaterial.FresnelEnabled, (element) => { StandardMaterial.FresnelEnabled = element.checked });
-                this._generateCheckBox(this._optionsSubsetDiv, "Lightmap", StandardMaterial.LightmapEnabled, (element) => { StandardMaterial.LightmapEnabled = element.checked });
                 this._optionsSubsetDiv.appendChild(document.createElement("br"));
                 this._generateTexBox(this._optionsSubsetDiv, "<b>Options:</b>", this.accentColor);
                 this._generateCheckBox(this._optionsSubsetDiv, "Animations", this._scene.animationsEnabled, (element) => { this._scene.animationsEnabled = element.checked });

src/Materials/Textures/babylon.mirrorTexture.js

@@ -51,4 +51,42 @@ var BABYLON;
         return MirrorTexture;
     })(BABYLON.RenderTargetTexture);
     BABYLON.MirrorTexture = MirrorTexture;
+    var RefractionTexture = (function (_super) {
+        __extends(RefractionTexture, _super);
+        function RefractionTexture(name, size, scene, generateMipMaps) {
+            var _this = this;
+            _super.call(this, name, size, scene, generateMipMaps, true);
+            this.refractionPlane = new BABYLON.Plane(0, 1, 0, 1);
+            this.depth = 2.0;
+            this.onBeforeRender = function () {
+                scene.clipPlane = _this.refractionPlane;
+            };
+            this.onAfterRender = function () {
+                delete scene.clipPlane;
+            };
+        }
+        RefractionTexture.prototype.clone = function () {
+            var textureSize = this.getSize();
+            var newTexture = new RefractionTexture(this.name, textureSize.width, this.getScene(), this._generateMipMaps);
+            // Base texture
+            newTexture.hasAlpha = this.hasAlpha;
+            newTexture.level = this.level;
+            // Refraction Texture
+            newTexture.refractionPlane = this.refractionPlane.clone();
+            newTexture.renderList = this.renderList.slice(0);
+            newTexture.depth = this.depth;
+            return newTexture;
+        };
+        RefractionTexture.prototype.serialize = function () {
+            if (!this.name) {
+                return null;
+            }
+            var serializationObject = _super.prototype.serialize.call(this);
+            serializationObject.mirrorPlane = this.refractionPlane.asArray();
+            serializationObject.depth = this.depth;
+            return serializationObject;
+        };
+        return RefractionTexture;
+    })(BABYLON.RenderTargetTexture);
+    BABYLON.RefractionTexture = RefractionTexture;
 })(BABYLON || (BABYLON = {}));

src/Materials/Textures/babylon.mirrorTexture.ts

@@ -60,4 +60,56 @@
             return serializationObject;
         }
     }
+
+    /**
+    * Creates a refraction texture used by refraction channel of the standard material.
+    * @param name the texture name
+    * @param size size of the underlying texture
+    * @param scene root scene
+    */
+    export class RefractionTexture extends RenderTargetTexture {
+        public refractionPlane = new Plane(0, 1, 0, 1);
+        public depth = 2.0;
+
+        constructor(name: string, size: number, scene: Scene, generateMipMaps?: boolean) {
+            super(name, size, scene, generateMipMaps, true);
+
+            this.onBeforeRender = () => {
+                scene.clipPlane = this.refractionPlane;
+            }
+
+            this.onAfterRender = () => {
+                delete scene.clipPlane;
+            }
+        }
+
+        public clone(): RefractionTexture {
+            var textureSize = this.getSize();
+            var newTexture = new RefractionTexture(this.name, textureSize.width, this.getScene(), this._generateMipMaps);
+
+            // Base texture
+            newTexture.hasAlpha = this.hasAlpha;
+            newTexture.level = this.level;
+
+            // Refraction Texture
+            newTexture.refractionPlane = this.refractionPlane.clone();
+            newTexture.renderList = this.renderList.slice(0);
+            newTexture.depth = this.depth;
+
+            return newTexture;
+        }
+
+        public serialize(): any {
+            if (!this.name) {
+                return null;
+            }
+
+            var serializationObject = super.serialize();
+
+            serializationObject.mirrorPlane = this.refractionPlane.asArray();
+            serializationObject.depth = this.depth;
+
+            return serializationObject;
+        }
+    }
 } 

src/Materials/babylon.standardMaterial.js

@@ -125,6 +125,7 @@ var BABYLON;
             this.INVERTCUBICMAP = false;
             this.LOGARITHMICDEPTH = false;
             this.REFRACTION = false;
+            this.REFRACTIONMAP_3D = false;
             this._keys = Object.keys(this);
         }
         return StandardMaterialDefines;
@@ -429,7 +430,7 @@ var BABYLON;
                         this._defines.EMISSIVE = true;
                     }
                 }
-                if (this.lightmapTexture && StandardMaterial.LightmapEnabled) {
+                if (this.lightmapTexture && StandardMaterial.LightmapTextureEnabled) {
                     if (!this.lightmapTexture.isReady()) {
                         return false;
                     }
@@ -458,13 +459,14 @@ var BABYLON;
                         this._defines.BUMP = true;
                     }
                 }
-                if (this.refractionTexture && StandardMaterial.ReflectionTextureEnabled) {
+                if (this.refractionTexture && StandardMaterial.RefractionTextureEnabled) {
                     if (!this.refractionTexture.isReady()) {
                         return false;
                     }
                     else {
                         needUVs = true;
                         this._defines.REFRACTION = true;
+                        this._defines.REFRACTIONMAP_3D = this.refractionTexture.isCube;
                     }
                 }
             }
@@ -665,11 +667,11 @@ var BABYLON;
                     "vFogInfos", "vFogColor", "pointSize",
                     "vDiffuseInfos", "vAmbientInfos", "vOpacityInfos", "vReflectionInfos", "vEmissiveInfos", "vSpecularInfos", "vBumpInfos", "vLightmapInfos", "vRefractionInfos",
                     "mBones",
-                    "vClipPlane", "diffuseMatrix", "ambientMatrix", "opacityMatrix", "reflectionMatrix", "emissiveMatrix", "specularMatrix", "bumpMatrix", "lightmapMatrix",
+                    "vClipPlane", "diffuseMatrix", "ambientMatrix", "opacityMatrix", "reflectionMatrix", "emissiveMatrix", "specularMatrix", "bumpMatrix", "lightmapMatrix", "refractionMatrix",
                     "shadowsInfo0", "shadowsInfo1", "shadowsInfo2", "shadowsInfo3", "depthValues",
                     "diffuseLeftColor", "diffuseRightColor", "opacityParts", "reflectionLeftColor", "reflectionRightColor", "emissiveLeftColor", "emissiveRightColor", "refractionLeftColor", "refractionRightColor",
                     "logarithmicDepthConstant"
-                ], ["diffuseSampler", "ambientSampler", "opacitySampler", "reflectionCubeSampler", "reflection2DSampler", "emissiveSampler", "specularSampler", "bumpSampler", "lightmapSampler", "refractionSampler",
+                ], ["diffuseSampler", "ambientSampler", "opacitySampler", "reflectionCubeSampler", "reflection2DSampler", "emissiveSampler", "specularSampler", "bumpSampler", "lightmapSampler", "refractionCubeSampler", "refraction2DSampler",
                     "shadowSampler0", "shadowSampler1", "shadowSampler2", "shadowSampler3"
                 ], join, fallbacks, this.onCompiled, this.onError);
             }
@@ -690,6 +692,9 @@ var BABYLON;
             if (this.reflectionTexture && this.reflectionTexture.isRenderTarget) {
                 this._effect.setTexture("reflection2DSampler", null);
             }
+            if (this.refractionTexture && this.refractionTexture.isRenderTarget) {
+                this._effect.setTexture("refraction2DSampler", null);
+            }
             _super.prototype.unbind.call(this);
         };
         StandardMaterial.prototype.bindOnlyWorldMatrix = function (world) {
@@ -759,7 +764,7 @@ var BABYLON;
                         this._effect.setFloat2("vEmissiveInfos", this.emissiveTexture.coordinatesIndex, this.emissiveTexture.level);
                         this._effect.setMatrix("emissiveMatrix", this.emissiveTexture.getTextureMatrix());
                     }
-                    if (this.lightmapTexture && StandardMaterial.LightmapEnabled) {
+                    if (this.lightmapTexture && StandardMaterial.LightmapTextureEnabled) {
                         this._effect.setTexture("lightmapSampler", this.lightmapTexture);
                         this._effect.setFloat2("vLightmapInfos", this.lightmapTexture.coordinatesIndex, this.lightmapTexture.level);
                         this._effect.setMatrix("lightmapMatrix", this.lightmapTexture.getTextureMatrix());
@@ -774,9 +779,19 @@ 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);
+                    if (this.refractionTexture && StandardMaterial.RefractionTextureEnabled) {
+                        var depth = 1.0;
+                        if (this.refractionTexture.isCube) {
+                            this._effect.setTexture("refractionCubeSampler", this.refractionTexture);
+                        }
+                        else {
+                            this._effect.setTexture("refraction2DSampler", this.refractionTexture);
+                            this._effect.setMatrix("refractionMatrix", this.refractionTexture.getReflectionTextureMatrix());
+                            if (this.refractionTexture.depth) {
+                                depth = this.refractionTexture.depth;
+                            }
+                        }
+                        this._effect.setFloat3("vRefractionInfos", this.refractionTexture.level, this.indexOfRefraction, depth);
                     }
                 }
                 // Clip plane
@@ -805,7 +820,7 @@ var BABYLON;
                     StandardMaterial.BindLights(scene, mesh, this._effect, this._defines);
                 }
                 // View
-                if (scene.fogEnabled && mesh.applyFog && scene.fogMode !== BABYLON.Scene.FOGMODE_NONE || this.reflectionTexture) {
+                if (scene.fogEnabled && mesh.applyFog && scene.fogMode !== BABYLON.Scene.FOGMODE_NONE || this.reflectionTexture || this.refractionTexture) {
                     this._effect.setMatrix("view", scene.getViewMatrix());
                 }
                 // Fog
@@ -1073,8 +1088,8 @@ var BABYLON;
         StandardMaterial.SpecularTextureEnabled = true;
         StandardMaterial.BumpTextureEnabled = true;
         StandardMaterial.FresnelEnabled = true;
-        StandardMaterial.LightmapEnabled = true;
-        StandardMaterial.RefractionEnabled = true;
+        StandardMaterial.LightmapTextureEnabled = true;
+        StandardMaterial.RefractionTextureEnabled = true;
         return StandardMaterial;
     })(BABYLON.Material);
     BABYLON.StandardMaterial = StandardMaterial;

src/Materials/babylon.standardMaterial.ts

@@ -123,6 +123,7 @@
         public INVERTCUBICMAP = false;
         public LOGARITHMICDEPTH = false;
         public REFRACTION = false;
+        public REFRACTIONMAP_3D = false;
 
         constructor() {
             super();
@@ -497,7 +498,7 @@
                     }
                 }
 
-                if (this.lightmapTexture && StandardMaterial.LightmapEnabled) {
+                if (this.lightmapTexture && StandardMaterial.LightmapTextureEnabled) {
                     if (!this.lightmapTexture.isReady()) {
                         return false;
                     } else {
@@ -526,12 +527,14 @@
                     }
                 }
 
-                if (this.refractionTexture && StandardMaterial.ReflectionTextureEnabled) {
+                if (this.refractionTexture && StandardMaterial.RefractionTextureEnabled) {
                     if (!this.refractionTexture.isReady()) {
                         return false;
                     } else {
                         needUVs = true;
                         this._defines.REFRACTION = true;
+
+                        this._defines.REFRACTIONMAP_3D = this.refractionTexture.isCube;
                     }
                 }
             }
@@ -784,12 +787,12 @@
                         "vFogInfos", "vFogColor", "pointSize",
                         "vDiffuseInfos", "vAmbientInfos", "vOpacityInfos", "vReflectionInfos", "vEmissiveInfos", "vSpecularInfos", "vBumpInfos", "vLightmapInfos", "vRefractionInfos",
                         "mBones",
-                        "vClipPlane", "diffuseMatrix", "ambientMatrix", "opacityMatrix", "reflectionMatrix", "emissiveMatrix", "specularMatrix", "bumpMatrix", "lightmapMatrix",
+                        "vClipPlane", "diffuseMatrix", "ambientMatrix", "opacityMatrix", "reflectionMatrix", "emissiveMatrix", "specularMatrix", "bumpMatrix", "lightmapMatrix", "refractionMatrix",
                         "shadowsInfo0", "shadowsInfo1", "shadowsInfo2", "shadowsInfo3", "depthValues",
                         "diffuseLeftColor", "diffuseRightColor", "opacityParts", "reflectionLeftColor", "reflectionRightColor", "emissiveLeftColor", "emissiveRightColor", "refractionLeftColor", "refractionRightColor",
                         "logarithmicDepthConstant"
                     ],
-                    ["diffuseSampler", "ambientSampler", "opacitySampler", "reflectionCubeSampler", "reflection2DSampler", "emissiveSampler", "specularSampler", "bumpSampler", "lightmapSampler", "refractionSampler",
+                    ["diffuseSampler", "ambientSampler", "opacitySampler", "reflectionCubeSampler", "reflection2DSampler", "emissiveSampler", "specularSampler", "bumpSampler", "lightmapSampler", "refractionCubeSampler", "refraction2DSampler",
                         "shadowSampler0", "shadowSampler1", "shadowSampler2", "shadowSampler3"
                     ],
                     join, fallbacks, this.onCompiled, this.onError);
@@ -818,6 +821,10 @@
                 this._effect.setTexture("reflection2DSampler", null);
             }
 
+            if (this.refractionTexture && this.refractionTexture.isRenderTarget) {
+                this._effect.setTexture("refraction2DSampler", null);
+            }
+
             super.unbind();
         }
 
@@ -907,7 +914,7 @@
                         this._effect.setMatrix("emissiveMatrix", this.emissiveTexture.getTextureMatrix());
                     }
 
-                    if (this.lightmapTexture && StandardMaterial.LightmapEnabled) {
+                    if (this.lightmapTexture && StandardMaterial.LightmapTextureEnabled) {
                         this._effect.setTexture("lightmapSampler", this.lightmapTexture);
 
                         this._effect.setFloat2("vLightmapInfos", this.lightmapTexture.coordinatesIndex, this.lightmapTexture.level);
@@ -928,10 +935,19 @@
                         this._effect.setMatrix("bumpMatrix", this.bumpTexture.getTextureMatrix());
                     }
 
-                    if (this.refractionTexture && StandardMaterial.RefractionEnabled) {
-                        this._effect.setTexture("refractionSampler", this.refractionTexture);
+                    if (this.refractionTexture && StandardMaterial.RefractionTextureEnabled) {
+                        var depth = 1.0;
+                        if (this.refractionTexture.isCube) {
+                            this._effect.setTexture("refractionCubeSampler", this.refractionTexture);
+                        } else {
+                            this._effect.setTexture("refraction2DSampler", this.refractionTexture);
+                            this._effect.setMatrix("refractionMatrix", this.refractionTexture.getReflectionTextureMatrix());
 
-                        this._effect.setFloat2("vRefractionInfos", this.refractionTexture.level, this.indexOfRefraction);
+                            if ((<any>this.refractionTexture).depth) {
+                                depth = (<any>this.refractionTexture).depth;
+                            }
+                        }
+                        this._effect.setFloat3("vRefractionInfos", this.refractionTexture.level, this.indexOfRefraction, depth);
                     }
                 }
 
@@ -968,7 +984,7 @@
                 }
 
                 // View
-                if (scene.fogEnabled && mesh.applyFog && scene.fogMode !== Scene.FOGMODE_NONE || this.reflectionTexture) {
+                if (scene.fogEnabled && mesh.applyFog && scene.fogMode !== Scene.FOGMODE_NONE || this.reflectionTexture || this.refractionTexture) {
                     this._effect.setMatrix("view", scene.getViewMatrix());
                 }
 
@@ -1217,8 +1233,8 @@
         public static SpecularTextureEnabled = true;
         public static BumpTextureEnabled = true;
         public static FresnelEnabled = true;
-        public static LightmapEnabled = true;
-        public static RefractionEnabled = true;
+        public static LightmapTextureEnabled = true;
+        public static RefractionTextureEnabled = true;
 
         public static Parse(source: any, scene: Scene, rootUrl: string): StandardMaterial {
             var material = new StandardMaterial(source.name, scene);

src/Shaders/default.fragment.fx

@@ -154,9 +154,19 @@ uniform vec2 vLightmapInfos;
 uniform sampler2D lightmapSampler;
 #endif
 
+#if defined(REFLECTIONMAP_SPHERICAL) || defined(REFLECTIONMAP_PROJECTION) || defined(REFRACTION)
+uniform mat4 view;
+#endif
+
 #ifdef REFRACTION
-uniform vec2 vRefractionInfos;
-uniform samplerCube refractionSampler;
+uniform vec3 vRefractionInfos;
+
+#ifdef REFRACTIONMAP_3D
+uniform samplerCube refractionCubeSampler;
+#else
+uniform sampler2D refraction2DSampler;
+uniform mat4 refractionMatrix;
+#endif
 
 #ifdef REFRACTIONFRESNEL
 uniform vec4 refractionLeftColor;
@@ -213,9 +223,6 @@ varying vec3 vDirectionW;
 #if defined(REFLECTIONMAP_PLANAR) || defined(REFLECTIONMAP_CUBIC) || defined(REFLECTIONMAP_PROJECTION)
 uniform mat4 reflectionMatrix;
 #endif
-#if defined(REFLECTIONMAP_SPHERICAL) || defined(REFLECTIONMAP_PROJECTION)
-uniform mat4 view;
-#endif
 #endif
 
 vec3 computeReflectionCoords(vec4 worldPos, vec3 worldNormal)
@@ -857,18 +864,28 @@ void main(void) {
 #endif
 #endif
 
-	// Refraction http://www.babylonjs-playground.com/#22KZUW#0
+	// Refraction
 	vec3 refractionColor = vec3(0., 0., 0.);
 
 #ifdef REFRACTION
 	vec3 refractionVector = normalize(refract(-viewDirectionW, normalW, vRefractionInfos.y));
+#ifdef REFRACTIONMAP_3D
 
 	refractionVector.y = -refractionVector.y;
 
 	if (dot(refractionVector, viewDirectionW) < 1.0)
 	{
-		refractionColor = textureCube(refractionSampler, refractionVector).rgb * vRefractionInfos.x;
+		refractionColor = textureCube(refractionCubeSampler, refractionVector).rgb * vRefractionInfos.x;
 	}
+#else
+	vec3 vRefractionUVW = vec3(refractionMatrix * (view * vec4(vPositionW + refractionVector * vRefractionInfos.z, 1.0)));
+
+	vec2 refractionCoords = vRefractionUVW.xy / vRefractionUVW.z;
+
+	refractionCoords.y = 1.0 - refractionCoords.y;
+
+	refractionColor = texture2D(refraction2DSampler, refractionCoords).rgb * vRefractionInfos.x;
+#endif
 #endif
 
 	// Reflection