Home Esplora Aiuto
Registrati Accedi
zhangyupeng
/
Babylon.js
1
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

Merge branch 'master' into frame-resize

Kyle Belfort 5 anni fa
parent
a1c99921b2 84d81198de
commit
df50d32481
100 ha cambiato i file con 53450 aggiunte e 50678 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 8 0
      .mergify.yml
  2. 1 25
      .vscode/settings.json
  3. 1 0
      Playground/_redirects
  4. 445 403
      Playground/debug.html
  5. 111 92
      Playground/frame.html
  6. 49 34
      Playground/full.html
  7. 66 72
      Playground/index-local.html
  8. 398 355
      Playground/index.html
  9. 380 344
      Playground/indexStable.html
  10. 352 320
      Playground/indexWebGPU.html
  11. 5 0
      Playground/js/examples.js
  12. 16 14
      Playground/js/frame.js
  13. 0 89
      Playground/js/jquery.qrcode.js
  14. 283 160
      Playground/js/main.js
  15. 19 5
      Playground/js/monacoCreator.js
  16. 0 1237
      Playground/js/qrcode.js
  17. 0 3
      Playground/package.json
  18. 177 0
      Playground/textures/TestPack_texurePackage.json
  19. 30 4
      Tools/Gulp/tasks/gulpTasks-localRun.js
  20. 8034 7677
      dist/preview release/babylon.d.ts
  21. 2 2
      dist/preview release/babylon.js
  22. 980 111
      dist/preview release/babylon.max.js
  23. 1 1
      dist/preview release/babylon.max.js.map
  24. 16659 15923
      dist/preview release/babylon.module.d.ts
  25. 8071 7678
      dist/preview release/documentation.d.ts
  26. 1 1
      dist/preview release/glTF2Interface/package.json
  27. 35 1
      dist/preview release/gui/babylon.gui.d.ts
  28. 206 15
      dist/preview release/gui/babylon.gui.js
  29. 1 1
      dist/preview release/gui/babylon.gui.js.map
  30. 1 1
      dist/preview release/gui/babylon.gui.min.js
  31. 70 2
      dist/preview release/gui/babylon.gui.module.d.ts
  32. 2 2
      dist/preview release/gui/package.json
  33. 6 6
      dist/preview release/inspector/babylon.inspector.bundle.js
  34. 40 7
      dist/preview release/inspector/babylon.inspector.bundle.max.js
  35. 1 1
      dist/preview release/inspector/babylon.inspector.bundle.max.js.map
  36. 1 0
      dist/preview release/inspector/babylon.inspector.d.ts
  37. 2 0
      dist/preview release/inspector/babylon.inspector.module.d.ts
  38. 7 7
      dist/preview release/inspector/package.json
  39. 2 2
      dist/preview release/loaders/babylon.glTF1FileLoader.js
  40. 1 1
      dist/preview release/loaders/babylon.glTF1FileLoader.js.map
  41. 1 1
      dist/preview release/loaders/babylon.glTF1FileLoader.min.js
  42. 10 8
      dist/preview release/loaders/babylon.glTF2FileLoader.js
  43. 1 1
      dist/preview release/loaders/babylon.glTF2FileLoader.js.map
  44. 1 1
      dist/preview release/loaders/babylon.glTF2FileLoader.min.js
  45. 10 8
      dist/preview release/loaders/babylon.glTFFileLoader.js
  46. 1 1
      dist/preview release/loaders/babylon.glTFFileLoader.js.map
  47. 1 1
      dist/preview release/loaders/babylon.glTFFileLoader.min.js
  48. 2 0
      dist/preview release/loaders/babylonjs.loaders.d.ts
  49. 10 8
      dist/preview release/loaders/babylonjs.loaders.js
  50. 1 1
      dist/preview release/loaders/babylonjs.loaders.js.map
  51. 2 2
      dist/preview release/loaders/babylonjs.loaders.min.js
  52. 5 1
      dist/preview release/loaders/babylonjs.loaders.module.d.ts
  53. 3 3
      dist/preview release/loaders/package.json
  54. 1 1
      dist/preview release/materialsLibrary/babylon.cellMaterial.js
  55. 1 1
      dist/preview release/materialsLibrary/babylon.cellMaterial.js.map
  56. 1 1
      dist/preview release/materialsLibrary/babylon.cellMaterial.min.js
  57. 1 1
      dist/preview release/materialsLibrary/babylon.fireMaterial.js
  58. 1 1
      dist/preview release/materialsLibrary/babylon.fireMaterial.js.map
  59. 1 1
      dist/preview release/materialsLibrary/babylon.fireMaterial.min.js
  60. 1 1
      dist/preview release/materialsLibrary/babylon.gradientMaterial.js
  61. 1 1
      dist/preview release/materialsLibrary/babylon.gradientMaterial.js.map
  62. 1 1
      dist/preview release/materialsLibrary/babylon.gradientMaterial.min.js
  63. 1 1
      dist/preview release/materialsLibrary/babylon.gridMaterial.js
  64. 1 1
      dist/preview release/materialsLibrary/babylon.gridMaterial.js.map
  65. 1 1
      dist/preview release/materialsLibrary/babylon.gridMaterial.min.js
  66. 1 1
      dist/preview release/materialsLibrary/babylon.mixMaterial.js
  67. 1 1
      dist/preview release/materialsLibrary/babylon.mixMaterial.js.map
  68. 1 1
      dist/preview release/materialsLibrary/babylon.mixMaterial.min.js
  69. 1 1
      dist/preview release/materialsLibrary/babylon.normalMaterial.js
  70. 1 1
      dist/preview release/materialsLibrary/babylon.normalMaterial.js.map
  71. 1 1
      dist/preview release/materialsLibrary/babylon.normalMaterial.min.js
  72. 1 1
      dist/preview release/materialsLibrary/babylon.shadowOnlyMaterial.js
  73. 1 1
      dist/preview release/materialsLibrary/babylon.shadowOnlyMaterial.js.map
  74. 1 1
      dist/preview release/materialsLibrary/babylon.shadowOnlyMaterial.min.js
  75. 1 1
      dist/preview release/materialsLibrary/babylon.simpleMaterial.js
  76. 1 1
      dist/preview release/materialsLibrary/babylon.simpleMaterial.js.map
  77. 1 1
      dist/preview release/materialsLibrary/babylon.simpleMaterial.min.js
  78. 1 1
      dist/preview release/materialsLibrary/babylon.terrainMaterial.js
  79. 1 1
      dist/preview release/materialsLibrary/babylon.terrainMaterial.js.map
  80. 1 1
      dist/preview release/materialsLibrary/babylon.terrainMaterial.min.js
  81. 1 1
      dist/preview release/materialsLibrary/babylon.triPlanarMaterial.js
  82. 1 1
      dist/preview release/materialsLibrary/babylon.triPlanarMaterial.js.map
  83. 1 1
      dist/preview release/materialsLibrary/babylon.triPlanarMaterial.min.js
  84. 10 10
      dist/preview release/materialsLibrary/babylonjs.materials.js
  85. 1 1
      dist/preview release/materialsLibrary/babylonjs.materials.js.map
  86. 1 1
      dist/preview release/materialsLibrary/babylonjs.materials.min.js
  87. 2 2
      dist/preview release/materialsLibrary/package.json
  88. 22 6
      dist/preview release/nodeEditor/babylon.nodeEditor.d.ts
  89. 4 4
      dist/preview release/nodeEditor/babylon.nodeEditor.js
  90. 151 45
      dist/preview release/nodeEditor/babylon.nodeEditor.max.js
  91. 1 1
      dist/preview release/nodeEditor/babylon.nodeEditor.max.js.map
  92. 46 12
      dist/preview release/nodeEditor/babylon.nodeEditor.module.d.ts
  93. 2 2
      dist/preview release/nodeEditor/package.json
  94. 1 1
      dist/preview release/package.json
  95. 1 1
      dist/preview release/packagesSizeBaseLine.json
  96. 2 2
      dist/preview release/postProcessesLibrary/package.json
  97. 2 2
      dist/preview release/proceduralTexturesLibrary/package.json
  98. 3 3
      dist/preview release/serializers/package.json
  99. 16659 15923
      dist/preview release/viewer/babylon.module.d.ts
  100. 0 0
      dist/preview release/viewer/babylon.viewer.js

