Merge pull request #3490 from BabylonJS/master

Nightly

Playground/debug.html

@@ -6,24 +6,24 @@
     <meta charset='utf-8' />
     <meta name="viewport" content="width=device-width, user-scalable=no">
     <link rel="shortcut icon" href="https://www.babylonjs.com/img/favicon/favicon.ico">
-	<link rel="apple-touch-icon" sizes="57x57" href="https://www.babylonjs.com/img/favicon/apple-icon-57x57.png">
-	<link rel="apple-touch-icon" sizes="60x60" href="https://www.babylonjs.com/img/favicon/apple-icon-60x60.png">
-	<link rel="apple-touch-icon" sizes="72x72" href="https://www.babylonjs.com/img/favicon/apple-icon-72x72.png">
-	<link rel="apple-touch-icon" sizes="76x76" href="https://www.babylonjs.com/img/favicon/apple-icon-76x76.png">
-	<link rel="apple-touch-icon" sizes="114x114" href="https://www.babylonjs.com/img/favicon/apple-icon-114x114.png">
-	<link rel="apple-touch-icon" sizes="120x120" href="https://www.babylonjs.com/img/favicon/apple-icon-120x120.png">
-	<link rel="apple-touch-icon" sizes="144x144" href="https://www.babylonjs.com/img/favicon/apple-icon-144x144.png">
-	<link rel="apple-touch-icon" sizes="152x152" href="https://www.babylonjs.com/img/favicon/apple-icon-152x152.png">
-	<link rel="apple-touch-icon" sizes="180x180" href="https://www.babylonjs.com/img/favicon/apple-icon-180x180.png">
-	<link rel="icon" type="image/png" sizes="192x192"  href="https://www.babylonjs.com/img/favicon/android-icon-192x192.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="https://www.babylonjs.com/img/favicon/favicon-32x32.png">
-	<link rel="icon" type="image/png" sizes="96x96" href="https://www.babylonjs.com/img/favicon/favicon-96x96.png">
-	<link rel="icon" type="image/png" sizes="16x16" href="https://www.babylonjs.com/img/favicon/favicon-16x16.png">
-	<link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
-	<meta name="msapplication-TileColor" content="#ffffff">
-	<meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
-	<meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
-	<meta name="theme-color" content="#ffffff">
+    <link rel="apple-touch-icon" sizes="57x57" href="https://www.babylonjs.com/img/favicon/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="https://www.babylonjs.com/img/favicon/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="https://www.babylonjs.com/img/favicon/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="https://www.babylonjs.com/img/favicon/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="https://www.babylonjs.com/img/favicon/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="https://www.babylonjs.com/img/favicon/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="https://www.babylonjs.com/img/favicon/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="https://www.babylonjs.com/img/favicon/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="https://www.babylonjs.com/img/favicon/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="https://www.babylonjs.com/img/favicon/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="https://www.babylonjs.com/img/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="https://www.babylonjs.com/img/favicon/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="https://www.babylonjs.com/img/favicon/favicon-16x16.png">
+    <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
+    <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
+    <meta name="theme-color" content="#ffffff">
 
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
     <!--For canvas/code separator-->
@@ -38,7 +38,7 @@
     <!-- Babylon.js -->
     <script src="https://preview.babylonjs.com/cannon.js"></script>
     <script src="https://preview.babylonjs.com/Oimo.js"></script>
-    <script src="https://preview.babylonjs.com/babylon.max.js"></script>    
+    <script src="https://preview.babylonjs.com/babylon.max.js"></script>
     <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
 
     <script src="https://preview.babylonjs.com/materialsLibrary/babylon.fireMaterial.min.js"></script>
@@ -73,6 +73,8 @@
 
     <script src="https://preview.babylonjs.com/gui/babylon.gui.js"></script>
 
+    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
+
     <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
     <script src="https://rawgit.com/BabylonJS/Extensions/master/canvas2D/dist/preview%20release/babylon.canvas2d.js"></script>
     <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"></script>
@@ -90,30 +92,43 @@
         </div>
 
         <div class="category">
-            <div class="button run" id="runButton1600">Run <i class="fa fa-play" aria-hidden="true"></i></div>
+            <div class="button run" id="runButton1600">Run
+                <i class="fa fa-play" aria-hidden="true"></i>
+            </div>
         </div>
 
 
         <div class="category">
-            <div class="button" id="newButton1600">New<i class="fa fa-file" aria-hidden="true"></i></div>
-            <div class="button removeOnPhone" id="clearButton1600">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
+            <div class="button" id="newButton1600">New
+                <i class="fa fa-file" aria-hidden="true"></i>
+            </div>
+            <div class="button removeOnPhone" id="clearButton1600">Clear
+                <i class="fa fa-trash" aria-hidden="true"></i>
+            </div>
         </div>
 
         <div class="category">
-            <div class="button" id="saveButton1600">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
-            <div class="button removeOnPhone" id="zipButton1600">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
+            <div class="button" id="saveButton1600">Save
+                <i class="fa fa-floppy-o" aria-hidden="true"></i>
+            </div>
+            <div class="button removeOnPhone" id="zipButton1600">Zip
+                <i class="fa fa-download" aria-hidden="true"></i>
+            </div>
         </div>
 
         <div class="category">
             <div class="button select">Settings
                 <div class="toDisplay">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect">Theme
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
                             <div class="option" id="darkTheme1600">Dark</div>
                             <div class="option" id="lightTheme1600">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect"><span id="currentFontSize1600">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect">
+                        <span id="currentFontSize1600">Font: 14</span>
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
                             <div class="option" onclick="setFontSize(12);">12</div>
                             <div class="option" onclick="setFontSize(14);">14</div>
@@ -123,8 +138,11 @@
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option" id="safemodeToggle1600">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
-                    <div class="option checked" id="editorButton1600">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    <div class="option" id="safemodeToggle1600">Safe mode
+                        <i class="fa fa-square-o" aria-hidden="true"></i>
+                    </div>
+                    <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>
@@ -135,20 +153,24 @@
                 </div>
             </div>
 
