Merge branch 'master' into value-axis

.gitignore

@@ -37,6 +37,7 @@ x64/
 *_p.c
 *.ilk
 *.meta
+*.obj
 *.pch
 *.pdb
 *.pgc
@@ -197,4 +198,6 @@ gui/dist/
 /Viewer/tests/tsserver
 /Viewer/tests/tsserver.cmd
 # Local Netlify folder
-.netlify
+.netlify
+Playground/dist/
+Sandbox/public/dist/

.prettierrc

@@ -0,0 +1,5 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "printWidth": 300
+  }

.vscode/launch.json

@@ -86,7 +86,7 @@
             "type": "edge",
             "version": "dev",
             "request": "launch",
-            "url": "http://localhost:1338/Playground/public/index-local.html",
+            "url": "http://localhost:1338/Playground/index-local.html",
             "webRoot": "${workspaceRoot}/",
             "sourceMaps": true,
             "preLaunchTask": "run",
@@ -94,6 +94,19 @@
             "runtimeArgs": [
                 "--enable-unsafe-es3-apis"
             ]
+        },        
+        {
+            "name": "Launch playground (Edge) - Direct",
+            "type": "edge",
+            "version": "dev",
+            "request": "launch",
+            "url": "http://localhost:1338/Playground/index-local.html",
+            "webRoot": "${workspaceRoot}/",
+            "sourceMaps": true,
+            "userDataDir": "${workspaceRoot}/.tempChromeProfileForDebug",
+            "runtimeArgs": [
+                "--enable-unsafe-es3-apis"
+            ]
         },
         {
             "name": "Launch playground (Chrome+WebGL 1.0 forced)",

Playground/debug.html

@@ -6,48 +6,28 @@
         <meta charset='utf-8' />
         <meta name="viewport" content="width=device-width, user-scalable=no">
         <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
-        <meta name="description" content="Babylon.js playground online debug">
-        <meta name="keywords" content="Babylon.js,WebGL,3D, debug">
-
-        <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">
-
-        <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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
-        <link rel="stylesheet" href="/css/index.css" />
-        <link rel="stylesheet" href="/css/index_mobile.css" />
+        <meta name="description" content="Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes">
+        <meta name="keywords" content="Babylon.js,WebGL,3D">
+        
+        <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
+        <link rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
 
         <!-- Pep -->
         <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
-        <!-- For canvas/code separator -->
-        <script src="/js/libs/split.js"></script>
+        <!--For canvas/code separator-->
+        <script src="libs/split.js"></script>
 
-        <!-- DatGUI CDN -->
+        <!-- DatGUI -->
         <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
+        
         <!-- jszip -->
-        <script src="/js/libs/jszip.min.js"></script>
-        <script src="/js/libs/fileSaver.js"></script>
+        <script src="/libs/jszip.min.js"></script>
+        <script src="/libs/fileSaver.js"></script>
+
+        <!-- jQuery -->
+        <script src="https://code.jquery.com/jquery.js"></script>
+        <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>        
 
         <!-- Dependencies -->
         <script src="https://preview.babylonjs.com/ammo.js"></script>
@@ -55,457 +35,56 @@
         <script src="https://preview.babylonjs.com/cannon.js"></script>
         <script src="https://preview.babylonjs.com/Oimo.js"></script>
         <script src="https://preview.babylonjs.com/libktx.js"></script>
+        <script src="https://preview.babylonjs.com/earcut.min.js"></script>
+        
+        <!-- Babylon.js -->
         <script src="https://preview.babylonjs.com/babylon.max.js"></script>
         <script src="https://preview.babylonjs.com/gui/babylon.gui.js"></script>
-        <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
-        <!-- Babylon.js -->
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.fireMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.waterMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.lavaMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.normalMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.skyMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.triPlanarMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.terrainMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gradientMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.furMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gridMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.shadowOnlyMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.customMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.cellMaterial.min.js"></script>
-
-        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.brickProceduralTexture.min.js">
-        </script>
-        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.cloudProceduralTexture.min.js">
-        </script>
-        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.fireProceduralTexture.min.js">
-        </script>
-        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.grassProceduralTexture.min.js">
-        </script>
-        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.marbleProceduralTexture.min.js">
-        </script>
-        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.roadProceduralTexture.min.js">
-        </script>
-        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.starfieldProceduralTexture.min.js">
-        </script>
-        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.woodProceduralTexture.min.js">
-        </script>
-
-        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.asciiArtPostProcess.min.js"></script>
-        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.digitalRainPostProcess.min.js"></script>
-
-        <script src="https://preview.babylonjs.com/loaders/babylon.glTFFileLoader.js"></script>
-        <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/nodeEditor/babylon.nodeEditor.max.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.js"></script>
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.js"></script>
+        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.js"></script>
+        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
         <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.js"></script>
-
-        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
-
-        <!-- Extensions -->
-        <script
-            src="https://rawcdn.githack.com/BabylonJS/Extensions/f43ab677b4bca0a6ab77132d3f785be300382760/ClonerSystem/src/babylonx.cloner.js"
-            async>
-        </script>
-        <script
-            src="https://rawcdn.githack.com/BabylonJS/Extensions/785013ec55b210d12263c91f3f0a2ae70cf0bc8a/CompoundShader/src/babylonx.CompoundShader.js"
-            async></script>
-
-        <!-- Scene Manager -->
-        <script
-            src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.manager.js">
-        </script>
-        <script
-            src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.navmesh.js">
-        </script>
-
-        <!-- Monaco -->
-        <script src="/node_modules/monaco-editor/dev/vs/loader.js"></script>
-
+        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.max.js"></script>
+
+         <!-- Extensions -->
+         <script
+             src="https://rawcdn.githack.com/BabylonJS/Extensions/f43ab677b4bca0a6ab77132d3f785be300382760/ClonerSystem/src/babylonx.cloner.js"
+             >
+         </script>
+         <script
+             src="https://rawcdn.githack.com/BabylonJS/Extensions/785013ec55b210d12263c91f3f0a2ae70cf0bc8a/CompoundShader/src/babylonx.CompoundShader.js"
+             ></script>
+ 
+         <!-- Scene Manager -->
+         <script
+             src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.manager.js">
+         </script>
+         <script
+             src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.navmesh.js">
+         </script>        
+
+        <style>
+            html,
+            body,
+            #host-element {
+                width: 100%;
+                height: 100%;
+                padding: 0;
+                margin: 0;
+                overflow: hidden;
+            }
+        </style>        
     </head>
 
-    <body>
-        <!-- Big screens -->
-        <div class="navbar navBar1280 languageJS">
-            <div class="categoryTitle">
-                <img class="logo" src="/css/img/logo_v4.svg">
-                <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>
-            </div>
-
-            <div class="category languageJS" id="JStoTSbar">
-                <div class="buttonJStoTS languageTS" id="toTSbutton1280">TS</div>
-                <div class="buttonJStoTS languageJS" id="toJSbutton1280">JS</div>
-                <div class="buttonPG run removeOnDiff" id="runButton1280"><img src="/css/img/playButton.svg"></div>
-                <div class="buttonPG removeOnDiff" id="saveButton1280"><img src="/css/img/saveButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1280"><img
-                        src="/css/img/downloadButton.svg"></div>
-                <div class="buttonPG removeOnDiff" id="newButton1280"><img src="/css/img/newButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1280"><img
-                        src="/css/img/clearButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1280"><img src="/css/img/diffButton.svg">
-                </div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1280"><img
-                        src="/css/img/previousButton.svg"></div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1280"><img
-                        src="/css/img/nextButton.svg"></div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1280"><img
-                        src="/css/img/exitButton.svg"></div>
-                <div class="buttonPG select removeOnDiff" id="menuButton1280"><img src="/css/img/optionsButton.svg">
-                    <div class="toDisplay languageJS">
-                        <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                            <div class="toDisplaySub languageJS">
-                                <div class="option selected" id="darkTheme1280">Dark</div>
-                                <div class="option" id="lightTheme1280">Light</div>
-                            </div>
-                        </div>
-                        <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                            <div class="toDisplaySub displayFontSize languageJS">
-                                <div class="option">12</div>
-                                <div class="option selected">14</div>
-                                <div class="option">16</div>
-                                <div class="option">18</div>
-                                <div class="option">20</div>
-                                <div class="option">22</div>
-                            </div>
-                        </div>
-                        <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option checked noSubSelect" id="editorButton1280">Editor
-                            <i class="fa fa-check-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option noSubSelect" id="ctrlsToggle1280">CTRL+S to save
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
-                        <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
-                        <div class="option noSubSelect" id="formatButton1280">Format code</div>
-                        <div class="option noSubSelect" id="minimapToggle1280">Minimap
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option subSelect" id="qrCodeHover1280">QR Code Link <i class="fa fa-chevron-right"
-                                aria-hidden="true"></i>
-                            <div class="toDisplaySub qrCodeImage">
-                                <div class="option" id="qrCodeImage1280">[QR Code Image]</div>
-                            </div>
-                        </div>
-                        <div class="option uncheck noSubSelect" id="debugButton1280">Inspector</div>
-                        <div class="option nosubselect" id="metadataButton1280">Metadata</div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="category right">
-                <div class="buttonPG select removeOnDiff">
-                    <span id="currentVersion1280"></span>
-                    <div class="toDisplay currentVersionDisplay" style="display: none"></div>
-                </div>
-                <div class="buttonPG select removeOnDiff"><img class="examplesButton" src="/css/img/examplesButton.svg">
-                </div>
-            </div>
-        </div>
-
-        <!-- Mid-size screens -->
-        <div class="navbar navBar1024 languageJS">
-            <div class="categoryTitle">
-                <img class="logo" src="/css/img/logo_v4.svg">
-                <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
-            </div>
-
-            <div class="category languageJS" id="JStoTSbar">
-                <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
-                <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
-                <div class="buttonSpaceKiller"></div>
-                <div class="buttonPG run removeOnDiff" id="runButton1024"><img src="/css/img/playButton.svg"></div>
-                <div class="buttonPG removeOnDiff" id="saveButton1024"><img src="/css/img/saveButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1024"><img
-                        src="/css/img/downloadButton.svg"></div>
-                <div class="buttonPG removeOnDiff" id="newButton1024"><img src="/css/img/newButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1024"><img
-                        src="/css/img/clearButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1024"><img src="/css/img/diffButton.svg">
-                </div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1024"><img
-                        src="/css/img/previousButton.svg"></div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1024"><img
-                        src="/css/img/nextButton.svg"></div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1024"><img
-                        src="/css/img/exitButton.svg"></div>
-
-                <div class="buttonPG select removeOnDiff" id="menuButton1024"><img src="/css/img/optionsButton.svg">
-                    <div class="toDisplay">
-                        <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-
-                            <div class="toDisplaySub">
-                                <div class="option selected" id="darkTheme1024">Dark</div>
-                                <div class="option" id="lightTheme1024">Light</div>
-                            </div>
-                        </div>
-                        <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                            <div class="toDisplaySub displayFontSize">
-                                <div class="option">12</div>
-                                <div class="option selected">14</div>
-                                <div class="option">16</div>
-                                <div class="option">18</div>
-                                <div class="option">20</div>
-                                <div class="option">22</div>
-                            </div>
-                        </div>
-                        <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option checked noSubSelect" id="editorButton1024">Editor
-                            <i class="fa fa-check-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option noSubSelect" id="ctrlsToggle1024">CTRL+S to save
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
-                        <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
-                        <div class="option noSubSelect" id="formatButton1024">Format code</div>
-                        <div class="option noSubSelect" id="minimapToggle1024">Minimap
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option subSelect" id="qrCodeHover1024">QR Code Link <i class="fa fa-chevron-right"
-                                aria-hidden="true"></i>
-                            <div class="toDisplaySub qrCodeImage">
-                                <div class="option" id="qrCodeImage1024">[QR Code Image]</div>
-                            </div>
-                        </div>
-                        <div class="option uncheck noSubSelect" id="debugButton1024">Inspector</div>
-                        <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="category right">
-                <div class="buttonPG select removeOnDiff">
-                    <span id="currentVersion1024"></span>
-                    <div class="toDisplay currentVersionDisplay" style="display: none">
-                    </div>
-                </div>
-                <div class="buttonPG select removeOnDiff"><img class="examplesButton" src="/css/img/examplesButton.svg">
-                </div>
-            </div>
-        </div>
-
-        <!-- Mobile -->
-        <div class="navbar navBarMobile languageJS">
-            <div class="category languageJS" id="JStoTSbar">
-                <div class="buttonPG select" id="menuButtonMobile"><img src="/css/img/hamburgerButton.svg">
-                    <div class="toDisplay">
-                        <div class="option noSubSelect languageTS" id="toTSbuttonMobile">TypeScript</div>
-                        <div class="option noSubSelect languageJS" id="toJSbuttonMobile">JavaScript</div>
-                        <div class="option noSubSelect run removeOnDiff" id="runButtonMobile"><img
-                                src="/css/img/playButton.svg">Run</div>
-                        <div class="option noSubSelect removeOnDiff" id="saveButtonMobile"><img
-                                src="/css/img/saveButton.svg">Save</div>
-                        <div class="option noSubSelect removeOnDiff" id="zipButtonMobile"><img
-                                src="/css/img/downloadButton.svg">Download</div>
-                        <div class="option noSubSelect removeOnDiff" id="newButtonMobile"><img
-                                src="/css/img/newButton.svg">New</div>
-                        <div class="option noSubSelect removeOnDiff" id="clearButtonMobile"><img
-                                src="/css/img/clearButton.svg">Clear</div>
-                        <div class="option noSubSelect removeOnDiff" id="diffButtonMobile"><img
-                                src="/css/img/DiffButton.svg">Diff</div>
-                        <div class="option noSubSelect displayOnDiff" id="previousButtonMobile"><img
-                                src="/css/img/previousButton.svg">Previous</div>
-                        <div class="option noSubSelect displayOnDiff" id="nextButtonMobile"><img
-                                src="/css/img/nextButton.svg">Next</div>
-                        <div class="option noSubSelect displayOnDiff" id="exitButtonMobile"><img
-                                src="/css/img/exitButton.svg">Exit</div>
-
-                        <div class="option noSubSelect removeOnDiff" id="debugButtonMobile"><img
-                                src="/css/img/inspectorButton.svg">Inspector</div>
-                        <div class="option subSelect removeOnDiff">
-                            <img src="/css/img/optionsButton.svg">
-                            <div id="currentVersionMobile"></div>
-                            <div class="toDisplaySub currentVersionDisplay">
-                            </div>
-                        </div>
-                        <div class="option subSelect removeOnDiff"><img src="/css/img/optionsButton.svg">Theme
-                            <div class="toDisplaySub">
-                                <div class="option selected" id="darkThemeMobile">Dark</div>
-                                <div class="option" id="lightThemeMobile">Light</div>
-                            </div>
-                        </div>
-                        <div class="option subSelect removeOnDiff"><img src="/css/img/optionsButton.svg">Font size
-                            <div class="toDisplaySub displayFontSize">
-                                <div class="option">8</div>
-                                <div class="option">10</div>
-                                <div class="option selected">12</div>
-                                <div class="option">14</div>
-                                <div class="option">16</div>
-                                <div class="option">18</div>
-                                <div class="option">20</div>
-                                <div class="option">22</div>
-                            </div>
-                        </div>
-                        <div style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
-                            <i class="fa fa-check-square" aria-hidden="true"></i>
-                        </div>
-                        <div style="display: none;" class="option noSubSelect" id="ctrlsToggleMobile">CTRL+S to save
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>                        
-                        <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile"
-                            style="display: none">Fullscreen</div>
-                        <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile"
-                            style="display: none">Editor
-                            Fullscreen</div>
-                        <div class="option nosubselect removeOnDiff" id="formatButtonMobile"><img
-                                src="/css/img/optionsButton.svg">Format
-                            code</div>
-                        <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <!-- <div class="option subSelect" id="qrCodeHoverMobile"><img src="/css/img/optionsButton.svg">QR Code Link
-                        <div class="toDisplaySub qrCodeImage">
-                            <div class="option" id="qrCodeImageMobile">[QR Code Image]</div>
-                        </div>
-                    </div> -->
-                        <div class="option nosubselect removeOnDiff" id="metadataButtonMobile"><img
-                                src="/css/img/metadataButton.svg">Metadata</div>
-                        <div class="option nosubselect removeOnDiff"><img class="examplesButton"
-                                src="/css/img/examplesButton.svg">Examples</div>
-                        <div class="option subSelect removeOnDiff"><img src="/css/img/examplesButton.svg">Links / Tools
-                            <div class="toDisplaySub displayFooterLinks">
-                                <div class="option link">
-                                    <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
-                                </div>
-                                <div class="option link">
-                                    <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
-                                </div>
-                                <div class="option link">
-                                    <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
-                                </div>
-                                <div class="option link">
-                                    <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
-                                </div>
-                                <div class="option link">
-                                    <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="categoryTitle">
-                    <img class="logo" src="/css/img/logo_v4.svg">
-                    <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
-                </div>
-            </div>
-
-            <div id="switchWrapper" class="languageJS removeOnDiff">
-                <img id="switchWrapperCode" src="/css/img/codeButton.svg">
-                <img id="switchWrapperCanvas" src="/css/img/canvas3Dbutton.svg">
-            </div>
-        </div>
-
-        <!-- Common things -->
-
-        <div class="wrapper">
-            <div id="jsEditor"></div>
-            <div id="diffView" class="diff-view"></div>
-            <div id="canvasZone">
-                <canvas touch-action="none" id="renderCanvas"></canvas>
-            </div>
-        </div>
-        <div id="exampleList" class="javascript">
-            <div id="exampleBanner" class="languageJS">
-                <h1>Examples<img id="examplesButtonClose" src="/css/img/clearButton.svg"></h1>
-            </div>
-            <div class="horizontalSeparator"></div>
-            <input id="filterBar" type="text" placeholder="Filter examples...">
-            <img id="filterBarClear"
-                src="/css/img/clear_button.png">
-        </div>
-
-        <div class="fpsLabel languageJS" id="fpsLabel"></div>
-
-        <div id="errorZone">
-        </div>
-
-        <div class="navbarBottom">
-            <div id="statusBar"></div>
-            <div class="links">
-                <div class='link'>
-                    <a target='_new' href="https://forum.babylonjs.com/">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>
-
-        <div id="saveLayer" class="save-layer">
-            <div class="save-form languageJS ">
-                <img id="saveFormButtonClose" src="/css/img/clearButton.svg">
-                <label for="saveFormTitle">TITLE</label>
-                <div class="separator"></div>
-                <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
-
-                <label for="saveFormDescription">DESCRIPTION</label>
-                <div class="separator"></div>
-                <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
-
-                <label for="saveFormTags">TAGS (separated by comma)</label>
-                <div class="separator"></div>
-                <textarea id="saveFormTags" rows="4" cols="10"></textarea>
-
-                <div class="save-form-buttons" id="saveFormButtons">
-                    <div id="saveFormButtonOk">OK</div>
-                    <div id="saveFormButtonCancel">Cancel</div>
-                </div>
-            </div>
-        </div>
-
-        <div id="diffLayer" class="save-layer">
-            <div class="save-form diff-form">
-                <label for="diffFormSource">COMPARISON SOURCE</label>
-                <div class="separator"></div>
-                <input type="text" maxlength="120" id="diffFormSource"
-                    placeholder="leave blank to use current snippet, or use snippet ID" class="save-form-title">
-
-                <label for="diffFormCompareTo">COMPARE TO</label>
-                <div class="separator"></div>
-                <input type="text" maxlength="120" id="diffFormCompareTo" placeholder="snippet ID"
-                    class="save-form-title">
-
-                <div class="save-form-buttons" id="diffFormButtons">
-                    <div id="diffFormButtonOk">OK</div>
-                    <div id="diffFormButtonCancel">Cancel</div>
-                </div>
-            </div>
-        </div>
-
-        <div id="waitDiv">
-            <div id="logo-part">
-                <img src="/css/img/v4.svg" id="waitLogo" />
-                <img src="/css/img/spinner.svg" id="waitSpinner" />
-            </div>
-        </div>
-
-        <!-- jQuery -->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-        <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>
-
-        <!-- Main scripts -->
-        <script src="/js/config_versions.js"></script>
-        <script src="/js/examples.js"></script>
-        <script src="/js/main.js"></script>
-        <script src="/js/menuPG.js"></script>
-        <script src="/js/monacoCreator.js"></script>
-        <script src="/js/settingsPG.js"></script>
-        <script src="/js/utils.js"></script>
-        <script src="/js/zipTool.js"></script>
-        <script src="/js/index.js"></script>
+    <body>        
+        <div id="host-element">
+        </div>   
+        
+        <script src="/dist/babylon.playground.js"></script>
+        
+        <script src="/index.js"></script>
     </body>
 
 </html>

