Fixing Y direction issue with cubemap and Refraction

src/Materials/Textures/babylon.mirrorTexture.js

@@ -51,6 +51,12 @@ var BABYLON;
         return MirrorTexture;
     })(BABYLON.RenderTargetTexture);
     BABYLON.MirrorTexture = MirrorTexture;
+    /**
+    * 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
+    */
     var RefractionTexture = (function (_super) {
         __extends(RefractionTexture, _super);
         function RefractionTexture(name, size, scene, generateMipMaps) {

src/Materials/babylon.standardMaterial.js

@@ -148,6 +148,7 @@ var BABYLON;
             this.disableLighting = false;
             this.roughness = 0;
             this.indexOfRefraction = 1.05;
+            this.invertRefractionY = true;
             this.useLightmapAsShadowmap = false;
             this.useGlossinessFromSpecularMapAlpha = false;
             this._renderTargets = new BABYLON.SmartArray(16);
@@ -791,7 +792,7 @@ var BABYLON;
                                 depth = this.refractionTexture.depth;
                             }
                         }
-                        this._effect.setFloat3("vRefractionInfos", this.refractionTexture.level, this.indexOfRefraction, depth);
+                        this._effect.setFloat4("vRefractionInfos", this.refractionTexture.level, this.indexOfRefraction, depth, this.invertRefractionY ? -1 : 1);
                     }
                 }
                 // Clip plane

src/Materials/babylon.standardMaterial.ts

@@ -157,6 +157,7 @@
         public roughness = 0;
 
         public indexOfRefraction = 1.05;
+        public invertRefractionY = true;
 
         public useLightmapAsShadowmap = false;
 
@@ -947,7 +948,7 @@
                                 depth = (<any>this.refractionTexture).depth;
                             }
                         }
-                        this._effect.setFloat3("vRefractionInfos", this.refractionTexture.level, this.indexOfRefraction, depth);
+                        this._effect.setFloat4("vRefractionInfos", this.refractionTexture.level, this.indexOfRefraction, depth, this.invertRefractionY ? -1 : 1);
                     }
                 }
 

src/Shaders/default.fragment.fx

@@ -159,7 +159,7 @@ uniform mat4 view;
 #endif
 
 #ifdef REFRACTION
-uniform vec3 vRefractionInfos;
+uniform vec4 vRefractionInfos;
 
 #ifdef REFRACTIONMAP_3D
 uniform samplerCube refractionCubeSampler;
@@ -871,7 +871,7 @@ void main(void) {
 	vec3 refractionVector = normalize(refract(-viewDirectionW, normalW, vRefractionInfos.y));
 #ifdef REFRACTIONMAP_3D
 
-	refractionVector.y = -refractionVector.y;
+	refractionVector.y = refractionVector.y * vRefractionInfos.w;
 
 	if (dot(refractionVector, viewDirectionW) < 1.0)
 	{

src/babylon.engine.js

@@ -1727,7 +1727,7 @@ var BABYLON;
             var framebuffer = gl.createFramebuffer();
             gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
             gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer);
-            // mipmaps
+            // Mipmaps
             if (texture.generateMipMaps) {
                 gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
                 gl.generateMipmap(gl.TEXTURE_CUBE_MAP);

src/babylon.engine.ts

@@ -2043,7 +2043,7 @@
             gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
             gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer);
 
-            // mipmaps
+            // Mipmaps
             if (texture.generateMipMaps) {
                 gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
                 gl.generateMipmap(gl.TEXTURE_CUBE_MAP);