-            <div class="button uncheck" id="debugButton1600">Debug layer <i class="fa fa-square-o" aria-hidden="true"></i></div>
+            <div class="button uncheck" id="debugButton1600">Debug layer
+                <i class="fa fa-square-o" aria-hidden="true"></i>
+            </div>
             <div class="button" id="metadataButton1600">Metadata</div>
         </div>
 
 
 
         <div class="category right">
-            <div class="button select"><span id="currentVersion1600">Version: Latest</span>
+            <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>
             </div>
-            <div class="button select"> <span id="currentScript1600">Scenes</span>
+            <div class="button select">
+                <span id="currentScript1600">Scenes</span>
                 <div class="toDisplayBig">
                     <ul id="scriptsList1600">
                     </ul>
@@ -169,30 +191,43 @@
         </div>
 
         <div class="category">
-            <div class="button run" id="runButton1475">Run <i class="fa fa-play" aria-hidden="true"></i></div>
+            <div class="button run" id="runButton1475">Run
+                <i class="fa fa-play" aria-hidden="true"></i>
+            </div>
         </div>
 
 
         <div class="category">
-            <div class="button" id="newButton1475">New<i class="fa fa-file" aria-hidden="true"></i></div>
-            <div class="button removeOnPhone" id="clearButton1475">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
+            <div class="button" id="newButton1475">New
+                <i class="fa fa-file" aria-hidden="true"></i>
+            </div>
+            <div class="button removeOnPhone" id="clearButton1475">Clear
+                <i class="fa fa-trash" aria-hidden="true"></i>
+            </div>
         </div>
 
         <div class="category">
-            <div class="button" id="saveButton1475">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
-            <div class="button removeOnPhone" id="zipButton1475">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
+            <div class="button" id="saveButton1475">Save
+                <i class="fa fa-floppy-o" aria-hidden="true"></i>
+            </div>
+            <div class="button removeOnPhone" id="zipButton1475">Zip
+                <i class="fa fa-download" aria-hidden="true"></i>
+            </div>
         </div>
 
         <div class="category">
             <div class="button select">Settings
                 <div class="toDisplay">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect">Theme
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
                             <div class="option" id="darkTheme1475">Dark</div>
                             <div class="option" id="lightTheme1475">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect"><span id="currentFontSize1475">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect">
+                        <span id="currentFontSize1475">Font: 14</span>
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
                             <div class="option" onclick="setFontSize(12);">12</div>
                             <div class="option" onclick="setFontSize(14);">14</div>
@@ -202,8 +237,11 @@
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option" id='safemodeToggle1475'>Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
-                    <div class="option checked" id="editorButton1475">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    <div class="option" id='safemodeToggle1475'>Safe mode
+                        <i class="fa fa-square-o" aria-hidden="true"></i>
+                    </div>
+                    <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>
@@ -211,9 +249,13 @@
                     <div class="option" id="minimapToggle1475">Minimap
                         <i class="fa fa-square-o" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="debugButton1475">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></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="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>
@@ -224,7 +266,8 @@
         </div>
 
         <div class="category right">
-            <div class="button select"> <span id="currentScript1475">Scenes</span>
+            <div class="button select">
+                <span id="currentScript1475">Scenes</span>
                 <div class="toDisplayBig">
                     <ul id="scriptsList1475">
                     </ul>
@@ -238,30 +281,43 @@
 
     <div class="navbar navBar1030">
         <div class="category">
-            <div class="button run" id="runButton1030">Run <i class="fa fa-play" aria-hidden="true"></i></div>
+            <div class="button run" id="runButton1030">Run
+                <i class="fa fa-play" aria-hidden="true"></i>
+            </div>
         </div>
 
 
         <div class="category">
-            <div class="button" id="newButton1030">New<i class="fa fa-file" aria-hidden="true"></i></div>
-            <div class="button removeOnPhone" id="clearButton1030">Clear<i class="fa fa-trash" aria-hidden="true"></i></div>
+            <div class="button" id="newButton1030">New
+                <i class="fa fa-file" aria-hidden="true"></i>
+            </div>
+            <div class="button removeOnPhone" id="clearButton1030">Clear
+                <i class="fa fa-trash" aria-hidden="true"></i>
+            </div>
         </div>
 
         <div class="category">
-            <div class="button" id="saveButton1030">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
-            <div class="button removeOnPhone" id="zipButton1030">Zip<i class="fa fa-download" aria-hidden="true"></i></div>
+            <div class="button" id="saveButton1030">Save
+                <i class="fa fa-floppy-o" aria-hidden="true"></i>
+            </div>
+            <div class="button removeOnPhone" id="zipButton1030">Zip
+                <i class="fa fa-download" aria-hidden="true"></i>
+            </div>
         </div>
 
         <div class="category">
             <div class="button select">Settings
                 <div class="toDisplay">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect">Theme
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
                             <div class="option" id="darkTheme1030">Dark</div>
                             <div class="option" id="lightTheme1030">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect"><span id="currentFontSize1030">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect">
+                        <span id="currentFontSize1030">Font: 14</span>
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
                             <div class="option" onclick="setFontSize(12);">12</div>
                             <div class="option" onclick="setFontSize(14);">14</div>
@@ -271,8 +327,11 @@
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option" id="safemodeToggle1030">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
-                    <div class="option checked" id="editorButton1030">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    <div class="option" id="safemodeToggle1030">Safe mode
+                        <i class="fa fa-square-o" aria-hidden="true"></i>
+                    </div>
+                    <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>
@@ -280,9 +339,13 @@
                     <div class="option" id="minimapToggle1030">Minimap
                         <i class="fa fa-square-o" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="debugButton1030">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></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="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>
@@ -293,7 +356,8 @@
         </div>
 
         <div class="category right">
-            <div class="button select"> <span id="currentScript1030">Scenes</span>
+            <div class="button select">
+                <span id="currentScript1030">Scenes</span>
                 <div class="toDisplayBig">
                     <ul id="scriptsList1030">
                     </ul>
@@ -309,11 +373,21 @@
         <div class="category">
             <div class="button select">File
                 <div class="toDisplay">