Playground/frame.html

@@ -1,24 +1,32 @@
 <!DOCTYPE html>
 <html>
+
     <head>
         <title>Babylon.js Playground</title>
         <meta charset='utf-8' />
-        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
+        <meta name="viewport" content="width=device-width, user-scalable=no">
+        <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
         <meta name="description" content="Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes">
         <meta name="keywords" content="Babylon.js,WebGL,3D">
-
-        <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
-
-        <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="stylesheet" href="https://use.typekit.net/cta4xsb.css">
+        <link rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
 
         <!-- Pep -->
         <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+        <!--For canvas/code separator-->
+        <script src="/libs/split.js"></script>
 
-        <!-- DatGUI CDN -->
+        <!-- DatGUI -->
         <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
+        <!-- jszip -->
+        <script src="/libs/jszip.min.js"></script>
+        <script src="/libs/fileSaver.js"></script>
+
+        <!-- jQuery -->
+        <script src="https://code.jquery.com/jquery.js"></script>
+        <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>        
 
         <!-- Dependencies -->
         <script src="https://preview.babylonjs.com/ammo.js"></script>
@@ -27,93 +35,55 @@
         <script src="https://preview.babylonjs.com/Oimo.js"></script>
         <script src="https://preview.babylonjs.com/libktx.js"></script>
         <script src="https://preview.babylonjs.com/earcut.min.js"></script>
+        
+        <!-- Babylon.js -->
         <script src="https://preview.babylonjs.com/babylon.js"></script>
         <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
         <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
-        <!-- Babylon.js -->
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.fireMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.waterMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.lavaMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.normalMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.skyMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.triPlanarMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.terrainMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gradientMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.furMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gridMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.shadowOnlyMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.customMaterial.min.js"></script>
-        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.cellMaterial.min.js"></script>
-
-        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.brickProceduralTexture.min.js">
-        </script>
-        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.cloudProceduralTexture.min.js">
-        </script>
-        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.fireProceduralTexture.min.js">
-        </script>
-        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.grassProceduralTexture.min.js">
-        </script>
-        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.marbleProceduralTexture.min.js">
-        </script>
-        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.roadProceduralTexture.min.js">
-        </script>
-        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.starfieldProceduralTexture.min.js">
-        </script>
-        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.woodProceduralTexture.min.js">
-        </script>
-
-        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.asciiArtPostProcess.min.js"></script>
-        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.digitalRainPostProcess.min.js"></script>
-
-        <script src="https://preview.babylonjs.com/loaders/babylon.glTFFileLoader.js"></script>
-        <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/materialsLibrary/babylonjs.materials.min.js"></script>
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
+        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
+        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
         <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
-
         <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
 
-        <!-- Extensions -->
-        <script
-            src="https://rawcdn.githack.com/BabylonJS/Extensions/f43ab677b4bca0a6ab77132d3f785be300382760/ClonerSystem/src/babylonx.cloner.js"
-            async>
-        </script>
-        <script
-            src="https://rawcdn.githack.com/BabylonJS/Extensions/785013ec55b210d12263c91f3f0a2ae70cf0bc8a/CompoundShader/src/babylonx.CompoundShader.js"
-            async></script>
-
-        <!-- Scene Manager -->
-        <script
-            src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.manager.js">
-        </script>
-        <script
-            src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.navmesh.js">
-        </script>
-
-        <link rel="stylesheet" href="/css/frame.css" />
+         <!-- Extensions -->
+         <script
+             src="https://rawcdn.githack.com/BabylonJS/Extensions/f43ab677b4bca0a6ab77132d3f785be300382760/ClonerSystem/src/babylonx.cloner.js"
+             >
+         </script>
+         <script
+             src="https://rawcdn.githack.com/BabylonJS/Extensions/785013ec55b210d12263c91f3f0a2ae70cf0bc8a/CompoundShader/src/babylonx.CompoundShader.js"
+             ></script>
+ 
+         <!-- Scene Manager -->
+         <script
+             src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.manager.js">
+         </script>
+         <script
+             src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.navmesh.js">
+         </script>        
+
+        <style>
+            html,
+            body,
+            #host-element {
+                width: 100%;
+                height: 100%;
+                padding: 0;
+                margin: 0;
+                overflow: hidden;
+            }
+        </style>        
     </head>
 
-    <body>
-        <canvas touch-action="none" id="renderCanvas" tabindex="1"></canvas>
-
-        <div class="footer">
-            <span id="fpsLabel">FPS</span>
-            <div class="footerRight">
-                <a href="javascript:void(null);">
-                    <img id="refresh" src="/textures/icons/refresh.png" width="36" height="36" alt="Reload page"
-                        title="Reload page" />
-                </a>
-                <a id="edit" href="#" target="_blank">
-                    <img src="/textures/icons/edit.png" width="36" height="36" alt="Edit in playground"
-                        title="Edit in playground" />
-                </a>
-            </div>
-        </div>
-
-        <!-- jQuery -->
-        <script src="https://code.jquery.com/jquery.min.js"></script>
-
-        <script src="/js/frame.js"></script>
+    <body>        
+        <div id="host-element">
+        </div>   
+        
+        <script src="/dist/babylon.playground.js"></script>
+        
+        <script src="/index-frame.js"></script>
     </body>
 
 </html>

Playground/full.html

@@ -3,54 +3,87 @@
 
     <head>
         <title>Babylon.js Playground</title>
-        <link rel="shortcut icon" href="https://www.babylonjs.com/img/favicon/favicon.ico">
-        <meta name="theme-color" content="#ffffff">
-        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
+        <meta charset='utf-8' />
+        <meta name="viewport" content="width=device-width, user-scalable=no">
+        <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
+        <meta name="description" content="Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes">
+        <meta name="keywords" content="Babylon.js,WebGL,3D">
+        
+        <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
+        <link rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
 
+        <!-- Pep -->
         <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+        <!--For canvas/code separator-->
+        <script src="/libs/split.js"></script>
+
         <!-- DatGUI -->
         <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
-        <!-- Babylon.js -->
+        <!-- jszip -->
+        <script src="/libs/jszip.min.js"></script>
+        <script src="/libs/fileSaver.js"></script>
+
+        <!-- Dependencies -->
         <script src="https://preview.babylonjs.com/ammo.js"></script>
         <script src="https://preview.babylonjs.com/recast.js"></script>
         <script src="https://preview.babylonjs.com/cannon.js"></script>
         <script src="https://preview.babylonjs.com/Oimo.js"></script>
         <script src="https://preview.babylonjs.com/libktx.js"></script>
+        <script src="https://preview.babylonjs.com/earcut.min.js"></script>
+
+        <!-- jQuery -->
+        <script src="https://code.jquery.com/jquery.js"></script>
+        <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>        
+        
+        <!-- Babylon.js -->
         <script src="https://preview.babylonjs.com/babylon.js"></script>
         <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
         <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
         <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
-        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js">
-        </script>
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
         <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
-        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
-
+        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
+        <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
         <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
 
-        <!-- Extensions -->
-        <script
-            src="https://rawcdn.githack.com/BabylonJS/Extensions/f43ab677b4bca0a6ab77132d3f785be300382760/ClonerSystem/src/babylonx.cloner.js"
-            async>
-        </script>
-        <script
-            src="https://rawcdn.githack.com/BabylonJS/Extensions/785013ec55b210d12263c91f3f0a2ae70cf0bc8a/CompoundShader/src/babylonx.CompoundShader.js"
-            async></script>
-
-        <!-- Scene Manager -->
-        <script
-            src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.manager.js">
-        </script>
-        <script
-            src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.navmesh.js">
-        </script>
-        <link href="/css/frame.css" rel="stylesheet" />
+         <!-- Extensions -->
+         <script
+             src="https://rawcdn.githack.com/BabylonJS/Extensions/f43ab677b4bca0a6ab77132d3f785be300382760/ClonerSystem/src/babylonx.cloner.js"
+             >
+         </script>
+         <script
+             src="https://rawcdn.githack.com/BabylonJS/Extensions/785013ec55b210d12263c91f3f0a2ae70cf0bc8a/CompoundShader/src/babylonx.CompoundShader.js"
+             ></script>
+ 
+         <!-- Scene Manager -->
+         <script
+             src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.manager.js">
+         </script>
+         <script
+             src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.navmesh.js">
+         </script>        
+
+        <style>
+            html,
+            body,
+            #host-element {
+                width: 100%;
+                height: 100%;
+                padding: 0;
+                margin: 0;
+                overflow: hidden;
+            }
+        </style>        
     </head>
 
-    <body>
-        <!-- Override frame style -->
-        <canvas touch-action="none" id="renderCanvas" tabindex="1" style="height: 100%"></canvas>
-        <script src="https://code.jquery.com/jquery.min.js"></script>
-        <script src="/js/frame.js"></script>
+    <body>        
+        <div id="host-element">
+        </div>   
+        
+        <script src="/dist/babylon.playground.js"></script>
+        
+        <script src="/index-full.js"></script>
     </body>
 
 </html>

Playground/imgs/diff.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#212121;}
+</style>
+<desc>Created with Sketch.</desc>
+<g>
+	<g id="_xD83D__xDD0D_-Product-Icons_3_">
+		<g id="ic_fluent_document_copy_24_regular_1_">
+			<path id="_xD83C__xDFA8_-Color_3_" class="st0" d="M20,11v6.2c0,2.6-2.1,4.8-4.8,4.8H8.8c-1,0-1.8-0.6-2.1-1.5l8.6,0
+				c1.8,0,3.3-1.5,3.3-3.3V11l0,0l0-2.1C19.4,9.2,20,10.1,20,11z"/>
+		</g>
+	</g>
+	<path class="st0" d="M12.5,8.4h-1.4V7c0-0.3-0.2-0.5-0.5-0.5H10C9.7,6.5,9.5,6.7,9.5,7v1.4H8c-0.3,0-0.5,0.2-0.5,0.5v0.6
+		C7.5,9.8,7.8,10,8,10h1.4v1.4c0,0.3,0.2,0.5,0.5,0.5h0.6c0.3,0,0.5-0.2,0.5-0.5V10h1.4c0.3,0,0.5-0.2,0.5-0.5V8.9
+		C13,8.7,12.8,8.4,12.5,8.4z"/>
+	<path class="st0" d="M13,14.5v0.6c0,0.3-0.2,0.5-0.5,0.5H8c-0.3,0-0.5-0.2-0.5-0.5v-0.6C7.5,14.2,7.8,14,8,14h4.5
+		C12.8,14,13,14.2,13,14.5z"/>
+	<path class="st0" d="M16.8,7.3l-4.6-4.6c-0.4-0.4-1-0.7-1.6-0.7H6.3C5,2,4,3,4,4.2v13c0,1.2,1,2.3,2.3,2.3h9c1.2,0,2.2-1,2.2-2.3
+		V8.9C17.5,8.3,17.3,7.7,16.8,7.3z M15.2,18h-9c-0.4,0-0.8-0.3-0.8-0.8v-13c0-0.4,0.3-0.7,0.8-0.7h4.2c0.6,0,1.1,0.6,1.5,1.1
+		l2.9,2.9C15.4,7.9,16,8.4,16,9l0,8.3C16,17.7,15.7,18,15.2,18z"/>
+</g>
+</svg>

Playground/imgs/inspector.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#212121;}
+</style>
+<path class="st0" d="M11.1,20.9l0.5-1.8c0.1-0.6,0.4-1.1,0.8-1.5l0-7.1l7.7-3.1v3.1c0.3-0.1,0.6-0.1,0.9-0.1h0h0
+	c0.2,0,0.4,0,0.6,0.1V6.3c0,0,0,0,0-0.1c0-0.3-0.2-0.6-0.5-0.7l-9.3-3.8c-0.2-0.1-0.4-0.1-0.6,0L2,5.5C1.8,5.7,1.6,5.9,1.6,6.2v0
+	c0,0,0,0,0,0v11c0,0.3,0.2,0.6,0.5,0.7l9,3.6C11,21.4,11,21.1,11.1,20.9z M11.6,3.3l7.3,2.9l-7.3,2.9L4.3,6.2L11.6,3.3z M10.8,19.9
+	l-7.7-3.1V7.3l7.7,3.1L10.8,19.9z"/>
+<g>
+	<path class="st0" d="M21,11.6L21,11.6c0.6,0,1.2,0.2,1.6,0.7c0.9,0.9,0.9,2.3,0,3.2l-5.9,5.9c-0.3,0.3-0.8,0.6-1.2,0.7l-1.8,0.5
+		c-0.8,0.2-1.5-0.5-1.3-1.3l0.5-1.8c0.1-0.5,0.4-0.9,0.7-1.2l5.9-5.9C19.8,11.8,20.4,11.6,21,11.6z M21.5,13.3
+		c-0.3-0.3-0.8-0.3-1.1,0l-5.9,5.9c-0.2,0.2-0.3,0.3-0.3,0.6l-0.3,1.2l1.2-0.3c0.2-0.1,0.4-0.2,0.6-0.3l5.9-5.9
+		C21.8,14.1,21.8,13.6,21.5,13.3z"/>
+</g>
+</svg>

Playground/index-frame.js

@@ -0,0 +1,2 @@
+var hostElement = document.getElementById("host-element");
+BABYLON.Playground.Show(hostElement, 2);

Playground/index-full.js

@@ -0,0 +1,2 @@
+var hostElement = document.getElementById("host-element");
+BABYLON.Playground.Show(hostElement, 1);

Playground/index-local.html

@@ -8,443 +8,58 @@
         <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
         <meta name="description" content="Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes">
         <meta name="keywords" content="Babylon.js,WebGL,3D">
-
+        
+        <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
         <link rel="stylesheet"
             href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
-        <link rel="stylesheet" href="/css/index.css" />
-        <link rel="stylesheet" href="/css/index_mobile.css" />
 
         <!-- Pep -->
         <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
         <!--For canvas/code separator-->
-        <script src="js/libs/split.js"></script>
+        <script src="libs/split.js"></script>
 
         <!-- DatGUI -->
         <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
         <!-- jszip -->
-        <script src="js/libs/jszip.min.js"></script>
-        <script src="js/libs/fileSaver.js"></script>
+        <script src="libs/jszip.min.js"></script>
+        <script src="libs/fileSaver.js"></script>
 
