Fixed issues with gltfLoader and Normal maps orientation

Improved grid material (fixes #2476)
Small fixes for PBR

Tools/Gulp/config.json

@@ -1149,9 +1149,7 @@
                 ],
                 "shaderFiles": [
                     "../../materialsLibrary/src/grid/grid.vertex.fx",
-                    "../../materialsLibrary/src/grid/grid.fragment.fx",
-                    "../../materialsLibrary/src/grid/legacygrid.vertex.fx",
-                    "../../materialsLibrary/src/grid/legacygrid.fragment.fx"
+                    "../../materialsLibrary/src/grid/grid.fragment.fx"
                 ],
                 "output": "babylon.gridMaterial.js"
             },

dist/preview release/loaders/babylon.glTF2FileLoader.js

@@ -1143,6 +1143,8 @@ var BABYLON;
                 }
                 if (material.normalTexture) {
                     babylonMaterial.bumpTexture = this.loadTexture(material.normalTexture);
+                    babylonMaterial.invertNormalMapX = true;
+                    babylonMaterial.invertNormalMapY = true;
                     if (material.normalTexture.scale !== undefined) {
                         babylonMaterial.bumpTexture.level = material.normalTexture.scale;
                     }

dist/preview release/loaders/babylon.glTFFileLoader.js

@@ -3301,6 +3301,8 @@ var BABYLON;
                 }
                 if (material.normalTexture) {
                     babylonMaterial.bumpTexture = this.loadTexture(material.normalTexture);
+                    babylonMaterial.invertNormalMapX = true;
+                    babylonMaterial.invertNormalMapY = true;
                     if (material.normalTexture.scale !== undefined) {
                         babylonMaterial.bumpTexture.level = material.normalTexture.scale;
                     }

dist/preview release/materialsLibrary/babylon.gridMaterial.d.ts

@@ -29,6 +29,10 @@ declare module BABYLON {
          * The grid opacity outside of the lines.
          */
         opacity: number;
+        /**
+         * Determine RBG output is premultiplied by alpha value.
+         */
+        preMultiplyAlpha: boolean;
         private _gridControl;
         private _renderId;
         /**

loaders/src/glTF/2.0/babylon.glTFLoader.ts

@@ -955,6 +955,8 @@ module BABYLON.GLTF2 {
 
             if (material.normalTexture) {
                 babylonMaterial.bumpTexture = this.loadTexture(material.normalTexture);
+                babylonMaterial.invertNormalMapX = true;
+                babylonMaterial.invertNormalMapY = true;
                 if (material.normalTexture.scale !== undefined) {
                     babylonMaterial.bumpTexture.level = material.normalTexture.scale;
                 }

materialsLibrary/src/grid/babylon.gridmaterial.ts

@@ -3,10 +3,8 @@
 module BABYLON {
     class GridMaterialDefines extends MaterialDefines {
         public TRANSPARENT = false;
-
         public FOG = false;
-
-        public USERIGHTHANDEDSYSTEM = false;
+        public PREMULTIPLYALPHA = false;
 
         constructor() {
             super();
@@ -24,13 +22,13 @@ module BABYLON {
          * Main color of the grid (e.g. between lines)
          */
         @serializeAsColor3()
-        public mainColor = Color3.White();
+        public mainColor = Color3.Black();
 
         /**
          * Color of the grid lines.
          */
         @serializeAsColor3()
-        public lineColor = Color3.Black();
+        public lineColor = Color3.Teal();
 
         /**
          * The scale of the grid compared to unit.
@@ -56,6 +54,12 @@ module BABYLON {
         @serialize()
         public opacity = 1.0;
 
+        /**
+         * Determine RBG output is premultiplied by alpha value.
+         */
+        @serialize()
+        public preMultiplyAlpha = false;        
+
         private _gridControl: Vector4 = new Vector4(this.gridRatio, this.majorUnitFrequency, this.minorUnitVisibility, this.opacity);
 
         private _renderId: number;
@@ -98,8 +102,13 @@ module BABYLON {
 
             var engine = scene.getEngine();
 
-            if (this.opacity < 1.0 && !defines.TRANSPARENT) {
-                defines.TRANSPARENT = true;
+            if (defines.TRANSPARENT !== (this.opacity < 1.0)) {
+                defines.TRANSPARENT = !defines.TRANSPARENT;
+                defines.markAsUnprocessed();
+            }
+
+            if (defines.PREMULTIPLYALPHA != this.preMultiplyAlpha) {
+                defines.PREMULTIPLYALPHA = !defines.PREMULTIPLYALPHA;
                 defines.markAsUnprocessed();
             }
 
@@ -113,14 +122,11 @@ module BABYLON {
                 // Attributes
                 var attribs = [VertexBuffer.PositionKind, VertexBuffer.NormalKind];
 
-                // Effect
-                var shaderName = scene.getEngine().getCaps().standardDerivatives ? "grid" : "legacygrid";
-
                 // Defines
                 var join = defines.toString();
-                subMesh.setEffect(scene.getEngine().createEffect(shaderName,
+                subMesh.setEffect(scene.getEngine().createEffect("grid",
                     attribs,
-                    ["worldViewProjection", "mainColor", "lineColor", "gridControl", "vFogInfos", "vFogColor", "world", "view"],
+                    ["projection", "worldView", "mainColor", "lineColor", "gridControl", "vFogInfos", "vFogColor", "world", "view"],
                     [],
                     join,
                     null,
@@ -151,8 +157,9 @@ module BABYLON {
 
             // Matrices
             this.bindOnlyWorldMatrix(world);
-            this._activeEffect.setMatrix("worldViewProjection", world.multiply(scene.getTransformMatrix()));
+            this._activeEffect.setMatrix("worldView", world.multiply(scene.getViewMatrix()));
             this._activeEffect.setMatrix("view", scene.getViewMatrix());
+            this._activeEffect.setMatrix("projection", scene.getProjectionMatrix());
 
             // Uniforms
             if (this._mustRebind(scene, effect)) {

materialsLibrary/src/grid/grid.fragment.fx

@@ -10,6 +10,9 @@ uniform vec3 lineColor;
 uniform vec4 gridControl;
 
 // Varying
+#ifdef TRANSPARENT
+varying vec4 vCameraSpacePosition;
+#endif
 varying vec3 vPosition;
 varying vec3 vNormal;
 
@@ -22,7 +25,7 @@ float getVisibility(float position) {
     {
         return 1.0;
     }  
-    
+
     return gridControl.z;
 }
 
@@ -46,7 +49,7 @@ float contributionOnAxis(float position) {
     
     // Is the point on the line.
     float result = isPointOnLine(position, differentialLength);
-    
+
     // Add dynamic visibility.
     float visibility = getVisibility(position);
     result *= visibility;
@@ -59,7 +62,7 @@ float contributionOnAxis(float position) {
 }
 
 float normalImpactOnAxis(float x) {
-    float normalImpact = clamp(1.0 - 2.8 * abs(x * x * x), 0.0, 1.0);
+    float normalImpact = clamp(1.0 - 3.0 * abs(x * x * x), 0.0, 1.0);
     return normalImpact;
 }
 
@@ -72,7 +75,7 @@ void main(void) {
     // Find the contribution of each coords.
     float x = contributionOnAxis(gridPos.x);
     float y = contributionOnAxis(gridPos.y);
-    float z = contributionOnAxis(gridPos.z); 
+    float z = contributionOnAxis(gridPos.z);
     
     // Find the normal contribution.
     vec3 normal = normalize(vNormal);
@@ -91,8 +94,16 @@ void main(void) {
 #endif
 
 #ifdef TRANSPARENT
-    float opacity = clamp(grid, 0.08, gridControl.w);
+    float distanceToFragment = length(vCameraSpacePosition.xyz);
+    float cameraPassThrough = clamp(distanceToFragment - 0.25, 0.0, 1.0);
+
+    float opacity = clamp(grid, 0.08, cameraPassThrough * gridControl.w * grid);
+
     gl_FragColor = vec4(color.rgb, opacity);
+
+    #ifdef PREMULTIPLYALPHA
+        gl_FragColor.rgb *= opacity;
+    #endif
 #else
     // Apply the color.
     gl_FragColor = vec4(color.rgb, 1.0);

materialsLibrary/src/grid/grid.vertex.fx

@@ -5,11 +5,15 @@ attribute vec3 position;
 attribute vec3 normal;
 
 // Uniforms
-uniform mat4 worldViewProjection;
+uniform mat4 projection;
 uniform mat4 world;
 uniform mat4 view;
+uniform mat4 worldView;
 
 // Varying
+#ifdef TRANSPARENT
+    varying vec4 vCameraSpacePosition;
+#endif
 varying vec3 vPosition;
 varying vec3 vNormal;
 
@@ -23,7 +27,12 @@ void main(void) {
 
     #include<fogVertex>
 
-    gl_Position = worldViewProjection * vec4(position, 1.0);
+    vec4 cameraSpacePosition = worldView * vec4(position, 1.0);
+    gl_Position = projection * cameraSpacePosition;
+
+    #ifdef TRANSPARENT
+        vCameraSpacePosition = cameraSpacePosition;
+    #endif
 
     vPosition = position;
     vNormal = normal;

materialsLibrary/src/grid/legacygrid.fragment.fx

@@ -1,14 +0,0 @@
-uniform vec3 mainColor;
-uniform vec4 gridControl;
-
-void main(void) {
-    gl_FragColor = vec4(1, 1, 1, 0.1);
-    
-    #ifdef TRANSPARENT
-        // Min opacity as if there were no lines.
-        gl_FragColor = vec4(mainColor.rgb, 0.08);
-    #else
-        // Apply the color.
-        gl_FragColor = vec4(mainColor.rgb, 1.0);
-    #endif
-}

materialsLibrary/src/grid/legacygrid.vertex.fx

@@ -1,11 +0,0 @@
-precision highp float;
-
-// Attributes
-attribute vec3 position;
-
-// Uniforms
-uniform mat4 worldViewProjection;
-
-void main(void) {
-    gl_Position = worldViewProjection * vec4(position, 1.0);
-}

materialsLibrary/test/addgrid.js

@@ -7,59 +7,65 @@ window.prepareGrid = function() {
 		return grid.lineColor.r;
 	});
     
-    registerRangeUI("grid", "LineColorG", 0, 1, function(value) {
+	registerRangeUI("grid", "LineColorG", 0, 1, function(value) {
 		grid.lineColor.g = value;
 	}, function() {
 		return grid.lineColor.g;
 	});
     
-    registerRangeUI("grid", "LineColorB", 0, 1, function(value) {
+  registerRangeUI("grid", "LineColorB", 0, 1, function(value) {
 		grid.lineColor.b = value;
 	}, function() {
 		return grid.lineColor.b;
 	});
     
-    registerRangeUI("grid", "MainColorR", 0, 1, function(value) {
+  registerRangeUI("grid", "MainColorR", 0, 1, function(value) {
 		grid.mainColor.r = value;
 	}, function() {
 		return grid.mainColor.r;
 	});
     
-    registerRangeUI("grid", "MainColorG", 0, 1, function(value) {
+  registerRangeUI("grid", "MainColorG", 0, 1, function(value) {
 		grid.mainColor.g = value;
 	}, function() {
 		return grid.mainColor.g;
 	});
     
-    registerRangeUI("grid", "MainColorB", 0, 1, function(value) {
+  registerRangeUI("grid", "MainColorB", 0, 1, function(value) {
 		grid.mainColor.b = value;
 	}, function() {
 		return grid.mainColor.b;
 	});
     
-    registerRangeUI("grid", "GridRatio", 0, 10, function(value) {
+  registerRangeUI("grid", "GridRatio", 0, 10, function(value) {
 		grid.gridRatio = value;
 	}, function() {
 		return grid.gridRatio;
 	});
     
-    registerRangeUI("grid", "MajorUnitFrequency", 1, 10, function(value) {
+  registerRangeUI("grid", "MajorUnitFrequency", 1, 10, function(value) {
 		grid.majorUnitFrequency = value;
 	}, function() {
 		return grid.majorUnitFrequency;
 	});
     
-    registerRangeUI("grid", "MinorUnitVisibility", 0, 1, function(value) {
+  registerRangeUI("grid", "MinorUnitVisibility", 0, 1, function(value) {
 		grid.minorUnitVisibility = value;
 	}, function() {
 		return grid.minorUnitVisibility;
 	});
     
-    registerRangeUI("grid", "Opacity", 0, 1, function(value) {
+  registerRangeUI("grid", "Opacity", 0, 1, function(value) {
 		grid.opacity = value;
 	}, function() {
 		return grid.opacity;
 	});
 
+	registerRangeUI("grid", "PlainGrid", 0, 1, function(value) {
+		grid.usePlainGrid = value;
+	}, function() {
+		return grid.usePlainGrid;
+	});
+
 	return grid;
 }

materialsLibrary/test/index.js

@@ -33,6 +33,19 @@ window.registerColorPicker = function(material, name, color, onChange, onSet) {
     });
 };
 
+window.registerBoolean = function(material, name, onChange, onSet) {
+	if (!registeredUIs[material]) {
+		registeredUIs[material] = [];
+	}
+	
+	registeredUIs[material].push({
+		name: name,
+		onChange: onChange,
+		onSet: onSet,
+		type: "Boolean"
+	});
+}
+
 
 window.registerRangeUI = function(material, name, minValue, maxValue, onChange, onSet) {
 	if (!registeredUIs[material]) {
@@ -99,6 +112,12 @@ var setUi = function(ui) {
 		options[ui.name] = ui.onClick;
 		materialgui.add(options, ui.name);
 	}
+	else if (ui.type == "Boolean") {
+		options[ui.name] = ui.onSet();
+		var test = materialgui.add(options, ui.name).onChange(function(value) {
+			ui.onChange(value);
+		});
+	}
 }
 
 window.enableMaterial = function(material) {

src/Materials/PBR/babylon.pbrBaseMaterial.ts

@@ -379,7 +379,7 @@
          * Specifies that the alpha is premultiplied before output (this enables alpha premultiplied blending).
          * in your scene composition.
          */
-        protected _premultiplyAlpha = false;
+        protected _preMultiplyAlpha = false;
 
         /**
          * A fresnel is applied to the alpha of the model to ensure grazing angles edges are not alpha tested.
@@ -800,7 +800,7 @@
                 }
 
                 defines.ALPHATESTVALUE = this._alphaCutOff;
-                defines.PREMULTIPLYALPHA = this._premultiplyAlpha;
+                defines.PREMULTIPLYALPHA = this._preMultiplyAlpha;
                 defines.ALPHABLEND = this.needAlphaBlending();
                 defines.ALPHAFRESNEL = this._useAlphaFresnel;
             }

src/Materials/PBR/babylon.pbrMaterial.ts

@@ -372,7 +372,7 @@
          */
         @serialize()
         @expandToProperty("_markAllSubMeshesAsTexturesDirty")
-        public premultiplyAlpha = false;
+        public preMultiplyAlpha = false;
 
         /**
          * A fresnel is applied to the alpha of the model to ensure grazing angles edges are not alpha tested.

src/Math/babylon.math.ts

@@ -377,6 +377,7 @@
         public static Magenta(): Color3 { return new Color3(1, 0, 1); }
         public static Yellow(): Color3 { return new Color3(1, 1, 0); }
         public static Gray(): Color3 { return new Color3(0.5, 0.5, 0.5); }
+        public static Teal(): Color3 { return new Color3(0, 1.0, 1.0); }
         public static Random(): Color3 { return new Color3(Math.random(), Math.random(), Math.random()); }
     }
 

src/Shaders/ShadersInclude/pbrFunctions.fx

@@ -137,6 +137,9 @@ float environmentRadianceOcclusion(float ambientOcclusion, float NdotVUnclamped)
 
 float environmentHorizonOcclusion(vec3 reflection, vec3 normal) {
 	// http://marmosetco.tumblr.com/post/81245981087
+#ifdef REFLECTIONMAP_OPPOSITEZ
+    reflection.z *= -1.0;
+#endif
     float temp = clamp( 1.0 + 1.1 * dot(reflection, normal), 0.0, 1.0);
     return square(temp);
 }

src/Shaders/pbr.fragment.fx

@@ -690,7 +690,6 @@ void main(void) {
 // _____________________________ Specular ________________________________________
 #ifdef SPECULARTERM
 	vec3 finalSpecular = specularBase;
-	finalSpecular *= surfaceReflectivityColor;
 	finalSpecular = max(finalSpecular, 0.0);
 
 	// Full value needed for alpha.
@@ -744,7 +743,7 @@ void main(void) {
 						finalIrradiance			* ambientOcclusionColor * vLightingIntensity.z +
 #endif
 #ifdef SPECULARTERM
-// Comupted in the previous step to help with alpha luminance.
+// Computed in the previous step to help with alpha luminance.
 //						finalSpecular			* vLightingIntensity.x * vLightingIntensity.w +
 						finalSpecularScaled +
 #endif
@@ -814,11 +813,11 @@ void main(void) {
 	// gl_FragColor = vec4(finalSpecular.rgb, 1.0);
 
 	// Irradiance
-	//gl_FragColor = vec4(environmentIrradiance.rgb, 1.0);
+	//gl_FragColor = vec4(specularEnvironmentReflectance.rgb, 1.0);
 	//gl_FragColor = vec4(environmentIrradiance.rgb / 3.0, 1.0);
 
 	// Specular color.
-	// gl_FragColor = vec4(surfaceReflectivityColor.rgb, 1.0);
+	//gl_FragColor = vec4(surfaceReflectivityColor.rgb, 1.0);
 
 	// MicroSurface color.
 	// gl_FragColor = vec4(microSurface, microSurface, microSurface, 1.0);

src/babylon.engine.ts

@@ -3259,7 +3259,7 @@
                         Internals.DDSTools.UploadDDSLevels(this, data, info, true, 6, mipmapIndex);
                     }
                     else {
-                        Tools.Warn("DDS is the only prefiltered cube map support so far.")
+                        Tools.Warn("DDS is the only prefiltered cube map supported so far.")
                     }
 
                     this._bindTextureDirectly(gl.TEXTURE_CUBE_MAP, null);

src/babylon.scene.ts

@@ -3715,15 +3715,14 @@
 
                 var camera: TargetCamera;
                 var radius = worldSize.length() * 1.5;
-                var sign = this.useRightHandedSystem ? -1 : 1;
                 if (createArcRotateCamera) {
-                    var arcRotateCamera = new ArcRotateCamera("default camera", -sign * (Math.PI / 2), Math.PI / 2, radius, worldCenter, this);
+                    var arcRotateCamera = new ArcRotateCamera("default camera", -(Math.PI / 2), Math.PI / 2, radius, worldCenter, this);
                     arcRotateCamera.lowerRadiusLimit = radius * 0.01;
                     arcRotateCamera.wheelPrecision = 100 / radius;
                     camera = arcRotateCamera;
                 }
                 else {
-                    var freeCamera = new FreeCamera("default camera", new Vector3(worldCenter.x, worldCenter.y, radius * sign), this);
+                    var freeCamera = new FreeCamera("default camera", new Vector3(worldCenter.x, worldCenter.y, -radius), this);
                     freeCamera.setTarget(worldCenter);
                     camera = freeCamera;
                 }