+ 8 - 0
.mergify.yml
Vedi File 

@@ -0,0 +1,8 @@
 
+pull_request_rules:

+  - name: Automatic merge

+    conditions:

+      - label=automerge

+      - status-success=CI

+    actions:

+      merge:

+        method: merge

+ 1 - 25
.vscode/settings.json
Vedi File 

@@ -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"
 
 }

+ 1 - 0
Playground/_redirects
Vedi File 

@@ -0,0 +1 @@
 
+/pg/*   /index.html   200

+ 445 - 403
Playground/debug.html
Vedi File 

@@ -1,462 +1,504 @@
 
 <!DOCTYPE html>

 <html>

 

-<!--

+    <!--

     The purpose of the Debug.html file is to debug a new Playground feature.

     // TO DO - Fix the console error : "Manifest: Line: 1, column 1, Unexpected token"

  -->

 

-<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="apple-touch-icon" sizes="57x57" href="https://www.babylonjs.com/img/favicon/apple-icon-57x57.png">

-    <link rel="apple-touch-icon" sizes="60x60" href="https://www.babylonjs.com/img/favicon/apple-icon-60x60.png">

-    <link rel="apple-touch-icon" sizes="72x72" href="https://www.babylonjs.com/img/favicon/apple-icon-72x72.png">

-    <link rel="apple-touch-icon" sizes="76x76" href="https://www.babylonjs.com/img/favicon/apple-icon-76x76.png">

-    <link rel="apple-touch-icon" sizes="114x114" href="https://www.babylonjs.com/img/favicon/apple-icon-114x114.png">

-    <link rel="apple-touch-icon" sizes="120x120" href="https://www.babylonjs.com/img/favicon/apple-icon-120x120.png">

-    <link rel="apple-touch-icon" sizes="144x144" href="https://www.babylonjs.com/img/favicon/apple-icon-144x144.png">

-    <link rel="apple-touch-icon" sizes="152x152" href="https://www.babylonjs.com/img/favicon/apple-icon-152x152.png">

-    <link rel="apple-touch-icon" sizes="180x180" href="https://www.babylonjs.com/img/favicon/apple-icon-180x180.png">

-    <link rel="icon" type="image/png" sizes="192x192"

-        href="https://www.babylonjs.com/img/favicon/android-icon-192x192.png">

-    <link rel="icon" type="image/png" sizes="32x32" href="https://www.babylonjs.com/img/favicon/favicon-32x32.png">

-    <link rel="icon" type="image/png" sizes="96x96" href="https://www.babylonjs.com/img/favicon/favicon-96x96.png">

-    <link rel="icon" type="image/png" sizes="16x16" href="https://www.babylonjs.com/img/favicon/favicon-16x16.png">

-

-    <meta name="msapplication-TileColor" content="#ffffff">

-    <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">

-    <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">

-    <meta name="theme-color" content="#ffffff">

-

-    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />

-    <link rel="stylesheet" href="css/index.css" />

-    <link rel="stylesheet" href="css/index_mobile.css" />

-

-    <!-- Pep -->

-    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>

-    <!-- For canvas/code separator -->

-    <script src="js/libs/split.js"></script>

-

-    <!-- DatGUI CDN -->

-    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>

-    <!-- jszip -->

-    <script src="js/libs/jszip.min.js"></script>

-    <script src="js/libs/fileSaver.js"></script>

-

-    <!-- Dependencies -->

-    <script src="https://preview.babylonjs.com/ammo.js"></script>

-    <script src="https://preview.babylonjs.com/recast.js"></script>

-    <script src="https://preview.babylonjs.com/cannon.js"></script>

-    <script src="https://preview.babylonjs.com/Oimo.js"></script>

-    <script src="https://preview.babylonjs.com/babylon.max.js"></script>

-    <script src="https://preview.babylonjs.com/gui/babylon.gui.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.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>

-    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.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/favicon.ico">

+

+        <link rel="apple-touch-icon" sizes="57x57" href="https://www.babylonjs.com/img/favicon/apple-icon-57x57.png">

+        <link rel="apple-touch-icon" sizes="60x60" href="https://www.babylonjs.com/img/favicon/apple-icon-60x60.png">

+        <link rel="apple-touch-icon" sizes="72x72" href="https://www.babylonjs.com/img/favicon/apple-icon-72x72.png">

+        <link rel="apple-touch-icon" sizes="76x76" href="https://www.babylonjs.com/img/favicon/apple-icon-76x76.png">

+        <link rel="apple-touch-icon" sizes="114x114"

+            href="https://www.babylonjs.com/img/favicon/apple-icon-114x114.png">

+        <link rel="apple-touch-icon" sizes="120x120"

+            href="https://www.babylonjs.com/img/favicon/apple-icon-120x120.png">

+        <link rel="apple-touch-icon" sizes="144x144"

+            href="https://www.babylonjs.com/img/favicon/apple-icon-144x144.png">

+        <link rel="apple-touch-icon" sizes="152x152"

+            href="https://www.babylonjs.com/img/favicon/apple-icon-152x152.png">

+        <link rel="apple-touch-icon" sizes="180x180"

+            href="https://www.babylonjs.com/img/favicon/apple-icon-180x180.png">

+        <link rel="icon" type="image/png" sizes="192x192"

+            href="https://www.babylonjs.com/img/favicon/android-icon-192x192.png">

+        <link rel="icon" type="image/png" sizes="32x32" href="https://www.babylonjs.com/img/favicon/favicon-32x32.png">

+        <link rel="icon" type="image/png" sizes="96x96" href="https://www.babylonjs.com/img/favicon/favicon-96x96.png">

+        <link rel="icon" type="image/png" sizes="16x16" href="https://www.babylonjs.com/img/favicon/favicon-16x16.png">

+

+        <meta name="msapplication-TileColor" content="#ffffff">

+        <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">

+        <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">

+        <meta name="theme-color" content="#ffffff">

+

+        <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />

+        <link rel="stylesheet" href="/css/index.css" />

+        <link rel="stylesheet" href="/css/index_mobile.css" />

+

+        <!-- Pep -->

+        <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>

+        <!-- For canvas/code separator -->

+        <script src="/js/libs/split.js"></script>

+

+        <!-- DatGUI CDN -->

+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>

+        <!-- jszip -->

+        <script src="/js/libs/jszip.min.js"></script>

+        <script src="/js/libs/fileSaver.js"></script>

+

+        <!-- Dependencies -->

+        <script src="https://preview.babylonjs.com/ammo.js"></script>

+        <script src="https://preview.babylonjs.com/recast.js"></script>

+        <script src="https://preview.babylonjs.com/cannon.js"></script>

+        <script src="https://preview.babylonjs.com/Oimo.js"></script>

+        <script src="https://preview.babylonjs.com/babylon.max.js"></script>

+        <script src="https://preview.babylonjs.com/gui/babylon.gui.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.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="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.18.1/min/vs/loader.js"></script>

+

+    </head>

+

+    <body>

+        <!-- Big screens -->

+        <div class="navbar navBar1280 languageJS">

+            <div class="categoryTitle">

+                <img class="logo" src="/css/img/logo_v4.svg">

+                <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>

+            </div>

 

-        <div class="category languageJS" id="JStoTSbar">

-            <div class="buttonJStoTS languageTS" id="toTSbutton1280">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="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">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="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">

-                <span id="currentVersion1280"></span>

-                <div class="toDisplay currentVersionDisplay" style="display: none"></div>

+            <div class="category right">

+                <div class="buttonPG select removeOnDiff">

+                    <span id="currentVersion1280"></span>

+                    <div class="toDisplay currentVersionDisplay" style="display: none"></div>

+                </div>

+                <div class="buttonPG select removeOnDiff"><img class="examplesButton" src="/css/img/examplesButton.svg">

+                </div>

             </div>

-            <div class="buttonPG select removeOnDiff"><img class="examplesButton" src="css/img/examplesButton.svg"></div>

         </div>

-    </div>

 

-    <!-- Mid-size screens -->

-    <div class="navbar navBar1024 languageJS">

-        <div class="categoryTitle">

-            <img class="logo" src="css/img/logo_v4.svg">

-            <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>

-        </div>

+        <!-- Mid-size screens -->

+        <div class="navbar navBar1024 languageJS">

+            <div class="categoryTitle">

+                <img class="logo" src="/css/img/logo_v4.svg">

+                <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>

+            </div>

 

-        <div class="category languageJS" id="JStoTSbar">

-            <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>

-            <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>

-            <div class="buttonSpaceKiller"></div>

-            <div class="buttonPG run removeOnDiff" id="runButton1024"><img src="css/img/playButton.svg"></div>

-            <div class="buttonPG removeOnDiff" id="saveButton1024"><img src="css/img/saveButton.svg"></div>

-            <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>

-            <div class="buttonPG removeOnDiff" id="newButton1024"><img src="css/img/newButton.svg"></div>

-            <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1024"><img src="css/img/clearButton.svg"></div>

-            <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1024"><img src="css/img/diffButton.svg"></div>

-            <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1024"><img src="css/img/previousButton.svg"></div>

-            <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1024"><img src="css/img/nextButton.svg"></div>

-            <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1024"><img src="css/img/exitButton.svg"></div>

-

-            <div class="buttonPG select removeOnDiff" id="menuButton1024"><img src="css/img/optionsButton.svg">

-                <div class="toDisplay">

-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>

-

-                        <div class="toDisplaySub">

-                            <div class="option selected" id="darkTheme1024">Dark</div>

-                            <div class="option" id="lightTheme1024">Light</div>

+            <div class="category languageJS" id="JStoTSbar">

+                <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>

+                <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>

+                <div class="buttonSpaceKiller"></div>

+                <div class="buttonPG run removeOnDiff" id="runButton1024"><img src="/css/img/playButton.svg"></div>

+                <div class="buttonPG removeOnDiff" id="saveButton1024"><img src="/css/img/saveButton.svg"></div>

+                <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1024"><img

+                        src="/css/img/downloadButton.svg"></div>

+                <div class="buttonPG removeOnDiff" id="newButton1024"><img src="/css/img/newButton.svg"></div>

+                <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1024"><img

+                        src="/css/img/clearButton.svg"></div>

+                <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1024"><img src="/css/img/diffButton.svg">

+                </div>

+                <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1024"><img

+                        src="/css/img/previousButton.svg"></div>

+                <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1024"><img

+                        src="/css/img/nextButton.svg"></div>

+                <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1024"><img

+                        src="/css/img/exitButton.svg"></div>

+

+                <div class="buttonPG select removeOnDiff" id="menuButton1024"><img src="/css/img/optionsButton.svg">

+                    <div class="toDisplay">

+                        <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>

+

+                            <div class="toDisplaySub">

+                                <div class="option selected" id="darkTheme1024">Dark</div>

+                                <div class="option" id="lightTheme1024">Light</div>

+                            </div>

                         </div>

-                    </div>

-                    <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">

-                <span id="currentVersion1024"></span>

-                <div class="toDisplay currentVersionDisplay" style="display: none">

+            <div class="category right">

+                <div class="buttonPG select removeOnDiff">

+                    <span id="currentVersion1024"></span>

+                    <div class="toDisplay currentVersionDisplay" style="display: none">

+                    </div>

+                </div>

+                <div class="buttonPG select removeOnDiff"><img class="examplesButton" src="/css/img/examplesButton.svg">

                 </div>

             </div>

-            <div class="buttonPG select removeOnDiff"><img class="examplesButton" src="css/img/examplesButton.svg"></div>

         </div>

-    </div>

-

-    <!-- Mobile -->

-    <div class="navbar navBarMobile languageJS">

-        <div class="category languageJS" id="JStoTSbar">

-            <div class="buttonPG select" id="menuButtonMobile"><img src="css/img/hamburgerButton.svg">

-                <div class="toDisplay">

-                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile">TypeScript</div>

-                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile">JavaScript</div>

-                    <div class="option noSubSelect run removeOnDiff" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>

-                    <div class="option noSubSelect removeOnDiff" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>

-                    <div class="option noSubSelect removeOnDiff" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download</div>

-                    <div class="option noSubSelect removeOnDiff" id="newButtonMobile"><img src="css/img/newButton.svg">New</div>

-                    <div class="option noSubSelect removeOnDiff" id="clearButtonMobile"><img src="css/img/clearButton.svg">Clear</div>

-                    <div class="option noSubSelect removeOnDiff" id="diffButtonMobile"><img src="css/img/DiffButton.svg">Diff</div>

-                    <div class="option noSubSelect displayOnDiff" id="previousButtonMobile"><img src="css/img/previousButton.svg">Previous</div>

-                    <div class="option noSubSelect displayOnDiff" id="nextButtonMobile"><img src="css/img/nextButton.svg">Next</div>

-                    <div class="option noSubSelect displayOnDiff" id="exitButtonMobile"><img src="css/img/exitButton.svg">Exit</div>

-

-                    <div class="option noSubSelect removeOnDiff" id="debugButtonMobile"><img

-                            src="css/img/inspectorButton.svg">Inspector</div>

-                    <div class="option subSelect removeOnDiff">

-                        <img src="css/img/optionsButton.svg">

-                        <div id="currentVersionMobile"></div>

-                        <div class="toDisplaySub currentVersionDisplay">

+

+        <!-- 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://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>

-        </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 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://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 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="diffFormCompareTo">COMPARE TO</label>

-            <div class="separator"></div>

-            <input type="text" maxlength="120" id="diffFormCompareTo" placeholder="snippet ID" class="save-form-title">

+                <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 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>

+

+        <!-- jQuery -->

+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

+        <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>

+

+        <!-- Main scripts -->

+        <script src="/js/config_versions.js"></script>

+        <script src="/js/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>

+ 111 - 92
Playground/frame.html
Vedi File 

@@ -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>

+ 49 - 34
Playground/full.html
Vedi File 

@@ -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>

+ 66 - 72
Playground/index-local.html
Vedi File 

@@ -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,25 @@
 
 

     <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>

-

-    <!-- jQuery -->

-    <script src="js/libs/jquery.min.js"></script>

-    <script src="js/jquery.qrcode.js"></script>

-    <script src="js/qrcode.js"></script>

+    <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>

 

     <!-- Main scripts -->

-    <script src="js/config_versions.js"></script>

-    <script src="js/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

+ 398 - 355
Playground/index.html
Vedi File 

@@ -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">

+        <meta name="google-site-verification" content="wcRjktXhF6DAjmhneKS7UatweBIkEF6QfqsNhAYbUgg" />

+        <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">

+

+        <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />

+        <link rel="stylesheet" href="/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://sandbox.babylonjs.com/">Sandbox</a>

+                                </div>

+                                <div class="option link">

+                                    <a target='_new' href="https://doc.babylonjs.com">Documentation</a>

+                                </div>

+                                <div class="option link">

+                                    <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>

+                                </div>

                             </div>

                         </div>

                     </div>

                 </div>

+                <div class="categoryTitle">

+                    <img class="logo" src="/css/img/logo_v4.svg">

+                    <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>

+                </div>

             </div>

-            <div 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="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.18.1/min/vs/loader.js"></script>

+

+        <!-- jQuery -->

+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

+        <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>

+

+        <!-- Main scripts -->

+        <script src="/js/config_versions.js"></script>

+        <script src="/js/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>

+ 380 - 344
Playground/indexStable.html
Vedi File 

@@ -1,394 +1,430 @@
 
 <!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="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.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>

+ 352 - 320
Playground/indexWebGPU.html
Vedi File 

@@ -1,392 +1,424 @@
 
 <!DOCTYPE html>

 <html>

 

-<head>

-    <title>Babylon.js Playground WEBGPU</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">

+    <head>

+        <title>Babylon.js Playground WEBGPU</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" />

+        <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>

+        <!-- 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>

+        <!-- 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/glslang/glslang.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>

-    <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>

-    <!-- <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.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>

+        <!-- Babylon.js -->

+        <script src="https://preview.babylonjs.com/glslang/glslang.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>

+        <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>

+        <!-- <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>

     <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script> -->

-    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>

-    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>

+        <script src="https://preview.babylonjs.com/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>

+        <!-- Monaco -->

+        <script src="/node_modules/monaco-editor/min/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>

+        <!-- 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://mackeyk24.github.io/toolkit/babylon.manager.js"></script>

-    <script src="https://mackeyk24.github.io/toolkit/babylon.navmesh.js"></script>

-</head>

+        <!-- 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>

+    </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>

+    <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="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="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">

-                <span id="currentVersion1024"></span>

-                <div class="toDisplay currentVersionDisplay" style="display: none">

+            <div class="category right">

+                <div class="buttonPG select">

+                    <span id="currentVersion1024"></span>

+                    <div class="toDisplay currentVersionDisplay" style="display: none">

+                    </div>

                 </div>

+                <div class="buttonPG select"><img class="examplesButton" src="/css/img/examplesButton.svg"></div>

             </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="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">

-                        <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" 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">

+                            <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>

-        </div>

 

-        <div id="switchWrapper" class="languageJS">

-            <img id="switchWrapperCode" src="css/img/codeButton.svg">

-            <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">

+            <div id="switchWrapper" class="languageJS">

+                <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="canvasZone">

-            <canvas touch-action="none" id="renderCanvas"></canvas>

+        <div class="wrapper">

+            <div id="jsEditor"></div>

+            <div id="canvasZone">

+                <canvas touch-action="none" id="renderCanvas"></canvas>

+            </div>

         </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="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="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 class="fpsLabel languageJS" id="fpsLabel"></div>

 

-    <div id="errorZone">

-    </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">

+        <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="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="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="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="js/libs/jquery.min.js"></script>

-    <script src="js/jquery.qrcode.js"></script>

-    <script src="js/qrcode.js"></script>

+        <!-- jQuery -->

+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

+        <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>

 

-    <!-- Main scripts -->

-    <script src="js/config_versions.js"></script>

-    <script src="js/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>

+        <!-- 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>

+    </body>

 

 </html>

+ 5 - 0
Playground/js/examples.js
Vedi File 

@@ -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");

+            }

+        })

     };

 

     /**

+ 16 - 14
Playground/js/frame.js
Vedi File 

@@ -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();

+ 0 - 89
Playground/js/jquery.qrcode.js
Vedi File 

@@ -1,89 +0,0 @@
 
-(function( $ ){

-	$.fn.qrcode = function(options) {

-		// if options is string, 

-		if( typeof options === 'string' ){

-			options	= { text: options };

-		}

-

-		// set default values

-		// typeNumber < 1 for automatic calculation

-		options	= $.extend( {}, {

-			render		: "canvas",

-			width		: 256,

-			height		: 256,

-			typeNumber	: -1,

-			correctLevel	: QRErrorCorrectLevel.H,

-                        background      : "#ffffff",

-                        foreground      : "#000000"

-		}, options);

-

-		var createCanvas	= function(){

-			// create the qrcode itself

-			var qrcode	= new QRCode(options.typeNumber, options.correctLevel);

-			qrcode.addData(options.text);

-			qrcode.make();

-

-			// create canvas element

-			var canvas	= document.createElement('canvas');

-			canvas.width	= options.width;

-			canvas.height	= options.height;

-			var ctx		= canvas.getContext('2d');

-

-			// compute tileW/tileH based on options.width/options.height

-			var tileW	= options.width  / qrcode.getModuleCount();

-			var tileH	= options.height / qrcode.getModuleCount();

-

-			// draw in the canvas

-			for( var row = 0; row < qrcode.getModuleCount(); row++ ){

-				for( var col = 0; col < qrcode.getModuleCount(); col++ ){

-					ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background;

-					var w = (Math.ceil((col+1)*tileW) - Math.floor(col*tileW));

-					var h = (Math.ceil((row+1)*tileW) - Math.floor(row*tileW));

-					ctx.fillRect(Math.round(col*tileW),Math.round(row*tileH), w, h);  

-				}	

-			}

-			// return just built canvas

-			return canvas;

-		}

-

-		// from Jon-Carlos Rivera (https://github.com/imbcmdth)

-		var createTable	= function(){

-			// create the qrcode itself

-			var qrcode	= new QRCode(options.typeNumber, options.correctLevel);

-			qrcode.addData(options.text);

-			qrcode.make();

-			

-			// create table element

-			var $table	= $('<table></table>')

-				.css("width", options.width+"px")

-				.css("height", options.height+"px")

-				.css("border", "0px")

-				.css("border-collapse", "collapse")

-				.css('background-color', options.background);

-		  

-			// compute tileS percentage

-			var tileW	= options.width / qrcode.getModuleCount();

-			var tileH	= options.height / qrcode.getModuleCount();

-

-			// draw in the table

-			for(var row = 0; row < qrcode.getModuleCount(); row++ ){

-				var $row = $('<tr></tr>').css('height', tileH+"px").appendTo($table);

-				

-				for(var col = 0; col < qrcode.getModuleCount(); col++ ){

-					$('<td></td>')

-						.css('width', tileW+"px")

-						.css('background-color', qrcode.isDark(row, col) ? options.foreground : options.background)

-						.appendTo($row);

-				}	

-			}

-			// return just built canvas

-			return $table;

-		}

-  

-

-		return this.each(function(){

-			var element	= options.render == "canvas" ? createCanvas() : createTable();

-			jQuery(element).appendTo(this);

-		});

-	};

-})( jQuery );

File diff suppressed because it is too large
+ 283 - 160
Playground/js/main.js


+ 19 - 5
Playground/js/monacoCreator.js
Vedi File 

@@ -71,27 +71,41 @@ class MonacoCreator {
 
 

         this.setupDefinitionWorker(libContent);

 

-        require.config({ paths: { 'vs': 'node_modules/monaco-editor/dev/vs' } });

+        require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.18.1/min/vs' } });

 

         require(['vs/editor/editor.main'], () => {

             this.setupMonacoCompilationPipeline(libContent);

             this.setupMonacoColorProvider();

 

-            require(['vs/language/typescript/languageFeatures'], module => {

-                this.hookMonacoCompletionProvider(module.SuggestAdapter);

-            });

+            // require(['vs/language/typescript/languageFeatures'], module => {

+            //     this.hookMonacoCompletionProvider(module.SuggestAdapter);

+            // });

 

             this.parent.main.run();

         });

     };

 

     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) {

File diff suppressed because it is too large
+ 0 - 1237
Playground/js/qrcode.js


+ 0 - 3
Playground/package.json
Vedi File 

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

File diff suppressed because it is too large
+ 177 - 0
Playground/textures/TestPack_texurePackage.json


+ 30 - 4
Tools/Gulp/tasks/gulpTasks-localRun.js
Vedi File 

@@ -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();

-              }

-            ]

+            }]

         }

     };

File diff suppressed because it is too large
+ 8034 - 7677
dist/preview release/babylon.d.ts


File diff suppressed because it is too large
+ 2 - 2
dist/preview release/babylon.js


File diff suppressed because it is too large
+ 980 - 111
dist/preview release/babylon.max.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/babylon.max.js.map


File diff suppressed because it is too large
+ 16659 - 15923
dist/preview release/babylon.module.d.ts


File diff suppressed because it is too large
+ 8071 - 7678
dist/preview release/documentation.d.ts


+ 1 - 1
dist/preview release/glTF2Interface/package.json
Vedi File 

@@ -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"

+ 35 - 1
dist/preview release/gui/babylon.gui.d.ts
Vedi File 

@@ -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;

+ 206 - 15
dist/preview release/gui/babylon.gui.js
Vedi File 

@@ -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 */

