Merge pull request #943 from julien-moreau/master

glTF File Loader. Fixed shaders support

loaders/glTF/README.md

@@ -24,6 +24,12 @@ BABYLON.SceneLoader.ImportMesh(["myMesh1", "myMesh2", "..."], "./", "duck.gltf",
 });
 ```
 
+In order the fix the UP vector (Y with Babylon.js) if you want to play with physics, you can customize the loader:
+```
+var plugin = BABYLON.SceneLoader.GetPluginForExtension(".gltf");
+plugin.MakeYUP = true; // Which is false by default
+```
+
 ## Supported features
 * Load scenes (SceneLoader.Load and SceneLoader.Append)
 * Support of ImportMesh function
@@ -32,12 +38,12 @@ BABYLON.SceneLoader.ImportMesh(["myMesh1", "myMesh2", "..."], "./", "duck.gltf",
     * From base64 buffers
 * Import lights
 * Import cameras
-* Import and set custom shaders (BETA) (if no shaders, the Babylon.js default material is applied)
+* Import and set custom shaders
     * Automatically bind attributes
     * Automatically bind matrices
     * Set uniforms
 * Import and set animations
-* Skinning (BETA)
+* Skinning (BETA, sometimes wrong on tricky models)
     * Skeletons
     * Hardware skinning (shaders support)
     * Bones import

loaders/glTF/babylon.glTFFileLoader.js

@@ -378,7 +378,6 @@ var BABYLON;
                 for (var j = 0; j < bufferInput.length; j++) {
                     var value = null;
                     if (targetPath === "rotationQuaternion") {
-                        //value = Quaternion.RotationAxis(Vector3.FromArray([bufferOutput[arrayOffset], bufferOutput[arrayOffset + 1], bufferOutput[arrayOffset + 2]]).normalize(), bufferOutput[arrayOffset + 3]);
                         value = BABYLON.Quaternion.FromArray([bufferOutput[arrayOffset], bufferOutput[arrayOffset + 1], bufferOutput[arrayOffset + 2], bufferOutput[arrayOffset + 3]]);
                         arrayOffset += 4;
                     }
@@ -794,13 +793,16 @@ var BABYLON;
             var scaling = new BABYLON.Vector3(0, 0, 0);
             var mat = BABYLON.Matrix.FromArray(node.matrix);
             mat.decompose(scaling, rotation, position);
+            // Y is Up
+            if (GLTFFileLoader.MakeYUP) {
+                rotation = rotation.multiply(new BABYLON.Quaternion(-0.707107, 0, 0, 0.707107));
+            }
             configureNode(newNode, position, rotation, scaling);
             if (newNode instanceof BABYLON.TargetCamera) {
                 newNode.setTarget(BABYLON.Vector3.Zero());
             }
         }
         else {
-            //configureNode(newNode, Vector3.FromArray(node.translation), Quaternion.RotationAxis(Vector3.FromArray(node.rotation), node.rotation[3]), Vector3.FromArray(node.scale));
             configureNode(newNode, BABYLON.Vector3.FromArray(node.translation), BABYLON.Quaternion.FromArray(node.rotation), BABYLON.Vector3.FromArray(node.scale));
         }
     };
@@ -1254,8 +1256,8 @@ var BABYLON;
             }
             // Create shader material
             var shaderPath = {
-                vertex: program.vertexShader,
-                fragment: program.fragmentShader
+                vertex: program.vertexShader + mat,
+                fragment: program.fragmentShader + mat
             };
             var options = {
                 attributes: attributes,
@@ -1263,8 +1265,8 @@ var BABYLON;
                 samplers: samplers,
                 needAlphaBlending: states.functions && states.functions.blendEquationSeparate
             };
-            BABYLON.Effect.ShadersStore[program.vertexShader + "VertexShader"] = newVertexShader;
-            BABYLON.Effect.ShadersStore[program.fragmentShader + "PixelShader"] = newPixelShader;
+            BABYLON.Effect.ShadersStore[program.vertexShader + mat + "VertexShader"] = newVertexShader;
+            BABYLON.Effect.ShadersStore[program.fragmentShader + mat + "PixelShader"] = newPixelShader;
             var shaderMaterial = new BABYLON.ShaderMaterial(material.name, gltfRuntime.scene, shaderPath, options);
             shaderMaterial.id = mat;
             shaderMaterial.onError = onShaderCompileError(program, shaderMaterial);
@@ -1352,10 +1354,6 @@ var BABYLON;
             this.extensions = ".gltf";
         }
         /**
-        * Private members
-        */
-        // None
-        /**
         * Import meshes
         */
         GLTFFileLoader.prototype.importMesh = function (meshesNames, scene, data, rootUrl, meshes, particleSystems, skeletons) {
@@ -1498,9 +1496,18 @@ var BABYLON;
             }
             return gltfRuntime;
         };
+        /**
+        * Private members
+        */
+        // None
+        /**
+        * Static members
+        */
+        GLTFFileLoader.MakeYUP = false;
         return GLTFFileLoader;
     })();
     BABYLON.GLTFFileLoader = GLTFFileLoader;
     ;
     BABYLON.SceneLoader.RegisterPlugin(new GLTFFileLoader());
 })(BABYLON || (BABYLON = {}));
+//# sourceMappingURL=babylon.glTFFileLoader.js.map

loaders/glTF/babylon.glTFFileLoader.ts

@@ -412,7 +412,6 @@
                     var value: any = null;
 
                     if (targetPath === "rotationQuaternion") { // VEC4
-                        //value = Quaternion.RotationAxis(Vector3.FromArray([bufferOutput[arrayOffset], bufferOutput[arrayOffset + 1], bufferOutput[arrayOffset + 2]]).normalize(), bufferOutput[arrayOffset + 3]);
                         value = Quaternion.FromArray([bufferOutput[arrayOffset], bufferOutput[arrayOffset + 1], bufferOutput[arrayOffset + 2], bufferOutput[arrayOffset + 3]]);
                         arrayOffset += 4;
                     }
@@ -468,7 +467,7 @@
             var scale = Vector3.FromArray(node.scale);
             var rotation = Quaternion.FromArray(node.rotation);
             var position = Vector3.FromArray(node.translation);
-            
+
             mat = Matrix.Compose(scale, rotation, position);
         }
         else {
@@ -753,7 +752,6 @@
         if (!node.babylonNode) {
             return newMesh;
         }
-
         var multiMat = new MultiMaterial("multimat" + id, gltfRuntime.scene);
         newMesh.material = multiMat;
 
@@ -918,6 +916,12 @@
             var scaling = new Vector3(0, 0, 0);
             var mat = Matrix.FromArray(node.matrix);
             mat.decompose(scaling, rotation, position);
+
+            // Y is Up
+            if (GLTFFileLoader.MakeYUP) {
+                rotation = rotation.multiply(new Quaternion(-0.707107, 0, 0, 0.707107));
+            }
+
             configureNode(newNode, position, rotation, scaling);
 
             if (newNode instanceof TargetCamera) {
@@ -925,7 +929,6 @@
             }
         }
         else {
-            //configureNode(newNode, Vector3.FromArray(node.translation), Quaternion.RotationAxis(Vector3.FromArray(node.rotation), node.rotation[3]), Vector3.FromArray(node.scale));
             configureNode(newNode, Vector3.FromArray(node.translation), Quaternion.FromArray(node.rotation), Vector3.FromArray(node.scale));
         }
     };
@@ -1478,8 +1481,8 @@
 
             // Create shader material
             var shaderPath = {
-                vertex: program.vertexShader,
-                fragment: program.fragmentShader
+                vertex: program.vertexShader + mat,
+                fragment: program.fragmentShader + mat
             };
 
             var options = {
@@ -1489,8 +1492,8 @@
                 needAlphaBlending: states.functions && states.functions.blendEquationSeparate
             };
 
-            Effect.ShadersStore[program.vertexShader + "VertexShader"] = newVertexShader;
-            Effect.ShadersStore[program.fragmentShader + "PixelShader"] = newPixelShader;
+            Effect.ShadersStore[program.vertexShader + mat + "VertexShader"] = newVertexShader;
+            Effect.ShadersStore[program.fragmentShader + mat + "PixelShader"] = newPixelShader;
 
             var shaderMaterial = new ShaderMaterial(material.name, gltfRuntime.scene, shaderPath, options);
             shaderMaterial.id = mat;
@@ -1592,6 +1595,11 @@
         // None
 
         /**
+        * Static members
+        */
+        public static MakeYUP: boolean = false;
+
+        /**
         * Import meshes
         */
         public importMesh(meshesNames: any, scene: Scene, data: any, rootUrl: string, meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[]): boolean {

loaders/glTF/babylon.glTFFileLoaderInterfaces.js

@@ -0,0 +1 @@
+//# sourceMappingURL=babylon.glTFFileLoaderInterfaces.js.map