-        <!-- Dependencies -->
-        <script src="../dist/preview%20release/ammo.js"></script>
-        <script src="../dist/preview%20release/recast.js"></script>
-        <script src="../dist/preview%20release/cannon.js"></script>
-        <script src="../dist/preview%20release/Oimo.js"></script>
-        <script src="../dist/preview%20release/libktx.js"></script>
-        <script src="../dist/preview%20release/earcut.min.js"></script>
-        <!-- Monaco -->
+        <!-- jQuery -->
+        <script src="https://code.jquery.com/jquery.js"></script>
+        <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>        
 
+        <!-- Dependencies -->
+        <script src="/dist/preview%20release/ammo.js"></script>
+        <script src="/dist/preview%20release/recast.js"></script>
+        <script src="/dist/preview%20release/cannon.js"></script>
+        <script src="/dist/preview%20release/Oimo.js"></script>
+        <script src="/dist/preview%20release/libktx.js"></script>
+        <script src="/dist/preview%20release/earcut.min.js"></script>
+        
         <!-- Babylon.js -->
-        <script src="../Tools/DevLoader/BabylonLoader.js"></script>
+        <script src="/Tools/DevLoader/BabylonLoader.js"></script>
+
+        <style>
+            html,
+            body,
+            #host-element {
+                width: 100%;
+                height: 100%;
+                padding: 0;
+                margin: 0;
+                overflow: hidden;
+            }
+        </style>        
     </head>
 
-    <body>
-        <!-- Big screens -->
-        <div class="navbar navBar1280 languageJS">
-            <div class="categoryTitle">
-                <img class="logo" src="css/img/logo_v4.svg">
-                <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>
-            </div>
-
-            <div class="category languageJS" id="JStoTSbar">
-                <div class="buttonJStoTS languageTS" id="toTSbutton1280" title="Switch to TypeScript">TS</div>
-                <div class="buttonJStoTS languageJS" id="toJSbutton1280" title="Switch to JavaScript">JS</div>
-                <div class="buttonPG run removeOnDiff" id="runButton1280" title="Run&#10;(Alt+Enter)"><img
-                        src="css/img/playButton.svg"></div>
-                <div class="buttonPG removeOnDiff" id="saveButton1280" title="Save&#10;(Ctrl+S)"><img
-                        src="css/img/saveButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1280"
-                    title="Download ZIP&#10;(Ctrl+Shift+S)"><img src="css/img/downloadButton.svg"></div>
-                <div class="buttonPG removeOnDiff" id="newButton1280" title="Create new"><img
-                        src="css/img/newButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1280" title="Clear"><img
-                        src="css/img/clearButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1280" title="Compare"><img
-                        src="css/img/diffButton.svg"></div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1280"
-                    title="Previous difference&#10;(Shift+Alt+F5)"><img src="css/img/previousButton.svg"></div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1280"
-                    title="Next difference&#10;(Alt+F5)"><img src="css/img/nextButton.svg"></div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1280" title="Exit&#10;(Esc)"><img
-                        src="css/img/exitButton.svg"></div>
-                <div class="buttonPG select removeOnDiff" id="menuButton1280" title="Options"><img
-                        src="css/img/optionsButton.svg">
-                    <div class="toDisplay languageJS">
-                        <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                            <div class="toDisplaySub languageJS">
-                                <div class="option selected" id="darkTheme1280">Dark</div>
-                                <div class="option" id="lightTheme1280">Light</div>
-                            </div>
-                        </div>
-                        <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                            <div class="toDisplaySub displayFontSize languageJS">
-                                <div class="option">12</div>
-                                <div class="option selected">14</div>
-                                <div class="option">16</div>
-                                <div class="option">18</div>
-                                <div class="option">20</div>
-                                <div class="option">22</div>
-                            </div>
-                        </div>
-                        <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option checked noSubSelect" id="editorButton1280">Editor
-                            <i class="fa fa-check-square" aria-hidden="true"></i>
-                        </div>                     
-                        <div class="option noSubSelect" id="ctrlsToggle1280">CTRL+S to save
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
-                        <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
-                        <div class="option noSubSelect" id="formatButton1280">Format code</div>
-                        <div class="option noSubSelect" id="minimapToggle1280">Minimap
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option subSelect" id="qrCodeHover1280">QR Code Link <i class="fa fa-chevron-right"
-                                aria-hidden="true"></i>
-                            <div class="toDisplaySub qrCodeImage">
-                                <div class="option" id="qrCodeImage1280">[QR Code Image]</div>
-                            </div>
-                        </div>
-                        <div class="option uncheck noSubSelect" id="debugButton1280">Inspector</div>
-                        <div class="option nosubselect" id="metadataButton1280">Metadata</div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="category right">
-                <div class="buttonPG select removeOnDiff" title="Select Babylon.js version">
-                    <span id="currentVersion1280"></span>
-                    <div class="toDisplay currentVersionDisplay" style="display: none"></div>
-                </div>
-                <div class="buttonPG select removeOnDiff" title="Examples"><img class="examplesButton"
-                        src="css/img/examplesButton.svg"></div>
-            </div>
-        </div>
-
-        <!-- Mid-size screens -->
-        <div class="navbar navBar1024 languageJS">
-            <div class="categoryTitle">
-                <img class="logo" src="css/img/logo_v4.svg">
-                <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
-            </div>
-
-            <div class="category languageJS" id="JStoTSbar">
-                <div class="buttonJStoTS languageTS" id="toTSbutton1024" title="Switch to TypeScript">TS</div>
-                <div class="buttonJStoTS languageJS" id="toJSbutton1024" title="Switch to JavaScript">JS</div>
-                <div class="buttonSpaceKiller"></div>
-                <div class="buttonPG run removeOnDiff" id="runButton1024" title="Run&#10;(Alt+Enter)"><img
-                        src="css/img/playButton.svg"></div>
-                <div class="buttonPG removeOnDiff" id="saveButton1024" title="Save&#10;(Ctrl+S)"><img
-                        src="css/img/saveButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1024"
-                    title="Download ZIP&#10;(Ctrl+Shift+S)"><img src="css/img/downloadButton.svg"></div>
-                <div class="buttonPG removeOnDiff" id="newButton1024" title="Create new"><img
-                        src="css/img/newButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1024" title="Clear"><img
-                        src="css/img/clearButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1024" title="Compare"><img
-                        src="css/img/diffButton.svg"></div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1024"><img
-                        src="css/img/previousButton.svg"></div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1024"><img src="css/img/nextButton.svg">
-                </div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1024"><img src="css/img/exitButton.svg">
-                </div>
-
-                <div class="buttonPG select removeOnDiff" id="menuButton1024" title="Options"><img
-                        src="css/img/optionsButton.svg">
-                    <div class="toDisplay">
-                        <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-
-                            <div class="toDisplaySub">
-                                <div class="option selected" id="darkTheme1024">Dark</div>
-                                <div class="option" id="lightTheme1024">Light</div>
-                            </div>
-                        </div>
-                        <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                            <div class="toDisplaySub displayFontSize">
-                                <div class="option">12</div>
-                                <div class="option selected">14</div>
-                                <div class="option">16</div>
-                                <div class="option">18</div>
-                                <div class="option">20</div>
-                                <div class="option">22</div>
-                            </div>
-                        </div>
-                        <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option checked noSubSelect" id="editorButton1024">Editor
-                            <i class="fa fa-check-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option noSubSelect" id="ctrlsToggle1024">CTRL+S to save
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
-                        <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
-                        <div class="option noSubSelect" id="formatButton1024">Format code</div>
-                        <div class="option noSubSelect" id="minimapToggle1024">Minimap
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option subSelect" id="qrCodeHover1024">QR Code Link <i class="fa fa-chevron-right"
-                                aria-hidden="true"></i>
-                            <div class="toDisplaySub qrCodeImage">
-                                <div class="option" id="qrCodeImage1024">[QR Code Image]</div>
-                            </div>
-                        </div>
-                        <div class="option uncheck noSubSelect" id="debugButton1024">Inspector</div>
-                        <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="category right">
-                <div class="buttonPG select removeOnDiff" title="Select Babylon.js version">
-                    <span id="currentVersion1024"></span>
-                    <div class="toDisplay currentVersionDisplay" style="display: none">
-                    </div>
-                </div>
-                <div class="buttonPG select removeOnDiff" title="Examples"><img class="examplesButton"
-                        src="css/img/examplesButton.svg"></div>
-            </div>
-        </div>
-
-        <!-- Mobile -->
-        <div class="navbar navBarMobile languageJS">
-            <div class="category languageJS" id="JStoTSbar">
-                <div class="buttonPG select" id="menuButtonMobile"><img src="css/img/hamburgerButton.svg">
-                    <div class="toDisplay">
-                        <div class="option noSubSelect languageTS" id="toTSbuttonMobile">TypeScript</div>
-                        <div class="option noSubSelect languageJS" id="toJSbuttonMobile">JavaScript</div>
-                        <div class="option noSubSelect run removeOnDiff" id="runButtonMobile"><img
-                                src="css/img/playButton.svg">Run</div>
-                        <div class="option noSubSelect removeOnDiff" id="saveButtonMobile"><img
-                                src="css/img/saveButton.svg">Save</div>
-                        <div class="option noSubSelect removeOnDiff" id="zipButtonMobile"><img
-                                src="css/img/downloadButton.svg">Download</div>
-                        <div class="option noSubSelect removeOnDiff" id="newButtonMobile"><img
-                                src="css/img/newButton.svg">New</div>
-                        <div class="option noSubSelect removeOnDiff" id="clearButtonMobile"><img
-                                src="css/img/clearButton.svg">Clear</div>
-                        <div class="option noSubSelect removeOnDiff" id="diffButtonMobile"><img
-                                src="css/img/diffButton.svg">Diff</div>
-                        <div class="option noSubSelect displayOnDiff" id="previousButtonMobile"><img
-                                src="css/img/previousButton.svg">Previous</div>
-                        <div class="option noSubSelect displayOnDiff" id="nextButtonMobile"><img
-                                src="css/img/nextButton.svg">Next</div>
-                        <div class="option noSubSelect displayOnDiff" id="exitButtonMobile"><img
-                                src="css/img/exitButton.svg">Exit</div>
-
-                        <div class="option noSubSelect removeOnDiff" id="debugButtonMobile"><img
-                                src="css/img/inspectorButton.svg">Inspector</div>
-                        <div class="option subSelect removeOnDiff">
-                            <img src="css/img/optionsButton.svg">
-                            <div id="currentVersionMobile"></div>
-                            <div class="toDisplaySub currentVersionDisplay">
-                            </div>
-                        </div>
-                        <div class="option subSelect removeOnDiff"><img src="css/img/optionsButton.svg">Theme
-                            <div class="toDisplaySub">
-                                <div class="option selected" id="darkThemeMobile">Dark</div>
-                                <div class="option" id="lightThemeMobile">Light</div>
-                            </div>
-                        </div>
-                        <div class="option subSelect removeOnDiff"><img src="css/img/optionsButton.svg">Font size
-                            <div class="toDisplaySub displayFontSize">
-                                <div class="option">8</div>
-                                <div class="option">10</div>
-                                <div class="option selected">12</div>
-                                <div class="option">14</div>
-                                <div class="option">16</div>
-                                <div class="option">18</div>
-                                <div class="option">20</div>
-                                <div class="option">22</div>
-                            </div>
-                        </div>
-                        <div style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
-                            <i class="fa fa-check-square" aria-hidden="true"></i>
-                        </div>
-                        <div style="display: none;" class="option noSubSelect" id="ctrlsToggleMobile">CTRL+S to save
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>                            
-                        <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile"
-                            style="display: none">Fullscreen</div>
-                        <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile"
-                            style="display: none">Editor
-                            Fullscreen</div>
-                        <div class="option nosubselect removeOnDiff" id="formatButtonMobile"><img
-                                src="css/img/optionsButton.svg">Format
-                            code</div>
-                        <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <!-- <div class="option subSelect" id="qrCodeHoverMobile"><img src="css/img/optionsButton.svg">QR Code Link
-                        <div class="toDisplaySub qrCodeImage">
-                            <div class="option" id="qrCodeImageMobile">[QR Code Image]</div>
-                        </div>
-                    </div> -->
-                        <div class="option nosubselect removeOnDiff" id="metadataButtonMobile"><img
-                                src="css/img/metadataButton.svg">Metadata</div>
-                        <div class="option nosubselect removeOnDiff"><img class="examplesButton"
-                                src="css/img/examplesButton.svg">Examples</div>
-                        <div class="option subSelect removeOnDiff"><img src="css/img/examplesButton.svg">Links / Tools
-                            <div class="toDisplaySub displayFooterLinks">
-                                <div class="option link">
-                                    <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
-                                </div>
-                                <div class="option link">
-                                    <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
-                                </div>
-                                <div class="option link">
-                                    <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
-                                </div>
-                                <div class="option link">
-                                    <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
-                                </div>
-                                <div class="option link">
-                                    <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="categoryTitle">
-                    <img class="logo" src="css/img/logo_v4.svg">
-                    <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
-                </div>
-            </div>
-
-            <div id="switchWrapper" class="languageJS removeOnDiff">
-                <img id="switchWrapperCode" src="css/img/codeButton.svg">
-                <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">
-            </div>
-        </div>
-
-        <!-- Common things -->
-
-        <div class="wrapper">
-            <div id="jsEditor"></div>
-            <div id="diffView" class="diff-view"></div>
-            <div id="canvasZone">
-                <canvas touch-action="none" id="renderCanvas"></canvas>
-            </div>
-        </div>
-        <div id="exampleList" class="javascript">
-            <div id="exampleBanner" class="languageJS">
-                <h1>Examples<img id="examplesButtonClose" src="css/img/clearButton.svg"></h1>
-            </div>
-            <div class="horizontalSeparator"></div>
-            <input id="filterBar" type="text" placeholder="Filter examples...">
-            <img id="filterBarClear"
-                src="css/img/clear_button.png">
-        </div>
-
-        <div class="fpsLabel languageJS" id="fpsLabel"></div>
-
-        <div id="errorZone">
+    <body>        
+        <div id="host-element">
         </div>
-
-        <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="https://forum.babylonjs.com/">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>
-
-        <div id="saveLayer" class="save-layer">
-            <div class="save-form languageJS ">
-                <img id="saveFormButtonClose" src="css/img/clearButton.svg">
-                <label for="saveFormTitle">TITLE</label>
-                <div class="separator"></div>
-                <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
-
-                <label for="saveFormDescription">DESCRIPTION</label>
-                <div class="separator"></div>
-                <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
-
-                <label for="saveFormTags">TAGS (separated by comma)</label>
-                <div class="separator"></div>
-                <textarea id="saveFormTags" rows="4" cols="10"></textarea>
-
-                <div class="save-form-buttons" id="saveFormButtons">
-                    <div id="saveFormButtonOk">OK</div>
-                    <div id="saveFormButtonCancel">Cancel</div>
-                </div>
-            </div>
-        </div>
-
-        <div id="diffLayer" class="save-layer">
-            <div class="save-form diff-form">
-                <label for="diffFormSource">COMPARISON SOURCE</label>
-                <div class="separator"></div>
-                <input type="text" maxlength="120" id="diffFormSource"
-                    placeholder="leave blank to use current snippet, or use snippet ID" class="save-form-title">
-
-                <label for="diffFormCompareTo">COMPARE TO</label>
-                <div class="separator"></div>
-                <input type="text" maxlength="120" id="diffFormCompareTo" placeholder="snippet ID"
-                    class="save-form-title">
-
-                <div class="save-form-buttons" id="diffFormButtons">
-                    <div id="diffFormButtonOk">OK</div>
-                    <div id="diffFormButtonCancel">Cancel</div>
-                </div>
-            </div>
-        </div>
-
-        <div id="waitDiv">
-            <div id="logo-part">
-                <img src="css/img/v4.svg" id="waitLogo" />
-                <img src="css/img/spinner.svg" id="waitSpinner" />
-            </div>
-        </div>
-
-        <!-- jQuery -->
-        <script src="https://code.jquery.com/jquery.js"></script>
-        <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>
-
-        <!-- Main scripts -->
-        <script src="js/config_versions.js"></script>
-        <script src="js/examples.js"></script>
-        <script src="js/main.js"></script>
-        <script src="js/menuPG.js"></script>
-        <script src="js/monacoCreator.js"></script>
-        <script src="js/settingsPG.js"></script>
-        <script src="js/utils.js"></script>
-        <script src="js/zipTool.js"></script>
-
         <script>