File diff suppressed because it is too large
+ 1 - 1
dist/preview release/gui/babylon.gui.js.map


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/gui/babylon.gui.min.js


+ 70 - 2
dist/preview release/gui/babylon.gui.module.d.ts
Vedi File 

@@ -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;

+ 2 - 2
dist/preview release/gui/package.json
Vedi File 

@@ -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": "*"

File diff suppressed because it is too large
+ 6 - 6
dist/preview release/inspector/babylon.inspector.bundle.js


+ 40 - 7
dist/preview release/inspector/babylon.inspector.bundle.max.js
Vedi File 

@@ -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 || "no name").localeCompare(b.name || "no name"); });

+        var materialOptions = sortedMaterials.map(function (m, i) {

+            return {

+                label: m.name || "no 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,17 @@ 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(); } }),

+                !mesh.isAnInstance &&

+                    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 +49699,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 +49921,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 +49942,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 }),

File diff suppressed because it is too large
+ 1 - 1
dist/preview release/inspector/babylon.inspector.bundle.max.js.map


+ 1 - 0
dist/preview release/inspector/babylon.inspector.d.ts
Vedi File 

@@ -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, {

+ 2 - 0
dist/preview release/inspector/babylon.inspector.module.d.ts
Vedi File 

@@ -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, {

+ 7 - 7
dist/preview release/inspector/package.json
Vedi File 

@@ -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",

+ 2 - 2
dist/preview release/loaders/babylon.glTF1FileLoader.js
Vedi File 

@@ -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);

File diff suppressed because it is too large
+ 1 - 1
dist/preview release/loaders/babylon.glTF1FileLoader.js.map


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/loaders/babylon.glTF1FileLoader.min.js


+ 10 - 8
dist/preview release/loaders/babylon.glTF2FileLoader.js
Vedi File 

@@ -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);

File diff suppressed because it is too large
+ 1 - 1
dist/preview release/loaders/babylon.glTF2FileLoader.js.map


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/loaders/babylon.glTF2FileLoader.min.js


+ 10 - 8
dist/preview release/loaders/babylon.glTFFileLoader.js
Vedi File 

@@ -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);