-                    <div class="option" id="runButton750">Run <i class="fa fa-play" aria-hidden="true"></i></div>
-                    <div class="option" id="newButton750">New <i class="fa fa-file" aria-hidden="true"></i></div>
-                    <div class="option" id="clearButton750">Clear <i class="fa fa-trash" aria-hidden="true"></i></div>
-                    <div class="option" id="saveButton750">Save <i class="fa fa-floppy-o" aria-hidden="true"></i></div>
-                    <div class="option" id="zipButton750">Zip <i class="fa fa-download" aria-hidden="true"></i></div>
+                    <div class="option" id="runButton750">Run
+                        <i class="fa fa-play" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="newButton750">New
+                        <i class="fa fa-file" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="clearButton750">Clear
+                        <i class="fa fa-trash" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="saveButton750">Save
+                        <i class="fa fa-floppy-o" aria-hidden="true"></i>
+                    </div>
+                    <div class="option" id="zipButton750">Zip
+                        <i class="fa fa-download" aria-hidden="true"></i>
+                    </div>
                 </div>
             </div>
         </div>
@@ -321,13 +395,16 @@
         <div class="category">
             <div class="button select">Settings
                 <div class="toDisplay">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect">Theme
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
                             <div class="option" id="darkTheme750">Dark</div>
                             <div class="option" id="lightTheme750">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect"><span id="currentFontSize750">Font: 14</span><i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect">
+                        <span id="currentFontSize750">Font: 14</span>
+                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
                             <div class="option" onclick="setFontSize(12);">12</div>
                             <div class="option" onclick="setFontSize(14);">14</div>
@@ -337,8 +414,11 @@
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option" id="safemodeToggle750">Safe mode <i class="fa fa-square-o" aria-hidden="true"></i></div>
-                    <div style="display:none;" class="option checked" id="editorButton750">Editor <i class="fa fa-check-square" aria-hidden="true"></i>
+                    <div class="option" id="safemodeToggle750">Safe mode
+                        <i class="fa fa-square-o" aria-hidden="true"></i>
+                    </div>
+                    <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>
@@ -346,9 +426,13 @@
                     <div class="option" id="minimapToggle750">Minimap
                         <i class="fa fa-square-o" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="debugButton750">Debug layer<i class="fa fa-square-o" aria-hidden="true"></i></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="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>
@@ -359,7 +443,8 @@
         </div>
 
         <div class="category right">
-            <div class="button select"> <span id="currentScript750">Scenes</span>
+            <div class="button select">
+                <span id="currentScript750">Scenes</span>
                 <div class="toDisplayBig">
                     <ul id="scriptsList750">
                     </ul>
@@ -386,11 +471,21 @@
     <div class="navbarBottom">
         <div id="statusBar"></div>
         <div class="links">
-            <div class='link'><a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a></div>
-            <div class='link'> <a target='_new' href="http://www.html5gamedevs.com/forum/16-babylonjs/">Forum</a></div>
-            <div class='link'><a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a></div>
-            <div class='link'><a target='_new' href="https://doc.babylonjs.com">Documentation</a></div>
-            <div class='link'><a target='_new' href="https://doc.babylonjs.com/playground">Search</a></div>
+            <div class='link'>
+                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="http://www.html5gamedevs.com/forum/16-babylonjs/">Forum</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
+            </div>
+            <div class='link'>
+                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
+            </div>
         </div>
     </div>
 

Playground/frame.html

@@ -4,30 +4,30 @@
 <head>
     <title>Babylon.js Playground</title>
     <link rel="shortcut icon" href="https://www.babylonjs.com/img/favicon/favicon.ico">
-	<link rel="apple-touch-icon" sizes="57x57" href="https://www.babylonjs.com/img/favicon/apple-icon-57x57.png">
-	<link rel="apple-touch-icon" sizes="60x60" href="https://www.babylonjs.com/img/favicon/apple-icon-60x60.png">
-	<link rel="apple-touch-icon" sizes="72x72" href="https://www.babylonjs.com/img/favicon/apple-icon-72x72.png">
-	<link rel="apple-touch-icon" sizes="76x76" href="https://www.babylonjs.com/img/favicon/apple-icon-76x76.png">
-	<link rel="apple-touch-icon" sizes="114x114" href="https://www.babylonjs.com/img/favicon/apple-icon-114x114.png">
-	<link rel="apple-touch-icon" sizes="120x120" href="https://www.babylonjs.com/img/favicon/apple-icon-120x120.png">
-	<link rel="apple-touch-icon" sizes="144x144" href="https://www.babylonjs.com/img/favicon/apple-icon-144x144.png">
-	<link rel="apple-touch-icon" sizes="152x152" href="https://www.babylonjs.com/img/favicon/apple-icon-152x152.png">
-	<link rel="apple-touch-icon" sizes="180x180" href="https://www.babylonjs.com/img/favicon/apple-icon-180x180.png">
-	<link rel="icon" type="image/png" sizes="192x192"  href="https://www.babylonjs.com/img/favicon/android-icon-192x192.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="https://www.babylonjs.com/img/favicon/favicon-32x32.png">
-	<link rel="icon" type="image/png" sizes="96x96" href="https://www.babylonjs.com/img/favicon/favicon-96x96.png">
-	<link rel="icon" type="image/png" sizes="16x16" href="https://www.babylonjs.com/img/favicon/favicon-16x16.png">
-	<link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
-	<meta name="msapplication-TileColor" content="#ffffff">
-	<meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
-	<meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
-	<meta name="theme-color" content="#ffffff">
+    <link rel="apple-touch-icon" sizes="57x57" href="https://www.babylonjs.com/img/favicon/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="https://www.babylonjs.com/img/favicon/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="https://www.babylonjs.com/img/favicon/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="https://www.babylonjs.com/img/favicon/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="https://www.babylonjs.com/img/favicon/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="https://www.babylonjs.com/img/favicon/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="https://www.babylonjs.com/img/favicon/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="https://www.babylonjs.com/img/favicon/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="https://www.babylonjs.com/img/favicon/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="https://www.babylonjs.com/img/favicon/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="https://www.babylonjs.com/img/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="https://www.babylonjs.com/img/favicon/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="https://www.babylonjs.com/img/favicon/favicon-16x16.png">
+    <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
+    <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
+    <meta name="theme-color" content="#ffffff">
 
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
     <!-- Babylon.js -->
     <script src="https://preview.babylonjs.com/cannon.js"></script>
     <script src="https://preview.babylonjs.com/Oimo.js"></script>
