Merge branch 'master' into TexturePacker

.mergify.yml

@@ -0,0 +1,8 @@
+pull_request_rules:
+  - name: Automatic merge
+    conditions:
+      - label=automerge
+      - status-success=CI
+    actions:
+      merge:
+        method: merge

.vscode/settings.json

@@ -58,29 +58,5 @@
     },
     "editor.tabSize": 4,
     "typescript.tsdk": "node_modules\\typescript\\lib",
-    "typescript.preferences.importModuleSpecifier": "relative",
-    "workbench.colorCustomizations": {
-        "activityBar.background": "#3F3461",
-        "activityBar.foreground": "#d5d2ca",
-        "activityBarBadge.background": "#bb464b",
-        "titleBar.activeBackground": "#201936",
-        "panelTitle.activeForeground": "#d5d2ca",
-        "tab.activeBackground": "#bb464b",
-        "menubar.selectionBackground": "#bb464b",
-        "menubar.selectionForeground": "#ffffff",
-        "menu.background": "#2a2342",
-        "menu.selectionBackground": "#bb464b",
-        "dropdown.background": "#2a2342",
-        "dropdown.listBackground": "#2a2342",
-        "dropdown.border": "#3F3461",
-        "button.background": "#3F3461",
-        "button.foreground": "#d5d2ca",
-        "panel.border": "#3F3461",
-        "panelTitle.activeBorder": "#9379e6",
-        "statusBar.background": "#9379e6",
-        "focusBorder": "#3F3461",
-        "list.activeSelectionBackground": "#3F3461",
-        "textLink.foreground": "#3F3461",
-        "textLink.activeForeground": "#9379e6",
-    }
+    "typescript.preferences.importModuleSpecifier": "relative"
 }

Playground/debug.html

@@ -33,19 +33,19 @@
     <meta name="theme-color" content="#ffffff">
 
     <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
-    <link rel="stylesheet" href="css/index.css" />
-    <link rel="stylesheet" href="css/index_mobile.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="/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>
+    <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>
@@ -97,7 +97,7 @@
     <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.js"></script>
 
     <!-- Monaco -->
-    <script src="node_modules/monaco-editor/dev/vs/loader.js"></script>
+    <script src="/node_modules/monaco-editor/dev/vs/loader.js"></script>
 
     <!-- Extensions -->
     <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
@@ -108,23 +108,23 @@
     <!-- Big screens -->
     <div class="navbar navBar1280 languageJS">
         <div class="categoryTitle">
-            <img class="logo" src="css/img/logo_v4.svg">
+            <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">Typescript</div>
             <div class="buttonJStoTS languageJS" id="toJSbutton1280">Javascript</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="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">
@@ -171,14 +171,14 @@
                 <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 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">
+            <img class="logo" src="/css/img/logo_v4.svg">
             <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
         </div>
 
@@ -186,17 +186,17 @@
             <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="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>
 
@@ -245,42 +245,42 @@
                 <div class="toDisplay currentVersionDisplay" style="display: none">
                 </div>
             </div>
-            <div class="buttonPG select removeOnDiff"><img class="examplesButton" src="css/img/examplesButton.svg"></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="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 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>
+                            src="/css/img/inspectorButton.svg">Inspector</div>
                     <div class="option subSelect removeOnDiff">
-                        <img src="css/img/optionsButton.svg">
+                        <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="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="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>
@@ -303,21 +303,21 @@
                     <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
+                    <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="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>
+                            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
+                            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>
@@ -339,14 +339,14 @@
                 </div>
             </div>
             <div class="categoryTitle">
-                <img class="logo" src="css/img/logo_v4.svg">
+                <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">
+            <img id="switchWrapperCode" src="/css/img/codeButton.svg">
+            <img id="switchWrapperCanvas" src="/css/img/canvas3Dbutton.svg">
         </div>
     </div>
 
@@ -361,7 +361,7 @@
     </div>
     <div id="exampleList" class="javascript">
         <div id="exampleBanner" class="languageJS">
-            <h1>Examples<img id="examplesButtonClose" src="css/img/clearButton.svg"></h1>
+            <h1>Examples<img id="examplesButtonClose" src="/css/img/clearButton.svg"></h1>
         </div>
         <div class="horizontalSeparator"></div>
         <input id="filterBar" type="text" placeholder="Filter examples...">
@@ -378,9 +378,6 @@
         <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'>
@@ -397,7 +394,7 @@
 
     <div id="saveLayer" class="save-layer">
         <div class="save-form languageJS ">
-            <img id="saveFormButtonClose" src="css/img/clearButton.svg">
+            <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">
@@ -436,27 +433,27 @@
 
     <div id="waitDiv">
         <div id="logo-part">
-            <img src="css/img/v4.svg" id="waitLogo" />
-            <img src="css/img/spinner.svg" id="waitSpinner" />
+            <img src="/css/img/v4.svg" id="waitLogo" />
+            <img src="/css/img/spinner.svg" id="waitSpinner" />
         </div>
     </div>
 
     <!-- jQuery -->
-    <script src="js/libs/jquery.min.js"></script>
-    <script src="js/jquery.qrcode.js"></script>
-    <script src="js/qrcode.js"></script>
+    <script src="/js/libs/jquery.min.js"></script>
+    <script src="/js/jquery.qrcode.js"></script>
+    <script src="/js/qrcode.js"></script>
 
     <!-- Main scripts -->
-    <script src="js/config_versions.js"></script>
-    <script src="js/pbt.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>
+    <script src="/js/config_versions.js"></script>
+    <script src="/js/pbt.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/frame.html

@@ -1,103 +1,122 @@
 <!DOCTYPE html>
 <html>
 
-<!--
+    <!--
     The purpose of the Frame.html file is to ???
     // TO DO - Complete that
  -->
 
-<head>
-    <title>Babylon.js Playground</title>
-    <meta charset='utf-8' />
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
-    <link rel="shortcut icon" href="https://www.babylonjs.com/img/favicon/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/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/inspector/babylon.inspector.bundle.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://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
-    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.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>
+    <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/img/favicon/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/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/inspector/babylon.inspector.bundle.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>
+
+        <!-- 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>
-    </div>
 
-    <!-- jQuery -->
-    <script src="https://code.jquery.com/jquery.js"></script>
-    
-    <script src="js/frame.js"></script>
-</body>
+        <!-- jQuery -->
+        <script src="https://code.jquery.com/jquery.min.js"></script>
+
+        <script src="/js/frame.js"></script>
+    </body>
 
 </html>

Playground/full.html

@@ -1,43 +1,58 @@
 <!DOCTYPE html>
 <html>
 
-<head>
-    <title>Babylon.js Playground</title>
-    <link rel="shortcut icon" href="https://www.babylonjs.com/img/favicon/favicon.ico">
-    <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
-    <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
-    <meta name="theme-color" content="#ffffff">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
+    <head>
+        <title>Babylon.js Playground</title>
+        <link rel="shortcut icon" href="https://www.babylonjs.com/img/favicon/favicon.ico">
+        <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
+        <meta name="msapplication-TileColor" content="#ffffff">
+        <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
+        <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
+        <meta name="theme-color" content="#ffffff">
+        <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>
-    <!-- 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/babylon.js"></script>
-    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
-    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.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://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/babylon.js"></script>
+        <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
+        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.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>
 
+        <!-- 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>
 
-    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
-    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.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.js"></script>
-    <script src="js/frame.js"></script>
-</body>
+    <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/index-local.html

@@ -14,19 +14,19 @@
     <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="css/index.css" />
-    <link rel="stylesheet" href="css/index_mobile.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="/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>
+    <script src="/js/libs/jszip.min.js"></script>
+    <script src="/js/libs/fileSaver.js"></script>
 
     <!-- Dependencies -->
     <script src="../dist/preview%20release/ammo.js"></script>
@@ -44,23 +44,23 @@
     <!-- Big screens -->
     <div class="navbar navBar1280 languageJS">
         <div class="categoryTitle">
-            <img class="logo" src="css/img/logo_v4.svg">
+            <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">Typescript</div>
             <div class="buttonJStoTS languageJS" id="toJSbutton1280" title="Switch to JavaScript">Javascript</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="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">
@@ -107,14 +107,14 @@
                 <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 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">
+            <img class="logo" src="/css/img/logo_v4.svg">
             <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
         </div>
 
@@ -122,17 +122,17 @@
             <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="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>
 
@@ -181,42 +181,42 @@
                 <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 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="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 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>
+                            src="/css/img/inspectorButton.svg">Inspector</div>
                     <div class="option subSelect removeOnDiff">
-                        <img src="css/img/optionsButton.svg">
+                        <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="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="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>
@@ -239,21 +239,21 @@
                     <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
+                    <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="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>
+                            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
+                            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>
@@ -275,14 +275,14 @@
                 </div>
             </div>
             <div class="categoryTitle">
-                <img class="logo" src="css/img/logo_v4.svg">
+                <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">
+            <img id="switchWrapperCode" src="/css/img/codeButton.svg">
+            <img id="switchWrapperCanvas" src="/css/img/canvas3Dbutton.svg">
         </div>
     </div>
 
@@ -297,7 +297,7 @@
     </div>
     <div id="exampleList" class="javascript">
         <div id="exampleBanner" class="languageJS">
-            <h1>Examples<img id="examplesButtonClose" src="css/img/clearButton.svg"></h1>
+            <h1>Examples<img id="examplesButtonClose" src="/css/img/clearButton.svg"></h1>
         </div>
         <div class="horizontalSeparator"></div>
         <input id="filterBar" type="text" placeholder="Filter examples...">
@@ -333,7 +333,7 @@
 
     <div id="saveLayer" class="save-layer">
         <div class="save-form languageJS ">
-            <img id="saveFormButtonClose" src="css/img/clearButton.svg">
+            <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">
@@ -372,31 +372,31 @@
 
     <div id="waitDiv">
         <div id="logo-part">
-            <img src="css/img/v4.svg" id="waitLogo" />
-            <img src="css/img/spinner.svg" id="waitSpinner" />
+            <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="js/jquery.qrcode.js"></script>
-    <script src="js/qrcode.js"></script>
+    <script src="/js/jquery.qrcode.js"></script>
+    <script src="/js/qrcode.js"></script>
 
     <!-- jQuery -->
-    <script src="js/libs/jquery.min.js"></script>
-    <script src="js/jquery.qrcode.js"></script>
-    <script src="js/qrcode.js"></script>
+    <script src="/js/libs/jquery.min.js"></script>
+    <script src="/js/jquery.qrcode.js"></script>
+    <script src="/js/qrcode.js"></script>
 
     <!-- Main scripts -->
-    <script src="js/config_versions.js"></script>
-    <script src="js/pbt.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/config_versions.js"></script>
+    <script src="/js/pbt.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

Playground/index.html

@@ -1,410 +1,453 @@
 <!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">
-
-    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
-    <link rel="stylesheet" href="css/index.css" />
-    <link rel="stylesheet" href="css/index_mobile.css" />
-
-    <!-- Pep -->
-    <script src="js/libs/pep.min.js"></script>
-    <!-- For canvas/code separator -->
-    <script src="js/libs/split.js"></script>
-
-    <!-- DatGUI -->
-    <script src="js/libs/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/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/inspector/babylon.inspector.bundle.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>
-
-    <!-- Monaco -->
-    <script src="node_modules/monaco-editor/dev/vs/loader.js"></script>
-
-    <!-- Extensions -->
-    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js" async></script>
-    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"
-        async></script>
-
-    <!-- Scene Manager -->
-    <script src="https://mackeyk24.github.io/toolkit/babylon.manager.js"></script>
-    <script src="https://mackeyk24.github.io/toolkit/babylon.navmesh.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>
+    <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">
+        <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="/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" title="Switch to TypeScript">Typescript</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton1280" title="Switch to JavaScript">Javascript</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 class="category languageJS" id="JStoTSbar">
+                <div class="buttonJStoTS languageTS" id="toTSbutton1280" title="Switch to TypeScript">Typescript</div>
+                <div class="buttonJStoTS languageJS" id="toJSbutton1280" title="Switch to JavaScript">Javascript</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>
-                    <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 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>
-                    <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="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 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="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 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 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 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>
+        <!-- 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="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 class="toDisplaySub">
+                                <div class="option selected" id="darkTheme1024">Dark</div>
+                                <div class="option" id="lightTheme1024">Light</div>
+                            </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 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>
-                    <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="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 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="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 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 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 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">
+
+        <!-- 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>
-                    <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 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>
-                    <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 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>
-                    <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="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 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="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 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://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 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 id="switchWrapper" class="languageJS removeOnDiff">
+                <img id="switchWrapperCode" src="/css/img/codeButton.svg">
+                <img id="switchWrapperCanvas" src="/css/img/canvas3Dbutton.svg">
+            </div>
         </div>
-    </div>
 
-    <!-- Common things -->
+        <!-- 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="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/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 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 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 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="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+        </div>
+
+        <div class="fpsLabel languageJS" id="fpsLabel"></div>
+
+        <div id="errorZone">
         </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 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>
 
-    <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">
+        <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>
 
-            <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="saveFormButtons">
+                    <div id="saveFormButtonOk">OK</div>
+                    <div id="saveFormButtonCancel">Cancel</div>
+                </div>
+            </div>
+        </div>
 
-            <div class="save-form-buttons" id="diffFormButtons">
-                <div id="diffFormButtonOk">OK</div>
-                <div id="diffFormButtonCancel">Cancel</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>
 
-    <div id="waitDiv">
-        <div id="logo-part">
-            <img src="css/img/v4.svg" id="waitLogo" />
-            <img src="css/img/spinner.svg" id="waitSpinner" />
+        <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>
-    </div>
-
-    <!-- jQuery -->
-    <script src="js/libs/jquery.min.js"></script>
-    <script src="js/jquery.qrcode.js"></script>
-    <script src="js/qrcode.js"></script>
-
-    <!-- Main scripts -->
-    <script src="js/config_versions.js"></script>
-    <script src="js/pbt.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>
+
+
+        <!-- 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>
+
+        <!-- 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/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/inspector/babylon.inspector.bundle.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>
+
+        <!-- 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>
+
+        <!-- jQuery -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+        <script src="/js/jquery.qrcode.js"></script>
+        <script src="/js/qrcode.js"></script>
+
+        <!-- Main scripts -->
+        <script src="/js/config_versions.js"></script>
+        <script src="/js/pbt.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/indexStable.html

@@ -1,394 +1,431 @@
 <!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/img/favicon/favicon.ico">
-
-    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
-    <link rel="stylesheet" href="css/index.css" />
-    <link rel="stylesheet" href="css/index_mobile.css" />
-
-    <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
-    <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
-    <meta name="theme-color" content="#ffffff">
-
-    <!-- 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="https://cdn.babylonjs.com/ammo.js"></script>
-    <script src="https://cdn.babylonjs.com/cannon.js"></script>
-    <script src="https://cdn.babylonjs.com/Oimo.js"></script>
-    <script src="https://cdn.babylonjs.com/gltf_validator.js"></script>
-    <script src="https://cdn.babylonjs.com/earcut.min.js"></script>
-    <!-- Babylon.js -->
-    <script src="https://cdn.babylonjs.com/babylon.js"></script>
-    <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
-    <script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
-    <script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
-    <script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
-    <script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
-    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>
-    <script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
-
-    <!-- Monaco -->
-    <script src="node_modules/monaco-editor/dev/vs/loader.js"></script>
-
-    <!-- Extensions -->
-    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.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>
+    <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/img/favicon/favicon.ico">
+
+        <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
+        <link rel="stylesheet" href="/css/index.css" />
+        <link rel="stylesheet" href="/css/index_mobile.css" />
+
+        <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
+        <meta name="msapplication-TileColor" content="#ffffff">
+        <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
+        <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
+        <meta name="theme-color" content="#ffffff">
+    </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">Typescript</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton1280" title="Switch to JavaScript">Javascript</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 class="category languageJS" id="JStoTSbar">
+                <div class="buttonJStoTS languageTS" id="toTSbutton1280" title="Switch to TypeScript">Typescript</div>
+                <div class="buttonJStoTS languageJS" id="toJSbutton1280" title="Switch to JavaScript">Javascript</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>
-                    <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 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>
-                    <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="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 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="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 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="button select">
-                <span id="currentVersion1280"></span>
-                <div class="toDisplay currentVersionDisplay" style="display: none"></div>
+            <div class="category right">
+                <div class="button select">
+                    <span id="currentVersion1280"></span>
+                    <div class="toDisplay currentVersionDisplay" style="display: none"></div>
+                </div>
+                <div class="button select"><img class="examplesButton" src="/css/img/examplesButton.svg"></div>
             </div>
-            <div class="button select"><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>
+        <!-- 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 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>
-                    <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 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>
-                    <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="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 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="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 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="button select">
-                <span id="currentVersion1024"></span>
-                <div class="toDisplay currentVersionDisplay" style="display: none">
+            <div class="category right">
+                <div class="button select">
+                    <span id="currentVersion1024"></span>
+                    <div class="toDisplay currentVersionDisplay" style="display: none">
+                    </div>
                 </div>
+                <div class="button select"><img class="examplesButton" src="/css/img/examplesButton.svg"></div>
             </div>
-            <div class="button select"><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="button 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" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>
-                    <div class="option noSubSelect" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>
-                    <div class="option noSubSelect" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download
-                    </div>
-                    <div class="option noSubSelect" id="newButtonMobile"><img src="css/img/newButton.svg">New</div>
-                    <div class="option noSubSelect" id="clearButtonMobile"><img src="css/img/clearButton.svg">Clear
-                    </div>
-                    <div class="option noSubSelect" id="debugButtonMobile"><img
-                            src="css/img/inspectorButton.svg">Inspector</div>
-                    <div class="option subSelect">
-                        <img src="css/img/optionsButton.svg">
-                        Version<div id="currentVersionMobile"></div>
-                        <div class="toDisplaySub currentVersionDisplay">
+
+        <!-- Mobile -->
+        <div class="navbar navBarMobile languageJS">
+            <div class="category languageJS" id="JStoTSbar">
+                <div class="button 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" id="runButtonMobile"><img src="/css/img/playButton.svg">Run
                         </div>
-                    </div>
-                    <div class="option subSelect"><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 class="option noSubSelect" id="saveButtonMobile"><img src="/css/img/saveButton.svg">Save
                         </div>
-                    </div>
-                    <div class="option subSelect"><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 class="option noSubSelect" id="zipButtonMobile"><img
+                                src="/css/img/downloadButton.svg">Download
                         </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="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" 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 class="option noSubSelect" id="newButtonMobile"><img src="/css/img/newButton.svg">New</div>
+                        <div class="option noSubSelect" id="clearButtonMobile"><img src="/css/img/clearButton.svg">Clear
                         </div>