File diff suppressed because it is too large
+ 1 - 1
dist/preview release/loaders/babylon.glTFFileLoader.js.map


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/loaders/babylon.glTFFileLoader.min.js


+ 2 - 0
dist/preview release/loaders/babylonjs.loaders.d.ts
Vedi File 

@@ -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>>;

+ 10 - 8
dist/preview release/loaders/babylonjs.loaders.js
Vedi File 

@@ -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);

File diff suppressed because it is too large
+ 1 - 1
dist/preview release/loaders/babylonjs.loaders.js.map


File diff suppressed because it is too large
+ 2 - 2
dist/preview release/loaders/babylonjs.loaders.min.js


+ 5 - 1
dist/preview release/loaders/babylonjs.loaders.module.d.ts
Vedi File 

@@ -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>>;

+ 3 - 3
dist/preview release/loaders/package.json
Vedi File 

@@ -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": "*"

File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.cellMaterial.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.cellMaterial.js.map


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.cellMaterial.min.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.fireMaterial.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.fireMaterial.js.map


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.fireMaterial.min.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.gradientMaterial.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.gradientMaterial.js.map


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.gradientMaterial.min.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.gridMaterial.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.gridMaterial.js.map


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.gridMaterial.min.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.mixMaterial.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.mixMaterial.js.map


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.mixMaterial.min.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.normalMaterial.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.normalMaterial.js.map


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.normalMaterial.min.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.shadowOnlyMaterial.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.shadowOnlyMaterial.js.map


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.shadowOnlyMaterial.min.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.simpleMaterial.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.simpleMaterial.js.map


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.simpleMaterial.min.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.terrainMaterial.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.terrainMaterial.js.map


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.terrainMaterial.min.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.triPlanarMaterial.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.triPlanarMaterial.js.map


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylon.triPlanarMaterial.min.js