-            BABYLONDEVTOOLS.Loader
-                .require('node_modules/monaco-editor/dev/vs/loader.js')
-                .require('js/index.js')
-                .load(function () {
-                    BABYLON.DracoCompression.Configuration.decoder = {
-                        wasmUrl: "../dist/preview%20release/draco_wasm_wrapper_gltf.js",
-                        wasmBinaryUrl: "../dist/preview%20release/draco_decoder_gltf.wasm",
-                        fallbackUrl: "../dist/preview%20release/draco_decoder_gltf.js"
-                    };
-                    BABYLON.GLTFValidation.Configuration = {
-                        url: "../dist/preview%20release/gltf_validator.js"
-                    };
+            // Load the scripts + map file to allow vscode debug.
+            BABYLONDEVTOOLS.Loader       
+                .require("index.js")
+                .load(() => {
                 });
         </script>
     </body>

Playground/index.html

@@ -5,425 +5,48 @@
         <title>Babylon.js Playground</title>
         <meta charset='utf-8' />
         <meta name="viewport" content="width=device-width, user-scalable=no">
+        <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
         <meta name="description" content="Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes">
         <meta name="keywords" content="Babylon.js,WebGL,3D">
-        <meta name="google-site-verification" content="wcRjktXhF6DAjmhneKS7UatweBIkEF6QfqsNhAYbUgg" />
-        <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
-
+        
+        <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
         <link rel="stylesheet"
             href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
-        <link rel="stylesheet" href="/css/index.css" />
-        <link rel="stylesheet" href="/css/index_mobile.css" />
-
-    </head>
-
-    <body>
-        <!-- Big screens -->
-        <div class="navbar navBar1280 languageJS">
-            <div class="categoryTitle">
-                <img class="logo" src="/css/img/logo_v4.svg">
-                <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>
-            </div>
-
-            <div class="category languageJS" id="JStoTSbar">
-                <div class="buttonJStoTS languageTS" id="toTSbutton1280">TS</div>
-                <div class="buttonJStoTS languageJS" id="toJSbutton1280">JS</div>
-                <div class="buttonPG run removeOnDiff" id="runButton1280" title="Run&#10;(Alt+Enter)"><img
-                        src="/css/img/playButton.svg"></div>
-                <div class="buttonPG removeOnDiff" id="saveButton1280" title="Save&#10;(Ctrl+S)"><img
-                        src="/css/img/saveButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1280"
-                    title="Download ZIP&#10;(Ctrl+Shift+S)"><img src="/css/img/downloadButton.svg"></div>
-                <div class="buttonPG removeOnDiff" id="newButton1280" title="Create new"><img
-                        src="/css/img/newButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1280" title="Clear"><img
-                        src="/css/img/clearButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1280" title="Compare"><img
-                        src="/css/img/diffButton.svg"></div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1280"
-                    title="Previous difference&#10;(Shift+Alt+F5)"><img src="/css/img/previousButton.svg"></div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1280"
-                    title="Next difference&#10;(Alt+F5)"><img src="/css/img/nextButton.svg"></div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1280" title="Exit&#10;(Esc)"><img
-                        src="/css/img/exitButton.svg"></div>
-                <div class="buttonPG select removeOnDiff" id="menuButton1280" title="Options"><img
-                        src="/css/img/optionsButton.svg">
-                    <div class="toDisplay languageJS">
-                        <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                            <div class="toDisplaySub languageJS">
-                                <div class="option selected" id="darkTheme1280">Dark</div>
-                                <div class="option" id="lightTheme1280">Light</div>
-                            </div>
-                        </div>
-                        <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                            <div class="toDisplaySub displayFontSize languageJS">
-                                <div class="option">12</div>
-                                <div class="option selected">14</div>
-                                <div class="option">16</div>
-                                <div class="option">18</div>
-                                <div class="option">20</div>
-                                <div class="option">22</div>
-                            </div>
-                        </div>
-                        <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option checked noSubSelect" id="editorButton1280">Editor
-                            <i class="fa fa-check-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option noSubSelect" id="ctrlsToggle1280">CTRL+S to save
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
-                        <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
-                        <div class="option noSubSelect" id="formatButton1280">Format code</div>
-                        <div class="option noSubSelect" id="minimapToggle1280">Minimap
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option subSelect" id="qrCodeHover1280">QR Code Link <i class="fa fa-chevron-right"
-                                aria-hidden="true"></i>
-                            <div class="toDisplaySub qrCodeImage">
-                                <div class="option" id="qrCodeImage1280">[QR Code Image]</div>
-                            </div>
-                        </div>
-                        <div class="option uncheck noSubSelect" id="debugButton1280">Inspector</div>
-                        <div class="option nosubselect" id="metadataButton1280">Metadata</div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="category right">
-                <div class="buttonPG select removeOnDiff" title="Select Babylon.js version">
-                    <span id="currentVersion1280"></span>
-                    <div class="toDisplay currentVersionDisplay" style="display: none"></div>
-                </div>
-                <div class="buttonPG select removeOnDiff" title="Examples"><img class="examplesButton"
-                        src="/css/img/examplesButton.svg"></div>
-            </div>
-        </div>
-
-        <!-- Mid-size screens -->
-        <div class="navbar navBar1024 languageJS">
-            <div class="categoryTitle">
-                <img class="logo" src="/css/img/logo_v4.svg">
-                <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
-            </div>
-
-            <div class="category languageJS" id="JStoTSbar">
-                <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
-                <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
-                <div class="buttonSpaceKiller"></div>
-                <div class="buttonPG run removeOnDiff" id="runButton1024" title="Run&#10;(Alt+Enter)"><img
-                        src="/css/img/playButton.svg"></div>
-                <div class="buttonPG removeOnDiff" id="saveButton1024" title="Save&#10;(Ctrl+S)"><img
-                        src="/css/img/saveButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1024"
-                    title="Download ZIP&#10;(Ctrl+Shift+S)"><img src="/css/img/downloadButton.svg"></div>
-                <div class="buttonPG removeOnDiff" id="newButton1024" title="Create new"><img
-                        src="/css/img/newButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1024" title="Clear"><img
-                        src="/css/img/clearButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1024" title="Compare"><img
-                        src="/css/img/diffButton.svg"></div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1024"><img
-                        src="/css/img/previousButton.svg"></div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1024"><img
-                        src="/css/img/nextButton.svg">
-                </div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1024"><img
-                        src="/css/img/exitButton.svg">
-                </div>
-
-                <div class="buttonPG select removeOnDiff" id="menuButton1024" title="Options"><img
-                        src="/css/img/optionsButton.svg">
-                    <div class="toDisplay">
-                        <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-
-                            <div class="toDisplaySub">
-                                <div class="option selected" id="darkTheme1024">Dark</div>
-                                <div class="option" id="lightTheme1024">Light</div>
-                            </div>
-                        </div>
-                        <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                            <div class="toDisplaySub displayFontSize">
-                                <div class="option">12</div>
-                                <div class="option selected">14</div>
-                                <div class="option">16</div>
-                                <div class="option">18</div>
-                                <div class="option">20</div>
-                                <div class="option">22</div>
-                            </div>
-                        </div>
-                        <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option checked noSubSelect" id="editorButton1024">Editor
-                            <i class="fa fa-check-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option noSubSelect" id="ctrlsToggle1024">CTRL+S to save
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
-                        <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
-                        <div class="option noSubSelect" id="formatButton1024">Format code</div>
-                        <div class="option noSubSelect" id="minimapToggle1024">Minimap
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option subSelect" id="qrCodeHover1024">QR Code Link <i class="fa fa-chevron-right"
-                                aria-hidden="true"></i>
-                            <div class="toDisplaySub qrCodeImage">
-                                <div class="option" id="qrCodeImage1024">[QR Code Image]</div>
-                            </div>
-                        </div>
-                        <div class="option uncheck noSubSelect" id="debugButton1024">Inspector</div>
-                        <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="category right">
-                <div class="buttonPG select removeOnDiff" title="Select Babylon.js version">
-                    <span id="currentVersion1024"></span>
-                    <div class="toDisplay currentVersionDisplay" style="display: none">
-                    </div>
-                </div>
-                <div class="buttonPG select removeOnDiff" title="Examples"><img class="examplesButton"
-                        src="/css/img/examplesButton.svg"></div>
-            </div>
-        </div>
-
-        <!-- Mobile -->
-        <div class="navbar navBarMobile languageJS">
-            <div class="category languageJS" id="JStoTSbar">
-                <div class="buttonPG select" id="menuButtonMobile"><img src="/css/img/hamburgerButton.svg">
-                    <div class="toDisplay">
-                        <div class="option noSubSelect languageTS" id="toTSbuttonMobile">TypeScript</div>
-                        <div class="option noSubSelect languageJS" id="toJSbuttonMobile">JavaScript</div>
-                        <div class="option noSubSelect run removeOnDiff" id="runButtonMobile"><img
-                                src="/css/img/playButton.svg">Run</div>
-                        <div class="option noSubSelect removeOnDiff" id="saveButtonMobile"><img
-                                src="/css/img/saveButton.svg">Save</div>
-                        <div class="option noSubSelect removeOnDiff" id="zipButtonMobile"><img
-                                src="/css/img/downloadButton.svg">Download</div>
-                        <div class="option noSubSelect removeOnDiff" id="newButtonMobile"><img
-                                src="/css/img/newButton.svg">New</div>
-                        <div class="option noSubSelect removeOnDiff" id="clearButtonMobile"><img
-                                src="/css/img/clearButton.svg">Clear</div>
-                        <div class="option noSubSelect removeOnDiff" id="diffButtonMobile"><img
-                                src="/css/img/diffButton.svg">Diff</div>
-                        <div class="option noSubSelect displayOnDiff" id="previousButtonMobile"><img
-                                src="/css/img/previousButton.svg">Previous</div>
-                        <div class="option noSubSelect displayOnDiff" id="nextButtonMobile"><img
-                                src="/css/img/nextButton.svg">Next</div>
-                        <div class="option noSubSelect displayOnDiff" id="exitButtonMobile"><img
-                                src="/css/img/exitButton.svg">Exit</div>
-
-                        <div class="option noSubSelect removeOnDiff" id="debugButtonMobile"><img
-                                src="/css/img/inspectorButton.svg">Inspector</div>
-                        <div class="option subSelect removeOnDiff">
-                            <img src="/css/img/optionsButton.svg">
-                            <div id="currentVersionMobile"></div>
-                            <div class="toDisplaySub currentVersionDisplay">
-                            </div>
-                        </div>
-                        <div class="option subSelect removeOnDiff"><img src="/css/img/optionsButton.svg">Theme
-                            <div class="toDisplaySub">
-                                <div class="option selected" id="darkThemeMobile">Dark</div>
-                                <div class="option" id="lightThemeMobile">Light</div>
-                            </div>
-                        </div>
-                        <div class="option subSelect removeOnDiff"><img src="/css/img/optionsButton.svg">Font size
-                            <div class="toDisplaySub displayFontSize">
-                                <div class="option">8</div>
-                                <div class="option">10</div>
-                                <div class="option selected">12</div>
-                                <div class="option">14</div>
-                                <div class="option">16</div>
-                                <div class="option">18</div>
-                                <div class="option">20</div>
-                                <div class="option">22</div>
-                            </div>
-                        </div>
-                        <div style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
-                            <i class="fa fa-check-square" aria-hidden="true"></i>
-                        </div>
-                        <div style="display: none;" class="option noSubSelect" id="ctrlsToggleMobile">CTRL+S to save
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>                            
-                        <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile"
-                            style="display: none">Fullscreen</div>
-                        <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile"
-                            style="display: none">Editor
-                            Fullscreen</div>
-                        <div class="option nosubselect removeOnDiff" id="formatButtonMobile"><img
-                                src="/css/img/optionsButton.svg">Format
-                            code</div>
-                        <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <!-- <div class="option subSelect" id="qrCodeHoverMobile"><img src="/css/img/optionsButton.svg">QR Code Link
-                        <div class="toDisplaySub qrCodeImage">
-                            <div class="option" id="qrCodeImageMobile">[QR Code Image]</div>
-                        </div>
-                    </div> -->
-                        <div class="option nosubselect removeOnDiff" id="metadataButtonMobile"><img
-                                src="/css/img/metadataButton.svg">Metadata</div>
-                        <div class="option nosubselect removeOnDiff"><img class="examplesButton"
-                                src="/css/img/examplesButton.svg">Examples</div>
-                        <div class="option subSelect removeOnDiff"><img src="/css/img/examplesButton.svg">Links / Tools
-                            <div class="toDisplaySub displayFooterLinks">
-                                <div class="option link">
-                                    <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
-                                </div>
-                                <div class="option link">
-                                    <a target='_new' href="https://sandbox.babylonjs.com/">Sandbox</a>
-                                </div>
-                                <div class="option link">
-                                    <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
-                                </div>
-                                <div class="option link">
-                                    <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="categoryTitle">
-                    <img class="logo" src="/css/img/logo_v4.svg">
-                    <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
-                </div>
-            </div>
-
-            <div id="switchWrapper" class="languageJS removeOnDiff">
-                <img id="switchWrapperCode" src="/css/img/codeButton.svg">
-                <img id="switchWrapperCanvas" src="/css/img/canvas3Dbutton.svg">
-            </div>
-        </div>
-
-        <!-- Common things -->
-
-        <div class="wrapper">
-            <div id="jsEditor"></div>
-            <div id="diffView" class="diff-view"></div>
-            <div id="canvasZone">
-                <canvas touch-action="none" id="renderCanvas"></canvas>
-            </div>
-        </div>
-        <div id="exampleList" class="javascript">
-            <div id="exampleBanner" class="languageJS">
-                <h1>Examples<img id="examplesButtonClose" src="/css/img/clearButton.svg"></h1>
-            </div>
-            <div class="horizontalSeparator"></div>
-            <input id="filterBar" type="text" placeholder="Filter examples...">
-            <img id="filterBarClear" src="/css/img/clear_button.png">
-        </div>
-
-        <div class="fpsLabel languageJS" id="fpsLabel"></div>
-
-        <div id="errorZone">
-        </div>
-
-        <div class="navbarBottom">
-            <div id="statusBar"></div>
-            <div class="links">
-                <div class='link'>
-                    <a target='_new' href="https://forum.babylonjs.com/">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>
-
-        <div id="saveLayer" class="save-layer">
-            <div class="save-form languageJS ">
-                <img id="saveFormButtonClose" src="/css/img/clearButton.svg">
-                <label for="saveFormTitle">TITLE</label>
-                <div class="separator"></div>
-                <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
-
-                <label for="saveFormDescription">DESCRIPTION</label>
-                <div class="separator"></div>
-                <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
-
-                <label for="saveFormTags">TAGS (separated by comma)</label>
-                <div class="separator"></div>
-                <textarea id="saveFormTags" rows="4" cols="10"></textarea>
-
-                <div class="save-form-buttons" id="saveFormButtons">
-                    <div id="saveFormButtonOk">OK</div>
-                    <div id="saveFormButtonCancel">Cancel</div>
-                </div>
-            </div>
-        </div>
-
-        <div id="diffLayer" class="save-layer">
-            <div class="save-form diff-form">
-                <label for="diffFormSource">COMPARISON SOURCE</label>
-                <div class="separator"></div>
-                <input type="text" maxlength="120" id="diffFormSource"
-                    placeholder="leave blank to use current snippet, or use snippet ID" class="save-form-title">
-
-                <label for="diffFormCompareTo">COMPARE TO</label>
-                <div class="separator"></div>
-                <input type="text" maxlength="120" id="diffFormCompareTo" placeholder="snippet ID"
-                    class="save-form-title">
-
-                <div class="save-form-buttons" id="diffFormButtons">
-                    <div id="diffFormButtonOk">OK</div>
-                    <div id="diffFormButtonCancel">Cancel</div>
-                </div>
-            </div>
-        </div>
-
-        <div id="waitDiv">
-            <div id="logo-part">
-                <img src="/css/img/v4.svg" id="waitLogo" />
-                <img src="/css/img/spinner.svg" id="waitSpinner" />
-            </div>
-        </div>
-
 
         <!-- Pep -->
-        <script src="/js/libs/pep.min.js"></script>
-        <!-- For canvas/code separator -->
-        <script src="/js/libs/split.js"></script>
+        <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+        <!--For canvas/code separator-->
+        <script src="/libs/split.js"></script>
 
         <!-- DatGUI -->
         <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
         <!-- jszip -->
-        <script src="/js/libs/jszip.min.js"></script>
-        <script src="/js/libs/fileSaver.js"></script>
+        <script src="/libs/jszip.min.js"></script>
+        <script src="/libs/fileSaver.js"></script>
 
+        <!-- jQuery -->
+        <script src="https://code.jquery.com/jquery.js"></script>
+        <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>        
+
+        <!-- Dependencies -->
+        <script src="https://preview.babylonjs.com/ammo.js"></script>
+        <script src="https://preview.babylonjs.com/recast.js"></script>
+        <script src="https://preview.babylonjs.com/cannon.js"></script>
+        <script src="https://preview.babylonjs.com/Oimo.js"></script>
+        <script src="https://preview.babylonjs.com/libktx.js"></script>
+        <script src="https://preview.babylonjs.com/earcut.min.js"></script>
+        
         <!-- Babylon.js -->
         <script src="https://preview.babylonjs.com/babylon.js"></script>
         <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
         <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
         <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
-        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js">
-        </script>
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
         <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
         <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
         <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
         <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
 
-         <!-- Dependencies -->
-         <script src="https://preview.babylonjs.com/ammo.js"></script>
-         <script src="https://preview.babylonjs.com/earcut.min.js"></script>
-         <script src="https://preview.babylonjs.com/recast.js"></script>
-         <script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script>
-         <script src="https://cdnjs.cloudflare.com/ajax/libs/oimo/1.0.9/oimo.min.js"></script>
-         <script src="https://preview.babylonjs.com/libktx.js"></script>
- 
          <!-- Extensions -->
          <script
              src="https://rawcdn.githack.com/BabylonJS/Extensions/f43ab677b4bca0a6ab77132d3f785be300382760/ClonerSystem/src/babylonx.cloner.js"
@@ -439,25 +62,28 @@
          </script>
          <script
              src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.navmesh.js">
-         </script>
-
-        <!-- Monaco -->
-        <script src="/node_modules/monaco-editor/dev/vs/loader.js"></script>
-
-        <!-- jQuery -->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
+         </script>        
+
+        <style>
+            html,
+            body,
+            #host-element {
+                width: 100%;
+                height: 100%;
+                padding: 0;
+                margin: 0;
+                overflow: hidden;
+            }
+        </style>        
+    </head>
 
-        <!-- Main scripts -->
-        <script src="/js/config_versions.js"></script>
-        <script src="/js/examples.js"></script>
-        <script src="/js/main.js"></script>
-        <script src="/js/menuPG.js"></script>
-        <script src="/js/monacoCreator.js"></script>
-        <script src="/js/settingsPG.js"></script>
-        <script src="/js/utils.js"></script>
-        <script src="/js/zipTool.js"></script>
-        <script src="/js/index.js"></script>
+    <body>        
+        <div id="host-element">
+        </div>   
+        
+        <script src="/dist/babylon.playground.js"></script>
+        
+        <script src="/index.js"></script>
     </body>
 
 </html>

Playground/index.js

@@ -0,0 +1,92 @@
+// Version 
+var Versions = {
+    "Latest": [
+        "https://preview.babylonjs.com/babylon.js",
+        "https://preview.babylonjs.com/gui/babylon.gui.min.js",
+        "https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js",
+        "https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js",
+        "https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js",
+        "https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js",
+        "https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js",
+        "https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js",
+        "https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"
+    ],
+    "4.1.0": [
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/babylon.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/gui/babylon.gui.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/inspector/babylon.inspector.bundle.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/materialsLibrary/babylonjs.materials.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/postProcessesLibrary/babylonjs.postProcess.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/loaders/babylonjs.loaders.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/serializers/babylonjs.serializers.min.js"
+    ],
+    "4.0.3": [
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/babylon.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/gui/babylon.gui.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/inspector/babylon.inspector.bundle.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/materialsLibrary/babylonjs.materials.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/postProcessesLibrary/babylonjs.postProcess.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/loaders/babylonjs.loaders.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/serializers/babylonjs.serializers.min.js"
+    ],
+    "3.3": [
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/babylon.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/gui/babylon.gui.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/inspector/babylon.inspector.bundle.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/materialsLibrary/babylonjs.materials.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/postProcessesLibrary/babylonjs.postProcess.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/loaders/babylonjs.loaders.min.js",
+        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/serializers/babylonjs.serializers.min.js"
+    ]
+};
+
+let loadScriptAsync = function(url) {
+    return new Promise((resolve, reject) => {
+        let script = document.createElement('script');
+        script.src = url;
+        script.onload = () => {
+            resolve();
+        }
+        document.head.appendChild(script);
+    });
+}
+
+let readStringFromStore = function(key, defaultValue) {
+    if (localStorage.getItem(key) === null) {
+        return defaultValue;
+    }
+
+    return localStorage.getItem(key);
+}
+
+let checkBabylonVersionAsync= function () {
+    let activeVersion = readStringFromStore("version", "Latest");
+
+    if (activeVersion === "Latest") {
+        return Promise.resolve();
+    }
+
+    let tasks = [];
+
+    for (var file of Versions[activeVersion]) {
+        tasks.push(loadScriptAsync(file));
+    }
+
+    return Promise.all(tasks);
+}
+
+checkBabylonVersionAsync().then(() => {
+    if (typeof BABYLONDEVTOOLS !== 'undefined') {
+        var hostElement = document.getElementById("host-element");
+        BABYLON.Playground.Show(hostElement);
+        return;
+    }
+
+    loadScriptAsync("/dist/babylon.playground.js").then(() => {
+        var hostElement = document.getElementById("host-element");
+        BABYLON.Playground.Show(hostElement);
+    });
+});

Playground/js.html

@@ -1,4 +0,0 @@
-<script>
-    localStorage.setItem("bjs-playground-scriptLanguage", "JS");
-    window.location = "./";
-</script>

Playground/old/debug.html

@@ -0,0 +1,511 @@
+<!DOCTYPE html>
+<html>
+
+    <head>
+        <title>Babylon.js Playground</title>
+        <meta charset='utf-8' />
+        <meta name="viewport" content="width=device-width, user-scalable=no">
+        <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
+        <meta name="description" content="Babylon.js playground online debug">
+        <meta name="keywords" content="Babylon.js,WebGL,3D, debug">
+
+        <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">
+
+        <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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
+        <link rel="stylesheet" href="/css/index.css" />
+        <link rel="stylesheet" href="/css/index_mobile.css" />
+
+        <!-- Pep -->
+        <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+        <!-- For canvas/code separator -->
+        <script src="/js/libs/split.js"></script>
+
+        <!-- DatGUI CDN -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
+        <!-- jszip -->
+        <script src="/js/libs/jszip.min.js"></script>
+        <script src="/js/libs/fileSaver.js"></script>
+
+        <!-- Dependencies -->
+        <script src="https://preview.babylonjs.com/ammo.js"></script>
+        <script src="https://preview.babylonjs.com/recast.js"></script>
+        <script src="https://preview.babylonjs.com/cannon.js"></script>
+        <script src="https://preview.babylonjs.com/Oimo.js"></script>
+        <script src="https://preview.babylonjs.com/libktx.js"></script>
+        <script src="https://preview.babylonjs.com/babylon.max.js"></script>
+        <script src="https://preview.babylonjs.com/gui/babylon.gui.js"></script>
+        <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
+        <!-- Babylon.js -->
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.fireMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.waterMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.lavaMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.normalMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.skyMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.triPlanarMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.terrainMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gradientMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.furMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gridMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.shadowOnlyMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.customMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.cellMaterial.min.js"></script>
+
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.brickProceduralTexture.min.js">
+        </script>
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.cloudProceduralTexture.min.js">
+        </script>
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.fireProceduralTexture.min.js">
+        </script>
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.grassProceduralTexture.min.js">
+        </script>
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.marbleProceduralTexture.min.js">
+        </script>
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.roadProceduralTexture.min.js">
+        </script>
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.starfieldProceduralTexture.min.js">
+        </script>
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.woodProceduralTexture.min.js">
+        </script>
+
+        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.asciiArtPostProcess.min.js"></script>
+        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.digitalRainPostProcess.min.js"></script>
+
+        <script src="https://preview.babylonjs.com/loaders/babylon.glTFFileLoader.js"></script>
+        <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.js"></script>
+
+        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
+
+        <!-- Extensions -->
+        <script
+            src="https://rawcdn.githack.com/BabylonJS/Extensions/f43ab677b4bca0a6ab77132d3f785be300382760/ClonerSystem/src/babylonx.cloner.js"
+            async>
+        </script>
+        <script
+            src="https://rawcdn.githack.com/BabylonJS/Extensions/785013ec55b210d12263c91f3f0a2ae70cf0bc8a/CompoundShader/src/babylonx.CompoundShader.js"
+            async></script>
+
+        <!-- Scene Manager -->
+        <script
+            src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.manager.js">
+        </script>
+        <script
+            src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.navmesh.js">
+        </script>
+
+        <!-- Monaco -->
+        <script src="/node_modules/monaco-editor/dev/vs/loader.js"></script>
+
+    </head>
+
+    <body>
+        <!-- Big screens -->
+        <div class="navbar navBar1280 languageJS">
+            <div class="categoryTitle">
+                <img class="logo" src="/css/img/logo_v4.svg">
+                <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>
+            </div>
+
+            <div class="category languageJS" id="JStoTSbar">
+                <div class="buttonJStoTS languageTS" id="toTSbutton1280">TS</div>
+                <div class="buttonJStoTS languageJS" id="toJSbutton1280">JS</div>
+                <div class="buttonPG run removeOnDiff" id="runButton1280"><img src="/css/img/playButton.svg"></div>
+                <div class="buttonPG removeOnDiff" id="saveButton1280"><img src="/css/img/saveButton.svg"></div>
+                <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1280"><img
+                        src="/css/img/downloadButton.svg"></div>
+                <div class="buttonPG removeOnDiff" id="newButton1280"><img src="/css/img/newButton.svg"></div>
+                <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1280"><img
+                        src="/css/img/clearButton.svg"></div>
+                <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1280"><img src="/css/img/diffButton.svg">
+                </div>
+                <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1280"><img
+                        src="/css/img/previousButton.svg"></div>
+                <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1280"><img
+                        src="/css/img/nextButton.svg"></div>
+                <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1280"><img
+                        src="/css/img/exitButton.svg"></div>
+                <div class="buttonPG select removeOnDiff" id="menuButton1280"><img src="/css/img/optionsButton.svg">
+                    <div class="toDisplay languageJS">
+                        <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                            <div class="toDisplaySub languageJS">
+                                <div class="option selected" id="darkTheme1280">Dark</div>
+                                <div class="option" id="lightTheme1280">Light</div>
+                            </div>
+                        </div>
+                        <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                            <div class="toDisplaySub displayFontSize languageJS">
+                                <div class="option">12</div>
+                                <div class="option selected">14</div>
+                                <div class="option">16</div>
+                                <div class="option">18</div>
+                                <div class="option">20</div>
+                                <div class="option">22</div>
+                            </div>
+                        </div>
+                        <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option checked noSubSelect" id="editorButton1280">Editor
+                            <i class="fa fa-check-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option noSubSelect" id="ctrlsToggle1280">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
+                        <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
+                        <div class="option noSubSelect" id="formatButton1280">Format code</div>
+                        <div class="option noSubSelect" id="minimapToggle1280">Minimap
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option subSelect" id="qrCodeHover1280">QR Code Link <i class="fa fa-chevron-right"
+                                aria-hidden="true"></i>
+                            <div class="toDisplaySub qrCodeImage">
+                                <div class="option" id="qrCodeImage1280">[QR Code Image]</div>
+                            </div>
+                        </div>
+                        <div class="option uncheck noSubSelect" id="debugButton1280">Inspector</div>
+                        <div class="option nosubselect" id="metadataButton1280">Metadata</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="category right">
+                <div class="buttonPG select removeOnDiff">
+                    <span id="currentVersion1280"></span>
+                    <div class="toDisplay currentVersionDisplay" style="display: none"></div>
+                </div>
+                <div class="buttonPG select removeOnDiff"><img class="examplesButton" src="/css/img/examplesButton.svg">
+                </div>
+            </div>
+        </div>
+
+        <!-- Mid-size screens -->
+        <div class="navbar navBar1024 languageJS">
+            <div class="categoryTitle">
+                <img class="logo" src="/css/img/logo_v4.svg">
+                <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
+            </div>
+
+            <div class="category languageJS" id="JStoTSbar">
+                <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
+                <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
+                <div class="buttonSpaceKiller"></div>
+                <div class="buttonPG run removeOnDiff" id="runButton1024"><img src="/css/img/playButton.svg"></div>
+                <div class="buttonPG removeOnDiff" id="saveButton1024"><img src="/css/img/saveButton.svg"></div>
+                <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1024"><img
+                        src="/css/img/downloadButton.svg"></div>
+                <div class="buttonPG removeOnDiff" id="newButton1024"><img src="/css/img/newButton.svg"></div>
+                <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1024"><img
+                        src="/css/img/clearButton.svg"></div>
+                <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1024"><img src="/css/img/diffButton.svg">
+                </div>
+                <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1024"><img
+                        src="/css/img/previousButton.svg"></div>
+                <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1024"><img
+                        src="/css/img/nextButton.svg"></div>
+                <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1024"><img
+                        src="/css/img/exitButton.svg"></div>
+
+                <div class="buttonPG select removeOnDiff" id="menuButton1024"><img src="/css/img/optionsButton.svg">
+                    <div class="toDisplay">
+                        <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+
+                            <div class="toDisplaySub">
+                                <div class="option selected" id="darkTheme1024">Dark</div>
+                                <div class="option" id="lightTheme1024">Light</div>
+                            </div>
+                        </div>
+                        <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                            <div class="toDisplaySub displayFontSize">
+                                <div class="option">12</div>
+                                <div class="option selected">14</div>
+                                <div class="option">16</div>
+                                <div class="option">18</div>
+                                <div class="option">20</div>
+                                <div class="option">22</div>
+                            </div>
+                        </div>
+                        <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option checked noSubSelect" id="editorButton1024">Editor
+                            <i class="fa fa-check-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option noSubSelect" id="ctrlsToggle1024">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
+                        <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
+                        <div class="option noSubSelect" id="formatButton1024">Format code</div>
+                        <div class="option noSubSelect" id="minimapToggle1024">Minimap
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option subSelect" id="qrCodeHover1024">QR Code Link <i class="fa fa-chevron-right"
+                                aria-hidden="true"></i>
+                            <div class="toDisplaySub qrCodeImage">
+                                <div class="option" id="qrCodeImage1024">[QR Code Image]</div>
+                            </div>
+                        </div>
+                        <div class="option uncheck noSubSelect" id="debugButton1024">Inspector</div>
+                        <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="category right">
+                <div class="buttonPG select removeOnDiff">
+                    <span id="currentVersion1024"></span>
+                    <div class="toDisplay currentVersionDisplay" style="display: none">
+                    </div>
+                </div>
+                <div class="buttonPG select removeOnDiff"><img class="examplesButton" src="/css/img/examplesButton.svg">
+                </div>
+            </div>
+        </div>
+
+        <!-- Mobile -->
+        <div class="navbar navBarMobile languageJS">
+            <div class="category languageJS" id="JStoTSbar">
+                <div class="buttonPG select" id="menuButtonMobile"><img src="/css/img/hamburgerButton.svg">
+                    <div class="toDisplay">
+                        <div class="option noSubSelect languageTS" id="toTSbuttonMobile">TypeScript</div>
+                        <div class="option noSubSelect languageJS" id="toJSbuttonMobile">JavaScript</div>
+                        <div class="option noSubSelect run removeOnDiff" id="runButtonMobile"><img
+                                src="/css/img/playButton.svg">Run</div>
+                        <div class="option noSubSelect removeOnDiff" id="saveButtonMobile"><img
+                                src="/css/img/saveButton.svg">Save</div>
+                        <div class="option noSubSelect removeOnDiff" id="zipButtonMobile"><img
+                                src="/css/img/downloadButton.svg">Download</div>
+                        <div class="option noSubSelect removeOnDiff" id="newButtonMobile"><img
+                                src="/css/img/newButton.svg">New</div>
+                        <div class="option noSubSelect removeOnDiff" id="clearButtonMobile"><img
+                                src="/css/img/clearButton.svg">Clear</div>
+                        <div class="option noSubSelect removeOnDiff" id="diffButtonMobile"><img
+                                src="/css/img/DiffButton.svg">Diff</div>
+                        <div class="option noSubSelect displayOnDiff" id="previousButtonMobile"><img
+                                src="/css/img/previousButton.svg">Previous</div>
+                        <div class="option noSubSelect displayOnDiff" id="nextButtonMobile"><img
+                                src="/css/img/nextButton.svg">Next</div>
+                        <div class="option noSubSelect displayOnDiff" id="exitButtonMobile"><img
+                                src="/css/img/exitButton.svg">Exit</div>
+
+                        <div class="option noSubSelect removeOnDiff" id="debugButtonMobile"><img
+                                src="/css/img/inspectorButton.svg">Inspector</div>
+                        <div class="option subSelect removeOnDiff">
+                            <img src="/css/img/optionsButton.svg">
+                            <div id="currentVersionMobile"></div>
+                            <div class="toDisplaySub currentVersionDisplay">
+                            </div>
+                        </div>
+                        <div class="option subSelect removeOnDiff"><img src="/css/img/optionsButton.svg">Theme
+                            <div class="toDisplaySub">
+                                <div class="option selected" id="darkThemeMobile">Dark</div>
+                                <div class="option" id="lightThemeMobile">Light</div>
+                            </div>
+                        </div>
+                        <div class="option subSelect removeOnDiff"><img src="/css/img/optionsButton.svg">Font size
+                            <div class="toDisplaySub displayFontSize">
+                                <div class="option">8</div>
+                                <div class="option">10</div>
+                                <div class="option selected">12</div>
+                                <div class="option">14</div>
+                                <div class="option">16</div>
+                                <div class="option">18</div>
+                                <div class="option">20</div>
+                                <div class="option">22</div>
+                            </div>
+                        </div>
+                        <div style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
+                            <i class="fa fa-check-square" aria-hidden="true"></i>
+                        </div>
+                        <div style="display: none;" class="option noSubSelect" id="ctrlsToggleMobile">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>                        
+                        <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile"
+                            style="display: none">Fullscreen</div>
+                        <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile"
+                            style="display: none">Editor
+                            Fullscreen</div>
+                        <div class="option nosubselect removeOnDiff" id="formatButtonMobile"><img
+                                src="/css/img/optionsButton.svg">Format
+                            code</div>
+                        <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <!-- <div class="option subSelect" id="qrCodeHoverMobile"><img src="/css/img/optionsButton.svg">QR Code Link
+                        <div class="toDisplaySub qrCodeImage">
+                            <div class="option" id="qrCodeImageMobile">[QR Code Image]</div>
+                        </div>
+                    </div> -->
+                        <div class="option nosubselect removeOnDiff" id="metadataButtonMobile"><img
+                                src="/css/img/metadataButton.svg">Metadata</div>
+                        <div class="option nosubselect removeOnDiff"><img class="examplesButton"
+                                src="/css/img/examplesButton.svg">Examples</div>
+                        <div class="option subSelect removeOnDiff"><img src="/css/img/examplesButton.svg">Links / Tools
+                            <div class="toDisplaySub displayFooterLinks">
+                                <div class="option link">
+                                    <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
+                                </div>
+                                <div class="option link">
+                                    <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
+                                </div>
+                                <div class="option link">
+                                    <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
+                                </div>
+                                <div class="option link">
+                                    <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
+                                </div>
+                                <div class="option link">
+                                    <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="categoryTitle">
+                    <img class="logo" src="/css/img/logo_v4.svg">
+                    <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
+                </div>
+            </div>
+
+            <div id="switchWrapper" class="languageJS removeOnDiff">
+                <img id="switchWrapperCode" src="/css/img/codeButton.svg">
+                <img id="switchWrapperCanvas" src="/css/img/canvas3Dbutton.svg">
+            </div>
+        </div>
+
+        <!-- Common things -->
+
+        <div class="wrapper">
+            <div id="jsEditor"></div>
+            <div id="diffView" class="diff-view"></div>
+            <div id="canvasZone">
+                <canvas touch-action="none" id="renderCanvas"></canvas>
+            </div>
+        </div>
+        <div id="exampleList" class="javascript">
+            <div id="exampleBanner" class="languageJS">
+                <h1>Examples<img id="examplesButtonClose" src="/css/img/clearButton.svg"></h1>
+            </div>
+            <div class="horizontalSeparator"></div>
+            <input id="filterBar" type="text" placeholder="Filter examples...">
+            <img id="filterBarClear"
+                src="/css/img/clear_button.png">
+        </div>
+
+        <div class="fpsLabel languageJS" id="fpsLabel"></div>
+
+        <div id="errorZone">
+        </div>
+
+        <div class="navbarBottom">
+            <div id="statusBar"></div>
+            <div class="links">
+                <div class='link'>
+                    <a target='_new' href="https://forum.babylonjs.com/">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>
+
+        <div id="saveLayer" class="save-layer">
+            <div class="save-form languageJS ">
+                <img id="saveFormButtonClose" src="/css/img/clearButton.svg">
+                <label for="saveFormTitle">TITLE</label>
+                <div class="separator"></div>
+                <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
+
+                <label for="saveFormDescription">DESCRIPTION</label>
+                <div class="separator"></div>
+                <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
+
+                <label for="saveFormTags">TAGS (separated by comma)</label>
+                <div class="separator"></div>
+                <textarea id="saveFormTags" rows="4" cols="10"></textarea>
+
+                <div class="save-form-buttons" id="saveFormButtons">
+                    <div id="saveFormButtonOk">OK</div>
+                    <div id="saveFormButtonCancel">Cancel</div>
+                </div>
+            </div>
+        </div>
+
+        <div id="diffLayer" class="save-layer">
+            <div class="save-form diff-form">
+                <label for="diffFormSource">COMPARISON SOURCE</label>
+                <div class="separator"></div>
+                <input type="text" maxlength="120" id="diffFormSource"
+                    placeholder="leave blank to use current snippet, or use snippet ID" class="save-form-title">
+
+                <label for="diffFormCompareTo">COMPARE TO</label>
+                <div class="separator"></div>
+                <input type="text" maxlength="120" id="diffFormCompareTo" placeholder="snippet ID"
+                    class="save-form-title">
+
+                <div class="save-form-buttons" id="diffFormButtons">
+                    <div id="diffFormButtonOk">OK</div>
+                    <div id="diffFormButtonCancel">Cancel</div>
+                </div>
+            </div>
+        </div>
+
+        <div id="waitDiv">
+            <div id="logo-part">
+                <img src="/css/img/v4.svg" id="waitLogo" />
+                <img src="/css/img/spinner.svg" id="waitSpinner" />
+            </div>
+        </div>
+
+        <!-- jQuery -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+        <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>
+
+        <!-- Main scripts -->
+        <script src="/js/config_versions.js"></script>
+        <script src="/js/examples.js"></script>
+        <script src="/js/main.js"></script>
+        <script src="/js/menuPG.js"></script>
+        <script src="/js/monacoCreator.js"></script>
+        <script src="/js/settingsPG.js"></script>
+        <script src="/js/utils.js"></script>
+        <script src="/js/zipTool.js"></script>
+        <script src="/js/index.js"></script>
+    </body>
+
+</html>

Playground/old/frame.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Babylon.js Playground</title>
+        <meta charset='utf-8' />
+        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
+        <meta name="description" content="Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes">
+        <meta name="keywords" content="Babylon.js,WebGL,3D">
+
+        <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
+
+        <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">
+
+        <!-- Pep -->
+        <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+
+        <!-- DatGUI CDN -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
+
+        <!-- Dependencies -->
+        <script src="https://preview.babylonjs.com/ammo.js"></script>
+        <script src="https://preview.babylonjs.com/recast.js"></script>
+        <script src="https://preview.babylonjs.com/cannon.js"></script>
+        <script src="https://preview.babylonjs.com/Oimo.js"></script>
+        <script src="https://preview.babylonjs.com/libktx.js"></script>
+        <script src="https://preview.babylonjs.com/earcut.min.js"></script>
+        <script src="https://preview.babylonjs.com/babylon.js"></script>
+        <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
+        <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
+        <!-- Babylon.js -->
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.fireMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.waterMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.lavaMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.normalMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.skyMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.triPlanarMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.terrainMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gradientMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.furMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gridMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.shadowOnlyMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.customMaterial.min.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylon.cellMaterial.min.js"></script>
+
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.brickProceduralTexture.min.js">
+        </script>
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.cloudProceduralTexture.min.js">
+        </script>
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.fireProceduralTexture.min.js">
+        </script>
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.grassProceduralTexture.min.js">
+        </script>
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.marbleProceduralTexture.min.js">
+        </script>
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.roadProceduralTexture.min.js">
+        </script>
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.starfieldProceduralTexture.min.js">
+        </script>
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.woodProceduralTexture.min.js">
+        </script>
+
+        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.asciiArtPostProcess.min.js"></script>
+        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.digitalRainPostProcess.min.js"></script>
+
+        <script src="https://preview.babylonjs.com/loaders/babylon.glTFFileLoader.js"></script>
+        <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/inspector/babylon.inspector.bundle.js"></script>
+
+        <!-- Extensions -->
+        <script
+            src="https://rawcdn.githack.com/BabylonJS/Extensions/f43ab677b4bca0a6ab77132d3f785be300382760/ClonerSystem/src/babylonx.cloner.js"
+            async>
+        </script>
+        <script
+            src="https://rawcdn.githack.com/BabylonJS/Extensions/785013ec55b210d12263c91f3f0a2ae70cf0bc8a/CompoundShader/src/babylonx.CompoundShader.js"
+            async></script>
+
+        <!-- Scene Manager -->
+        <script
+            src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.manager.js">
+        </script>
+        <script
+            src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.navmesh.js">
+        </script>
+
+        <link rel="stylesheet" href="/css/frame.css" />
+    </head>
+
+    <body>
+        <canvas touch-action="none" id="renderCanvas" tabindex="1"></canvas>
+
+        <div class="footer">
+            <span id="fpsLabel">FPS</span>
+            <div class="footerRight">
+                <a href="javascript:void(null);">
+                    <img id="refresh" src="/textures/icons/refresh.png" width="36" height="36" alt="Reload page"
+                        title="Reload page" />
+                </a>
+                <a id="edit" href="#" target="_blank">
+                    <img src="/textures/icons/edit.png" width="36" height="36" alt="Edit in playground"
+                        title="Edit in playground" />
+                </a>
+            </div>
+        </div>
+
+        <!-- jQuery -->
+        <script src="https://code.jquery.com/jquery.min.js"></script>
+
+        <script src="/js/frame.js"></script>
+    </body>
+
+</html>

Playground/old/full.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+
+    <head>
+        <title>Babylon.js Playground</title>
+        <link rel="shortcut icon" href="https://www.babylonjs.com/img/favicon/favicon.ico">
+        <meta name="theme-color" content="#ffffff">
+        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
+
+        <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+        <!-- DatGUI -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
+        <!-- Babylon.js -->
+        <script src="https://preview.babylonjs.com/ammo.js"></script>
+        <script src="https://preview.babylonjs.com/recast.js"></script>
+        <script src="https://preview.babylonjs.com/cannon.js"></script>
+        <script src="https://preview.babylonjs.com/Oimo.js"></script>
+        <script src="https://preview.babylonjs.com/libktx.js"></script>
+        <script src="https://preview.babylonjs.com/babylon.js"></script>
+        <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
+        <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js">
+        </script>
+        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
+        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
+
+        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
+
+        <!-- Extensions -->
+        <script
+            src="https://rawcdn.githack.com/BabylonJS/Extensions/f43ab677b4bca0a6ab77132d3f785be300382760/ClonerSystem/src/babylonx.cloner.js"
+            async>
+        </script>
+        <script
+            src="https://rawcdn.githack.com/BabylonJS/Extensions/785013ec55b210d12263c91f3f0a2ae70cf0bc8a/CompoundShader/src/babylonx.CompoundShader.js"
+            async></script>
+
+        <!-- Scene Manager -->
+        <script
+            src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.manager.js">
+        </script>
+        <script
+            src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.navmesh.js">
+        </script>
+        <link href="/css/frame.css" rel="stylesheet" />
+    </head>
+
+    <body>
+        <!-- Override frame style -->
+        <canvas touch-action="none" id="renderCanvas" tabindex="1" style="height: 100%"></canvas>
+        <script src="https://code.jquery.com/jquery.min.js"></script>
+        <script src="/js/frame.js"></script>
+    </body>
+
+</html>

Playground/old/index-local.html

@@ -0,0 +1,452 @@
+<!DOCTYPE html>
+<html>
+
+    <head>
+        <title>Babylon.js Playground</title>
+        <meta charset='utf-8' />
+        <meta name="viewport" content="width=device-width, user-scalable=no">
+        <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
+        <meta name="description" content="Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes">
+        <meta name="keywords" content="Babylon.js,WebGL,3D">
+
+        <link rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
+        <link rel="stylesheet" href="/css/index.css" />
+        <link rel="stylesheet" href="/css/index_mobile.css" />
+
+        <!-- Pep -->
+        <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+        <!--For canvas/code separator-->
+        <script src="js/libs/split.js"></script>
+
+        <!-- DatGUI -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
+        <!-- jszip -->
+        <script src="js/libs/jszip.min.js"></script>
+        <script src="js/libs/fileSaver.js"></script>
+
+        <!-- Dependencies -->
+        <script src="../dist/preview%20release/ammo.js"></script>
+        <script src="../dist/preview%20release/recast.js"></script>
+        <script src="../dist/preview%20release/cannon.js"></script>
+        <script src="../dist/preview%20release/Oimo.js"></script>
+        <script src="../dist/preview%20release/libktx.js"></script>
+        <script src="../dist/preview%20release/earcut.min.js"></script>
+        <!-- Monaco -->
+
+        <!-- Babylon.js -->
+        <script src="../Tools/DevLoader/BabylonLoader.js"></script>
+    </head>
+
+    <body>
+        <!-- Big screens -->
+        <div class="navbar navBar1280 languageJS">
+            <div class="categoryTitle">
+                <img class="logo" src="css/img/logo_v4.svg">
+                <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>
+            </div>
+
+            <div class="category languageJS" id="JStoTSbar">
+                <div class="buttonJStoTS languageTS" id="toTSbutton1280" title="Switch to TypeScript">TS</div>
+                <div class="buttonJStoTS languageJS" id="toJSbutton1280" title="Switch to JavaScript">JS</div>
+                <div class="buttonPG run removeOnDiff" id="runButton1280" title="Run&#10;(Alt+Enter)"><img
+                        src="css/img/playButton.svg"></div>
+                <div class="buttonPG removeOnDiff" id="saveButton1280" title="Save&#10;(Ctrl+S)"><img
+                        src="css/img/saveButton.svg"></div>
+                <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1280"
+                    title="Download ZIP&#10;(Ctrl+Shift+S)"><img src="css/img/downloadButton.svg"></div>
+                <div class="buttonPG removeOnDiff" id="newButton1280" title="Create new"><img
+                        src="css/img/newButton.svg"></div>
+                <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1280" title="Clear"><img
+                        src="css/img/clearButton.svg"></div>
+                <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1280" title="Compare"><img
+                        src="css/img/diffButton.svg"></div>
+                <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1280"
+                    title="Previous difference&#10;(Shift+Alt+F5)"><img src="css/img/previousButton.svg"></div>
+                <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1280"
+                    title="Next difference&#10;(Alt+F5)"><img src="css/img/nextButton.svg"></div>
+                <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1280" title="Exit&#10;(Esc)"><img
+                        src="css/img/exitButton.svg"></div>
+                <div class="buttonPG select removeOnDiff" id="menuButton1280" title="Options"><img
+                        src="css/img/optionsButton.svg">
+                    <div class="toDisplay languageJS">
+                        <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                            <div class="toDisplaySub languageJS">
+                                <div class="option selected" id="darkTheme1280">Dark</div>
+                                <div class="option" id="lightTheme1280">Light</div>
+                            </div>
+                        </div>
+                        <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                            <div class="toDisplaySub displayFontSize languageJS">
+                                <div class="option">12</div>
+                                <div class="option selected">14</div>
+                                <div class="option">16</div>
+                                <div class="option">18</div>
+                                <div class="option">20</div>
+                                <div class="option">22</div>
+                            </div>
+                        </div>
+                        <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option checked noSubSelect" id="editorButton1280">Editor
+                            <i class="fa fa-check-square" aria-hidden="true"></i>
+                        </div>                     
+                        <div class="option noSubSelect" id="ctrlsToggle1280">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
+                        <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
+                        <div class="option noSubSelect" id="formatButton1280">Format code</div>
+                        <div class="option noSubSelect" id="minimapToggle1280">Minimap
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option subSelect" id="qrCodeHover1280">QR Code Link <i class="fa fa-chevron-right"
+                                aria-hidden="true"></i>
+                            <div class="toDisplaySub qrCodeImage">
+                                <div class="option" id="qrCodeImage1280">[QR Code Image]</div>
+                            </div>
+                        </div>
+                        <div class="option uncheck noSubSelect" id="debugButton1280">Inspector</div>
+                        <div class="option nosubselect" id="metadataButton1280">Metadata</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="category right">
+                <div class="buttonPG select removeOnDiff" title="Select Babylon.js version">
+                    <span id="currentVersion1280"></span>
+                    <div class="toDisplay currentVersionDisplay" style="display: none"></div>
+                </div>
+                <div class="buttonPG select removeOnDiff" title="Examples"><img class="examplesButton"
+                        src="css/img/examplesButton.svg"></div>
+            </div>
+        </div>
+
+        <!-- Mid-size screens -->
+        <div class="navbar navBar1024 languageJS">
+            <div class="categoryTitle">
+                <img class="logo" src="css/img/logo_v4.svg">
+                <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
+            </div>
+
+            <div class="category languageJS" id="JStoTSbar">
+                <div class="buttonJStoTS languageTS" id="toTSbutton1024" title="Switch to TypeScript">TS</div>
+                <div class="buttonJStoTS languageJS" id="toJSbutton1024" title="Switch to JavaScript">JS</div>
+                <div class="buttonSpaceKiller"></div>
+                <div class="buttonPG run removeOnDiff" id="runButton1024" title="Run&#10;(Alt+Enter)"><img
+                        src="css/img/playButton.svg"></div>
+                <div class="buttonPG removeOnDiff" id="saveButton1024" title="Save&#10;(Ctrl+S)"><img
+                        src="css/img/saveButton.svg"></div>
+                <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1024"
+                    title="Download ZIP&#10;(Ctrl+Shift+S)"><img src="css/img/downloadButton.svg"></div>
+                <div class="buttonPG removeOnDiff" id="newButton1024" title="Create new"><img
+                        src="css/img/newButton.svg"></div>
+                <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1024" title="Clear"><img
+                        src="css/img/clearButton.svg"></div>
+                <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1024" title="Compare"><img
+                        src="css/img/diffButton.svg"></div>
+                <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1024"><img
+                        src="css/img/previousButton.svg"></div>
+                <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1024"><img src="css/img/nextButton.svg">
+                </div>
+                <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1024"><img src="css/img/exitButton.svg">
+                </div>
+
+                <div class="buttonPG select removeOnDiff" id="menuButton1024" title="Options"><img
+                        src="css/img/optionsButton.svg">
+                    <div class="toDisplay">
+                        <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+
+                            <div class="toDisplaySub">
+                                <div class="option selected" id="darkTheme1024">Dark</div>
+                                <div class="option" id="lightTheme1024">Light</div>
+                            </div>
+                        </div>
+                        <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                            <div class="toDisplaySub displayFontSize">
+                                <div class="option">12</div>
+                                <div class="option selected">14</div>
+                                <div class="option">16</div>
+                                <div class="option">18</div>
+                                <div class="option">20</div>
+                                <div class="option">22</div>
+                            </div>
+                        </div>
+                        <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option checked noSubSelect" id="editorButton1024">Editor
+                            <i class="fa fa-check-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option noSubSelect" id="ctrlsToggle1024">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
+                        <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
+                        <div class="option noSubSelect" id="formatButton1024">Format code</div>
+                        <div class="option noSubSelect" id="minimapToggle1024">Minimap
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option subSelect" id="qrCodeHover1024">QR Code Link <i class="fa fa-chevron-right"
+                                aria-hidden="true"></i>
+                            <div class="toDisplaySub qrCodeImage">
+                                <div class="option" id="qrCodeImage1024">[QR Code Image]</div>
+                            </div>
+                        </div>
+                        <div class="option uncheck noSubSelect" id="debugButton1024">Inspector</div>
+                        <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="category right">
+                <div class="buttonPG select removeOnDiff" title="Select Babylon.js version">
+                    <span id="currentVersion1024"></span>
+                    <div class="toDisplay currentVersionDisplay" style="display: none">
+                    </div>
+                </div>
+                <div class="buttonPG select removeOnDiff" title="Examples"><img class="examplesButton"
+                        src="css/img/examplesButton.svg"></div>
+            </div>
+        </div>
+
+        <!-- Mobile -->
+        <div class="navbar navBarMobile languageJS">
+            <div class="category languageJS" id="JStoTSbar">
+                <div class="buttonPG select" id="menuButtonMobile"><img src="css/img/hamburgerButton.svg">
+                    <div class="toDisplay">
+                        <div class="option noSubSelect languageTS" id="toTSbuttonMobile">TypeScript</div>
+                        <div class="option noSubSelect languageJS" id="toJSbuttonMobile">JavaScript</div>
+                        <div class="option noSubSelect run removeOnDiff" id="runButtonMobile"><img
+                                src="css/img/playButton.svg">Run</div>
+                        <div class="option noSubSelect removeOnDiff" id="saveButtonMobile"><img
+                                src="css/img/saveButton.svg">Save</div>
+                        <div class="option noSubSelect removeOnDiff" id="zipButtonMobile"><img
+                                src="css/img/downloadButton.svg">Download</div>
+                        <div class="option noSubSelect removeOnDiff" id="newButtonMobile"><img
+                                src="css/img/newButton.svg">New</div>
+                        <div class="option noSubSelect removeOnDiff" id="clearButtonMobile"><img
+                                src="css/img/clearButton.svg">Clear</div>
+                        <div class="option noSubSelect removeOnDiff" id="diffButtonMobile"><img
+                                src="css/img/diffButton.svg">Diff</div>
+                        <div class="option noSubSelect displayOnDiff" id="previousButtonMobile"><img
+                                src="css/img/previousButton.svg">Previous</div>
+                        <div class="option noSubSelect displayOnDiff" id="nextButtonMobile"><img
+                                src="css/img/nextButton.svg">Next</div>
+                        <div class="option noSubSelect displayOnDiff" id="exitButtonMobile"><img
+                                src="css/img/exitButton.svg">Exit</div>
+
+                        <div class="option noSubSelect removeOnDiff" id="debugButtonMobile"><img
+                                src="css/img/inspectorButton.svg">Inspector</div>
+                        <div class="option subSelect removeOnDiff">
+                            <img src="css/img/optionsButton.svg">
+                            <div id="currentVersionMobile"></div>
+                            <div class="toDisplaySub currentVersionDisplay">
+                            </div>
+                        </div>
+                        <div class="option subSelect removeOnDiff"><img src="css/img/optionsButton.svg">Theme
+                            <div class="toDisplaySub">
+                                <div class="option selected" id="darkThemeMobile">Dark</div>
+                                <div class="option" id="lightThemeMobile">Light</div>
+                            </div>
+                        </div>
+                        <div class="option subSelect removeOnDiff"><img src="css/img/optionsButton.svg">Font size
+                            <div class="toDisplaySub displayFontSize">
+                                <div class="option">8</div>
+                                <div class="option">10</div>
+                                <div class="option selected">12</div>
+                                <div class="option">14</div>
+                                <div class="option">16</div>
+                                <div class="option">18</div>
+                                <div class="option">20</div>
+                                <div class="option">22</div>
+                            </div>
+                        </div>
+                        <div style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
+                            <i class="fa fa-check-square" aria-hidden="true"></i>
+                        </div>
+                        <div style="display: none;" class="option noSubSelect" id="ctrlsToggleMobile">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>                            
+                        <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile"
+                            style="display: none">Fullscreen</div>
+                        <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile"
+                            style="display: none">Editor
+                            Fullscreen</div>
+                        <div class="option nosubselect removeOnDiff" id="formatButtonMobile"><img
+                                src="css/img/optionsButton.svg">Format
+                            code</div>
+                        <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <!-- <div class="option subSelect" id="qrCodeHoverMobile"><img src="css/img/optionsButton.svg">QR Code Link
+                        <div class="toDisplaySub qrCodeImage">
+                            <div class="option" id="qrCodeImageMobile">[QR Code Image]</div>
+                        </div>
+                    </div> -->
+                        <div class="option nosubselect removeOnDiff" id="metadataButtonMobile"><img
+                                src="css/img/metadataButton.svg">Metadata</div>
+                        <div class="option nosubselect removeOnDiff"><img class="examplesButton"
+                                src="css/img/examplesButton.svg">Examples</div>
+                        <div class="option subSelect removeOnDiff"><img src="css/img/examplesButton.svg">Links / Tools
+                            <div class="toDisplaySub displayFooterLinks">
+                                <div class="option link">
+                                    <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
+                                </div>
+                                <div class="option link">
+                                    <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
+                                </div>
+                                <div class="option link">
+                                    <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
+                                </div>
+                                <div class="option link">
+                                    <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
+                                </div>
+                                <div class="option link">
+                                    <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="categoryTitle">
+                    <img class="logo" src="css/img/logo_v4.svg">
+                    <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
+                </div>
+            </div>
+
+            <div id="switchWrapper" class="languageJS removeOnDiff">
+                <img id="switchWrapperCode" src="css/img/codeButton.svg">
+                <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">
+            </div>
+        </div>
+
+        <!-- Common things -->
+
+        <div class="wrapper">
+            <div id="jsEditor"></div>
+            <div id="diffView" class="diff-view"></div>
+            <div id="canvasZone">
+                <canvas touch-action="none" id="renderCanvas"></canvas>
+            </div>
+        </div>
+        <div id="exampleList" class="javascript">
+            <div id="exampleBanner" class="languageJS">
+                <h1>Examples<img id="examplesButtonClose" src="css/img/clearButton.svg"></h1>
+            </div>
+            <div class="horizontalSeparator"></div>
+            <input id="filterBar" type="text" placeholder="Filter examples...">
+            <img id="filterBarClear"
+                src="css/img/clear_button.png">
+        </div>
+
+        <div class="fpsLabel languageJS" id="fpsLabel"></div>
+
+        <div id="errorZone">
+        </div>
+
+        <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="https://forum.babylonjs.com/">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>
+
+        <div id="saveLayer" class="save-layer">
+            <div class="save-form languageJS ">
+                <img id="saveFormButtonClose" src="css/img/clearButton.svg">
+                <label for="saveFormTitle">TITLE</label>
+                <div class="separator"></div>
+                <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
+
+                <label for="saveFormDescription">DESCRIPTION</label>
+                <div class="separator"></div>
+                <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
+
+                <label for="saveFormTags">TAGS (separated by comma)</label>
+                <div class="separator"></div>
+                <textarea id="saveFormTags" rows="4" cols="10"></textarea>
+
+                <div class="save-form-buttons" id="saveFormButtons">
+                    <div id="saveFormButtonOk">OK</div>
+                    <div id="saveFormButtonCancel">Cancel</div>
+                </div>
+            </div>
+        </div>
+
+        <div id="diffLayer" class="save-layer">
+            <div class="save-form diff-form">
+                <label for="diffFormSource">COMPARISON SOURCE</label>
+                <div class="separator"></div>
+                <input type="text" maxlength="120" id="diffFormSource"
+                    placeholder="leave blank to use current snippet, or use snippet ID" class="save-form-title">
+
+                <label for="diffFormCompareTo">COMPARE TO</label>
+                <div class="separator"></div>
+                <input type="text" maxlength="120" id="diffFormCompareTo" placeholder="snippet ID"
+                    class="save-form-title">
+
+                <div class="save-form-buttons" id="diffFormButtons">
+                    <div id="diffFormButtonOk">OK</div>
+                    <div id="diffFormButtonCancel">Cancel</div>
+                </div>
+            </div>
+        </div>
+
+        <div id="waitDiv">
+            <div id="logo-part">
+                <img src="css/img/v4.svg" id="waitLogo" />
+                <img src="css/img/spinner.svg" id="waitSpinner" />
+            </div>
+        </div>
+
+        <!-- jQuery -->
+        <script src="https://code.jquery.com/jquery.js"></script>
+        <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>
+
+        <!-- Main scripts -->
+        <script src="js/config_versions.js"></script>
+        <script src="js/examples.js"></script>
+        <script src="js/main.js"></script>
+        <script src="js/menuPG.js"></script>
+        <script src="js/monacoCreator.js"></script>
+        <script src="js/settingsPG.js"></script>
+        <script src="js/utils.js"></script>
+        <script src="js/zipTool.js"></script>
+
+        <script>
+            BABYLONDEVTOOLS.Loader
+                .require('node_modules/monaco-editor/dev/vs/loader.js')
+                .require('js/index.js')
+                .load(function () {
+                    BABYLON.DracoCompression.Configuration.decoder = {
+                        wasmUrl: "../dist/preview%20release/draco_wasm_wrapper_gltf.js",
+                        wasmBinaryUrl: "../dist/preview%20release/draco_decoder_gltf.wasm",
+                        fallbackUrl: "../dist/preview%20release/draco_decoder_gltf.js"
+                    };
+                    BABYLON.GLTFValidation.Configuration = {
+                        url: "../dist/preview%20release/gltf_validator.js"
+                    };
+                });
+        </script>
+    </body>
+
+</html>

Playground/old/index.html

@@ -0,0 +1,463 @@
+<!DOCTYPE html>
+<html>
+
+    <head>
+        <title>Babylon.js Playground</title>
+        <meta charset='utf-8' />
+        <meta name="viewport" content="width=device-width, user-scalable=no">
+        <meta name="description" content="Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes">
+        <meta name="keywords" content="Babylon.js,WebGL,3D">
+        <meta name="google-site-verification" content="wcRjktXhF6DAjmhneKS7UatweBIkEF6QfqsNhAYbUgg" />
+        <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
+
+        <link rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
+        <link rel="stylesheet" href="/css/index.css" />
+        <link rel="stylesheet" href="/css/index_mobile.css" />
+
+    </head>
+
+    <body>
+        <!-- Big screens -->
+        <div class="navbar navBar1280 languageJS">
+            <div class="categoryTitle">
+                <img class="logo" src="/css/img/logo_v4.svg">
+                <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>
+            </div>
+
+            <div class="category languageJS" id="JStoTSbar">
+                <div class="buttonJStoTS languageTS" id="toTSbutton1280">TS</div>
+                <div class="buttonJStoTS languageJS" id="toJSbutton1280">JS</div>
+                <div class="buttonPG run removeOnDiff" id="runButton1280" title="Run&#10;(Alt+Enter)"><img
+                        src="/css/img/playButton.svg"></div>
+                <div class="buttonPG removeOnDiff" id="saveButton1280" title="Save&#10;(Ctrl+S)"><img
+                        src="/css/img/saveButton.svg"></div>
+                <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1280"
+                    title="Download ZIP&#10;(Ctrl+Shift+S)"><img src="/css/img/downloadButton.svg"></div>
+                <div class="buttonPG removeOnDiff" id="newButton1280" title="Create new"><img
+                        src="/css/img/newButton.svg"></div>
+                <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1280" title="Clear"><img
+                        src="/css/img/clearButton.svg"></div>
+                <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1280" title="Compare"><img
+                        src="/css/img/diffButton.svg"></div>
+                <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1280"
+                    title="Previous difference&#10;(Shift+Alt+F5)"><img src="/css/img/previousButton.svg"></div>
+                <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1280"
+                    title="Next difference&#10;(Alt+F5)"><img src="/css/img/nextButton.svg"></div>
+                <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1280" title="Exit&#10;(Esc)"><img
+                        src="/css/img/exitButton.svg"></div>
+                <div class="buttonPG select removeOnDiff" id="menuButton1280" title="Options"><img
+                        src="/css/img/optionsButton.svg">
+                    <div class="toDisplay languageJS">
+                        <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                            <div class="toDisplaySub languageJS">
+                                <div class="option selected" id="darkTheme1280">Dark</div>
+                                <div class="option" id="lightTheme1280">Light</div>
+                            </div>
+                        </div>
+                        <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                            <div class="toDisplaySub displayFontSize languageJS">
+                                <div class="option">12</div>
+                                <div class="option selected">14</div>
+                                <div class="option">16</div>
+                                <div class="option">18</div>
+                                <div class="option">20</div>
+                                <div class="option">22</div>
+                            </div>
+                        </div>
+                        <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option checked noSubSelect" id="editorButton1280">Editor
+                            <i class="fa fa-check-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option noSubSelect" id="ctrlsToggle1280">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
+                        <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
+                        <div class="option noSubSelect" id="formatButton1280">Format code</div>
+                        <div class="option noSubSelect" id="minimapToggle1280">Minimap
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option subSelect" id="qrCodeHover1280">QR Code Link <i class="fa fa-chevron-right"
+                                aria-hidden="true"></i>
+                            <div class="toDisplaySub qrCodeImage">
+                                <div class="option" id="qrCodeImage1280">[QR Code Image]</div>
+                            </div>
+                        </div>
+                        <div class="option uncheck noSubSelect" id="debugButton1280">Inspector</div>
+                        <div class="option nosubselect" id="metadataButton1280">Metadata</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="category right">
+                <div class="buttonPG select removeOnDiff" title="Select Babylon.js version">
+                    <span id="currentVersion1280"></span>
+                    <div class="toDisplay currentVersionDisplay" style="display: none"></div>
+                </div>
+                <div class="buttonPG select removeOnDiff" title="Examples"><img class="examplesButton"
+                        src="/css/img/examplesButton.svg"></div>
+            </div>
+        </div>
+
+        <!-- Mid-size screens -->
+        <div class="navbar navBar1024 languageJS">
+            <div class="categoryTitle">
+                <img class="logo" src="/css/img/logo_v4.svg">
+                <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
+            </div>
+
+            <div class="category languageJS" id="JStoTSbar">
+                <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
+                <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
+                <div class="buttonSpaceKiller"></div>
+                <div class="buttonPG run removeOnDiff" id="runButton1024" title="Run&#10;(Alt+Enter)"><img
+                        src="/css/img/playButton.svg"></div>
+                <div class="buttonPG removeOnDiff" id="saveButton1024" title="Save&#10;(Ctrl+S)"><img
+                        src="/css/img/saveButton.svg"></div>
+                <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1024"
+                    title="Download ZIP&#10;(Ctrl+Shift+S)"><img src="/css/img/downloadButton.svg"></div>
+                <div class="buttonPG removeOnDiff" id="newButton1024" title="Create new"><img
+                        src="/css/img/newButton.svg"></div>
+                <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1024" title="Clear"><img
+                        src="/css/img/clearButton.svg"></div>
+                <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1024" title="Compare"><img
+                        src="/css/img/diffButton.svg"></div>
+                <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1024"><img
+                        src="/css/img/previousButton.svg"></div>
+                <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1024"><img
+                        src="/css/img/nextButton.svg">
+                </div>
+                <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1024"><img
+                        src="/css/img/exitButton.svg">
+                </div>
+
+                <div class="buttonPG select removeOnDiff" id="menuButton1024" title="Options"><img
+                        src="/css/img/optionsButton.svg">
+                    <div class="toDisplay">
+                        <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+
+                            <div class="toDisplaySub">
+                                <div class="option selected" id="darkTheme1024">Dark</div>
+                                <div class="option" id="lightTheme1024">Light</div>
+                            </div>
+                        </div>
+                        <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                            <div class="toDisplaySub displayFontSize">
+                                <div class="option">12</div>
+                                <div class="option selected">14</div>
+                                <div class="option">16</div>
+                                <div class="option">18</div>
+                                <div class="option">20</div>
+                                <div class="option">22</div>
+                            </div>
+                        </div>
+                        <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option checked noSubSelect" id="editorButton1024">Editor
+                            <i class="fa fa-check-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option noSubSelect" id="ctrlsToggle1024">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
+                        <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
+                        <div class="option noSubSelect" id="formatButton1024">Format code</div>
+                        <div class="option noSubSelect" id="minimapToggle1024">Minimap
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div class="option subSelect" id="qrCodeHover1024">QR Code Link <i class="fa fa-chevron-right"
+                                aria-hidden="true"></i>
+                            <div class="toDisplaySub qrCodeImage">
+                                <div class="option" id="qrCodeImage1024">[QR Code Image]</div>
+                            </div>
+                        </div>
+                        <div class="option uncheck noSubSelect" id="debugButton1024">Inspector</div>
+                        <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="category right">
+                <div class="buttonPG select removeOnDiff" title="Select Babylon.js version">
+                    <span id="currentVersion1024"></span>
+                    <div class="toDisplay currentVersionDisplay" style="display: none">
+                    </div>
+                </div>
+                <div class="buttonPG select removeOnDiff" title="Examples"><img class="examplesButton"
+                        src="/css/img/examplesButton.svg"></div>
+            </div>
+        </div>
+
+        <!-- Mobile -->
+        <div class="navbar navBarMobile languageJS">
+            <div class="category languageJS" id="JStoTSbar">
+                <div class="buttonPG select" id="menuButtonMobile"><img src="/css/img/hamburgerButton.svg">
+                    <div class="toDisplay">
+                        <div class="option noSubSelect languageTS" id="toTSbuttonMobile">TypeScript</div>
+                        <div class="option noSubSelect languageJS" id="toJSbuttonMobile">JavaScript</div>
+                        <div class="option noSubSelect run removeOnDiff" id="runButtonMobile"><img
+                                src="/css/img/playButton.svg">Run</div>
+                        <div class="option noSubSelect removeOnDiff" id="saveButtonMobile"><img
+                                src="/css/img/saveButton.svg">Save</div>
+                        <div class="option noSubSelect removeOnDiff" id="zipButtonMobile"><img
+                                src="/css/img/downloadButton.svg">Download</div>
+                        <div class="option noSubSelect removeOnDiff" id="newButtonMobile"><img
+                                src="/css/img/newButton.svg">New</div>
+                        <div class="option noSubSelect removeOnDiff" id="clearButtonMobile"><img
+                                src="/css/img/clearButton.svg">Clear</div>
+                        <div class="option noSubSelect removeOnDiff" id="diffButtonMobile"><img
+                                src="/css/img/diffButton.svg">Diff</div>
+                        <div class="option noSubSelect displayOnDiff" id="previousButtonMobile"><img
+                                src="/css/img/previousButton.svg">Previous</div>
+                        <div class="option noSubSelect displayOnDiff" id="nextButtonMobile"><img
+                                src="/css/img/nextButton.svg">Next</div>
+                        <div class="option noSubSelect displayOnDiff" id="exitButtonMobile"><img
+                                src="/css/img/exitButton.svg">Exit</div>
+
+                        <div class="option noSubSelect removeOnDiff" id="debugButtonMobile"><img
+                                src="/css/img/inspectorButton.svg">Inspector</div>
+                        <div class="option subSelect removeOnDiff">
+                            <img src="/css/img/optionsButton.svg">
+                            <div id="currentVersionMobile"></div>
+                            <div class="toDisplaySub currentVersionDisplay">
+                            </div>
+                        </div>
+                        <div class="option subSelect removeOnDiff"><img src="/css/img/optionsButton.svg">Theme
+                            <div class="toDisplaySub">
+                                <div class="option selected" id="darkThemeMobile">Dark</div>
+                                <div class="option" id="lightThemeMobile">Light</div>
+                            </div>
+                        </div>
+                        <div class="option subSelect removeOnDiff"><img src="/css/img/optionsButton.svg">Font size
+                            <div class="toDisplaySub displayFontSize">
+                                <div class="option">8</div>
+                                <div class="option">10</div>
+                                <div class="option selected">12</div>
+                                <div class="option">14</div>
+                                <div class="option">16</div>
+                                <div class="option">18</div>
+                                <div class="option">20</div>
+                                <div class="option">22</div>
+                            </div>
+                        </div>
+                        <div style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
+                            <i class="fa fa-check-square" aria-hidden="true"></i>
+                        </div>
+                        <div style="display: none;" class="option noSubSelect" id="ctrlsToggleMobile">CTRL+S to save
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>                            
+                        <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile"
+                            style="display: none">Fullscreen</div>
+                        <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile"
+                            style="display: none">Editor
+                            Fullscreen</div>
+                        <div class="option nosubselect removeOnDiff" id="formatButtonMobile"><img
+                                src="/css/img/optionsButton.svg">Format
+                            code</div>
+                        <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
+                            <i class="fa fa-square" aria-hidden="true"></i>
+                        </div>
+                        <!-- <div class="option subSelect" id="qrCodeHoverMobile"><img src="/css/img/optionsButton.svg">QR Code Link
+                        <div class="toDisplaySub qrCodeImage">
+                            <div class="option" id="qrCodeImageMobile">[QR Code Image]</div>
+                        </div>
+                    </div> -->
+                        <div class="option nosubselect removeOnDiff" id="metadataButtonMobile"><img
+                                src="/css/img/metadataButton.svg">Metadata</div>
+                        <div class="option nosubselect removeOnDiff"><img class="examplesButton"
+                                src="/css/img/examplesButton.svg">Examples</div>
+                        <div class="option subSelect removeOnDiff"><img src="/css/img/examplesButton.svg">Links / Tools
+                            <div class="toDisplaySub displayFooterLinks">
+                                <div class="option link">
+                                    <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
+                                </div>
+                                <div class="option link">
+                                    <a target='_new' href="https://sandbox.babylonjs.com/">Sandbox</a>
+                                </div>
+                                <div class="option link">
+                                    <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
+                                </div>
+                                <div class="option link">
+                                    <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="categoryTitle">
+                    <img class="logo" src="/css/img/logo_v4.svg">
+                    <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
+                </div>
+            </div>
+
+            <div id="switchWrapper" class="languageJS removeOnDiff">
+                <img id="switchWrapperCode" src="/css/img/codeButton.svg">
+                <img id="switchWrapperCanvas" src="/css/img/canvas3Dbutton.svg">
+            </div>
+        </div>
+
+        <!-- Common things -->
+
+        <div class="wrapper">
+            <div id="jsEditor"></div>
+            <div id="diffView" class="diff-view"></div>
+            <div id="canvasZone">
+                <canvas touch-action="none" id="renderCanvas"></canvas>
+            </div>
+        </div>
+        <div id="exampleList" class="javascript">
+            <div id="exampleBanner" class="languageJS">
+                <h1>Examples<img id="examplesButtonClose" src="/css/img/clearButton.svg"></h1>
+            </div>
+            <div class="horizontalSeparator"></div>
+            <input id="filterBar" type="text" placeholder="Filter examples...">
+            <img id="filterBarClear" src="/css/img/clear_button.png">
+        </div>
+
+        <div class="fpsLabel languageJS" id="fpsLabel"></div>
+
+        <div id="errorZone">
+        </div>
+
+        <div class="navbarBottom">
+            <div id="statusBar"></div>
+            <div class="links">
+                <div class='link'>
+                    <a target='_new' href="https://forum.babylonjs.com/">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>
+
+        <div id="saveLayer" class="save-layer">
+            <div class="save-form languageJS ">
+                <img id="saveFormButtonClose" src="/css/img/clearButton.svg">
+                <label for="saveFormTitle">TITLE</label>
+                <div class="separator"></div>
+                <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
+
+                <label for="saveFormDescription">DESCRIPTION</label>
+                <div class="separator"></div>
+                <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
+
+                <label for="saveFormTags">TAGS (separated by comma)</label>
+                <div class="separator"></div>
+                <textarea id="saveFormTags" rows="4" cols="10"></textarea>
+
+                <div class="save-form-buttons" id="saveFormButtons">
+                    <div id="saveFormButtonOk">OK</div>
+                    <div id="saveFormButtonCancel">Cancel</div>
+                </div>
+            </div>
+        </div>
+
+        <div id="diffLayer" class="save-layer">
+            <div class="save-form diff-form">
+                <label for="diffFormSource">COMPARISON SOURCE</label>
+                <div class="separator"></div>
+                <input type="text" maxlength="120" id="diffFormSource"
+                    placeholder="leave blank to use current snippet, or use snippet ID" class="save-form-title">
+
+                <label for="diffFormCompareTo">COMPARE TO</label>
+                <div class="separator"></div>
+                <input type="text" maxlength="120" id="diffFormCompareTo" placeholder="snippet ID"
+                    class="save-form-title">
+
+                <div class="save-form-buttons" id="diffFormButtons">
+                    <div id="diffFormButtonOk">OK</div>
+                    <div id="diffFormButtonCancel">Cancel</div>
+                </div>
+            </div>
+        </div>
+
+        <div id="waitDiv">
+            <div id="logo-part">
+                <img src="/css/img/v4.svg" id="waitLogo" />
+                <img src="/css/img/spinner.svg" id="waitSpinner" />
+            </div>
+        </div>
+
+
+        <!-- Pep -->
+        <script src="/js/libs/pep.min.js"></script>
+        <!-- For canvas/code separator -->
+        <script src="/js/libs/split.js"></script>
+
+        <!-- DatGUI -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
+        <!-- jszip -->
+        <script src="/js/libs/jszip.min.js"></script>
+        <script src="/js/libs/fileSaver.js"></script>
+
+        <!-- Babylon.js -->
+        <script src="https://preview.babylonjs.com/babylon.js"></script>
+        <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
+        <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
+        <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
+        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js">
+        </script>
+        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
+        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
+        <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
+        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
+
+         <!-- Dependencies -->
+         <script src="https://preview.babylonjs.com/ammo.js"></script>
+         <script src="https://preview.babylonjs.com/earcut.min.js"></script>
+         <script src="https://preview.babylonjs.com/recast.js"></script>
+         <script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script>
+         <script src="https://cdnjs.cloudflare.com/ajax/libs/oimo/1.0.9/oimo.min.js"></script>
+         <script src="https://preview.babylonjs.com/libktx.js"></script>
+ 
+         <!-- Extensions -->
+         <script
+             src="https://rawcdn.githack.com/BabylonJS/Extensions/f43ab677b4bca0a6ab77132d3f785be300382760/ClonerSystem/src/babylonx.cloner.js"
+             >
+         </script>
+         <script
+             src="https://rawcdn.githack.com/BabylonJS/Extensions/785013ec55b210d12263c91f3f0a2ae70cf0bc8a/CompoundShader/src/babylonx.CompoundShader.js"
+             ></script>
+ 
+         <!-- Scene Manager -->
+         <script
+             src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.manager.js">
+         </script>
+         <script
+             src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.navmesh.js">
+         </script>
+
+        <!-- Monaco -->
+        <script src="/node_modules/monaco-editor/dev/vs/loader.js"></script>
+
+        <!-- jQuery -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
+
+        <!-- Main scripts -->
+        <script src="/js/config_versions.js"></script>
+        <script src="/js/examples.js"></script>
+        <script src="/js/main.js"></script>
+        <script src="/js/menuPG.js"></script>
+        <script src="/js/monacoCreator.js"></script>
+        <script src="/js/settingsPG.js"></script>
+        <script src="/js/utils.js"></script>
+        <script src="/js/zipTool.js"></script>
+        <script src="/js/index.js"></script>
+    </body>
+
+</html>

Playground/old/js/libs/fileSaver.js

@@ -0,0 +1,253 @@
+/*! FileSaver.js
+ *  A saveAs() FileSaver implementation.
+ *  2014-01-24
+ *
+ *  By Eli Grey, http://eligrey.com
+ *  License: X11/MIT
+ *    See LICENSE.md
+ */
+
+/*global self */
+/*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */
+
+/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
+
+var saveAs = saveAs
+  // IE 10+ (native saveAs)
+  || (typeof navigator !== "undefined" &&
+      navigator.msSaveOrOpenBlob && navigator.msSaveOrOpenBlob.bind(navigator))
+  // Everyone else
+  || (function (view) {
+      "use strict";
+      // IE <10 is explicitly unsupported
+      if (typeof navigator !== "undefined" &&
+          /MSIE [1-9]\./.test(navigator.userAgent)) {
+          return;
+      }
+      var
+            doc = view.document
+            // only get URL when necessary in case BlobBuilder.js hasn't overridden it yet
+          , get_URL = function () {
+              return view.URL || view.webkitURL || view;
+          }
+          , URL = view.URL || view.webkitURL || view
+          , save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
+          , can_use_save_link = !view.externalHost && "download" in save_link
+          , click = function (node) {
+              var event = doc.createEvent("MouseEvents");
+              event.initMouseEvent(
+                  "click", true, false, view, 0, 0, 0, 0, 0
+                  , false, false, false, false, 0, null
+              );
+              node.dispatchEvent(event);
+          }
+          , webkit_req_fs = view.webkitRequestFileSystem
+          , req_fs = view.requestFileSystem || webkit_req_fs || view.mozRequestFileSystem
+          , throw_outside = function (ex) {
+              (view.setImmediate || view.setTimeout)(function () {
+                  throw ex;
+              }, 0);
+          }
+          , force_saveable_type = "application/octet-stream"
+          , fs_min_size = 0
+          , deletion_queue = []
+          , process_deletion_queue = function () {
+              var i = deletion_queue.length;
+              while (i--) {
+                  var file = deletion_queue[i];
+                  if (typeof file === "string") { // file is an object URL
+                      URL.revokeObjectURL(file);
+                  } else { // file is a File
+                      file.remove();
+                  }
+              }
+              deletion_queue.length = 0; // clear queue
+          }
+          , dispatch = function (filesaver, event_types, event) {
+              event_types = [].concat(event_types);
+              var i = event_types.length;
+              while (i--) {
+                  var listener = filesaver["on" + event_types[i]];
+                  if (typeof listener === "function") {
+                      try {
+                          listener.call(filesaver, event || filesaver);
+                      } catch (ex) {
+                          throw_outside(ex);
+                      }
+                  }
+              }
+          }
+          , FileSaver = function (blob, name) {
+              // First try a.download, then web filesystem, then object URLs
+              var
+                    filesaver = this
+                  , type = blob.type
+                  , blob_changed = false
+                  , object_url
+                  , target_view
+                  , get_object_url = function () {
+                      var object_url = get_URL().createObjectURL(blob);
+                      deletion_queue.push(object_url);
+                      return object_url;
+                  }
+                  , dispatch_all = function () {
+                      dispatch(filesaver, "writestart progress write writeend".split(" "));
+                  }
+                  // on any filesys errors revert to saving with object URLs
+                  , fs_error = function () {
+                      // don't create more object URLs than needed
+                      if (blob_changed || !object_url) {
+                          object_url = get_object_url(blob);
+                      }
+                      if (target_view) {
+                          target_view.location.href = object_url;
+                      } else {
+                          window.open(object_url, "_blank");
+                      }
+                      filesaver.readyState = filesaver.DONE;
+                      dispatch_all();
+                  }
+                  , abortable = function (func) {
+                      return function () {
+                          if (filesaver.readyState !== filesaver.DONE) {
+                              return func.apply(this, arguments);
+                          }
+                      };
+                  }
+                  , create_if_not_found = { create: true, exclusive: false }
+                  , slice
+              ;
+              filesaver.readyState = filesaver.INIT;
+              if (!name) {
+                  name = "download";
+              }
+              if (can_use_save_link) {
+                  object_url = get_object_url(blob);
+                  // FF for Android has a nasty garbage collection mechanism
+                  // that turns all objects that are not pure javascript into 'deadObject'
+                  // this means `doc` and `save_link` are unusable and need to be recreated
+                  // `view` is usable though:
+                  doc = view.document;
+                  save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a");
+                  save_link.href = object_url;
+                  save_link.download = name;
+                  var event = doc.createEvent("MouseEvents");
+                  event.initMouseEvent(
+                      "click", true, false, view, 0, 0, 0, 0, 0
+                      , false, false, false, false, 0, null
+                  );
+                  save_link.dispatchEvent(event);
+                  filesaver.readyState = filesaver.DONE;
+                  dispatch_all();
+                  return;
+              }
+              // Object and web filesystem URLs have a problem saving in Google Chrome when
+              // viewed in a tab, so I force save with application/octet-stream
+              // http://code.google.com/p/chromium/issues/detail?id=91158
+              if (view.chrome && type && type !== force_saveable_type) {
+                  slice = blob.slice || blob.webkitSlice;
+                  blob = slice.call(blob, 0, blob.size, force_saveable_type);
+                  blob_changed = true;
+              }
+              // Since I can't be sure that the guessed media type will trigger a download
+              // in WebKit, I append .download to the filename.
+              // https://bugs.webkit.org/show_bug.cgi?id=65440
+              if (webkit_req_fs && name !== "download") {
+                  name += ".download";
+              }
+              if (type === force_saveable_type || webkit_req_fs) {
+                  target_view = view;
+              }
+              if (!req_fs) {
+                  fs_error();
+                  return;
+              }
+              fs_min_size += blob.size;
+              req_fs(view.TEMPORARY, fs_min_size, abortable(function (fs) {
+                  fs.root.getDirectory("saved", create_if_not_found, abortable(function (dir) {
+                      var save = function () {
+                          dir.getFile(name, create_if_not_found, abortable(function (file) {
+                              file.createWriter(abortable(function (writer) {
+                                  writer.onwriteend = function (event) {
+                                      target_view.location.href = file.toURL();
+                                      deletion_queue.push(file);
+                                      filesaver.readyState = filesaver.DONE;
+                                      dispatch(filesaver, "writeend", event);
+                                  };
+                                  writer.onerror = function () {
+                                      var error = writer.error;
+                                      if (error.code !== error.ABORT_ERR) {
+                                          fs_error();
+                                      }
+                                  };
+                                  "writestart progress write abort".split(" ").forEach(function (event) {
+                                      writer["on" + event] = filesaver["on" + event];
+                                  });
+                                  writer.write(blob);
+                                  filesaver.abort = function () {
+                                      writer.abort();
+                                      filesaver.readyState = filesaver.DONE;
+                                  };
+                                  filesaver.readyState = filesaver.WRITING;
+                              }), fs_error);
+                          }), fs_error);
+                      };
+                      dir.getFile(name, { create: false }, abortable(function (file) {
+                          // delete file if it already exists
+                          file.remove();
+                          save();
+                      }), abortable(function (ex) {
+                          if (ex.code === ex.NOT_FOUND_ERR) {
+                              save();
+                          } else {
+                              fs_error();
+                          }
+                      }));
+                  }), fs_error);
+              }), fs_error);
+          }
+          , FS_proto = FileSaver.prototype
+          , saveAs = function (blob, name) {
+              return new FileSaver(blob, name);
+          }
+      ;
+      FS_proto.abort = function () {
+          var filesaver = this;
+          filesaver.readyState = filesaver.DONE;
+          dispatch(filesaver, "abort");
+      };
+      FS_proto.readyState = FS_proto.INIT = 0;
+      FS_proto.WRITING = 1;
+      FS_proto.DONE = 2;
+
+      FS_proto.error =
+      FS_proto.onwritestart =
+      FS_proto.onprogress =
+      FS_proto.onwrite =
+      FS_proto.onabort =
+      FS_proto.onerror =
+      FS_proto.onwriteend =
+          null;
+
+      view.addEventListener("unload", process_deletion_queue, false);
+      saveAs.unload = function () {
+          process_deletion_queue();
+          view.removeEventListener("unload", process_deletion_queue, false);
+      };
+      return saveAs;
+  }(
+	   typeof self !== "undefined" && self
+	|| typeof window !== "undefined" && window
+	|| this.content
+));
+// `self` is undefined in Firefox for Android content script context
+// while `this` is nsIContentFrameMessageManager
+// with an attribute `content` that corresponds to the window
+
+if (typeof module !== "undefined" && module !== null) {
+    module.exports = saveAs;
+} else if ((typeof define !== "undefined" && define !== null) && (define.amd != null)) {
+    define([], function () {
+        return saveAs;
+    });
+}

Playground/package.json

@@ -8,10 +8,7 @@
   },
   "readme": "https://github.com/BabylonJS/Babylon.js/blob/master/readme.md",
   "license": "(Apache-2.0)",
-  "devDependencies": {
+  "dependencies": {
     "monaco-editor": "~0.18.1"
-  },
-  "scripts": {
-    "test": "browser-sync start --server --files **/* --no-inject-changes --startPath index.html"
   }
 }