-                    </div> -->
-                    <div class="option nosubselect" id="metadataButtonMobile"><img
-                            src="css/img/metadataButton.svg">Metadata</div>
-                    <div class="option nosubselect"><img class="examplesButton"
-                            src="css/img/examplesButton.svg">Examples</div>
-                    <div class="option subSelect"><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 class="option noSubSelect" id="debugButtonMobile"><img
+                                src="/css/img/inspectorButton.svg">Inspector</div>
+                        <div class="option subSelect">
+                            <img src="/css/img/optionsButton.svg">
+                            Version<div id="currentVersionMobile"></div>
+                            <div class="toDisplaySub currentVersionDisplay">
                             </div>
-                            <div class="option link">
-                                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
+                        </div>
+                        <div class="option subSelect"><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 class="option link">
-                                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
+                        </div>
+                        <div class="option subSelect"><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 class="option link">
-                                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
+                        </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="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" 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" id="metadataButtonMobile"><img
+                                src="/css/img/metadataButton.svg">Metadata</div>
+                        <div class="option nosubselect"><img class="examplesButton"
+                                src="/css/img/examplesButton.svg">Examples</div>
+                        <div class="option subSelect"><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 class="categoryTitle">
-                <img class="logo" src="css/img/logo_v4.svg">
-                <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
+
+            <div id="switchWrapper" class="languageJS">
+                <img id="switchWrapperCode" src="/css/img/codeButton.svg">
+                <img id="switchWrapperCanvas" src="/css/img/canvas3Dbutton.svg">
             </div>
         </div>
 
-        <div id="switchWrapper" class="languageJS">
-            <img id="switchWrapperCode" src="css/img/codeButton.svg">
-            <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">
+        <!-- Common things -->
+
+        <div class="wrapper">
+            <div id="jsEditor"></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="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
         </div>
-    </div>
 
-    <!-- Common things -->
+        <div class="fpsLabel languageJS" id="fpsLabel"></div>
 
-    <div class="wrapper">
-        <div id="jsEditor"></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 id="errorZone">
         </div>
-        <div class="horizontalSeparator"></div>
-        <input id="filterBar" type="text" placeholder="Filter examples...">
-        <img id="filterBarClear"
-            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/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 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>
-
-    <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 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>
 
-    <div id="waitDiv">
-        <div id="logo-part">
-            <img src="css/img/v4.svg" id="waitLogo" />
-            <img src="css/img/spinner.svg" id="waitSpinner" />
+        <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>
-    </div>
-
-    <!-- jQuery -->
-    <script src="https://code.jquery.com/jquery.js"></script>
-    <script src="js/jquery.qrcode.js"></script>
-    <script src="js/qrcode.js"></script>
-
-    <!-- TO DO - Why is this a split here ? It's already in the JS code (index.js) -->
-    <script>
-        Split(['#jsEditor', '#canvasZone']);
-    </script>
-
-    <!-- Main scripts -->
-    <script src="js/config_versions.js"></script>
-    <script src="js/pbt.js"></script>
-    <script src="js/libs/typescript.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>
+
+        <!-- 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="https://cdn.babylonjs.com/ammo.js"></script>
+        <script src="https://cdn.babylonjs.com/cannon.js"></script>
+        <script src="https://cdn.babylonjs.com/Oimo.js"></script>
+        <script src="https://cdn.babylonjs.com/gltf_validator.js"></script>
+        <script src="https://cdn.babylonjs.com/earcut.min.js"></script>
+        <!-- Babylon.js -->
+        <script src="https://cdn.babylonjs.com/babylon.js"></script>
+        <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
+        <script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
+        <script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
+        <script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
+        <script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
+        <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>
+        <script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
+
+        <!-- Monaco -->
+        <script src="/node_modules/monaco-editor/dev/vs/loader.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>
+
+        <!-- jQuery -->
+        <script src="https://code.jquery.com/jquery.min.js"></script>
+        <script src="/js/jquery.qrcode.js"></script>
+        <script src="/js/qrcode.js"></script>
+
+        <!-- TO DO - Why is this a split here ? It's already in the JS code (index.js) -->
+        <script>
+            Split(['#jsEditor', '#canvasZone']);
+        </script>
+
+        <!-- Main scripts -->
+        <script src="/js/config_versions.js"></script>
+        <script src="/js/pbt.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/indexWebGPU.html

@@ -8,19 +8,19 @@
     <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="css/index.css" />
-    <link rel="stylesheet" href="css/index_mobile.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/index_mobile.css" />
 
     <!-- Pep -->
-    <script src="js/libs/pep.min.js"></script>
+    <script src="/js/libs/pep.min.js"></script>
     <!-- For canvas/code separator -->
-    <script src="js/libs/split.js"></script>
+    <script src="/js/libs/split.js"></script>
 
     <!-- DatGUI -->
-    <script src="js/libs/dat.gui.min.js"></script>
+    <script src="/js/libs/dat.gui.min.js"></script>
     <!-- jszip -->
-    <script src="js/libs/jszip.min.js"></script>
-    <script src="js/libs/fileSaver.js"></script>
+    <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>
@@ -30,7 +30,7 @@
     <script src="https://preview.babylonjs.com/earcut.min.js"></script>
     <!-- Babylon.js -->
     <script src="https://preview.babylonjs.com/glslang/glslang.js"></script>
-    <script src="js/babylonWebGpu.max.js"></script>
+    <script src="/js/babylonWebGpu.max.js"></script>
     <!-- <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script> -->
     <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
     <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
@@ -41,7 +41,7 @@
     <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
 
     <!-- Monaco -->
-    <script src="node_modules/monaco-editor/dev/vs/loader.js"></script>
+    <script src="/node_modules/monaco-editor/dev/vs/loader.js"></script>
 
     <!-- Extensions -->
     <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js" async></script>
@@ -57,23 +57,23 @@
     <!-- Big screens -->
     <div class="navbar navBar1280 languageJS">
         <div class="categoryTitle">
-            <img class="logo" src="css/img/logo_v4.svg">
+            <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">Typescript</div>
             <div class="buttonJStoTS languageJS" id="toJSbutton1280" title="Switch to JavaScript">Javascript</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="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">
@@ -120,14 +120,14 @@
                 <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 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">
+            <img class="logo" src="/css/img/logo_v4.svg">
             <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
         </div>
 
@@ -135,17 +135,17 @@
             <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 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="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>
 
@@ -194,39 +194,39 @@
                 <div class="toDisplay currentVersionDisplay" style="display: none">
                 </div>
             </div>
-            <div class="buttonPG select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+            <div class="buttonPG select"><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="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" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>
-                    <div class="option noSubSelect" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>
-                    <div class="option noSubSelect" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download
+                    <div class="option noSubSelect run" id="runButtonMobile"><img src="/css/img/playButton.svg">Run</div>
+                    <div class="option noSubSelect" id="saveButtonMobile"><img src="/css/img/saveButton.svg">Save</div>
+                    <div class="option noSubSelect" id="zipButtonMobile"><img src="/css/img/downloadButton.svg">Download
                     </div>
-                    <div class="option noSubSelect" id="newButtonMobile"><img src="css/img/newButton.svg">New</div>
-                    <div class="option noSubSelect" id="clearButtonMobile"><img src="css/img/clearButton.svg">Clear
+                    <div class="option noSubSelect" id="newButtonMobile"><img src="/css/img/newButton.svg">New</div>
+                    <div class="option noSubSelect" id="clearButtonMobile"><img src="/css/img/clearButton.svg">Clear
                     </div>
                     <div class="option noSubSelect" id="debugButtonMobile"><img
-                            src="css/img/inspectorButton.svg">Inspector</div>
+                            src="/css/img/inspectorButton.svg">Inspector</div>
                     <div class="option subSelect">
-                        <img src="css/img/optionsButton.svg">
+                        <img src="/css/img/optionsButton.svg">
                         <div id="currentVersionMobile"></div>
                         <div class="toDisplaySub currentVersionDisplay">
                         </div>
                     </div>
-                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
+                    <div class="option subSelect"><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"><img src="css/img/optionsButton.svg">Font size
+                    <div class="option subSelect"><img src="/css/img/optionsButton.svg">Font size
                         <div class="toDisplaySub displayFontSize">
                             <div class="option">8</div>
                             <div class="option">10</div>
@@ -249,21 +249,21 @@
                     <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile"
                         style="display: none">Editor
                         Fullscreen</div>
-                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format
+                    <div class="option nosubselect" 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="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" id="metadataButtonMobile"><img
-                            src="css/img/metadataButton.svg">Metadata</div>
+                            src="/css/img/metadataButton.svg">Metadata</div>
                     <div class="option nosubselect"><img class="examplesButton"
-                            src="css/img/examplesButton.svg">Examples</div>
-                    <div class="option subSelect"><img src="css/img/examplesButton.svg">Links / Tools
+                            src="/css/img/examplesButton.svg">Examples</div>
+                    <div class="option subSelect"><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>
@@ -285,14 +285,14 @@
                 </div>
             </div>
             <div class="categoryTitle">
-                <img class="logo" src="css/img/logo_v4.svg">
+                <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">
-            <img id="switchWrapperCode" src="css/img/codeButton.svg">
-            <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">
+            <img id="switchWrapperCode" src="/css/img/codeButton.svg">
+            <img id="switchWrapperCanvas" src="/css/img/canvas3Dbutton.svg">
         </div>
     </div>
 
@@ -306,7 +306,7 @@
     </div>
     <div id="exampleList" class="javascript">
         <div id="exampleBanner" class="languageJS">
-            <h1>Examples<img id="examplesButtonClose" src="css/img/clearButton.svg"></h1>
+            <h1>Examples<img id="examplesButtonClose" src="/css/img/clearButton.svg"></h1>
         </div>
         <div class="horizontalSeparator"></div>
         <input id="filterBar" type="text" placeholder="Filter examples...">
@@ -342,7 +342,7 @@
 
     <div id="saveLayer" class="save-layer">
         <div class="save-form languageJS ">
-            <img id="saveFormButtonClose" src="css/img/clearButton.svg">
+            <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">
@@ -364,29 +364,29 @@
 
     <div id="waitDiv">
         <div id="logo-part">
-            <img src="css/img/v4.svg" id="waitLogo" />
-            <img src="css/img/spinner.svg" id="waitSpinner" />
+            <img src="/css/img/v4.svg" id="waitLogo" />
+            <img src="/css/img/spinner.svg" id="waitSpinner" />
         </div>
     </div>
 
     <!-- jQuery -->
-    <script src="js/libs/jquery.min.js"></script>
-    <script src="js/jquery.qrcode.js"></script>
-    <script src="js/qrcode.js"></script>
+    <script src="/js/libs/jquery.min.js"></script>
+    <script src="/js/jquery.qrcode.js"></script>
+    <script src="/js/qrcode.js"></script>
 
     <!-- Main scripts -->
-    <script src="js/config_versions.js"></script>
-    <script src="js/pbt.js"></script>
-    <script src="js/libs/typescript.js"></script>
-    <script src="js/examples.js"></script>
-    <!-- <script src="js/main.js"></script> -->
-    <script src="js/mainWebGPU.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>
+    <script src="/js/config_versions.js"></script>
+    <script src="/js/pbt.js"></script>
+    <script src="/js/libs/typescript.js"></script>
+    <script src="/js/examples.js"></script>
+    <!-- <script src="/js/main.js"></script> -->
+    <script src="/js/mainWebGPU.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/js/examples.js

@@ -85,6 +85,11 @@ class Examples {
 
         this.fpsLabel.style.display = 'none';
         this.toggleExamplesButtons.call(this, true);
+        this.exampleList.querySelectorAll("img").forEach(function(img) {
+            if(!img.src) {
+                img.src = img.getAttribute("data-src");
+            }
+        })
     };
 
     /**

Playground/js/frame.js

@@ -1,9 +1,8 @@
-
-var engine = null;
+var engine = null;
 var canvas = null;
 var scene = null;
 
-fastEval = function(code) {
+fastEval = function (code) {
     var head = document.getElementsByTagName('head')[0];
     var script = document.createElement('script');
     script.setAttribute('type', 'text/javascript');
@@ -16,11 +15,11 @@ fastEval = function(code) {
     head.appendChild(script);
 }
 
-handleException = function(e) {
+handleException = function (e) {
     console.error(e);
 }
 
-run = function() {
+run = function () {
     var snippetUrl = "https://snippet.babylonjs.com";
     var fpsLabel = document.getElementById("fpsLabel");
     var refreshAnchor = document.getElementById("refresh");
@@ -40,7 +39,7 @@ run = function() {
 
     BABYLON.Engine.ShadersRepository = "/src/Shaders/";
 
-    compileAndRun = function(code) {
+    compileAndRun = function (code) {
         try {
 
             if (!BABYLON.Engine.isSupported()) {
@@ -56,7 +55,10 @@ run = function() {
             canvas = document.getElementById("renderCanvas");
 
             createDefaultEngine = function () {
-                return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
+                return new BABYLON.Engine(canvas, true, {
+                    preserveDrawingBuffer: true,
+                    stencil: true
+                });
             }
 
             if (code.indexOf("createEngine") !== -1) {
@@ -118,20 +120,20 @@ run = function() {
                 }
 
                 fpsLabel.innerHTML = engine.getFps().toFixed() + " fps";
-            }.bind(this));         
+            }.bind(this));
 
         } catch (e) {
             // showError(e.message);
         }
     };
-    window.addEventListener("resize", function() {
+    window.addEventListener("resize", function () {
         if (engine) {
             engine.resize();
         }
     });
 
     // UI
-    var cleanHash = function() {
+    var cleanHash = function () {
         var splits = decodeURIComponent(location.hash.substr(1)).split("#");
 
         if (splits.length > 2) {
@@ -141,13 +143,13 @@ run = function() {
         location.hash = splits.join("#");
     };
 
-    var checkHash = function() {
+    var checkHash = function () {
         if (location.hash) {
             cleanHash();
 
             try {
                 var xmlHttp = new XMLHttpRequest();
-                xmlHttp.onreadystatechange = function() {
+                xmlHttp.onreadystatechange = function () {
                     if (xmlHttp.readyState === 4) {
                         if (xmlHttp.status === 200) {
                             var snippetCode = JSON.parse(JSON.parse(xmlHttp.responseText).jsonPayload).code;
@@ -156,7 +158,7 @@ run = function() {
                             var refresh = document.getElementById("refresh");
 
                             if (refresh) {
-                                refresh.addEventListener("click", function() {
+                                refresh.addEventListener("click", function () {
                                     compileAndRun(snippetCode);
                                 });
                             }
@@ -186,4 +188,4 @@ run = function() {
 
 }
 
-run();
+run();

Playground/js/monacoCreator.js

@@ -71,7 +71,7 @@ class MonacoCreator {
 
         this.setupDefinitionWorker(libContent);
 
-        require.config({ paths: { 'vs': 'node_modules/monaco-editor/dev/vs' } });
+        require.config({ paths: { 'vs': '/node_modules/monaco-editor/dev/vs' } });
 
         require(['vs/editor/editor.main'], () => {
             this.setupMonacoCompilationPipeline(libContent);
@@ -86,12 +86,26 @@ class MonacoCreator {
     };
 
     setupDefinitionWorker(libContent) {
-        this.definitionWorker = new Worker('js/definitionWorker.js');
+
+        // This worker can be initialized differently.
+        // Its main job is to analyze the code and return an array of deprecated functions
+        this.definitionWorker = new Worker('/js/definitionWorker.js');
         this.definitionWorker.addEventListener('message', ({ data }) => {
             this.deprecatedCandidates = data.result;
             this.analyzeCode();
         });
         this.definitionWorker.postMessage({ code: libContent });
+        // this.deprecatedCandidates = [
+        //     "FromFloatArray",
+        //     "FromFloatArrayToRef",
+        //     "getStrideSize",
+        //     "getStrideSize",
+        //     "getOffset",
+        //     "rgb",
+        //     "xy",
+        //     "xyz",
+        //     "fieldOfView"
+        //   ];
     }
 
     isDeprecatedEntry(details) {

Playground/package.json

@@ -13,8 +13,5 @@
   },
   "scripts": {
     "test": "browser-sync start --server --files **/* --no-inject-changes --startPath index.html"
-  },
-  "dependencies": {
-    "npm": "^6.13.0"
   }
 }

Tools/Gulp/tasks/gulpTasks-localRun.js