-    <script src="https://preview.babylonjs.com/babylon.js"></script>    
+    <script src="https://preview.babylonjs.com/babylon.js"></script>
     <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
 
     <script src="https://preview.babylonjs.com/materialsLibrary/babylon.fireMaterial.min.js"></script>
@@ -60,9 +60,11 @@
     <script src="https://preview.babylonjs.com/loaders/babylon.objFileLoader.js"></script>
     <script src="https://preview.babylonjs.com/loaders/babylon.stlFileLoader.js"></script>
 
+    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
+
     <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
-    
-    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>    
+
+    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
     <script src="https://rawgit.com/BabylonJS/Extensions/master/canvas2D/dist/preview%20release/babylon.canvas2d.min.js"></script>
     <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"></script>
     <link href="frame.css" rel="stylesheet" />

Playground/index.html

@@ -49,6 +49,8 @@
 
     <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
 
+    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
+
     <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
 
     <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>

Tools/Gulp/config.json

@@ -1557,7 +1557,8 @@
             {
                 "files": [
                     "../../serializers/src/glTF/2.0/babylon.glTFSerializer.ts",
-                    "../../serializers/src/glTF/2.0/babylon.glTFExporter.ts"
+                    "../../serializers/src/glTF/2.0/babylon.glTFExporter.ts",
+                    "../../serializers/src/glTF/2.0/babylon.glTFData.ts"
                 ],
                 "output": "babylon.glTF2Serializer.js"
             }

Tools/Gulp/gulpfile.js

