Merge upstream

Babylon.csproj

@@ -138,6 +138,7 @@
     <TypeScriptCompile Include="src\Debug\babylon.boneAxesViewer.ts" />
     <TypeScriptCompile Include="src\Debug\babylon.skeletonViewer.ts" />
     <TypeScriptCompile Include="src\Debug\babylon.debugLayer.ts" />
+    <TypeScriptCompile Include="src\Debug\babylon.physicsViewer.ts" />
     <TypeScriptCompile Include="src\Layer\babylon.highlightlayer.ts" />
     <TypeScriptCompile Include="src\Loading\babylon.sceneLoader.ts" />
     <TypeScriptCompile Include="src\Loading\Plugins\babylon.babylonFileLoader.ts" />
@@ -562,11 +563,11 @@
     <PostBuildEvent>
     </PostBuildEvent>
   </PropertyGroup>
-  <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
-       Other similar extension points exist, see Microsoft.Common.targets.
-  <Target Name="BeforeBuild">
-  </Target>
-  <Target Name="AfterBuild">
-  </Target>
+  <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
+       Other similar extension points exist, see Microsoft.Common.targets.
+  <Target Name="BeforeBuild">
+  </Target>
+  <Target Name="AfterBuild">
+  </Target>
   -->
 </Project>

Exporters/Blender/readme.md

@@ -1,7 +1,7 @@
 Blender to Babylon.js exporter
 ==============================
 