@@ -19,14 +19,41 @@ var skipExtensions = [".js", ".glb", ".gltf", ".bin", ".html", ".gif", ".jpg", "
 /**
  * Embedded webserver for test convenience.
  */
-gulp.task("webserver", function() {
+gulp.task("webserver", function () {
     var rootRelativePath = "../../";
     var options = {
         root: rootRelativePath,
         port: 1338,
         livereload: false,
-        middleware: function(connect, opt) {
+        middleware: function (connect, opt) {
             return [function (req, res, next) {
+                const baseUrl =  (req.url.indexOf('dist') !== -1 || req.url.indexOf('Tools') !== -1  || req.url.indexOf('temp/') !== -1);
+                if (!baseUrl && req.headers['referer'] && req.headers['referer'].indexOf('/Playground/') !== -1 && req.url.indexOf('/Playground/') === -1) {
+                    req.url = "/Playground/" + req.url;
+                    res.writeHead(301, {
+                        'Location': req.url
+                    });
+                    return res.end();
+                }
+                const pgMath = req.url.match(/\/Playground\/pg\/(.*)/);
+                if (pgMath) {
+                    const isAFile = req.url.indexOf('.') !== -1;
+                    const withRevision = req.url.match(/\/pg\/(.*)\/revision\/(\d*)/);
+                    if (withRevision) {
+                        revision = withRevision[2];
+                        if (isAFile) {
+                            req.url = req.url.replace(/\/pg\/(.*)\/revision\//gi, "/")
+                        } else {
+                            req.url = req.url.replace(/\/pg\/(.*)\/revision\/(\d*)/gi, "/?pg=$1&revision=$2")
+                        }
+                    } else {
+                        if (isAFile) {
+                            req.url = req.url.replace(/\/pg\//gi, "/")
+                        } else {
+                            req.url = req.url.replace(/\/pg\/(.*)/gi, "/?pg=$1")
+                        }
+                    }
+                }
                 var extension = path.extname(decodeURIComponent(req.originalUrl));
                 if (req.originalUrl.indexOf(config.build.localDevES6FolderName) > -1 && skipExtensions.indexOf(extension) === -1) {
                     // Append .js for es6 modules.
@@ -35,8 +62,7 @@ gulp.task("webserver", function() {
                     }
                 }
                 next();
-              }
-            ]
+            }]
         }
     };
 

dist/preview release/babylon.d.ts

@@ -579,17 +579,6 @@ declare module BABYLON {
     }
 }
 declare module BABYLON {
-    /**
-     * @hidden
-     **/
-    export class _TimeToken {
-        _startTimeQuery: Nullable<WebGLQuery>;
-        _endTimeQuery: Nullable<WebGLQuery>;
-        _timeElapsedQuery: Nullable<WebGLQuery>;
-        _timeElapsedQueryEnded: boolean;
-    }
-}
-declare module BABYLON {
     /** Defines the cross module used constants to avoid circular dependncies */
     export class Constants {
         /** Defines that alpha blending is disabled */
@@ -17992,8 +17981,9 @@ declare module BABYLON {
         /**
          * Parse properties from a JSON object
          * @param serializationObject defines the JSON object
+         * @param scene defines the hosting scene
          */
-        parse(serializationObject: any): void;
+        parse(serializationObject: any, scene: Scene): void;
     }
 }
 declare module BABYLON {
@@ -18681,6 +18671,84 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
+     * Particle emitter emitting particles from the inside of a box.
+     * It emits the particles randomly between 2 given directions.
+     */
+    export class MeshParticleEmitter implements IParticleEmitterType {
+        /** Defines the mesh to use as source */
+        mesh?: AbstractMesh | undefined;
+        private _indices;
+        private _positions;
+        private _normals;
+        private _storedNormal;
+        /**
+         * Random direction of each particle after it has been emitted, between direction1 and direction2 vectors.
+         */
+        direction1: Vector3;
+        /**
+         * Random direction of each particle after it has been emitted, between direction1 and direction2 vectors.
+         */
+        direction2: Vector3;
+        /**
+         * Gets or sets a boolean indicating that particle directions must be built from mesh face normals
+         */
+        useMeshNormalsForDirection: boolean;
+        /**
+         * Creates a new instance MeshParticleEmitter
+         * @param mesh defines the mesh to use as source
+         */
+        constructor(
+        /** Defines the mesh to use as source */
+        mesh?: AbstractMesh | undefined);
+        /**
+         * Called by the particle System when the direction is computed for the created particle.
+         * @param worldMatrix is the world matrix of the particle system
+         * @param directionToUpdate is the direction vector to update with the result
+         * @param particle is the particle we are computed the direction for
+         */
+        startDirectionFunction(worldMatrix: Matrix, directionToUpdate: Vector3, particle: Particle): void;
+        /**
+         * Called by the particle System when the position is computed for the created particle.
+         * @param worldMatrix is the world matrix of the particle system
+         * @param positionToUpdate is the position vector to update with the result
+         * @param particle is the particle we are computed the position for
+         */
+        startPositionFunction(worldMatrix: Matrix, positionToUpdate: Vector3, particle: Particle): void;
+        /**
+         * Clones the current emitter and returns a copy of it
+         * @returns the new emitter
+         */
+        clone(): MeshParticleEmitter;
+        /**
+         * Called by the GPUParticleSystem to setup the update shader
+         * @param effect defines the update shader
+         */
+        applyToShader(effect: Effect): void;
+        /**
+         * Returns a string to use to update the GPU particles update shader
+         * @returns a string containng the defines string
+         */
+        getEffectDefines(): string;
+        /**
+         * Returns the string "BoxParticleEmitter"
+         * @returns a string containing the class name
+         */
+        getClassName(): string;
+        /**
+         * Serializes the particle system to a JSON object.
+         * @returns the JSON object
+         */
+        serialize(): any;
+        /**
+         * Parse properties from a JSON object
+         * @param serializationObject defines the JSON object
+         * @param scene defines the hosting scene
+         */
+        parse(serializationObject: any, scene: Scene): void;
+    }
+}
+declare module BABYLON {
+    /**
      * Interface representing a particle system in Babylon.js.
      * This groups the common functionalities that needs to be implemented in order to create a particle system.
      * A particle system represents a way to manage particles from their emission to their animation and rendering.
@@ -38221,6 +38289,13 @@ declare module BABYLON {
          */
         pinchDeltaPercentage: number;
         /**
+         * When useNaturalPinchZoom is true, multi touch zoom will zoom in such
+         * that any object in the plane at the camera's target point will scale
+         * perfectly with finger motion.
+         * Overrides pinchDeltaPercentage and pinchPrecision.
+         */
+        useNaturalPinchZoom: boolean;
+        /**
          * Defines the pointer panning sensibility or how fast is the camera moving.
          */
         panningSensibility: number;
@@ -38571,6 +38646,15 @@ declare module BABYLON {
         get pinchDeltaPercentage(): number;
         set pinchDeltaPercentage(value: number);
         /**
+         * Gets or Set the pointer use natural pinch zoom to override the pinch precision
+         * and pinch delta percentage.
+         * When useNaturalPinchZoom is true, multi touch zoom will zoom in such
+         * that any object in the plane at the camera's target point will scale
+         * perfectly with finger motion.
+         */
+        get useNaturalPinchZoom(): boolean;
+        set useNaturalPinchZoom(value: boolean);
+        /**
          * Gets or Set the pointer panning sensibility or how fast is the camera moving.
          */
         get panningSensibility(): number;
@@ -42654,48 +42738,44 @@ declare module BABYLON {
 declare module BABYLON {
     /**
      * WebXR Camera which holds the views for the xrSession
-     * @see https://doc.babylonjs.com/how_to/webxr
+     * @see https://doc.babylonjs.com/how_to/webxr_camera
      */
     export class WebXRCamera extends FreeCamera {
         private _xrSessionManager;
-        /**
-         * Should position compensation execute on first frame.
-         * This is used when copying the position from a native (non XR) camera
-         */
-        compensateOnFirstFrame: boolean;
         private _firstFrame;
-        private _referencedPosition;
         private _referenceQuaternion;
+        private _referencedPosition;
         private _xrInvPositionCache;
         private _xrInvQuaternionCache;
-        private _realWorldHeight;
         /**
-         * Prevent the camera from calculating the real-world height
-         * If you are not using the user's height disable this for better performance
-         */
-        disableRealWorldHeightCalculation: boolean;
-        /**
-         * Return the user's height, unrelated to the current ground.
+         * Should position compensation execute on first frame.
+         * This is used when copying the position from a native (non XR) camera
          */
-        get realWorldHeight(): number;
+        compensateOnFirstFrame: boolean;
         /**
          * Creates a new webXRCamera, this should only be set at the camera after it has been updated by the xrSessionManager
          * @param name the name of the camera
          * @param scene the scene to add the camera to
+         * @param _xrSessionManager a constructed xr session manager
          */
         constructor(name: string, scene: Scene, _xrSessionManager: WebXRSessionManager);
-        private _updateNumberOfRigCameras;
+        /**
+         * Return the user's height, unrelated to the current ground.
+         * This will be the y position of this camera, when ground level is 0.
+         */
+        get realWorldHeight(): number;
+        /** @hidden */
+        _updateForDualEyeDebugging(): void;
         /**
          * Sets this camera's transformation based on a non-vr camera
          * @param otherCamera the non-vr camera to copy the transformation from
          * @param resetToBaseReferenceSpace should XR reset to the base reference space
          */
         setTransformationFromNonVRCamera(otherCamera?: Camera, resetToBaseReferenceSpace?: boolean): void;
-        /** @hidden */
-        _updateForDualEyeDebugging(): void;
+        private _updateFromXRSession;
+        private _updateNumberOfRigCameras;
         private _updateReferenceSpace;
         private _updateReferenceSpaceOffset;
-        private _updateFromXRSession;
     }
 }
 declare module BABYLON {
@@ -43026,12 +43106,12 @@ declare module BABYLON {
          * Observers registered here will be triggered when the state of a button changes
          * State change is either pressed / touched / value
          */
-        onButtonStateChanged: Observable<WebXRControllerComponent>;
+        onButtonStateChangedObservable: Observable<WebXRControllerComponent>;
         /**
          * If axes are available for this component (like a touchpad or thumbstick) the observers will be notified when
          * the axes data changes
          */
-        onAxisValueChanged: Observable<{
+        onAxisValueChangedObservable: Observable<{
             x: number;
             y: number;
         }>;
@@ -44056,7 +44136,7 @@ declare module BABYLON {
     /**
      * Represents an XR controller
      */
-    export class WebXRController {
+    export class WebXRInputSource {
         private _scene;
         /** The underlying input source for the controller  */
         inputSource: XRInputSource;
@@ -44090,7 +44170,7 @@ declare module BABYLON {
          * The object provided as event data is this controller, after associated assets were disposed.
          * uniqueId is still available.
          */
-        onDisposeObservable: Observable<WebXRController>;
+        onDisposeObservable: Observable<WebXRInputSource>;
         private _tmpQuaternion;
         private _tmpVector;
         private _uniqueId;
@@ -44115,10 +44195,11 @@ declare module BABYLON {
          */
         updateFromXRFrame(xrFrame: XRFrame, referenceSpace: XRReferenceSpace): void;
         /**
-         * Gets a world space ray coming from the controller
+         * Gets a world space ray coming from the pointer or grip
          * @param result the resulting ray
+         * @param gripIfAvailable use the grip mesh instead of the pointer, if available
          */
-        getWorldPointerRayToRef(result: Ray): void;
+        getWorldPointerRayToRef(result: Ray, gripIfAvailable?: boolean): void;
         /**
          * Disposes of the object
          */
@@ -44171,18 +44252,18 @@ declare module BABYLON {
         /**
          * XR controllers being tracked
          */
-        controllers: Array<WebXRController>;
+        controllers: Array<WebXRInputSource>;
         private _frameObserver;
         private _sessionEndedObserver;
         private _sessionInitObserver;
         /**
          * Event when a controller has been connected/added
          */
-        onControllerAddedObservable: Observable<WebXRController>;
+        onControllerAddedObservable: Observable<WebXRInputSource>;
         /**
          * Event when a controller has been removed/disconnected
          */
-        onControllerRemovedObservable: Observable<WebXRController>;
+        onControllerRemovedObservable: Observable<WebXRInputSource>;
         /**
          * Initializes the WebXRInput
          * @param xrSessionManager the xr session manager for this session
@@ -44262,6 +44343,91 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
+     * Renders a layer on top of an existing scene
+     */
+    export class UtilityLayerRenderer implements IDisposable {
+        /** the original scene that will be rendered on top of */
+        originalScene: Scene;
+        private _pointerCaptures;
+        private _lastPointerEvents;
+        private static _DefaultUtilityLayer;
+        private static _DefaultKeepDepthUtilityLayer;
+        private _sharedGizmoLight;
+        private _renderCamera;
+        /**
+         * Gets the camera that is used to render the utility layer (when not set, this will be the last active camera)
+         * @returns the camera that is used when rendering the utility layer
+         */
+        getRenderCamera(): Camera;
+        /**
+         * Sets the camera that should be used when rendering the utility layer (If set to null the last active camera will be used)
+         * @param cam the camera that should be used when rendering the utility layer
+         */
+        setRenderCamera(cam: Nullable<Camera>): void;
+        /**
+         * @hidden
+         * Light which used by gizmos to get light shading
+         */
+        _getSharedGizmoLight(): HemisphericLight;
+        /**
+         * If the picking should be done on the utility layer prior to the actual scene (Default: true)
+         */
+        pickUtilitySceneFirst: boolean;
+        /**
+         * A shared utility layer that can be used to overlay objects into a scene (Depth map of the previous scene is cleared before drawing on top of it)
+         */
+        static get DefaultUtilityLayer(): UtilityLayerRenderer;
+        /**
+         * A shared utility layer that can be used to embed objects into a scene (Depth map of the previous scene is not cleared before drawing on top of it)
+         */
+        static get DefaultKeepDepthUtilityLayer(): UtilityLayerRenderer;
+        /**
+         * The scene that is rendered on top of the original scene
+         */
+        utilityLayerScene: Scene;
+        /**
+         *  If the utility layer should automatically be rendered on top of existing scene
+        */
+        shouldRender: boolean;
+        /**
+         * If set to true, only pointer down onPointerObservable events will be blocked when picking is occluded by original scene
+         */
+        onlyCheckPointerDownEvents: boolean;
+        /**
+         * If set to false, only pointerUp, pointerDown and pointerMove will be sent to the utilityLayerScene (false by default)
+         */
+        processAllEvents: boolean;
+        /**
+         * Observable raised when the pointer move from the utility layer scene to the main scene
+         */
+        onPointerOutObservable: Observable<number>;
+        /** Gets or sets a predicate that will be used to indicate utility meshes present in the main scene */
+        mainSceneTrackerPredicate: (mesh: Nullable<AbstractMesh>) => boolean;
+        private _afterRenderObserver;
+        private _sceneDisposeObserver;
+        private _originalPointerObserver;
+        /**
+         * Instantiates a UtilityLayerRenderer
+         * @param originalScene the original scene that will be rendered on top of
+         * @param handleEvents boolean indicating if the utility layer should handle events
+         */
+        constructor(
+        /** the original scene that will be rendered on top of */
+        originalScene: Scene, handleEvents?: boolean);
+        private _notifyObservers;
+        /**
+         * Renders the utility layers scene on top of the original scene
+         */
+        render(): void;
+        /**
+         * Disposes of the renderer
+         */
+        dispose(): void;
+        private _updateCamera;
+    }
+}
+declare module BABYLON {
+    /**
      * Options interface for the pointer selection module
      */
     export interface IWebXRControllerPointerSelectionOptions {
@@ -44296,6 +44462,14 @@ declare module BABYLON {
          * Defaults to 1.
          */
         gazeModePointerMovedFactor?: number;
+        /**
+         * Should meshes created here be added to a utility layer or the main scene
+         */
+        useUtilityLayer?: boolean;
+        /**
+         * if provided, this scene will be used to render meshes.
+         */
+        customUtilityLayerScene?: Scene;
     }
     /**
      * A module that will enable pointer selection for motion controllers of XR Input Sources
@@ -44374,7 +44548,7 @@ declare module BABYLON {
          * @param id the pointer id to search for
          * @returns the controller that correlates to this id or null if not found
          */
-        getXRControllerByPointerId(id: number): Nullable<WebXRController>;
+        getXRControllerByPointerId(id: number): Nullable<WebXRInputSource>;
         protected _onXRFrame(_xrFrame: XRFrame): void;
         private _attachController;
         private _attachScreenRayMode;
@@ -44618,6 +44792,14 @@ declare module BABYLON {
          * If main component is used (no thumbstick), how long should the "long press" take before teleporting
          */
         timeToTeleport?: number;
+        /**
+         * Should meshes created here be added to a utility layer or the main scene
+         */
+        useUtilityLayer?: boolean;
+        /**
+         * if provided, this scene will be used to render meshes.
+         */
+        customUtilityLayerScene?: Scene;
     }
     /**
      * This is a teleportation feature to be used with webxr-enabled motion controllers.
@@ -45498,91 +45680,6 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Renders a layer on top of an existing scene
-     */
-    export class UtilityLayerRenderer implements IDisposable {
-        /** the original scene that will be rendered on top of */
-        originalScene: Scene;
-        private _pointerCaptures;
-        private _lastPointerEvents;
-        private static _DefaultUtilityLayer;
-        private static _DefaultKeepDepthUtilityLayer;
-        private _sharedGizmoLight;
-        private _renderCamera;
-        /**
-         * Gets the camera that is used to render the utility layer (when not set, this will be the last active camera)
-         * @returns the camera that is used when rendering the utility layer
-         */
-        getRenderCamera(): Camera;
-        /**
-         * Sets the camera that should be used when rendering the utility layer (If set to null the last active camera will be used)
-         * @param cam the camera that should be used when rendering the utility layer
-         */
-        setRenderCamera(cam: Nullable<Camera>): void;
-        /**
-         * @hidden
-         * Light which used by gizmos to get light shading
-         */
-        _getSharedGizmoLight(): HemisphericLight;
-        /**
-         * If the picking should be done on the utility layer prior to the actual scene (Default: true)
-         */
-        pickUtilitySceneFirst: boolean;
-        /**
-         * A shared utility layer that can be used to overlay objects into a scene (Depth map of the previous scene is cleared before drawing on top of it)
-         */
-        static get DefaultUtilityLayer(): UtilityLayerRenderer;
-        /**
-         * A shared utility layer that can be used to embed objects into a scene (Depth map of the previous scene is not cleared before drawing on top of it)
-         */
-        static get DefaultKeepDepthUtilityLayer(): UtilityLayerRenderer;
-        /**
-         * The scene that is rendered on top of the original scene
-         */
-        utilityLayerScene: Scene;
-        /**
-         *  If the utility layer should automatically be rendered on top of existing scene
-        */
-        shouldRender: boolean;
-        /**
-         * If set to true, only pointer down onPointerObservable events will be blocked when picking is occluded by original scene
-         */
-        onlyCheckPointerDownEvents: boolean;
-        /**
-         * If set to false, only pointerUp, pointerDown and pointerMove will be sent to the utilityLayerScene (false by default)
-         */
-        processAllEvents: boolean;
-        /**
-         * Observable raised when the pointer move from the utility layer scene to the main scene
-         */
-        onPointerOutObservable: Observable<number>;
-        /** Gets or sets a predicate that will be used to indicate utility meshes present in the main scene */
-        mainSceneTrackerPredicate: (mesh: Nullable<AbstractMesh>) => boolean;
-        private _afterRenderObserver;
-        private _sceneDisposeObserver;
-        private _originalPointerObserver;
-        /**
-         * Instantiates a UtilityLayerRenderer
-         * @param originalScene the original scene that will be rendered on top of
-         * @param handleEvents boolean indicating if the utility layer should handle events
-         */
-        constructor(
-        /** the original scene that will be rendered on top of */
-        originalScene: Scene, handleEvents?: boolean);
-        private _notifyObservers;
-        /**
-         * Renders the utility layers scene on top of the original scene
-         */
-        render(): void;
-        /**
-         * Disposes of the renderer
-         */
-        dispose(): void;
-        private _updateCamera;
-    }
-}
-declare module BABYLON {
-    /**
      * Renders gizmos on top of an existing scene which provide controls for position, rotation, etc.
      */
     export class Gizmo implements IDisposable {
@@ -46713,6 +46810,17 @@ declare module BABYLON {
     }
 }
 declare module BABYLON {
+    /**
+     * @hidden
+     **/
+    export class _TimeToken {
+        _startTimeQuery: Nullable<WebGLQuery>;
+        _endTimeQuery: Nullable<WebGLQuery>;
+        _timeElapsedQuery: Nullable<WebGLQuery>;
+        _timeElapsedQueryEnded: boolean;
+    }
+}
+declare module BABYLON {
     /** @hidden */
     export class _OcclusionDataStorage {
         /** @hidden */
@@ -56916,6 +57024,14 @@ declare module BABYLON {
          */
         static Parse(source: any, scene: Scene, rootUrl?: string): NodeMaterial;
         /**
+         * Creates a node material from a snippet saved in a remote file
+         * @param name defines the name of the material to create
+         * @param url defines the url to load from
+         * @param scene defines the hosting scene
+         * @returns a promise that will resolve to the new node material
+         */
+        static ParseFromFileAsync(name: string, url: string, scene: Scene): Promise<NodeMaterial>;
+        /**
          * Creates a node material from a snippet saved by the node material editor
          * @param snippetId defines the snippet to load
          * @param scene defines the hosting scene
@@ -68770,7 +68886,7 @@ declare module BABYLON {
          * Manually add a controller (if no xrInput was provided or physics engine was not enabled)
          * @param xrController the controller to add
          */
-        addController(xrController: WebXRController): void;
+        addController(xrController: WebXRInputSource): void;
         private _debugMode;
         /**
          * @hidden

dist/preview release/documentation.d.ts

@@ -579,17 +579,6 @@ declare module BABYLON {
     }
 }
 declare module BABYLON {
-    /**
-     * @hidden
-     **/
-    export class _TimeToken {
-        _startTimeQuery: Nullable<WebGLQuery>;
-        _endTimeQuery: Nullable<WebGLQuery>;
-        _timeElapsedQuery: Nullable<WebGLQuery>;
-        _timeElapsedQueryEnded: boolean;
-    }
-}
-declare module BABYLON {
     /** Defines the cross module used constants to avoid circular dependncies */
     export class Constants {
         /** Defines that alpha blending is disabled */
@@ -17992,8 +17981,9 @@ declare module BABYLON {
         /**
          * Parse properties from a JSON object
          * @param serializationObject defines the JSON object
+         * @param scene defines the hosting scene
          */
-        parse(serializationObject: any): void;
+        parse(serializationObject: any, scene: Scene): void;
     }
 }
 declare module BABYLON {
@@ -18681,6 +18671,84 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
+     * Particle emitter emitting particles from the inside of a box.
+     * It emits the particles randomly between 2 given directions.
+     */
+    export class MeshParticleEmitter implements IParticleEmitterType {
+        /** Defines the mesh to use as source */
+        mesh?: AbstractMesh | undefined;
+        private _indices;
+        private _positions;
+        private _normals;
+        private _storedNormal;
+        /**
+         * Random direction of each particle after it has been emitted, between direction1 and direction2 vectors.
+         */
+        direction1: Vector3;
+        /**
+         * Random direction of each particle after it has been emitted, between direction1 and direction2 vectors.
+         */
+        direction2: Vector3;
+        /**
+         * Gets or sets a boolean indicating that particle directions must be built from mesh face normals
+         */
+        useMeshNormalsForDirection: boolean;
+        /**
+         * Creates a new instance MeshParticleEmitter
+         * @param mesh defines the mesh to use as source
+         */
+        constructor(
+        /** Defines the mesh to use as source */
+        mesh?: AbstractMesh | undefined);
+        /**
+         * Called by the particle System when the direction is computed for the created particle.
+         * @param worldMatrix is the world matrix of the particle system
+         * @param directionToUpdate is the direction vector to update with the result
+         * @param particle is the particle we are computed the direction for
+         */
+        startDirectionFunction(worldMatrix: Matrix, directionToUpdate: Vector3, particle: Particle): void;
+        /**
+         * Called by the particle System when the position is computed for the created particle.
+         * @param worldMatrix is the world matrix of the particle system
+         * @param positionToUpdate is the position vector to update with the result
+         * @param particle is the particle we are computed the position for
+         */
+        startPositionFunction(worldMatrix: Matrix, positionToUpdate: Vector3, particle: Particle): void;
+        /**
+         * Clones the current emitter and returns a copy of it
+         * @returns the new emitter
+         */
+        clone(): MeshParticleEmitter;
+        /**
+         * Called by the GPUParticleSystem to setup the update shader
+         * @param effect defines the update shader
+         */
+        applyToShader(effect: Effect): void;
+        /**
+         * Returns a string to use to update the GPU particles update shader
+         * @returns a string containng the defines string
+         */
+        getEffectDefines(): string;
+        /**
+         * Returns the string "BoxParticleEmitter"
+         * @returns a string containing the class name
+         */
+        getClassName(): string;
+        /**
+         * Serializes the particle system to a JSON object.
+         * @returns the JSON object
+         */
+        serialize(): any;
+        /**
+         * Parse properties from a JSON object
+         * @param serializationObject defines the JSON object
+         * @param scene defines the hosting scene
+         */
+        parse(serializationObject: any, scene: Scene): void;
+    }
+}
+declare module BABYLON {
+    /**
      * Interface representing a particle system in Babylon.js.
      * This groups the common functionalities that needs to be implemented in order to create a particle system.
      * A particle system represents a way to manage particles from their emission to their animation and rendering.
@@ -38221,6 +38289,13 @@ declare module BABYLON {
          */
         pinchDeltaPercentage: number;
         /**
+         * When useNaturalPinchZoom is true, multi touch zoom will zoom in such
+         * that any object in the plane at the camera's target point will scale
+         * perfectly with finger motion.
+         * Overrides pinchDeltaPercentage and pinchPrecision.
+         */
+        useNaturalPinchZoom: boolean;
+        /**
          * Defines the pointer panning sensibility or how fast is the camera moving.
          */
         panningSensibility: number;
@@ -38571,6 +38646,15 @@ declare module BABYLON {
         get pinchDeltaPercentage(): number;
         set pinchDeltaPercentage(value: number);
         /**
+         * Gets or Set the pointer use natural pinch zoom to override the pinch precision
+         * and pinch delta percentage.
+         * When useNaturalPinchZoom is true, multi touch zoom will zoom in such
+         * that any object in the plane at the camera's target point will scale
+         * perfectly with finger motion.
+         */
+        get useNaturalPinchZoom(): boolean;
+        set useNaturalPinchZoom(value: boolean);
+        /**
          * Gets or Set the pointer panning sensibility or how fast is the camera moving.
          */
         get panningSensibility(): number;
@@ -42654,48 +42738,44 @@ declare module BABYLON {
 declare module BABYLON {
     /**
      * WebXR Camera which holds the views for the xrSession
-     * @see https://doc.babylonjs.com/how_to/webxr
+     * @see https://doc.babylonjs.com/how_to/webxr_camera
      */
     export class WebXRCamera extends FreeCamera {
         private _xrSessionManager;
-        /**
-         * Should position compensation execute on first frame.
-         * This is used when copying the position from a native (non XR) camera
-         */
-        compensateOnFirstFrame: boolean;
         private _firstFrame;
-        private _referencedPosition;
         private _referenceQuaternion;
+        private _referencedPosition;
         private _xrInvPositionCache;
         private _xrInvQuaternionCache;
-        private _realWorldHeight;
         /**
-         * Prevent the camera from calculating the real-world height
-         * If you are not using the user's height disable this for better performance
-         */
-        disableRealWorldHeightCalculation: boolean;
-        /**
-         * Return the user's height, unrelated to the current ground.
+         * Should position compensation execute on first frame.
+         * This is used when copying the position from a native (non XR) camera
          */
-        get realWorldHeight(): number;
+        compensateOnFirstFrame: boolean;
         /**
          * Creates a new webXRCamera, this should only be set at the camera after it has been updated by the xrSessionManager
          * @param name the name of the camera
          * @param scene the scene to add the camera to
+         * @param _xrSessionManager a constructed xr session manager
          */
         constructor(name: string, scene: Scene, _xrSessionManager: WebXRSessionManager);
-        private _updateNumberOfRigCameras;
+        /**
+         * Return the user's height, unrelated to the current ground.
+         * This will be the y position of this camera, when ground level is 0.
+         */
+        get realWorldHeight(): number;
+        /** @hidden */
+        _updateForDualEyeDebugging(): void;
         /**
          * Sets this camera's transformation based on a non-vr camera
          * @param otherCamera the non-vr camera to copy the transformation from
          * @param resetToBaseReferenceSpace should XR reset to the base reference space
          */
         setTransformationFromNonVRCamera(otherCamera?: Camera, resetToBaseReferenceSpace?: boolean): void;
-        /** @hidden */
-        _updateForDualEyeDebugging(): void;
+        private _updateFromXRSession;
+        private _updateNumberOfRigCameras;
         private _updateReferenceSpace;
         private _updateReferenceSpaceOffset;
-        private _updateFromXRSession;
     }
 }
 declare module BABYLON {
@@ -43026,12 +43106,12 @@ declare module BABYLON {
          * Observers registered here will be triggered when the state of a button changes
          * State change is either pressed / touched / value
          */
-        onButtonStateChanged: Observable<WebXRControllerComponent>;
+        onButtonStateChangedObservable: Observable<WebXRControllerComponent>;
         /**
          * If axes are available for this component (like a touchpad or thumbstick) the observers will be notified when
          * the axes data changes
          */
-        onAxisValueChanged: Observable<{
+        onAxisValueChangedObservable: Observable<{
             x: number;
             y: number;
         }>;
@@ -44056,7 +44136,7 @@ declare module BABYLON {
     /**
      * Represents an XR controller
      */
-    export class WebXRController {
+    export class WebXRInputSource {
         private _scene;
         /** The underlying input source for the controller  */
         inputSource: XRInputSource;
@@ -44090,7 +44170,7 @@ declare module BABYLON {
          * The object provided as event data is this controller, after associated assets were disposed.
          * uniqueId is still available.
          */
-        onDisposeObservable: Observable<WebXRController>;
+        onDisposeObservable: Observable<WebXRInputSource>;
         private _tmpQuaternion;
         private _tmpVector;
         private _uniqueId;
@@ -44115,10 +44195,11 @@ declare module BABYLON {
          */
         updateFromXRFrame(xrFrame: XRFrame, referenceSpace: XRReferenceSpace): void;
         /**
-         * Gets a world space ray coming from the controller
+         * Gets a world space ray coming from the pointer or grip
          * @param result the resulting ray
+         * @param gripIfAvailable use the grip mesh instead of the pointer, if available
          */
-        getWorldPointerRayToRef(result: Ray): void;
+        getWorldPointerRayToRef(result: Ray, gripIfAvailable?: boolean): void;
         /**
          * Disposes of the object
          */
@@ -44171,18 +44252,18 @@ declare module BABYLON {
         /**
          * XR controllers being tracked
          */
-        controllers: Array<WebXRController>;
+        controllers: Array<WebXRInputSource>;
         private _frameObserver;
         private _sessionEndedObserver;
         private _sessionInitObserver;
         /**
          * Event when a controller has been connected/added
          */
-        onControllerAddedObservable: Observable<WebXRController>;
+        onControllerAddedObservable: Observable<WebXRInputSource>;
         /**
          * Event when a controller has been removed/disconnected
          */
-        onControllerRemovedObservable: Observable<WebXRController>;
+        onControllerRemovedObservable: Observable<WebXRInputSource>;
         /**
          * Initializes the WebXRInput
          * @param xrSessionManager the xr session manager for this session
@@ -44262,6 +44343,91 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
+     * Renders a layer on top of an existing scene
+     */
+    export class UtilityLayerRenderer implements IDisposable {
+        /** the original scene that will be rendered on top of */
+        originalScene: Scene;
+        private _pointerCaptures;
+        private _lastPointerEvents;
+        private static _DefaultUtilityLayer;
+        private static _DefaultKeepDepthUtilityLayer;
+        private _sharedGizmoLight;
+        private _renderCamera;
+        /**
+         * Gets the camera that is used to render the utility layer (when not set, this will be the last active camera)
+         * @returns the camera that is used when rendering the utility layer
+         */
+        getRenderCamera(): Camera;
+        /**
+         * Sets the camera that should be used when rendering the utility layer (If set to null the last active camera will be used)
+         * @param cam the camera that should be used when rendering the utility layer
+         */
+        setRenderCamera(cam: Nullable<Camera>): void;
+        /**
+         * @hidden
+         * Light which used by gizmos to get light shading
+         */
+        _getSharedGizmoLight(): HemisphericLight;
+        /**
+         * If the picking should be done on the utility layer prior to the actual scene (Default: true)
+         */
+        pickUtilitySceneFirst: boolean;
+        /**
+         * A shared utility layer that can be used to overlay objects into a scene (Depth map of the previous scene is cleared before drawing on top of it)
+         */
+        static get DefaultUtilityLayer(): UtilityLayerRenderer;
+        /**
+         * A shared utility layer that can be used to embed objects into a scene (Depth map of the previous scene is not cleared before drawing on top of it)
+         */
+        static get DefaultKeepDepthUtilityLayer(): UtilityLayerRenderer;
+        /**
+         * The scene that is rendered on top of the original scene
+         */
+        utilityLayerScene: Scene;
+        /**
+         *  If the utility layer should automatically be rendered on top of existing scene
+        */
+        shouldRender: boolean;
+        /**
+         * If set to true, only pointer down onPointerObservable events will be blocked when picking is occluded by original scene
+         */
+        onlyCheckPointerDownEvents: boolean;
+        /**
+         * If set to false, only pointerUp, pointerDown and pointerMove will be sent to the utilityLayerScene (false by default)
+         */
+        processAllEvents: boolean;
+        /**
+         * Observable raised when the pointer move from the utility layer scene to the main scene
+         */
+        onPointerOutObservable: Observable<number>;
+        /** Gets or sets a predicate that will be used to indicate utility meshes present in the main scene */
+        mainSceneTrackerPredicate: (mesh: Nullable<AbstractMesh>) => boolean;
+        private _afterRenderObserver;
+        private _sceneDisposeObserver;
+        private _originalPointerObserver;
+        /**
+         * Instantiates a UtilityLayerRenderer
+         * @param originalScene the original scene that will be rendered on top of
+         * @param handleEvents boolean indicating if the utility layer should handle events
+         */
+        constructor(
+        /** the original scene that will be rendered on top of */
+        originalScene: Scene, handleEvents?: boolean);
+        private _notifyObservers;
+        /**
+         * Renders the utility layers scene on top of the original scene
+         */
+        render(): void;
+        /**
+         * Disposes of the renderer
+         */
+        dispose(): void;
+        private _updateCamera;
+    }
+}
+declare module BABYLON {
+    /**
      * Options interface for the pointer selection module
      */
     export interface IWebXRControllerPointerSelectionOptions {
@@ -44296,6 +44462,14 @@ declare module BABYLON {
          * Defaults to 1.
          */
         gazeModePointerMovedFactor?: number;
+        /**
+         * Should meshes created here be added to a utility layer or the main scene
+         */
+        useUtilityLayer?: boolean;
+        /**
+         * if provided, this scene will be used to render meshes.
+         */
+        customUtilityLayerScene?: Scene;
     }
     /**
      * A module that will enable pointer selection for motion controllers of XR Input Sources
@@ -44374,7 +44548,7 @@ declare module BABYLON {
          * @param id the pointer id to search for
          * @returns the controller that correlates to this id or null if not found
          */
-        getXRControllerByPointerId(id: number): Nullable<WebXRController>;
+        getXRControllerByPointerId(id: number): Nullable<WebXRInputSource>;
         protected _onXRFrame(_xrFrame: XRFrame): void;
         private _attachController;
         private _attachScreenRayMode;
@@ -44618,6 +44792,14 @@ declare module BABYLON {
          * If main component is used (no thumbstick), how long should the "long press" take before teleporting
          */
         timeToTeleport?: number;
+        /**
+         * Should meshes created here be added to a utility layer or the main scene
+         */
+        useUtilityLayer?: boolean;
+        /**
+         * if provided, this scene will be used to render meshes.
+         */
+        customUtilityLayerScene?: Scene;
     }
     /**
      * This is a teleportation feature to be used with webxr-enabled motion controllers.
@@ -45498,91 +45680,6 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
-     * Renders a layer on top of an existing scene
-     */
-    export class UtilityLayerRenderer implements IDisposable {
-        /** the original scene that will be rendered on top of */
-        originalScene: Scene;
-        private _pointerCaptures;
-        private _lastPointerEvents;
-        private static _DefaultUtilityLayer;
-        private static _DefaultKeepDepthUtilityLayer;
-        private _sharedGizmoLight;
-        private _renderCamera;
-        /**
-         * Gets the camera that is used to render the utility layer (when not set, this will be the last active camera)
-         * @returns the camera that is used when rendering the utility layer
-         */
-        getRenderCamera(): Camera;
-        /**
-         * Sets the camera that should be used when rendering the utility layer (If set to null the last active camera will be used)
-         * @param cam the camera that should be used when rendering the utility layer
-         */
-        setRenderCamera(cam: Nullable<Camera>): void;
-        /**
-         * @hidden
-         * Light which used by gizmos to get light shading
-         */
-        _getSharedGizmoLight(): HemisphericLight;
-        /**
-         * If the picking should be done on the utility layer prior to the actual scene (Default: true)
-         */
-        pickUtilitySceneFirst: boolean;
-        /**
-         * A shared utility layer that can be used to overlay objects into a scene (Depth map of the previous scene is cleared before drawing on top of it)
-         */
-        static get DefaultUtilityLayer(): UtilityLayerRenderer;
-        /**
-         * A shared utility layer that can be used to embed objects into a scene (Depth map of the previous scene is not cleared before drawing on top of it)
-         */
-        static get DefaultKeepDepthUtilityLayer(): UtilityLayerRenderer;
-        /**
-         * The scene that is rendered on top of the original scene
-         */
-        utilityLayerScene: Scene;
-        /**
-         *  If the utility layer should automatically be rendered on top of existing scene
-        */
-        shouldRender: boolean;
-        /**
-         * If set to true, only pointer down onPointerObservable events will be blocked when picking is occluded by original scene
-         */
-        onlyCheckPointerDownEvents: boolean;
-        /**
-         * If set to false, only pointerUp, pointerDown and pointerMove will be sent to the utilityLayerScene (false by default)
-         */
-        processAllEvents: boolean;
-        /**
-         * Observable raised when the pointer move from the utility layer scene to the main scene
-         */
-        onPointerOutObservable: Observable<number>;
-        /** Gets or sets a predicate that will be used to indicate utility meshes present in the main scene */
-        mainSceneTrackerPredicate: (mesh: Nullable<AbstractMesh>) => boolean;
-        private _afterRenderObserver;
-        private _sceneDisposeObserver;
-        private _originalPointerObserver;
-        /**
-         * Instantiates a UtilityLayerRenderer
-         * @param originalScene the original scene that will be rendered on top of
-         * @param handleEvents boolean indicating if the utility layer should handle events
-         */
-        constructor(
-        /** the original scene that will be rendered on top of */
-        originalScene: Scene, handleEvents?: boolean);
-        private _notifyObservers;
-        /**
-         * Renders the utility layers scene on top of the original scene
-         */
-        render(): void;
-        /**
-         * Disposes of the renderer
-         */
-        dispose(): void;
-        private _updateCamera;
-    }
-}
-declare module BABYLON {
-    /**
      * Renders gizmos on top of an existing scene which provide controls for position, rotation, etc.
      */
     export class Gizmo implements IDisposable {
@@ -46713,6 +46810,17 @@ declare module BABYLON {
     }
 }
 declare module BABYLON {
+    /**
+     * @hidden
+     **/
+    export class _TimeToken {
+        _startTimeQuery: Nullable<WebGLQuery>;
+        _endTimeQuery: Nullable<WebGLQuery>;
+        _timeElapsedQuery: Nullable<WebGLQuery>;
+        _timeElapsedQueryEnded: boolean;
+    }
+}
+declare module BABYLON {
     /** @hidden */
     export class _OcclusionDataStorage {
         /** @hidden */
@@ -56916,6 +57024,14 @@ declare module BABYLON {
          */
         static Parse(source: any, scene: Scene, rootUrl?: string): NodeMaterial;
         /**
+         * Creates a node material from a snippet saved in a remote file
+         * @param name defines the name of the material to create
+         * @param url defines the url to load from
+         * @param scene defines the hosting scene
+         * @returns a promise that will resolve to the new node material
+         */
+        static ParseFromFileAsync(name: string, url: string, scene: Scene): Promise<NodeMaterial>;
+        /**
          * Creates a node material from a snippet saved by the node material editor
          * @param snippetId defines the snippet to load
          * @param scene defines the hosting scene
@@ -68770,7 +68886,7 @@ declare module BABYLON {
          * Manually add a controller (if no xrInput was provided or physics engine was not enabled)
          * @param xrController the controller to add
          */
-        addController(xrController: WebXRController): void;
+        addController(xrController: WebXRInputSource): void;
         private _debugMode;
         /**
          * @hidden
@@ -71236,6 +71352,8 @@ declare module BABYLON.GUI {
         private _sourceTop;
         private _sourceWidth;
         private _sourceHeight;
+        private _svgAttributesComputationCompleted;
+        private _isSVG;
         private _cellWidth;
         private _cellHeight;
         private _cellId;
@@ -71308,6 +71426,10 @@ declare module BABYLON.GUI {
          */
         get sourceHeight(): number;
         set sourceHeight(value: number);
+        /** Indicates if the format of the image is SVG */
+        get isSVG(): boolean;
+        /** Gets the status of the SVG attributes computation (sourceLeft, sourceTop, sourceWidth, sourceHeight) */
+        get svgAttributesComputationCompleted(): boolean;
         /**
          * Gets or sets a boolean indicating if the image can force its container to adapt its size
          * @see http://doc.babylonjs.com/how_to/gui#image
@@ -71318,7 +71440,9 @@ declare module BABYLON.GUI {
         get stretch(): number;
         set stretch(value: number);
         /** @hidden */
-        _rotate90(n: number): Image;
+        _rotate90(n: number, preserveProperties?: boolean): Image;
+        private _handleRotationForSVGImage;
+        private _rotate90SourceProperties;
         /**
          * Gets or sets the internal DOM image used to render the control
          */
@@ -72674,6 +72798,8 @@ declare module BABYLON.GUI {
         private _thumbHeight;
         private _barImageHeight;
         private _tempMeasure;
+        /** Number of 90° rotation to apply on the images when in vertical mode */
+        num90RotationInVerticalMode: number;
         /**
          * Gets or sets the image used to render the background for horizontal bar
          */
@@ -72729,7 +72855,11 @@ declare module BABYLON.GUI {
         private _barColor;
         private _barBackground;
         private _barImage;
+        private _horizontalBarImage;
+        private _verticalBarImage;
         private _barBackgroundImage;
+        private _horizontalBarBackgroundImage;
+        private _verticalBarBackgroundImage;
         private _barSize;
         private _window;
         private _pointerIsOver;
@@ -72741,6 +72871,8 @@ declare module BABYLON.GUI {
         private _thumbLength;
         private _thumbHeight;
         private _barImageHeight;
+        private _horizontalBarImageHeight;
+        private _verticalBarImageHeight;
         /**
          * Gets the horizontal scrollbar
          */
@@ -72825,6 +72957,12 @@ declare module BABYLON.GUI {
         /** Gets or sets the bar image */
         get thumbImage(): Image;
         set thumbImage(value: Image);
+        /** Gets or sets the horizontal bar image */
+        get horizontalThumbImage(): Image;
+        set horizontalThumbImage(value: Image);
+        /** Gets or sets the vertical bar image */
+        get verticalThumbImage(): Image;
+        set verticalThumbImage(value: Image);
         /** Gets or sets the size of the bar */
         get barSize(): number;
         set barSize(value: number);
@@ -72837,12 +72975,24 @@ declare module BABYLON.GUI {
         /** Gets or sets the height of the bar image */
         get barImageHeight(): number;
         set barImageHeight(value: number);
+        /** Gets or sets the height of the horizontal bar image */
+        get horizontalBarImageHeight(): number;
+        set horizontalBarImageHeight(value: number);
+        /** Gets or sets the height of the vertical bar image */
+        get verticalBarImageHeight(): number;
+        set verticalBarImageHeight(value: number);
         /** Gets or sets the bar background */
         get barBackground(): string;
         set barBackground(color: string);
         /** Gets or sets the bar background image */
         get barImage(): Image;
         set barImage(value: Image);
+        /** Gets or sets the horizontal bar background image */
+        get horizontalBarImage(): Image;
+        set horizontalBarImage(value: Image);
+        /** Gets or sets the vertical bar background image */
+        get verticalBarImage(): Image;
+        set verticalBarImage(value: Image);
         private _setWindowPosition;
         /** @hidden */
         private _updateScroller;
@@ -75698,6 +75848,8 @@ declare module BABYLON.GLTF2.Loader.Extensions {
         /** @hidden */
         onReady(): void;
         /** @hidden */
+        loadSceneAsync(context: string, scene: IScene): Nullable<Promise<void>>;
+        /** @hidden */
         loadNodeAsync(context: string, node: INode, assign: (babylonTransformNode: TransformNode) => void): Nullable<Promise<TransformNode>>;
         /** @hidden */
         _loadMaterialAsync(context: string, material: IMaterial, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Nullable<Promise<Material>>;

dist/preview release/glTF2Interface/package.json

@@ -1,7 +1,7 @@
 {
     "name": "babylonjs-gltf2interface",
     "description": "A typescript declaration of babylon's gltf2 inteface.",
-    "version": "4.1.0-beta.22",
+    "version": "4.1.0-beta.23",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/gui/babylon.gui.d.ts

@@ -1524,6 +1524,8 @@ declare module BABYLON.GUI {
         private _sourceTop;
         private _sourceWidth;
         private _sourceHeight;
+        private _svgAttributesComputationCompleted;
+        private _isSVG;
         private _cellWidth;
         private _cellHeight;
         private _cellId;
@@ -1596,6 +1598,10 @@ declare module BABYLON.GUI {
          */
         get sourceHeight(): number;
         set sourceHeight(value: number);
+        /** Indicates if the format of the image is SVG */
+        get isSVG(): boolean;
+        /** Gets the status of the SVG attributes computation (sourceLeft, sourceTop, sourceWidth, sourceHeight) */
+        get svgAttributesComputationCompleted(): boolean;
         /**
          * Gets or sets a boolean indicating if the image can force its container to adapt its size
          * @see http://doc.babylonjs.com/how_to/gui#image
@@ -1606,7 +1612,9 @@ declare module BABYLON.GUI {
         get stretch(): number;
         set stretch(value: number);
         /** @hidden */
-        _rotate90(n: number): Image;
+        _rotate90(n: number, preserveProperties?: boolean): Image;
+        private _handleRotationForSVGImage;
+        private _rotate90SourceProperties;
         /**
          * Gets or sets the internal DOM image used to render the control
          */
@@ -2962,6 +2970,8 @@ declare module BABYLON.GUI {
         private _thumbHeight;
         private _barImageHeight;
         private _tempMeasure;
+        /** Number of 90° rotation to apply on the images when in vertical mode */
+        num90RotationInVerticalMode: number;
         /**
          * Gets or sets the image used to render the background for horizontal bar
          */
@@ -3017,7 +3027,11 @@ declare module BABYLON.GUI {
         private _barColor;
         private _barBackground;
         private _barImage;
+        private _horizontalBarImage;
+        private _verticalBarImage;
         private _barBackgroundImage;
+        private _horizontalBarBackgroundImage;
+        private _verticalBarBackgroundImage;
         private _barSize;
         private _window;
         private _pointerIsOver;
@@ -3029,6 +3043,8 @@ declare module BABYLON.GUI {
         private _thumbLength;
         private _thumbHeight;
         private _barImageHeight;
+        private _horizontalBarImageHeight;
+        private _verticalBarImageHeight;
         /**
          * Gets the horizontal scrollbar
          */
@@ -3113,6 +3129,12 @@ declare module BABYLON.GUI {
         /** Gets or sets the bar image */
         get thumbImage(): Image;
         set thumbImage(value: Image);
+        /** Gets or sets the horizontal bar image */
+        get horizontalThumbImage(): Image;
+        set horizontalThumbImage(value: Image);
+        /** Gets or sets the vertical bar image */
+        get verticalThumbImage(): Image;
+        set verticalThumbImage(value: Image);
         /** Gets or sets the size of the bar */
         get barSize(): number;
         set barSize(value: number);
@@ -3125,12 +3147,24 @@ declare module BABYLON.GUI {
         /** Gets or sets the height of the bar image */
         get barImageHeight(): number;
         set barImageHeight(value: number);
+        /** Gets or sets the height of the horizontal bar image */
+        get horizontalBarImageHeight(): number;
+        set horizontalBarImageHeight(value: number);
+        /** Gets or sets the height of the vertical bar image */
+        get verticalBarImageHeight(): number;
+        set verticalBarImageHeight(value: number);
         /** Gets or sets the bar background */
         get barBackground(): string;
         set barBackground(color: string);
         /** Gets or sets the bar background image */
         get barImage(): Image;
         set barImage(value: Image);
+        /** Gets or sets the horizontal bar background image */
+        get horizontalBarImage(): Image;
+        set horizontalBarImage(value: Image);
+        /** Gets or sets the vertical bar background image */
+        get verticalBarImage(): Image;
+        set verticalBarImage(value: Image);
         private _setWindowPosition;
         /** @hidden */
         private _updateScroller;

dist/preview release/gui/babylon.gui.js

@@ -6388,6 +6388,8 @@ var Image = /** @class */ (function (_super) {
         _this._sourceTop = 0;
         _this._sourceWidth = 0;
         _this._sourceHeight = 0;
+        _this._svgAttributesComputationCompleted = false;
+        _this._isSVG = false;
         _this._cellWidth = 0;
         _this._cellHeight = 0;
         _this._cellId = -1;
@@ -6585,6 +6587,22 @@ var Image = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(Image.prototype, "isSVG", {
+        /** Indicates if the format of the image is SVG */
+        get: function () {
+            return this._isSVG;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Image.prototype, "svgAttributesComputationCompleted", {
+        /** Gets the status of the SVG attributes computation (sourceLeft, sourceTop, sourceWidth, sourceHeight) */
+        get: function () {
+            return this._svgAttributesComputationCompleted;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(Image.prototype, "autoScale", {
         /**
          * Gets or sets a boolean indicating if the image can force its container to adapt its size
@@ -6621,7 +6639,8 @@ var Image = /** @class */ (function (_super) {
         configurable: true
     });
     /** @hidden */
-    Image.prototype._rotate90 = function (n) {
+    Image.prototype._rotate90 = function (n, preserveProperties) {
+        if (preserveProperties === void 0) { preserveProperties = false; }
         var canvas = document.createElement('canvas');
         var context = canvas.getContext('2d');
         var width = this._domImage.width;
@@ -6633,8 +6652,59 @@ var Image = /** @class */ (function (_super) {
         context.drawImage(this._domImage, 0, 0, width, height, -width / 2, -height / 2, width, height);
         var dataUrl = canvas.toDataURL("image/jpg");
         var rotatedImage = new Image(this.name + "rotated", dataUrl);
+        if (preserveProperties) {
+            rotatedImage._stretch = this._stretch;
+            rotatedImage._autoScale = this._autoScale;
+            rotatedImage._cellId = this._cellId;
+            rotatedImage._cellWidth = n % 1 ? this._cellHeight : this._cellWidth;
+            rotatedImage._cellHeight = n % 1 ? this._cellWidth : this._cellHeight;
+        }
+        this._handleRotationForSVGImage(this, rotatedImage, n);
         return rotatedImage;
     };
+    Image.prototype._handleRotationForSVGImage = function (srcImage, dstImage, n) {
+        var _this = this;
+        if (!srcImage._isSVG) {
+            return;
+        }
+        if (srcImage._svgAttributesComputationCompleted) {
+            this._rotate90SourceProperties(srcImage, dstImage, n);
+            this._markAsDirty();
+        }
+        else {
+            srcImage.onSVGAttributesComputedObservable.addOnce(function () {
+                _this._rotate90SourceProperties(srcImage, dstImage, n);
+                _this._markAsDirty();
+            });
+        }
+    };
+    Image.prototype._rotate90SourceProperties = function (srcImage, dstImage, n) {
+        var _a, _b;
+        var srcLeft = srcImage.sourceLeft, srcTop = srcImage.sourceTop, srcWidth = srcImage.domImage.width, srcHeight = srcImage.domImage.height;
+        var dstLeft = srcLeft, dstTop = srcTop, dstWidth = srcImage.sourceWidth, dstHeight = srcImage.sourceHeight;
+        if (n != 0) {
+            var mult = n < 0 ? -1 : 1;
+            n = n % 4;
+            for (var i = 0; i < Math.abs(n); ++i) {
+                dstLeft = -(srcTop - srcHeight / 2) * mult + srcHeight / 2;
+                dstTop = (srcLeft - srcWidth / 2) * mult + srcWidth / 2;
+                _a = [dstHeight, dstWidth], dstWidth = _a[0], dstHeight = _a[1];
+                if (n < 0) {
+                    dstTop -= dstHeight;
+                }
+                else {
+                    dstLeft -= dstWidth;
+                }
+                srcLeft = dstLeft;
+                srcTop = dstTop;
+                _b = [srcHeight, srcWidth], srcWidth = _b[0], srcHeight = _b[1];
+            }
+        }
+        dstImage.sourceLeft = dstLeft;
+        dstImage.sourceTop = dstTop;
+        dstImage.sourceWidth = dstWidth;
+        dstImage.sourceHeight = dstHeight;
+    };
     Object.defineProperty(Image.prototype, "domImage", {
         get: function () {
             return this._domImage;
@@ -6744,6 +6814,7 @@ var Image = /** @class */ (function (_super) {
     Image.prototype._svgCheck = function (value) {
         var _this = this;
         if (window.SVGSVGElement && (value.search(/.svg#/gi) !== -1) && (value.indexOf("#") === value.lastIndexOf("#"))) {
+            this._isSVG = true;
             var svgsrc = value.split('#')[0];
             var elemid = value.split('#')[1];
             // check if object alr exist in document
@@ -6819,6 +6890,7 @@ var Image = /** @class */ (function (_super) {
                 this.sourceTop = ((elem_matrix_d * elem_bbox.y + elem_matrix_f) * docheight) / vb_height;
                 this.sourceWidth = (elem_bbox.width * elem_matrix_a) * (docwidth / vb_width);
                 this.sourceHeight = (elem_bbox.height * elem_matrix_d) * (docheight / vb_height);
+                this._svgAttributesComputationCompleted = true;
                 this.onSVGAttributesComputedObservable.notifyObservers(this);
             }
         }
@@ -9190,6 +9262,8 @@ var ScrollViewer = /** @class */ (function (_super) {
         _this._thumbLength = 0.5;
         _this._thumbHeight = 1;
         _this._barImageHeight = 1;
+        _this._horizontalBarImageHeight = 1;
+        _this._verticalBarImageHeight = 1;
         _this._forceHorizontalBar = false;
         _this._forceVerticalBar = false;
         _this._useImageBar = isImageBased ? isImageBased : false;
@@ -9383,8 +9457,9 @@ var ScrollViewer = /** @class */ (function (_super) {
         return "ScrollViewer";
     };
     ScrollViewer.prototype._buildClientSizes = function () {
-        this._window.parentClientWidth = this._currentMeasure.width - (this._verticalBar.isVisible || this.forceVerticalBar ? this._barSize : 0) - 2 * this.thickness;
-        this._window.parentClientHeight = this._currentMeasure.height - (this._horizontalBar.isVisible || this.forceHorizontalBar ? this._barSize : 0) - 2 * this.thickness;
+        var ratio = this.host.idealRatio;
+        this._window.parentClientWidth = this._currentMeasure.width - (this._verticalBar.isVisible || this.forceVerticalBar ? this._barSize * ratio : 0) - 2 * this.thickness;
+        this._window.parentClientHeight = this._currentMeasure.height - (this._horizontalBar.isVisible || this.forceHorizontalBar ? this._barSize * ratio : 0) - 2 * this.thickness;
         this._clientWidth = this._window.parentClientWidth;
         this._clientHeight = this._window.parentClientHeight;
     };
@@ -9468,6 +9543,38 @@ var ScrollViewer = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ScrollViewer.prototype, "horizontalThumbImage", {
+        /** Gets or sets the horizontal bar image */
+        get: function () {
+            return this._horizontalBarImage;
+        },
+        set: function (value) {
+            if (this._horizontalBarImage === value) {
+                return;
+            }
+            this._horizontalBarImage = value;
+            var hb = this._horizontalBar;
+            hb.thumbImage = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ScrollViewer.prototype, "verticalThumbImage", {
+        /** Gets or sets the vertical bar image */
+        get: function () {
+            return this._verticalBarImage;
+        },
+        set: function (value) {
+            if (this._verticalBarImage === value) {
+                return;
+            }
+            this._verticalBarImage = value;
+            var vb = this._verticalBar;
+            vb.thumbImage = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ScrollViewer.prototype, "barSize", {
         /** Gets or sets the size of the bar */
         get: function () {
@@ -9564,6 +9671,52 @@ var ScrollViewer = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ScrollViewer.prototype, "horizontalBarImageHeight", {
+        /** Gets or sets the height of the horizontal bar image */
+        get: function () {
+            return this._horizontalBarImageHeight;
+        },
+        set: function (value) {
+            if (this._horizontalBarImageHeight === value) {
+                return;
+            }
+            if (value <= 0) {
+                value = 0.1;
+            }
+            if (value > 1) {
+                value = 1;
+            }
+            this._horizontalBarImageHeight = value;
+            var hb = this._horizontalBar;
+            hb.barImageHeight = value;
+            this._markAsDirty();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ScrollViewer.prototype, "verticalBarImageHeight", {
+        /** Gets or sets the height of the vertical bar image */
+        get: function () {
+            return this._verticalBarImageHeight;
+        },
+        set: function (value) {
+            if (this._verticalBarImageHeight === value) {
+                return;
+            }
+            if (value <= 0) {
+                value = 0.1;
+            }
+            if (value > 1) {
+                value = 1;
+            }
+            this._verticalBarImageHeight = value;
+            var vb = this._verticalBar;
+            vb.barImageHeight = value;
+            this._markAsDirty();
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ScrollViewer.prototype, "barBackground", {
         /** Gets or sets the bar background */
         get: function () {
@@ -9600,6 +9753,36 @@ var ScrollViewer = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ScrollViewer.prototype, "horizontalBarImage", {
+        /** Gets or sets the horizontal bar background image */
+        get: function () {
+            return this._horizontalBarBackgroundImage;
+        },
+        set: function (value) {
+            if (this._horizontalBarBackgroundImage === value) {
+            }
+            this._horizontalBarBackgroundImage = value;
+            var hb = this._horizontalBar;
+            hb.backgroundImage = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ScrollViewer.prototype, "verticalBarImage", {
+        /** Gets or sets the vertical bar background image */
+        get: function () {
+            return this._verticalBarBackgroundImage;
+        },
+        set: function (value) {
+            if (this._verticalBarBackgroundImage === value) {
+            }
+            this._verticalBarBackgroundImage = value;
+            var vb = this._verticalBar;
+            vb.backgroundImage = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
     ScrollViewer.prototype._setWindowPosition = function () {
         var ratio = this.host.idealRatio;
         var windowContentsWidth = this._window._currentMeasure.width;
@@ -11177,6 +11360,8 @@ var ImageScrollBar = /** @class */ (function (_super) {
         _this._thumbHeight = 1;
         _this._barImageHeight = 1;
         _this._tempMeasure = new _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"](0, 0, 0, 0);
+        /** Number of 90° rotation to apply on the images when in vertical mode */
+        _this.num90RotationInVerticalMode = 1;
         return _this;
     }
     Object.defineProperty(ImageScrollBar.prototype, "backgroundImage", {
@@ -11192,10 +11377,10 @@ var ImageScrollBar = /** @class */ (function (_super) {
                 return;
             }
             this._backgroundBaseImage = value;
-            if (this.isVertical) {
-                if (value && !value.isLoaded) {
+            if (this.isVertical && this.num90RotationInVerticalMode !== 0) {
+                if (!value.isLoaded) {
                     value.onImageLoadedObservable.addOnce(function () {
-                        var rotatedValue = value._rotate90(1);
+                        var rotatedValue = value._rotate90(_this.num90RotationInVerticalMode, true);
                         _this._backgroundImage = rotatedValue;
                         if (!rotatedValue.isLoaded) {
                             rotatedValue.onImageLoadedObservable.addOnce(function () {
@@ -11205,8 +11390,10 @@ var ImageScrollBar = /** @class */ (function (_super) {
                         _this._markAsDirty();
                     });
                 }
-                this._backgroundImage = value._rotate90(1);
-                this._markAsDirty();
+                else {
+                    this._backgroundImage = value._rotate90(this.num90RotationInVerticalMode, true);
+                    this._markAsDirty();
+                }
             }
             else {
                 this._backgroundImage = value;
@@ -11234,10 +11421,10 @@ var ImageScrollBar = /** @class */ (function (_super) {
                 return;
             }
             this._thumbBaseImage = value;
-            if (this.isVertical) {
-                if (value && !value.isLoaded) {
+            if (this.isVertical && this.num90RotationInVerticalMode !== 0) {
+                if (!value.isLoaded) {
                     value.onImageLoadedObservable.addOnce(function () {
-                        var rotatedValue = value._rotate90(-1);
+                        var rotatedValue = value._rotate90(-_this.num90RotationInVerticalMode, true);
                         _this._thumbImage = rotatedValue;
                         if (!rotatedValue.isLoaded) {
                             rotatedValue.onImageLoadedObservable.addOnce(function () {
@@ -11247,8 +11434,10 @@ var ImageScrollBar = /** @class */ (function (_super) {
                         _this._markAsDirty();
                     });
                 }
-                this._thumbImage = value._rotate90(-1);
-                this._markAsDirty();
+                else {
+                    this._thumbImage = value._rotate90(-this.num90RotationInVerticalMode, true);
+                    this._markAsDirty();
+                }
             }
             else {
                 this._thumbImage = value;
@@ -11358,8 +11547,10 @@ var ImageScrollBar = /** @class */ (function (_super) {
         else {
             this._tempMeasure.copyFromFloats(this._currentMeasure.left + thumbPosition, this._currentMeasure.top + this._currentMeasure.height * (1 - this._thumbHeight) * 0.5, this._effectiveThumbThickness, this._currentMeasure.height * this._thumbHeight);
         }
-        this._thumbImage._currentMeasure.copyFrom(this._tempMeasure);
-        this._thumbImage._draw(context);
+        if (this._thumbImage) {
+            this._thumbImage._currentMeasure.copyFrom(this._tempMeasure);
+            this._thumbImage._draw(context);
+        }
         context.restore();
     };
     /** @hidden */

dist/preview release/gui/babylon.gui.module.d.ts

@@ -1568,6 +1568,8 @@ declare module "babylonjs-gui/2D/controls/image" {
         private _sourceTop;
         private _sourceWidth;
         private _sourceHeight;
+        private _svgAttributesComputationCompleted;
+        private _isSVG;
         private _cellWidth;
         private _cellHeight;
         private _cellId;
@@ -1640,6 +1642,10 @@ declare module "babylonjs-gui/2D/controls/image" {
          */
         get sourceHeight(): number;
         set sourceHeight(value: number);
+        /** Indicates if the format of the image is SVG */
+        get isSVG(): boolean;
+        /** Gets the status of the SVG attributes computation (sourceLeft, sourceTop, sourceWidth, sourceHeight) */
+        get svgAttributesComputationCompleted(): boolean;
         /**
          * Gets or sets a boolean indicating if the image can force its container to adapt its size
          * @see http://doc.babylonjs.com/how_to/gui#image
@@ -1650,7 +1656,9 @@ declare module "babylonjs-gui/2D/controls/image" {
         get stretch(): number;
         set stretch(value: number);
         /** @hidden */
-        _rotate90(n: number): Image;
+        _rotate90(n: number, preserveProperties?: boolean): Image;
+        private _handleRotationForSVGImage;
+        private _rotate90SourceProperties;
         /**
          * Gets or sets the internal DOM image used to render the control
          */
@@ -3080,6 +3088,8 @@ declare module "babylonjs-gui/2D/controls/sliders/imageScrollBar" {
         private _thumbHeight;
         private _barImageHeight;
         private _tempMeasure;
+        /** Number of 90° rotation to apply on the images when in vertical mode */
+        num90RotationInVerticalMode: number;
         /**
          * Gets or sets the image used to render the background for horizontal bar
          */
@@ -3144,7 +3154,11 @@ declare module "babylonjs-gui/2D/controls/scrollViewers/scrollViewer" {
         private _barColor;
         private _barBackground;
         private _barImage;
+        private _horizontalBarImage;
+        private _verticalBarImage;
         private _barBackgroundImage;
+        private _horizontalBarBackgroundImage;
+        private _verticalBarBackgroundImage;
         private _barSize;
         private _window;
         private _pointerIsOver;
@@ -3156,6 +3170,8 @@ declare module "babylonjs-gui/2D/controls/scrollViewers/scrollViewer" {
         private _thumbLength;
         private _thumbHeight;
         private _barImageHeight;
+        private _horizontalBarImageHeight;
+        private _verticalBarImageHeight;
         /**
          * Gets the horizontal scrollbar
          */
@@ -3240,6 +3256,12 @@ declare module "babylonjs-gui/2D/controls/scrollViewers/scrollViewer" {
         /** Gets or sets the bar image */
         get thumbImage(): Image;
         set thumbImage(value: Image);
+        /** Gets or sets the horizontal bar image */
+        get horizontalThumbImage(): Image;
+        set horizontalThumbImage(value: Image);
+        /** Gets or sets the vertical bar image */
+        get verticalThumbImage(): Image;
+        set verticalThumbImage(value: Image);
         /** Gets or sets the size of the bar */
         get barSize(): number;
         set barSize(value: number);
@@ -3252,12 +3274,24 @@ declare module "babylonjs-gui/2D/controls/scrollViewers/scrollViewer" {
         /** Gets or sets the height of the bar image */
         get barImageHeight(): number;
         set barImageHeight(value: number);
+        /** Gets or sets the height of the horizontal bar image */
+        get horizontalBarImageHeight(): number;
+        set horizontalBarImageHeight(value: number);
+        /** Gets or sets the height of the vertical bar image */
+        get verticalBarImageHeight(): number;
+        set verticalBarImageHeight(value: number);
         /** Gets or sets the bar background */
         get barBackground(): string;
         set barBackground(color: string);
         /** Gets or sets the bar background image */
         get barImage(): Image;
         set barImage(value: Image);
+        /** Gets or sets the horizontal bar background image */
+        get horizontalBarImage(): Image;
+        set horizontalBarImage(value: Image);
+        /** Gets or sets the vertical bar background image */
+        get verticalBarImage(): Image;
+        set verticalBarImage(value: Image);
         private _setWindowPosition;
         /** @hidden */
         private _updateScroller;
@@ -5844,6 +5878,8 @@ declare module BABYLON.GUI {
         private _sourceTop;
         private _sourceWidth;
         private _sourceHeight;
+        private _svgAttributesComputationCompleted;
+        private _isSVG;
         private _cellWidth;
         private _cellHeight;
         private _cellId;
@@ -5916,6 +5952,10 @@ declare module BABYLON.GUI {
          */
         get sourceHeight(): number;
         set sourceHeight(value: number);
+        /** Indicates if the format of the image is SVG */
+        get isSVG(): boolean;
+        /** Gets the status of the SVG attributes computation (sourceLeft, sourceTop, sourceWidth, sourceHeight) */
+        get svgAttributesComputationCompleted(): boolean;
         /**
          * Gets or sets a boolean indicating if the image can force its container to adapt its size
          * @see http://doc.babylonjs.com/how_to/gui#image
@@ -5926,7 +5966,9 @@ declare module BABYLON.GUI {
         get stretch(): number;
         set stretch(value: number);
         /** @hidden */
-        _rotate90(n: number): Image;
+        _rotate90(n: number, preserveProperties?: boolean): Image;
+        private _handleRotationForSVGImage;
+        private _rotate90SourceProperties;
         /**
          * Gets or sets the internal DOM image used to render the control
          */
@@ -7282,6 +7324,8 @@ declare module BABYLON.GUI {
         private _thumbHeight;
         private _barImageHeight;
         private _tempMeasure;
+        /** Number of 90° rotation to apply on the images when in vertical mode */
+        num90RotationInVerticalMode: number;
         /**
          * Gets or sets the image used to render the background for horizontal bar
          */
@@ -7337,7 +7381,11 @@ declare module BABYLON.GUI {
         private _barColor;
         private _barBackground;
         private _barImage;
+        private _horizontalBarImage;
+        private _verticalBarImage;
         private _barBackgroundImage;
+        private _horizontalBarBackgroundImage;
+        private _verticalBarBackgroundImage;
         private _barSize;
         private _window;
         private _pointerIsOver;
@@ -7349,6 +7397,8 @@ declare module BABYLON.GUI {
         private _thumbLength;
         private _thumbHeight;
         private _barImageHeight;
+        private _horizontalBarImageHeight;
+        private _verticalBarImageHeight;
         /**
          * Gets the horizontal scrollbar
          */
@@ -7433,6 +7483,12 @@ declare module BABYLON.GUI {
         /** Gets or sets the bar image */
         get thumbImage(): Image;
         set thumbImage(value: Image);
+        /** Gets or sets the horizontal bar image */
+        get horizontalThumbImage(): Image;
+        set horizontalThumbImage(value: Image);
+        /** Gets or sets the vertical bar image */
+        get verticalThumbImage(): Image;
+        set verticalThumbImage(value: Image);
         /** Gets or sets the size of the bar */
         get barSize(): number;
         set barSize(value: number);
@@ -7445,12 +7501,24 @@ declare module BABYLON.GUI {
         /** Gets or sets the height of the bar image */
         get barImageHeight(): number;
         set barImageHeight(value: number);
+        /** Gets or sets the height of the horizontal bar image */
+        get horizontalBarImageHeight(): number;
+        set horizontalBarImageHeight(value: number);
+        /** Gets or sets the height of the vertical bar image */
+        get verticalBarImageHeight(): number;
+        set verticalBarImageHeight(value: number);
         /** Gets or sets the bar background */
         get barBackground(): string;
         set barBackground(color: string);
         /** Gets or sets the bar background image */
         get barImage(): Image;
         set barImage(value: Image);
+        /** Gets or sets the horizontal bar background image */
+        get horizontalBarImage(): Image;
+        set horizontalBarImage(value: Image);
+        /** Gets or sets the vertical bar background image */
+        get verticalBarImage(): Image;
+        set verticalBarImage(value: Image);
         private _setWindowPosition;
         /** @hidden */
         private _updateScroller;

dist/preview release/gui/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-gui",
     "description": "The Babylon.js GUI library is an extension you can use to generate interactive user interface. It is build on top of the DynamicTexture.",
-    "version": "4.1.0-beta.22",
+    "version": "4.1.0-beta.23",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-beta.22"
+        "babylonjs": "4.1.0-beta.23"
     },
     "engines": {
         "node": "*"

dist/preview release/inspector/babylon.inspector.bundle.max.js

@@ -41542,7 +41542,7 @@ var OptionsLineComponent = /** @class */ (function (_super) {
     function OptionsLineComponent(props) {
         var _this = _super.call(this, props) || this;
         _this._localChange = false;
-        _this.state = { value: props.target[props.propertyName] };
+        _this.state = { value: _this.props.extractValue ? _this.props.extractValue() : props.target[props.propertyName] };
         return _this;
     }
     OptionsLineComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
@@ -41550,7 +41550,7 @@ var OptionsLineComponent = /** @class */ (function (_super) {
             this._localChange = false;
             return true;
         }
-        var newValue = nextProps.target[nextProps.propertyName];
+        var newValue = nextProps.extractValue ? nextProps.extractValue() : nextProps.target[nextProps.propertyName];
         if (newValue != null && newValue !== nextState.value) {
             nextState.value = newValue;
             return true;
@@ -41571,15 +41571,16 @@ var OptionsLineComponent = /** @class */ (function (_super) {
     OptionsLineComponent.prototype.updateValue = function (valueString) {
         var value = parseInt(valueString);
         this._localChange = true;
-        var store = this.state.value;
+        var store = this.props.extractValue ? this.props.extractValue() : this.props.target[this.props.propertyName];
         if (!this.props.noDirectUpdate) {
             this.props.target[this.props.propertyName] = value;
         }
         this.setState({ value: value });
-        this.raiseOnPropertyChanged(value, store);
         if (this.props.onSelect) {
             this.props.onSelect(value);
         }
+        var newValue = this.props.extractValue ? this.props.extractValue() : this.props.target[this.props.propertyName];
+        this.raiseOnPropertyChanged(newValue, store);
     };
     OptionsLineComponent.prototype.render = function () {
         var _this = this;
@@ -45663,7 +45664,7 @@ var PBRMaterialPropertyGridComponent = /** @class */ (function (_super) {
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__["SliderLineComponent"], { label: "Micro-surface", target: material, propertyName: "microSurface", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__["Color3LineComponent"], { label: "Emissive", target: material, propertyName: "emissiveColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_4__["Color3LineComponent"], { label: "Ambient", target: material, propertyName: "ambientColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { label: "Use physical light falloff", target: material, propertyName: "usePhysicalLightFalloff ", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { label: "Use physical light falloff", target: material, propertyName: "usePhysicalLightFalloff", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__["LineContainerComponent"], { globalState: this.props.globalState, title: "METALLIC WORKFLOW" },
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__["SliderLineComponent"], { label: "Metallic", target: material, propertyName: "metallic", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_7__["SliderLineComponent"], { label: "Metallic F0", target: material, propertyName: "metallicF0Factor", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
@@ -46513,6 +46514,17 @@ var MeshPropertyGridComponent = /** @class */ (function (_super) {
             { label: "Optimistic", value: babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_2__["AbstractMesh"].OCCLUSION_TYPE_OPTIMISTIC },
             { label: "Strict", value: babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_2__["AbstractMesh"].OCCLUSION_TYPE_STRICT },
         ];
+        var sortedMaterials = scene.materials.slice(0).sort(function (a, b) { return a.name.localeCompare(b.name); });
+        var materialOptions = sortedMaterials.map(function (m, i) {
+            return {
+                label: m.name,
+                value: i
+            };
+        });
+        materialOptions.splice(0, 0, {
+            label: "None",
+            value: -1
+        });
         return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_customPropertyGridComponent__WEBPACK_IMPORTED_MODULE_10__["CustomPropertyGridComponent"], { globalState: this.props.globalState, target: mesh, lockObject: this.props.lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__["LineContainerComponent"], { globalState: this.props.globalState, title: "GENERAL" },
@@ -46529,7 +46541,16 @@ var MeshPropertyGridComponent = /** @class */ (function (_super) {
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { label: "Is enabled", isSelected: function () { return mesh.isEnabled(); }, onSelect: function (value) { return mesh.setEnabled(value); } }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { label: "Is pickable", target: mesh, propertyName: "isPickable", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
                 mesh.material && (!mesh.material.reservedDataStore || !mesh.material.reservedDataStore.hidden) &&
-                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "Material", value: mesh.material.name, onLink: function () { return _this.onMaterialLink(); } }),
+                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "Link to material", value: mesh.material.name, onLink: function () { return _this.onMaterialLink(); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_12__["OptionsLineComponent"], { label: "Active material", options: materialOptions, target: mesh, propertyName: "material", noDirectUpdate: true, onSelect: function (value) {
+                        if (value < 0) {
+                            mesh.material = null;
+                        }
+                        else {
+                            mesh.material = sortedMaterials[value];
+                        }
+                        _this.forceUpdate();
+                    }, extractValue: function () { return mesh.material ? sortedMaterials.indexOf(mesh.material) : -1; }, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
                 mesh.isAnInstance &&
                     react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "Source", value: mesh.sourceMesh.name, onLink: function () { return _this.onSourceMeshLink(); } }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_13__["ButtonLineComponent"], { label: "Dispose", onClick: function () {
@@ -49677,6 +49698,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 __webpack_require__(/*! ./sceneExplorer.scss */ "./components/sceneExplorer/sceneExplorer.scss");
 var SceneExplorerFilterComponent = /** @class */ (function (_super) {
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(SceneExplorerFilterComponent, _super);
@@ -49898,6 +49920,16 @@ var SceneExplorerComponent = /** @class */ (function (_super) {
                 _this.props.globalState.onSelectionChangedObservable.notifyObservers(newFreeCamera);
             }
         });
+        var materialsContextMenus = [];
+        materialsContextMenus.push({
+            label: "Add new node material",
+            action: function () {
+                var newNodeMaterial = new babylonjs_Engines_engineStore__WEBPACK_IMPORTED_MODULE_2__["NodeMaterial"]("node material", scene);
+                newNodeMaterial.setToDefault();
+                newNodeMaterial.build();
+                _this.props.globalState.onSelectionChangedObservable.notifyObservers(newNodeMaterial);
+            }
+        });
         var materials = [];
         materials.push.apply(materials, scene.materials);
         if (scene.multiMaterials && scene.multiMaterials.length) {
@@ -49909,7 +49941,7 @@ var SceneExplorerComponent = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_treeItemComponent__WEBPACK_IMPORTED_MODULE_3__["TreeItemComponent"], { globalState: this.props.globalState, contextMenuItems: nodeContextMenus, extensibilityGroups: this.props.extensibilityGroups, selectedEntity: this.state.selectedEntity, items: scene.rootNodes, label: "Nodes", offset: 1, filter: this.state.filter }),
             scene.skeletons.length > 0 &&
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_treeItemComponent__WEBPACK_IMPORTED_MODULE_3__["TreeItemComponent"], { globalState: this.props.globalState, extensibilityGroups: this.props.extensibilityGroups, selectedEntity: this.state.selectedEntity, items: scene.skeletons, label: "Skeletons", offset: 1, filter: this.state.filter }),
-            react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_treeItemComponent__WEBPACK_IMPORTED_MODULE_3__["TreeItemComponent"], { globalState: this.props.globalState, extensibilityGroups: this.props.extensibilityGroups, selectedEntity: this.state.selectedEntity, items: materials, label: "Materials", offset: 1, filter: this.state.filter }),
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_treeItemComponent__WEBPACK_IMPORTED_MODULE_3__["TreeItemComponent"], { globalState: this.props.globalState, extensibilityGroups: this.props.extensibilityGroups, selectedEntity: this.state.selectedEntity, items: materials, contextMenuItems: materialsContextMenus, label: "Materials", offset: 1, filter: this.state.filter }),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_treeItemComponent__WEBPACK_IMPORTED_MODULE_3__["TreeItemComponent"], { globalState: this.props.globalState, extensibilityGroups: this.props.extensibilityGroups, selectedEntity: this.state.selectedEntity, items: textures, label: "Textures", offset: 1, filter: this.state.filter }),
             postProcessses.length > 0 &&
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_treeItemComponent__WEBPACK_IMPORTED_MODULE_3__["TreeItemComponent"], { globalState: this.props.globalState, extensibilityGroups: this.props.extensibilityGroups, selectedEntity: this.state.selectedEntity, items: postProcessses, label: "Post-processes", offset: 1, filter: this.state.filter }),

dist/preview release/inspector/babylon.inspector.d.ts

@@ -247,6 +247,7 @@ declare module INSPECTOR {
         options: ListLineOption[];
         noDirectUpdate?: boolean;
         onSelect?: (value: number) => void;
+        extractValue?: () => number;
         onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
     }
     export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {

dist/preview release/inspector/babylon.inspector.module.d.ts

@@ -284,6 +284,7 @@ declare module "babylonjs-inspector/components/actionTabs/lines/optionsLineCompo
         options: ListLineOption[];
         noDirectUpdate?: boolean;
         onSelect?: (value: number) => void;
+        extractValue?: () => number;
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
     export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
@@ -2639,6 +2640,7 @@ declare module INSPECTOR {
         options: ListLineOption[];
         noDirectUpdate?: boolean;
         onSelect?: (value: number) => void;
+        extractValue?: () => number;
         onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
     }
     export class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "4.1.0-beta.22",
+    "version": "4.1.0-beta.23",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -29,12 +29,12 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-beta.22",
-        "babylonjs-gui": "4.1.0-beta.22",
-        "babylonjs-loaders": "4.1.0-beta.22",
-        "babylonjs-materials": "4.1.0-beta.22",
-        "babylonjs-serializers": "4.1.0-beta.22",
-        "babylonjs-gltf2interface": "4.1.0-beta.22"
+        "babylonjs": "4.1.0-beta.23",
+        "babylonjs-gui": "4.1.0-beta.23",
+        "babylonjs-loaders": "4.1.0-beta.23",
+        "babylonjs-materials": "4.1.0-beta.23",
+        "babylonjs-serializers": "4.1.0-beta.23",
+        "babylonjs-gltf2interface": "4.1.0-beta.23"
     },
     "devDependencies": {
         "@types/react": "~16.7.3",

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

@@ -3363,7 +3363,7 @@ var GLTFFileLoader = /** @class */ (function () {
             throw new Error("First chunk format is not JSON");
         }
         // Bail if there are no other chunks.
-        if (dataReader.byteOffset + chunkLength === dataReader.buffer.byteLength) {
+        if (dataReader.byteOffset + chunkLength === length) {
             return dataReader.loadAsync(chunkLength).then(function () {
                 return { json: _this._parseJson(dataReader.readString(chunkLength)), bin: null };
             });
@@ -3393,7 +3393,7 @@ var GLTFFileLoader = /** @class */ (function () {
                         break;
                     }
                 }
-                if (dataReader.byteOffset !== dataReader.buffer.byteLength) {
+                if (dataReader.byteOffset !== length) {
                     return dataReader.loadAsync(8).then(readAsync);
                 }
                 return Promise.resolve(data);

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

@@ -1395,6 +1395,14 @@ var MSFT_lod = /** @class */ (function () {
         }
     };
     /** @hidden */
+    MSFT_lod.prototype.loadSceneAsync = function (context, scene) {
+        var promise = this._loader.loadSceneAsync(context, scene);
+        if (this._bufferLODs.length !== 0) {
+            this._loadBufferLOD(0);
+        }
+        return promise;
+    };
+    /** @hidden */
     MSFT_lod.prototype.loadNodeAsync = function (context, node, assign) {
         var _this = this;
         return _glTFLoader__WEBPACK_IMPORTED_MODULE_1__["GLTFLoader"].LoadExtensionAsync(context, node, this.name, function (extensionContext, extension) {
@@ -1424,9 +1432,6 @@ var MSFT_lod = /** @class */ (function () {
                 });
                 if (indexLOD === 0) {
                     firstPromise = promise;
-                    if (_this._bufferLODs.length !== 0) {
-                        _this._loadBufferLOD(0);
-                    }
                 }
                 else {
                     _this._nodeIndexLOD = null;
@@ -1477,9 +1482,6 @@ var MSFT_lod = /** @class */ (function () {
                 });
                 if (indexLOD === 0) {
                     firstPromise = promise;
-                    if (_this._bufferLODs.length !== 0) {
-                        _this._loadBufferLOD(0);
-                    }
                 }
                 else {
                     _this._materialIndexLOD = null;
@@ -4613,7 +4615,7 @@ var GLTFFileLoader = /** @class */ (function () {
             throw new Error("First chunk format is not JSON");
         }
         // Bail if there are no other chunks.
-        if (dataReader.byteOffset + chunkLength === dataReader.buffer.byteLength) {
+        if (dataReader.byteOffset + chunkLength === length) {
             return dataReader.loadAsync(chunkLength).then(function () {
                 return { json: _this._parseJson(dataReader.readString(chunkLength)), bin: null };
             });
@@ -4643,7 +4645,7 @@ var GLTFFileLoader = /** @class */ (function () {
                         break;
                     }
                 }
-                if (dataReader.byteOffset !== dataReader.buffer.byteLength) {
+                if (dataReader.byteOffset !== length) {
                     return dataReader.loadAsync(8).then(readAsync);
                 }
                 return Promise.resolve(data);

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

@@ -3955,6 +3955,14 @@ var MSFT_lod = /** @class */ (function () {
         }
     };
     /** @hidden */
+    MSFT_lod.prototype.loadSceneAsync = function (context, scene) {
+        var promise = this._loader.loadSceneAsync(context, scene);
+        if (this._bufferLODs.length !== 0) {
+            this._loadBufferLOD(0);
+        }
+        return promise;
+    };
+    /** @hidden */
     MSFT_lod.prototype.loadNodeAsync = function (context, node, assign) {
         var _this = this;
         return _glTFLoader__WEBPACK_IMPORTED_MODULE_1__["GLTFLoader"].LoadExtensionAsync(context, node, this.name, function (extensionContext, extension) {
@@ -3984,9 +3992,6 @@ var MSFT_lod = /** @class */ (function () {
                 });
                 if (indexLOD === 0) {
                     firstPromise = promise;
-                    if (_this._bufferLODs.length !== 0) {
-                        _this._loadBufferLOD(0);
-                    }
                 }
                 else {
                     _this._nodeIndexLOD = null;
@@ -4037,9 +4042,6 @@ var MSFT_lod = /** @class */ (function () {
                 });
                 if (indexLOD === 0) {
                     firstPromise = promise;
-                    if (_this._bufferLODs.length !== 0) {
-                        _this._loadBufferLOD(0);
-                    }
                 }
                 else {
                     _this._materialIndexLOD = null;
@@ -7173,7 +7175,7 @@ var GLTFFileLoader = /** @class */ (function () {
             throw new Error("First chunk format is not JSON");
         }
         // Bail if there are no other chunks.
-        if (dataReader.byteOffset + chunkLength === dataReader.buffer.byteLength) {
+        if (dataReader.byteOffset + chunkLength === length) {
             return dataReader.loadAsync(chunkLength).then(function () {
                 return { json: _this._parseJson(dataReader.readString(chunkLength)), bin: null };
             });
@@ -7203,7 +7205,7 @@ var GLTFFileLoader = /** @class */ (function () {
                         break;
                     }
                 }
-                if (dataReader.byteOffset !== dataReader.buffer.byteLength) {
+                if (dataReader.byteOffset !== length) {
                     return dataReader.loadAsync(8).then(readAsync);
                 }
                 return Promise.resolve(data);

dist/preview release/loaders/babylonjs.loaders.d.ts

@@ -1954,6 +1954,8 @@ declare module BABYLON.GLTF2.Loader.Extensions {
         /** @hidden */
         onReady(): void;
         /** @hidden */
+        loadSceneAsync(context: string, scene: IScene): Nullable<Promise<void>>;
+        /** @hidden */
         loadNodeAsync(context: string, node: INode, assign: (babylonTransformNode: TransformNode) => void): Nullable<Promise<TransformNode>>;
         /** @hidden */
         _loadMaterialAsync(context: string, material: IMaterial, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Nullable<Promise<Material>>;

dist/preview release/loaders/babylonjs.loaders.js

@@ -5322,6 +5322,14 @@ var MSFT_lod = /** @class */ (function () {
         }
     };
     /** @hidden */
+    MSFT_lod.prototype.loadSceneAsync = function (context, scene) {
+        var promise = this._loader.loadSceneAsync(context, scene);
+        if (this._bufferLODs.length !== 0) {
+            this._loadBufferLOD(0);
+        }
+        return promise;
+    };
+    /** @hidden */
     MSFT_lod.prototype.loadNodeAsync = function (context, node, assign) {
         var _this = this;
         return _glTFLoader__WEBPACK_IMPORTED_MODULE_1__["GLTFLoader"].LoadExtensionAsync(context, node, this.name, function (extensionContext, extension) {
@@ -5351,9 +5359,6 @@ var MSFT_lod = /** @class */ (function () {
                 });
                 if (indexLOD === 0) {
                     firstPromise = promise;
-                    if (_this._bufferLODs.length !== 0) {
-                        _this._loadBufferLOD(0);
-                    }
                 }
                 else {
                     _this._nodeIndexLOD = null;
@@ -5404,9 +5409,6 @@ var MSFT_lod = /** @class */ (function () {
                 });
                 if (indexLOD === 0) {
                     firstPromise = promise;
-                    if (_this._bufferLODs.length !== 0) {
-                        _this._loadBufferLOD(0);
-                    }
                 }
                 else {
                     _this._materialIndexLOD = null;
@@ -8540,7 +8542,7 @@ var GLTFFileLoader = /** @class */ (function () {
             throw new Error("First chunk format is not JSON");
         }
         // Bail if there are no other chunks.
-        if (dataReader.byteOffset + chunkLength === dataReader.buffer.byteLength) {
+        if (dataReader.byteOffset + chunkLength === length) {
             return dataReader.loadAsync(chunkLength).then(function () {
                 return { json: _this._parseJson(dataReader.readString(chunkLength)), bin: null };
             });
@@ -8570,7 +8572,7 @@ var GLTFFileLoader = /** @class */ (function () {
                         break;
                     }
                 }
-                if (dataReader.byteOffset !== dataReader.buffer.byteLength) {
+                if (dataReader.byteOffset !== length) {
                     return dataReader.loadAsync(8).then(readAsync);
                 }
                 return Promise.resolve(data);

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

@@ -2057,7 +2057,7 @@ declare module "babylonjs-loaders/glTF/2.0/Extensions/MSFT_lod" {
     import { Material } from "babylonjs/Materials/material";
     import { TransformNode } from "babylonjs/Meshes/transformNode";
     import { Mesh } from "babylonjs/Meshes/mesh";
-    import { INode, IMaterial, IBuffer } from "babylonjs-loaders/glTF/2.0/glTFLoaderInterfaces";
+    import { INode, IMaterial, IBuffer, IScene } from "babylonjs-loaders/glTF/2.0/glTFLoaderInterfaces";
     import { IGLTFLoaderExtension } from "babylonjs-loaders/glTF/2.0/glTFLoaderExtension";
     import { GLTFLoader } from "babylonjs-loaders/glTF/2.0/glTFLoader";
     import { IProperty } from 'babylonjs-gltf2interface';
@@ -2109,6 +2109,8 @@ declare module "babylonjs-loaders/glTF/2.0/Extensions/MSFT_lod" {
         /** @hidden */
         onReady(): void;
         /** @hidden */
+        loadSceneAsync(context: string, scene: IScene): Nullable<Promise<void>>;
+        /** @hidden */
         loadNodeAsync(context: string, node: INode, assign: (babylonTransformNode: TransformNode) => void): Nullable<Promise<TransformNode>>;
         /** @hidden */
         _loadMaterialAsync(context: string, material: IMaterial, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Nullable<Promise<Material>>;
@@ -4539,6 +4541,8 @@ declare module BABYLON.GLTF2.Loader.Extensions {
         /** @hidden */
         onReady(): void;
         /** @hidden */
+        loadSceneAsync(context: string, scene: IScene): Nullable<Promise<void>>;
+        /** @hidden */
         loadNodeAsync(context: string, node: INode, assign: (babylonTransformNode: TransformNode) => void): Nullable<Promise<TransformNode>>;
         /** @hidden */
         _loadMaterialAsync(context: string, material: IMaterial, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Nullable<Promise<Material>>;

dist/preview release/loaders/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-loaders",
     "description": "The Babylon.js file loaders library is an extension you can use to load different 3D file types into a Babylon scene.",
-    "version": "4.1.0-beta.22",
+    "version": "4.1.0-beta.23",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,8 +28,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "4.1.0-beta.22",
-        "babylonjs": "4.1.0-beta.22"
+        "babylonjs-gltf2interface": "4.1.0-beta.23",
+        "babylonjs": "4.1.0-beta.23"
     },
     "engines": {
         "node": "*"

dist/preview release/materialsLibrary/babylon.customMaterial.js

@@ -7,7 +7,7 @@
 		exports["babylonjs-materials"] = factory(require("babylonjs"));
 	else
 		root["MATERIALS"] = factory(root["BABYLON"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_decorators__) {
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Materials_effect__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -369,7 +369,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ShaderSpecialParts", function() { return ShaderSpecialParts; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CustomMaterial", function() { return CustomMaterial; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Materials/effect");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -604,7 +604,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ShaderAlebdoParts", function() { return ShaderAlebdoParts; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PBRCustomMaterial", function() { return PBRCustomMaterial; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Materials/effect");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -841,14 +841,14 @@ if (typeof globalObject !== "undefined") {
 
 /***/ }),
 
-/***/ "babylonjs/Misc/decorators":
+/***/ "babylonjs/Materials/effect":
 /*!****************************************************************************************************!*\
   !*** external {"root":"BABYLON","commonjs":"babylonjs","commonjs2":"babylonjs","amd":"babylonjs"} ***!
   \****************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_decorators__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Materials_effect__;
 
 /***/ })
 

dist/preview release/materialsLibrary/babylon.furMaterial.js

@@ -7,7 +7,7 @@
 		exports["babylonjs-materials"] = factory(require("babylonjs"));
 	else
 		root["MATERIALS"] = factory(root["BABYLON"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_decorators__) {
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Materials_effect__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -366,7 +366,7 @@ module.exports = g;
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "furPixelShader", function() { return furPixelShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Materials/effect");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -399,7 +399,7 @@ var furPixelShader = { name: name, shader: shader };
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "furVertexShader", function() { return furVertexShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Materials/effect");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -433,7 +433,7 @@ var furVertexShader = { name: name, shader: shader };
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FurMaterial", function() { return FurMaterial; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Materials/effect");
 /* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _fur_fragment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./fur.fragment */ "./fur/fur.fragment.ts");
 /* harmony import */ var _fur_vertex__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./fur.vertex */ "./fur/fur.vertex.ts");
@@ -965,14 +965,14 @@ if (typeof globalObject !== "undefined") {
 
 /***/ }),
 
-/***/ "babylonjs/Misc/decorators":
+/***/ "babylonjs/Materials/effect":
 /*!****************************************************************************************************!*\
   !*** external {"root":"BABYLON","commonjs":"babylonjs","commonjs2":"babylonjs","amd":"babylonjs"} ***!
   \****************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_decorators__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Materials_effect__;
 
 /***/ })
 

dist/preview release/materialsLibrary/babylon.lavaMaterial.js

@@ -7,7 +7,7 @@
 		exports["babylonjs-materials"] = factory(require("babylonjs"));
 	else
 		root["MATERIALS"] = factory(root["BABYLON"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_decorators__) {
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Materials_effect__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -383,7 +383,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "lavaPixelShader", function() { return lavaPixelShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Materials/effect");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -416,7 +416,7 @@ var lavaPixelShader = { name: name, shader: shader };
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "lavaVertexShader", function() { return lavaVertexShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Materials/effect");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -450,7 +450,7 @@ var lavaVertexShader = { name: name, shader: shader };
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LavaMaterial", function() { return LavaMaterial; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Materials/effect");
 /* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _lava_fragment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./lava.fragment */ "./lava/lava.fragment.ts");
 /* harmony import */ var _lava_vertex__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./lava.vertex */ "./lava/lava.vertex.ts");
@@ -863,14 +863,14 @@ if (typeof globalObject !== "undefined") {
 
 /***/ }),
 
-/***/ "babylonjs/Misc/decorators":
+/***/ "babylonjs/Materials/effect":
 /*!****************************************************************************************************!*\
   !*** external {"root":"BABYLON","commonjs":"babylonjs","commonjs2":"babylonjs","amd":"babylonjs"} ***!
   \****************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_decorators__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Materials_effect__;
 
 /***/ })
 

dist/preview release/materialsLibrary/babylon.skyMaterial.js

@@ -7,7 +7,7 @@
 		exports["babylonjs-materials"] = factory(require("babylonjs"));
 	else
 		root["MATERIALS"] = factory(root["BABYLON"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_decorators__) {
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Materials_effect__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -412,7 +412,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "skyPixelShader", function() { return skyPixelShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Materials/effect");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -438,7 +438,7 @@ var skyPixelShader = { name: name, shader: shader };
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "skyVertexShader", function() { return skyVertexShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Materials/effect");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -465,7 +465,7 @@ var skyVertexShader = { name: name, shader: shader };
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SkyMaterial", function() { return SkyMaterial; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Materials/effect");
 /* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _sky_fragment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./sky.fragment */ "./sky/sky.fragment.ts");
 /* harmony import */ var _sky_vertex__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./sky.vertex */ "./sky/sky.vertex.ts");
@@ -798,14 +798,14 @@ babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredT
 
 /***/ }),
 
-/***/ "babylonjs/Misc/decorators":
+/***/ "babylonjs/Materials/effect":
 /*!****************************************************************************************************!*\
   !*** external {"root":"BABYLON","commonjs":"babylonjs","commonjs2":"babylonjs","amd":"babylonjs"} ***!
   \****************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_decorators__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Materials_effect__;
 
 /***/ })
 

dist/preview release/materialsLibrary/babylon.waterMaterial.js

@@ -7,7 +7,7 @@
 		exports["babylonjs-materials"] = factory(require("babylonjs"));
 	else
 		root["MATERIALS"] = factory(root["BABYLON"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_decorators__) {
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Materials_effect__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -412,7 +412,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "waterPixelShader", function() { return waterPixelShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Materials/effect");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -448,7 +448,7 @@ var waterPixelShader = { name: name, shader: shader };
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "waterVertexShader", function() { return waterVertexShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Materials/effect");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -484,7 +484,7 @@ var waterVertexShader = { name: name, shader: shader };
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "WaterMaterial", function() { return WaterMaterial; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Misc/decorators");
+/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Materials/effect");
 /* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _water_fragment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./water.fragment */ "./water/water.fragment.ts");
 /* harmony import */ var _water_vertex__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./water.vertex */ "./water/water.vertex.ts");
@@ -1187,14 +1187,14 @@ babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredT
 
 /***/ }),
 
-/***/ "babylonjs/Misc/decorators":
+/***/ "babylonjs/Materials/effect":
 /*!****************************************************************************************************!*\
   !*** external {"root":"BABYLON","commonjs":"babylonjs","commonjs2":"babylonjs","amd":"babylonjs"} ***!
   \****************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_decorators__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Materials_effect__;
 
 /***/ })
 

dist/preview release/materialsLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-materials",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "4.1.0-beta.22",
+    "version": "4.1.0-beta.23",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-beta.22"
+        "babylonjs": "4.1.0-beta.23"
     },
     "engines": {
         "node": "*"

dist/preview release/nodeEditor/babylon.nodeEditor.d.ts

@@ -85,6 +85,7 @@ declare module NODEEDITOR {
         name: string;
         isCollapsed: boolean;
         blocks: number[];
+        comments: string;
     }
     export interface IEditorData {
         locations: INodeLocationInfo[];
@@ -138,6 +139,7 @@ declare module NODEEDITOR {
         private _headerTextElement;
         private _headerCollapseElement;
         private _headerCloseElement;
+        private _commentsElement;
         private _portContainer;
         private _outputPortContainer;
         private _inputPortContainer;
@@ -150,6 +152,7 @@ declare module NODEEDITOR {
         private _ports;
         private _controlledPorts;
         private _id;
+        private _comments;
         onExpandStateChanged: BABYLON.Observable<GraphFrame>;
         private readonly CloseSVG;
         private readonly ExpandSVG;
@@ -171,6 +174,8 @@ declare module NODEEDITOR {
         set width(value: number);
         get height(): number;
         set height(value: number);
+        get comments(): string;
+        set comments(comments: string);
         constructor(candidate: BABYLON.Nullable<HTMLDivElement>, canvas: GraphCanvasComponent, doNotCaptureNodes?: boolean);
         refresh(): void;
         addNode(node: GraphNode): void;
@@ -251,6 +256,7 @@ declare module NODEEDITOR {
         private _ctrlKeyIsPressed;
         private _oldY;
         _frameIsMoving: boolean;
+        _isLoading: boolean;
         get gridSize(): number;
         set gridSize(value: number);
         get globalState(): GlobalState;
@@ -982,6 +988,15 @@ declare module NODEEDITOR {
     }
 }
 declare module NODEEDITOR {
+    export class DiscardDisplayManager implements IDisplayManager {
+        getHeaderClass(block: BABYLON.NodeMaterialBlock): string;
+        shouldDisplayPortLabels(block: BABYLON.NodeMaterialBlock): boolean;
+        getHeaderText(block: BABYLON.NodeMaterialBlock): string;
+        getBackgroundColor(block: BABYLON.NodeMaterialBlock): string;
+        updatePreviewContent(block: BABYLON.NodeMaterialBlock, contentArea: HTMLDivElement): void;
+    }
+}
+declare module NODEEDITOR {
     export class DisplayLedger {
         static RegisteredControls: {
             [key: string]: any;
@@ -1038,7 +1053,7 @@ declare module NODEEDITOR {
         getPortForConnectionPoint(point: BABYLON.NodeMaterialConnectionPoint): BABYLON.Nullable<NodePort>;
         getLinksForConnectionPoint(point: BABYLON.NodeMaterialConnectionPoint): NodeLink[];
         private _refreshFrames;
-        private _refreshLinks;
+        _refreshLinks(): void;
         refresh(): void;
         private _onDown;
         cleanAccumulation(useCeil?: boolean): void;
@@ -1143,7 +1158,7 @@ declare module NODEEDITOR {
         private _onBuiltObserver;
         constructor(props: IPropertyTabComponentProps);
         componentDidMount(): void;
-        componentWillReceiveProps(): void;
+        componentWillUnmount(): void;
         processInputBlockUpdate(ib: BABYLON.InputBlock): void;
         renderInputBlock(block: BABYLON.InputBlock): JSX.Element | null;
         load(file: File): void;
@@ -1233,9 +1248,9 @@ declare module NODEEDITOR {
     interface IGraphEditorProps {
         globalState: GlobalState;
     }
-    type State = {
+    interface IGraphEditorState {
         showPreviewPopUp: boolean;
-    };
+    }
     interface IInternalPreviewAreaOptions extends BABYLON.IInspectorOptions {
         popup: boolean;
         original: boolean;
@@ -1243,7 +1258,7 @@ declare module NODEEDITOR {
         inspectorWidth?: string;
         embedHostWidth?: string;
     }
-    export class GraphEditor extends React.Component<IGraphEditorProps, State> {
+    export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditorState> {
         private readonly NodeWidth;
         private _graphCanvas;
         private _startX;
@@ -1259,7 +1274,6 @@ declare module NODEEDITOR {
         private _onWidgetKeyUpPointer;
         private _previewHost;
         private _popUpWindow;
-        readonly state: State;
         /**
          * Creates a node and recursivly creates its parent nodes from it's input
          * @param nodeMaterialBlock
@@ -1274,6 +1288,8 @@ declare module NODEEDITOR {
         zoomToFit(): void;
         buildMaterial(): void;
         build(): void;
+        showWaitScreen(): void;
+        hideWaitScreen(): void;
         reOrganize(editorData?: BABYLON.Nullable<IEditorData>): void;
         onPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
         onPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;

dist/preview release/nodeEditor/babylon.nodeEditor.module.d.ts

@@ -155,6 +155,7 @@ declare module "babylonjs-node-editor/nodeLocationInfo" {
         name: string;
         isCollapsed: boolean;
         blocks: number[];
+        comments: string;
     }
     export interface IEditorData {
         locations: INodeLocationInfo[];
@@ -218,6 +219,7 @@ declare module "babylonjs-node-editor/diagram/graphFrame" {
         private _headerTextElement;
         private _headerCollapseElement;
         private _headerCloseElement;
+        private _commentsElement;
         private _portContainer;
         private _outputPortContainer;
         private _inputPortContainer;
@@ -230,6 +232,7 @@ declare module "babylonjs-node-editor/diagram/graphFrame" {
         private _ports;
         private _controlledPorts;
         private _id;
+        private _comments;
         onExpandStateChanged: Observable<GraphFrame>;
         private readonly CloseSVG;
         private readonly ExpandSVG;
@@ -251,6 +254,8 @@ declare module "babylonjs-node-editor/diagram/graphFrame" {
         set width(value: number);
         get height(): number;
         set height(value: number);
+        get comments(): string;
+        set comments(comments: string);
         constructor(candidate: Nullable<HTMLDivElement>, canvas: GraphCanvasComponent, doNotCaptureNodes?: boolean);
         refresh(): void;
         addNode(node: GraphNode): void;
@@ -344,6 +349,7 @@ declare module "babylonjs-node-editor/diagram/graphCanvas" {
         private _ctrlKeyIsPressed;
         private _oldY;
         _frameIsMoving: boolean;
+        _isLoading: boolean;
         get gridSize(): number;
         set gridSize(value: number);
         get globalState(): GlobalState;
@@ -1198,6 +1204,17 @@ declare module "babylonjs-node-editor/diagram/display/textureDisplayManager" {
         updatePreviewContent(block: NodeMaterialBlock, contentArea: HTMLDivElement): void;
     }
 }
+declare module "babylonjs-node-editor/diagram/display/discardDisplayManager" {
+    import { IDisplayManager } from "babylonjs-node-editor/diagram/display/displayManager";
+    import { NodeMaterialBlock } from 'babylonjs/Materials/Node/nodeMaterialBlock';
+    export class DiscardDisplayManager implements IDisplayManager {
+        getHeaderClass(block: NodeMaterialBlock): string;
+        shouldDisplayPortLabels(block: NodeMaterialBlock): boolean;
+        getHeaderText(block: NodeMaterialBlock): string;
+        getBackgroundColor(block: NodeMaterialBlock): string;
+        updatePreviewContent(block: NodeMaterialBlock, contentArea: HTMLDivElement): void;
+    }
+}
 declare module "babylonjs-node-editor/diagram/displayLedger" {
     export class DisplayLedger {
         static RegisteredControls: {
@@ -1263,7 +1280,7 @@ declare module "babylonjs-node-editor/diagram/graphNode" {
         getPortForConnectionPoint(point: NodeMaterialConnectionPoint): Nullable<NodePort>;
         getLinksForConnectionPoint(point: NodeMaterialConnectionPoint): NodeLink[];
         private _refreshFrames;
-        private _refreshLinks;
+        _refreshLinks(): void;
         refresh(): void;
         private _onDown;
         cleanAccumulation(useCeil?: boolean): void;
@@ -1392,7 +1409,7 @@ declare module "babylonjs-node-editor/components/propertyTab/propertyTabComponen
         private _onBuiltObserver;
         constructor(props: IPropertyTabComponentProps);
         componentDidMount(): void;
-        componentWillReceiveProps(): void;
+        componentWillUnmount(): void;
         processInputBlockUpdate(ib: InputBlock): void;
         renderInputBlock(block: InputBlock): JSX.Element | null;
         load(file: File): void;
@@ -1499,9 +1516,9 @@ declare module "babylonjs-node-editor/graphEditor" {
     interface IGraphEditorProps {
         globalState: GlobalState;
     }
-    type State = {
+    interface IGraphEditorState {
         showPreviewPopUp: boolean;
-    };
+    }
     interface IInternalPreviewAreaOptions extends IInspectorOptions {
         popup: boolean;
         original: boolean;
@@ -1509,7 +1526,7 @@ declare module "babylonjs-node-editor/graphEditor" {
         inspectorWidth?: string;
         embedHostWidth?: string;
     }
-    export class GraphEditor extends React.Component<IGraphEditorProps, State> {
+    export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditorState> {
         private readonly NodeWidth;
         private _graphCanvas;
         private _startX;
@@ -1525,7 +1542,6 @@ declare module "babylonjs-node-editor/graphEditor" {
         private _onWidgetKeyUpPointer;
         private _previewHost;
         private _popUpWindow;
-        readonly state: State;
         /**
          * Creates a node and recursivly creates its parent nodes from it's input
          * @param nodeMaterialBlock
@@ -1540,6 +1556,8 @@ declare module "babylonjs-node-editor/graphEditor" {
         zoomToFit(): void;
         buildMaterial(): void;
         build(): void;
+        showWaitScreen(): void;
+        hideWaitScreen(): void;
         reOrganize(editorData?: Nullable<IEditorData>): void;
         onPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
         onPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
@@ -1687,6 +1705,7 @@ declare module NODEEDITOR {
         name: string;
         isCollapsed: boolean;
         blocks: number[];
+        comments: string;
     }
     export interface IEditorData {
         locations: INodeLocationInfo[];
@@ -1740,6 +1759,7 @@ declare module NODEEDITOR {
         private _headerTextElement;
         private _headerCollapseElement;
         private _headerCloseElement;
+        private _commentsElement;
         private _portContainer;
         private _outputPortContainer;
         private _inputPortContainer;
@@ -1752,6 +1772,7 @@ declare module NODEEDITOR {
         private _ports;
         private _controlledPorts;
         private _id;
+        private _comments;
         onExpandStateChanged: BABYLON.Observable<GraphFrame>;
         private readonly CloseSVG;
         private readonly ExpandSVG;
@@ -1773,6 +1794,8 @@ declare module NODEEDITOR {
         set width(value: number);
         get height(): number;
         set height(value: number);
+        get comments(): string;
+        set comments(comments: string);
         constructor(candidate: BABYLON.Nullable<HTMLDivElement>, canvas: GraphCanvasComponent, doNotCaptureNodes?: boolean);
         refresh(): void;
         addNode(node: GraphNode): void;
@@ -1853,6 +1876,7 @@ declare module NODEEDITOR {
         private _ctrlKeyIsPressed;
         private _oldY;
         _frameIsMoving: boolean;
+        _isLoading: boolean;
         get gridSize(): number;
         set gridSize(value: number);
         get globalState(): GlobalState;
@@ -2584,6 +2608,15 @@ declare module NODEEDITOR {
     }
 }
 declare module NODEEDITOR {
+    export class DiscardDisplayManager implements IDisplayManager {
+        getHeaderClass(block: BABYLON.NodeMaterialBlock): string;
+        shouldDisplayPortLabels(block: BABYLON.NodeMaterialBlock): boolean;
+        getHeaderText(block: BABYLON.NodeMaterialBlock): string;
+        getBackgroundColor(block: BABYLON.NodeMaterialBlock): string;
+        updatePreviewContent(block: BABYLON.NodeMaterialBlock, contentArea: HTMLDivElement): void;
+    }
+}
+declare module NODEEDITOR {
     export class DisplayLedger {
         static RegisteredControls: {
             [key: string]: any;
@@ -2640,7 +2673,7 @@ declare module NODEEDITOR {
         getPortForConnectionPoint(point: BABYLON.NodeMaterialConnectionPoint): BABYLON.Nullable<NodePort>;
         getLinksForConnectionPoint(point: BABYLON.NodeMaterialConnectionPoint): NodeLink[];
         private _refreshFrames;
-        private _refreshLinks;
+        _refreshLinks(): void;
         refresh(): void;
         private _onDown;
         cleanAccumulation(useCeil?: boolean): void;
@@ -2745,7 +2778,7 @@ declare module NODEEDITOR {
         private _onBuiltObserver;
         constructor(props: IPropertyTabComponentProps);
         componentDidMount(): void;
-        componentWillReceiveProps(): void;
+        componentWillUnmount(): void;
         processInputBlockUpdate(ib: BABYLON.InputBlock): void;
         renderInputBlock(block: BABYLON.InputBlock): JSX.Element | null;
         load(file: File): void;
@@ -2835,9 +2868,9 @@ declare module NODEEDITOR {
     interface IGraphEditorProps {
         globalState: GlobalState;
     }
-    type State = {
+    interface IGraphEditorState {
         showPreviewPopUp: boolean;
-    };
+    }
     interface IInternalPreviewAreaOptions extends BABYLON.IInspectorOptions {
         popup: boolean;
         original: boolean;
@@ -2845,7 +2878,7 @@ declare module NODEEDITOR {
         inspectorWidth?: string;
         embedHostWidth?: string;
     }
-    export class GraphEditor extends React.Component<IGraphEditorProps, State> {
+    export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditorState> {
         private readonly NodeWidth;
         private _graphCanvas;
         private _startX;
@@ -2861,7 +2894,6 @@ declare module NODEEDITOR {
         private _onWidgetKeyUpPointer;
         private _previewHost;
         private _popUpWindow;
-        readonly state: State;
         /**
          * Creates a node and recursivly creates its parent nodes from it's input
          * @param nodeMaterialBlock
@@ -2876,6 +2908,8 @@ declare module NODEEDITOR {
         zoomToFit(): void;
         buildMaterial(): void;
         build(): void;
+        showWaitScreen(): void;
+        hideWaitScreen(): void;
         reOrganize(editorData?: BABYLON.Nullable<IEditorData>): void;
         onPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
         onPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;

dist/preview release/nodeEditor/package.json

@@ -4,14 +4,14 @@
     },
     "name": "babylonjs-node-editor",
     "description": "The Babylon.js node material editor.",
-    "version": "4.1.0-beta.22",
+    "version": "4.1.0-beta.23",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
     },
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.1.0-beta.22"
+        "babylonjs": "4.1.0-beta.23"
     },
     "files": [
         "babylon.nodeEditor.max.js.map",