File diff suppressed because it is too large
+ 10 - 10
dist/preview release/materialsLibrary/babylonjs.materials.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylonjs.materials.js.map


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/materialsLibrary/babylonjs.materials.min.js


+ 2 - 2
dist/preview release/materialsLibrary/package.json
Vedi File 

@@ -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": "*"

+ 22 - 6
dist/preview release/nodeEditor/babylon.nodeEditor.d.ts
Vedi File 

@@ -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;

File diff suppressed because it is too large
+ 4 - 4
dist/preview release/nodeEditor/babylon.nodeEditor.js


File diff suppressed because it is too large
+ 151 - 45
dist/preview release/nodeEditor/babylon.nodeEditor.max.js


File diff suppressed because it is too large
+ 1 - 1
dist/preview release/nodeEditor/babylon.nodeEditor.max.js.map


+ 46 - 12
dist/preview release/nodeEditor/babylon.nodeEditor.module.d.ts
Vedi File 

@@ -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;

+ 2 - 2
dist/preview release/nodeEditor/package.json
Vedi File 

@@ -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",

+ 1 - 1
dist/preview release/package.json
Vedi File 

@@ -7,7 +7,7 @@
 
     ],
 
     "name": "babylonjs",
 
     "description": "Babylon.js is a JavaScript 3D engine based on webgl.",
 