-Direct download of [last version](https://github.com/BabylonJS/Babylon.js/blob/master/Exporters/Blender/Blender2Babylon-5.3.zip?raw=true).
+Direct download of [last version](https://github.com/BabylonJS/Babylon.js/blob/master/Exporters/Blender/Blender2Babylon-5.4.zip?raw=true).
 
 See the [exporters documentation](http://doc.babylonjs.com/exporters) for a list of [features](http://doc.babylonjs.com/exporters/blender), some [tips](http://doc.babylonjs.com/exporters/blender_tips) and others.
 

Exporters/Blender/src/babylon-js/__init__.py

@@ -1,7 +1,7 @@
 bl_info = {
     'name': 'Babylon.js',
     'author': 'David Catuhe, Jeff Palmer',
-    'version': (5, 3, 0),
+    'version': (5, 4, 0),
     'blender': (2, 76, 0),
     'location': 'File > Export > Babylon.js (.babylon)',
     'description': 'Export Babylon.js scenes (.babylon)',

Exporters/Blender/src/babylon-js/f_curve_animatable.py

@@ -33,6 +33,7 @@ class FCurveAnimatable:
             frameOffset = 0
 
             currentAction = object.animation_data.action
+            currentFrame = bpy.context.scene.frame_current
             for action in bpy.data.actions:
                 # get the range / assigning the action to the object
                 animationRange = AnimationRange.actionPrep(object, action, False, frameOffset)
@@ -54,6 +55,7 @@ class FCurveAnimatable:
                     frameOffset = animationRange.frame_end
 
             object.animation_data.action = currentAction
+            bpy.context.scene.frame_set(currentFrame)
             #Set Animations
             self.animations = []
             if supportsRotation and len(rotAnimation.frames) > 0:

Exporters/Blender/src/babylon-js/mesh.py

@@ -24,7 +24,7 @@ BILLBOARDMODE_NONE = 0
 #BILLBOARDMODE_Z = 4
 BILLBOARDMODE_ALL = 7
 
-# used in Mesh constructor, defined in BABYLON.PhysicsEngine
+# used in Mesh constructor, defined in BABYLON.PhysicsImpostor
 SPHERE_IMPOSTER = 1
 BOX_IMPOSTER = 2
 #PLANE_IMPOSTER = 3
@@ -32,7 +32,7 @@ MESH_IMPOSTER = 4
 CAPSULE_IMPOSTER = 5
 CONE_IMPOSTER = 6
 CYLINDER_IMPOSTER = 7
-CONVEX_HULL_IMPOSTER = 8
+PARTICLE_IMPOSTER = 8
 
 SHAPE_KEY_GROUPS_ALLOWED = False
 #===============================================================================
@@ -107,24 +107,6 @@ class Mesh(FCurveAnimatable):
             self.dataName = self.name
             self.parentId = forcedParent.name
 
-        # Get if this will be an instance of another, before processing materials, to avoid multi-bakes
-        sourceMesh = exporter.getSourceMeshInstance(self.dataName)
-        if sourceMesh is not None:
-            #need to make sure rotation mode matches, since value initially copied in InstancedMesh constructor
-            if hasattr(sourceMesh, 'rotationQuaternion'):
-                instRot = None
-                instRotq = rot
-            else:
-                instRot = scale_vector(rot.to_euler('XYZ'), -1)
-                instRotq = None
-
-            instance = MeshInstance(self, instRot, instRotq)
-            sourceMesh.instances.append(instance)
-            Logger.log('mesh is an instance of :  ' + sourceMesh.name + '.  Processing halted.', 2)
-            return
-        else:
-            self.instances = []
-
         # Physics
         if object.rigid_body != None:
             shape_items = {'SPHERE'     : SPHERE_IMPOSTER,
@@ -133,10 +115,11 @@ class Mesh(FCurveAnimatable):
                            'CAPSULE'    : CAPSULE_IMPOSTER,
                            'CONE'       : CONE_IMPOSTER,
                            'CYLINDER'   : CYLINDER_IMPOSTER,
-                           'CONVEX_HULL': CONVEX_HULL_IMPOSTER}
+                           'CONVEX_HULL': PARTICLE_IMPOSTER}
 
             shape_type = shape_items[object.rigid_body.collision_shape]
             self.physicsImpostor = shape_type
+            
             mass = object.rigid_body.mass
             if mass < 0.005:
                 mass = 0
@@ -144,6 +127,24 @@ class Mesh(FCurveAnimatable):
             self.physicsFriction = object.rigid_body.friction
             self.physicsRestitution = object.rigid_body.restitution
 
+        # Get if this will be an instance of another, before processing materials, to avoid multi-bakes
+        sourceMesh = exporter.getSourceMeshInstance(self.dataName)
+        if sourceMesh is not None:
+            #need to make sure rotation mode matches, since value initially copied in InstancedMesh constructor
+            if hasattr(sourceMesh, 'rotationQuaternion'):
+                instRot = None
+                instRotq = rot
+            else:
+                instRot = scale_vector(rot.to_euler('XYZ'), -1)
+                instRotq = None
+
+            instance = MeshInstance(self, instRot, instRotq)
+            sourceMesh.instances.append(instance)
+            Logger.log('mesh is an instance of :  ' + sourceMesh.name + '.  Processing halted.', 2)
+            return
+        else:
+            self.instances = []
+
         # process all of the materials required
         maxVerts = MAX_VERTEX_ELEMENTS if scene.force64Kmeshes else MAX_VERTEX_ELEMENTS_32Bit # change for multi-materials or shapekeys
         recipe = BakingRecipe(object)
@@ -709,6 +710,12 @@ class MeshInstance:
             self.rotationQuaternion = rotationQuaternion
         self.scaling = instancedMesh.scaling
         self.freezeWorldMatrix = instancedMesh.freezeWorldMatrix
+        
+        if hasattr(instancedMesh, 'physicsImpostor'):
+            self.physicsImpostor = instancedMesh.physicsImpostor
+            self.physicsMass = instancedMesh.physicsMass
+            self.physicsFriction = instancedMesh.physicsFriction
+            self.physicsRestitution = instancedMesh.physicsRestitution
 # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      def to_scene_file(self, file_handler):
         file_handler.write('{')
@@ -723,6 +730,13 @@ class MeshInstance:
         write_vector(file_handler, 'scaling', self.scaling)
         # freeze World Matrix currently ignored for instances
         write_bool(file_handler, 'freezeWorldMatrix', self.freezeWorldMatrix)
+
+        if hasattr(self, 'physicsImpostor'):
+            write_int(file_handler, 'physicsImpostor', self.physicsImpostor)
+            write_float(file_handler, 'physicsMass', self.physicsMass)
+            write_float(file_handler, 'physicsFriction', self.physicsFriction)
+            write_float(file_handler, 'physicsRestitution', self.physicsRestitution)
+            
         file_handler.write('}')
 #===============================================================================
 class Node(FCurveAnimatable):

Playground/babylon.d.txt

@@ -15431,3 +15431,5 @@ declare module BABYLON.GUI {
         constructor(name?: string);
     }
 }
+
+declare var engine: BABYLON.Engine;

Playground/debug.html

@@ -127,6 +127,7 @@
                     <div class="option checked" id="editorButton1600">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
                     <div class="option" id="fullscreenButton1600">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton1600">Editor Fullscreen</div>
                     <div class="option" id="formatButton1600">Format code</div>
                 </div>
             </div>
@@ -202,6 +203,7 @@
                     <div class="option checked" id="editorButton1475">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
                     <div class="option" id="fullscreenButton1475">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton1475">Editor Fullscreen</div>
                     <div class="option" id="formatButton1475">Format code</div>
                     <div class="option" id="debugButton1475">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton1475">Metadata</div>
@@ -267,6 +269,7 @@
                     <div class="option checked" id="editorButton1030">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
                     <div class="option" id="fullscreenButton1030">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton1030">Editor Fullscreen</div>
                     <div class="option" id="formatButton1030">Format code</div>
                     <div class="option" id="debugButton1030">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton1030">Metadata</div>
@@ -329,6 +332,7 @@
                     <div style="display:none;" class="option checked" id="editorButton750">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
                     <div class="option" id="fullscreenButton750">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton750">Editor Fullscreen</div>
                     <div class="option" id="formatButton750">Format code</div>
                     <div class="option" id="debugButton750">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton750">Metadata</div>

Playground/index-local.html

@@ -69,6 +69,7 @@
                     <div class="option checked" id="editorButton1600">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
                     <div class="option" id="fullscreenButton1600">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton1600">Editor Fullscreen</div>
                     <div class="option" id="formatButton1600">Format code</div>
                 </div>
             </div>
@@ -143,6 +144,7 @@
                     <div class="option checked" id="editorButton1475">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
                     <div class="option" id="fullscreenButton1475">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton1475">Editor Fullscreen</div>
                     <div class="option" id="formatButton1475">Format code</div>
                     <div class="option" id="debugButton1475">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton1475">Metadata</div>
@@ -208,6 +210,7 @@
                     <div class="option checked" id="editorButton1030">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
                     <div class="option" id="fullscreenButton1030">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton1030">Editor Fullscreen</div>
                     <div class="option" id="formatButton1030">Format code</div>
                     <div class="option" id="debugButton1030">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton1030">Metadata</div>
@@ -270,6 +273,7 @@
                     <div style="display:none;" class="option checked" id="editorButton750">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
                     <div class="option" id="fullscreenButton750">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton750">Editor Fullscreen</div>
                     <div class="option" id="formatButton750">Format code</div>
                     <div class="option" id="debugButton750">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton750">Metadata</div>

Playground/index.html

@@ -125,6 +125,7 @@
                     <div class="option checked" id="editorButton1600">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
                     <div class="option" id="fullscreenButton1600">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton1600">Editor Fullscreen</div>
                     <div class="option" id="formatButton1600">Format code</div>
                 </div>
             </div>
@@ -139,7 +140,7 @@
             <div class="button select"><span id="currentVersion1600">Version: Latest</span>
                 <div class="toDisplay">
                     <div class="option" onclick="setVersion('latest');">Latest</div>
-                    <div class="option" onclick="setVersion('2.5');">2.5</div>
+                    <div class="option" onclick="setVersion('stable');">Stable</div>
                 </div>
             </div>
             <div class="button select"> <span id="currentScript1600">Scenes</span>
@@ -199,13 +200,14 @@
                     <div class="option checked" id="editorButton1475">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
                     <div class="option" id="fullscreenButton1475">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton1475">Editor Fullscreen</div>
                     <div class="option" id="formatButton1475">Format code</div>
                     <div class="option" id="debugButton1475">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton1475">Metadata</div>
                     <div class="option subSelect"><span id="currentVersion1475">Vers. : Latest</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
                             <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                            <div class="option" onclick="setVersion('stable');">Stable</div>
                         </div>
                     </div>
                 </div>
@@ -264,13 +266,14 @@
                     <div class="option checked" id="editorButton1030">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
                     <div class="option" id="fullscreenButton1030">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton1030">Editor Fullscreen</div>
                     <div class="option" id="formatButton1030">Format code</div>
                     <div class="option" id="debugButton1030">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton1030">Metadata</div>
                     <div class="option subSelect"><span id="currentVersion1030">Vers. : Latest</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
                             <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                            <div class="option" onclick="setVersion('stable');">Stable</div>
                         </div>
                     </div>
                 </div>
@@ -326,13 +329,14 @@
                     <div style="display:none;" class="option checked" id="editorButton750">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
                     <div class="option" id="fullscreenButton750">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton750">Editor Fullscreen</div>
                     <div class="option" id="formatButton750">Format code</div>
                     <div class="option" id="debugButton750">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton750">Metadata</div>
                     <div class="option subSelect"><span id="currentVersion750">Vers. : Latest</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
                             <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                            <div class="option" onclick="setVersion('stable');">Stable</div>
                         </div>
                     </div>
                 </div>

Playground/index2_5.html

@@ -36,15 +36,14 @@
     <!--Monaco-->
     <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
     <!-- Babylon.js -->
-    <script src="https://www.babylonjs.com/cannon.js"></script>
-    <script src="https://www.babylonjs.com/Oimo.js"></script>
-    <script src="js/v2.5/babylon.2.5.js"></script>
-    <script src="js/v2.5/babylon.2.5.canvas2d.js"></script>
-    <script src="https://www.babylonjs.com/babylon.inspector.bundle.js"></script>
+    <script src="https://cdn.babylonjs.com/cannon.js"></script>
+    <script src="https://cdn.babylonjs.com/Oimo.js"></script>
+    <script src="https://cdn.babylonjs.com/babylon.js"></script>
+    <script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
 
-    <script src="https://www.babylonjs.com/lib/babylon.glTFFileLoader.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.objFileLoader.js"></script>
-    <script src="https://www.babylonjs.com/lib/babylon.stlFileLoader.js"></script>
+    <script src="https://cdn.babylonjs.com/loaders/babylon.glTFFileLoader.js"></script>
+    <script src="https://cdn.babylonjs.com/loaders/babylon.objFileLoader.js"></script>
+    <script src="https://cdn.babylonjs.com/loaders/babylon.stlFileLoader.js"></script>
 
     <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
     <link href="css/index.css" rel="stylesheet" />
@@ -56,7 +55,6 @@
             Babylon.js Playground
         </div>
         <div class="version" id="mainTitle">
-            2.5
         </div>
 
         <div class="category">
@@ -97,6 +95,7 @@
                     <div class="option checked" id="editorButton1600">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
                     <div class="option" id="fullscreenButton1600">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton1600">Editor Fullscreen</div>
                     <div class="option" id="formatButton1600">Format code</div>
                 </div>
             </div>
@@ -105,13 +104,11 @@
             <div class="button" id="metadataButton1600">Metadata</div>
         </div>
 
-
-
         <div class="category right">
             <div class="button select"><span id="currentVersion1600">Version: Latest</span>
                 <div class="toDisplay">
                     <div class="option" onclick="setVersion('latest');">Latest</div>
-                    <div class="option" onclick="setVersion('2.5');">2.5</div>
+                    <div class="option" onclick="setVersion('stable');">Stable</div>
                 </div>
             </div>
             <div class="button select"> <span id="currentScript1600">Scenes</span>
@@ -131,7 +128,6 @@
             Babylon.js Playground
         </div>
         <div class="version" id="mainTitle">
-            2.5
         </div>
 
         <div class="category">
@@ -172,13 +168,14 @@
                     <div class="option checked" id="editorButton1475">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
                     <div class="option" id="fullscreenButton1475">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton1475">Editor Fullscreen</div>
                     <div class="option" id="formatButton1475">Format code</div>
                     <div class="option" id="debugButton1475">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton1475">Metadata</div>
                     <div class="option subSelect"><span id="currentVersion1475">Vers. : Latest</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
                             <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                            <div class="option" onclick="setVersion('stable');">Stable</div>
                         </div>
                     </div>
                 </div>
@@ -237,13 +234,14 @@
                     <div class="option checked" id="editorButton1030">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
                     <div class="option" id="fullscreenButton1030">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton1030">Editor Fullscreen</div>
                     <div class="option" id="formatButton1030">Format code</div>
                     <div class="option" id="debugButton1030">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton1030">Metadata</div>
                     <div class="option subSelect"><span id="currentVersion1030">Vers. : Latest</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
                             <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                            <div class="option" onclick="setVersion('stable');">Stable</div>
                         </div>
                     </div>
                 </div>
@@ -299,13 +297,14 @@
                     <div style="display:none;" class="option checked" id="editorButton750">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
                     <div class="option" id="fullscreenButton750">Fullscreen</div>
+                    <div class="option" id="editorFullscreenButton750">Editor Fullscreen</div>
                     <div class="option" id="formatButton750">Format code</div>
                     <div class="option" id="debugButton750">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></div>
                     <div class="option" id="metadataButton750">Metadata</div>
                     <div class="option subSelect"><span id="currentVersion750">Vers. : Latest</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
                             <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                            <div class="option" onclick="setVersion('stable');">Stable</div>
                         </div>
                     </div>
                 </div>

Playground/js/index.js

@@ -70,20 +70,12 @@
         var zipCode;
         BABYLON.Engine.ShadersRepository = "/src/Shaders/";
 
-        var currentVersionElement = document.getElementById("currentVersion1600");
-
-        if (currentVersionElement) {
-            switch (BABYLON.Engine.Version) {
-                case "2.5":
-                    setToMultipleID("currentVersion", "innerHTML", "Version: " + BABYLON.Engine.Version);
-                    break;
-                default:
-                    setToMultipleID("currentVersion", "innerHTML", "Version: Latest");
-                    break;
-            }
+        if (location.href.indexOf("Stable") !== -1) {
+            setToMultipleID("currentVersion", "innerHTML", "Version: Stable");
+        } else {
+            setToMultipleID("currentVersion", "innerHTML", "Version: Latest");
         }
 
-
         var loadScript = function (scriptURL, title) {
             var xhr = new XMLHttpRequest();
 
@@ -92,6 +84,7 @@
             xhr.onreadystatechange = function () {
                 if (xhr.readyState === 4) {
                     if (xhr.status === 200) {
+                        xhr.onreadystatechange = null;
                         blockEditorChange = true;
                         jsEditor.setValue(xhr.responseText);
                         jsEditor.setPosition({ lineNumber: 0, column: 0 });
@@ -141,7 +134,7 @@
                                 a.href = "#";
                                 a.innerHTML = (index + 1) + " - " + scripts[index];
                                 a.scriptLinkIndex = index + 1;
-                                a.onclick = onScriptClick;
+                                //a.onclick = onScriptClick;
                                 option.scriptLinkIndex = index + 1;
                                 option.onclick = onScriptClick;
 
@@ -290,6 +283,30 @@
                     return;
                 }
 
+                var showInspector = false;
+                var showDebugLayer = false;
+                var initialTabIndex = 0;
+
+                if(document.getElementsByClassName('insp-wrapper').length > 0){                  
+                    for(var i = 0; i < engine.scenes.length; i++){
+                        if(engine.scenes[i]._debugLayer){
+                            //TODO: once inspector is updated on netlify, use getActiveTabIndex instead of the following loop
+                            //initialTabIndex = engine.scenes[i]._debugLayer._inspector.getActiveTabIndex();
+                            var tabs = engine.scenes[i]._debugLayer._inspector._tabbar._tabs;
+                            for(var j = 0; j < tabs.length; j++){
+                                if(tabs[j].isActive()){
+                                    initialTabIndex = j;
+                                    break;
+                                }
+                            }
+                            break;
+                        }
+                    }
+                    showInspector = true;
+                }else if(document.getElementById('DebugLayer')){
+                    showDebugLayer = true;
+                }
+
                 if (engine) {
                     engine.dispose();
                     engine = null;
@@ -316,6 +333,7 @@
                         scene.render();
                     }
 
+                    fpsLabel.style.right = document.body.clientWidth - (jsEditor.domElement.clientWidth + canvas.clientWidth) + "px";
                     fpsLabel.innerHTML = engine.getFps().toFixed() + " fps";
                 });
 
@@ -370,6 +388,17 @@
                     document.getElementById("statusBar").innerHTML = "";
                 });
 
+                if(scene){
+                    if(showInspector){
+                        scene.debugLayer.show({initialTab:initialTabIndex});
+                        scene.executeWhenReady(function(){
+                            scene.debugLayer._inspector.refresh();
+                        })
+                    }else if(showDebugLayer){
+                        scene.debugLayer.show();
+                    }
+                }
+
             } catch (e) {
                 showError(e.message, e);
             }
@@ -547,8 +576,8 @@
         // Versions
         setVersion = function (version) {
             switch (version) {
-                case "2.5":
-                    location.href = "index2_5.html" + location.hash;
+                case "stable":
+                    location.href = "indexStable.html" + location.hash;
                     break;
                 default:
                     location.href = "index.html" + location.hash;
@@ -585,6 +614,17 @@
                 engine.switchFullscreen(true);
             }
         }
+        var editorGoFullscreen = function () {
+            var editorDiv = document.getElementById("jsEditor");
+            if (editorDiv.requestFullscreen) {
+            editorDiv.requestFullscreen();
+            } else if (editorDiv.mozRequestFullScreen) {
+            editorDiv.mozRequestFullScreen();
+            } else if (editorDiv.webkitRequestFullscreen) {
+            editorDiv.webkitRequestFullscreen();
+            }
+
+        }
 
         var toggleEditor = function () {
             var editorButton = document.getElementById("editorButton1600");
@@ -620,7 +660,7 @@
                 vsTheme = 'vs'
             }
 
-            let oldCode = jsEditor.getValue();
+            var oldCode = jsEditor.getValue();
             jsEditor.dispose();
             jsEditor = monaco.editor.create(document.getElementById('jsEditor'), {
                 value: "",
@@ -644,7 +684,7 @@
 
             for (var index = 0; index < elementToTheme.length; index++) {
                 var obj = elementToTheme[index];
-                let domObjArr = document.querySelectorAll(obj);
+                var domObjArr = document.querySelectorAll(obj);
                 for (var domObjIndex = 0; domObjIndex < domObjArr.length; domObjIndex++) {
                     var domObj = domObjArr[domObjIndex];
                     domObj.classList.remove('light');
@@ -886,6 +926,8 @@
         setToMultipleID("editorButton", "click", toggleEditor);
         // FullScreen
         setToMultipleID("fullscreenButton", "click", goFullscreen);
+        // Editor fullScreen
+        setToMultipleID("editorFullscreenButton", "click", editorGoFullscreen);
         // Format
         setToMultipleID("formatButton", "click", formatCode);
         // Debug

Playground/scripts/pbr.js

@@ -5,10 +5,10 @@
     camera.minZ = 0.1;
     
     // Environment Texture
-    var hdrTexture = new BABYLON.HDRCubeTexture("textures/room.hdr", scene, 512);
+    var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("textures/environment.dds", scene);
 
-    var exposure = 0.6;
-    var contrast = 1.6;
+    scene.imageProcessingConfiguration.exposure = 0.6;
+    scene.imageProcessingConfiguration.contrast = 1.6;
 
     // Skybox
     var hdrSkybox = BABYLON.Mesh.CreateBox("hdrSkyBox", 1000.0, scene);
@@ -17,8 +17,6 @@
     hdrSkyboxMaterial.reflectionTexture = hdrTexture.clone();
     hdrSkyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
 	hdrSkyboxMaterial.microSurface = 1.0;
-	hdrSkyboxMaterial.cameraExposure = exposure;
-	hdrSkyboxMaterial.cameraContrast = contrast;
     hdrSkyboxMaterial.disableLighting = true;
     hdrSkybox.material = hdrSkyboxMaterial;
     hdrSkybox.infiniteDistance = true;
@@ -42,8 +40,6 @@
     glass.linkRefractionWithTransparency = true;
     glass.indexOfRefraction = 0.52;
     glass.alpha = 0;
-    glass.cameraExposure = exposure;
-    glass.cameraContrast = contrast;
     glass.microSurface = 1;
     glass.reflectivityColor = new BABYLON.Color3(0.2, 0.2, 0.2);
     glass.albedoColor = new BABYLON.Color3(0.85, 0.85, 0.85);
@@ -51,8 +47,6 @@
 
     var metal = new BABYLON.PBRMaterial("metal", scene);
     metal.reflectionTexture = hdrTexture;
-    metal.cameraExposure = exposure;
-    metal.cameraContrast = 1.6;
     metal.microSurface = 0.96;
     metal.reflectivityColor = new BABYLON.Color3(0.85, 0.85, 0.85);
     metal.albedoColor = new BABYLON.Color3(0.01, 0.01, 0.01);
@@ -60,19 +54,15 @@
 	
 	var plastic = new BABYLON.PBRMaterial("plastic", scene);
     plastic.reflectionTexture = hdrTexture;
-    plastic.cameraExposure = exposure;
-    plastic.cameraContrast = contrast;
     plastic.microSurface = 0.96;
 	plastic.albedoColor = new BABYLON.Color3(0.206, 0.94, 1);
-	plastic.reflectivityColor = new BABYLON.Color3(0.07, 0.07, 0.07);
+	plastic.reflectivityColor = new BABYLON.Color3(0.003, 0.003, 0.003);
     spherePlastic.material = plastic;
 
     var wood = new BABYLON.PBRMaterial("wood", scene);
     wood.reflectionTexture = hdrTexture;
     wood.environmentIntensity = 1;
     wood.specularIntensity = 0.3;
-    wood.cameraExposure = exposure;
-    wood.cameraContrast = contrast;
 
     wood.reflectivityTexture = new BABYLON.Texture("textures/reflectivity.png", scene);
     wood.useMicroSurfaceFromReflectivityMapAlpha = true;

Playground/test.html

@@ -41,6 +41,7 @@
     </div>
     <div class="btn-group pull-right">
         <button class="btn" id="fullscreenButton">Fullscreen</button>
+        <button class="btn" id="editorFullscreenButton">Editor Fullscreen</button>
     </div>
     <div class="btn-group pull-right">
         <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">

Tools/Gulp/gulpfile.js

@@ -89,7 +89,13 @@ function determineFilesToProcess(kind) {
     for (var index = 0; index < buildConfiguration.length; index++) {
         var dependencyName = buildConfiguration[index];
         var dependency = config.workloads[dependencyName];
-        processDependency(kind, dependency, filesToLoad);
+
+        if (kind === "directFiles" && !dependency) {
+            filesToLoad.push("../../dist/preview release/" + dependencyName);
+        }
+        else if (dependency) {
+            processDependency(kind, dependency, filesToLoad);
+        }
     }
 
     if (kind === "shaderIncludes") {
@@ -181,11 +187,13 @@ gulp.task("buildWorker", ["workers", "shaders"], function () {
 
 gulp.task("build", ["shaders"], function () {
     var filesToProcess = determineFilesToProcess("files");
+    var directFilesToProcess = determineFilesToProcess("directFiles");
     return merge2(
         gulp.src(filesToProcess).
             pipe(expect.real({ errorOnFailure: true }, filesToProcess)),
         shadersStream,
-        includeShadersStream
+        includeShadersStream,
+        gulp.src(directFilesToProcess)
     )
         .pipe(concat(config.build.filename))
         .pipe(cleants())

dist/gui/babylon.gui.d.ts

@@ -0,0 +1,579 @@
+
+declare module BABYLON.GUI {
+    class AdvancedDynamicTexture extends DynamicTexture {
+        private _isDirty;
+        private _renderObserver;
+        private _resizeObserver;
+        private _pointerMoveObserver;
+        private _pointerObserver;
+        private _canvasBlurObserver;
+        private _background;
+        _rootContainer: Container;
+        _lastControlOver: Control;
+        _lastControlDown: Control;
+        _capturingControl: Control;
+        _shouldBlockPointer: boolean;
+        _layerToDispose: Layer;
+        _linkedControls: Control[];
+        private _isFullscreen;
+        private _fullscreenViewport;
+        private _idealWidth;
+        private _idealHeight;
+        private _renderAtIdealSize;
+        background: string;
+        idealWidth: number;
+        idealHeight: number;
+        renderAtIdealSize: boolean;
+        readonly layer: Layer;
+        constructor(name: string, width: number, height: number, scene: Scene, generateMipMaps?: boolean, samplingMode?: number);
+        executeOnAllControls(func: (control: Control) => void, container?: Container): void;
+        markAsDirty(): void;
+        addControl(control: Control): AdvancedDynamicTexture;
+        removeControl(control: Control): AdvancedDynamicTexture;
+        dispose(): void;
+        private _onResize();
+        _getGlobalViewport(scene: Scene): Viewport;
+        private _checkUpdate(camera);
+        private _render();
+        private _doPicking(x, y, type);
+        attach(): void;
+        attachToMesh(mesh: AbstractMesh): void;
+        private _attachToOnBlur(scene);
+        static CreateForMesh(mesh: AbstractMesh, width?: number, height?: number): AdvancedDynamicTexture;
+        static CreateFullscreenUI(name: string, foreground?: boolean, scene?: Scene): AdvancedDynamicTexture;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    class Measure {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        constructor(left: number, top: number, width: number, height: number);
+        copyFrom(other: Measure): void;
+        isEqualsTo(other: Measure): boolean;
+        static Empty(): Measure;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    class Matrix2D {
+        m: Float32Array;
+        constructor(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number);
+        fromValues(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number): Matrix2D;
+        determinant(): number;
+        invertToRef(result: Matrix2D): Matrix2D;
+        multiplyToRef(other: Matrix2D, result: Matrix2D): Matrix2D;
+        transformCoordinates(x: number, y: number, result: Vector2): Matrix2D;
+        static Identity(): Matrix2D;
+        static TranslationToRef(x: number, y: number, result: Matrix2D): void;
+        static ScalingToRef(x: number, y: number, result: Matrix2D): void;
+        static RotationToRef(angle: number, result: Matrix2D): void;
+        private static _TempPreTranslationMatrix;
+        private static _TempPostTranslationMatrix;
+        private static _TempRotationMatrix;
+        private static _TempScalingMatrix;
+        private static _TempCompose0;
+        private static _TempCompose1;
+        private static _TempCompose2;
+        static ComposeToRef(tx: number, ty: number, angle: number, scaleX: number, scaleY: number, parentMatrix: Matrix2D, result: Matrix2D): void;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    class ValueAndUnit {
+        unit: number;
+        negativeValueAllowed: boolean;
+        private _value;
+        ignoreAdaptiveScaling: boolean;
+        constructor(value: any, unit?: number, negativeValueAllowed?: boolean);
+        readonly isPercentage: boolean;
+        readonly isPixel: boolean;
+        readonly internalValue: number;
+        getValue(host: AdvancedDynamicTexture): number;
+        toString(host: AdvancedDynamicTexture): string;
+        fromString(source: string | number): boolean;
+        private static _Regex;
+        private static _UNITMODE_PERCENTAGE;
+        private static _UNITMODE_PIXEL;
+        static readonly UNITMODE_PERCENTAGE: number;
+        static readonly UNITMODE_PIXEL: number;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    class Control {
+        name: string;
+        private _alpha;
+        private _alphaSet;
+        private _zIndex;
+        _root: Container;
+        _host: AdvancedDynamicTexture;
+        _currentMeasure: Measure;
+        private _fontFamily;
+        private _fontSize;
+        private _font;
+        _width: ValueAndUnit;
+        _height: ValueAndUnit;
+        private _lastMeasuredFont;
+        protected _fontOffset: {
+            ascent: number;
+            height: number;
+            descent: number;
+        };
+        private _color;
+        protected _horizontalAlignment: number;
+        protected _verticalAlignment: number;
+        private _isDirty;
+        private _cachedParentMeasure;
+        private _paddingLeft;
+        private _paddingRight;
+        private _paddingTop;
+        private _paddingBottom;
+        _left: ValueAndUnit;
+        _top: ValueAndUnit;
+        private _scaleX;
+        private _scaleY;
+        private _rotation;
+        private _transformCenterX;
+        private _transformCenterY;
+        private _transformMatrix;
+        private _invertTransformMatrix;
+        private _transformedPosition;
+        private _isMatrixDirty;
+        private _cachedOffsetX;
+        private _cachedOffsetY;
+        private _isVisible;
+        _linkedMesh: AbstractMesh;
+        private _fontSet;
+        private _dummyVector2;
+        private _downCount;
+        private _enterCount;
+        isHitTestVisible: boolean;
+        isPointerBlocker: boolean;
+        protected _linkOffsetX: ValueAndUnit;
+        protected _linkOffsetY: ValueAndUnit;
+        readonly typeName: string;
+        /**
+        * An event triggered when the pointer move over the control.
+        * @type {BABYLON.Observable}
+        */
+        onPointerMoveObservable: Observable<Vector2>;
+        /**
+        * An event triggered when the pointer move out of the control.
+        * @type {BABYLON.Observable}
+        */
+        onPointerOutObservable: Observable<Control>;
+        /**
+        * An event triggered when the pointer taps the control
+        * @type {BABYLON.Observable}
+        */
+        onPointerDownObservable: Observable<Vector2>;
+        /**
+        * An event triggered when pointer up
+        * @type {BABYLON.Observable}
+        */
+        onPointerUpObservable: Observable<Vector2>;
+        /**
+        * An event triggered when pointer enters the control
+        * @type {BABYLON.Observable}
+        */
+        onPointerEnterObservable: Observable<Control>;
+        /**
+        * An event triggered when the control is marked as dirty
+        * @type {BABYLON.Observable}
+        */
+        onDirtyObservable: Observable<Control>;
+        alpha: number;
+        scaleX: number;
+        scaleY: number;
+        rotation: number;
+        transformCenterY: number;
+        transformCenterX: number;
+        horizontalAlignment: number;
+        verticalAlignment: number;
+        width: string | number;
+        height: string | number;
+        fontFamily: string;
+        fontSize: string | number;
+        color: string;
+        zIndex: number;
+        isVisible: boolean;
+        readonly isDirty: boolean;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
+        left: string | number;
+        top: string | number;
+        linkOffsetX: string | number;
+        linkOffsetY: string | number;
+        readonly centerX: number;
+        readonly centerY: number;
+        constructor(name?: string);
+        protected _getTypeName(): string;
+        getLocalCoordinates(globalCoordinates: Vector2): Vector2;
+        getLocalCoordinatesToRef(globalCoordinates: Vector2, result: Vector2): Control;
+        moveToVector3(position: Vector3, scene: Scene): void;
+        linkWithMesh(mesh: AbstractMesh): void;
+        _moveToProjectedPosition(projectedPosition: Vector3): void;
+        _markMatrixAsDirty(): void;
+        _markAsDirty(): void;
+        _markAllAsDirty(): void;
+        _link(root: Container, host: AdvancedDynamicTexture): void;
+        protected _transform(context: CanvasRenderingContext2D): void;
+        protected _applyStates(context: CanvasRenderingContext2D): void;
+        protected _processMeasures(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean;
+        protected _clip(context: CanvasRenderingContext2D): void;
+        _measure(): void;
+        protected _computeAlignment(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        protected _preMeasure(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        contains(x: number, y: number): boolean;
+        _processPicking(x: number, y: number, type: number): boolean;
+        protected _onPointerMove(coordinates: Vector2): void;
+        protected _onPointerEnter(): boolean;
+        protected _onPointerOut(): void;
+        protected _onPointerDown(coordinates: Vector2): boolean;
+        protected _onPointerUp(coordinates: Vector2): void;
+        forcePointerUp(): void;
+        _processObservables(type: number, x: number, y: number): boolean;
+        private _prepareFont();
+        private static _HORIZONTAL_ALIGNMENT_LEFT;
+        private static _HORIZONTAL_ALIGNMENT_RIGHT;
+        private static _HORIZONTAL_ALIGNMENT_CENTER;
+        private static _VERTICAL_ALIGNMENT_TOP;
+        private static _VERTICAL_ALIGNMENT_BOTTOM;
+        private static _VERTICAL_ALIGNMENT_CENTER;
+        static readonly HORIZONTAL_ALIGNMENT_LEFT: number;
+        static readonly HORIZONTAL_ALIGNMENT_RIGHT: number;
+        static readonly HORIZONTAL_ALIGNMENT_CENTER: number;
+        static readonly VERTICAL_ALIGNMENT_TOP: number;
+        static readonly VERTICAL_ALIGNMENT_BOTTOM: number;
+        static readonly VERTICAL_ALIGNMENT_CENTER: number;
+        private static _FontHeightSizes;
+        static _GetFontOffset(font: string): {
+            ascent: number;
+            height: number;
+            descent: number;
+        };
+        static AddHeader(control: Control, text: string, size: string | number, options: {
+            isHorizontal: boolean;
+            controlFirst: boolean;
+        }): StackPanel;
+        protected static drawEllipse(x: number, y: number, width: number, height: number, context: CanvasRenderingContext2D): void;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    class Container extends Control {
+        name: string;
+        protected _children: Control[];
+        protected _measureForChildren: Measure;
+        protected _background: string;
+        background: string;
+        readonly children: Control[];
+        constructor(name?: string);
+        protected _getTypeName(): string;
+        getChildByName(name: string): Control;
+        getChildByType(name: string, type: string): Control;
+        containsControl(control: Control): boolean;
+        addControl(control: Control): Container;
+        removeControl(control: Control): Container;
+        _reOrderControl(control: Control): void;
+        _markMatrixAsDirty(): void;
+        _markAllAsDirty(): void;
+        protected _localDraw(context: CanvasRenderingContext2D): void;
+        _link(root: Container, host: AdvancedDynamicTexture): void;
+        _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        _processPicking(x: number, y: number, type: number): boolean;
+        protected _clipForChildren(context: CanvasRenderingContext2D): void;
+        protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    class StackPanel extends Container {
+        name: string;
+        private _isVertical;
+        private _tempMeasureStore;
+        isVertical: boolean;
+        constructor(name?: string);
+        protected _getTypeName(): string;
+        protected _preMeasure(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    class Rectangle extends Container {
+        name: string;
+        private _thickness;
+        private _cornerRadius;
+        thickness: number;
+        cornerRadius: number;
+        constructor(name?: string);
+        protected _getTypeName(): string;
+        protected _localDraw(context: CanvasRenderingContext2D): void;
+        protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        private _drawRoundedRect(context, offset?);
+        protected _clipForChildren(context: CanvasRenderingContext2D): void;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    class Ellipse extends Container {
+        name: string;
+        private _thickness;
+        thickness: number;
+        constructor(name?: string);
+        protected _getTypeName(): string;
+        protected _localDraw(context: CanvasRenderingContext2D): void;
+        protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        protected _clipForChildren(context: CanvasRenderingContext2D): void;
+    }
+}
+
+
+declare var DOMImage: new (width?: number, height?: number) => HTMLImageElement;
+declare module BABYLON.GUI {
+    class Line extends Control {
+        name: string;
+        private _lineWidth;
+        private _background;
+        private _x1;
+        private _y1;
+        private _x2;
+        private _y2;
+        private _dash;
+        private _connectedControl;
+        private _connectedControlDirtyObserver;
+        dash: Array<number>;
+        connectedControl: Control;
+        x1: string | number;
+        y1: string | number;
+        x2: string | number;
+        y2: string | number;
+        lineWidth: number;
+        horizontalAlignment: number;
+        verticalAlignment: number;
+        private readonly _effectiveX2;
+        private readonly _effectiveY2;
+        constructor(name?: string);
+        protected _getTypeName(): string;
+        _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        _measure(): void;
+        protected _computeAlignment(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        _moveToProjectedPosition(projectedPosition: Vector3): void;
+    }
+}
+
+
+declare var DOMImage: new (width?: number, height?: number) => HTMLImageElement;
+declare module BABYLON.GUI {
+    class Slider extends Control {
+        name: string;
+        private _thumbWidth;
+        private _minimum;
+        private _maximum;
+        private _value;
+        private _background;
+        private _borderColor;
+        private _barOffset;
+        onValueChangedObservable: Observable<number>;
+        borderColor: string;
+        background: string;
+        barOffset: string | number;
+        thumbWidth: string | number;
+        minimum: number;
+        maximum: number;
+        value: number;
+        constructor(name?: string);
+        protected _getTypeName(): string;
+        _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        private _pointerIsDown;
+        private _updateValueFromPointer(x);
+        protected _onPointerDown(coordinates: Vector2): boolean;
+        protected _onPointerMove(coordinates: Vector2): void;
+        protected _onPointerUp(coordinates: Vector2): void;
+    }
+}
+
+
+declare var DOMImage: new (width?: number, height?: number) => HTMLImageElement;
+declare module BABYLON.GUI {
+    class Checkbox extends Control {
+        name: string;
+        private _isChecked;
+        private _background;
+        private _checkSizeRatio;
+        private _thickness;
+        thickness: number;
+        onIsCheckedChangedObservable: Observable<boolean>;
+        checkSizeRatio: number;
+        background: string;
+        isChecked: boolean;
+        constructor(name?: string);
+        protected _getTypeName(): string;
+        _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        protected _onPointerDown(coordinates: Vector2): boolean;
+    }
+}
+
+
+declare var DOMImage: new (width?: number, height?: number) => HTMLImageElement;
+declare module BABYLON.GUI {
+    class RadioButton extends Control {
+        name: string;
+        private _isChecked;
+        private _background;
+        private _checkSizeRatio;
+        private _thickness;
+        thickness: number;
+        group: string;
+        onIsCheckedChangedObservable: Observable<boolean>;
+        checkSizeRatio: number;
+        background: string;
+        isChecked: boolean;
+        constructor(name?: string);
+        protected _getTypeName(): string;
+        _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        protected _onPointerDown(coordinates: Vector2): boolean;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    class TextBlock extends Control {
+        name: string;
+        private _text;
+        private _textY;
+        private _textWrapping;
+        private _textHorizontalAlignment;
+        private _textVerticalAlignment;
+        private _lines;
+        private _totalHeight;
+        textWrapping: boolean;
+        text: string;
+        textHorizontalAlignment: number;
+        textVerticalAlignment: number;
+        constructor(name?: string, text?: string);
+        protected _getTypeName(): string;
+        private _drawText(text, textWidth, y, context);
+        _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        protected _parseLine(line: string, context: CanvasRenderingContext2D): object;
+        protected _parseLineWithTextWrapping(line: string, context: CanvasRenderingContext2D): object;
+        protected _renderLines(context: CanvasRenderingContext2D): void;
+    }
+}
+
+
+declare var DOMImage: new (width?: number, height?: number) => HTMLImageElement;
+declare module BABYLON.GUI {
+    class Image extends Control {
+        name: string;
+        private _domImage;
+        private _imageWidth;
+        private _imageHeight;
+        private _loaded;
+        private _stretch;
+        private _source;
+        private _autoScale;
+        private _sourceLeft;
+        private _sourceTop;
+        private _sourceWidth;
+        private _sourceHeight;
+        sourceLeft: number;
+        sourceTop: number;
+        sourceWidth: number;
+        sourceHeight: number;
+        autoScale: boolean;
+        stretch: number;
+        domImage: HTMLImageElement;
+        private _onImageLoaded();
+        source: string;
+        constructor(name?: string, url?: string);
+        protected _getTypeName(): string;
+        synchronizeSizeWithContent(): void;
+        _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        private static _STRETCH_NONE;
+        private static _STRETCH_FILL;
+        private static _STRETCH_UNIFORM;
+        private static _STRETCH_EXTEND;
+        static readonly STRETCH_NONE: number;
+        static readonly STRETCH_FILL: number;
+        static readonly STRETCH_UNIFORM: number;
+        static readonly STRETCH_EXTEND: number;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    class Button extends Rectangle {
+        name: string;
+        pointerEnterAnimation: () => void;
+        pointerOutAnimation: () => void;
+        pointerDownAnimation: () => void;
+        pointerUpAnimation: () => void;
+        constructor(name?: string);
+        protected _getTypeName(): string;
+        _processPicking(x: number, y: number, type: number): boolean;
+        protected _onPointerEnter(): boolean;
+        protected _onPointerOut(): void;
+        protected _onPointerDown(coordinates: Vector2): boolean;
+        protected _onPointerUp(coordinates: Vector2): void;
+        static CreateImageButton(name: string, text: string, imageUrl: string): Button;
+        static CreateImageOnlyButton(name: string, imageUrl: string): Button;
+        static CreateSimpleButton(name: string, text: string): Button;
+    }
+}
+
+
+declare var DOMImage: new (width?: number, height?: number) => HTMLImageElement;
+declare module BABYLON.GUI {
+    class ColorPicker extends Control {
+        name: string;
+        private _colorWheelCanvas;
+        private _value;
+        private _tmpColor;
+        private _pointerStartedOnSquare;
+        private _pointerStartedOnWheel;
+        private _squareLeft;
+        private _squareTop;
+        private _squareSize;
+        private _h;
+        private _s;
+        private _v;
+        onValueChangedObservable: Observable<Color3>;
+        value: Color3;
+        width: string | number;
+        height: string | number;
+        size: string | number;
+        constructor(name?: string);
+        protected _getTypeName(): string;
+        private _updateSquareProps();
+        private _drawGradientSquare(hueValue, left, top, width, height, context);
+        private _drawCircle(centerX, centerY, radius, context);
+        private _createColorWheelCanvas(radius, thickness);
+        private _RGBtoHSV(color, result);
+        private _HSVtoRGB(hue, saturation, value, result);
+        _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        private _pointerIsDown;
+        private _updateValueFromPointer(x, y);
+        private _isPointOnSquare(coordinates);
+        private _isPointOnWheel(coordinates);
+        protected _onPointerDown(coordinates: Vector2): boolean;
+        protected _onPointerMove(coordinates: Vector2): void;
+        protected _onPointerUp(coordinates: Vector2): void;
+    }
+}

dist/inspector/babylon.inspector.css

@@ -0,0 +1,426 @@
+@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
+@import url(https://fonts.googleapis.com/css?family=Inconsolata);
+
+@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
+@import url(https://fonts.googleapis.com/css?family=Inconsolata);
+.insp-wrapper {
+  user-select: none;
+  display: flex;
+  font-size: 0.9em;
+  font-family: "Inconsolata", sans-serif;
+  background-color: #242424;
+  /**
+ * A tool contained in the tree panel (available for each item of the tree)
+ */
+  /**
+ * The toolbar contains : 
+ * - a refresh tool - refresh the whole panel
+ * - a popup tool - Open the inspector in a new panel
+ * ...
+ */ }
+  .insp-wrapper .gutter {
+    background-color: #2c2c2c; }
+    .insp-wrapper .gutter.gutter-vertical:not(.blocked) {
+      cursor: ns-resize; }
+    .insp-wrapper .gutter.gutter-horizontal:not(.blocked) {
+      cursor: ew-resize; }
+  .insp-wrapper .insp-right-panel {
+    width: 750px;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0; }
+    .insp-wrapper .insp-right-panel.popupmode {
+      width: 100% !important; }
+    .insp-wrapper .insp-right-panel .top-panel {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      background-color: #242424;
+      color: #ccc;
+      font-size: 1em; }
+      .insp-wrapper .insp-right-panel .top-panel .tab-panel-content {
+        width: 100%;
+        height: calc(100% - 32px); }
+      .insp-wrapper .insp-right-panel .top-panel .more-tabs-panel {
+        position: absolute;
+        z-index: 10;
+        top: 32px;
+        right: 0;
+        width: 100px;
+        display: none;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid #454545;
+        background-color: #242424; }
+        .insp-wrapper .insp-right-panel .top-panel .more-tabs-panel .invisible-tab {
+          height: 25px;
+          width: 100%;
+          line-height: 25px;
+          text-align: center;
+          background-color: #2c2c2c;
+          cursor: pointer; }
+          .insp-wrapper .insp-right-panel .top-panel .more-tabs-panel .invisible-tab:hover {
+            background-color: #383838; }
+          .insp-wrapper .insp-right-panel .top-panel .more-tabs-panel .invisible-tab:active {
+            background-color: #454545; }
+  .insp-wrapper .tooltip {
+    position: absolute;
+    top: 32px;
+    right: 0;
+    color: #f29766;
+    display: none;
+    z-index: 4;
+    font-family: "Inconsolata", sans-serif;
+    padding: 2px;
+    background-color: #242424;
+    border: 1px solid #454545; }
+  .insp-wrapper .treeTool {
+    margin: 3px 8px 3px 3px;
+    cursor: pointer;
+    position: relative; }
+    .insp-wrapper .treeTool:hover {
+      color: #5db0d7; }
+    .insp-wrapper .treeTool.active {
+      color: #5db0d7; }
+  .insp-wrapper .tab-panel {
+    height: 100%; }
+    .insp-wrapper .tab-panel.searchable {
+      height: calc(100% - 30px - 10px); }
+    .insp-wrapper .tab-panel .texture-image {
+      max-height: 400px; }
+    .insp-wrapper .tab-panel .scene-actions {
+      overflow-y: auto; }
+      .insp-wrapper .tab-panel .scene-actions .actions-title {
+        font-size: 1.1em;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #5db0d7;
+        margin: 10px 0 10px 0; }
+      .insp-wrapper .tab-panel .scene-actions .defaut-action, .insp-wrapper .tab-panel .scene-actions .action-radio, .insp-wrapper .tab-panel .scene-actions .action {
+        height: 20px;
+        line-height: 20px;
+        width: 100%;
+        cursor: pointer; }
+        .insp-wrapper .tab-panel .scene-actions .defaut-action:hover, .insp-wrapper .tab-panel .scene-actions .action-radio:hover, .insp-wrapper .tab-panel .scene-actions .action:hover {
+          background-color: #2c2c2c; }
+        .insp-wrapper .tab-panel .scene-actions .defaut-action:active, .insp-wrapper .tab-panel .scene-actions .action-radio:active, .insp-wrapper .tab-panel .scene-actions .action:active {
+          background-color: #383838; }
+      .insp-wrapper .tab-panel .scene-actions .action-radio:before {
+        width: 1em;
+        height: 1em;
+        line-height: 1em;
+        display: inline-block;
+        font-family: 'FontAwesome', sans-serif;
+        content: "\f10c";
+        margin-right: 10px; }
+      .insp-wrapper .tab-panel .scene-actions .action-radio.active:before {
+        width: 1em;
+        height: 1em;
+        line-height: 1em;
+        display: inline-block;
+        font-family: 'FontAwesome', sans-serif;
+        content: "\f192";
+        color: #5db0d7;
+        margin-right: 10px; }
+      .insp-wrapper .tab-panel .scene-actions .action:before {
+        width: 1em;
+        height: 1em;
+        line-height: 1em;
+        display: inline-block;
+        font-family: 'FontAwesome', sans-serif;
+        content: "\f096";
+        margin-right: 10px; }
+      .insp-wrapper .tab-panel .scene-actions .action.active:before {
+        width: 1em;
+        height: 1em;
+        line-height: 1em;
+        display: inline-block;
+        font-family: 'FontAwesome', sans-serif;
+        content: "\f14a";
+        color: #5db0d7;
+        margin-right: 10px; }
+  .insp-wrapper .tab-panel .shader-tree-panel {
+    height: 30px; }
+    .insp-wrapper .tab-panel .shader-tree-panel select {
+      height: 30px;
+      background-color: transparent;
+      color: #ccc;
+      height: 30px;
+      width: 100%;
+      max-width: 300px;
+      padding-left: 15px;
+      border: 1px solid #2c2c2c;
+      outline: 1px solid #454545; }
+      .insp-wrapper .tab-panel .shader-tree-panel select option {
+        padding: 5px;
+        color: gray; }
+  .insp-wrapper .tab-panel .shader-panel {
+    min-height: 100px;
+    user-select: text;
+    box-sizing: border-box;
+    padding: 0 15px; }
+    .insp-wrapper .tab-panel .shader-panel pre {
+      margin: 0;
+      white-space: pre-wrap; }
+      .insp-wrapper .tab-panel .shader-panel pre code {
+        background-color: #242424 !important;
+        padding: 0;
+        margin: 0; }
+    .insp-wrapper .tab-panel .shader-panel .shader-panel-title {
+      height: 25px;
+      border-bottom: 1px solid #383838;
+      text-transform: uppercase;
+      line-height: 25px;
+      margin-bottom: 10px; }
+  .insp-wrapper .tab-panel .console-panel {
+    min-height: 100px;
+    user-select: text;
+    box-sizing: border-box;
+    padding: 0 15px; }
+    .insp-wrapper .tab-panel .console-panel .console-panel-title {
+      height: 25px;
+      border-bottom: 1px solid #383838;
+      text-transform: uppercase;
+      line-height: 25px;
+      margin-bottom: 10px; }
+    .insp-wrapper .tab-panel .console-panel .console-panel-content {
+      overflow-y: auto;
+      overflow-x: hidden;
+      height: calc(100% - 30px); }
+    .insp-wrapper .tab-panel .console-panel .defaut-line, .insp-wrapper .tab-panel .console-panel .log, .insp-wrapper .tab-panel .console-panel .warn, .insp-wrapper .tab-panel .console-panel .error, .insp-wrapper .tab-panel .console-panel .object {
+      word-wrap: break-word;
+      padding: 3px 0 3px 5px; }
+    .insp-wrapper .tab-panel .console-panel .caller {
+      padding: 3px 0 3px 0;
+      color: #349ccd; }
+    .insp-wrapper .tab-panel .console-panel .log {
+      color: white; }
+    .insp-wrapper .tab-panel .console-panel .warn {
+      color: orange; }
+    .insp-wrapper .tab-panel .console-panel .error {
+      color: orangered; }
+    .insp-wrapper .tab-panel .console-panel .object {
+      color: #5db0d7; }
+  .insp-wrapper .tab-panel.stats-panel {
+    overflow-y: auto; }
+  .insp-wrapper .tab-panel .stats-fps {
+    font-weight: 600;
+    color: #f29766; }
+  .insp-wrapper .tab-panel .stat-title1 {
+    font-size: 1.1em;
+    padding: 10px; }
+  .insp-wrapper .tab-panel .stat-title2 {
+    margin: 10px 0 10px 0;
+    font-size: 1.05em;
+    border-bottom: 1px solid #5db0d7;
+    box-sizing: border-box; }
+  .insp-wrapper .tab-panel .stat-label {
+    display: inline-block;
+    width: 80%;
+    padding: 2px;
+    background-color: #2c2c2c;
+    border-bottom: 1px solid #242424;
+    border-top: 1px solid #242424;
+    height: 30px;
+    line-height: 30px;
+    box-sizing: border-box; }
+  .insp-wrapper .tab-panel .stat-value {
+    display: inline-block;
+    width: 20%;
+    padding: 2px;
+    background-color: #2c2c2c;
+    border-top: 1px solid #242424;
+    border-bottom: 1px solid #242424;
+    height: 30px;
+    line-height: 30px;
+    box-sizing: border-box; }
+  .insp-wrapper .tab-panel .stat-infos {
+    width: 100%;
+    padding: 4px; }
+  .insp-wrapper .property-type {
+    color: #5db0d7; }
+  .insp-wrapper .property-name, .insp-wrapper .insp-details .base-row .prop-name, .insp-wrapper .insp-details .row .prop-name, .insp-wrapper .insp-details .header-row .prop-name {
+    color: #f29766; }
+  .insp-wrapper .insp-tree {
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: calc(50% - 32px - 30px); }
+    .insp-wrapper .insp-tree .line {
+      padding: 3px;
+      cursor: pointer; }
+      .insp-wrapper .insp-tree .line:hover {
+        background-color: #2c2c2c; }
+      .insp-wrapper .insp-tree .line.active {
+        background-color: #454545; }
+        .insp-wrapper .insp-tree .line.active .line-content {
+          background-color: #242424; }
+      .insp-wrapper .insp-tree .line.unfolded:before {
+        width: 1em;
+        height: 1em;
+        line-height: 1em;
+        display: inline-block;
+        font-family: 'FontAwesome', sans-serif;
+        content: "\f078"; }
+      .insp-wrapper .insp-tree .line.folded:before {
+        width: 1em;
+        height: 1em;
+        line-height: 1em;
+        display: inline-block;
+        font-family: 'FontAwesome', sans-serif;
+        content: "\f054"; }
+      .insp-wrapper .insp-tree .line .line-content {
+        padding-left: 15px; }
+        .insp-wrapper .insp-tree .line .line-content:hover {
+          background-color: #242424; }
+        .insp-wrapper .insp-tree .line .line-content .line:hover:first-child {
+          background-color: #383838; }
+  .insp-wrapper .insp-details {
+    background-color: #242424;
+    overflow-y: auto;
+    overflow-x: auto;
+    color: #ccc;
+    font-family: "Inconsolata", sans-serif; }
+    .insp-wrapper .insp-details .base-row, .insp-wrapper .insp-details .row, .insp-wrapper .insp-details .header-row {
+      display: flex;
+      width: 100%; }
+      .insp-wrapper .insp-details .base-row .base-property, .insp-wrapper .insp-details .row .base-property, .insp-wrapper .insp-details .header-row .base-property, .insp-wrapper .insp-details .base-row .prop-name, .insp-wrapper .insp-details .row .prop-name, .insp-wrapper .insp-details .header-row .prop-name, .insp-wrapper .insp-details .base-row .prop-value, .insp-wrapper .insp-details .row .prop-value, .insp-wrapper .insp-details .header-row .prop-value {
+        word-wrap: break-word;
+        padding: 2px 0 2px 0; }
+      .insp-wrapper .insp-details .base-row .prop-name, .insp-wrapper .insp-details .row .prop-name, .insp-wrapper .insp-details .header-row .prop-name {
+        width: 35%; }
+      .insp-wrapper .insp-details .base-row .prop-value, .insp-wrapper .insp-details .row .prop-value, .insp-wrapper .insp-details .header-row .prop-value {
+        width: 59%;
+        padding-left: 10px; }
+        .insp-wrapper .insp-details .base-row .prop-value.clickable, .insp-wrapper .insp-details .row .prop-value.clickable, .insp-wrapper .insp-details .header-row .prop-value.clickable {
+          cursor: pointer; }
+          .insp-wrapper .insp-details .base-row .prop-value.clickable:hover, .insp-wrapper .insp-details .row .prop-value.clickable:hover, .insp-wrapper .insp-details .header-row .prop-value.clickable:hover {
+            background-color: #383838; }
+          .insp-wrapper .insp-details .base-row .prop-value.clickable:after, .insp-wrapper .insp-details .row .prop-value.clickable:after, .insp-wrapper .insp-details .header-row .prop-value.clickable:after {
+            font-family: 'FontAwesome', sans-serif;
+            content: "\00a0 \00a0 \00a0 \f054"; }
+    .insp-wrapper .insp-details .row:nth-child(even) {
+      background-color: #2c2c2c; }
+    .insp-wrapper .insp-details .row.unfolded .prop-value.clickable:after {
+      font-family: 'FontAwesome', sans-serif;
+      content: "\00a0 \00a0 \00a0 \f078"; }
+    .insp-wrapper .insp-details .header-row {
+      background-color: #2c2c2c;
+      color: #ccc;
+      width: 100%;
+      max-width: 100%; }
+      .insp-wrapper .insp-details .header-row > * {
+        color: #ccc !important;
+        padding: 5px 0 5px 5px !important;
+        cursor: pointer; }
+        .insp-wrapper .insp-details .header-row > *:hover {
+          background-color: #383838; }
+      .insp-wrapper .insp-details .header-row .header-col {
+        display: flex;
+        justify-content: space-between;
+        align-items: center; }
+        .insp-wrapper .insp-details .header-row .header-col .sort-direction {
+          margin-right: 5px; }
+    .insp-wrapper .insp-details .element-viewer, .insp-wrapper .insp-details .color-element, .insp-wrapper .insp-details .texture-element {
+      position: relative;
+      width: 10px;
+      height: 10px;
+      display: inline-block;
+      margin-left: 5px; }
+    .insp-wrapper .insp-details .texture-element {
+      color: #f29766;
+      margin-left: 10px; }
+      .insp-wrapper .insp-details .texture-element .texture-viewer {
+        color: #ccc;
+        position: absolute;
+        z-index: 10;
+        bottom: 0;
+        right: 0;
+        display: block;
+        width: 150px;
+        height: 150px;
+        border: 1px solid #454545;
+        background-color: #242424;
+        transform: translateX(100%) translateY(100%);
+        display: none;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center; }
+        .insp-wrapper .insp-details .texture-element .texture-viewer .texture-viewer-img {
+          margin: 10px 0 10px 0;
+          max-width: 110px;
+          max-height: 110px; }
+  .insp-wrapper .tabbar {
+    height: 32px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #383838;
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    box-sizing: border-box; }
+    .insp-wrapper .tabbar .tab {
+      height: calc(32px - 2px);
+      width: auto;
+      padding: 0 10px 0 10px;
+      color: #ccc;
+      line-height: 32px;
+      text-align: center;
+      cursor: pointer;
+      margin: 0 5px 0 5px;
+      box-sizing: border-box; }
+      .insp-wrapper .tabbar .tab:hover {
+        border-bottom: 1px solid #f29766;
+        background-color: #2c2c2c; }
+      .insp-wrapper .tabbar .tab:active {
+        background-color: #383838; }
+      .insp-wrapper .tabbar .tab.active {
+        border-bottom: 1px solid #f29766; }
+    .insp-wrapper .tabbar .more-tabs {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      position: relative;
+      border-right: 1px solid #383838; }
+      .insp-wrapper .tabbar .more-tabs:hover {
+        background-color: #383838; }
+      .insp-wrapper .tabbar .more-tabs:active {
+        color: #f29766;
+        background-color: #454545; }
+      .insp-wrapper .tabbar .more-tabs.active {
+        color: #f29766; }
+  .insp-wrapper .toolbar {
+    display: flex; }
+    .insp-wrapper .toolbar .tool {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      position: relative;
+      border-right: 1px solid #383838; }
+      .insp-wrapper .toolbar .tool:hover {
+        background-color: #383838; }
+      .insp-wrapper .toolbar .tool:active {
+        color: #f29766;
+        background-color: #454545; }
+      .insp-wrapper .toolbar .tool.active {
+        color: #f29766; }
+  .insp-wrapper .searchbar {
+    border: 1px solid #2c2c2c;
+    margin-bottom: 5px;
+    display: flex;
+    align-items: center;
+    color: #b3b3b3; }
+    .insp-wrapper .searchbar input {
+      background-color: #242424;
+      border: none;
+      width: 100%;
+      outline: none;
+      font-family: "Inconsolata", sans-serif;
+      color: #b3b3b3;
+      padding: 3px 0 3px 10px;
+      margin: 6px 0 6px 0; }

dist/loaders/babylon.glTF1FileLoader.d.ts

@@ -0,0 +1,527 @@
+
+declare module BABYLON {
+    interface IGLTFLoaderData {
+        json: Object;
+        bin: ArrayBufferView;
+    }
+    interface IGLTFLoader {
+        importMeshAsync: (meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess: (meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[]) => void, onError: () => void) => void;
+        loadAsync: (scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess: () => void, onError: () => void) => void;
+    }
+    class GLTFFileLoader implements ISceneLoaderPluginAsync {
+        static CreateGLTFLoaderV1: (parent: GLTFFileLoader) => IGLTFLoader;
+        static CreateGLTFLoaderV2: (parent: GLTFFileLoader) => IGLTFLoader;
+        static HomogeneousCoordinates: boolean;
+        static IncrementalLoading: boolean;
+        onTextureLoaded: (texture: BaseTexture) => void;
+        onMaterialLoaded: (material: Material) => void;
+        onComplete: () => void;
+        extensions: ISceneLoaderPluginExtensions;
+        importMeshAsync(meshesNames: any, scene: Scene, data: any, rootUrl: string, onSuccess: (meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[]) => void, onError: () => void): void;
+        loadAsync(scene: Scene, data: string | ArrayBuffer, rootUrl: string, onSuccess: () => void, onError: () => void): void;
+        canDirectLoad(data: string): boolean;
+        private static _parse(data);
+        private _getLoader(loaderData);
+        private static _parseBinary(data);
+        private static _parseV1(binaryReader);
+        private static _parseV2(binaryReader);
+        private static _parseVersion(version);
+        private static _compareVersion(a, b);
+        private static _decodeBufferToText(view);
+    }
+}
+
+
+declare module BABYLON.GLTF1 {
+    /**
+    * Enums
+    */
+    enum EComponentType {
+        BYTE = 5120,
+        UNSIGNED_BYTE = 5121,
+        SHORT = 5122,
+        UNSIGNED_SHORT = 5123,
+        FLOAT = 5126,
+    }
+    enum EShaderType {
+        FRAGMENT = 35632,
+        VERTEX = 35633,
+    }
+    enum EParameterType {
+        BYTE = 5120,
+        UNSIGNED_BYTE = 5121,
+        SHORT = 5122,
+        UNSIGNED_SHORT = 5123,
+        INT = 5124,
+        UNSIGNED_INT = 5125,
+        FLOAT = 5126,
+        FLOAT_VEC2 = 35664,
+        FLOAT_VEC3 = 35665,
+        FLOAT_VEC4 = 35666,
+        INT_VEC2 = 35667,
+        INT_VEC3 = 35668,
+        INT_VEC4 = 35669,
+        BOOL = 35670,
+        BOOL_VEC2 = 35671,
+        BOOL_VEC3 = 35672,
+        BOOL_VEC4 = 35673,
+        FLOAT_MAT2 = 35674,
+        FLOAT_MAT3 = 35675,
+        FLOAT_MAT4 = 35676,
+        SAMPLER_2D = 35678,
+    }
+    enum ETextureWrapMode {
+        CLAMP_TO_EDGE = 33071,
+        MIRRORED_REPEAT = 33648,
+        REPEAT = 10497,
+    }
+    enum ETextureFilterType {
+        NEAREST = 9728,
+        LINEAR = 9728,
+        NEAREST_MIPMAP_NEAREST = 9984,
+        LINEAR_MIPMAP_NEAREST = 9985,
+        NEAREST_MIPMAP_LINEAR = 9986,
+        LINEAR_MIPMAP_LINEAR = 9987,
+    }
+    enum ETextureFormat {
+        ALPHA = 6406,
+        RGB = 6407,
+        RGBA = 6408,
+        LUMINANCE = 6409,
+        LUMINANCE_ALPHA = 6410,
+    }
+    enum ECullingType {
+        FRONT = 1028,
+        BACK = 1029,
+        FRONT_AND_BACK = 1032,
+    }
+    enum EBlendingFunction {
+        ZERO = 0,
+        ONE = 1,
+        SRC_COLOR = 768,
+        ONE_MINUS_SRC_COLOR = 769,
+        DST_COLOR = 774,
+        ONE_MINUS_DST_COLOR = 775,
+        SRC_ALPHA = 770,
+        ONE_MINUS_SRC_ALPHA = 771,
+        DST_ALPHA = 772,
+        ONE_MINUS_DST_ALPHA = 773,
+        CONSTANT_COLOR = 32769,
+        ONE_MINUS_CONSTANT_COLOR = 32770,
+        CONSTANT_ALPHA = 32771,
+        ONE_MINUS_CONSTANT_ALPHA = 32772,
+        SRC_ALPHA_SATURATE = 776,
+    }
+    /**
+    * Interfaces
+    */
+    interface IGLTFProperty {
+        extensions?: Object;
+        extras?: Object;
+    }
+    interface IGLTFChildRootProperty extends IGLTFProperty {
+        name?: string;
+    }
+    interface IGLTFAccessor extends IGLTFChildRootProperty {
+        bufferView: string;
+        byteOffset: number;
+        byteStride: number;
+        count: number;
+        type: string;
+        componentType: EComponentType;
+        max?: number[];
+        min?: number[];
+        name?: string;
+    }
+    interface IGLTFBufferView extends IGLTFChildRootProperty {
+        buffer: string;
+        byteOffset: number;
+        byteLength: number;
+        target?: number;
+    }
+    interface IGLTFBuffer extends IGLTFChildRootProperty {
+        uri: string;
+        byteLength?: number;
+        type?: string;
+    }
+    interface IGLTFShader extends IGLTFChildRootProperty {
+        uri: string;
+        type: EShaderType;
+    }
+    interface IGLTFProgram extends IGLTFChildRootProperty {
+        attributes: string[];
+        fragmentShader: string;
+        vertexShader: string;
+    }
+    interface IGLTFTechniqueParameter {
+        type: number;
+        count?: number;
+        semantic?: string;
+        node?: string;
+        value?: number | boolean | string | Array<any>;
+        source?: string;
+        babylonValue?: any;
+    }
+    interface IGLTFTechniqueCommonProfile {
+        lightingModel: string;
+        texcoordBindings: Object;
+        parameters?: Array<any>;
+    }
+    interface IGLTFTechniqueStatesFunctions {
+        blendColor?: number[];
+        blendEquationSeparate?: number[];
+        blendFuncSeparate?: number[];
+        colorMask: boolean[];
+        cullFace: number[];
+    }
+    interface IGLTFTechniqueStates {
+        enable: number[];
+        functions: IGLTFTechniqueStatesFunctions;
+    }
+    interface IGLTFTechnique extends IGLTFChildRootProperty {
+        parameters: Object;
+        program: string;
+        attributes: Object;
+        uniforms: Object;
+        states: IGLTFTechniqueStates;
+    }
+    interface IGLTFMaterial extends IGLTFChildRootProperty {
+        technique?: string;
+        values: string[];
+    }
+    interface IGLTFMeshPrimitive extends IGLTFProperty {
+        attributes: Object;
+        indices: string;
+        material: string;
+        mode?: number;
+    }
+    interface IGLTFMesh extends IGLTFChildRootProperty {
+        primitives: IGLTFMeshPrimitive[];
+    }
+    interface IGLTFImage extends IGLTFChildRootProperty {
+        uri: string;
+    }
+    interface IGLTFSampler extends IGLTFChildRootProperty {
+        magFilter?: number;
+        minFilter?: number;
+        wrapS?: number;
+        wrapT?: number;
+    }
+    interface IGLTFTexture extends IGLTFChildRootProperty {
+        sampler: string;
+        source: string;
+        format?: ETextureFormat;
+        internalFormat?: ETextureFormat;
+        target?: number;
+        type?: number;
+        babylonTexture?: Texture;
+    }
+    interface IGLTFAmbienLight {
+        color?: number[];
+    }
+    interface IGLTFDirectionalLight {
+        color?: number[];
+    }
+    interface IGLTFPointLight {
+        color?: number[];
+        constantAttenuation?: number;
+        linearAttenuation?: number;
+        quadraticAttenuation?: number;
+    }
+    interface IGLTFSpotLight {
+        color?: number[];
+        constantAttenuation?: number;
+        fallOfAngle?: number;
+        fallOffExponent?: number;
+        linearAttenuation?: number;
+        quadraticAttenuation?: number;
+    }
+    interface IGLTFLight extends IGLTFChildRootProperty {
+        type: string;
+    }
+    interface IGLTFCameraOrthographic {
+        xmag: number;
+        ymag: number;
+        zfar: number;
+        znear: number;
+    }
+    interface IGLTFCameraPerspective {
+        aspectRatio: number;
+        yfov: number;
+        zfar: number;
+        znear: number;
+    }
+    interface IGLTFCamera extends IGLTFChildRootProperty {
+        type: string;
+    }
+    interface IGLTFAnimationChannelTarget {
+        id: string;
+        path: string;
+    }
+    interface IGLTFAnimationChannel {
+        sampler: string;
+        target: IGLTFAnimationChannelTarget;
+    }
+    interface IGLTFAnimationSampler {
+        input: string;
+        output: string;
+        interpolation?: string;
+    }
+    interface IGLTFAnimation extends IGLTFChildRootProperty {
+        channels?: IGLTFAnimationChannel[];
+        parameters?: Object;
+        samplers?: Object;
+    }
+    interface IGLTFNodeInstanceSkin {
+        skeletons: string[];
+        skin: string;
+        meshes: string[];
+    }
+    interface IGLTFSkins extends IGLTFChildRootProperty {
+        bindShapeMatrix: number[];
+        inverseBindMatrices: string;
+        jointNames: string[];
+        babylonSkeleton?: Skeleton;
+    }
+    interface IGLTFNode extends IGLTFChildRootProperty {
+        camera?: string;
+        children: string[];
+        skin?: string;
+        jointName?: string;
+        light?: string;
+        matrix: number[];
+        mesh?: string;
+        meshes?: string[];
+        rotation?: number[];
+        scale?: number[];
+        translation?: number[];
+        babylonNode?: Node;
+    }
+    interface IGLTFScene extends IGLTFChildRootProperty {
+        nodes: string[];
+    }
+    /**
+    * Runtime
+    */
+    interface IGLTFRuntime {
+        extensions: Object;
+        accessors: Object;
+        buffers: Object;
+        bufferViews: Object;
+        meshes: Object;
+        lights: Object;
+        cameras: Object;
+        nodes: Object;
+        images: Object;
+        textures: Object;
+        shaders: Object;
+        programs: Object;
+        samplers: Object;
+        techniques: Object;
+        materials: Object;
+        animations: Object;
+        skins: Object;
+        currentScene?: Object;
+        scenes: Object;
+        extensionsUsed: string[];
+        extensionsRequired?: string[];
+        buffersCount: number;
+        shaderscount: number;
+        scene: Scene;
+        rootUrl: string;
+        loadedBufferCount: number;
+        loadedBufferViews: {
+            [name: string]: ArrayBufferView;
+        };
+        loadedShaderCount: number;
+        importOnlyMeshes: boolean;
+        importMeshesNames?: string[];
+        dummyNodes: Node[];
+    }
+    /**
+    * Bones
+    */
+    interface INodeToRoot {
+        bone: Bone;
+        node: IGLTFNode;
+        id: string;
+    }
+    interface IJointNode {
+        node: IGLTFNode;
+        id: string;
+    }
+}
+
+
+declare module BABYLON.GLTF1 {
+    /**
+    * Implementation of the base glTF spec
+    */
+    class GLTFLoaderBase {
+        static CreateRuntime(parsedData: any, scene: Scene, rootUrl: string): IGLTFRuntime;
+        static LoadBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: () => void, onProgress?: () => void): void;
+        static LoadTextureBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: () => void): void;
+        static CreateTextureAsync(gltfRuntime: IGLTFRuntime, id: string, buffer: ArrayBufferView, onSuccess: (texture: Texture) => void, onError: () => void): void;
+        static LoadShaderStringAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (shaderString: string) => void, onError: () => void): void;
+        static LoadMaterialAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (material: Material) => void, onError: () => void): void;
+    }
+    /**
+    * glTF V1 Loader
+    */
+    class GLTFLoader implements IGLTFLoader {
+        static Extensions: {
+            [name: string]: GLTFLoaderExtension;
+        };
+        static RegisterExtension(extension: GLTFLoaderExtension): void;
+        importMeshAsync(meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess?: (meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[]) => void, onError?: () => void, onProgress?: () => void): boolean;
+        loadAsync(scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess: () => void, onError: () => void): void;
+        private _loadShadersAsync(gltfRuntime, onload);
+        private _loadBuffersAsync(gltfRuntime, onload, onProgress?);
+        private _createNodes(gltfRuntime);
+    }
+}
+
+
+declare module BABYLON.GLTF1 {
+    /**
+    * Utils functions for GLTF
+    */
+    class GLTFUtils {
+        /**
+         * Sets the given "parameter" matrix
+         * @param scene: the {BABYLON.Scene} object
+         * @param source: the source node where to pick the matrix
+         * @param parameter: the GLTF technique parameter
+         * @param uniformName: the name of the shader's uniform
+         * @param shaderMaterial: the shader material
+         */
+        static SetMatrix(scene: Scene, source: Node, parameter: IGLTFTechniqueParameter, uniformName: string, shaderMaterial: ShaderMaterial | Effect): void;
+        /**
+         * Sets the given "parameter" matrix
+         * @param shaderMaterial: the shader material
+         * @param uniform: the name of the shader's uniform
+         * @param value: the value of the uniform
+         * @param type: the uniform's type (EParameterType FLOAT, VEC2, VEC3 or VEC4)
+         */
+        static SetUniform(shaderMaterial: ShaderMaterial | Effect, uniform: string, value: any, type: number): boolean;
+        /**
+        * If the uri is a base64 string
+        * @param uri: the uri to test
+        */
+        static IsBase64(uri: string): boolean;
+        /**
+        * Decode the base64 uri
+        * @param uri: the uri to decode
+        */
+        static DecodeBase64(uri: string): ArrayBuffer;
+        /**
+        * Returns the wrap mode of the texture
+        * @param mode: the mode value
+        */
+        static GetWrapMode(mode: number): number;
+        /**
+         * Returns the byte stride giving an accessor
+         * @param accessor: the GLTF accessor objet
+         */
+        static GetByteStrideFromType(accessor: IGLTFAccessor): number;
+        /**
+         * Returns the texture filter mode giving a mode value
+         * @param mode: the filter mode value
+         */
+        static GetTextureFilterMode(mode: number): ETextureFilterType;
+        static GetBufferFromBufferView(gltfRuntime: IGLTFRuntime, bufferView: IGLTFBufferView, byteOffset: number, byteLength: number, componentType: EComponentType): ArrayBufferView;
+        /**
+         * Returns a buffer from its accessor
+         * @param gltfRuntime: the GLTF runtime
+         * @param accessor: the GLTF accessor
+         */
+        static GetBufferFromAccessor(gltfRuntime: IGLTFRuntime, accessor: IGLTFAccessor): any;
+        /**
+         * Decodes a buffer view into a string
+         * @param view: the buffer view
+         */
+        static DecodeBufferToText(view: ArrayBufferView): string;
+        /**
+         * Returns the default material of gltf. Related to
+         * https://github.com/KhronosGroup/glTF/tree/master/specification/1.0#appendix-a-default-material
+         * @param scene: the Babylon.js scene
+         */
+        static GetDefaultMaterial(scene: Scene): ShaderMaterial;
+        private static _DefaultMaterial;
+    }
+}
+
+
+declare module BABYLON.GLTF1 {
+    abstract class GLTFLoaderExtension {
+        private _name;
+        constructor(name: string);
+        readonly name: string;
+        /**
+        * Defines an override for loading the runtime
+        * Return true to stop further extensions from loading the runtime
+        */
+        loadRuntimeAsync(scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess: (gltfRuntime: IGLTFRuntime) => void, onError: () => void): boolean;
+        /**
+         * Defines an onverride for creating gltf runtime
+         * Return true to stop further extensions from creating the runtime
+         */
+        loadRuntimeExtensionsAsync(gltfRuntime: IGLTFRuntime, onSuccess: () => void, onError: () => void): boolean;
+        /**
+        * Defines an override for loading buffers
+        * Return true to stop further extensions from loading this buffer
+        */
+        loadBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: () => void, onProgress?: () => void): boolean;
+        /**
+        * Defines an override for loading texture buffers
+        * Return true to stop further extensions from loading this texture data
+        */
+        loadTextureBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: () => void): boolean;
+        /**
+        * Defines an override for creating textures
+        * Return true to stop further extensions from loading this texture
+        */
+        createTextureAsync(gltfRuntime: IGLTFRuntime, id: string, buffer: ArrayBufferView, onSuccess: (texture: Texture) => void, onError: () => void): boolean;
+        /**
+        * Defines an override for loading shader strings
+        * Return true to stop further extensions from loading this shader data
+        */
+        loadShaderStringAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (shaderString: string) => void, onError: () => void): boolean;
+        /**
+        * Defines an override for loading materials
+        * Return true to stop further extensions from loading this material
+        */
+        loadMaterialAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (material: Material) => void, onError: () => void): boolean;
+        static LoadRuntimeAsync(scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess: (gltfRuntime: IGLTFRuntime) => void, onError: () => void): void;
+        static LoadRuntimeExtensionsAsync(gltfRuntime: IGLTFRuntime, onSuccess: () => void, onError: () => void): void;
+        static LoadBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (bufferView: ArrayBufferView) => void, onError: () => void, onProgress?: () => void): void;
+        static LoadTextureAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (texture: Texture) => void, onError: () => void): void;
+        static LoadShaderStringAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (shaderData: string) => void, onError: () => void): void;
+        static LoadMaterialAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (material: Material) => void, onError: () => void): void;
+        private static LoadTextureBufferAsync(gltfRuntime, id, onSuccess, onError);
+        private static CreateTextureAsync(gltfRuntime, id, buffer, onSuccess, onError);
+        private static ApplyExtensions(func, defaultFunc);
+    }
+}
+
+
+declare module BABYLON.GLTF1 {
+    class GLTFBinaryExtension extends GLTFLoaderExtension {
+        private _bin;
+        constructor();
+        loadRuntimeAsync(scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess: (gltfRuntime: IGLTFRuntime) => void, onError: () => void): boolean;
+        loadBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: () => void): boolean;
+        loadTextureBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: () => void): boolean;
+        loadShaderStringAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (shaderString: string) => void, onError: () => void): boolean;
+    }
+}
+
+
+declare module BABYLON.GLTF1 {
+    class GLTFMaterialsCommonExtension extends GLTFLoaderExtension {
+        constructor();
+        loadRuntimeExtensionsAsync(gltfRuntime: IGLTFRuntime, onSuccess: () => void, onError: () => void): boolean;
+        loadMaterialAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (material: Material) => void, onError: () => void): boolean;
+        private _loadTexture(gltfRuntime, id, material, propertyPath, onError);
+    }
+}

dist/loaders/babylon.glTF2FileLoader.d.ts

@@ -0,0 +1,402 @@
+
+declare module BABYLON {
+    interface IGLTFLoaderData {
+        json: Object;
+        bin: ArrayBufferView;
+    }
+    interface IGLTFLoader {
+        importMeshAsync: (meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess: (meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[]) => void, onError: () => void) => void;
+        loadAsync: (scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess: () => void, onError: () => void) => void;
+    }
+    class GLTFFileLoader implements ISceneLoaderPluginAsync {
+        static CreateGLTFLoaderV1: (parent: GLTFFileLoader) => IGLTFLoader;
+        static CreateGLTFLoaderV2: (parent: GLTFFileLoader) => IGLTFLoader;
+        static HomogeneousCoordinates: boolean;
+        static IncrementalLoading: boolean;
+        onTextureLoaded: (texture: BaseTexture) => void;
+        onMaterialLoaded: (material: Material) => void;
+        onComplete: () => void;
+        extensions: ISceneLoaderPluginExtensions;
+        importMeshAsync(meshesNames: any, scene: Scene, data: any, rootUrl: string, onSuccess: (meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[]) => void, onError: () => void): void;
+        loadAsync(scene: Scene, data: string | ArrayBuffer, rootUrl: string, onSuccess: () => void, onError: () => void): void;
+        canDirectLoad(data: string): boolean;
+        private static _parse(data);
+        private _getLoader(loaderData);
+        private static _parseBinary(data);
+        private static _parseV1(binaryReader);
+        private static _parseV2(binaryReader);
+        private static _parseVersion(version);
+        private static _compareVersion(a, b);
+        private static _decodeBufferToText(view);
+    }
+}
+
+
+declare module BABYLON.GLTF2 {
+    /**
+    * Enums
+    */
+    enum EComponentType {
+        BYTE = 5120,
+        UNSIGNED_BYTE = 5121,
+        SHORT = 5122,
+        UNSIGNED_SHORT = 5123,
+        UNSIGNED_INT = 5125,
+        FLOAT = 5126,
+    }
+    enum EMeshPrimitiveMode {
+        POINTS = 0,
+        LINES = 1,
+        LINE_LOOP = 2,
+        LINE_STRIP = 3,
+        TRIANGLES = 4,
+        TRIANGLE_STRIP = 5,
+        TRIANGLE_FAN = 6,
+    }
+    enum ETextureMagFilter {
+        NEAREST = 9728,
+        LINEAR = 9729,
+    }
+    enum ETextureMinFilter {
+        NEAREST = 9728,
+        LINEAR = 9729,
+        NEAREST_MIPMAP_NEAREST = 9984,
+        LINEAR_MIPMAP_NEAREST = 9985,
+        NEAREST_MIPMAP_LINEAR = 9986,
+        LINEAR_MIPMAP_LINEAR = 9987,
+    }
+    enum ETextureWrapMode {
+        CLAMP_TO_EDGE = 33071,
+        MIRRORED_REPEAT = 33648,
+        REPEAT = 10497,
+    }
+    /**
+    * Interfaces
+    */
+    interface IGLTFProperty {
+        extensions?: Object;
+        extras?: any;
+    }
+    interface IGLTFChildRootProperty extends IGLTFProperty {
+        name?: string;
+    }
+    interface IGLTFAccessorSparseIndices extends IGLTFProperty {
+        bufferView: number;
+        byteOffset?: number;
+        componentType: EComponentType;
+    }
+    interface IGLTFAccessorSparseValues extends IGLTFProperty {
+        bufferView: number;
+        byteOffset?: number;
+    }
+    interface IGLTFAccessorSparse extends IGLTFProperty {
+        count: number;
+        indices: IGLTFAccessorSparseIndices;
+        values: IGLTFAccessorSparseValues;
+    }
+    interface IGLTFAccessor extends IGLTFChildRootProperty {
+        bufferView?: number;
+        byteOffset?: number;
+        componentType: EComponentType;
+        normalized?: boolean;
+        count: number;
+        type: string;
+        max: number[];
+        min: number[];
+        sparse?: IGLTFAccessorSparse;
+    }
+    interface IGLTFAnimationChannel extends IGLTFProperty {
+        sampler: number;
+        target: IGLTFAnimationChannelTarget;
+    }
+    interface IGLTFAnimationChannelTarget extends IGLTFProperty {
+        node: number;
+        path: string;
+    }
+    interface IGLTFAnimationSampler extends IGLTFProperty {
+        input: number;
+        interpolation?: string;
+        output: number;
+    }
+    interface IGLTFAnimation extends IGLTFChildRootProperty {
+        channels: IGLTFAnimationChannel[];
+        samplers: IGLTFAnimationSampler[];
+        targets?: any[];
+    }
+    interface IGLTFAsset extends IGLTFChildRootProperty {
+        copyright?: string;
+        generator?: string;
+        version: string;
+        minVersion?: string;
+    }
+    interface IGLTFBuffer extends IGLTFChildRootProperty {
+        uri?: string;
+        byteLength: number;
+        loadedData: ArrayBufferView;
+        loadedObservable: Observable<IGLTFBuffer>;
+    }
+    interface IGLTFBufferView extends IGLTFChildRootProperty {
+        buffer: number;
+        byteOffset?: number;
+        byteLength: number;
+        byteStride?: number;
+    }
+    interface IGLTFCameraOrthographic extends IGLTFProperty {
+        xmag: number;
+        ymag: number;
+        zfar: number;
+        znear: number;
+    }
+    interface IGLTFCameraPerspective extends IGLTFProperty {
+        aspectRatio: number;
+        yfov: number;
+        zfar: number;
+        znear: number;
+    }
+    interface IGLTFCamera extends IGLTFChildRootProperty {
+        orthographic?: IGLTFCameraOrthographic;
+        perspective?: IGLTFCameraPerspective;
+        type: string;
+    }
+    interface IGLTFImage extends IGLTFChildRootProperty {
+        uri?: string;
+        mimeType?: string;
+        bufferView?: number;
+    }
+    interface IGLTFMaterialNormalTextureInfo extends IGLTFTextureInfo {
+        scale: number;
+    }
+    interface IGLTFMaterialOcclusionTextureInfo extends IGLTFTextureInfo {
+        strength: number;
+    }
+    interface IGLTFMaterialPbrMetallicRoughness {
+        baseColorFactor: number[];
+        baseColorTexture: IGLTFTextureInfo;
+        metallicFactor: number;
+        roughnessFactor: number;
+        metallicRoughnessTexture: IGLTFTextureInfo;
+    }
+    interface IGLTFMaterial extends IGLTFChildRootProperty {
+        pbrMetallicRoughness?: IGLTFMaterialPbrMetallicRoughness;
+        normalTexture?: IGLTFMaterialNormalTextureInfo;
+        occlusionTexture?: IGLTFMaterialOcclusionTextureInfo;
+        emissiveTexture?: IGLTFTextureInfo;
+        emissiveFactor?: number[];
+        alphaMode?: string;
+        alphaCutoff: number;
+        doubleSided?: boolean;
+        index?: number;
+        babylonMaterial?: Material;
+    }
+    interface IGLTFMeshPrimitive extends IGLTFProperty {
+        attributes: {
+            [name: string]: number;
+        };
+        indices?: number;
+        material?: number;
+        mode?: EMeshPrimitiveMode;
+        targets?: [{
+            [name: string]: number;
+        }];
+    }
+    interface IGLTFMesh extends IGLTFChildRootProperty {
+        primitives: IGLTFMeshPrimitive[];
+        weights?: number[];
+    }
+    interface IGLTFNode extends IGLTFChildRootProperty {
+        camera?: number;
+        children?: number[];
+        skin?: number;
+        matrix?: number[];
+        mesh?: number;
+        rotation?: number[];
+        scale?: number[];
+        translation?: number[];
+        weights?: number[];
+        index?: number;
+        parent?: IGLTFNode;
+        babylonMesh?: Mesh;
+        babylonSkinToBones?: {
+            [skin: number]: Bone;
+        };
+        babylonAnimationTargets?: Node[];
+    }
+    interface IGLTFSampler extends IGLTFChildRootProperty {
+        magFilter?: ETextureMagFilter;
+        minFilter?: ETextureMinFilter;
+        wrapS?: ETextureWrapMode;
+        wrapT?: ETextureWrapMode;
+    }
+    interface IGLTFScene extends IGLTFChildRootProperty {
+        nodes: number[];
+    }
+    interface IGLTFSkin extends IGLTFChildRootProperty {
+        inverseBindMatrices?: number;
+        skeleton?: number;
+        joints: number[];
+        index?: number;
+        babylonSkeleton?: Skeleton;
+    }
+    interface IGLTFTexture extends IGLTFChildRootProperty {
+        sampler?: number;
+        source: number;
+        babylonTextures?: Texture[];
+        blobURL?: string;
+    }
+    interface IGLTFTextureInfo {
+        index: number;
+        texCoord?: number;
+    }
+    interface IGLTF extends IGLTFProperty {
+        accessors?: IGLTFAccessor[];
+        animations?: IGLTFAnimation[];
+        asset: IGLTFAsset;
+        buffers?: IGLTFBuffer[];
+        bufferViews?: IGLTFBufferView[];
+        cameras?: IGLTFCamera[];
+        extensionsUsed?: string[];
+        extensionsRequired?: string[];
+        glExtensionsUsed?: string[];
+        images?: IGLTFImage[];
+        materials?: IGLTFMaterial[];
+        meshes?: IGLTFMesh[];
+        nodes?: IGLTFNode[];
+        samplers?: IGLTFSampler[];
+        scene?: number;
+        scenes?: IGLTFScene[];
+        skins?: IGLTFSkin[];
+        textures?: IGLTFTexture[];
+    }
+}
+
+
+declare module BABYLON.GLTF2 {
+    class GLTFLoader implements IGLTFLoader {
+        private _parent;
+        private _gltf;
+        private _errors;
+        private _babylonScene;
+        private _rootUrl;
+        private _defaultMaterial;
+        private _onSuccess;
+        private _onError;
+        private _renderReady;
+        private _renderPendingCount;
+        private _loaderPendingCount;
+        static Extensions: {
+            [name: string]: GLTFLoaderExtension;
+        };
+        static RegisterExtension(extension: GLTFLoaderExtension): void;
+        readonly gltf: IGLTF;
+        readonly babylonScene: Scene;
+        constructor(parent: GLTFFileLoader);
+        importMeshAsync(meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess: (meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[]) => void, onError: () => void): void;
+        loadAsync(scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess: () => void, onError: () => void): void;
+        private _loadAsync(nodeNames, scene, data, rootUrl, onSuccess, onError);
+        private _onRenderReady();
+        private _onLoaderComplete();
+        private _loadData(data);
+        private _showMeshes();
+        private _startAnimations();
+        private _clear();
+        private _loadScene(nodeNames);
+        private _loadSkin(node);
+        private _updateBone(node, parentNode, skin, inverseBindMatrixData);
+        private _createBone(node, skin);
+        private _loadMesh(node);
+        private _loadMeshData(node, mesh, babylonMesh);
+        private _assignMaterial(multiMaterial, index, subMaterial);
+        private _loadVertexDataAsync(primitive, onSuccess);
+        private _createMorphTargets(node, mesh, primitive, babylonMesh);
+        private _loadMorphTargetsData(mesh, primitive, vertexData, babylonMesh);
+        private _loadTransform(node, babylonMesh);
+        private _traverseNodes(indices, action, parentNode?);
+        private _traverseNode(index, action, parentNode?);
+        private _loadAnimations();
+        private _loadAnimationChannel(animation, animationIndex, channelIndex);
+        private _loadBufferAsync(index, onSuccess);
+        private _loadBufferViewAsync(bufferView, byteOffset, byteLength, componentType, onSuccess);
+        private _loadAccessorAsync(accessor, onSuccess);
+        addPendingData(data: any): void;
+        removePendingData(data: any): void;
+        addLoaderPendingData(data: any): void;
+        removeLoaderPendingData(data: any): void;
+        private _getDefaultMaterial();
+        private _loadMaterialMetallicRoughnessProperties(material);
+        loadMaterial(index: number, assign: (material: Material) => void): void;
+        createPbrMaterial(material: IGLTFMaterial): void;
+        loadMaterialBaseProperties(material: IGLTFMaterial): void;
+        loadMaterialAlphaProperties(material: IGLTFMaterial): void;
+        loadTexture(textureInfo: IGLTFTextureInfo): Texture;
+    }
+}
+
+
+declare module BABYLON.GLTF2 {
+    /**
+    * Utils functions for GLTF
+    */
+    class GLTFUtils {
+        /**
+        * If the uri is a base64 string
+        * @param uri: the uri to test
+        */
+        static IsBase64(uri: string): boolean;
+        /**
+        * Decode the base64 uri
+        * @param uri: the uri to decode
+        */
+        static DecodeBase64(uri: string): ArrayBuffer;
+        static ForEach(view: Uint16Array | Uint32Array | Float32Array, func: (nvalue: number, index: number) => void): void;
+        /**
+        * Returns the wrap mode of the texture
+        * @param mode: the mode value
+        */
+        static GetWrapMode(mode: number): number;
+        /**
+         * Returns the byte stride giving an accessor
+         * @param accessor: the GLTF accessor objet
+         */
+        static GetByteStrideFromType(accessor: IGLTFAccessor): number;
+        /**
+         * Returns the texture filter mode giving a mode value
+         * @param mode: the filter mode value
+         */
+        static GetTextureFilterMode(mode: number): ETextureMinFilter;
+        /**
+         * Decodes a buffer view into a string
+         * @param view: the buffer view
+         */
+        static DecodeBufferToText(view: ArrayBufferView): string;
+    }
+}
+
+
+declare module BABYLON.GLTF2 {
+    abstract class GLTFLoaderExtension {
+        enabled: boolean;
+        readonly abstract name: string;
+        protected loadMaterial(loader: GLTFLoader, material: IGLTFMaterial, assign: (material: Material) => void): boolean;
+        static _Extensions: GLTFLoaderExtension[];
+        static LoadMaterial(loader: GLTFLoader, material: IGLTFMaterial, assign: (material: Material) => void): boolean;
+        private static _ApplyExtensions(action);
+    }
+}
+
+
+declare module BABYLON.GLTF2.Extensions {
+    class MSFTLOD extends GLTFLoaderExtension {
+        readonly name: string;
+        protected loadMaterial(loader: GLTFLoader, material: IGLTFMaterial, assign: (material: Material) => void): boolean;
+        private loadMaterialLOD(loader, material, materialLODs, lod, assign);
+    }
+}
+
+
+declare module BABYLON.GLTF2.Extensions {
+    class KHRMaterialsPbrSpecularGlossiness extends GLTFLoaderExtension {
+        readonly name: string;
+        protected loadMaterial(loader: GLTFLoader, material: IGLTFMaterial, assign: (material: Material) => void): boolean;
+        private _loadSpecularGlossinessProperties(loader, material, properties);
+    }
+}

dist/loaders/babylon.glTFFileLoader.d.ts

@@ -0,0 +1,897 @@
+
+declare module BABYLON {
+    interface IGLTFLoaderData {
+        json: Object;
+        bin: ArrayBufferView;
+    }
+    interface IGLTFLoader {
+        importMeshAsync: (meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess: (meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[]) => void, onError: () => void) => void;
+        loadAsync: (scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess: () => void, onError: () => void) => void;
+    }
+    class GLTFFileLoader implements ISceneLoaderPluginAsync {
+        static CreateGLTFLoaderV1: (parent: GLTFFileLoader) => IGLTFLoader;
+        static CreateGLTFLoaderV2: (parent: GLTFFileLoader) => IGLTFLoader;
+        static HomogeneousCoordinates: boolean;
+        static IncrementalLoading: boolean;
+        onTextureLoaded: (texture: BaseTexture) => void;
+        onMaterialLoaded: (material: Material) => void;
+        onComplete: () => void;
+        extensions: ISceneLoaderPluginExtensions;
+        importMeshAsync(meshesNames: any, scene: Scene, data: any, rootUrl: string, onSuccess: (meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[]) => void, onError: () => void): void;
+        loadAsync(scene: Scene, data: string | ArrayBuffer, rootUrl: string, onSuccess: () => void, onError: () => void): void;
+        canDirectLoad(data: string): boolean;
+        private static _parse(data);
+        private _getLoader(loaderData);
+        private static _parseBinary(data);
+        private static _parseV1(binaryReader);
+        private static _parseV2(binaryReader);
+        private static _parseVersion(version);
+        private static _compareVersion(a, b);
+        private static _decodeBufferToText(view);
+    }
+}
+
+
+declare module BABYLON.GLTF1 {
+    /**
+    * Enums
+    */
+    enum EComponentType {
+        BYTE = 5120,
+        UNSIGNED_BYTE = 5121,
+        SHORT = 5122,
+        UNSIGNED_SHORT = 5123,
+        FLOAT = 5126,
+    }
+    enum EShaderType {
+        FRAGMENT = 35632,
+        VERTEX = 35633,
+    }
+    enum EParameterType {
+        BYTE = 5120,
+        UNSIGNED_BYTE = 5121,
+        SHORT = 5122,
+        UNSIGNED_SHORT = 5123,
+        INT = 5124,
+        UNSIGNED_INT = 5125,
+        FLOAT = 5126,
+        FLOAT_VEC2 = 35664,
+        FLOAT_VEC3 = 35665,
+        FLOAT_VEC4 = 35666,
+        INT_VEC2 = 35667,
+        INT_VEC3 = 35668,
+        INT_VEC4 = 35669,
+        BOOL = 35670,
+        BOOL_VEC2 = 35671,
+        BOOL_VEC3 = 35672,
+        BOOL_VEC4 = 35673,
+        FLOAT_MAT2 = 35674,
+        FLOAT_MAT3 = 35675,
+        FLOAT_MAT4 = 35676,
+        SAMPLER_2D = 35678,
+    }
+    enum ETextureWrapMode {
+        CLAMP_TO_EDGE = 33071,
+        MIRRORED_REPEAT = 33648,
+        REPEAT = 10497,
+    }
+    enum ETextureFilterType {
+        NEAREST = 9728,
+        LINEAR = 9728,
+        NEAREST_MIPMAP_NEAREST = 9984,
+        LINEAR_MIPMAP_NEAREST = 9985,
+        NEAREST_MIPMAP_LINEAR = 9986,
+        LINEAR_MIPMAP_LINEAR = 9987,
+    }
+    enum ETextureFormat {
+        ALPHA = 6406,
+        RGB = 6407,
+        RGBA = 6408,
+        LUMINANCE = 6409,
+        LUMINANCE_ALPHA = 6410,
+    }
+    enum ECullingType {
+        FRONT = 1028,
+        BACK = 1029,
+        FRONT_AND_BACK = 1032,
+    }
+    enum EBlendingFunction {
+        ZERO = 0,
+        ONE = 1,
+        SRC_COLOR = 768,
+        ONE_MINUS_SRC_COLOR = 769,
+        DST_COLOR = 774,
+        ONE_MINUS_DST_COLOR = 775,
+        SRC_ALPHA = 770,
+        ONE_MINUS_SRC_ALPHA = 771,
+        DST_ALPHA = 772,
+        ONE_MINUS_DST_ALPHA = 773,
+        CONSTANT_COLOR = 32769,
+        ONE_MINUS_CONSTANT_COLOR = 32770,
+        CONSTANT_ALPHA = 32771,
+        ONE_MINUS_CONSTANT_ALPHA = 32772,
+        SRC_ALPHA_SATURATE = 776,
+    }
+    /**
+    * Interfaces
+    */
+    interface IGLTFProperty {
+        extensions?: Object;
+        extras?: Object;
+    }
+    interface IGLTFChildRootProperty extends IGLTFProperty {
+        name?: string;
+    }
+    interface IGLTFAccessor extends IGLTFChildRootProperty {
+        bufferView: string;
+        byteOffset: number;
+        byteStride: number;
+        count: number;
+        type: string;
+        componentType: EComponentType;
+        max?: number[];
+        min?: number[];
+        name?: string;
+    }
+    interface IGLTFBufferView extends IGLTFChildRootProperty {
+        buffer: string;
+        byteOffset: number;
+        byteLength: number;
+        target?: number;
+    }
+    interface IGLTFBuffer extends IGLTFChildRootProperty {
+        uri: string;
+        byteLength?: number;
+        type?: string;
+    }
+    interface IGLTFShader extends IGLTFChildRootProperty {
+        uri: string;
+        type: EShaderType;
+    }
+    interface IGLTFProgram extends IGLTFChildRootProperty {
+        attributes: string[];
+        fragmentShader: string;
+        vertexShader: string;
+    }
+    interface IGLTFTechniqueParameter {
+        type: number;
+        count?: number;
+        semantic?: string;
+        node?: string;
+        value?: number | boolean | string | Array<any>;
+        source?: string;
+        babylonValue?: any;
+    }
+    interface IGLTFTechniqueCommonProfile {
+        lightingModel: string;
+        texcoordBindings: Object;
+        parameters?: Array<any>;
+    }
+    interface IGLTFTechniqueStatesFunctions {
+        blendColor?: number[];
+        blendEquationSeparate?: number[];
+        blendFuncSeparate?: number[];
+        colorMask: boolean[];
+        cullFace: number[];
+    }
+    interface IGLTFTechniqueStates {
+        enable: number[];
+        functions: IGLTFTechniqueStatesFunctions;
+    }
+    interface IGLTFTechnique extends IGLTFChildRootProperty {
+        parameters: Object;
+        program: string;
+        attributes: Object;
+        uniforms: Object;
+        states: IGLTFTechniqueStates;
+    }
+    interface IGLTFMaterial extends IGLTFChildRootProperty {
+        technique?: string;
+        values: string[];
+    }
+    interface IGLTFMeshPrimitive extends IGLTFProperty {
+        attributes: Object;
+        indices: string;
+        material: string;
+        mode?: number;
+    }
+    interface IGLTFMesh extends IGLTFChildRootProperty {
+        primitives: IGLTFMeshPrimitive[];
+    }
+    interface IGLTFImage extends IGLTFChildRootProperty {
+        uri: string;
+    }
+    interface IGLTFSampler extends IGLTFChildRootProperty {
+        magFilter?: number;
+        minFilter?: number;
+        wrapS?: number;
+        wrapT?: number;
+    }
+    interface IGLTFTexture extends IGLTFChildRootProperty {
+        sampler: string;
+        source: string;
+        format?: ETextureFormat;
+        internalFormat?: ETextureFormat;
+        target?: number;
+        type?: number;
+        babylonTexture?: Texture;
+    }
+    interface IGLTFAmbienLight {
+        color?: number[];
+    }
+    interface IGLTFDirectionalLight {
+        color?: number[];
+    }
+    interface IGLTFPointLight {
+        color?: number[];
+        constantAttenuation?: number;
+        linearAttenuation?: number;
+        quadraticAttenuation?: number;
+    }
+    interface IGLTFSpotLight {
+        color?: number[];
+        constantAttenuation?: number;
+        fallOfAngle?: number;
+        fallOffExponent?: number;
+        linearAttenuation?: number;
+        quadraticAttenuation?: number;
+    }
+    interface IGLTFLight extends IGLTFChildRootProperty {
+        type: string;
+    }
+    interface IGLTFCameraOrthographic {
+        xmag: number;
+        ymag: number;
+        zfar: number;
+        znear: number;
+    }
+    interface IGLTFCameraPerspective {
+        aspectRatio: number;
+        yfov: number;
+        zfar: number;
+        znear: number;
+    }
+    interface IGLTFCamera extends IGLTFChildRootProperty {
+        type: string;
+    }
+    interface IGLTFAnimationChannelTarget {
+        id: string;
+        path: string;
+    }
+    interface IGLTFAnimationChannel {
+        sampler: string;
+        target: IGLTFAnimationChannelTarget;
+    }
+    interface IGLTFAnimationSampler {
+        input: string;
+        output: string;
+        interpolation?: string;
+    }
+    interface IGLTFAnimation extends IGLTFChildRootProperty {
+        channels?: IGLTFAnimationChannel[];
+        parameters?: Object;
+        samplers?: Object;
+    }
+    interface IGLTFNodeInstanceSkin {
+        skeletons: string[];
+        skin: string;
+        meshes: string[];
+    }
+    interface IGLTFSkins extends IGLTFChildRootProperty {
+        bindShapeMatrix: number[];
+        inverseBindMatrices: string;
+        jointNames: string[];
+        babylonSkeleton?: Skeleton;
+    }
+    interface IGLTFNode extends IGLTFChildRootProperty {
+        camera?: string;
+        children: string[];
+        skin?: string;
+        jointName?: string;
+        light?: string;
+        matrix: number[];
+        mesh?: string;
+        meshes?: string[];
+        rotation?: number[];
+        scale?: number[];
+        translation?: number[];
+        babylonNode?: Node;
+    }
+    interface IGLTFScene extends IGLTFChildRootProperty {
+        nodes: string[];
+    }
+    /**
+    * Runtime
+    */
+    interface IGLTFRuntime {
+        extensions: Object;
+        accessors: Object;
+        buffers: Object;
+        bufferViews: Object;
+        meshes: Object;
+        lights: Object;
+        cameras: Object;
+        nodes: Object;
+        images: Object;
+        textures: Object;
+        shaders: Object;
+        programs: Object;
+        samplers: Object;
+        techniques: Object;
+        materials: Object;
+        animations: Object;
+        skins: Object;
+        currentScene?: Object;
+        scenes: Object;
+        extensionsUsed: string[];
+        extensionsRequired?: string[];
+        buffersCount: number;
+        shaderscount: number;
+        scene: Scene;
+        rootUrl: string;
+        loadedBufferCount: number;
+        loadedBufferViews: {
+            [name: string]: ArrayBufferView;
+        };
+        loadedShaderCount: number;
+        importOnlyMeshes: boolean;
+        importMeshesNames?: string[];
+        dummyNodes: Node[];
+    }
+    /**
+    * Bones
+    */
+    interface INodeToRoot {
+        bone: Bone;
+        node: IGLTFNode;
+        id: string;
+    }
+    interface IJointNode {
+        node: IGLTFNode;
+        id: string;
+    }
+}
+
+
+declare module BABYLON.GLTF1 {
+    /**
+    * Implementation of the base glTF spec
+    */
+    class GLTFLoaderBase {
+        static CreateRuntime(parsedData: any, scene: Scene, rootUrl: string): IGLTFRuntime;
+        static LoadBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: () => void, onProgress?: () => void): void;
+        static LoadTextureBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: () => void): void;
+        static CreateTextureAsync(gltfRuntime: IGLTFRuntime, id: string, buffer: ArrayBufferView, onSuccess: (texture: Texture) => void, onError: () => void): void;
+        static LoadShaderStringAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (shaderString: string) => void, onError: () => void): void;
+        static LoadMaterialAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (material: Material) => void, onError: () => void): void;
+    }
+    /**
+    * glTF V1 Loader
+    */
+    class GLTFLoader implements IGLTFLoader {
+        static Extensions: {
+            [name: string]: GLTFLoaderExtension;
+        };
+        static RegisterExtension(extension: GLTFLoaderExtension): void;
+        importMeshAsync(meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess?: (meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[]) => void, onError?: () => void, onProgress?: () => void): boolean;
+        loadAsync(scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess: () => void, onError: () => void): void;
+        private _loadShadersAsync(gltfRuntime, onload);
+        private _loadBuffersAsync(gltfRuntime, onload, onProgress?);
+        private _createNodes(gltfRuntime);
+    }
+}
+
+
+declare module BABYLON.GLTF1 {
+    /**
+    * Utils functions for GLTF
+    */
+    class GLTFUtils {
+        /**
+         * Sets the given "parameter" matrix
+         * @param scene: the {BABYLON.Scene} object
+         * @param source: the source node where to pick the matrix
+         * @param parameter: the GLTF technique parameter
+         * @param uniformName: the name of the shader's uniform
+         * @param shaderMaterial: the shader material
+         */
+        static SetMatrix(scene: Scene, source: Node, parameter: IGLTFTechniqueParameter, uniformName: string, shaderMaterial: ShaderMaterial | Effect): void;
+        /**
+         * Sets the given "parameter" matrix
+         * @param shaderMaterial: the shader material
+         * @param uniform: the name of the shader's uniform
+         * @param value: the value of the uniform
+         * @param type: the uniform's type (EParameterType FLOAT, VEC2, VEC3 or VEC4)
+         */
+        static SetUniform(shaderMaterial: ShaderMaterial | Effect, uniform: string, value: any, type: number): boolean;
+        /**
+        * If the uri is a base64 string
+        * @param uri: the uri to test
+        */
+        static IsBase64(uri: string): boolean;
+        /**
+        * Decode the base64 uri
+        * @param uri: the uri to decode
+        */
+        static DecodeBase64(uri: string): ArrayBuffer;
+        /**
+        * Returns the wrap mode of the texture
+        * @param mode: the mode value
+        */
+        static GetWrapMode(mode: number): number;
+        /**
+         * Returns the byte stride giving an accessor
+         * @param accessor: the GLTF accessor objet
+         */
+        static GetByteStrideFromType(accessor: IGLTFAccessor): number;
+        /**
+         * Returns the texture filter mode giving a mode value
+         * @param mode: the filter mode value
+         */
+        static GetTextureFilterMode(mode: number): ETextureFilterType;
+        static GetBufferFromBufferView(gltfRuntime: IGLTFRuntime, bufferView: IGLTFBufferView, byteOffset: number, byteLength: number, componentType: EComponentType): ArrayBufferView;
+        /**
+         * Returns a buffer from its accessor
+         * @param gltfRuntime: the GLTF runtime
+         * @param accessor: the GLTF accessor
+         */
+        static GetBufferFromAccessor(gltfRuntime: IGLTFRuntime, accessor: IGLTFAccessor): any;
+        /**
+         * Decodes a buffer view into a string
+         * @param view: the buffer view
+         */
+        static DecodeBufferToText(view: ArrayBufferView): string;
+        /**
+         * Returns the default material of gltf. Related to
+         * https://github.com/KhronosGroup/glTF/tree/master/specification/1.0#appendix-a-default-material
+         * @param scene: the Babylon.js scene
+         */
+        static GetDefaultMaterial(scene: Scene): ShaderMaterial;
+        private static _DefaultMaterial;
+    }
+}
+
+
+declare module BABYLON.GLTF1 {
+    abstract class GLTFLoaderExtension {
+        private _name;
+        constructor(name: string);
+        readonly name: string;
+        /**
+        * Defines an override for loading the runtime
+        * Return true to stop further extensions from loading the runtime
+        */
+        loadRuntimeAsync(scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess: (gltfRuntime: IGLTFRuntime) => void, onError: () => void): boolean;
+        /**
+         * Defines an onverride for creating gltf runtime
+         * Return true to stop further extensions from creating the runtime
+         */
+        loadRuntimeExtensionsAsync(gltfRuntime: IGLTFRuntime, onSuccess: () => void, onError: () => void): boolean;
+        /**
+        * Defines an override for loading buffers
+        * Return true to stop further extensions from loading this buffer
+        */
+        loadBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: () => void, onProgress?: () => void): boolean;
+        /**
+        * Defines an override for loading texture buffers
+        * Return true to stop further extensions from loading this texture data
+        */
+        loadTextureBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: () => void): boolean;
+        /**
+        * Defines an override for creating textures
+        * Return true to stop further extensions from loading this texture
+        */
+        createTextureAsync(gltfRuntime: IGLTFRuntime, id: string, buffer: ArrayBufferView, onSuccess: (texture: Texture) => void, onError: () => void): boolean;
+        /**
+        * Defines an override for loading shader strings
+        * Return true to stop further extensions from loading this shader data
+        */
+        loadShaderStringAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (shaderString: string) => void, onError: () => void): boolean;
+        /**
+        * Defines an override for loading materials
+        * Return true to stop further extensions from loading this material
+        */
+        loadMaterialAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (material: Material) => void, onError: () => void): boolean;
+        static LoadRuntimeAsync(scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess: (gltfRuntime: IGLTFRuntime) => void, onError: () => void): void;
+        static LoadRuntimeExtensionsAsync(gltfRuntime: IGLTFRuntime, onSuccess: () => void, onError: () => void): void;
+        static LoadBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (bufferView: ArrayBufferView) => void, onError: () => void, onProgress?: () => void): void;
+        static LoadTextureAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (texture: Texture) => void, onError: () => void): void;
+        static LoadShaderStringAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (shaderData: string) => void, onError: () => void): void;
+        static LoadMaterialAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (material: Material) => void, onError: () => void): void;
+        private static LoadTextureBufferAsync(gltfRuntime, id, onSuccess, onError);
+        private static CreateTextureAsync(gltfRuntime, id, buffer, onSuccess, onError);
+        private static ApplyExtensions(func, defaultFunc);
+    }
+}
+
+
+declare module BABYLON.GLTF1 {
+    class GLTFBinaryExtension extends GLTFLoaderExtension {
+        private _bin;
+        constructor();
+        loadRuntimeAsync(scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess: (gltfRuntime: IGLTFRuntime) => void, onError: () => void): boolean;
+        loadBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: () => void): boolean;
+        loadTextureBufferAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (buffer: ArrayBufferView) => void, onError: () => void): boolean;
+        loadShaderStringAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (shaderString: string) => void, onError: () => void): boolean;
+    }
+}
+
+
+declare module BABYLON.GLTF1 {
+    class GLTFMaterialsCommonExtension extends GLTFLoaderExtension {
+        constructor();
+        loadRuntimeExtensionsAsync(gltfRuntime: IGLTFRuntime, onSuccess: () => void, onError: () => void): boolean;
+        loadMaterialAsync(gltfRuntime: IGLTFRuntime, id: string, onSuccess: (material: Material) => void, onError: () => void): boolean;
+        private _loadTexture(gltfRuntime, id, material, propertyPath, onError);
+    }
+}
+
+
+declare module BABYLON.GLTF2 {
+    /**
+    * Enums
+    */
+    enum EComponentType {
+        BYTE = 5120,
+        UNSIGNED_BYTE = 5121,
+        SHORT = 5122,
+        UNSIGNED_SHORT = 5123,
+        UNSIGNED_INT = 5125,
+        FLOAT = 5126,
+    }
+    enum EMeshPrimitiveMode {
+        POINTS = 0,
+        LINES = 1,
+        LINE_LOOP = 2,
+        LINE_STRIP = 3,
+        TRIANGLES = 4,
+        TRIANGLE_STRIP = 5,
+        TRIANGLE_FAN = 6,
+    }
+    enum ETextureMagFilter {
+        NEAREST = 9728,
+        LINEAR = 9729,
+    }
+    enum ETextureMinFilter {
+        NEAREST = 9728,
+        LINEAR = 9729,
+        NEAREST_MIPMAP_NEAREST = 9984,
+        LINEAR_MIPMAP_NEAREST = 9985,
+        NEAREST_MIPMAP_LINEAR = 9986,
+        LINEAR_MIPMAP_LINEAR = 9987,
+    }
+    enum ETextureWrapMode {
+        CLAMP_TO_EDGE = 33071,
+        MIRRORED_REPEAT = 33648,
+        REPEAT = 10497,
+    }
+    /**
+    * Interfaces
+    */
+    interface IGLTFProperty {
+        extensions?: Object;
+        extras?: any;
+    }
+    interface IGLTFChildRootProperty extends IGLTFProperty {
+        name?: string;
+    }
+    interface IGLTFAccessorSparseIndices extends IGLTFProperty {
+        bufferView: number;
+        byteOffset?: number;
+        componentType: EComponentType;
+    }
+    interface IGLTFAccessorSparseValues extends IGLTFProperty {
+        bufferView: number;
+        byteOffset?: number;
+    }
+    interface IGLTFAccessorSparse extends IGLTFProperty {
+        count: number;
+        indices: IGLTFAccessorSparseIndices;
+        values: IGLTFAccessorSparseValues;
+    }
+    interface IGLTFAccessor extends IGLTFChildRootProperty {
+        bufferView?: number;
+        byteOffset?: number;
+        componentType: EComponentType;
+        normalized?: boolean;
+        count: number;
+        type: string;
+        max: number[];
+        min: number[];
+        sparse?: IGLTFAccessorSparse;
+    }
+    interface IGLTFAnimationChannel extends IGLTFProperty {
+        sampler: number;
+        target: IGLTFAnimationChannelTarget;
+    }
+    interface IGLTFAnimationChannelTarget extends IGLTFProperty {
+        node: number;
+        path: string;
+    }
+    interface IGLTFAnimationSampler extends IGLTFProperty {
+        input: number;
+        interpolation?: string;
+        output: number;
+    }
+    interface IGLTFAnimation extends IGLTFChildRootProperty {
+        channels: IGLTFAnimationChannel[];
+        samplers: IGLTFAnimationSampler[];
+        targets?: any[];
+    }
+    interface IGLTFAsset extends IGLTFChildRootProperty {
+        copyright?: string;
+        generator?: string;
+        version: string;
+        minVersion?: string;
+    }
+    interface IGLTFBuffer extends IGLTFChildRootProperty {
+        uri?: string;
+        byteLength: number;
+        loadedData: ArrayBufferView;
+        loadedObservable: Observable<IGLTFBuffer>;
+    }
+    interface IGLTFBufferView extends IGLTFChildRootProperty {
+        buffer: number;
+        byteOffset?: number;
+        byteLength: number;
+        byteStride?: number;
+    }
+    interface IGLTFCameraOrthographic extends IGLTFProperty {
+        xmag: number;
+        ymag: number;
+        zfar: number;
+        znear: number;
+    }
+    interface IGLTFCameraPerspective extends IGLTFProperty {
+        aspectRatio: number;
+        yfov: number;
+        zfar: number;
+        znear: number;
+    }
+    interface IGLTFCamera extends IGLTFChildRootProperty {
+        orthographic?: IGLTFCameraOrthographic;
+        perspective?: IGLTFCameraPerspective;
+        type: string;
+    }
+    interface IGLTFImage extends IGLTFChildRootProperty {
+        uri?: string;
+        mimeType?: string;
+        bufferView?: number;
+    }
+    interface IGLTFMaterialNormalTextureInfo extends IGLTFTextureInfo {
+        scale: number;
+    }
+    interface IGLTFMaterialOcclusionTextureInfo extends IGLTFTextureInfo {
+        strength: number;
+    }
+    interface IGLTFMaterialPbrMetallicRoughness {
+        baseColorFactor: number[];
+        baseColorTexture: IGLTFTextureInfo;
+        metallicFactor: number;
+        roughnessFactor: number;
+        metallicRoughnessTexture: IGLTFTextureInfo;
+    }
+    interface IGLTFMaterial extends IGLTFChildRootProperty {
+        pbrMetallicRoughness?: IGLTFMaterialPbrMetallicRoughness;
+        normalTexture?: IGLTFMaterialNormalTextureInfo;
+        occlusionTexture?: IGLTFMaterialOcclusionTextureInfo;
+        emissiveTexture?: IGLTFTextureInfo;
+        emissiveFactor?: number[];
+        alphaMode?: string;
+        alphaCutoff: number;
+        doubleSided?: boolean;
+        index?: number;
+        babylonMaterial?: Material;
+    }
+    interface IGLTFMeshPrimitive extends IGLTFProperty {
+        attributes: {
+            [name: string]: number;
+        };
+        indices?: number;
+        material?: number;
+        mode?: EMeshPrimitiveMode;
+        targets?: [{
+            [name: string]: number;
+        }];
+    }
+    interface IGLTFMesh extends IGLTFChildRootProperty {
+        primitives: IGLTFMeshPrimitive[];
+        weights?: number[];
+    }
+    interface IGLTFNode extends IGLTFChildRootProperty {
+        camera?: number;
+        children?: number[];
+        skin?: number;
+        matrix?: number[];
+        mesh?: number;
+        rotation?: number[];
+        scale?: number[];
+        translation?: number[];
+        weights?: number[];
+        index?: number;
+        parent?: IGLTFNode;
+        babylonMesh?: Mesh;
+        babylonSkinToBones?: {
+            [skin: number]: Bone;
+        };
+        babylonAnimationTargets?: Node[];
+    }
+    interface IGLTFSampler extends IGLTFChildRootProperty {
+        magFilter?: ETextureMagFilter;
+        minFilter?: ETextureMinFilter;
+        wrapS?: ETextureWrapMode;
+        wrapT?: ETextureWrapMode;
+    }
+    interface IGLTFScene extends IGLTFChildRootProperty {
+        nodes: number[];
+    }
+    interface IGLTFSkin extends IGLTFChildRootProperty {
+        inverseBindMatrices?: number;
+        skeleton?: number;
+        joints: number[];
+        index?: number;
+        babylonSkeleton?: Skeleton;
+    }
+    interface IGLTFTexture extends IGLTFChildRootProperty {
+        sampler?: number;
+        source: number;
+        babylonTextures?: Texture[];
+        blobURL?: string;
+    }
+    interface IGLTFTextureInfo {
+        index: number;
+        texCoord?: number;
+    }
+    interface IGLTF extends IGLTFProperty {
+        accessors?: IGLTFAccessor[];
+        animations?: IGLTFAnimation[];
+        asset: IGLTFAsset;
+        buffers?: IGLTFBuffer[];
+        bufferViews?: IGLTFBufferView[];
+        cameras?: IGLTFCamera[];
+        extensionsUsed?: string[];
+        extensionsRequired?: string[];
+        glExtensionsUsed?: string[];
+        images?: IGLTFImage[];
+        materials?: IGLTFMaterial[];
+        meshes?: IGLTFMesh[];
+        nodes?: IGLTFNode[];
+        samplers?: IGLTFSampler[];
+        scene?: number;
+        scenes?: IGLTFScene[];
+        skins?: IGLTFSkin[];
+        textures?: IGLTFTexture[];
+    }
+}
+
+
+declare module BABYLON.GLTF2 {
+    class GLTFLoader implements IGLTFLoader {
+        private _parent;
+        private _gltf;
+        private _errors;
+        private _babylonScene;
+        private _rootUrl;
+        private _defaultMaterial;
+        private _onSuccess;
+        private _onError;
+        private _renderReady;
+        private _renderPendingCount;
+        private _loaderPendingCount;
+        static Extensions: {
+            [name: string]: GLTFLoaderExtension;
+        };
+        static RegisterExtension(extension: GLTFLoaderExtension): void;
+        readonly gltf: IGLTF;
+        readonly babylonScene: Scene;
+        constructor(parent: GLTFFileLoader);
+        importMeshAsync(meshesNames: any, scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess: (meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[]) => void, onError: () => void): void;
+        loadAsync(scene: Scene, data: IGLTFLoaderData, rootUrl: string, onSuccess: () => void, onError: () => void): void;
+        private _loadAsync(nodeNames, scene, data, rootUrl, onSuccess, onError);
+        private _onRenderReady();
+        private _onLoaderComplete();
+        private _loadData(data);
+        private _showMeshes();
+        private _startAnimations();
+        private _clear();
+        private _loadScene(nodeNames);
+        private _loadSkin(node);
+        private _updateBone(node, parentNode, skin, inverseBindMatrixData);
+        private _createBone(node, skin);
+        private _loadMesh(node);
+        private _loadMeshData(node, mesh, babylonMesh);
+        private _assignMaterial(multiMaterial, index, subMaterial);
+        private _loadVertexDataAsync(primitive, onSuccess);
+        private _createMorphTargets(node, mesh, primitive, babylonMesh);
+        private _loadMorphTargetsData(mesh, primitive, vertexData, babylonMesh);
+        private _loadTransform(node, babylonMesh);
+        private _traverseNodes(indices, action, parentNode?);
+        private _traverseNode(index, action, parentNode?);
+        private _loadAnimations();
+        private _loadAnimationChannel(animation, animationIndex, channelIndex);
+        private _loadBufferAsync(index, onSuccess);
+        private _loadBufferViewAsync(bufferView, byteOffset, byteLength, componentType, onSuccess);
+        private _loadAccessorAsync(accessor, onSuccess);
+        addPendingData(data: any): void;
+        removePendingData(data: any): void;
+        addLoaderPendingData(data: any): void;
+        removeLoaderPendingData(data: any): void;
+        private _getDefaultMaterial();
+        private _loadMaterialMetallicRoughnessProperties(material);
+        loadMaterial(index: number, assign: (material: Material) => void): void;
+        createPbrMaterial(material: IGLTFMaterial): void;
+        loadMaterialBaseProperties(material: IGLTFMaterial): void;
+        loadMaterialAlphaProperties(material: IGLTFMaterial): void;
+        loadTexture(textureInfo: IGLTFTextureInfo): Texture;
+    }
+}
+
+
+declare module BABYLON.GLTF2 {
+    /**
+    * Utils functions for GLTF
+    */
+    class GLTFUtils {
+        /**
+        * If the uri is a base64 string
+        * @param uri: the uri to test
+        */
+        static IsBase64(uri: string): boolean;
+        /**
+        * Decode the base64 uri
+        * @param uri: the uri to decode
+        */
+        static DecodeBase64(uri: string): ArrayBuffer;
+        static ForEach(view: Uint16Array | Uint32Array | Float32Array, func: (nvalue: number, index: number) => void): void;
+        /**
+        * Returns the wrap mode of the texture
+        * @param mode: the mode value
+        */
+        static GetWrapMode(mode: number): number;
+        /**
+         * Returns the byte stride giving an accessor
+         * @param accessor: the GLTF accessor objet
+         */
+        static GetByteStrideFromType(accessor: IGLTFAccessor): number;
+        /**
+         * Returns the texture filter mode giving a mode value
+         * @param mode: the filter mode value
+         */
+        static GetTextureFilterMode(mode: number): ETextureMinFilter;
+        /**
+         * Decodes a buffer view into a string
+         * @param view: the buffer view
+         */
+        static DecodeBufferToText(view: ArrayBufferView): string;
+    }
+}
+
+
+declare module BABYLON.GLTF2 {
+    abstract class GLTFLoaderExtension {
+        enabled: boolean;
+        readonly abstract name: string;
+        protected loadMaterial(loader: GLTFLoader, material: IGLTFMaterial, assign: (material: Material) => void): boolean;
+        static _Extensions: GLTFLoaderExtension[];
+        static LoadMaterial(loader: GLTFLoader, material: IGLTFMaterial, assign: (material: Material) => void): boolean;
+        private static _ApplyExtensions(action);
+    }
+}
+
+
+declare module BABYLON.GLTF2.Extensions {
+    class MSFTLOD extends GLTFLoaderExtension {
+        readonly name: string;
+        protected loadMaterial(loader: GLTFLoader, material: IGLTFMaterial, assign: (material: Material) => void): boolean;
+        private loadMaterialLOD(loader, material, materialLODs, lod, assign);
+    }
+}
+
+
+declare module BABYLON.GLTF2.Extensions {
+    class KHRMaterialsPbrSpecularGlossiness extends GLTFLoaderExtension {
+        readonly name: string;
+        protected loadMaterial(loader: GLTFLoader, material: IGLTFMaterial, assign: (material: Material) => void): boolean;
+        private _loadSpecularGlossinessProperties(loader, material, properties);
+    }
+}

dist/loaders/babylon.objFileLoader.d.ts

@@ -0,0 +1,74 @@
+
+declare module BABYLON {
+    /**
+     * Class reading and parsing the MTL file bundled with the obj file.
+     */
+    class MTLFileLoader {
+        materials: BABYLON.StandardMaterial[];
+        /**
+         * This function will read the mtl file and create each material described inside
+         * This function could be improve by adding :
+         * -some component missing (Ni, Tf...)
+         * -including the specific options available
+         *
+         * @param scene
+         * @param data
+         * @param rootUrl
+         */
+        parseMTL: (scene: Scene, data: string, rootUrl: string) => void;
+        /**
+         * Gets the texture for the material.
+         *
+         * If the material is imported from input file,
+         * We sanitize the url to ensure it takes the textre from aside the material.
+         *
+         * @param rootUrl The root url to load from
+         * @param value The value stored in the mtl
+         * @return The Texture
+         */
+        private static _getTexture(rootUrl, value, scene);
+    }
+    class OBJFileLoader implements ISceneLoaderPlugin {
+        static OPTIMIZE_WITH_UV: boolean;
+        extensions: string;
+        obj: RegExp;
+        group: RegExp;
+        mtllib: RegExp;
+        usemtl: RegExp;
+        smooth: RegExp;
+        vertexPattern: RegExp;
+        normalPattern: RegExp;
+        uvPattern: RegExp;
+        facePattern1: RegExp;
+        facePattern2: RegExp;
+        facePattern3: RegExp;
+        facePattern4: RegExp;
+        /**
+         * Calls synchronously the MTL file attached to this obj.
+         * Load function or importMesh function don't enable to load 2 files in the same time asynchronously.
+         * Without this function materials are not displayed in the first frame (but displayed after).
+         * In consequence it is impossible to get material information in your HTML file
+         *
+         * @param url The URL of the MTL file
+         * @param rootUrl
+         * @param onSuccess Callback function to be called when the MTL file is loaded
+         * @private
+         */
+        private _loadMTL(url, rootUrl, onSuccess);
+        importMesh(meshesNames: any, scene: Scene, data: any, rootUrl: string, meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[]): boolean;
+        load(scene: Scene, data: string, rootUrl: string): boolean;
+        /**
+         * Read the OBJ file and create an Array of meshes.
+         * Each mesh contains all information given by the OBJ and the MTL file.
+         * i.e. vertices positions and indices, optional normals values, optional UV values, optional material
+         *
+         * @param meshesNames
+         * @param scene BABYLON.Scene The scene where are displayed the data
+         * @param data String The content of the obj file
+         * @param rootUrl String The path to the folder
+         * @returns Array<AbstractMesh>
+         * @private
+         */
+        private _parseSolid(meshesNames, scene, data, rootUrl);
+    }
+}

dist/loaders/babylon.objFileLoader.js

@@ -0,0 +1,778 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+var BABYLON;
+(function (BABYLON) {
+    /**
+     * Class reading and parsing the MTL file bundled with the obj file.
+     */
+    var MTLFileLoader = (function () {
+        function MTLFileLoader() {
+            // All material loaded from the mtl will be set here
+            this.materials = [];
+            /**
+             * This function will read the mtl file and create each material described inside
+             * This function could be improve by adding :
+             * -some component missing (Ni, Tf...)
+             * -including the specific options available
+             *
+             * @param scene
+             * @param data
+             * @param rootUrl
+             */
+            this.parseMTL = function (scene, data, rootUrl) {
+                //Split the lines from the file
+                var lines = data.split('\n');
+                //Space char
+                var delimiter_pattern = /\s+/;
+                //Array with RGB colors
+                var color;
+                //New material
+                var material;
+                //Look at each line
+                for (var i = 0; i < lines.length; i++) {
+                    var line = lines[i].trim();
+                    // Blank line or comment
+                    if (line.length === 0 || line.charAt(0) === '#') {
+                        continue;
+                    }
+                    //Get the first parameter (keyword)
+                    var pos = line.indexOf(' ');
+                    var key = (pos >= 0) ? line.substring(0, pos) : line;
+                    key = key.toLowerCase();
+                    //Get the data following the key
+                    var value = (pos >= 0) ? line.substring(pos + 1).trim() : "";
+                    //This mtl keyword will create the new material
+                    if (key === "newmtl") {
+                        //Check if it is the first material.
+                        // Materials specifications are described after this keyword.
+                        if (material) {
+                            //Add the previous material in the material array.
+                            this.materials.push(material);
+                        }
+                        //Create a new material.
+                        // value is the name of the material read in the mtl file
+                        material = new BABYLON.StandardMaterial(value, scene);
+                    }
+                    else if (key === "kd") {
+                        // Diffuse color (color under white light) using RGB values
+                        //value  = "r g b"
+                        color = value.split(delimiter_pattern, 3);
+                        //color = [r,g,b]
+                        //Set tghe color into the material
+                        material.diffuseColor = BABYLON.Color3.FromArray(color);
+                    }
+                    else if (key === "ka") {
+                        // Ambient color (color under shadow) using RGB values
+                        //value = "r g b"
+                        color = value.split(delimiter_pattern, 3);
+                        //color = [r,g,b]
+                        //Set tghe color into the material
+                        material.ambientColor = BABYLON.Color3.FromArray(color);
+                    }
+                    else if (key === "ks") {
+                        // Specular color (color when light is reflected from shiny surface) using RGB values
+                        //value = "r g b"
+                        color = value.split(delimiter_pattern, 3);
+                        //color = [r,g,b]
+                        //Set the color into the material
+                        material.specularColor = BABYLON.Color3.FromArray(color);
+                    }
+                    else if (key === "ns") {
+                        //value = "Integer"
+                        material.specularPower = value;
+                    }
+                    else if (key === "d") {
+                        //d is dissolve for current material. It mean alpha for BABYLON
+                        material.alpha = value;
+                        //Texture
+                        //This part can be improved by adding the possible options of texture
+                    }
+                    else if (key === "map_ka") {
+                        // ambient texture map with a loaded image
+                        //We must first get the folder of the image
+                        material.ambientTexture = MTLFileLoader._getTexture(rootUrl, value, scene);
+                    }
+                    else if (key === "map_kd") {
+                        // Diffuse texture map with a loaded image
+                        material.diffuseTexture = MTLFileLoader._getTexture(rootUrl, value, scene);
+                    }
+                    else if (key === "map_ks") {
+                        // Specular texture map with a loaded image
+                        //We must first get the folder of the image
+                        material.specularTexture = MTLFileLoader._getTexture(rootUrl, value, scene);
+                    }
+                    else if (key === "map_ns") {
+                        //Specular
+                        //Specular highlight component
+                        //We must first get the folder of the image
+                        //
+                        //Not supported by BABYLON
+                        //
+                        //    continue;
+                    }
+                    else if (key === "map_bump") {
+                        //The bump texture
+                        material.bumpTexture = MTLFileLoader._getTexture(rootUrl, value, scene);
+                    }
+                    else if (key === "map_d") {
+                        // The dissolve of the material
+                        material.opacityTexture = MTLFileLoader._getTexture(rootUrl, value, scene);
+                        //Options for illumination
+                    }
+                    else if (key === "illum") {
+                        //Illumination
+                        if (value === "0") {
+                            //That mean Kd == Kd
+                        }
+                        else if (value === "1") {
+                            //Color on and Ambient on
+                        }
+                        else if (value === "2") {
+                            //Highlight on
+                        }
+                        else if (value === "3") {
+                            //Reflection on and Ray trace on
+                        }
+                        else if (value === "4") {
+                            //Transparency: Glass on, Reflection: Ray trace on
+                        }
+                        else if (value === "5") {
+                            //Reflection: Fresnel on and Ray trace on
+                        }
+                        else if (value === "6") {
+                            //Transparency: Refraction on, Reflection: Fresnel off and Ray trace on
+                        }
+                        else if (value === "7") {
+                            //Transparency: Refraction on, Reflection: Fresnel on and Ray trace on
+                        }
+                        else if (value === "8") {
+                            //Reflection on and Ray trace off
+                        }
+                        else if (value === "9") {
+                            //Transparency: Glass on, Reflection: Ray trace off
+                        }
+                        else if (value === "10") {
+                            //Casts shadows onto invisible surfaces
+                        }
+                    }
+                    else {
+                        // console.log("Unhandled expression at line : " + i +'\n' + "with value : " + line);
+                    }
+                }
+                //At the end of the file, add the last material
+                this.materials.push(material);
+            };
+        }
+        /**
+         * Gets the texture for the material.
+         *
+         * If the material is imported from input file,
+         * We sanitize the url to ensure it takes the textre from aside the material.
+         *
+         * @param rootUrl The root url to load from
+         * @param value The value stored in the mtl
+         * @return The Texture
+         */
+        MTLFileLoader._getTexture = function (rootUrl, value, scene) {
+            var url = rootUrl;
+            // Load from input file.
+            if (rootUrl === "file:") {
+                var lastDelimiter = value.lastIndexOf("\\");
+                if (lastDelimiter === -1) {
+                    lastDelimiter = value.lastIndexOf("/");
+                }
+                if (lastDelimiter > -1) {
+                    url += value.substr(lastDelimiter + 1);
+                }
+                else {
+                    url += value;
+                }
+            }
+            else {
+                url += value;
+            }
+            return new BABYLON.Texture(url, scene);
+        };
+        return MTLFileLoader;
+    }());
+    BABYLON.MTLFileLoader = MTLFileLoader;
+    var OBJFileLoader = (function () {
+        function OBJFileLoader() {
+            this.extensions = ".obj";
+            this.obj = /^o/;
+            this.group = /^g/;
+            this.mtllib = /^mtllib /;
+            this.usemtl = /^usemtl /;
+            this.smooth = /^s /;
+            this.vertexPattern = /v( +[\d|\.|\+|\-|e|E]+)( +[\d|\.|\+|\-|e|E]+)( +[\d|\.|\+|\-|e|E]+)/;
+            // vn float float float
+            this.normalPattern = /vn( +[\d|\.|\+|\-|e|E]+)( +[\d|\.|\+|\-|e|E]+)( +[\d|\.|\+|\-|e|E]+)/;
+            // vt float float
+            this.uvPattern = /vt( +[\d|\.|\+|\-|e|E]+)( +[\d|\.|\+|\-|e|E]+)/;
+            // f vertex vertex vertex ...
+            this.facePattern1 = /f\s+(([\d]{1,}[\s]?){3,})+/;
+            // f vertex/uvs vertex/uvs vertex/uvs ...
+            this.facePattern2 = /f\s+((([\d]{1,}\/[\d]{1,}[\s]?){3,})+)/;
+            // f vertex/uvs/normal vertex/uvs/normal vertex/uvs/normal ...
+            this.facePattern3 = /f\s+((([\d]{1,}\/[\d]{1,}\/[\d]{1,}[\s]?){3,})+)/;
+            // f vertex//normal vertex//normal vertex//normal ...
+            this.facePattern4 = /f\s+((([\d]{1,}\/\/[\d]{1,}[\s]?){3,})+)/;
+        }
+        /**
+         * Calls synchronously the MTL file attached to this obj.
+         * Load function or importMesh function don't enable to load 2 files in the same time asynchronously.
+         * Without this function materials are not displayed in the first frame (but displayed after).
+         * In consequence it is impossible to get material information in your HTML file
+         *
+         * @param url The URL of the MTL file
+         * @param rootUrl
+         * @param onSuccess Callback function to be called when the MTL file is loaded
+         * @private
+         */
+        OBJFileLoader.prototype._loadMTL = function (url, rootUrl, onSuccess) {
+            //The complete path to the mtl file
+            var pathOfFile = BABYLON.Tools.BaseUrl + rootUrl + url;
+            // Loads through the babylon tools to allow fileInput search.
+            BABYLON.Tools.LoadFile(pathOfFile, onSuccess, null, null, false, function () { console.warn("Error - Unable to load " + pathOfFile); });
+        };
+        OBJFileLoader.prototype.importMesh = function (meshesNames, scene, data, rootUrl, meshes, particleSystems, skeletons) {
+            //get the meshes from OBJ file
+            var loadedMeshes = this._parseSolid(meshesNames, scene, data, rootUrl);
+            //Push meshes from OBJ file into the variable mesh of this function
+            if (meshes) {
+                loadedMeshes.forEach(function (mesh) {
+                    meshes.push(mesh);
+                });
+            }
+            return true;
+        };
+        OBJFileLoader.prototype.load = function (scene, data, rootUrl) {
+            //Get the 3D model
+            return this.importMesh(null, scene, data, rootUrl, null, null, null);
+        };
+        /**
+         * Read the OBJ file and create an Array of meshes.
+         * Each mesh contains all information given by the OBJ and the MTL file.
+         * i.e. vertices positions and indices, optional normals values, optional UV values, optional material
+         *
+         * @param meshesNames
+         * @param scene BABYLON.Scene The scene where are displayed the data
+         * @param data String The content of the obj file
+         * @param rootUrl String The path to the folder
+         * @returns Array<AbstractMesh>
+         * @private
+         */
+        OBJFileLoader.prototype._parseSolid = function (meshesNames, scene, data, rootUrl) {
+            var positions = []; //values for the positions of vertices
+            var normals = []; //Values for the normals
+            var uvs = []; //Values for the textures
+            var meshesFromObj = []; //[mesh] Contains all the obj meshes
+            var handledMesh; //The current mesh of meshes array
+            var indicesForBabylon = []; //The list of indices for VertexData
+            var wrappedPositionForBabylon = []; //The list of position in vectors
+            var wrappedUvsForBabylon = []; //Array with all value of uvs to match with the indices
+            var wrappedNormalsForBabylon = []; //Array with all value of normals to match with the indices
+            var tuplePosNorm = []; //Create a tuple with indice of Position, Normal, UV  [pos, norm, uvs]
+            var curPositionInIndices = 0;
+            var hasMeshes = false; //Meshes are defined in the file
+            var unwrappedPositionsForBabylon = []; //Value of positionForBabylon w/o Vector3() [x,y,z]
+            var unwrappedNormalsForBabylon = []; //Value of normalsForBabylon w/o Vector3()  [x,y,z]
+            var unwrappedUVForBabylon = []; //Value of uvsForBabylon w/o Vector3()      [x,y,z]
+            var triangles = []; //Indices from new triangles coming from polygons
+            var materialNameFromObj = ""; //The name of the current material
+            var fileToLoad = ""; //The name of the mtlFile to load
+            var materialsFromMTLFile = new MTLFileLoader();
+            var objMeshName = ""; //The name of the current obj mesh
+            var increment = 1; //Id for meshes created by the multimaterial
+            var isFirstMaterial = true;
+            /**
+             * Search for obj in the given array.
+             * This function is called to check if a couple of data already exists in an array.
+             *
+             * If found, returns the index of the founded tuple index. Returns -1 if not found
+             * @param arr Array<{ normals: Array<number>, idx: Array<number> }>
+             * @param obj Array<number>
+             * @returns {boolean}
+             */
+            var isInArray = function (arr, obj) {
+                if (!arr[obj[0]])
+                    arr[obj[0]] = { normals: [], idx: [] };
+                var idx = arr[obj[0]].normals.indexOf(obj[1]);
+                return idx === -1 ? -1 : arr[obj[0]].idx[idx];
+            };
+            var isInArrayUV = function (arr, obj) {
+                if (!arr[obj[0]])
+                    arr[obj[0]] = { normals: [], idx: [], uv: [] };
+                var idx = arr[obj[0]].normals.indexOf(obj[1]);
+                if (idx != 1 && (obj[2] == arr[obj[0]].uv[idx])) {
+                    return arr[obj[0]].idx[idx];
+                }
+                return -1;
+            };
+            /**
+             * This function set the data for each triangle.
+             * Data are position, normals and uvs
+             * If a tuple of (position, normal) is not set, add the data into the corresponding array
+             * If the tuple already exist, add only their indice
+             *
+             * @param indicePositionFromObj Integer The index in positions array
+             * @param indiceUvsFromObj Integer The index in uvs array
+             * @param indiceNormalFromObj Integer The index in normals array
+             * @param positionVectorFromOBJ Vector3 The value of position at index objIndice
+             * @param textureVectorFromOBJ Vector3 The value of uvs
+             * @param normalsVectorFromOBJ Vector3 The value of normals at index objNormale
+             */
+            var setData = function (indicePositionFromObj, indiceUvsFromObj, indiceNormalFromObj, positionVectorFromOBJ, textureVectorFromOBJ, normalsVectorFromOBJ) {
+                //Check if this tuple already exists in the list of tuples
+                var _index;
+                if (OBJFileLoader.OPTIMIZE_WITH_UV) {
+                    _index = isInArrayUV(tuplePosNorm, [
+                        indicePositionFromObj,
+                        indiceNormalFromObj,
+                        indiceUvsFromObj
+                    ]);
+                }
+                else {
+                    _index = isInArray(tuplePosNorm, [
+                        indicePositionFromObj,
+                        indiceNormalFromObj
+                    ]);
+                }
+                //If it not exists
+                if (_index == -1) {
+                    //Add an new indice.
+                    //The array of indices is only an array with his length equal to the number of triangles - 1.
+                    //We add vertices data in this order
+                    indicesForBabylon.push(wrappedPositionForBabylon.length);
+                    //Push the position of vertice for Babylon
+                    //Each element is a BABYLON.Vector3(x,y,z)
+                    wrappedPositionForBabylon.push(positionVectorFromOBJ);
+                    //Push the uvs for Babylon
+                    //Each element is a BABYLON.Vector3(u,v)
+                    wrappedUvsForBabylon.push(textureVectorFromOBJ);
+                    //Push the normals for Babylon
+                    //Each element is a BABYLON.Vector3(x,y,z)
+                    wrappedNormalsForBabylon.push(normalsVectorFromOBJ);
+                    //Add the tuple in the comparison list
+                    tuplePosNorm[indicePositionFromObj].normals.push(indiceNormalFromObj);
+                    tuplePosNorm[indicePositionFromObj].idx.push(curPositionInIndices++);
+                    if (OBJFileLoader.OPTIMIZE_WITH_UV)
+                        tuplePosNorm[indicePositionFromObj].uv.push(indiceUvsFromObj);
+                }
+                else {
+                    //The tuple already exists
+                    //Add the index of the already existing tuple
+                    //At this index we can get the value of position, normal and uvs of vertex
+                    indicesForBabylon.push(_index);
+                }
+            };
+            /**
+             * Transform BABYLON.Vector() object onto 3 digits in an array
+             */
+            var unwrapData = function () {
+                //Every array has the same length
+                for (var l = 0; l < wrappedPositionForBabylon.length; l++) {
+                    //Push the x, y, z values of each element in the unwrapped array
+                    unwrappedPositionsForBabylon.push(wrappedPositionForBabylon[l].x, wrappedPositionForBabylon[l].y, wrappedPositionForBabylon[l].z);
+                    unwrappedNormalsForBabylon.push(wrappedNormalsForBabylon[l].x, wrappedNormalsForBabylon[l].y, wrappedNormalsForBabylon[l].z);
+                    unwrappedUVForBabylon.push(wrappedUvsForBabylon[l].x, wrappedUvsForBabylon[l].y); //z is an optional value not supported by BABYLON
+                }
+                // Reset arrays for the next new meshes
+                wrappedPositionForBabylon = [];
+                wrappedNormalsForBabylon = [];
+                wrappedUvsForBabylon = [];
+                tuplePosNorm = [];
+                curPositionInIndices = 0;
+            };
+            /**
+             * Create triangles from polygons by recursion
+             * The best to understand how it works is to draw it in the same time you get the recursion.
+             * It is important to notice that a triangle is a polygon
+             * We get 4 patterns of face defined in OBJ File :
+             * facePattern1 = ["1","2","3","4","5","6"]
+             * facePattern2 = ["1/1","2/2","3/3","4/4","5/5","6/6"]
+             * facePattern3 = ["1/1/1","2/2/2","3/3/3","4/4/4","5/5/5","6/6/6"]
+             * facePattern4 = ["1//1","2//2","3//3","4//4","5//5","6//6"]
+             * Each pattern is divided by the same method
+             * @param face Array[String] The indices of elements
+             * @param v Integer The variable to increment
+             */
+            var getTriangles = function (face, v) {
+                //Work for each element of the array
+                if (v + 1 < face.length) {
+                    //Add on the triangle variable the indexes to obtain triangles
+                    triangles.push(face[0], face[v], face[v + 1]);
+                    //Incrementation for recursion
+                    v += 1;
+                    //Recursion
+                    getTriangles(face, v);
+                }
+                //Result obtained after 2 iterations:
+                //Pattern1 => triangle = ["1","2","3","1","3","4"];
+                //Pattern2 => triangle = ["1/1","2/2","3/3","1/1","3/3","4/4"];
+                //Pattern3 => triangle = ["1/1/1","2/2/2","3/3/3","1/1/1","3/3/3","4/4/4"];
+                //Pattern4 => triangle = ["1//1","2//2","3//3","1//1","3//3","4//4"];
+            };
+            /**
+             * Create triangles and push the data for each polygon for the pattern 1
+             * In this pattern we get vertice positions
+             * @param face
+             * @param v
+             */
+            var setDataForCurrentFaceWithPattern1 = function (face, v) {
+                //Get the indices of triangles for each polygon
+                getTriangles(face, v);
+                //For each element in the triangles array.
+                //This var could contains 1 to an infinity of triangles
+                for (var k = 0; k < triangles.length; k++) {
+                    // Set position indice
+                    var indicePositionFromObj = parseInt(triangles[k]) - 1;
+                    setData(indicePositionFromObj, 0, 0, //In the pattern 1, normals and uvs are not defined
+                    positions[indicePositionFromObj], //Get the vectors data
+                    BABYLON.Vector2.Zero(), BABYLON.Vector3.Up() //Create default vectors
+                    );
+                }
+                //Reset variable for the next line
+                triangles = [];
+            };
+            /**
+             * Create triangles and push the data for each polygon for the pattern 2
+             * In this pattern we get vertice positions and uvsu
+             * @param face
+             * @param v
+             */
+            var setDataForCurrentFaceWithPattern2 = function (face, v) {
+                //Get the indices of triangles for each polygon
+                getTriangles(face, v);
+                for (var k = 0; k < triangles.length; k++) {
+                    //triangle[k] = "1/1"
+                    //Split the data for getting position and uv
+                    var point = triangles[k].split("/"); // ["1", "1"]
+                    //Set position indice
+                    var indicePositionFromObj = parseInt(point[0]) - 1;
+                    //Set uv indice
+                    var indiceUvsFromObj = parseInt(point[1]) - 1;
+                    setData(indicePositionFromObj, indiceUvsFromObj, 0, //Default value for normals
+                    positions[indicePositionFromObj], //Get the values for each element
+                    uvs[indiceUvsFromObj], BABYLON.Vector3.Up() //Default value for normals
+                    );
+                }
+                //Reset variable for the next line
+                triangles = [];
+            };
+            /**
+             * Create triangles and push the data for each polygon for the pattern 3
+             * In this pattern we get vertice positions, uvs and normals
+             * @param face
+             * @param v
+             */
+            var setDataForCurrentFaceWithPattern3 = function (face, v) {
+                //Get the indices of triangles for each polygon
+                getTriangles(face, v);
+                for (var k = 0; k < triangles.length; k++) {
+                    //triangle[k] = "1/1/1"
+                    //Split the data for getting position, uv, and normals
+                    var point = triangles[k].split("/"); // ["1", "1", "1"]
+                    // Set position indice
+                    var indicePositionFromObj = parseInt(point[0]) - 1;
+                    // Set uv indice
+                    var indiceUvsFromObj = parseInt(point[1]) - 1;
+                    // Set normal indice
+                    var indiceNormalFromObj = parseInt(point[2]) - 1;
+                    setData(indicePositionFromObj, indiceUvsFromObj, indiceNormalFromObj, positions[indicePositionFromObj], uvs[indiceUvsFromObj], normals[indiceNormalFromObj] //Set the vector for each component
+                    );
+                }
+                //Reset variable for the next line
+                triangles = [];
+            };
+            /**
+             * Create triangles and push the data for each polygon for the pattern 4
+             * In this pattern we get vertice positions and normals
+             * @param face
+             * @param v
+             */
+            var setDataForCurrentFaceWithPattern4 = function (face, v) {
+                getTriangles(face, v);
+                for (var k = 0; k < triangles.length; k++) {
+                    //triangle[k] = "1//1"
+                    //Split the data for getting position and normals
+                    var point = triangles[k].split("//"); // ["1", "1"]
+                    // We check indices, and normals
+                    var indicePositionFromObj = parseInt(point[0]) - 1;
+                    var indiceNormalFromObj = parseInt(point[1]) - 1;
+                    setData(indicePositionFromObj, 1, //Default value for uv
+                    indiceNormalFromObj, positions[indicePositionFromObj], //Get each vector of data
+                    BABYLON.Vector2.Zero(), normals[indiceNormalFromObj]);
+                }
+                //Reset variable for the next line
+                triangles = [];
+            };
+            var addPreviousObjMesh = function () {
+                //Check if it is not the first mesh. Otherwise we don't have data.
+                if (meshesFromObj.length > 0) {
+                    //Get the previous mesh for applying the data about the faces
+                    //=> in obj file, faces definition append after the name of the mesh
+                    handledMesh = meshesFromObj[meshesFromObj.length - 1];
+                    //Set the data into Array for the mesh
+                    unwrapData();
+                    // Reverse tab. Otherwise face are displayed in the wrong sens
+                    indicesForBabylon.reverse();
+                    //Set the information for the mesh
+                    //Slice the array to avoid rewriting because of the fact this is the same var which be rewrited
+                    handledMesh.indices = indicesForBabylon.slice();
+                    handledMesh.positions = unwrappedPositionsForBabylon.slice();
+                    handledMesh.normals = unwrappedNormalsForBabylon.slice();
+                    handledMesh.uvs = unwrappedUVForBabylon.slice();
+                    //Reset the array for the next mesh
+                    indicesForBabylon = [];
+                    unwrappedPositionsForBabylon = [];
+                    unwrappedNormalsForBabylon = [];
+                    unwrappedUVForBabylon = [];
+                }
+            };
+            //Main function
+            //Split the file into lines
+            var lines = data.split('\n');
+            //Look at each line
+            for (var i = 0; i < lines.length; i++) {
+                var line = lines[i].trim();
+                var result;
+                //Comment or newLine
+                if (line.length === 0 || line.charAt(0) === '#') {
+                    continue;
+                    //Get information about one position possible for the vertices
+                }
+                else if ((result = this.vertexPattern.exec(line)) !== null) {
+                    //Create a Vector3 with the position x, y, z
+                    //Value of result:
+                    // ["v 1.0 2.0 3.0", "1.0", "2.0", "3.0"]
+                    //Add the Vector in the list of positions
+                    positions.push(new BABYLON.Vector3(parseFloat(result[1]), parseFloat(result[2]), parseFloat(result[3])));
+                }
+                else if ((result = this.normalPattern.exec(line)) !== null) {
+                    //Create a Vector3 with the normals x, y, z
+                    //Value of result
+                    // ["vn 1.0 2.0 3.0", "1.0", "2.0", "3.0"]
+                    //Add the Vector in the list of normals
+                    normals.push(new BABYLON.Vector3(parseFloat(result[1]), parseFloat(result[2]), parseFloat(result[3])));
+                }
+                else if ((result = this.uvPattern.exec(line)) !== null) {
+                    //Create a Vector2 with the normals u, v
+                    //Value of result
+                    // ["vt 0.1 0.2 0.3", "0.1", "0.2"]
+                    //Add the Vector in the list of uvs
+                    uvs.push(new BABYLON.Vector2(parseFloat(result[1]), parseFloat(result[2])));
+                    //Identify patterns of faces
+                    //Face could be defined in different type of pattern
+                }
+                else if ((result = this.facePattern3.exec(line)) !== null) {
+                    //Value of result:
+                    //["f 1/1/1 2/2/2 3/3/3", "1/1/1 2/2/2 3/3/3"...]
+                    //Set the data for this face
+                    setDataForCurrentFaceWithPattern3(result[1].trim().split(" "), // ["1/1/1", "2/2/2", "3/3/3"]
+                    1);
+                }
+                else if ((result = this.facePattern4.exec(line)) !== null) {
+                    //Value of result:
+                    //["f 1//1 2//2 3//3", "1//1 2//2 3//3"...]
+                    //Set the data for this face
+                    setDataForCurrentFaceWithPattern4(result[1].trim().split(" "), // ["1//1", "2//2", "3//3"]
+                    1);
+                }
+                else if ((result = this.facePattern2.exec(line)) !== null) {
+                    //Value of result:
+                    //["f 1/1 2/2 3/3", "1/1 2/2 3/3"...]
+                    //Set the data for this face
+                    setDataForCurrentFaceWithPattern2(result[1].trim().split(" "), // ["1/1", "2/2", "3/3"]
+                    1);
+                }
+                else if ((result = this.facePattern1.exec(line)) !== null) {
+                    //Value of result
+                    //["f 1 2 3", "1 2 3"...]
+                    //Set the data for this face
+                    setDataForCurrentFaceWithPattern1(result[1].trim().split(" "), // ["1", "2", "3"]
+                    1);
+                    //Define a mesh or an object
+                    //Each time this keyword is analysed, create a new Object with all data for creating a babylonMesh
+                }
+                else if (this.group.test(line) || this.obj.test(line)) {
+                    //Create a new mesh corresponding to the name of the group.
+                    //Definition of the mesh
+                    var objMesh = 
+                    //Set the name of the current obj mesh
+                    {
+                        name: line.substring(2).trim(),
+                        indices: undefined,
+                        positions: undefined,
+                        normals: undefined,
+                        uvs: undefined,
+                        materialName: ""
+                    };
+                    addPreviousObjMesh();
+                    //Push the last mesh created with only the name
+                    meshesFromObj.push(objMesh);
+                    //Set this variable to indicate that now meshesFromObj has objects defined inside
+                    hasMeshes = true;
+                    isFirstMaterial = true;
+                    increment = 1;
+                    //Keyword for applying a material
+                }
+                else if (this.usemtl.test(line)) {
+                    //Get the name of the material
+                    materialNameFromObj = line.substring(7).trim();
+                    //If this new material is in the same mesh
+                    if (!isFirstMaterial) {
+                        //Set the data for the previous mesh
+                        addPreviousObjMesh();
+                        //Create a new mesh
+                        var objMesh = 
+                        //Set the name of the current obj mesh
+                        {
+                            name: objMeshName + "_mm" + increment.toString(),
+                            indices: undefined,
+                            positions: undefined,
+                            normals: undefined,
+                            uvs: undefined,
+                            materialName: materialNameFromObj
+                        };
+                        increment++;
+                        //If meshes are already defined
+                        meshesFromObj.push(objMesh);
+                    }
+                    //Set the material name if the previous line define a mesh
+                    if (hasMeshes && isFirstMaterial) {
+                        //Set the material name to the previous mesh (1 material per mesh)
+                        meshesFromObj[meshesFromObj.length - 1].materialName = materialNameFromObj;
+                        isFirstMaterial = false;
+                    }
+                    //Keyword for loading the mtl file
+                }
+                else if (this.mtllib.test(line)) {
+                    //Get the name of mtl file
+                    fileToLoad = line.substring(7).trim();
+                    //Apply smoothing
+                }
+                else if (this.smooth.test(line)) {
+                    // smooth shading => apply smoothing
+                    //Toda  y I don't know it work with babylon and with obj.
+                    //With the obj file  an integer is set
+                }
+                else {
+                    //If there is another possibility
+                    console.log("Unhandled expression at line : " + line);
+                }
+            }
+            //At the end of the file, add the last mesh into the meshesFromObj array
+            if (hasMeshes) {
+                //Set the data for the last mesh
+                handledMesh = meshesFromObj[meshesFromObj.length - 1];
+                //Reverse indices for displaying faces in the good sens
+                indicesForBabylon.reverse();
+                //Get the good array
+                unwrapData();
+                //Set array
+                handledMesh.indices = indicesForBabylon;
+                handledMesh.positions = unwrappedPositionsForBabylon;
+                handledMesh.normals = unwrappedNormalsForBabylon;
+                handledMesh.uvs = unwrappedUVForBabylon;
+            }
+            //If any o or g keyword found, create a mesj with a random id
+            if (!hasMeshes) {
+                // reverse tab of indices
+                indicesForBabylon.reverse();
+                //Get positions normals uvs
+                unwrapData();
+                //Set data for one mesh
+                meshesFromObj.push({
+                    name: BABYLON.Geometry.RandomId(),
+                    indices: indicesForBabylon,
+                    positions: unwrappedPositionsForBabylon,
+                    normals: unwrappedNormalsForBabylon,
+                    uvs: unwrappedUVForBabylon,
+                    materialName: materialNameFromObj
+                });
+            }
+            //Create a BABYLON.Mesh list
+            var babylonMeshesArray = []; //The mesh for babylon
+            var materialToUse = [];
+            //Set data for each mesh
+            for (var j = 0; j < meshesFromObj.length; j++) {
+                //check meshesNames (stlFileLoader)
+                if (meshesNames && meshesFromObj[j].name) {
+                    if (meshesNames instanceof Array) {
+                        if (meshesNames.indexOf(meshesFromObj[j].name) == -1) {
+                            continue;
+                        }
+                    }
+                    else {
+                        if (meshesFromObj[j].name !== meshesNames) {
+                            continue;
+                        }
+                    }
+                }
+                //Get the current mesh
+                //Set the data with VertexBuffer for each mesh
+                handledMesh = meshesFromObj[j];
+                //Create a BABYLON.Mesh with the name of the obj mesh
+                var babylonMesh = new BABYLON.Mesh(meshesFromObj[j].name, scene);
+                //Push the name of the material to an array
+                //This is indispensable for the importMesh function
+                materialToUse.push(meshesFromObj[j].materialName);
+                var vertexData = new BABYLON.VertexData(); //The container for the values
+                //Set the data for the babylonMesh
+                vertexData.positions = handledMesh.positions;
+                vertexData.normals = handledMesh.normals;
+                vertexData.uvs = handledMesh.uvs;
+                vertexData.indices = handledMesh.indices;
+                //Set the data from the VertexBuffer to the current BABYLON.Mesh
+                vertexData.applyToMesh(babylonMesh);
+                //Push the mesh into an array
+                babylonMeshesArray.push(babylonMesh);
+            }
+            //load the materials
+            //Check if we have a file to load
+            if (fileToLoad !== "") {
+                //Load the file synchronously
+                this._loadMTL(fileToLoad, rootUrl, function (dataLoaded) {
+                    //Create materials thanks MTLLoader function
+                    materialsFromMTLFile.parseMTL(scene, dataLoaded, rootUrl);
+                    //Look at each material loaded in the mtl file
+                    for (var n = 0; n < materialsFromMTLFile.materials.length; n++) {
+                        //Three variables to get all meshes with the same material
+                        var startIndex = 0;
+                        var _indices = [];
+                        var _index;
+                        //The material from MTL file is used in the meshes loaded
+                        //Push the indice in an array
+                        //Check if the material is not used for another mesh
+                        while ((_index = materialToUse.indexOf(materialsFromMTLFile.materials[n].name, startIndex)) > -1) {
+                            _indices.push(_index);
+                            startIndex = _index + 1;
+                        }
+                        //If the material is not used dispose it
+                        if (_index == -1 && _indices.length == 0) {
+                            //If the material is not needed, remove it
+                            materialsFromMTLFile.materials[n].dispose();
+                        }
+                        else {
+                            for (var o = 0; o < _indices.length; o++) {
+                                //Apply the material to the BABYLON.Mesh for each mesh with the material
+                                babylonMeshesArray[_indices[o]].material = materialsFromMTLFile.materials[n];
+                            }
+                        }
+                    }
+                });
+            }
+            //Return an array with all BABYLON.Mesh
+            return babylonMeshesArray;
+        };
+        return OBJFileLoader;
+    }());
+    OBJFileLoader.OPTIMIZE_WITH_UV = false;
+    BABYLON.OBJFileLoader = OBJFileLoader;
+    if (BABYLON.SceneLoader) {
+        //Add this loader into the register plugin
+        BABYLON.SceneLoader.RegisterPlugin(new OBJFileLoader());
+    }
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=babylon.objFileLoader.js.map

dist/loaders/babylon.stlFileLoader.d.ts

@@ -0,0 +1,15 @@
+
+declare module BABYLON {
+    class STLFileLoader implements ISceneLoaderPlugin {
+        solidPattern: RegExp;
+        facetsPattern: RegExp;
+        normalPattern: RegExp;
+        vertexPattern: RegExp;
+        extensions: ISceneLoaderPluginExtensions;
+        importMesh(meshesNames: any, scene: Scene, data: any, rootUrl: string, meshes: AbstractMesh[], particleSystems: ParticleSystem[], skeletons: Skeleton[]): boolean;
+        load(scene: Scene, data: any, rootUrl: string): boolean;
+        private isBinary(data);
+        private parseBinary(mesh, data);
+        private parseASCII(mesh, solidData);
+    }
+}

dist/loaders/babylon.stlFileLoader.js

@@ -0,0 +1,163 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+var BABYLON;
+(function (BABYLON) {
+    var STLFileLoader = (function () {
+        function STLFileLoader() {
+            this.solidPattern = /solid (\S*)([\S\s]*)endsolid[ ]*(\S*)/g;
+            this.facetsPattern = /facet([\s\S]*?)endfacet/g;
+            this.normalPattern = /normal[\s]+([\-+]?[0-9]+\.?[0-9]*([eE][\-+]?[0-9]+)?)+[\s]+([\-+]?[0-9]*\.?[0-9]+([eE][\-+]?[0-9]+)?)+[\s]+([\-+]?[0-9]*\.?[0-9]+([eE][\-+]?[0-9]+)?)+/g;
+            this.vertexPattern = /vertex[\s]+([\-+]?[0-9]+\.?[0-9]*([eE][\-+]?[0-9]+)?)+[\s]+([\-+]?[0-9]*\.?[0-9]+([eE][\-+]?[0-9]+)?)+[\s]+([\-+]?[0-9]*\.?[0-9]+([eE][\-+]?[0-9]+)?)+/g;
+            // force data to come in as an ArrayBuffer
+            // we'll convert to string if it looks like it's an ASCII .stl
+            this.extensions = {
+                ".stl": { isBinary: true },
+            };
+        }
+        STLFileLoader.prototype.importMesh = function (meshesNames, scene, data, rootUrl, meshes, particleSystems, skeletons) {
+            var matches;
+            if (this.isBinary(data)) {
+                // binary .stl
+                var babylonMesh = new BABYLON.Mesh("stlmesh", scene);
+                this.parseBinary(babylonMesh, data);
+                if (meshes) {
+                    meshes.push(babylonMesh);
+                }
+                return true;
+            }
+            // ASCII .stl
+            // convert to string
+            var array_buffer = new Uint8Array(data);
+            var str = '';
+            for (var i = 0; i < data.byteLength; i++) {
+                str += String.fromCharCode(array_buffer[i]); // implicitly assumes little-endian
+            }
+            data = str;
+            while (matches = this.solidPattern.exec(data)) {
+                var meshName = matches[1];
+                var meshNameFromEnd = matches[3];
+                if (meshName != meshNameFromEnd) {
+                    BABYLON.Tools.Error("Error in STL, solid name != endsolid name");
+                    return false;
+                }
+                // check meshesNames
+                if (meshesNames && meshName) {
+                    if (meshesNames instanceof Array) {
+                        if (!meshesNames.indexOf(meshName)) {
+                            continue;
+                        }
+                    }
+                    else {
+                        if (meshName !== meshesNames) {
+                            continue;
+                        }
+                    }
+                }
+                // stl mesh name can be empty as well
+                meshName = meshName || "stlmesh";
+                var babylonMesh = new BABYLON.Mesh(meshName, scene);
+                this.parseASCII(babylonMesh, matches[2]);
+                if (meshes) {
+                    meshes.push(babylonMesh);
+                }
+            }
+            return true;
+        };
+        STLFileLoader.prototype.load = function (scene, data, rootUrl) {
+            var result = this.importMesh(null, scene, data, rootUrl, null, null, null);
+            if (result) {
+                scene.createDefaultCameraOrLight();
+            }
+            return result;
+        };
+        STLFileLoader.prototype.isBinary = function (data) {
+            // check if file size is correct for binary stl
+            var faceSize, nFaces, reader;
+            reader = new DataView(data);
+            faceSize = (32 / 8 * 3) + ((32 / 8 * 3) * 3) + (16 / 8);
+            nFaces = reader.getUint32(80, true);
+            if (80 + (32 / 8) + (nFaces * faceSize) === reader.byteLength) {
+                return true;
+            }
+            // check characters higher than ASCII to confirm binary
+            var fileLength = reader.byteLength;
+            for (var index = 0; index < fileLength; index++) {
+                if (reader.getUint8(index, false) > 127) {
+                    return true;
+                }
+            }
+            return false;
+        };
+        STLFileLoader.prototype.parseBinary = function (mesh, data) {
+            var reader = new DataView(data);
+            var faces = reader.getUint32(80, true);
+            var dataOffset = 84;
+            var faceLength = 12 * 4 + 2;
+            var offset = 0;
+            var positions = new Float32Array(faces * 3 * 3);
+            var normals = new Float32Array(faces * 3 * 3);
+            var indices = new Uint32Array(faces * 3);
+            var indicesCount = 0;
+            for (var face = 0; face < faces; face++) {
+                var start = dataOffset + face * faceLength;
+                var normalX = reader.getFloat32(start, true);
+                var normalY = reader.getFloat32(start + 4, true);
+                var normalZ = reader.getFloat32(start + 8, true);
+                for (var i = 1; i <= 3; i++) {
+                    var vertexstart = start + i * 12;
+                    // ordering is intentional to match ascii import
+                    positions[offset] = reader.getFloat32(vertexstart, true);
+                    positions[offset + 2] = reader.getFloat32(vertexstart + 4, true);
+                    positions[offset + 1] = reader.getFloat32(vertexstart + 8, true);
+                    normals[offset] = normalX;
+                    normals[offset + 2] = normalY;
+                    normals[offset + 1] = normalZ;
+                    offset += 3;
+                }
+                indices[indicesCount] = indicesCount++;
+                indices[indicesCount] = indicesCount++;
+                indices[indicesCount] = indicesCount++;
+            }
+            mesh.setVerticesData(BABYLON.VertexBuffer.PositionKind, positions);
+            mesh.setVerticesData(BABYLON.VertexBuffer.NormalKind, normals);
+            mesh.setIndices(indices);
+            mesh.computeWorldMatrix(true);
+        };
+        STLFileLoader.prototype.parseASCII = function (mesh, solidData) {
+            var positions = [];
+            var normals = [];
+            var indices = [];
+            var indicesCount = 0;
+            //load facets, ignoring loop as the standard doesn't define it can contain more than vertices
+            var matches;
+            while (matches = this.facetsPattern.exec(solidData)) {
+                var facet = matches[1];
+                //one normal per face
+                var normalMatches = this.normalPattern.exec(facet);
+                this.normalPattern.lastIndex = 0;
+                if (!normalMatches) {
+                    continue;
+                }
+                var normal = [Number(normalMatches[1]), Number(normalMatches[5]), Number(normalMatches[3])];
+                var vertexMatch;
+                while (vertexMatch = this.vertexPattern.exec(facet)) {
+                    positions.push(Number(vertexMatch[1]), Number(vertexMatch[5]), Number(vertexMatch[3]));
+                    normals.push(normal[0], normal[1], normal[2]);
+                }
+                indices.push(indicesCount++, indicesCount++, indicesCount++);
+                this.vertexPattern.lastIndex = 0;
+            }
+            this.facetsPattern.lastIndex = 0;
+            mesh.setVerticesData(BABYLON.VertexBuffer.PositionKind, positions);
+            mesh.setVerticesData(BABYLON.VertexBuffer.NormalKind, normals);
+            mesh.setIndices(indices);
+            mesh.computeWorldMatrix(true);
+        };
+        return STLFileLoader;
+    }());
+    BABYLON.STLFileLoader = STLFileLoader;
+    if (BABYLON.SceneLoader) {
+        BABYLON.SceneLoader.RegisterPlugin(new STLFileLoader());
+    }
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=babylon.stlFileLoader.js.map

dist/materialsLibrary/babylon.cellMaterial.d.ts

@@ -0,0 +1,30 @@
+
+declare module BABYLON {
+    class CellMaterial extends PushMaterial {
+        private _diffuseTexture;
+        diffuseTexture: BaseTexture;
+        diffuseColor: Color3;
+        _computeHighLevel: boolean;
+        computeHighLevel: boolean;
+        private _disableLighting;
+        disableLighting: boolean;
+        private _maxSimultaneousLights;
+        maxSimultaneousLights: number;
+        private _worldViewProjectionMatrix;
+        private _scaledDiffuse;
+        private _renderId;
+        constructor(name: string, scene: Scene);
+        needAlphaBlending(): boolean;
+        needAlphaTesting(): boolean;
+        getAlphaTestTexture(): BaseTexture;
+        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
+        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
+        getAnimatables(): IAnimatable[];
+        getActiveTextures(): BaseTexture[];
+        hasTexture(texture: BaseTexture): boolean;
+        dispose(forceDisposeEffect?: boolean): void;
+        clone(name: string): CellMaterial;
+        serialize(): any;
+        static Parse(source: any, scene: Scene, rootUrl: string): CellMaterial;
+    }
+}

dist/materialsLibrary/babylon.customMaterial.d.ts

@@ -1,16 +1,56 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts" />
+
 declare module BABYLON {
-    class CustomShaderHelper {
+    class CustomShaderStructure {
+        FragmentStore: string;
+        VertexStore: string;
+        constructor();
     }
-    interface ICustomMaterialBuilder {
-        (builder: CustomShaderHelper, name: string, mainPart: string, diffusePart: string, vertexPositionPart: string): string;
+    class ShaderSpecialParts {
+        constructor();
+        Fragment_Begin: string;
+        Fragment_Definitions: string;
+        Fragment_MainBegin: string;
+        Fragment_Custom_Diffuse: string;
+        Fragment_Custom_Alpha: string;
+        Fragment_Before_FragColor: string;
+        Vertex_Begin: string;
+        Vertex_Definitions: string;
+        Vertex_MainBegin: string;
+        Vertex_Before_PositionUpdated: string;
+        Vertex_Before_NormalUpdated: string;
+    }
+    class ShaderForVer3_0 extends CustomShaderStructure {
+        constructor();
+    }
+    class StandardShaderVersions {
+        static Ver3_0: any;
     }
     class CustomMaterial extends StandardMaterial {
-        builder: ICustomMaterialBuilder;
-        private _mainPart;
-        private _diffusePart;
-        private _vertexPositionPart;
-        constructor(name: string, builder: ICustomMaterialBuilder, scene: Scene);
-        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
+        static ShaderIndexer: number;
+        CustomParts: ShaderSpecialParts;
+        ShaderVersion: CustomShaderStructure;
+        _isCreatedShader: boolean;
+        _createdShaderName: string;
+        _customUniform: string[];
+        _newUniforms: string[];
+        _newUniformInstances: any[];
+        _newSamplerInstances: Texture[];
+        AttachAfterBind(mesh: Mesh, effect: Effect): void;
+        ReviewUniform(name: string, arr: string[]): string[];
+        Builder(shaderName: string, uniforms: string[], uniformBuffers: string[], samplers: string[], defines: StandardMaterialDefines): string;
+        SelectVersion(ver: string): void;
+        constructor(name: string, scene: Scene);
+        AddUniform(name: string, kind: string, param: any): CustomMaterial;
+        Fragment_Begin(shaderPart: string): CustomMaterial;
+        Fragment_Definitions(shaderPart: string): CustomMaterial;
+        Fragment_MainBegin(shaderPart: string): CustomMaterial;
+        Fragment_Custom_Diffuse(shaderPart: string): CustomMaterial;
+        Fragment_Custom_Alpha(shaderPart: string): CustomMaterial;
+        Fragment_Before_FragColor(shaderPart: string): CustomMaterial;
+        Vertex_Begin(shaderPart: string): CustomMaterial;
+        Vertex_Definitions(shaderPart: string): CustomMaterial;
+        Vertex_MainBegin(shaderPart: string): CustomMaterial;
+        Vertex_Before_PositionUpdated(shaderPart: string): CustomMaterial;
+        Vertex_Before_NormalUpdated(shaderPart: string): CustomMaterial;
     }
 }

dist/materialsLibrary/babylon.fireMaterial.d.ts

@@ -1,25 +1,26 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts" />
+
 declare module BABYLON {
-    class FireMaterial extends Material {
+    class FireMaterial extends PushMaterial {
+        private _diffuseTexture;
         diffuseTexture: BaseTexture;
+        private _distortionTexture;
         distortionTexture: BaseTexture;
+        private _opacityTexture;
         opacityTexture: BaseTexture;
         diffuseColor: Color3;
         speed: number;
         private _scaledDiffuse;
         private _renderId;
-        private _defines;
-        private _cachedDefines;
         private _lastTime;
         constructor(name: string, scene: Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): BaseTexture;
-        private _checkCache(scene, mesh?, useInstances?);
-        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
-        bindOnlyWorldMatrix(world: Matrix): void;
-        bind(world: Matrix, mesh?: Mesh): void;
+        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
+        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
         getAnimatables(): IAnimatable[];
+        getActiveTextures(): BaseTexture[];
+        hasTexture(texture: BaseTexture): boolean;
         dispose(forceDisposeEffect?: boolean): void;
         clone(name: string): FireMaterial;
         serialize(): any;

dist/materialsLibrary/babylon.fireMaterial.js

@@ -17,7 +17,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var BABYLON;
 (function (BABYLON) {
-    var maxSimultaneousLights = 4;
     var FireMaterialDefines = (function (_super) {
         __extends(FireMaterialDefines, _super);
         function FireMaterialDefines() {
@@ -33,7 +32,7 @@ var BABYLON;
             _this.BonesPerMesh = 0;
             _this.NUM_BONE_INFLUENCERS = 0;
             _this.INSTANCES = false;
-            _this._keys = Object.keys(_this);
+            _this.rebuild();
             return _this;
         }
         return FireMaterialDefines;
@@ -45,212 +44,205 @@ var BABYLON;
             _this.diffuseColor = new BABYLON.Color3(1, 1, 1);
             _this.speed = 1.0;
             _this._scaledDiffuse = new BABYLON.Color3();
-            _this._defines = new FireMaterialDefines();
-            _this._cachedDefines = new FireMaterialDefines();
             _this._lastTime = 0;
-            _this._cachedDefines.BonesPerMesh = -1;
             return _this;
         }
         FireMaterial.prototype.needAlphaBlending = function () {
-            return (this.alpha < 1.0);
+            return false;
         };
         FireMaterial.prototype.needAlphaTesting = function () {
-            return false;
+            return true;
         };
         FireMaterial.prototype.getAlphaTestTexture = function () {
             return null;
         };
         // Methods   
-        FireMaterial.prototype._checkCache = function (scene, mesh, useInstances) {
-            if (!mesh) {
-                return true;
-            }
-            if (this._defines.INSTANCES !== useInstances) {
-                return false;
-            }
-            if (mesh._materialDefines && mesh._materialDefines.isEqual(this._defines)) {
-                return true;
-            }
-            return false;
-        };
-        FireMaterial.prototype.isReady = function (mesh, useInstances) {
-            if (this.checkReadyOnlyOnce) {
-                if (this._wasPreviouslyReady) {
+        FireMaterial.prototype.isReadyForSubMesh = function (mesh, subMesh, useInstances) {
+            if (this.isFrozen) {
+                if (this._wasPreviouslyReady && subMesh.effect) {
                     return true;
                 }
             }
+            if (!subMesh._materialDefines) {
+                subMesh._materialDefines = new FireMaterialDefines();
+            }
+            var defines = subMesh._materialDefines;
             var scene = this.getScene();
-            if (!this.checkReadyOnEveryCall) {
+            if (!this.checkReadyOnEveryCall && subMesh.effect) {
                 if (this._renderId === scene.getRenderId()) {
-                    if (this._checkCache(scene, mesh, useInstances)) {
-                        return true;
-                    }
+                    return true;
                 }
             }
             var engine = scene.getEngine();
-            var needNormals = false;
-            var needUVs = false;
-            this._defines.reset();
             // Textures
-            if (scene.texturesEnabled) {
-                if (this.diffuseTexture && BABYLON.StandardMaterial.DiffuseTextureEnabled) {
-                    if (!this.diffuseTexture.isReady()) {
+            if (defines._areTexturesDirty) {
+                defines._needUVs = false;
+                if (this._diffuseTexture && BABYLON.StandardMaterial.DiffuseTextureEnabled) {
+                    if (!this._diffuseTexture.isReady()) {
                         return false;
                     }
                     else {
-                        needUVs = true;
-                        this._defines.DIFFUSE = true;
+                        defines._needUVs = true;
+                        defines.DIFFUSE = true;
                     }
                 }
             }
-            // Effect
-            if (scene.clipPlane) {
-                this._defines.CLIPPLANE = true;
-            }
-            this._defines.ALPHATEST = true;
-            // Point size
-            if (this.pointsCloud || scene.forcePointsCloud) {
-                this._defines.POINTSIZE = true;
-            }
-            // Fog
-            if (scene.fogEnabled && mesh && mesh.applyFog && scene.fogMode !== BABYLON.Scene.FOGMODE_NONE && this.fogEnabled) {
-                this._defines.FOG = true;
+            // Misc.
+            if (defines._areMiscDirty) {
+                defines.POINTSIZE = (this.pointsCloud || scene.forcePointsCloud);
+                defines.FOG = (scene.fogEnabled && mesh.applyFog && scene.fogMode !== BABYLON.Scene.FOGMODE_NONE && this.fogEnabled);
             }
+            // Values that need to be evaluated on every frame
+            BABYLON.MaterialHelper.PrepareDefinesForFrameBoundValues(scene, engine, defines, useInstances);
             // Attribs
-            if (mesh) {
-                if (needUVs) {
-                    if (mesh.isVerticesDataPresent(BABYLON.VertexBuffer.UVKind)) {
-                        this._defines.UV1 = true;
-                    }
-                }
-                if (mesh.useVertexColors && mesh.isVerticesDataPresent(BABYLON.VertexBuffer.ColorKind)) {
-                    this._defines.VERTEXCOLOR = true;
-                    if (mesh.hasVertexAlpha) {
-                        this._defines.VERTEXALPHA = true;
-                    }
-                }
-                if (mesh.useBones && mesh.computeBonesUsingShaders) {
-                    this._defines.NUM_BONE_INFLUENCERS = mesh.numBoneInfluencers;
-                    this._defines.BonesPerMesh = (mesh.skeleton.bones.length + 1);
-                }
-                // Instances
-                if (useInstances) {
-                    this._defines.INSTANCES = true;
-                }
-            }
+            BABYLON.MaterialHelper.PrepareDefinesForAttributes(mesh, defines, false, true);
             // Get correct effect      
-            if (!this._defines.isEqual(this._cachedDefines)) {
-                this._defines.cloneTo(this._cachedDefines);
+            if (defines.isDirty) {
+                defines.markAsProcessed();
                 scene.resetCachedMaterial();
                 // Fallbacks
                 var fallbacks = new BABYLON.EffectFallbacks();
-                if (this._defines.FOG) {
+                if (defines.FOG) {
                     fallbacks.addFallback(1, "FOG");
                 }
-                if (this._defines.NUM_BONE_INFLUENCERS > 0) {
+                if (defines.NUM_BONE_INFLUENCERS > 0) {
                     fallbacks.addCPUSkinningFallback(0, mesh);
                 }
                 //Attributes
                 var attribs = [BABYLON.VertexBuffer.PositionKind];
-                if (this._defines.UV1) {
+                if (defines.UV1) {
                     attribs.push(BABYLON.VertexBuffer.UVKind);
                 }
-                if (this._defines.VERTEXCOLOR) {
+                if (defines.VERTEXCOLOR) {
                     attribs.push(BABYLON.VertexBuffer.ColorKind);
                 }
-                BABYLON.MaterialHelper.PrepareAttributesForBones(attribs, mesh, this._defines, fallbacks);
-                BABYLON.MaterialHelper.PrepareAttributesForInstances(attribs, this._defines);
+                BABYLON.MaterialHelper.PrepareAttributesForBones(attribs, mesh, defines, fallbacks);
+                BABYLON.MaterialHelper.PrepareAttributesForInstances(attribs, defines);
                 // Legacy browser patch
                 var shaderName = "fire";
-                var join = this._defines.toString();
-                this._effect = scene.getEngine().createEffect(shaderName, attribs, ["world", "view", "viewProjection", "vEyePosition",
-                    "vFogInfos", "vFogColor", "pointSize",
-                    "vDiffuseInfos",
-                    "mBones",
-                    "vClipPlane", "diffuseMatrix",
-                    // Fire
-                    "time", "speed"
-                ], ["diffuseSampler",
-                    // Fire
-                    "distortionSampler", "opacitySampler"
-                ], join, fallbacks, this.onCompiled, this.onError);
+                var join = defines.toString();
+                subMesh.setEffect(scene.getEngine().createEffect(shaderName, {
+                    attributes: attribs,
+                    uniformsNames: ["world", "view", "viewProjection", "vEyePosition",
+                        "vFogInfos", "vFogColor", "pointSize",
+                        "vDiffuseInfos",
+                        "mBones",
+                        "vClipPlane", "diffuseMatrix",
+                        // Fire
+                        "time", "speed"
+                    ],
+                    uniformBuffersNames: [],
+                    samplers: ["diffuseSampler",
+                        // Fire
+                        "distortionSampler", "opacitySampler"
+                    ],
+                    defines: join,
+                    fallbacks: fallbacks,
+                    onCompiled: this.onCompiled,
+                    onError: this.onError
+                }, engine), defines);
             }
-            if (!this._effect.isReady()) {
+            if (!subMesh.effect.isReady()) {
                 return false;
             }
             this._renderId = scene.getRenderId();
             this._wasPreviouslyReady = true;
-            if (mesh) {
-                if (!mesh._materialDefines) {
-                    mesh._materialDefines = new FireMaterialDefines();
-                }
-                this._defines.cloneTo(mesh._materialDefines);
-            }
             return true;
         };
-        FireMaterial.prototype.bindOnlyWorldMatrix = function (world) {
-            this._effect.setMatrix("world", world);
-        };
-        FireMaterial.prototype.bind = function (world, mesh) {
+        FireMaterial.prototype.bindForSubMesh = function (world, mesh, subMesh) {
             var scene = this.getScene();
-            // Matrices        
+            var defines = subMesh._materialDefines;
+            if (!defines) {
+                return;
+            }
+            var effect = subMesh.effect;
+            this._activeEffect = effect;
+            // Matrices
             this.bindOnlyWorldMatrix(world);
-            this._effect.setMatrix("viewProjection", scene.getTransformMatrix());
+            this._activeEffect.setMatrix("viewProjection", scene.getTransformMatrix());
             // Bones
-            BABYLON.MaterialHelper.BindBonesParameters(mesh, this._effect);
-            if (scene.getCachedMaterial() !== this) {
+            BABYLON.MaterialHelper.BindBonesParameters(mesh, this._activeEffect);
+            if (this._mustRebind(scene, effect)) {
                 // Textures        
-                if (this.diffuseTexture && BABYLON.StandardMaterial.DiffuseTextureEnabled) {
-                    this._effect.setTexture("diffuseSampler", this.diffuseTexture);
-                    this._effect.setFloat2("vDiffuseInfos", this.diffuseTexture.coordinatesIndex, this.diffuseTexture.level);
-                    this._effect.setMatrix("diffuseMatrix", this.diffuseTexture.getTextureMatrix());
-                    this._effect.setTexture("distortionSampler", this.distortionTexture);
-                    this._effect.setTexture("opacitySampler", this.opacityTexture);
+                if (this._diffuseTexture && BABYLON.StandardMaterial.DiffuseTextureEnabled) {
+                    this._activeEffect.setTexture("diffuseSampler", this._diffuseTexture);
+                    this._activeEffect.setFloat2("vDiffuseInfos", this._diffuseTexture.coordinatesIndex, this._diffuseTexture.level);
+                    this._activeEffect.setMatrix("diffuseMatrix", this._diffuseTexture.getTextureMatrix());
+                    this._activeEffect.setTexture("distortionSampler", this._distortionTexture);
+                    this._activeEffect.setTexture("opacitySampler", this._opacityTexture);
                 }
                 // Clip plane
                 if (scene.clipPlane) {
                     var clipPlane = scene.clipPlane;
-                    this._effect.setFloat4("vClipPlane", clipPlane.normal.x, clipPlane.normal.y, clipPlane.normal.z, clipPlane.d);
+                    this._activeEffect.setFloat4("vClipPlane", clipPlane.normal.x, clipPlane.normal.y, clipPlane.normal.z, clipPlane.d);
                 }
                 // Point size
                 if (this.pointsCloud) {
-                    this._effect.setFloat("pointSize", this.pointSize);
+                    this._activeEffect.setFloat("pointSize", this.pointSize);
                 }
-                this._effect.setVector3("vEyePosition", scene._mirroredCameraPosition ? scene._mirroredCameraPosition : scene.activeCamera.position);
+                this._activeEffect.setVector3("vEyePosition", scene._mirroredCameraPosition ? scene._mirroredCameraPosition : scene.activeCamera.position);
             }
-            this._effect.setColor4("vDiffuseColor", this._scaledDiffuse, this.alpha * mesh.visibility);
+            this._activeEffect.setColor4("vDiffuseColor", this._scaledDiffuse, this.alpha * mesh.visibility);
             // View
             if (scene.fogEnabled && mesh.applyFog && scene.fogMode !== BABYLON.Scene.FOGMODE_NONE) {
-                this._effect.setMatrix("view", scene.getViewMatrix());
+                this._activeEffect.setMatrix("view", scene.getViewMatrix());
             }
             // Fog
-            BABYLON.MaterialHelper.BindFogParameters(scene, mesh, this._effect);
+            BABYLON.MaterialHelper.BindFogParameters(scene, mesh, this._activeEffect);
             // Time
             this._lastTime += scene.getEngine().getDeltaTime();
-            this._effect.setFloat("time", this._lastTime);
+            this._activeEffect.setFloat("time", this._lastTime);
             // Speed
-            this._effect.setFloat("speed", this.speed);
-            _super.prototype.bind.call(this, world, mesh);
+            this._activeEffect.setFloat("speed", this.speed);
+            this._afterBind(mesh, this._activeEffect);
         };
         FireMaterial.prototype.getAnimatables = function () {
             var results = [];
-            if (this.diffuseTexture && this.diffuseTexture.animations && this.diffuseTexture.animations.length > 0) {
-                results.push(this.diffuseTexture);
+            if (this._diffuseTexture && this._diffuseTexture.animations && this._diffuseTexture.animations.length > 0) {
+                results.push(this._diffuseTexture);
             }
-            if (this.distortionTexture && this.distortionTexture.animations && this.distortionTexture.animations.length > 0) {
-                results.push(this.distortionTexture);
+            if (this._distortionTexture && this._distortionTexture.animations && this._distortionTexture.animations.length > 0) {
+                results.push(this._distortionTexture);
             }
-            if (this.opacityTexture && this.opacityTexture.animations && this.opacityTexture.animations.length > 0) {
-                results.push(this.opacityTexture);
+            if (this._opacityTexture && this._opacityTexture.animations && this._opacityTexture.animations.length > 0) {
+                results.push(this._opacityTexture);
             }
             return results;
         };
+        FireMaterial.prototype.getActiveTextures = function () {
+            var activeTextures = _super.prototype.getActiveTextures.call(this);
+            if (this._diffuseTexture) {
+                activeTextures.push(this._diffuseTexture);
+            }
+            if (this._distortionTexture) {
+                activeTextures.push(this._distortionTexture);
+            }
+            if (this._opacityTexture) {
+                activeTextures.push(this._opacityTexture);
+            }
+            return activeTextures;
+        };
+        FireMaterial.prototype.hasTexture = function (texture) {
+            if (_super.prototype.hasTexture.call(this, texture)) {
+                return true;
+            }
+            if (this._diffuseTexture === texture) {
+                return true;
+            }
+            if (this._distortionTexture === texture) {
+                return true;
+            }
+            if (this._opacityTexture === texture) {
+                return true;
+            }
+            return false;
+        };
         FireMaterial.prototype.dispose = function (forceDisposeEffect) {
-            if (this.diffuseTexture) {
-                this.diffuseTexture.dispose();
+            if (this._diffuseTexture) {
+                this._diffuseTexture.dispose();
             }
-            if (this.distortionTexture) {
-                this.distortionTexture.dispose();
+            if (this._distortionTexture) {
+                this._distortionTexture.dispose();
             }
             _super.prototype.dispose.call(this, forceDisposeEffect);
         };
@@ -263,14 +255,14 @@ var BABYLON;
             serializationObject.customType = "BABYLON.FireMaterial";
             serializationObject.diffuseColor = this.diffuseColor.asArray();
             serializationObject.speed = this.speed;
-            if (this.diffuseTexture) {
-                serializationObject.diffuseTexture = this.diffuseTexture.serialize();
+            if (this._diffuseTexture) {
+                serializationObject._diffuseTexture = this._diffuseTexture.serialize();
             }
-            if (this.distortionTexture) {
-                serializationObject.distortionTexture = this.distortionTexture.serialize();
+            if (this._distortionTexture) {
+                serializationObject._distortionTexture = this._distortionTexture.serialize();
             }
-            if (this.opacityTexture) {
-                serializationObject.opacityTexture = this.opacityTexture.serialize();
+            if (this._opacityTexture) {
+                serializationObject._opacityTexture = this._opacityTexture.serialize();
             }
             return serializationObject;
         };
@@ -283,14 +275,14 @@ var BABYLON;
             BABYLON.Tags.AddTagsTo(material, source.tags);
             material.backFaceCulling = source.backFaceCulling;
             material.wireframe = source.wireframe;
-            if (source.diffuseTexture) {
-                material.diffuseTexture = BABYLON.Texture.Parse(source.diffuseTexture, scene, rootUrl);
+            if (source._diffuseTexture) {
+                material._diffuseTexture = BABYLON.Texture.Parse(source._diffuseTexture, scene, rootUrl);
             }
-            if (source.distortionTexture) {
-                material.distortionTexture = BABYLON.Texture.Parse(source.distortionTexture, scene, rootUrl);
+            if (source._distortionTexture) {
+                material._distortionTexture = BABYLON.Texture.Parse(source._distortionTexture, scene, rootUrl);
             }
-            if (source.opacityTexture) {
-                material.opacityTexture = BABYLON.Texture.Parse(source.opacityTexture, scene, rootUrl);
+            if (source._opacityTexture) {
+                material._opacityTexture = BABYLON.Texture.Parse(source._opacityTexture, scene, rootUrl);
             }
             if (source.checkReadyOnlyOnce) {
                 material.checkReadyOnlyOnce = source.checkReadyOnlyOnce;
@@ -298,15 +290,24 @@ var BABYLON;
             return material;
         };
         return FireMaterial;
-    }(BABYLON.Material));
+    }(BABYLON.PushMaterial));
+    __decorate([
+        BABYLON.serializeAsTexture("diffuseTexture")
+    ], FireMaterial.prototype, "_diffuseTexture", void 0);
     __decorate([
-        BABYLON.serializeAsTexture()
+        BABYLON.expandToProperty("_markAllSubMeshesAsTexturesDirty")
     ], FireMaterial.prototype, "diffuseTexture", void 0);
     __decorate([
-        BABYLON.serializeAsTexture()
+        BABYLON.serializeAsTexture("distortionTexture")
+    ], FireMaterial.prototype, "_distortionTexture", void 0);
+    __decorate([
+        BABYLON.expandToProperty("_markAllSubMeshesAsTexturesDirty")
     ], FireMaterial.prototype, "distortionTexture", void 0);
     __decorate([
-        BABYLON.serializeAsTexture()
+        BABYLON.serializeAsTexture("opacityTexture")
+    ], FireMaterial.prototype, "_opacityTexture", void 0);
+    __decorate([
+        BABYLON.expandToProperty("_markAllSubMeshesAsTexturesDirty")
     ], FireMaterial.prototype, "opacityTexture", void 0);
     __decorate([
         BABYLON.serialize("diffuseColor")

dist/materialsLibrary/babylon.furMaterial.d.ts

@@ -1,7 +1,9 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts" />
+
 declare module BABYLON {
-    class FurMaterial extends Material {
+    class FurMaterial extends PushMaterial {
+        private _diffuseTexture;
         diffuseTexture: BaseTexture;
+        private _heightTexture;
         heightTexture: BaseTexture;
         diffuseColor: Color3;
         furLength: number;
@@ -13,26 +15,26 @@ declare module BABYLON {
         furSpeed: number;
         furDensity: number;
         furTexture: DynamicTexture;
+        private _disableLighting;
         disableLighting: boolean;
-        highLevelFur: boolean;
+        private _maxSimultaneousLights;
         maxSimultaneousLights: number;
+        highLevelFur: boolean;
         _meshes: AbstractMesh[];
         private _worldViewProjectionMatrix;
         private _renderId;
         private _furTime;
-        private _defines;
-        private _cachedDefines;
         constructor(name: string, scene: Scene);
         furTime: number;
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): BaseTexture;
         updateFur(): void;
-        private _checkCache(scene, mesh?, useInstances?);
-        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
-        bindOnlyWorldMatrix(world: Matrix): void;
-        bind(world: Matrix, mesh?: Mesh): void;
+        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
+        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
         getAnimatables(): IAnimatable[];
+        getActiveTextures(): BaseTexture[];
+        hasTexture(texture: BaseTexture): boolean;
         dispose(forceDisposeEffect?: boolean): void;
         clone(name: string): FurMaterial;
         serialize(): any;

dist/materialsLibrary/babylon.gradientMaterial.d.ts

@@ -1,6 +1,8 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts" />
+
 declare module BABYLON {
-    class GradientMaterial extends Material {
+    class GradientMaterial extends PushMaterial {
+        private _maxSimultaneousLights;
+        maxSimultaneousLights: number;
         topColor: Color3;
         topColorAlpha: number;
         bottomColor: Color3;
@@ -11,16 +13,12 @@ declare module BABYLON {
         private _worldViewProjectionMatrix;
         private _scaledDiffuse;
         private _renderId;
-        private _defines;
-        private _cachedDefines;
         constructor(name: string, scene: Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): BaseTexture;
-        private _checkCache(scene, mesh?, useInstances?);
-        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
-        bindOnlyWorldMatrix(world: Matrix): void;
-        bind(world: Matrix, mesh?: Mesh): void;
+        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
+        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
         getAnimatables(): IAnimatable[];
         dispose(forceDisposeEffect?: boolean): void;
         clone(name: string): GradientMaterial;

dist/materialsLibrary/babylon.gridMaterial.d.ts

@@ -1,10 +1,10 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts" />
+
 declare module BABYLON {
     /**
      * The grid materials allows you to wrap any shape with a grid.
      * Colors are customizable.
      */
-    class GridMaterial extends BABYLON.Material {
+    class GridMaterial extends BABYLON.PushMaterial {
         /**
          * Main color of the grid (e.g. between lines)
          */
@@ -31,8 +31,6 @@ declare module BABYLON {
         opacity: number;
         private _gridControl;
         private _renderId;
-        private _defines;
-        private _cachedDefines;
         /**
          * constructor
          * @param name The name given to the material in order to identify it afterwards.
@@ -43,10 +41,8 @@ declare module BABYLON {
          * Returns wehter or not the grid requires alpha blending.
          */
         needAlphaBlending(): boolean;
-        private _checkCache(scene, mesh?, useInstances?);
-        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
-        bindOnlyWorldMatrix(world: Matrix): void;
-        bind(world: Matrix, mesh?: Mesh): void;
+        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
+        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
         dispose(forceDisposeEffect?: boolean): void;
         clone(name: string): GridMaterial;
         serialize(): any;

dist/materialsLibrary/babylon.gridMaterial.js

@@ -17,16 +17,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var BABYLON;
 (function (BABYLON) {
-    var GRIDMaterialDefines = (function (_super) {
-        __extends(GRIDMaterialDefines, _super);
-        function GRIDMaterialDefines() {
+    var GridMaterialDefines = (function (_super) {
+        __extends(GridMaterialDefines, _super);
+        function GridMaterialDefines() {
             var _this = _super.call(this) || this;
             _this.TRANSPARENT = false;
             _this.FOG = false;
-            _this._keys = Object.keys(_this);
+            _this.USERIGHTHANDEDSYSTEM = false;
+            _this.rebuild();
             return _this;
         }
-        return GRIDMaterialDefines;
+        return GridMaterialDefines;
     }(BABYLON.MaterialDefines));
     /**
      * The grid materials allows you to wrap any shape with a grid.
@@ -66,8 +67,6 @@ var BABYLON;
              */
             _this.opacity = 1.0;
             _this._gridControl = new BABYLON.Vector4(_this.gridRatio, _this.majorUnitFrequency, _this.minorUnitVisibility, _this.opacity);
-            _this._defines = new GRIDMaterialDefines();
-            _this._cachedDefines = new GRIDMaterialDefines();
             return _this;
         }
         /**
@@ -76,85 +75,72 @@ var BABYLON;
         GridMaterial.prototype.needAlphaBlending = function () {
             return this.opacity < 1.0;
         };
-        GridMaterial.prototype._checkCache = function (scene, mesh, useInstances) {
-            if (!mesh) {
-                return true;
-            }
-            if (mesh._materialDefines && mesh._materialDefines.isEqual(this._defines)) {
-                return true;
-            }
-            return false;
-        };
-        GridMaterial.prototype.isReady = function (mesh, useInstances) {
-            if (this.checkReadyOnlyOnce) {
-                if (this._wasPreviouslyReady) {
+        GridMaterial.prototype.isReadyForSubMesh = function (mesh, subMesh, useInstances) {
+            if (this.isFrozen) {
+                if (this._wasPreviouslyReady && subMesh.effect) {
                     return true;
                 }
             }
+            if (!subMesh._materialDefines) {
+                subMesh._materialDefines = new GridMaterialDefines();
+            }
+            var defines = subMesh._materialDefines;
             var scene = this.getScene();
-            if (!this.checkReadyOnEveryCall) {
+            if (!this.checkReadyOnEveryCall && subMesh.effect) {
                 if (this._renderId === scene.getRenderId()) {
-                    if (this._checkCache(scene, mesh, useInstances)) {
-                        return true;
-                    }
+                    return true;
                 }
             }
             var engine = scene.getEngine();
-            var needNormals = true;
-            this._defines.reset();
-            if (this.opacity < 1.0) {
-                this._defines.TRANSPARENT = true;
-            }
-            // Fog
-            if (scene.fogEnabled && mesh && mesh.applyFog && scene.fogMode !== BABYLON.Scene.FOGMODE_NONE && this.fogEnabled) {
-                this._defines.FOG = true;
+            if (this.opacity < 1.0 && !defines.TRANSPARENT) {
+                defines.TRANSPARENT = true;
+                defines.markAsUnprocessed();
             }
+            BABYLON.MaterialHelper.PrepareDefinesForMisc(mesh, scene, false, false, this.fogEnabled, defines);
             // Get correct effect      
-            if (!this._effect || !this._defines.isEqual(this._cachedDefines)) {
-                this._defines.cloneTo(this._cachedDefines);
+            if (defines.isDirty) {
+                defines.markAsProcessed();
                 scene.resetCachedMaterial();
                 // Attributes
                 var attribs = [BABYLON.VertexBuffer.PositionKind, BABYLON.VertexBuffer.NormalKind];
                 // Effect
                 var shaderName = scene.getEngine().getCaps().standardDerivatives ? "grid" : "legacygrid";
                 // Defines
-                var join = this._defines.toString();
-                this._effect = scene.getEngine().createEffect(shaderName, attribs, ["worldViewProjection", "mainColor", "lineColor", "gridControl", "vFogInfos", "vFogColor", "world", "view"], [], join, null, this.onCompiled, this.onError);
+                var join = defines.toString();
+                subMesh.setEffect(scene.getEngine().createEffect(shaderName, attribs, ["worldViewProjection", "mainColor", "lineColor", "gridControl", "vFogInfos", "vFogColor", "world", "view"], [], join, null, this.onCompiled, this.onError), defines);
             }
-            if (!this._effect.isReady()) {
+            if (!subMesh.effect.isReady()) {
                 return false;
             }
             this._renderId = scene.getRenderId();
             this._wasPreviouslyReady = true;
             return true;
         };
-        GridMaterial.prototype.bindOnlyWorldMatrix = function (world) {
-            var scene = this.getScene();
-            this._effect.setMatrix("worldViewProjection", world.multiply(scene.getTransformMatrix()));
-            this._effect.setMatrix("world", world);
-            this._effect.setMatrix("view", scene.getViewMatrix());
-        };
-        GridMaterial.prototype.bind = function (world, mesh) {
+        GridMaterial.prototype.bindForSubMesh = function (world, mesh, subMesh) {
             var scene = this.getScene();
+            var defines = subMesh._materialDefines;
+            if (!defines) {
+                return;
+            }
+            var effect = subMesh.effect;
+            this._activeEffect = effect;
             // Matrices
             this.bindOnlyWorldMatrix(world);
+            this._activeEffect.setMatrix("worldViewProjection", world.multiply(scene.getTransformMatrix()));
+            this._activeEffect.setMatrix("view", scene.getViewMatrix());
             // Uniforms
-            if (scene.getCachedMaterial() !== this) {
-                this._effect.setColor3("mainColor", this.mainColor);
-                this._effect.setColor3("lineColor", this.lineColor);
+            if (this._mustRebind(scene, effect)) {
+                this._activeEffect.setColor3("mainColor", this.mainColor);
+                this._activeEffect.setColor3("lineColor", this.lineColor);
                 this._gridControl.x = this.gridRatio;
                 this._gridControl.y = Math.round(this.majorUnitFrequency);
                 this._gridControl.z = this.minorUnitVisibility;
                 this._gridControl.w = this.opacity;
-                this._effect.setVector4("gridControl", this._gridControl);
-            }
-            // View
-            if (scene.fogEnabled && mesh.applyFog && scene.fogMode !== BABYLON.Scene.FOGMODE_NONE) {
-                this._effect.setMatrix("view", scene.getViewMatrix());
+                this._activeEffect.setVector4("gridControl", this._gridControl);
             }
             // Fog
-            BABYLON.MaterialHelper.BindFogParameters(scene, mesh, this._effect);
-            _super.prototype.bind.call(this, world, mesh);
+            BABYLON.MaterialHelper.BindFogParameters(scene, mesh, this._activeEffect);
+            this._afterBind(mesh, this._activeEffect);
         };
         GridMaterial.prototype.dispose = function (forceDisposeEffect) {
             _super.prototype.dispose.call(this, forceDisposeEffect);
@@ -172,7 +158,7 @@ var BABYLON;
             return BABYLON.SerializationHelper.Parse(function () { return new GridMaterial(source.name, scene); }, source, scene, rootUrl);
         };
         return GridMaterial;
-    }(BABYLON.Material));
+    }(BABYLON.PushMaterial));
     __decorate([
         BABYLON.serializeAsColor3()
     ], GridMaterial.prototype, "mainColor", void 0);

dist/materialsLibrary/babylon.lavaMaterial.d.ts

@@ -1,6 +1,7 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts" />
+
 declare module BABYLON {
-    class LavaMaterial extends Material {
+    class LavaMaterial extends PushMaterial {
+        private _diffuseTexture;
         diffuseTexture: BaseTexture;
         noiseTexture: BaseTexture;
         fogColor: Color3;
@@ -10,22 +11,22 @@ declare module BABYLON {
         fogDensity: number;
         private _lastTime;
         diffuseColor: Color3;
+        private _disableLighting;
         disableLighting: boolean;
+        private _maxSimultaneousLights;
         maxSimultaneousLights: number;
         private _worldViewProjectionMatrix;
         private _scaledDiffuse;
         private _renderId;
-        private _defines;
-        private _cachedDefines;
         constructor(name: string, scene: Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): BaseTexture;
-        private _checkCache(scene, mesh?, useInstances?);
-        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
-        bindOnlyWorldMatrix(world: Matrix): void;
-        bind(world: Matrix, mesh?: Mesh): void;
+        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
+        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
         getAnimatables(): IAnimatable[];
+        getActiveTextures(): BaseTexture[];
+        hasTexture(texture: BaseTexture): boolean;
         dispose(forceDisposeEffect?: boolean): void;
         clone(name: string): LavaMaterial;
         serialize(): any;

dist/materialsLibrary/babylon.legacyPbrMaterial.d.ts

@@ -0,0 +1,337 @@
+
+declare module BABYLON {
+    /**
+     * The Physically based material of BJS.
+     *
+     * This offers the main features of a standard PBR material.
+     * For more information, please refer to the documentation :
+     * http://doc.babylonjs.com/extensions/Physically_Based_Rendering
+     */
+    class LegacyPBRMaterial extends BABYLON.Material {
+        /**
+         * Intensity of the direct lights e.g. the four lights available in your scene.
+         * This impacts both the direct diffuse and specular highlights.
+         */
+        directIntensity: number;
+        /**
+         * Intensity of the emissive part of the material.
+         * This helps controlling the emissive effect without modifying the emissive color.
+         */
+        emissiveIntensity: number;
+        /**
+         * Intensity of the environment e.g. how much the environment will light the object
+         * either through harmonics for rough material or through the refelction for shiny ones.
+         */
+        environmentIntensity: number;
+        /**
+         * This is a special control allowing the reduction of the specular highlights coming from the
+         * four lights of the scene. Those highlights may not be needed in full environment lighting.
+         */
+        specularIntensity: number;
+        private _lightingInfos;
+        /**
+         * Debug Control allowing disabling the bump map on this material.
+         */
+        disableBumpMap: boolean;
+        /**
+         * Debug Control helping enforcing or dropping the darkness of shadows.
+         * 1.0 means the shadows have their normal darkness, 0.0 means the shadows are not visible.
+         */
+        overloadedShadowIntensity: number;
+        /**
+         * Debug Control helping dropping the shading effect coming from the diffuse lighting.
+         * 1.0 means the shade have their normal impact, 0.0 means no shading at all.
+         */
+        overloadedShadeIntensity: number;
+        private _overloadedShadowInfos;
+        /**
+         * The camera exposure used on this material.
+         * This property is here and not in the camera to allow controlling exposure without full screen post process.
+         * This corresponds to a photographic exposure.
+         */
+        cameraExposure: number;
+        /**
+         * The camera contrast used on this material.
+         * This property is here and not in the camera to allow controlling contrast without full screen post process.
+         */
+        cameraContrast: number;
+        /**
+         * Color Grading 2D Lookup Texture.
+         * This allows special effects like sepia, black and white to sixties rendering style.
+         */
+        cameraColorGradingTexture: BaseTexture;
+        /**
+         * The color grading curves provide additional color adjustmnent that is applied after any color grading transform (3D LUT).
+         * They allow basic adjustment of saturation and small exposure adjustments, along with color filter tinting to provide white balance adjustment or more stylistic effects.
+         * These are similar to controls found in many professional imaging or colorist software. The global controls are applied to the entire image. For advanced tuning, extra controls are provided to adjust the shadow, midtone and highlight areas of the image;
+         * corresponding to low luminance, medium luminance, and high luminance areas respectively.
+         */
+        cameraColorCurves: ColorCurves;
+        private _cameraInfos;
+        private _microsurfaceTextureLods;
+        /**
+         * Debug Control allowing to overload the ambient color.
+         * This as to be use with the overloadedAmbientIntensity parameter.
+         */
+        overloadedAmbient: Color3;
+        /**
+         * Debug Control indicating how much the overloaded ambient color is used against the default one.
+         */
+        overloadedAmbientIntensity: number;
+        /**
+         * Debug Control allowing to overload the albedo color.
+         * This as to be use with the overloadedAlbedoIntensity parameter.
+         */
+        overloadedAlbedo: Color3;
+        /**
+         * Debug Control indicating how much the overloaded albedo color is used against the default one.
+         */
+        overloadedAlbedoIntensity: number;
+        /**
+         * Debug Control allowing to overload the reflectivity color.
+         * This as to be use with the overloadedReflectivityIntensity parameter.
+         */
+        overloadedReflectivity: Color3;
+        /**
+         * Debug Control indicating how much the overloaded reflectivity color is used against the default one.
+         */
+        overloadedReflectivityIntensity: number;
+        /**
+         * Debug Control allowing to overload the emissive color.
+         * This as to be use with the overloadedEmissiveIntensity parameter.
+         */
+        overloadedEmissive: Color3;
+        /**
+         * Debug Control indicating how much the overloaded emissive color is used against the default one.
+         */
+        overloadedEmissiveIntensity: number;
+        private _overloadedIntensity;
+        /**
+         * Debug Control allowing to overload the reflection color.
+         * This as to be use with the overloadedReflectionIntensity parameter.
+         */
+        overloadedReflection: Color3;
+        /**
+         * Debug Control indicating how much the overloaded reflection color is used against the default one.
+         */
+        overloadedReflectionIntensity: number;
+        /**
+         * Debug Control allowing to overload the microsurface.
+         * This as to be use with the overloadedMicroSurfaceIntensity parameter.
+         */
+        overloadedMicroSurface: number;
+        /**
+         * Debug Control indicating how much the overloaded microsurface is used against the default one.
+         */
+        overloadedMicroSurfaceIntensity: number;
+        private _overloadedMicroSurface;
+        /**
+         * AKA Diffuse Texture in standard nomenclature.
+         */
+        albedoTexture: BaseTexture;
+        /**
+         * AKA Occlusion Texture in other nomenclature.
+         */
+        ambientTexture: BaseTexture;
+        /**
+         * AKA Occlusion Texture Intensity in other nomenclature.
+         */
+        ambientTextureStrength: number;
+        opacityTexture: BaseTexture;
+        reflectionTexture: BaseTexture;
+        emissiveTexture: BaseTexture;
+        /**
+         * AKA Specular texture in other nomenclature.
+         */
+        reflectivityTexture: BaseTexture;
+        /**
+         * Used to switch from specular/glossiness to metallic/roughness workflow.
+         */
+        metallicTexture: BaseTexture;
+        /**
+         * Specifies the metallic scalar of the metallic/roughness workflow.
+         * Can also be used to scale the metalness values of the metallic texture.
+         */
+        metallic: number;
+        /**
+         * Specifies the roughness scalar of the metallic/roughness workflow.
+         * Can also be used to scale the roughness values of the metallic texture.
+         */
+        roughness: number;
+        /**
+         * Used to enable roughness/glossiness fetch from a separate chanel depending on the current mode.
+         * Gray Scale represents roughness in metallic mode and glossiness in specular mode.
+         */
+        microSurfaceTexture: BaseTexture;
+        bumpTexture: BaseTexture;
+        lightmapTexture: BaseTexture;
+        refractionTexture: BaseTexture;
+        ambientColor: Color3;
+        /**
+         * AKA Diffuse Color in other nomenclature.
+         */
+        albedoColor: Color3;
+        /**
+         * AKA Specular Color in other nomenclature.
+         */
+        reflectivityColor: Color3;
+        reflectionColor: Color3;
+        emissiveColor: Color3;
+        /**
+         * AKA Glossiness in other nomenclature.
+         */
+        microSurface: number;
+        /**
+         * source material index of refraction (IOR)' / 'destination material IOR.
+         */
+        indexOfRefraction: number;
+        /**
+         * Controls if refraction needs to be inverted on Y. This could be usefull for procedural texture.
+         */
+        invertRefractionY: boolean;
+        opacityFresnelParameters: FresnelParameters;
+        emissiveFresnelParameters: FresnelParameters;
+        /**
+         * This parameters will make the material used its opacity to control how much it is refracting aginst not.
+         * Materials half opaque for instance using refraction could benefit from this control.
+         */
+        linkRefractionWithTransparency: boolean;
+        /**
+         * The emissive and albedo are linked to never be more than one (Energy conservation).
+         */
+        linkEmissiveWithAlbedo: boolean;
+        useLightmapAsShadowmap: boolean;
+        /**
+         * In this mode, the emissive informtaion will always be added to the lighting once.
+         * A light for instance can be thought as emissive.
+         */
+        useEmissiveAsIllumination: boolean;
+        /**
+         * Secifies that the alpha is coming form the albedo channel alpha channel.
+         */
+        useAlphaFromAlbedoTexture: boolean;
+        /**
+         * Specifies that the material will keeps the specular highlights over a transparent surface (only the most limunous ones).
+         * A car glass is a good exemple of that. When sun reflects on it you can not see what is behind.
+         */
+        useSpecularOverAlpha: boolean;
+        /**
+         * Specifies if the reflectivity texture contains the glossiness information in its alpha channel.
+         */
+        useMicroSurfaceFromReflectivityMapAlpha: boolean;
+        /**
+         * Specifies if the metallic texture contains the roughness information in its alpha channel.
+         */
+        useRoughnessFromMetallicTextureAlpha: boolean;
+        /**
+         * Specifies if the metallic texture contains the roughness information in its green channel.
+         */
+        useRoughnessFromMetallicTextureGreen: boolean;
+        /**
+         * Specifies if the metallic texture contains the metallness information in its blue channel.
+         */
+        useMetallnessFromMetallicTextureBlue: boolean;
+        /**
+         * Specifies if the metallic texture contains the ambient occlusion information in its red channel.
+         */
+        useAmbientOcclusionFromMetallicTextureRed: boolean;
+        /**
+         * Specifies if the ambient texture contains the ambient occlusion information in its red channel only.
+         */
+        useAmbientInGrayScale: boolean;
+        /**
+         * In case the reflectivity map does not contain the microsurface information in its alpha channel,
+         * The material will try to infer what glossiness each pixel should be.
+         */
+        useAutoMicroSurfaceFromReflectivityMap: boolean;
+        /**
+         * Allows to work with scalar in linear mode. This is definitely a matter of preferences and tools used during
+         * the creation of the material.
+         */
+        useScalarInLinearSpace: boolean;
+        /**
+         * BJS is using an harcoded light falloff based on a manually sets up range.
+         * In PBR, one way to represents the fallof is to use the inverse squared root algorythm.
+         * This parameter can help you switch back to the BJS mode in order to create scenes using both materials.
+         */
+        usePhysicalLightFalloff: boolean;
+        /**
+         * Specifies that the material will keeps the reflection highlights over a transparent surface (only the most limunous ones).
+         * A car glass is a good exemple of that. When the street lights reflects on it you can not see what is behind.
+         */
+        useRadianceOverAlpha: boolean;
+        /**
+         * Allows using the bump map in parallax mode.
+         */
+        useParallax: boolean;
+        /**
+         * Allows using the bump map in parallax occlusion mode.
+         */
+        useParallaxOcclusion: boolean;
+        /**
+         * Controls the scale bias of the parallax mode.
+         */
+        parallaxScaleBias: number;
+        /**
+         * If sets to true, disables all the lights affecting the material.
+         */
+        disableLighting: boolean;
+        /**
+         * Number of Simultaneous lights allowed on the material.
+         */
+        maxSimultaneousLights: number;
+        /**
+         * If sets to true, x component of normal map value will invert (x = 1.0 - x).
+         */
+        invertNormalMapX: boolean;
+        /**
+         * If sets to true, y component of normal map value will invert (y = 1.0 - y).
+         */
+        invertNormalMapY: boolean;
+        /**
+         * If sets to true and backfaceCulling is false, normals will be flipped on the backside.
+         */
+        twoSidedLighting: boolean;
+        private _renderTargets;
+        private _worldViewProjectionMatrix;
+        private _globalAmbientColor;
+        private _tempColor;
+        private _renderId;
+        private _defines;
+        private _cachedDefines;
+        private _useLogarithmicDepth;
+        /**
+         * Instantiates a new PBRMaterial instance.
+         *
+         * @param name The material name
+         * @param scene The scene the material will be use in.
+         */
+        constructor(name: string, scene: Scene);
+        getClassName(): string;
+        useLogarithmicDepth: boolean;
+        needAlphaBlending(): boolean;
+        needAlphaTesting(): boolean;
+        private _shouldUseAlphaFromAlbedoTexture();
+        getAlphaTestTexture(): BaseTexture;
+        private _checkCache(scene, mesh?, useInstances?);
+        private convertColorToLinearSpaceToRef(color, ref);
+        private static convertColorToLinearSpaceToRef(color, ref, useScalarInLinear);
+        private static _scaledAlbedo;
+        private static _scaledReflectivity;
+        private static _scaledEmissive;
+        private static _scaledReflection;
+        static BindLights(scene: Scene, mesh: AbstractMesh, effect: Effect, defines: MaterialDefines, useScalarInLinearSpace: boolean, maxSimultaneousLights: number, usePhysicalLightFalloff: boolean): void;
+        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
+        buildUniformLayout(): void;
+        unbind(): void;
+        bindOnlyWorldMatrix(world: Matrix): void;
+        private _myScene;
+        private _myShadowGenerator;
+        bind(world: Matrix, mesh?: Mesh): void;
+        getAnimatables(): IAnimatable[];
+        dispose(forceDisposeEffect?: boolean, forceDisposeTextures?: boolean): void;
+        clone(name: string): LegacyPBRMaterial;
+        serialize(): any;
+        static Parse(source: any, scene: Scene, rootUrl: string): LegacyPBRMaterial;
+    }
+}

dist/materialsLibrary/babylon.normalMaterial.d.ts

@@ -1,23 +1,25 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts" />
+
 declare module BABYLON {
-    class NormalMaterial extends Material {
+    class NormalMaterial extends PushMaterial {
+        private _diffuseTexture;
         diffuseTexture: BaseTexture;
         diffuseColor: Color3;
+        private _disableLighting;
         disableLighting: boolean;
+        private _maxSimultaneousLights;
+        maxSimultaneousLights: number;
         private _worldViewProjectionMatrix;
         private _scaledDiffuse;
         private _renderId;
-        private _defines;
-        private _cachedDefines;
         constructor(name: string, scene: Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): BaseTexture;
-        private _checkCache(scene, mesh?, useInstances?);
-        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
-        bindOnlyWorldMatrix(world: Matrix): void;
-        bind(world: Matrix, mesh?: Mesh): void;
+        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
+        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
         getAnimatables(): IAnimatable[];
+        getActiveTextures(): BaseTexture[];
+        hasTexture(texture: BaseTexture): boolean;
         dispose(forceDisposeEffect?: boolean): void;
         clone(name: string): NormalMaterial;
         serialize(): any;

dist/materialsLibrary/babylon.shadowOnlyMaterial.d.ts

@@ -1,19 +1,15 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts" />
+
 declare module BABYLON {
-    class ShadowOnlyMaterial extends Material {
+    class ShadowOnlyMaterial extends PushMaterial {
         private _worldViewProjectionMatrix;
         private _scaledDiffuse;
         private _renderId;
-        private _defines;
-        private _cachedDefines;
         constructor(name: string, scene: Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): BaseTexture;
-        private _checkCache(scene, mesh?, useInstances?);
-        isReady(mesh?: AbstractMesh, useInstances?: boolean): boolean;
-        bindOnlyWorldMatrix(world: Matrix): void;
-        bind(world: Matrix, mesh?: Mesh): void;
+        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
+        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
         clone(name: string): ShadowOnlyMaterial;
         serialize(): any;
         static Parse(source: any, scene: Scene, rootUrl: string): ShadowOnlyMaterial;