@@ -420,7 +420,7 @@ var buildExternalLibrary = function (library, settings, watch) {
  * The default task, concat and min the main BJS files.
  */
 gulp.task("default", function (cb) {
-    runSequence("typescript-all", "intellisense", "tests-saucelabs", cb);
+    runSequence("typescript-all", "intellisense", cb);
 });
 
 gulp.task("mainBuild", function (cb) {
@@ -478,7 +478,7 @@ gulp.task("typescript-all", function (cb) {
 /**
  * Watch ts files from typescript .
  */
-gulp.task("srcTscWatch", function() {
+gulp.task("srcTscWatch", function () {
     // Reuse The TSC CLI from gulp to enable -w.
     process.argv[2] = "-w";
     process.argv[3] = "-p";

dist/preview release/serializers/babylon.glTF2Serializer.d.ts

@@ -10,9 +10,7 @@ declare module BABYLON {
          * @returns {[fileName: string]: string | Blob} Returns an object with a .gltf, .glb and associates textures
          * as keys and their data and paths as values.
          */
-        static GLTF(scene: BABYLON.Scene, filename: string): {
-            [fileName: string]: string | Blob;
-        };
+        static GLTF(scene: BABYLON.Scene, filename: string): _GLTFData;
         /**
          *
          * @param meshes
@@ -20,17 +18,7 @@ declare module BABYLON {
          *
          * @returns {[fileName: string]: string | Blob} Returns an object with a .glb filename as key and data as value
          */
-        static GLB(scene: BABYLON.Scene, filename: string): {
-            [fileName: string]: string | Blob;
-        };
-        /**
-         * Downloads data from glTF object.
-         *
-         * @param gltfData glTF object with keys being file names and values being data
-         */
-        static downloadFiles(gltfData: {
-            [fileName: string]: string | Blob;
-        }): void;
+        static GLB(scene: BABYLON.Scene, filename: string): _GLTFData;
     }
 }
 
@@ -108,9 +96,7 @@ declare module BABYLON {
          * @returns {[x: string]: string | Blob} object with glTF json tex filename
          * and binary file name as keys and their data as values
          */
-        _generateGLTF(glTFPrefix: string): {
-            [x: string]: string | Blob;
-        };
+        _generateGLTF(glTFPrefix: string): _GLTFData;
         /**
          * Creates a binary buffer for glTF
          *
@@ -126,9 +112,7 @@ declare module BABYLON {
          *
          * @returns {[glbFileName: string]: Blob} object with glb filename as key and data as value
          */
-        _generateGLB(glTFPrefix: string): {
-            [glbFileName: string]: Blob;
-        };
+        _generateGLB(glTFPrefix: string): _GLTFData;
         /**
          * Sets the TRS for each node
          * @param node
@@ -160,3 +144,19 @@ declare module BABYLON {
         private createScene(babylonScene, byteOffset, dataBuffer?);
     }
 }
+
+declare module BABYLON {
+    /**
+     * Class for holding and downloading glTF file data
+     */
+    class _GLTFData {
+        _glTFFiles: {
+            [fileName: string]: string | Blob;
+        };
+        constructor();
+        /**
+         * Downloads glTF data.
+         */
+        downloadFiles(): void;
+    }
+}

dist/preview release/serializers/babylon.glTF2Serializer.js

@@ -30,42 +30,6 @@ var BABYLON;
             var gltfGenerator = new BABYLON._GLTF2Exporter(scene);
             return gltfGenerator._generateGLB(glTFPrefix);
         };
-        /**
-         * Downloads data from glTF object.
-         *
-         * @param gltfData glTF object with keys being file names and values being data
-         */
-        GLTF2Export.downloadFiles = function (gltfData) {
-            /**
-             * Checks for a matching suffix at the end of a string (for ES5 and lower)
-             * @param str
-             * @param suffix
-             *
-             * @returns {boolean} indicating whether the suffix matches or not
-             */
-            function endsWith(str, suffix) {
-                return str.indexOf(suffix, str.length - suffix.length) !== -1;
-            }
-            for (var key in gltfData) {
-                var link = document.createElement('a');
-                document.body.appendChild(link);
-                link.setAttribute("type", "hidden");
-                link.download = key;
-                var blob = gltfData[key];
-                var mimeType = void 0;
-                if (endsWith(key, ".glb")) {
-                    mimeType = { type: "model/gltf-binary" };
-                }
-                else if (endsWith(key, ".bin")) {
-                    mimeType = { type: "application/octet-stream" };
-                }
-                else if (endsWith(key, ".gltf")) {
-                    mimeType = { type: "model/gltf+json" };
-                }
-                link.href = window.URL.createObjectURL(new Blob([blob], mimeType));
-                link.click();
-            }
-        };
         return GLTF2Export;
     }());
     BABYLON.GLTF2Export = GLTF2Export;
@@ -282,7 +246,7 @@ var BABYLON;
          */
         _GLTF2Exporter.prototype.generateJSON = function (glb, glTFPrefix, prettyPrint) {
             var buffer = { byteLength: this.totalByteLength };
-            var glTf = {
+            var glTF = {
                 buffers: [buffer],
                 asset: this.asset,
                 meshes: this.meshes,
@@ -292,12 +256,12 @@ var BABYLON;
                 accessors: this.accessors
             };
             if (this.scenes.length > 0) {
-                glTf.scene = 0;
+                glTF.scene = 0;
             }
             if (!glb) {
                 buffer.uri = glTFPrefix + ".bin";
             }
-            var jsonText = prettyPrint ? JSON.stringify(glTf, null, 2) : JSON.stringify(glTf);
+            var jsonText = prettyPrint ? JSON.stringify(glTF, null, 2) : JSON.stringify(glTF);
             return jsonText;
         };
         /**
@@ -313,11 +277,10 @@ var BABYLON;
             var bin = new Blob([binaryBuffer], { type: 'application/octet-stream' });
             var glTFFileName = glTFPrefix + '.gltf';
             var glTFBinFile = glTFPrefix + '.bin';
-            return _a = {},
-                _a[glTFFileName] = jsonText,
-                _a[glTFBinFile] = bin,
-                _a;
-            var _a;
+            var container = new BABYLON._GLTFData();
+            container._glTFFiles[glTFFileName] = jsonText;
+            container._glTFFiles[glTFBinFile] = bin;
+            return container;
         };
         /**
          * Creates a binary buffer for glTF
@@ -386,10 +349,9 @@ var BABYLON;
             }
             // binary data
             var glbFile = new Blob([headerBuffer, jsonChunkBuffer, binaryChunkBuffer, binaryBuffer, binPaddingBuffer], { type: 'application/octet-stream' });
-            return _a = {},
-                _a[glbFileName] = glbFile,
-                _a;
-            var _a;
+            var container = new BABYLON._GLTFData();
+            container._glTFFiles[glbFileName] = glbFile;
+            return container;
         };
         /**
          * Sets the TRS for each node
@@ -647,3 +609,53 @@ var BABYLON;
 })(BABYLON || (BABYLON = {}));
 
 //# sourceMappingURL=babylon.glTFExporter.js.map
+
+var BABYLON;
+(function (BABYLON) {
+    /**
+     * Class for holding and downloading glTF file data
+     */
+    var _GLTFData = /** @class */ (function () {
+        function _GLTFData() {
+            this._glTFFiles = {};
+        }
+        /**
+         * Downloads glTF data.
+         */
+        _GLTFData.prototype.downloadFiles = function () {
+            /**
+            * Checks for a matching suffix at the end of a string (for ES5 and lower)
+            * @param str
+            * @param suffix
+            *
+            * @returns {boolean} indicating whether the suffix matches or not
+            */
+            function endsWith(str, suffix) {
+                return str.indexOf(suffix, str.length - suffix.length) !== -1;
+            }
+            for (var key in this._glTFFiles) {
+                var link = document.createElement('a');
+                document.body.appendChild(link);
+                link.setAttribute("type", "hidden");
+                link.download = key;
+                var blob = this._glTFFiles[key];
+                var mimeType = void 0;
+                if (endsWith(key, ".glb")) {
+                    mimeType = { type: "model/gltf-binary" };
+                }
+                else if (endsWith(key, ".bin")) {
+                    mimeType = { type: "application/octet-stream" };
+                }
+                else if (endsWith(key, ".gltf")) {
+                    mimeType = { type: "model/gltf+json" };
+                }
+                link.href = window.URL.createObjectURL(new Blob([blob], mimeType));
+                link.click();
+            }
+        };
+        return _GLTFData;
+    }());
+    BABYLON._GLTFData = _GLTFData;
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=babylon.glTFData.js.map

dist/preview release/serializers/babylonjs.serializers.js

@@ -174,42 +174,6 @@ var BABYLON;
             var gltfGenerator = new BABYLON._GLTF2Exporter(scene);
             return gltfGenerator._generateGLB(glTFPrefix);
         };
-        /**
-         * Downloads data from glTF object.
-         *
-         * @param gltfData glTF object with keys being file names and values being data
-         */
-        GLTF2Export.downloadFiles = function (gltfData) {
-            /**
-             * Checks for a matching suffix at the end of a string (for ES5 and lower)
-             * @param str
-             * @param suffix
-             *
-             * @returns {boolean} indicating whether the suffix matches or not
-             */
-            function endsWith(str, suffix) {
-                return str.indexOf(suffix, str.length - suffix.length) !== -1;
-            }
-            for (var key in gltfData) {
-                var link = document.createElement('a');
-                document.body.appendChild(link);
-                link.setAttribute("type", "hidden");
-                link.download = key;
-                var blob = gltfData[key];
-                var mimeType = void 0;
-                if (endsWith(key, ".glb")) {
-                    mimeType = { type: "model/gltf-binary" };
-                }
-                else if (endsWith(key, ".bin")) {
-                    mimeType = { type: "application/octet-stream" };
-                }
-                else if (endsWith(key, ".gltf")) {
-                    mimeType = { type: "model/gltf+json" };
-                }
-                link.href = window.URL.createObjectURL(new Blob([blob], mimeType));
-                link.click();
-            }
-        };
         return GLTF2Export;
     }());
     BABYLON.GLTF2Export = GLTF2Export;
@@ -426,7 +390,7 @@ var BABYLON;
          */
         _GLTF2Exporter.prototype.generateJSON = function (glb, glTFPrefix, prettyPrint) {
             var buffer = { byteLength: this.totalByteLength };
-            var glTf = {
+            var glTF = {
                 buffers: [buffer],
                 asset: this.asset,
                 meshes: this.meshes,
@@ -436,12 +400,12 @@ var BABYLON;
                 accessors: this.accessors
             };
             if (this.scenes.length > 0) {
-                glTf.scene = 0;
+                glTF.scene = 0;
             }
             if (!glb) {
                 buffer.uri = glTFPrefix + ".bin";
             }
-            var jsonText = prettyPrint ? JSON.stringify(glTf, null, 2) : JSON.stringify(glTf);
+            var jsonText = prettyPrint ? JSON.stringify(glTF, null, 2) : JSON.stringify(glTF);
             return jsonText;
         };
         /**
@@ -457,11 +421,10 @@ var BABYLON;
             var bin = new Blob([binaryBuffer], { type: 'application/octet-stream' });
             var glTFFileName = glTFPrefix + '.gltf';
             var glTFBinFile = glTFPrefix + '.bin';
-            return _a = {},
-                _a[glTFFileName] = jsonText,
-                _a[glTFBinFile] = bin,
-                _a;
-            var _a;
+            var container = new BABYLON._GLTFData();
+            container._glTFFiles[glTFFileName] = jsonText;
+            container._glTFFiles[glTFBinFile] = bin;
+            return container;
         };
         /**
          * Creates a binary buffer for glTF
@@ -530,10 +493,9 @@ var BABYLON;
             }
             // binary data
             var glbFile = new Blob([headerBuffer, jsonChunkBuffer, binaryChunkBuffer, binaryBuffer, binPaddingBuffer], { type: 'application/octet-stream' });
-            return _a = {},
-                _a[glbFileName] = glbFile,
-                _a;
-            var _a;
+            var container = new BABYLON._GLTFData();
+            container._glTFFiles[glbFileName] = glbFile;
+            return container;
         };
         /**
          * Sets the TRS for each node
@@ -792,6 +754,56 @@ var BABYLON;
 
 //# sourceMappingURL=babylon.glTFExporter.js.map
 
+var BABYLON;
+(function (BABYLON) {
+    /**
+     * Class for holding and downloading glTF file data
+     */
+    var _GLTFData = /** @class */ (function () {
+        function _GLTFData() {
+            this._glTFFiles = {};
+        }
+        /**
+         * Downloads glTF data.
+         */
+        _GLTFData.prototype.downloadFiles = function () {
+            /**
+            * Checks for a matching suffix at the end of a string (for ES5 and lower)
+            * @param str
+            * @param suffix
+            *
+            * @returns {boolean} indicating whether the suffix matches or not
+            */
+            function endsWith(str, suffix) {
+                return str.indexOf(suffix, str.length - suffix.length) !== -1;
+            }
+            for (var key in this._glTFFiles) {
+                var link = document.createElement('a');
+                document.body.appendChild(link);
+                link.setAttribute("type", "hidden");
+                link.download = key;
+                var blob = this._glTFFiles[key];
+                var mimeType = void 0;
+                if (endsWith(key, ".glb")) {
+                    mimeType = { type: "model/gltf-binary" };
+                }
+                else if (endsWith(key, ".bin")) {
+                    mimeType = { type: "application/octet-stream" };
+                }
+                else if (endsWith(key, ".gltf")) {
+                    mimeType = { type: "model/gltf+json" };
+                }
+                link.href = window.URL.createObjectURL(new Blob([blob], mimeType));
+                link.click();
+            }
+        };
+        return _GLTFData;
+    }());
+    BABYLON._GLTFData = _GLTFData;
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=babylon.glTFData.js.map
+
 
 (function universalModuleDefinition(root, factory) {
                 var f = factory();

dist/preview release/serializers/babylonjs.serializers.module.d.ts

@@ -23,9 +23,7 @@ declare module BABYLON {
          * @returns {[fileName: string]: string | Blob} Returns an object with a .gltf, .glb and associates textures
          * as keys and their data and paths as values.
          */
-        static GLTF(scene: BABYLON.Scene, filename: string): {
-            [fileName: string]: string | Blob;
-        };
+        static GLTF(scene: BABYLON.Scene, filename: string): _GLTFData;
         /**
          *
          * @param meshes
@@ -33,17 +31,7 @@ declare module BABYLON {
          *
          * @returns {[fileName: string]: string | Blob} Returns an object with a .glb filename as key and data as value
          */
-        static GLB(scene: BABYLON.Scene, filename: string): {
-            [fileName: string]: string | Blob;
-        };
-        /**
-         * Downloads data from glTF object.
-         *
-         * @param gltfData glTF object with keys being file names and values being data
-         */
-        static downloadFiles(gltfData: {
-            [fileName: string]: string | Blob;
-        }): void;
+        static GLB(scene: BABYLON.Scene, filename: string): _GLTFData;
     }
 }
 
@@ -121,9 +109,7 @@ declare module BABYLON {
          * @returns {[x: string]: string | Blob} object with glTF json tex filename
          * and binary file name as keys and their data as values
          */
-        _generateGLTF(glTFPrefix: string): {
-            [x: string]: string | Blob;
-        };
+        _generateGLTF(glTFPrefix: string): _GLTFData;
         /**
          * Creates a binary buffer for glTF
          *
@@ -139,9 +125,7 @@ declare module BABYLON {
          *
          * @returns {[glbFileName: string]: Blob} object with glb filename as key and data as value
          */
-        _generateGLB(glTFPrefix: string): {
-            [glbFileName: string]: Blob;
-        };
+        _generateGLB(glTFPrefix: string): _GLTFData;
         /**
          * Sets the TRS for each node
          * @param node
@@ -173,3 +157,19 @@ declare module BABYLON {
         private createScene(babylonScene, byteOffset, dataBuffer?);
     }
 }
+
+declare module BABYLON {
+    /**
+     * Class for holding and downloading glTF file data
+     */
+    class _GLTFData {
+        _glTFFiles: {
+            [fileName: string]: string | Blob;
+        };
+        constructor();
+        /**
+         * Downloads glTF data.
+         */
+        downloadFiles(): void;
+    }
+}

serializers/src/glTF/2.0/babylon.glTFData.ts

@@ -0,0 +1,49 @@
+module BABYLON {
+    /**
+     * Class for holding and downloading glTF file data
+     */
+    export class _GLTFData {
+        _glTFFiles: { [fileName: string]: string | Blob };
+
+        public constructor() {
+            this._glTFFiles = {};
+        }
+        /**
+         * Downloads glTF data.
+         */
+        public downloadFiles(): void {
+            /**
+            * Checks for a matching suffix at the end of a string (for ES5 and lower)
+            * @param str 
+            * @param suffix 
+            * 
+            * @returns {boolean} indicating whether the suffix matches or not
+            */
+            function endsWith(str: string, suffix: string): boolean {
+                return str.indexOf(suffix, str.length - suffix.length) !== -1;
+            }
+            for (let key in this._glTFFiles) {
+                let link = document.createElement('a');
+                document.body.appendChild(link);
+                link.setAttribute("type", "hidden");
+                link.download = key;
+                let blob = this._glTFFiles[key];
+                let mimeType;
+
+                if (endsWith(key, ".glb")) {
+                    mimeType = { type: "model/gltf-binary" };
+                }
+                else if (endsWith(key, ".bin")) {
+                    mimeType = { type: "application/octet-stream" };
+                }
+                else if (endsWith(key, ".gltf")) {
+                    mimeType = { type: "model/gltf+json" };
+                }
+
+                link.href = window.URL.createObjectURL(new Blob([blob], mimeType));
+                link.click();
+            }
+
+        }
+    }
+}

serializers/src/glTF/2.0/babylon.glTFExporter.ts

@@ -52,8 +52,8 @@ module BABYLON {
         bufferViews: _IGLTFBufferView[];
         accessors: _IGLTFAccessor[];
     }
-    export class _GLTF2Exporter {
 
+    export class _GLTF2Exporter {
         private bufferViews: _IGLTFBufferView[];
         private accessors: _IGLTFAccessor[];
         private nodes: _IGLTFNode[];
@@ -75,7 +75,7 @@ module BABYLON {
             let totalByteLength = 0;
 
             totalByteLength = this.createScene(this.babylonScene, totalByteLength);
-            
+
             this.totalByteLength = totalByteLength;
         }
 
@@ -282,7 +282,7 @@ module BABYLON {
         private generateJSON(glb: boolean, glTFPrefix?: string, prettyPrint?: boolean): string {
             let buffer: _IGLTFBuffer = { byteLength: this.totalByteLength };
 
-            let glTf: _IGLTF = {
+            let glTF: _IGLTF = {
                 buffers: [buffer],
                 asset: this.asset,
                 meshes: this.meshes,
@@ -292,14 +292,14 @@ module BABYLON {
                 accessors: this.accessors
             };
             if (this.scenes.length > 0) {
-                glTf.scene = 0;
+                glTF.scene = 0;
             }
 
             if (!glb) {
                 buffer.uri = glTFPrefix + ".bin";
             }
 
-            let jsonText = prettyPrint ? JSON.stringify(glTf, null, 2) : JSON.stringify(glTf);
+            let jsonText = prettyPrint ? JSON.stringify(glTF, null, 2) : JSON.stringify(glTF);
 
             return jsonText;
         }
@@ -310,7 +310,7 @@ module BABYLON {
          * @returns {[x: string]: string | Blob} object with glTF json tex filename 
          * and binary file name as keys and their data as values
          */
-        public _generateGLTF(glTFPrefix: string): { [x: string]: string | Blob } {
+        public _generateGLTF(glTFPrefix: string): _GLTFData {
             const jsonText = this.generateJSON(false, glTFPrefix, true);
             const binaryBuffer = this.generateBinary();
             const bin = new Blob([binaryBuffer], { type: 'application/octet-stream' });
@@ -318,10 +318,11 @@ module BABYLON {
             const glTFFileName = glTFPrefix + '.gltf';
             const glTFBinFile = glTFPrefix + '.bin';
 
-            return {
-                [glTFFileName]: jsonText,
-                [glTFBinFile]: bin
-            };
+            let container = new _GLTFData();
+            container._glTFFiles[glTFFileName] = jsonText;
+            container._glTFFiles[glTFBinFile] = bin;
+
+            return container;
         }
         /**
          * Creates a binary buffer for glTF
@@ -333,7 +334,7 @@ module BABYLON {
             let binaryBuffer = new ArrayBuffer(this.totalByteLength);
             let dataBuffer = new DataView(binaryBuffer);
             byteOffset = this.createScene(this.babylonScene, byteOffset, dataBuffer);
-            
+
             return binaryBuffer;
         }
         /**
@@ -345,7 +346,7 @@ module BABYLON {
          * 
          * @returns {[glbFileName: string]: Blob} object with glb filename as key and data as value
          */
-        public _generateGLB(glTFPrefix: string): { [glbFileName: string]: Blob } {
+        public _generateGLB(glTFPrefix: string): _GLTFData {
             const jsonText = this.generateJSON(true);
             const binaryBuffer = this.generateBinary();
             let glbFileName = glTFPrefix + '.glb';
@@ -399,9 +400,10 @@ module BABYLON {
             // binary data
             let glbFile = new Blob([headerBuffer, jsonChunkBuffer, binaryChunkBuffer, binaryBuffer, binPaddingBuffer], { type: 'application/octet-stream' });
 
-            return {
-                [glbFileName]: glbFile
-            };
+            let container = new _GLTFData();
+            container._glTFFiles[glbFileName] = glbFile;
+
+            return container;
         }
         /**
          * Sets the TRS for each node
@@ -689,7 +691,7 @@ module BABYLON {
          * @returns {number} bytelength + byteoffset
          */
         private createScene(babylonScene: BABYLON.Scene, byteOffset: number, dataBuffer?: DataView): number {
-            if (babylonScene.meshes.length > 0 ) {
+            if (babylonScene.meshes.length > 0) {
                 let babylonMeshes = babylonScene.meshes;
                 let scene = { nodes: new Array<number>() };
 

serializers/src/glTF/2.0/babylon.glTFSerializer.ts

@@ -11,7 +11,7 @@ module BABYLON {
          * @returns {[fileName: string]: string | Blob} Returns an object with a .gltf, .glb and associates textures
          * as keys and their data and paths as values.
          */
-        public static GLTF(scene: BABYLON.Scene, filename: string): {[fileName: string]: string | Blob} {
+        public static GLTF(scene: BABYLON.Scene, filename: string): _GLTFData {
             let glTFPrefix = filename.replace(/\.[^/.]+$/, "");
             let gltfGenerator = new _GLTF2Exporter(scene);
 
@@ -24,49 +24,11 @@ module BABYLON {
          * 
          * @returns {[fileName: string]: string | Blob} Returns an object with a .glb filename as key and data as value
          */
-        public static GLB(scene: BABYLON.Scene, filename: string): {[fileName: string]: string | Blob} {
+        public static GLB(scene: BABYLON.Scene, filename: string): _GLTFData {
             let glTFPrefix = filename.replace(/\.[^/.]+$/, "");        
             let gltfGenerator = new _GLTF2Exporter(scene);
 
             return gltfGenerator._generateGLB(glTFPrefix);
         }
-        /**
-         * Downloads data from glTF object.
-         * 
-         * @param gltfData glTF object with keys being file names and values being data
-         */
-        public static downloadFiles(gltfData: {[fileName: string]: string | Blob} ): void {
-            /**
-             * Checks for a matching suffix at the end of a string (for ES5 and lower)
-             * @param str 
-             * @param suffix 
-             * 
-             * @returns {boolean} indicating whether the suffix matches or not
-             */
-            function endsWith(str: string, suffix: string): boolean {
-                return str.indexOf(suffix, str.length - suffix.length) !== -1;
-            }
-            for (let key in gltfData) {
-                let link = document.createElement('a');
-                document.body.appendChild(link);
-                link.setAttribute("type", "hidden");
-                link.download = key;
-                let blob = gltfData[key];
-                let mimeType;
-                
-                if (endsWith(key, ".glb")) {
-                    mimeType = {type: "model/gltf-binary"};
-                }
-                else if (endsWith(key, ".bin")) {
-                    mimeType = {type: "application/octet-stream"};
-                }
-                else if (endsWith(key, ".gltf")) {
-                    mimeType = {type: "model/gltf+json"};
-                }
-
-                link.href = window.URL.createObjectURL(new Blob([blob], mimeType));
-                link.click();
-            }
-        }
     }
 }

tests/validation/config.json

@@ -241,7 +241,8 @@
       "renderCount": 20,
       "scriptToRun": "/Demos/GLTF1CesiumMan/index.js",
       "functionToCall": "createScene",
-      "referenceImage": "gltf1CesiumMan.png"
+      "referenceImage": "gltf1CesiumMan.png",
+      "excludeFromAutomaticTesting": true
     },
     {
       "title": "GLTF Mesh Primitive Attribute Test",
@@ -330,7 +331,8 @@
       "scriptToRun": "/Demos/Procedural/proceduralTexture.js",
       "functionToCall": "CreateProceduralTextureTestScene",
       "referenceImage": "procedural.png",
-      "replace": "./land, https://cdn.rawgit.com/BabylonJS/Website/06ecbea7/Demos/Procedural/land"
+      "replace": "./land, https://cdn.rawgit.com/BabylonJS/Website/06ecbea7/Demos/Procedural/land",
+      "excludeFromAutomaticTesting": true
     },
     {
       "title": "Instances",
@@ -338,7 +340,8 @@
       "scriptToRun": "/Demos/Instances/instances.js",
       "functionToCall": "CreateInstancesTestScene",
       "referenceImage": "instances.png",
-      "replace": "ground., Ground."
+      "replace": "ground., Ground.",
+      "excludeFromAutomaticTesting": true
     },
     {
       "title": "Instanced Bones",

tests/validation/integration.js

@@ -1,4 +1,4 @@
-window.__karma__.loaded = function() {};
+window.__karma__.loaded = function () { };
 
 // Loading tests
 var xhr = new XMLHttpRequest();
@@ -10,38 +10,38 @@ xhr.addEventListener("load", function () {
 
         config = JSON.parse(xhr.responseText);
 
-        describe("Validation Tests", function() {
+        describe("Validation Tests", function () {
             before(function (done) {
                 this.timeout(180000);
                 require = null;
                 BABYLONDEVTOOLS.Loader
-                .require('/tests/validation/validation.js')
-                .useDist()
-                .load(function() {
-                    done();            
-                });
+                    .require('/tests/validation/validation.js')
+                    .useDist()
+                    .load(function () {
+                        done();
+                    });
             });
-        
+
             // Run tests
             for (let index = 0; index < config.tests.length; index++) {
                 var test = config.tests[index];
-                if (test.onlyVisual) {
+                if (test.onlyVisual || test.excludeFromAutomaticTesting) {
                     continue;
                 }
 
-                it(test.title, function(done) {
+                it(test.title, function (done) {
                     this.timeout(240000);
-        
+
                     try {
-                        runTest(index, function(result) {
+                        runTest(index, function (result) {
                             try {
-                                expect(result).to.be.true; 
+                                expect(result).to.be.true;
                                 done();
                             }
                             catch (e) {
                                 done(e);
                             }
-                        });                
+                        });
                     }
                     catch (e) {
                         done(e);
@@ -50,7 +50,7 @@ xhr.addEventListener("load", function () {
             };
         });
 
-        window.__karma__.start();          
+        window.__karma__.start();
     }
 }, false);