-    "version": "4.1.0-beta.22",
 
+    "version": "4.1.0-beta.23",
 
     "repository": {
 
         "type": "git",
 
         "url": "https://github.com/BabylonJS/Babylon.js.git"

+ 1 - 1
dist/preview release/packagesSizeBaseLine.json
Vedi File 

@@ -1 +1 @@
 
-{"thinEngineOnly":112467,"engineOnly":148577,"sceneOnly":503616,"minGridMaterial":634284,"minStandardMaterial":774311}
 
+{"thinEngineOnly":112467,"engineOnly":148577,"sceneOnly":503616,"minGridMaterial":634243,"minStandardMaterial":774375}

+ 2 - 2
dist/preview release/postProcessesLibrary/package.json
Vedi File 

@@ -4,7 +4,7 @@
 
     },
 
     "name": "babylonjs-post-process",
 
     "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": "*"

+ 2 - 2
dist/preview release/proceduralTexturesLibrary/package.json
Vedi File 

@@ -4,7 +4,7 @@
 
     },
 
     "name": "babylonjs-procedural-textures",
 
     "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": "*"

+ 3 - 3
dist/preview release/serializers/package.json
Vedi File 

@@ -4,7 +4,7 @@
 
     },
 
     "name": "babylonjs-serializers",
 
     "description": "The Babylon.js serializers library is an extension you can use to serialize Babylon scenes.",
 
-    "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": "4.1.0-beta.22",
 
-        "babylonjs-gltf2interface": "4.1.0-beta.22"
 
+        "babylonjs": "4.1.0-beta.23",
 
+        "babylonjs-gltf2interface": "4.1.0-beta.23"
 
     },
 
     "engines": {
 
         "node": "*"

File diff suppressed because it is too large
+ 16659 - 15923
dist/preview release/viewer/babylon.module.d.ts


+ 0 - 0
dist/preview release/viewer/babylon.viewer.js
Vedi File


Some files were not shown because too many files changed in this diff