Merge native to webgpu

Playground/css/color_ts.css

@@ -1,4 +1,7 @@
-@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400");
+/* To change the colors of the SVG images, use this website :
+https://codepen.io/sosuke/pen/Pjoqqp */
+
+@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400");
 @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
 #waitTitle {
     color: rgb(208, 23, 211);

Playground/frame.css

@@ -41,7 +41,7 @@ canvas {
     padding: 0;
     right: 0;
     left: 0;
-    background-color: #3B789A;
+    background-color: #201936;
 }
 
 .footerRight {

Playground/css/img/canvas3Dbutton.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55"><defs><style>.cls-1{fill:none;}</style></defs><title>canvas3Dbutton</title><g id="Icon_buttons" data-name="Icon buttons"><rect class="cls-1" width="55" height="55"/><path d="M27.71,17.25l8.94,4.47V32.88l-8.94,4.48-8.94-4.48V21.72ZM27,35.47V26.7l-6.87-3.45V32ZM21,22.15l6.71,3.35,6.71-3.35L27.71,18.8ZM35.27,32V23.25L28.4,26.7v8.77Z"/></g></svg>

Playground/css/img/downloadButton.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55"><defs><style>.cls-1{fill:none;}</style></defs><title>downloadButton</title><g id="Icon_buttons" data-name="Icon buttons"><rect class="cls-1" width="55" height="55"/><path d="M32.84,28.31l-6.07,6.11-6.06-6.11.88-.88L26.15,32V17.87H27.4V32L32,27.43ZM21.15,37.87V36.62H32.4v1.25Z"/></g></svg>

Playground/css/img/examplesButton.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55"><defs><style>.cls-1{fill:none;}</style></defs><title>examplesButton</title><g id="Icon_buttons" data-name="Icon buttons"><rect class="cls-1" width="55" height="55"/><path d="M36.14,22.87V36.62H24.89v-2.5h-2.5v-2.5h-2.5V17.87H27l2.5,2.5h4.11v2.5Zm-6.25,7.5v-7.5H26.14V19.12h-5V30.37Zm2.5,2.5V21.62H31.14v10h-7.5v1.25Zm2.51-8.75H33.64v10h-7.5v1.25H34.9Zm-7.51-2.5H29L27.39,20Z"/></g></svg>

Playground/css/img/hamburgerButton.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55"><defs><style>.cls-1{fill:none;}</style></defs><title>hamburgerButton</title><g id="UI"><rect x="18.46" y="20.1" width="17.99" height="2.36"/><rect x="18.46" y="26.34" width="17.99" height="2.36"/><rect x="18.46" y="32.59" width="17.99" height="2.36"/></g><g id="Icon_buttons" data-name="Icon buttons"><rect class="cls-1" width="55" height="55"/></g></svg>

Playground/css/img/logoJS.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 630 630" style="enable-background:new 0 0 630 630;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M615,15v600H15V15H615 M630,0H0v630h630V0L630,0z"/>
+</g>
+<path class="st0" d="M423.2,492.2c12.7,20.7,29.2,36,58.4,36c24.5,0,40.2-12.3,40.2-29.2c0-20.3-16.1-27.5-43.1-39.3l-14.8-6.4
+	c-42.7-18.2-71.1-41-71.1-89.2c0-44.4,33.8-78.2,86.7-78.2c37.6,0,64.7,13.1,84.2,47.4l-46.1,29.6c-10.1-18.2-21.1-25.4-38.1-25.4
+	c-17.3,0-28.3,11-28.3,25.4c0,17.8,11,25,36.4,36l14.8,6.3c50.3,21.6,78.7,43.6,78.7,93c0,53.3-41.9,82.5-98.1,82.5
+	c-55,0-90.5-26.2-107.9-60.5L423.2,492.2z M214.1,497.3c9.3,16.5,17.8,30.5,38.1,30.5c19.5,0,31.7-7.6,31.7-37.2V289.3h59.2v202.1
+	c0,61.3-35.9,89.2-88.4,89.2c-47.4,0-74.9-24.5-88.8-54.1L214.1,497.3z"/>
+</svg>

Playground/css/img/logoTS.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 630 630" style="enable-background:new 0 0 630 630;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M491,400c-24.5-10.6-32.3-15.8-36.5-24.5c-2-4-2.7-6.9-2.7-11.8c-0.1-16.7,12.2-26.7,31.3-25.4
+		c13,0.9,21.5,6,29.6,17.8c2.7,4,5.1,6.6,5.7,6.2c16.6-10.3,44-28.7,43.8-29.5c-0.7-2.7-9.3-14-15.1-20.2
+		c-11.2-11.6-23.4-18.7-39.4-22.7c-10.9-2.7-36.7-3.5-47.8-1.4c-34.2,6.5-57.9,28.4-64.6,59.8c-1.9,9-1.3,31.3,1.1,40.2
+		c2.9,10.7,9.9,23.5,17.3,31.5c12.8,13.8,26.8,22.5,59.3,36.5c28.4,12.3,38.4,18.2,43.3,25.2c3.8,5.5,4.7,8.7,4.7,16
+		c0,8.1-2.4,13.6-8.2,18.9c-13.6,12.2-41.2,13.7-61.3,3.1c-7-3.7-18.6-14.8-23.9-22.9l-3.8-5.6l-18.1,10.5
+		c-10,5.8-20.6,11.9-23.4,13.5c-2.9,1.7-5.5,3.3-5.8,3.7c-0.7,1.2,10.6,17.9,16.4,24.3c14.8,16.4,38.8,28.9,64.1,33.4
+		c11.6,2.1,37.2,2.4,48,0.5c34.9-5.9,59.7-23.7,69.7-49.9c9.1-24.1,6.1-56.5-7.3-76.8C555.4,432.2,536.1,419.4,491,400z"/>
+	<path class="st0" d="M360,342l-0.2-25.8l-0.3-25.7l-110.1-0.3c-60.5-0.1-110.4,0.1-110.7,0.5c-0.4,0.3-0.7,12-0.7,26V342h41h41
+		v116.5V575h29h29V458.5V342h41H360z"/>
+</g>
+<g>
+	<path class="st0" d="M615,15v600H15V15H615 M630,0H0v630h630V0L630,0z"/>
+</g>
+</svg>

Playground/css/img/metadataButton.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55"><defs><style>.cls-1{fill:none;}</style></defs><title>metadataButton</title><g id="Icon_buttons" data-name="Icon buttons"><rect class="cls-1" width="55" height="55"/><path d="M17.4,21.62V20.37h1.25v1.25Zm0,10V30.37h1.25v1.25Zm3.75-11.25H37.4v1.25H21.15Zm0,5V24.12H37.4v1.25Zm0,6.25V30.37H37.4v1.25Zm0,3.75V34.12H37.4v1.25Z"/></g></svg>

Playground/css/img/newButton.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55"><defs><style>.cls-1{fill:none;}</style></defs><title>newButton</title><g id="Icon_buttons" data-name="Icon buttons"><rect class="cls-1" width="55" height="55"/><path d="M34.9,23.23V37.87H18.65v-20H29.53ZM33.65,36.62V24.12h-5v-5H19.9v17.5ZM29.9,22.87h2.86L29.9,20Z"/></g></svg>

Playground/css/img/playButton.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55"><defs><style>.cls-1{fill:none;}</style></defs><title>playButton</title><g id="Icon_buttons" data-name="Icon buttons"><rect class="cls-1" width="55" height="55"/><path d="M22.4,19.54l13.33,8.33L22.4,36.2Zm1.67,3V33.19l8.51-5.32Z"/></g></svg>

Playground/css/index.css

@@ -6,8 +6,9 @@ body {
     margin: 0;
     padding: 0;
     overflow: hidden;
-    font-family: "acumin-pro";
+    font-family: "acumin-pro-condensed";
 }
+
 #waitDiv {
     position: absolute;
     width: 100%;
@@ -15,14 +16,13 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: black;
-    opacity: 0.8;
+    background: rgba(1,1,1,.8);
+    opacity: 1;
     top:0px;
     left:0px;
     z-index: 10;
     flex-direction: column;
 }
-
 #logo-part {
     width: 20vw;
     display: grid;
@@ -30,7 +30,11 @@ body {
     grid-template-columns: 100%;
     align-items: center;
 }
-
+#waitTitle {
+    text-align: center;
+    font-size: 38px;
+    color: #BB464B;
+}
 #waitLogo {
     grid-column: 1;
     grid-row: 1;
@@ -38,7 +42,6 @@ body {
     width: 40%;
     height: 40%;
 }
-
 #waitSpinner {
     grid-column: 1;
     grid-row: 1;
@@ -74,13 +77,11 @@ body {
 100% { transform: rotate(360deg);}
 } 
 
-#waitTitle {
-    text-align: center;
-    font-size: 38px;
-    color: #BB464B;
+#embed-host {
+    z-index: 10;
 }
 .wrapper {
-    height: calc(100% - 40px - 30px); /* nvabar top and bottom*/
+    height: calc(100% - 55px - 35px); /* navbar top and bottom*/
     width: calc(100%);
     display: -ms-flexbox;
     display: flex;
@@ -136,30 +137,41 @@ body {
 }      
 
 #exampleList {
-    padding-top: 5px;
-
+    z-index: 10;
     display: none;
     position: absolute;
-    top: 40px;
+    top: 55px;
     right: 0;
     width: 400px;
-    height: calc(100% - 75px);
+    height: calc(100% - 90px); /* 55px + 35px */
     overflow-y: auto;
-
-    border-right: 1px solid #efefef;
+    background-color: white;
 }
 #exampleList #exampleBanner {
-    background-color: #E0684B;
     text-align: center;
-    padding: 10px 0;
-    margin-left: 2px;
+    padding: 1px 0;
+}
+#exampleList #exampleBanner.languageJS {
+    background-color: #201936;
+}
+#exampleList #exampleBanner.languageTS {
+    background-color: #bb464b;
 }
 #exampleList #exampleBanner h1 {
+    width: 100%;
     text-align: center;
-    font-weight: 700;
-    color: #BB464B;
-    font-size: 2em;
-    margin: .67em 0;
+    font-weight: normal;
+    color: white;
+    font-size: 25px;
+    line-height: 32px;
+}
+#exampleList #exampleBanner h1 img {
+    display: none;
+    float: right;
+    width: 36px;
+    margin-right: 10px;
+    margin-left: -45px;
+    filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
 }
 #exampleList .horizontalSeparator {
     width: 80%;
@@ -244,8 +256,7 @@ body {
 }
 
 .wrapper #jsEditor {
-    padding-top:5px;
-    height: calc(100% - 10px);
+    padding-top: 5px;
 }
 
 .wrapper #jsEditor.light {
@@ -264,21 +275,32 @@ body {
     display: block;
     font-size: 0;
 }
-#fpsLabel {
+.fpsLabel {
+    display: none;
     position: absolute;
-    right: 10px;
-    top: 50px;
-    cursor: default;
-    z-index:10;
-    background-color: #E0684B;
+    top: 80px;
+    right: 0;
+    width: 60px;
+    padding: 2px 8px 5px 0px;
+    z-index: 4;
+    background-color: #3f3461;
     color:white;
-    padding:5px;
-    border-radius: 3px;
+    font-size: 18px;
+    text-align: right;
+    cursor: default;
     pointer-events: none;
     user-select: none;
 }
+.fpsLabel.languageJS {
+    background-color: #3f3461;
+}
+.fpsLabel.languageTS {
+    background-color: #bb464b;
+}
+
 .navbar {
-    height: 40px;
+    height: 55px;
+    line-height: 55px;
     width: 100%;
     font-weight: 400;
     -webkit-user-select: none;
@@ -287,87 +309,197 @@ body {
     user-select: none;
     position: relative;
     z-index:5;
-    line-height: 40px;
-}
-.navbar.dark {
-    background-color: #333;
-    box-shadow: 0 3px 10px #000;
 }
-.navbar.light {
-    background-color: #efefef;
-    box-shadow: 0 3px 10px #999;
+.navbar a {
+    text-decoration: none;
+    color: inherit;
 }
-.navbar .title {
-    height: 40px;
-    padding-left: 10px;
-    color: #BB464B;
+.navbar .categoryTitle {
     display: inline-block;
+    width: 410px;
+    vertical-align: top;
+    background-color: #201936;
+    padding-right: 20px;
+}
+.navbar .logo {
+    vertical-align: top;
+    height: 55px;
+    float: left;
 }
 .navbar .version {
-    height: 40px;
-    display: inline-block;
-    color: #E0684B;
+    float: right;
+    vertical-align: top;
+    height: 55px;
     margin-right: 20px;
+    font-size: 20px;
+    color: #d5d2ca;
+}
+.navbar .versionSub {
+    font-size: 20px;
+    color: #fff;
+    font-weight: bold;
+}
+
+.languageJS {
+    background-color: #3f3461;
+}
+.languageTS {
+    background-color: #bb464b;
 }
+
 .navbar .category {
-    height: 40px;
-    margin: 0 15px 0 15px;
     display: inline-block;
+    vertical-align: top;
+    height: 55px;
+    color: white;
 }
 .navbar .category.right {
     position: absolute;
     right: 0;
     top: 0;
 }
-.button {
+.navbar .category.right .buttonPG.selected {
+    background-color: white;
+}
+.navbar .category.right.languageJS .examplesButton.selected img {
+    filter: invert(17%) sepia(61%) saturate(651%) hue-rotate(214deg) brightness(91%) contrast(84%);
+}
+.navbar .category.right.languageTS .examplesButton.selected img {
+    filter: invert(34%) sepia(21%) saturate(3832%) hue-rotate(324deg) brightness(88%) contrast(82%);
+}
+
+.navbar .category .buttonJStoTS {
     display: inline-block;
-    height: 25px;
-    line-height: 23px;
-    color: white;
-    background-color: #E0684B;
-    margin: 0 2px 0 2px;
-    padding: 0 10px 0 10px;
-    font-size: 0.85em;
-    border-radius: 3px;
+    vertical-align: top;
+    width: 140px;
+    height: 55px;
+    border-top-left-radius: 14px;
+    margin-left: -15px;
+    padding-right: 4px;
+    font-size: 18px;
+    text-align: center;
+    cursor: pointer;
+}
+.navbar .category .buttonJStoTS.floatLeft {
+    float: left;
 }
 
-.button i {
+.button, .buttonPG {
+    cursor: pointer;
+    display: inline-block;
+    width: 55px;
+    height: 100%;
+    vertical-align: top;
+    margin-left: -3px;
+    line-height: 100%;
+    text-align: center;
+}
+
+.button img, .buttonPG img {
+    height: 100%;
+    width: 100%;
+}
+.buttonSpaceKiller {
+    display: none;
+    width: 0;
+    margin-left: -20px;
+}
+.languageJS .buttonPG img {
+    filter: invert(57%) sepia(80%) saturate(2031%) hue-rotate(215deg) brightness(101%) contrast(101%);
+}
+.languageTS .buttonPG img {
+    filter: invert(64%) sepia(78%) saturate(940%) hue-rotate(323deg) brightness(105%) contrast(103%);
+}
+.buttonPG.run img {
+    filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+}
+.buttonPG i {
     margin-left: 10px;
+    font-size: 14px;
+    vertical-align: middle;
 }
-.button:hover {
+.buttonPG:hover {
     cursor: pointer;
-    background-color: #BB464B;
+    background-color: white;
+}
+
+.buttonPG.languageJS:hover span {
+    color: #3f3461;
+}
+
+.buttonPG.languageTS:hover span {
+    color: #bb464b;
+}
+
+.languageJS .buttonPG:hover img {
+    filter: invert(17%) sepia(61%) saturate(651%) hue-rotate(214deg) brightness(91%) contrast(84%);
 }
-.navbar .button.run {
-    height: 30px;
-    line-height: 28px;
-    background-color: #BB464B;
-    font-size: 1.0em;
+.languageTS .buttonPG:hover img {
+    filter: invert(34%) sepia(21%) saturate(3832%) hue-rotate(324deg) brightness(88%) contrast(82%);
 }
+
 .navbar .select {
     position: relative;
 }
+.navbar .select span {
+    width: 100%;
+    height: 55px;
+    line-height: 55px;
+    font-family: "acumin-pro-extra-condensed";
+    font-size: 20px;
+}
 
 .navbar .select .subSelect {
     position: relative; 
 }
-.navbar .select:after {
-    font-family: 'FontAwesome', sans-serif;
-    content: "\00a0 \00a0 \00a0 \f078";
-}
 .navbar .select .toDisplay {
-    border: 1px solid #E0684B;
+    font-family: "acumin-pro-extra-condensed";
     position: absolute;
     z-index: 10;
-    left: 0;
-    top: 25px;
-    min-width: 100%;
-    width: 150px;
+    right: 0;
+    top: 55px;
+    width: 190px;
     display: none;
+    text-transform: uppercase;
+    background-color: #201936;
+}
+.navbar .select .toDisplay.currentVersionDisplay {
+    width: 100%;
+    display: none;
+}
+.navbar .select .toDisplay.currentVersionDisplay .option {
+    margin-left: -3px;
+}
+.navbar .select .toDisplay .option {
+    font-size: 20px;
+    height: 35px;
+    line-height: 35px;
+    padding: 1px 5px 1px 15px;
+    text-align: left;
+}
+.navbar .select .toDisplay.currentVersionDisplay  .option {
+    text-transform: lowercase; 
+}
+.navbar .select .toDisplay.languageJS {
+    background-color: #3f3461;
+}
+.navbar .select .toDisplay.languageJS .option {
+    background-color: #9379e6;
+}
+.navbar .select .toDisplay.languageJS .option:hover {
+    background-color: #bfabff;
+}
+.navbar .select .toDisplay.languageTS {
+    background-color: #bb464b;
+}
+.navbar .select .toDisplay.languageTS .option {
+    background-color: #e0684b;
+}
+.navbar .select .toDisplay.languageTS .option:hover {
+    background-color: #ff7656;
 }
 
 .navbar .select .subSelect .toDisplaySub {
-    border: 1px solid #E0684B;
     position: absolute;
     z-index: 10;
     left: 100%;
@@ -375,33 +507,49 @@ body {
     min-width: 100%;
     display: none;
 }
-
-.navbar .select .toDisplay .option {
-    font-size: 0.9em;
-    height: 35px;
-    line-height: 35px;
-    padding: 0px 5px 0px 5px;
-    text-align: center;
-    border-bottom : 1px solid rgba(0,0,0,0.1);
+.navbar .select .subSelect .toDisplaySub .option {
+    background-color: white;
 }
-
-.navbar .select .toDisplay .option.light:hover {
-    cursor: pointer;
-    background-color: #d9d9d9;
+.navbar .select .subSelect .toDisplaySub.languageJS .option {
+    color: white;
+    background-color: #bfabff;
+    
 }
-
-
-.navbar .select .toDisplay .option.dark {
-    background-color: #333;
+.navbar .select .subSelect .toDisplaySub.languageJS .option.selected {
+    color: #9379e6;
+    background-color: white;
+}
+.navbar .select .subSelect .toDisplaySub.languageJS .option:hover {
     color: white;
+    background-color: #9379e6;
 }
-.navbar .select .toDisplay .option.light {
+.navbar .select .subSelect .toDisplaySub.languageTS .option {
+    color: white;
+    background-color: #ff7656;
+}
+.navbar .select .subSelect .toDisplaySub.languageTS .option.selected {
+    color: #e0684b;
     background-color: white;
-    color: #E0684B;
 }
-.navbar .select .toDisplay .option.dark:hover {
-    cursor: pointer;
-    background-color: #555;
+.navbar .select .subSelect .toDisplaySub.languageTS .option:hover {
+    color: white;
+    background-color: #e0684b;
+}
+.navbar .select .subSelect .qrCodeImage div {
+    width: 256px;
+    height: 256px;
+    padding: 2px;
+}
+.navbar .select .subSelect .qrCodeImage.languageJS div {
+    background-color: #9379e6;
+}
+.navbar .select .subSelect .qrCodeImage.languageTS div {
+    background-color: #e0684b;
+}
+
+.navbar .select .toDisplayBig.dark {
+    background-color: #333;    
+    color:white;
 }
 
 .navbar .select .toDisplayBig {
@@ -420,16 +568,6 @@ body {
     
 }
 
-.navbar .select .toDisplayBig.light {
-    background-color: white;    
-    color: #BB464B;
-}
-
-.navbar .select .toDisplayBig.dark {
-    background-color: #333;    
-    color:white;
-}
-
 .navbar .select .toDisplayBig ul {
     column-count: 3;        
     padding:0;
@@ -464,8 +602,6 @@ body {
     color: #E0684B;
 }
 
-
-
 .navbar .check:after {
     font-family: 'FontAwesome', sans-serif;
     content: "\00a0 \00a0 \00a0 \f14a";
@@ -477,12 +613,13 @@ body {
     font-family: 'FontAwesome', sans-serif;
     content: "\00a0 \00a0 \00a0 \f096";
 }
+
 #errorZone {
     display:none;
     position: absolute;
     width: 50%;
     left: 25%;
-    bottom: 40px;
+    bottom: 45px;
     background-color: #C73228;
     padding:20px;
     border-radius: 5px;
@@ -506,53 +643,58 @@ body {
 /* Navbar bottom */
 
 .navbarBottom {
-    height:30px;
-    width:100%;
-    line-height:30px;
     position:relative;
-}
-.navbarBottom.dark {
-    background-color: #333;
-}
-.navbarBottom.light {
-    background-color: #efefef;
+    height:35px;
+    width:100%;
+    line-height:35px;
+
 }
 
 .navbarBottom #statusBar {
-    line-height:30px;
+    line-height:35px;
     color: #E74C3C;
     font-size: 14px;
     padding-left:20px;
 }
 
+.navbarBottom.languageTS #statusBar {
+    color: #3f3461;
+}
 
 .navbarBottom .links {
     position:absolute;
-    right : 0;
-    top:-1px;
-    height:30px;
+    right: 0;
+    height:35px;
+    line-height: 35px;
     padding-right:20px;
 }
-.navbarBottom .links .link{
-    height:30px;
-    display:inline-block;
-    color:#999;
-    padding: 0 10px 0 10px;
-    margin : 0 5px 0 5px;
-    font-size:0.8em;
-}
-.navbarBottom .links .link.light:hover{
-    color:#999;
-    background-color:#333;
+.navbarBottom .links .link {
+    display: inline-block;
+    line-height: 35px;
+    font-size: 16px;
 }
-.navbarBottom .links .link.dark:hover{
-    color:#333;
-    background-color:#eee;
+
+.navbarBottom .links .link:hover {
+    background-color:white;
+    color: #3f3461;
 }
-.navbarBottom .links .link a{
+
+.navbarBottom .links .link a {
     text-decoration: none;
-    color:#999;
-    display: inline-block;
+    line-height: 35px;
+    padding: 6px 15px;
+    font-size: 16px;
+    color: white;
+}
+
+.navbarBottom.languageJS .links .link a:hover {
+    background-color:white;
+    color: #3f3461;
+}
+
+.navbarBottom.languageTS .links .link a:hover {
+    background-color:white;
+    color: #bb464b;
 }
 
 /* Save form & co */
@@ -568,19 +710,20 @@ body {
 }
 .save-layer .save-form {
     position: absolute;
-    top: 150px;
+    top: 80px;
     left: calc(50% - 205px);
     width: 410px;
     height: 370px;
     padding-top: 15px;
-    -webkit-border-radius: 6px;
-    -moz-border-radius: 6px;
-    border-radius: 6px;
-    background-color: rgba(27, 27, 27, 0.75);
-    border-color: #252525;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
     color: white;
     font-size: 14px;
 }
+.save-layer .save-form img {
+    display: none;
+}
 .save-layer .save-form .separator {
     width: 350px;
     border-bottom: 1px solid #999;
@@ -595,42 +738,40 @@ body {
     margin-bottom: 20px;
     padding:5px;
 }
+.save-layer .save-form .save-form-buttons div {
+    cursor: pointer;
+    display: inline-block;
+    width: 100px;
+}
+.save-layer .save-form .save-form-buttons div:hover {
+    font-weight: bold;
+}
 
-/*Media queries*/
+/* Media queries */
 
-@media (min-width: 1475px) {
-    .navBar1600 { display: block; }
-    .navBar1475 { display: none; }
-    .navBar1030 { display: none; }
-    .navBar750 { display: none; }
+@media (min-width: 1270px) {
+    .navBar1280 { display: block; }
+    .navBar1024 { display: none; }
+    .navBarMobile { display: none; }
 
     .navbar .select .toDisplayBig ul {
         column-count: 3;
     }
 }
-@media (max-width: 1475px) {
-    .navBar1600 { display: none; }
-    .navBar1475 { display: none; }
-    .navBar1030 { display: block; }
-    .navBar750 { display: none; }
+@media (max-width: 1270px) and (min-width: 1025px) {
+    .navBar1280 { display: none; }
+    .navBar1024 { display: block; }
+    .navBarMobile { display: none; }
 
-    .navbar .select .toDisplayBig ul {
-        column-count: 2;
+    .navbar .categoryTitle {
+        width: 315px;
     }
-}
-@media (max-width: 750px) {
-    .navBar1600 { display: none; }
-    .navBar1475 { display: none; }
-    .navBar1030 { display: none; }
-    .navBar750 { display: block; }
-    .removeOnPhone {
-        display : none !important;
-    }
-    .navbar .select .toDisplayBig {
-        width:350px;
-    }    
+
     .navbar .select .toDisplayBig ul {
-        column-count: 1;
+        column-count: 2;
     }
-}
 
+    .navbar .category .buttonJStoTS {
+        width: 70px;
+    }
+}

Playground/css/index_mobile.css

@@ -0,0 +1,257 @@
+@media (max-width: 1025px) {
+    .navBar1280 { display: none; }
+    .navBar1024 { display: none; }
+    .navBarMobile { display: block; }
+
+    #exampleList {
+        height: calc(100% - 40px);
+        width: 100%;
+        top: 40px;
+        bottom: 0;
+    }
+    #exampleList #exampleBanner h1 img {
+        display: block;
+    }
+    #currentVersionMobile {
+        float: left;
+    }
+    .navbarBottom {
+        display: none;
+    }
+    .wrapper {
+        height: calc(100% - 40px);
+    }
+    .wrapper #canvasZone {
+        width: 0;
+    }
+    #fpsLabel {
+        position: fixed;
+        top: 60px;
+        right: 0;
+        line-height: 32px;
+        height: 35px;
+        padding: 0;
+        padding-right: 5px;
+    }
+    .wrapper #jsEditor {
+        width: 100%;
+    }
+
+    #switchWrapper {
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        width: 40px;
+        height: 40px;
+        cursor: pointer;
+    }
+    #switchWrapper img {
+        width: 40px;
+        height: 40px;
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
+
+
+    #JStoTSbar .buttonJStoTS {
+        border-top-left-radius: 12px;
+    }
+    
+    .navbar, .navbar .category, #JStoTSbar {
+        height: 40px;
+        line-height: 40px;
+        padding: 0;
+        width: 100%;
+        background-color: #201936;
+    }
+    .navbar .category.right {
+        display: none;
+    }
+    .navbar .categoryTitle {
+        height: 40px;
+        line-height: 40px;
+        padding: 0;
+        width: calc(100% - 40px);
+        margin-left: -5px;
+    }
+    .navbar .categoryTitle .logo, .navbar .categoryTitle .version {
+        vertical-align: top;
+        height: 100%;
+        margin-right: 10px;
+    }
+    .navbar .categoryTitle .logo, .navbar .categoryTitle .logo {
+        float: left;
+    }
+    .navbar .categoryTitle .version {
+        float: right;
+    }
+    .navbar .categoryTitle .logo, .navbar .categoryTitle .version .versionSub {
+        vertical-align: top;
+    }
+
+    .navbar.languageJS .select {
+        background-color: #3f3461;
+    }
+    .navbarlanguageJS .select:active {
+        background-color: #3f3461;
+
+    }
+    .navbar.languageTS .select {
+        background-color: #bb464b;
+    }
+    .navbar.languageTS .select:active {
+        background-color: #bb464b;
+    }
+    .navbar .select, .navbar .select img {
+        width: 40px;
+        height: 40px;
+    }
+    .navbar .select img {
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
+    .navbar .select img:active {
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
+    .navbar .select img:focus {
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
+    .navbar .select img:hover {
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
+    .navbar .select:active img {
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
+    .navbar .select:focus img {
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
+    .navbar .select:hover img {
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
+    .navbar .select .toDisplay {
+        position: fixed;
+        left: 0;
+        top: 40px;
+        width: 180px;
+        height: 500px;
+        min-height: 100px;
+        max-height: calc(100% - 40px);
+        text-align: left;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+    .navbar .select .toDisplay.languageJS .option {
+        background-color: #3f3461;
+    }
+    .navbar .select .toDisplay.languageJS .option:active {
+        background-color: #9379e6;
+    }
+    .navbar .select .toDisplay.languageJS .option:hover {
+        background-color: #9379e6;
+    }
+    .navbar .select .toDisplay.languageTS .option {
+        background-color: #bb464b;
+    }
+    .navbar .select .toDisplay.languageTS .option:active {
+        background-color: #e0684b;
+    }
+    .navbar .select .toDisplay.languageTS .option:hover {
+        background-color: #e0684b;
+    }
+    .navbar .select .toDisplay #toTSbuttonMobile {
+        padding-left : 12px;
+    }
+    .navbar .select .toDisplay #toJSbuttonMobile {
+        padding-left : 12px;
+    }
+    .navbar .select .toDisplay .option {
+        padding: 1px;
+        font-size: 15px;
+        height: 33px;
+        line-height: 33px;
+        width: 180px;
+        box-sizing: border-box;
+    }
+    .navbar .select .toDisplay .option  img {
+        float: left;
+        width: auto;
+        height: 100%;
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
+    .navbar .select .toDisplay .option:nth-of-type(1) img, .navbar .select .toDisplay .option:nth-of-type(2) img {
+        width: 20px;
+        margin: 0 7px;
+        filter: none;
+    }
+
+    .navbar .select .subSelect .toDisplaySub,
+    .navbar .select .subSelect .currentVersionDisplay {
+        position: fixed;
+        top: 40px;
+        left: 180px;
+        min-width: 180px;
+        width: 180px;
+        height: auto;
+        text-align: left;
+        overflow: hidden;
+        color: white;
+    }
+    .navbar .select .subSelect .toDisplaySub .option {
+        padding-left: 5px;
+        box-sizing: border-box;
+    }
+    .navbar .select .subSelect .toDisplaySub.languageJS {
+        background-color: #9379e6;
+    }
+    .navbar .select .subSelect .toDisplaySub.languageTS {
+        background-color: #e0684b;
+    }
+    .navbar .select .subSelect .toDisplaySub.languageJS .option {
+        background-color: #9379e6;
+        color: white;
+    }
+    .navbar .select .subSelect .toDisplaySub.languageTS .option {
+        background-color: #e0684b;
+        color: white;
+    }
+    .navbar .select .subSelect .qrCodeImage div {
+        width: 180px;
+        height: 180px;
+        padding: 2px;
+    }
+    .navbar .select .subSelect .qrCodeImage div canvas {
+        width: 180px;
+        height: 180px;
+    }
+
+    .save-layer {
+        top: 40px;
+        height: calc(100% - 40px);
+    }
+    .save-layer .save-form {
+        z-index: 15;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        top: 0;
+        left: 0;
+        right: 0;
+        border-radius: 0;
+        padding-bottom: 20px;
+        box-sizing: border-box;
+    }
+    .save-layer .save-form img {
+        float: right;
+        width: 36px;
+        margin: -8px 10px 0 -45px ;
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
+    .save-layer .save-form .separator, .save-layer .save-form input, .save-layer .save-form textarea {
+        box-sizing: border-box;
+        width: calc(100% - 20px);
+        margin: 10px auto;
+    }
+    .save-layer .save-form #saveFormButtons {
+        margin-top: 15px;
+        text-transform: uppercase;
+    }
+}

Playground/debug.html

@@ -1,12 +1,17 @@
 <!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="stylesheet" href="https://use.typekit.net/cta4xsb.css">
+
     <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">
@@ -21,22 +26,30 @@
     <link rel="icon" type="image/png" sizes="32x32" href="https://www.babylonjs.com/img/favicon/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="96x96" href="https://www.babylonjs.com/img/favicon/favicon-96x96.png">
     <link rel="icon" type="image/png" sizes="16x16" href="https://www.babylonjs.com/img/favicon/favicon-16x16.png">
+
     <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
     <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
     <meta name="theme-color" content="#ffffff">
 
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
+    <link rel="stylesheet" href="css/index.css" />
+    <link rel="stylesheet" href="css/index710.css" />
+    <link rel="stylesheet" href="css/indexMobile.css" />
+
+    <!-- Pep -->
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
-    <!--For canvas/code separator-->
+    <!-- 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>
 
-    <!-- Babylon.js -->
+    <!-- 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>
@@ -46,7 +59,7 @@
     <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>
@@ -86,362 +99,260 @@
 
     <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 href="css/index.css" rel="stylesheet" />
-
     <!-- 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"></script>
+    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"></script>
 </head>
 
 <body>
-    <div class="navbar navBar1600">
-        <div class="title">
-            Babylon.js Playground
-        </div>
-        <div class="version" id="mainTitle">
-            v3.0-alpha
-        </div>
-
-        <div class="category">
-            <div class="button run" id="runButton1600">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1600">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1600">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1600">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1600">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1600">Dark</div>
-                            <div class="option" id="lightTheme1600">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1600">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option" id="safemodeToggle1600">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked" id="editorButton1600">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1600">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1600">Format code</div>
-                    <div class="option" id="minimapToggle1600">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                </div>
-            </div>
-
-            <div class="button uncheck" id="debugButton1600">Inspector</div>
-            <div class="button" id="metadataButton1600">Metadata</div>
-        </div>
-
-
-
-        <div class="category right">
-            <div class="button select">
-                <span id="currentVersion1600">Version: Latest</span>
-                <div class="toDisplay">
-                    <div class="option" onclick="setVersion('latest');">Latest</div>
-                    <div class="option" onclick="setVersion('2.5');">2.5</div>
-                </div>
-            </div>
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="navbar navBar1475">
-        <div class="title">
-            Babylon.js Playground
-        </div>
-        <div class="version" id="mainTitle">
-            v3.0-alpha
+    <!-- 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">
-            <div class="button run" id="runButton1475">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1475">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1475">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1475">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1475">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1475">Dark</div>
-                            <div class="option" id="lightTheme1475">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="button run" id="runButton1280"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1280"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
+            <div class="button select" id="menuButton1280"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay languageJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub languageJS">
+                            <div class="option selected" id="darkTheme1280">Dark</div>
+                            <div class="option" id="lightTheme1280">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1475">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">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 class="option" id='safemodeToggle1475'>Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked" id="editorButton1475">Editor
+                    <div class="option checked noSubSelect" id="editorButton1280">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1475">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1475">Format code</div>
-                    <div class="option" id="minimapToggle1475">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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" id="debugButton1475">Inspector</div>
-                    <div class="option" id="metadataButton1475">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion1475">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                    <div class="option subSelect" id="qrCodeHover1280">QR Code Link <i class="fa fa-chevron-right"
+                            aria-hidden="true"></i>
+                        <div class="toDisplaySub qrCodeImage">
+                            <div class="option" id="qrCodeImage1280">[QR Code Image]</div>
                         </div>
                     </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1280">Inspector</div>
+                    <div class="option nosubselect" id="metadataButton1280">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
             <div class="button select">
-                <span class="examplesButton">Examples</span>
+                <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>
 
-    <div class="navbar navBar1030">
-        <div class="category">
-            <div class="button run" id="runButton1030">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1030">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1030">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
+    <!-- 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">
-            <div class="button" id="saveButton1030">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1030">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
+        <div class="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="button run" id="runButton1024"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1024"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
+
+            <div class="button select" 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="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+
                         <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1030">Dark</div>
-                            <div class="option" id="lightTheme1030">Light</div>
+                            <div class="option selected" id="darkTheme1024">Dark</div>
+                            <div class="option" id="lightTheme1024">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1030">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">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 class="option" id="safemodeToggle1030">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked" id="editorButton1030">Editor
+                    <div class="option checked noSubSelect" id="editorButton1024">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1030">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1030">Format code</div>
-                    <div class="option" id="minimapToggle1030">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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" id="debugButton1030">Inspector</div>
-                    <div class="option" id="metadataButton1030">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion1030">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                    <div class="option subSelect" id="qrCodeHover1024">QR Code Link <i class="fa fa-chevron-right"
+                            aria-hidden="true"></i>
+                        <div class="toDisplaySub qrCodeImage">
+                            <div class="option" id="qrCodeImage1024">[QR Code Image]</div>
                         </div>
                     </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector</div>
+                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
             <div class="button select">
-                <span class="examplesButton">Examples</span>
+                <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>
 
-    <div class="navbar navBar750">
-        <div class="category">
-            <div class="button select">File
+    <!-- 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" id="runButton750">Run
-                        <i class="fa fa-play" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="newButton750">New
-                        <i class="fa fa-file" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="clearButton750">Clear
-                        <i class="fa fa-trash" aria-hidden="true"></i>
+                    <div 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" id="saveButton750">Save
-                        <i class="fa fa-floppy-o" aria-hidden="true"></i>
+                    <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" id="zipButton750">Zip
-                        <i class="fa fa-download" aria-hidden="true"></i>
+                    <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>
-                </div>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
                         <div class="toDisplaySub">
-                            <div class="option" id="darkTheme750">Dark</div>
-                            <div class="option" id="lightTheme750">Light</div>
+                            <div class="option selected" id="darkThemeMobile">Dark</div>
+                            <div class="option" id="lightThemeMobile">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize750">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</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>
-                    <div class="option" id="safemodeToggle750">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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" id="editorButton750">Editor
+                    <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton750">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton750">Editor Fullscreen</div>
-                    <div class="option" id="formatButton750">Format code</div>
-                    <div class="option" id="minimapToggle750">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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" id="debugButton750">Inspector</div>
-                    <div class="option" id="metadataButton750">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion750">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                    <!-- <div class="option 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="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</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>
 
+    <!-- Common things -->
+
     <div class="wrapper">
         <div id="jsEditor"></div>
         <div id="canvasZone">
             <canvas touch-action="none" id="renderCanvas"></canvas>
         </div>
     </div>
-    <div id="exampleList">
-        <div id="exampleBanner">
-            <h1>Examples</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...">
@@ -449,7 +360,7 @@
             src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
     </div>
 
-    <span class="label" id="fpsLabel">FPS</span>
+    <div class="fpsLabel languageJS" id="fpsLabel"></div>
 
     <div id="errorZone">
     </div>
@@ -476,7 +387,8 @@
     </div>
 
     <div id="saveLayer" class="save-layer">
-        <div class="save-form">
+        <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">
@@ -490,17 +402,33 @@
             <textarea id="saveFormTags" rows="4" cols="10"></textarea>
 
             <div class="save-form-buttons" id="saveFormButtons">
-
-                <div id="saveFormButtonOk" class="button">OK</div>
-                <div id="saveFormButtonCancel" class="button">Cancel</div>
+                <div id="saveFormButtonOk">OK</div>
+                <div id="saveFormButtonCancel">Cancel</div>
             </div>
         </div>
     </div>
 
+    <div id="waitDiv">
+        <div id="logo-part">
+            <img src="css/img/v4.svg" id="waitLogo" />
+            <img src="css/img/spinner.svg" id="waitSpinner" />
+        </div>
+    </div>
+
+    <!-- jQuery -->
     <script src="https://code.jquery.com/jquery.js"></script>
 
-    <script src="js/actions.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/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>
 
     <!-- Global site tag (gtag.js) - Google Analytics -->

Playground/frame.html

@@ -1,20 +1,29 @@
 <!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">
-    <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">
 
+    <!-- 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>
-    <!-- Babylon.js -->
+
+    <!-- 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>
@@ -25,7 +34,7 @@
     <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>
@@ -65,7 +74,8 @@
 
     <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="frame.css" rel="stylesheet" />
+    
+    <link rel="stylesheet" href="css/frame.css" />
 </head>
 
 <body>
@@ -85,7 +95,9 @@
         </div>
     </div>
 
+    <!-- jQuery -->
     <script src="https://code.jquery.com/jquery.js"></script>
+    
     <script src="js/frame.js"></script>
 
     <!-- Global site tag (gtag.js) - Google Analytics -->

Playground/full.html

@@ -31,7 +31,7 @@
 
     <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="frame.css" rel="stylesheet" />
+    <link href="css/frame.css" rel="stylesheet" />
 </head>
 
 <body>

Playground/index-local.html

@@ -1,21 +1,33 @@
 <!DOCTYPE html>
 <html>
 
+<!--
+    The purpose of the index-local.html file is to ???
+    // TO DO - Complete that
+    // TO DO - Fix error - "BabylonLoader.js:26 GET http://localhost/Tools/Config/config.json 404 (Not Found)". File exist, Wamp can't read it
+ -->
 
 <head>
     <title>Babylon.js Playground</title>
     <meta charset='utf-8' />
     <meta name="viewport" content="width=device-width, user-scalable=no">
-    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+    <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="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
     <!--For canvas/code separator-->
     <script src="js/libs/split.js"></script>
 
+    <!-- DatGUI -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
     <!-- jszip -->
     <script src="js/libs/jszip.min.js"></script>
     <script src="js/libs/fileSaver.js"></script>
+
     <!-- Dependencies -->
     <script src="../dist/preview%20release/ammo.js"></script>
     <script src="../dist/preview%20release/recast.js"></script>
@@ -27,361 +39,254 @@
 
     <!-- Babylon.js -->
     <script src="../Tools/DevLoader/BabylonLoader.js"></script>
-
-    <link href="css/index.css" rel="stylesheet" />
 </head>
 
 <body>
-    <div class="navbar navBar1600">
-        <div class="title">
-            Babylon.js Playground
-        </div>
-        <div class="version" id="mainTitle">
-        </div>
-
-        <div class="category">
-            <div class="button run" id="runButton1600">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1600">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1600">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
+    <!-- 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">
-            <div class="button" id="saveButton1600">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1600">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1600">Dark</div>
-                            <div class="option" id="lightTheme1600">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" id="runButton1280"><img src="css/img/playButton.svg"></div>
+            <div class="buttonPG" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
+            <div class="buttonPG removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
+            <div class="buttonPG" id="newButton1280"><img src="css/img/newButton.svg"></div>
+            <div class="buttonPG removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
+            <div class="buttonPG select" id="menuButton1280"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay languageJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub languageJS">
+                            <div class="option selected" id="darkTheme1280">Dark</div>
+                            <div class="option" id="lightTheme1280">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1600">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">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 class="option" id="safemodeToggle1600">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked" id="editorButton1600">Editor
+                    <div class="option checked noSubSelect" id="editorButton1280">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1600">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1600">Format code</div>
-                    <div class="option" id="minimapToggle1600">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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="qrCodeHover" onmouseover="showQRCode();">QR Code Link
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" style="height:auto;padding: 20px;background: white;" id="qrCodeImage">QR Code Image</div>
+                    <div class="option subSelect" id="qrCodeHover1280">QR Code Link <i class="fa fa-chevron-right"
+                            aria-hidden="true"></i>
+                        <div class="toDisplaySub qrCodeImage">
+                            <div class="option" id="qrCodeImage1280">[QR Code Image]</div>
                         </div>
                     </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1280">Inspector</div>
+                    <div class="option nosubselect" id="metadataButton1280">Metadata</div>
                 </div>
             </div>
-
-            <div class="button uncheck" id="debugButton1600">Inspector</div>
-            <div class="button" id="metadataButton1600">Metadata</div>
         </div>
 
-
-
         <div class="category right">
-            <div class="button select">
-                <span id="currentVersion1600">Version: Latest</span>
-                <div class="toDisplay">
-                    <div class="option" onclick="setVersion('latest');">Latest</div>
-                    <div class="option" onclick="setVersion('2.5');">2.5</div>
-                </div>
-            </div>
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
+            <div class="buttonPG select">
+                <span id="currentVersion1280"></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>
 
-    <div class="navbar navBar1475">
-        <div class="title">
-            Babylon.js Playground
-        </div>
-        <div class="version" id="mainTitle">
-        </div>
-
-        <div class="category">
-            <div class="button run" id="runButton1475">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1475">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1475">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1475">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1475">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
+    <!-- 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">
-            <div class="button select">Settings
+        <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" id="runButton1024"><img src="css/img/playButton.svg"></div>
+            <div class="buttonPG" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
+            <div class="buttonPG removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
+            <div class="buttonPG" id="newButton1024"><img src="css/img/newButton.svg"></div>
+            <div class="buttonPG removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
+
+            <div class="buttonPG select" 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="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+
                         <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1475">Dark</div>
-                            <div class="option" id="lightTheme1475">Light</div>
+                            <div class="option selected" id="darkTheme1024">Dark</div>
+                            <div class="option" id="lightTheme1024">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1475">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">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 class="option" id='safemodeToggle1475'>Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked" id="editorButton1475">Editor
+                    <div class="option checked noSubSelect" id="editorButton1024">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1475">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1475">Format code</div>
-                    <div class="option" id="minimapToggle1475">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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" id="debugButton1475">Inspector</div>
-                    <div class="option" id="metadataButton1475">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion1475">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                    <div class="option subSelect" id="qrCodeHover1024">QR Code Link <i class="fa fa-chevron-right"
+                            aria-hidden="true"></i>
+                        <div class="toDisplaySub qrCodeImage">
+                            <div class="option" id="qrCodeImage1024">[QR Code Image]</div>
                         </div>
                     </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector</div>
+                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
+            <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>
 
-    <div class="navbar navBar1030">
-        <div class="category">
-            <div class="button run" id="runButton1030">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1030">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1030">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1030">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1030">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
+    <!-- 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 subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1030">Dark</div>
-                            <div class="option" id="lightTheme1030">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1030">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
-                        </div>
+                    <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" id="safemodeToggle1030">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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 checked" id="editorButton1030">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1030">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1030">Format code</div>
-                    <div class="option" id="minimapToggle1030">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="debugButton1030">Inspector</div>
-                    <div class="option" id="metadataButton1030">Metadata</div>
+                    <div class="option noSubSelect" id="debugButtonMobile"><img
+                            src="css/img/inspectorButton.svg">Inspector</div>
                     <div class="option subSelect">
-                        <span id="currentVersion1030">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                        <img src="css/img/optionsButton.svg">
+                        Version<div id="currentVersionMobile"></div>
+                        <div class="toDisplaySub currentVersionDisplay">
                         </div>
                     </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="navbar navBar750">
-        <div class="category">
-            <div class="button select">File
-                <div class="toDisplay">
-                    <div class="option" id="runButton750">Run
-                        <i class="fa fa-play" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="newButton750">New
-                        <i class="fa fa-file" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="clearButton750">Clear
-                        <i class="fa fa-trash" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="saveButton750">Save
-                        <i class="fa fa-floppy-o" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="zipButton750">Zip
-                        <i class="fa fa-download" aria-hidden="true"></i>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
                         <div class="toDisplaySub">
-                            <div class="option" id="darkTheme750">Dark</div>
-                            <div class="option" id="lightTheme750">Light</div>
+                            <div class="option selected" id="darkThemeMobile">Dark</div>
+                            <div class="option" id="lightThemeMobile">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize750">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</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>
-                    <div class="option" id="safemodeToggle750">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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" id="editorButton750">Editor
+                    <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton750">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton750">Editor Fullscreen</div>
-                    <div class="option" id="formatButton750">Format code</div>
-                    <div class="option" id="minimapToggle750">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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" id="debugButton750">Inspector</div>
-                    <div class="option" id="metadataButton750">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion750">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                    <!-- <div class="option 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="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</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>
 
+    <!-- Common things -->
+
     <div class="wrapper">
         <div id="jsEditor"></div>
         <div id="canvasZone">
             <canvas touch-action="none" id="renderCanvas"></canvas>
         </div>
     </div>
-    <div id="exampleList">
-        <div id="exampleBanner">
-            <h1>Examples</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...">
@@ -389,7 +294,7 @@
             src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
     </div>
 
-    <span class="label" id="fpsLabel">FPS</span>
+    <div class="fpsLabel languageJS" id="fpsLabel"></div>
 
     <div id="errorZone">
     </div>
@@ -416,7 +321,8 @@
     </div>
 
     <div id="saveLayer" class="save-layer">
-        <div class="save-form">
+        <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">
@@ -430,37 +336,46 @@
             <textarea id="saveFormTags" rows="4" cols="10"></textarea>
 
             <div class="save-form-buttons" id="saveFormButtons">
-
-                <div id="saveFormButtonOk" class="button">OK</div>
-                <div id="saveFormButtonCancel" class="button">Cancel</div>
+                <div id="saveFormButtonOk">OK</div>
+                <div id="saveFormButtonCancel">Cancel</div>
             </div>
         </div>
     </div>
 
     <div id="waitDiv">
-        <span id="waitTitle">Babylon.js Playground
-            <BR>
-            <BR>
-            <BR>
-        </span>
         <div id="logo-part">
-            <img src="v4.svg" id="waitLogo" />
-            <img src="spinner.svg" id="waitSpinner" />
+            <img src="css/img/v4.svg" id="waitLogo" />
+            <img src="css/img/spinner.svg" id="waitSpinner" />
         </div>
     </div>
 
+    <!-- jQuery -->
     <script src="https://code.jquery.com/jquery.js"></script>
     <script src="js/jquery.qrcode.js"></script>
     <script src="js/qrcode.js"></script>
-    
 
-    <script src="js/actions.js"></script>
+    <!-- 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/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>
         BABYLONDEVTOOLS.Loader
             .require('node_modules/monaco-editor/min/vs/loader.js')
             .require('js/index.js')
-            .load(function() {
+            .load(function () {
                 BABYLON.DracoCompression.Configuration.decoder = {
                     wasmUrl: "../dist/preview%20release/draco_wasm_wrapper_gltf.js",
                     wasmBinaryUrl: "../dist/preview%20release/draco_decoder_gltf.wasm",

Playground/index.html

@@ -7,16 +7,21 @@
     <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="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-->
+    <!-- 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>
@@ -46,357 +51,245 @@
     <!-- Scene Manager -->
     <script src="https://mackeyk24.github.io/toolkit/babylon.manager.js"></script>
     <script src="https://mackeyk24.github.io/toolkit/babylon.navmesh.js"></script>
-
-    <link href="css/index.css" rel="stylesheet" />
 </head>
 
 <body>
-    <div class="navbar navBar1600">
-        <div class="title">
-            Babylon.js Playground
+    <!-- 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="version" id="mainTitle">
-        </div>
-
-        <div class="category">
-            <div class="button run" id="runButton1600">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
 
-        <div class="category">
-            <div class="button" id="newButton1600">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1600">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1600">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1600">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1600">Dark</div>
-                            <div class="option" id="lightTheme1600">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" id="runButton1280"><img src="css/img/playButton.svg"></div>
+            <div class="buttonPG" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
+            <div class="buttonPG removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
+            <div class="buttonPG" id="newButton1280"><img src="css/img/newButton.svg"></div>
+            <div class="buttonPG removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
+            <div class="buttonPG select" id="menuButton1280"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay languageJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub languageJS">
+                            <div class="option selected" id="darkTheme1280">Dark</div>
+                            <div class="option" id="lightTheme1280">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1600">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">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 class="option" id="safemodeToggle1600">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked" id="editorButton1600">Editor
+                    <div class="option checked noSubSelect" id="editorButton1280">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1600">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1600">Format code</div>
-                    <div class="option" id="minimapToggle1600">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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="qrCodeHover" onmouseover="showQRCode();">QR Code Link
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" style="height:auto;padding: 20px;background: white;" id="qrCodeImage">QR
-                                Code Image</div>
+                    <div class="option subSelect" id="qrCodeHover1280">QR Code Link <i class="fa fa-chevron-right"
+                            aria-hidden="true"></i>
+                        <div class="toDisplaySub qrCodeImage">
+                            <div class="option" id="qrCodeImage1280">[QR Code Image]</div>
                         </div>
                     </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1280">Inspector</div>
+                    <div class="option nosubselect" id="metadataButton1280">Metadata</div>
                 </div>
             </div>
-
-            <div class="button uncheck" id="debugButton1600">Inspector</div>
-            <div class="button" id="metadataButton1600">Metadata</div>
         </div>
 
-
-
         <div class="category right">
-            <div class="button select">
-                <span id="currentVersion1600">Version: Latest</span>
-                <div class="toDisplay">
-                    <div class="option" onclick="setVersion('latest');">Latest</div>
-                    <div class="option" onclick="setVersion('stable');">Stable</div>
-                    <div class="option" onclick="setVersion('webgpu');">WebGPU</div>
-                </div>
-            </div>
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
+            <div class="buttonPG select">
+                <span id="currentVersion1280"></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>
 
-    <div class="navbar navBar1475">
-        <div class="title">
-            Babylon.js Playground
-        </div>
-        <div class="version" id="mainTitle">
-        </div>
-
-        <div class="category">
-            <div class="button run" id="runButton1475">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1475">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1475">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1475">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1475">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
+    <!-- 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">
-            <div class="button select">Settings
+        <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" id="runButton1024"><img src="css/img/playButton.svg"></div>
+            <div class="buttonPG" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
+            <div class="buttonPG removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
+            <div class="buttonPG" id="newButton1024"><img src="css/img/newButton.svg"></div>
+            <div class="buttonPG removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
+
+            <div class="buttonPG select" 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="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+
                         <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1475">Dark</div>
-                            <div class="option" id="lightTheme1475">Light</div>
+                            <div class="option selected" id="darkTheme1024">Dark</div>
+                            <div class="option" id="lightTheme1024">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1475">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">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 class="option" id='safemodeToggle1475'>Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked" id="editorButton1475">Editor
+                    <div class="option checked noSubSelect" id="editorButton1024">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1475">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1475">Format code</div>
-                    <div class="option" id="minimapToggle1475">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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" id="debugButton1475">Inspector</div>
-                    <div class="option" id="metadataButton1475">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion1475">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
-                            <div class="option" onclick="setVersion('webgpu');">WebGPU</div>
+                    <div class="option subSelect" id="qrCodeHover1024">QR Code Link <i class="fa fa-chevron-right"
+                            aria-hidden="true"></i>
+                        <div class="toDisplaySub qrCodeImage">
+                            <div class="option" id="qrCodeImage1024">[QR Code Image]</div>
                         </div>
                     </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector</div>
+                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
+            <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>
 
-    <div class="navbar navBar1030">
-        <div class="category">
-            <div class="button run" id="runButton1030">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1030">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1030">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1030">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1030">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
+    <!-- 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 subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1030">Dark</div>
-                            <div class="option" id="lightTheme1030">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1030">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option" id="safemodeToggle1030">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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 checked" id="editorButton1030">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1030">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1030">Format code</div>
-                    <div class="option" id="minimapToggle1030">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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" id="debugButton1030">Inspector</div>
-                    <div class="option" id="metadataButton1030">Metadata</div>
+                    <div class="option noSubSelect" id="debugButtonMobile"><img
+                            src="css/img/inspectorButton.svg">Inspector</div>
                     <div class="option subSelect">
-                        <span id="currentVersion1030">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
-                            <div class="option" onclick="setVersion('webgpu');">WebGPU</div>
+                        <img src="css/img/optionsButton.svg">
+                        <div id="currentVersionMobile"></div>
+                        <div class="toDisplaySub currentVersionDisplay">
                         </div>
                     </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="navbar navBar750">
-        <div class="category">
-            <div class="button select">File
-                <div class="toDisplay">
-                    <div class="option" id="runButton750">Run
-                        <i class="fa fa-play" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="newButton750">New
-                        <i class="fa fa-file" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="clearButton750">Clear
-                        <i class="fa fa-trash" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="saveButton750">Save
-                        <i class="fa fa-floppy-o" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="zipButton750">Zip
-                        <i class="fa fa-download" aria-hidden="true"></i>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
                         <div class="toDisplaySub">
-                            <div class="option" id="darkTheme750">Dark</div>
-                            <div class="option" id="lightTheme750">Light</div>
+                            <div class="option selected" id="darkThemeMobile">Dark</div>
+                            <div class="option" id="lightThemeMobile">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize750">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</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>
-                    <div class="option" id="safemodeToggle750">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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" id="editorButton750">Editor
+                    <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton750">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton750">Editor Fullscreen</div>
-                    <div class="option" id="formatButton750">Format code</div>
-                    <div class="option" id="minimapToggle750">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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" id="debugButton750">Inspector</div>
-                    <div class="option" id="metadataButton750">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion750">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
-                            <div class="option" onclick="setVersion('webgpu');">WebGPU</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="category right">
-            <div class="button select">
-                <span id="currentScript750">Examples</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>
 
+    <!-- Common things -->
+
     <div class="wrapper">
         <div id="jsEditor"></div>
         <div id="canvasZone">
@@ -404,8 +297,8 @@
         </div>
     </div>
     <div id="exampleList" class="javascript">
-        <div id="exampleBanner">
-            <h1>Examples</h1>
+        <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...">
@@ -413,7 +306,7 @@
             src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
     </div>
 
-    <span class="label" id="fpsLabel">FPS</span>
+    <div class="fpsLabel languageJS" id="fpsLabel"></div>
 
     <div id="errorZone">
     </div>
@@ -440,7 +333,8 @@
     </div>
 
     <div id="saveLayer" class="save-layer">
-        <div class="save-form">
+        <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">
@@ -454,31 +348,35 @@
             <textarea id="saveFormTags" rows="4" cols="10"></textarea>
 
             <div class="save-form-buttons" id="saveFormButtons">
-
-                <div id="saveFormButtonOk" class="button">OK</div>
-                <div id="saveFormButtonCancel" class="button">Cancel</div>
+                <div id="saveFormButtonOk">OK</div>
+                <div id="saveFormButtonCancel">Cancel</div>
             </div>
         </div>
     </div>
 
     <div id="waitDiv">
-        <span id="waitTitle">Babylon.js Playground
-            <BR>
-            <BR>
-            <BR>
-        </span>
         <div id="logo-part">
-            <img src="v4.svg" id="waitLogo" />
-            <img src="spinner.svg" id="waitSpinner" />
+            <img src="css/img/v4.svg" id="waitLogo" />
+            <img src="css/img/spinner.svg" id="waitSpinner" />
         </div>
     </div>
 
+    <!-- jQuery -->
     <script src="js/libs/jquery.min.js"></script>
     <script src="js/jquery.qrcode.js"></script>
     <script src="js/qrcode.js"></script>
 
-    <script src="js/actions.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/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>
 
     <!-- Global site tag (gtag.js) - Google Analytics -->

Playground/indexStable.html

@@ -1,27 +1,40 @@
 <!DOCTYPE html>
 <html>
 
+<!--
+    The purpose of the indexStable.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">
     <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/index710.css" />
+    <link rel="stylesheet" href="css/indexMobile.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">
-    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
 
+    <!-- Pep -->
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
     <!--For canvas/code separator-->
     <script src="js/libs/split.js"></script>
 
+    <!-- DatGUI -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
     <!-- jszip -->
     <script src="js/libs/jszip.min.js"></script>
     <script src="js/libs/fileSaver.js"></script>
-    <!-- Physics -->
+
+    <!-- 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>
@@ -37,361 +50,259 @@
     <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>
     <script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
 
-    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
     <!-- Monaco -->
     <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
-    <link href="css/index.css" rel="stylesheet" />
+
+    <!-- Extensions -->
+    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
 </head>
 
 <body>
-    <div class="navbar navBar1600">
-        <div class="title">
-            Babylon.js Playground
-        </div>
-        <div class="version" id="mainTitle">
-        </div>
-
-        <div class="category">
-            <div class="button run" id="runButton1600">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1600">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1600">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1600">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1600">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1600">Dark</div>
-                            <div class="option" id="lightTheme1600">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1600">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option" id="safemodeToggle1600">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked" id="editorButton1600">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1600">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1600">Format code</div>
-                    <div class="option" id="minimapToggle1600">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                </div>
-            </div>
-
-            <div class="button uncheck" id="debugButton1600">Inspector</div>
-            <div class="button" id="metadataButton1600">Metadata</div>
-        </div>
-
-        <div class="category right">
-            <div class="button select">
-                <span id="currentVersion1600">Version: Latest</span>
-                <div class="toDisplay">
-                    <div class="option" onclick="setVersion('latest');">Latest</div>
-                    <div class="option" onclick="setVersion('stable');">Stable</div>
-                </div>
-            </div>
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="navbar navBar1475">
-        <div class="title">
-            Babylon.js Playground
-        </div>
-        <div class="version" id="mainTitle">
-        </div>
-
-        <div class="category">
-            <div class="button run" id="runButton1475">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1475">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1475">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1475">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1475">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
+    <!-- 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">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1475">Dark</div>
-                            <div class="option" id="lightTheme1475">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="button run" id="runButton1280"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1280"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
+            <div class="button select" id="menuButton1280"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay languageJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub languageJS">
+                            <div class="option selected" id="darkTheme1280">Dark</div>
+                            <div class="option" id="lightTheme1280">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1475">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">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 class="option" id='safemodeToggle1475'>Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked" id="editorButton1475">Editor
+                    <div class="option checked noSubSelect" id="editorButton1280">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1475">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1475">Format code</div>
-                    <div class="option" id="minimapToggle1475">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="debugButton1475">Inspector</div>
-                    <div class="option" id="metadataButton1475">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion1475">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
-                        </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="qrCodeHover" onmouseover="showQRCode();">QR Code Link
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" style="height:auto;padding: 20px;background: white;" id="qrCodeImage">QR Code Image</div>
+                    <div class="option subSelect" id="qrCodeHover1280">QR Code Link <i class="fa fa-chevron-right"
+                            aria-hidden="true"></i>
+                        <div class="toDisplaySub qrCodeImage">
+                            <div class="option" id="qrCodeImage1280">[QR Code Image]</div>
                         </div>
                     </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1280">Inspector</div>
+                    <div class="option nosubselect" id="metadataButton1280">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
             <div class="button select">
-                <span class="examplesButton">Examples</span>
+                <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>
 
-    <div class="navbar navBar1030">
-        <div class="category">
-            <div class="button run" id="runButton1030">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1030">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1030">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1030">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1030">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
+    <!-- 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">
-            <div class="button select">Settings
+        <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="button run" id="runButton1024"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1024"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
+
+            <div class="button select" 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="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+
                         <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1030">Dark</div>
-                            <div class="option" id="lightTheme1030">Light</div>
+                            <div class="option selected" id="darkTheme1024">Dark</div>
+                            <div class="option" id="lightTheme1024">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1030">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">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 class="option" id="safemodeToggle1030">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked" id="editorButton1030">Editor
+                    <div class="option checked noSubSelect" id="editorButton1024">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1030">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1030">Format code</div>
-                    <div class="option" id="minimapToggle1030">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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" id="debugButton1030">Inspector</div>
-                    <div class="option" id="metadataButton1030">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion1030">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
+                    <div class="option subSelect" id="qrCodeHover1024">QR Code Link <i class="fa fa-chevron-right"
+                            aria-hidden="true"></i>
+                        <div class="toDisplaySub qrCodeImage">
+                            <div class="option" id="qrCodeImage1024">[QR Code Image]</div>
                         </div>
                     </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector</div>
+                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
             <div class="button select">
-                <span class="examplesButton">Examples</span>
+                <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>
 
-    <div class="navbar navBar750">
-        <div class="category">
-            <div class="button select">File
+    <!-- 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" id="runButton750">Run
-                        <i class="fa fa-play" aria-hidden="true"></i>
+                    <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" id="newButton750">New
-                        <i class="fa fa-file" aria-hidden="true"></i>
+                    <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" id="clearButton750">Clear
-                        <i class="fa fa-trash" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="saveButton750">Save
-                        <i class="fa fa-floppy-o" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="zipButton750">Zip
-                        <i class="fa fa-download" aria-hidden="true"></i>
+                    <div 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>
-                </div>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
                         <div class="toDisplaySub">
-                            <div class="option" id="darkTheme750">Dark</div>
-                            <div class="option" id="lightTheme750">Light</div>
+                            <div class="option selected" id="darkThemeMobile">Dark</div>
+                            <div class="option" id="lightThemeMobile">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize750">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</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>
-                    <div class="option" id="safemodeToggle750">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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" id="editorButton750">Editor
+                    <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton750">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton750">Editor Fullscreen</div>
-                    <div class="option" id="formatButton750">Format code</div>
-                    <div class="option" id="minimapToggle750">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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" id="debugButton750">Inspector</div>
-                    <div class="option" id="metadataButton750">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion750">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</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="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</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>
 
+    <!-- Common things -->
+
     <div class="wrapper">
         <div id="jsEditor"></div>
         <div id="canvasZone">
             <canvas touch-action="none" id="renderCanvas"></canvas>
         </div>
     </div>
-    <div id="exampleList">
-        <div id="exampleBanner">
-            <h1>Examples</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...">
@@ -399,7 +310,7 @@
             src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
     </div>
 
-    <span class="label" id="fpsLabel">FPS</span>
+    <div class="fpsLabel languageJS" id="fpsLabel"></div>
 
     <div id="errorZone">
     </div>
@@ -426,7 +337,8 @@
     </div>
 
     <div id="saveLayer" class="save-layer">
-        <div class="save-form">
+        <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">
@@ -440,23 +352,40 @@
             <textarea id="saveFormTags" rows="4" cols="10"></textarea>
 
             <div class="save-form-buttons" id="saveFormButtons">
-
-                <div id="saveFormButtonOk" class="button">OK</div>
-                <div id="saveFormButtonCancel" class="button">Cancel</div>
+                <div id="saveFormButtonOk">OK</div>
+                <div id="saveFormButtonCancel">Cancel</div>
             </div>
         </div>
     </div>
 
+    <div id="waitDiv">
+        <div id="logo-part">
+            <img src="css/img/v4.svg" id="waitLogo" />
+            <img src="css/img/spinner.svg" id="waitSpinner" />
+        </div>
+    </div>
+
+    <!-- jQuery -->
     <script src="https://code.jquery.com/jquery.js"></script>
     <script src="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>
 
-    <script src="js/actions.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/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>
 
     <!-- Global site tag (gtag.js) - Google Analytics -->

Playground/indexWebGPU.html

@@ -5,22 +5,23 @@
     <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/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">
-    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
+    <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-->
+    <!-- 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>
@@ -51,347 +52,254 @@
     <!-- Scene Manager -->
     <script src="https://mackeyk24.github.io/toolkit/babylon.manager.js"></script>
     <script src="https://mackeyk24.github.io/toolkit/babylon.navmesh.js"></script>
-
-    <link href="css/index.css" rel="stylesheet" />
 </head>
 
 <body>
-    <div class="navbar navBar1600">
-        <div class="title">
-            Babylon.js Playground WEBGPU
-        </div>
-        <div class="version" id="mainTitle">
-        </div>
-
-        <div class="category">
-            <div class="button run" id="runButton1600">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1600">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1600">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1600">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1600">Dark</div>
-                            <div class="option" id="lightTheme1600">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1600">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option" id="safemodeToggle1600">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked" id="editorButton1600">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1600">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1600">Format code</div>
-                    <div class="option" id="minimapToggle1600">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                </div>
-            </div>
-
-            <div class="button uncheck" id="debugButton1600">Inspector</div>
-            <div class="button" id="metadataButton1600">Metadata</div>
-        </div>
-
-        <div class="category right">
-            <div class="button select">
-                <span id="currentVersion1600">Version: Latest</span>
-                <div class="toDisplay">
-                    <div class="option" onclick="setVersion('latest');">Latest</div>
-                    <div class="option" onclick="setVersion('stable');">Stable</div>
-                </div>
-            </div>
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="navbar navBar1475">
-        <div class="title">
-            Babylon.js Playground WEBGPU
-        </div>
-        <div class="version" id="mainTitle">
-        </div>
-
-        <div class="category">
-            <div class="button run" id="runButton1475">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1475">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1475">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
+    <!-- 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">
-            <div class="button" id="saveButton1475">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1475">Dark</div>
-                            <div class="option" id="lightTheme1475">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" id="runButton1280"><img src="css/img/playButton.svg"></div>
+            <div class="buttonPG" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
+            <div class="buttonPG removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
+            <div class="buttonPG" id="newButton1280"><img src="css/img/newButton.svg"></div>
+            <div class="buttonPG removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
+            <div class="buttonPG select" id="menuButton1280"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay languageJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub languageJS">
+                            <div class="option selected" id="darkTheme1280">Dark</div>
+                            <div class="option" id="lightTheme1280">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1475">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">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 class="option" id='safemodeToggle1475'>Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked" id="editorButton1475">Editor
+                    <div class="option checked noSubSelect" id="editorButton1280">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1475">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1475">Format code</div>
-                    <div class="option" id="minimapToggle1475">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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" id="debugButton1475">Inspector</div>
-                    <div class="option" id="metadataButton1475">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion1475">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" style="height:auto;padding: 20px;background: white;" id="qrCodeImage">QR Code Image</div>
+                    <div class="option subSelect" id="qrCodeHover1280">QR Code Link <i class="fa fa-chevron-right"
+                            aria-hidden="true"></i>
+                        <div class="toDisplaySub qrCodeImage">
+                            <div class="option" id="qrCodeImage1280">[QR Code Image]</div>
                         </div>
                     </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1280">Inspector</div>
+                    <div class="option nosubselect" id="metadataButton1280">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
+            <div class="buttonPG select">
+                <span id="currentVersion1280"></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>
 
-    <div class="navbar navBar1030">
-        <div class="category">
-            <div class="button run" id="runButton1030">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1030">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1030">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
+    <!-- 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">
-            <div class="button" id="saveButton1030">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
+        <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" id="runButton1024"><img src="css/img/playButton.svg"></div>
+            <div class="buttonPG" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
+            <div class="buttonPG removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
+            <div class="buttonPG" id="newButton1024"><img src="css/img/newButton.svg"></div>
+            <div class="buttonPG removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
+
+            <div class="buttonPG select" 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="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+
                         <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1030">Dark</div>
-                            <div class="option" id="lightTheme1030">Light</div>
+                            <div class="option selected" id="darkTheme1024">Dark</div>
+                            <div class="option" id="lightTheme1024">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1030">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">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 class="option" id="safemodeToggle1030">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked" id="editorButton1030">Editor
+                    <div class="option checked noSubSelect" id="editorButton1024">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1030">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1030">Format code</div>
-                    <div class="option" id="minimapToggle1030">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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" id="debugButton1030">Inspector</div>
-                    <div class="option" id="metadataButton1030">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion1030">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
+                    <div class="option subSelect" id="qrCodeHover1024">QR Code Link <i class="fa fa-chevron-right"
+                            aria-hidden="true"></i>
+                        <div class="toDisplaySub qrCodeImage">
+                            <div class="option" id="qrCodeImage1024">[QR Code Image]</div>
                         </div>
                     </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector</div>
+                    <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
+            <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>
 
-    <div class="navbar navBar750">
-        <div class="category">
-            <div class="button select">File
+    <!-- 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" id="runButton750">Run
-                        <i class="fa fa-play" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="newButton750">New
-                        <i class="fa fa-file" aria-hidden="true"></i>
+                    <div 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" id="clearButton750">Clear
-                        <i class="fa fa-trash" aria-hidden="true"></i>
+                    <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" id="saveButton750">Save
-                        <i class="fa fa-floppy-o" aria-hidden="true"></i>
+                    <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>
-                </div>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
                         <div class="toDisplaySub">
-                            <div class="option" id="darkTheme750">Dark</div>
-                            <div class="option" id="lightTheme750">Light</div>
+                            <div class="option selected" id="darkThemeMobile">Dark</div>
+                            <div class="option" id="lightThemeMobile">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize750">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</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>
-                    <div class="option" id="safemodeToggle750">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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" id="editorButton750">Editor
+                    <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton750">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton750">Editor Fullscreen</div>
-                    <div class="option" id="formatButton750">Format code</div>
-                    <div class="option" id="minimapToggle750">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <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" id="debugButton750">Inspector</div>
-                    <div class="option" id="metadataButton750">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion750">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</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="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</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>
 
+    <!-- Common things -->
+
     <div class="wrapper">
         <div id="jsEditor"></div>
         <div id="canvasZone">
             <canvas touch-action="none" id="renderCanvas"></canvas>
         </div>
     </div>
-    <div id="exampleList">
-        <div id="exampleBanner">
-            <h1>Examples</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...">
@@ -399,7 +307,7 @@
             src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
     </div>
 
-    <span class="label" id="fpsLabel">FPS</span>
+    <div class="fpsLabel languageJS" id="fpsLabel"></div>
 
     <div id="errorZone">
     </div>
@@ -426,7 +334,8 @@
     </div>
 
     <div id="saveLayer" class="save-layer">
-        <div class="save-form">
+        <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">
@@ -440,24 +349,37 @@
             <textarea id="saveFormTags" rows="4" cols="10"></textarea>
 
             <div class="save-form-buttons" id="saveFormButtons">
-
-                <div id="saveFormButtonOk" class="button">OK</div>
-                <div id="saveFormButtonCancel" class="button">Cancel</div>
+                <div id="saveFormButtonOk">OK</div>
+                <div id="saveFormButtonCancel">Cancel</div>
             </div>
         </div>
     </div>
 
-    <script src="https://code.jquery.com/jquery.js"></script>
+    <div id="waitDiv">
+        <div id="logo-part">
+            <img src="css/img/v4.svg" id="waitLogo" />
+            <img src="css/img/spinner.svg" id="waitSpinner" />
+        </div>
+    </div>
+
+    <!-- jQuery -->
+    <script src="js/libs/jquery.min.js"></script>
     <script src="js/jquery.qrcode.js"></script>
     <script src="js/qrcode.js"></script>
 
-    <script>
-        Split(['#jsEditor', '#canvasZone']);
-    </script>
-
-    <script src="js/actions.js"></script>
+    <!-- Main scripts -->
+    <script src="js/config_versions.js"></script>
     <script src="js/pbt.js"></script>
-    <script src="js/indexWebGPU.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>
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-41767310-2"></script>
@@ -470,4 +392,4 @@
     </script>
 </body>
 
-</html>
+</html>

Playground/js.html

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

Playground/js/actions.js

@@ -1,83 +0,0 @@
-(function () {
-
-    var allSelect = document.querySelectorAll('.select');
-    var allToDisplay = document.querySelectorAll('.toDisplay');
-    var allToDisplayBig = document.querySelectorAll('.toDisplayBig');
-
-    var removeAllOptions = function () {
-        for (var index = 0; index < allToDisplay.length; index++) {
-            var a = allToDisplay[index];
-            if (a.style.display == 'block') {
-                a.style.display = 'none';
-            }
-        }
-        for (var index = 0; index < allToDisplayBig.length; index++) {
-            var b = allToDisplayBig[index];
-            if (b.style.display == 'block') {
-                b.style.display = 'none';
-            }
-        }
-    }
-
-    // Remove displayed options
-    window.addEventListener('click', function () {
-        removeAllOptions();
-    });
-
-    // Handle click on select elements
-    for (var index = 0; index < allSelect.length; index++) {
-        var s = allSelect[index];
-        // Get child called to display
-        var displayItems = function (e) {
-            var toDisplay = this.querySelector('.toDisplay');
-            if (toDisplay) {
-                if (toDisplay.style.display == 'block') {
-                    toDisplay.style.display = 'none';
-                } else {
-                    removeAllOptions();
-                    toDisplay.style.display = 'block';
-                }
-            }
-            toDisplay = this.querySelector('.toDisplayBig');
-            if (toDisplay) {
-                if (toDisplay.style.display == 'block') {
-                    toDisplay.style.display = 'none';
-                } else {
-                    removeAllOptions();
-                    toDisplay.style.display = 'block';
-                }
-            }
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        s.addEventListener('click', displayItems);
-    }
-
-    // Handle mouseover on subSelect
-    var allSubItems = document.querySelectorAll('.toDisplaySub');
-    var removeAllSubItems = function () {
-        for (var index = 0; index < allSubItems.length; index++) {
-            var tds = allSubItems[index];
-            if (tds.style.display == 'block') {
-                tds.style.display = 'none';
-            }
-        }
-    }
-
-    var allSubSelect = document.querySelectorAll('.subSelect');
-    for (var index = 0; index < allSubSelect.length; index++) {
-        var ss = allSubSelect[index];
-        ss.addEventListener('mouseenter', function () {
-            var toDisplay = this.querySelector('.toDisplaySub');
-            if (toDisplay) {
-                if (toDisplay.style.display == 'block') {
-                    toDisplay.style.display = 'none';
-                } else {
-                    removeAllSubItems();
-                    toDisplay.style.display = 'block';
-                }
-            }
-        })
-
-    }
-})();

Playground/js/config_versions.js

@@ -0,0 +1,6 @@
+CONFIG_last_versions = [
+    ["Latest","https://preview.babylonjs.com/babylon.js"],
+    ["4.0.3","https://unpkg.com/babylonjs@4.0.3/babylon.js"],
+    ["4.0.0","https://unpkg.com/babylonjs@4.0.0/babylon.js"],
+    ["3.0","https://unpkg.com/babylonjs@3.0.7/dist/preview%20release/babylon.js"]
+];

Playground/js/examples.js

@@ -0,0 +1,113 @@
+/**
+ * This JS file is for examples list and actions linked to examples.
+ */
+class Examples {
+    constructor(parent) {
+        this.parent = parent;
+
+        this.isExamplesDisplayed = false;
+
+        this.fpsLabel = document.getElementById('fpsLabel');
+        this.examplesButtons = document.getElementsByClassName('examplesButton');
+        this.exampleList = document.getElementById('exampleList');
+
+        /**
+         * Display / hide with the "examples" button. On any size interface
+         */
+        if (this.examplesButtons.length > 0) {
+            for (var i = 0; i < this.examplesButtons.length; i++) {
+                this.examplesButtons[i].parentElement.onclick = function () {
+                    if (!this.isExamplesDisplayed) this.displayExamples();
+                    else this.hideExamples();
+                }.bind(this);
+            }
+        }
+
+        // There's a "close" button on the mobile interface.
+        document.getElementById('examplesButtonClose').addEventListener('click', this.hideExamples.bind(this));
+
+        /**
+         * The filter bar is used to search a thing on the examples.
+         * This react on any input on the bar, or on a click on the search button.
+         */
+        var filterBar = document.getElementById('filterBar');
+        if (filterBar) {
+            var filterBarClear = document.getElementById('filterBarClear');
+            var filter = function () {
+                var filterText = filterBar.value.toLowerCase();
+                if (filterText == '') filterBarClear.style.display = 'none';
+                else filterBarClear.style.display = 'inline-block';
+
+                var lines = document.getElementsByClassName('itemLine');
+                for (var lineIndex = 0; lineIndex < lines.length; lineIndex++) {
+                    var line = lines[lineIndex];
+                    if (line.innerText.toLowerCase().indexOf(filterText) > -1) {
+                        line.style.display = '';
+                    } else {
+                        line.style.display = 'none';
+                    }
+                }
+
+                var categories = document.getElementsByClassName('categoryContainer');
+                var displayCount = categories.length;
+
+                for (var categoryIndex = 0; categoryIndex < categories.length; categoryIndex++) {
+                    var category = categories[categoryIndex];
+                    category.style.display = 'block';
+                    if (category.clientHeight < 25) {
+                        category.style.display = 'none';
+                        displayCount--;
+                    }
+                }
+
+                if (displayCount == 0) document.getElementById('noResultsContainer').style.display = 'block';
+                else document.getElementById('noResultsContainer').style.display = 'none';
+            }
+            filterBar.oninput = function () {
+                filter();
+            }
+            filterBarClear.onclick = function () {
+                filterBar.value = '';
+                filter();
+            }
+        }
+    }
+
+    /**
+     * Function to display the examples menu
+     */
+    displayExamples() {
+        this.parent.menuPG.removeAllOptions();
+
+        this.isExamplesDisplayed = true;
+        this.exampleList.style.display = 'block';
+        document.getElementsByClassName('wrapper')[0].style.width = 'calc(100% - 400px)';
+
+        this.fpsLabel.style.display = 'none';
+        this.toggleExamplesButtons.call(this, true);
+    };
+
+    /**
+     * Function to hide the examples menu
+     */
+    hideExamples() {
+        this.isExamplesDisplayed = false;
+        this.exampleList.style.display = 'none';
+        document.getElementsByClassName('wrapper')[0].style.width = '100%';
+        
+        if(this.parent.menuPG && this.parent.menuPG.isMobileVersion && document.getElementById('jsEditor').style.display == 'block') {}
+        else this.fpsLabel.style.display = 'block';
+        this.toggleExamplesButtons.call(this, false);
+    };
+
+    toggleExamplesButtons(selected) {
+        if (this.examplesButtons.length > 0) {
+            for (var i = 0; i < this.examplesButtons.length; i++) {
+                if(selected)
+                    this.examplesButtons[i].parentElement.classList.add("selected");
+                else
+                    this.examplesButtons[i].parentElement.classList.remove("selected");
+            }
+        }
+    };
+}

Playground/js/frame.js

@@ -1,12 +1,10 @@
-(function() {
+
+(function() {
     var snippetUrl = "https://snippet.babylonjs.com";
-    var currentSnippetToken;
     var engine;
     var fpsLabel = document.getElementById("fpsLabel");
     var refreshAnchor = document.getElementById("refresh");
     var editAnchor = document.getElementById("edit");
-    var scripts;
-    var zipCode;
 
     if (location.href.toLowerCase().indexOf("noui") > -1) {
         fpsLabel.style.visibility = "hidden";
@@ -18,33 +16,9 @@
     }
 
     BABYLON.Engine.ShadersRepository = "/src/Shaders/";
-    var loadScript = function(scriptURL, title) {
-        var xhr = new XMLHttpRequest();
-
-        xhr.open('GET', scriptURL, true);
-
-        xhr.onreadystatechange = function() {
-            if (xhr.readyState === 4) {
-                if (xhr.status === 200) {
-                    blockEditorChange = true;
-                    console.log(xhr.responseText);
-                    jsEditor.setValue(xhr.responseText);
-                    jsEditor.setPosition({ lineNumber: 0, column: 0 });
-                    blockEditorChange = false;
-                    compileAndRun();
-
-                    document.getElementById("currentScript").innerHTML = title;
-
-                    currentSnippetToken = null;
-                }
-            }
-        };
-
-        xhr.send(null);
-    };
 
     var showError = function(error) {
-        console.warn(error);
+        utils.showError(error, null);
     };
 
     compileAndRun = function(code) {
@@ -62,8 +36,6 @@
 
             var canvas = document.getElementById("renderCanvas");
 
-            var checkCamera = true;
-            var wrappedEval = false;
             var createEngineFunction = "createDefaultEngine";
             var createSceneFunction;
 

Playground/js/menuPG.js

@@ -0,0 +1,447 @@
+/**
+ * This JS file is for UI displaying
+ */
+class MenuPG {
+    constructor(parent) {
+        this.parent = parent;
+
+        this.allSelect = document.querySelectorAll('.select');
+        this.allToDisplay = document.querySelectorAll('.toDisplay');
+        this.allToDisplayBig = document.querySelectorAll('.toDisplayBig');
+        this.allSubItems = document.querySelectorAll('.toDisplaySub');
+        this.allSubSelect = document.querySelectorAll('.subSelect');
+        this.allNoSubSelect = document.querySelectorAll('.noSubSelect');
+
+        this.jsEditorElement = document.getElementById('jsEditor');
+        this.canvasZoneElement = document.getElementById('canvasZone');
+        this.switchWrapper = document.getElementById('switchWrapper');
+        this.switchWrapperCode = document.getElementById('switchWrapperCode');
+        this.switchWrapperCanvas = document.getElementById('switchWrapperCanvas');
+        this.fpsLabelElement = document.getElementById('fpsLabel');
+        this.navBarMobile = document.getElementsByClassName('navBarMobile')[0];
+
+        // Check if mobile version
+        this.isMobileVersion = false;
+        if (this.navBarMobile.offsetHeight > 0) this.isMobileVersion = true;
+        window.onresize = function () {
+            if (!this.isMobileVersion && this.navBarMobile.offsetHeight > 0) {
+                this.isMobileVersion = true;
+                this.resizeBigCanvas();
+            }
+            else if (this.isMobileVersion && this.navBarMobile.offsetHeight == 0) {
+                this.isMobileVersion = false;
+                this.resizeSplitted();
+            }
+        }.bind(this);
+
+        // In mobile mode, resize JSEditor and canvas
+        this.switchWrapperCode.addEventListener('click', this.resizeBigJsEditor.bind(this));
+        this.switchWrapperCanvas.addEventListener('click', this.resizeBigCanvas.bind(this));
+        document.getElementById('runButtonMobile').addEventListener('click', this.resizeBigCanvas.bind(this));
+
+        // Code editor by default.
+        if (this.navBarMobile.offsetHeight > 0) this.resizeBigJsEditor();
+
+        // Handle click on select elements
+        for (var index = 0; index < this.allSelect.length; index++) {
+            this.allSelect[index].addEventListener('click', this.displayMenu.bind(this));
+        }
+        // Handle quit of menus
+        for (var i = 0; i < this.allToDisplay.length; i++) {
+            this.allToDisplay[i].addEventListener('mouseleave', function () {
+                this.removeAllOptions();
+            }.bind(this));
+        }
+
+        // Handle mouseover / click on subSelect
+        for (var index = 0; index < this.allSubSelect.length; index++) {
+            var ss = this.allSubSelect[index];
+            ss.addEventListener('click', this.displaySubitems.bind(this));
+            ss.addEventListener('mouseenter', this.displaySubitems.bind(this));
+        }
+        for (var index = 0; index < this.allNoSubSelect.length; index++) {
+            var ss = this.allNoSubSelect[index];
+            ss.addEventListener('mouseenter', this.removeAllSubItems.bind(this));
+        }
+
+        // Examples must remove all the other menus
+        var examplesButton = document.getElementsByClassName("examplesButton");
+        for (var i = 0; i < examplesButton.length; i++) {
+            examplesButton[i].addEventListener("click", this.removeallOptions);
+        }
+
+        // Fullscreen
+        document.getElementById("renderCanvas").addEventListener("webkitfullscreenchange", function () {
+            if (document.webkitIsFullScreen) this.goFullPage();
+            else this.exitFullPage();
+        }.bind(this), false);
+
+        // Click on BJS logo redirection to BJS homepage
+        let logos = document.getElementsByClassName('logo');
+        for (var i = 0; i < logos.length; i++) {
+            logos[i].addEventListener('click', function () {
+                window.open("https://babylonjs.com", "_target");
+            });
+        }
+
+        // Message before unload
+        window.addEventListener('beforeunload', function () {
+            if (localStorage.getItem("bjs-playground-apiversion") && localStorage.getItem("bjs-playground-apiversion") != null) return;
+            this.exitPrompt();
+        }.bind(this));
+
+        // On click anywhere, remove displayed options
+        // Avoid this if clicking in a menu
+        this.skipNextClick = false;
+        document.getElementById("exampleList").addEventListener('click', function () { this.skipNextClick = true; }.bind(this)); // Weird, does'nt work on mobile
+        document.getElementsByClassName("save-form")[0].addEventListener('click', function () { this.skipNextClick = true; }.bind(this));
+        window.addEventListener('click', function () {
+            if (this.skipNextClick) {
+                this.skipNextClick = false;
+                return;
+            }
+
+            if (document.getElementById("saveLayer").style.display === "block") {
+                return;
+            }
+            this.removeAllOptions();
+        }.bind(this));
+
+        // Version selection
+        for (var i = 0; i < this.parent.utils.multipleSize.length; i++) {
+            var versionButtons = null;
+            if (this.parent.utils.multipleSize[i] == "Mobile") {
+                var onclick = function (evt) { this.parent.examples.hideExamples(); };
+                document.getElementById("currentVersion" + this.parent.utils.multipleSize[i]).addEventListener("click", onclick.bind(this));
+                versionButtons = document.getElementById("currentVersion" + this.parent.utils.multipleSize[i]).parentElement;
+                versionButtons.addEventListener("click", onclick.bind(this));
+            }
+            else {
+                versionButtons = document.getElementById("currentVersion" + this.parent.utils.multipleSize[i]).parentElement;
+                versionButtons.addEventListener("click", function (evt) {
+                    this.parent.examples.hideExamples();
+                    this.removeAllOptions();
+                    this.displayVersionsMenu(evt);
+                }.bind(this));
+            }
+
+            for (var j = 0; j < CONFIG_last_versions.length; j++) {
+                var newButton = document.createElement("div");
+                newButton.classList.add("option");
+                if(CONFIG_last_versions[j][0] == "Latest") newButton.innerText = "Latest";
+                else newButton.innerText = "v" + CONFIG_last_versions[j][0];
+                newButton.value = CONFIG_last_versions[j][1];
+
+                newButton.addEventListener("click", function (evt) {
+                    this.parent.settingsPG.setBJSversion(evt, this.parent.monacoCreator.getCode());
+                    this.displayWaitDiv();
+                }.bind(this));
+
+                versionButtons.lastElementChild.appendChild(newButton);
+            }
+        }
+        this.displayVersionNumber("Latest");
+
+        // There's a metadatas close button on the mobile interface.
+        document.getElementById('saveFormButtonClose').addEventListener('click', this.hideMetadata.bind(this));
+        // Avoid closing metadatas when "onmouseleave" on menu
+        this.skipNextHideMetadatas = false;
+
+        this.showQRCodes();
+    };
+
+    /**
+     * The logo displayed while loading the page
+     */
+    displayWaitDiv() {
+        document.getElementById("waitDiv").style.display = "flex";
+        document.getElementById("fpsLabel").style.display = "none";
+    };
+    hideWaitDiv() {
+        document.getElementById("waitDiv").style.display = "none";
+        document.getElementById("fpsLabel").style.display = "block";
+    };
+
+    displayVersionNumber(version) {
+        for (var i = 0; i < this.parent.utils.multipleSize.length; i++) {
+            if (this.parent.utils.multipleSize[i] == "Mobile") {
+                if(version == "Latest") document.getElementById("currentVersion" + this.parent.utils.multipleSize[i]).innerText = version;
+                else document.getElementById("currentVersion" + this.parent.utils.multipleSize[i]).innerText = "Version " + version;
+            }
+            else {
+                if(version == "Latest") document.getElementById("currentVersion" + this.parent.utils.multipleSize[i]).parentElement.firstElementChild.innerText = version;
+                else document.getElementById("currentVersion" + this.parent.utils.multipleSize[i]).parentElement.firstElementChild.innerText = "v" + version;
+            }
+        }
+    };
+
+    /**
+     * Display children menu of the version button
+     */
+    displayVersionsMenu(evt) {
+        if (evt.target.classList.contains("option")) return;
+
+        var toggle = evt.target.lastElementChild;
+        if (toggle == null) toggle = evt.target.parentElement.lastElementChild;
+        if (toggle.style.display == "none") toggle.style.display = "block";
+        else toggle.style.display = "none";
+    };
+    /**
+     * Display children menu of the caller
+     */
+    displayMenu(evt) {
+        if (evt.target.nodeName != "IMG") {
+            evt.preventDefault();
+            evt.stopPropagation();
+            return;
+        }
+        var toDisplay = evt.target.parentNode.querySelector('.toDisplay');
+        if (toDisplay) {
+            if (toDisplay.style.display == 'block') {
+                this.removeAllOptions();
+            } else {
+                this.removeAllOptions();
+                toDisplay.style.display = 'block';
+            }
+        }
+        toDisplay = evt.target.parentNode.querySelector('.toDisplayBig');
+        if (toDisplay) {
+            if (toDisplay.style.display == 'block') {
+                this.removeAllOptions();
+            } else {
+                this.removeAllOptions();
+                toDisplay.style.display = 'block';
+            }
+        }
+        evt.preventDefault();
+        evt.stopPropagation();
+    };
+    /**
+     * Display children subMenu of the caller
+     */
+    displaySubitems(evt) {
+        
+        // If it's in mobile mode, avoid the "mouseenter" bug
+        if (evt.type == "mouseenter" && this.navBarMobile.offsetHeight > 0) return;
+        this.removeAllSubItems();
+
+        var target = evt.target;
+        if (target.nodeName == "IMG") target = evt.target.parentNode;
+
+        var toDisplay = target.querySelector('.toDisplaySub');
+        if(toDisplay == null) toDisplay = target.parentElement.querySelector('.toDisplaySub');
+
+        if (toDisplay) {
+            toDisplay.style.display = 'block';
+
+            if (document.getElementsByClassName('navBarMobile')[0].offsetHeight > 0) {
+                var height = toDisplay.children.length * 33;
+                var parentTop = toDisplay.parentNode.getBoundingClientRect().top;
+                if ((height + parentTop) <= window.innerHeight) {
+                    toDisplay.style.top = parentTop + "px";
+                }
+                else {
+                    toDisplay.style.top = window.innerHeight - height + "px";
+                }
+            }
+        }
+
+        evt.preventDefault();
+        evt.stopPropagation();
+    };
+    /**
+     * Handle click on subOptions
+     */
+    clickOptionSub(evt) {
+        var target = evt.target;
+        if (evt.target.tagName == "A") target = evt.target.parentNode;
+        if (!document.getElementsByClassName('navBarMobile')[0].offsetHeight > 0) return; // If is not in mobile, this doesnt apply
+        if (!target.classList) return;
+
+        if (target.classList.contains('link')) {
+            window.open(target.querySelector('a').href, '_new');
+        }
+        if (!target.classList.contains('subSelect') && target.parentNode.style.display == 'block') {
+            target.parentNode.style.display = 'none'
+
+        }
+
+        evt.preventDefault();
+        evt.stopPropagation();
+    };
+
+    /** 
+     * Remove displayed subItems
+     */
+    removeAllSubItems() {
+        for (var index = 0; index < this.allSubItems.length; index++) {
+            this.allSubItems[index].style.display = 'none';
+        }
+    };
+    /**
+     * Remove displayed options
+     */
+    removeAllOptions() {
+        this.parent.examples.hideExamples();
+        this.hideMetadata();
+        this.removeAllSubItems();
+
+        for (var index = 0; index < this.allToDisplay.length; index++) {
+            var a = this.allToDisplay[index];
+            if (a.style.display == 'block') {
+                a.style.display = 'none';
+            }
+        }
+
+        for (var index = 0; index < this.allToDisplayBig.length; index++) {
+            var b = this.allToDisplayBig[index];
+            if (b.style.display == 'block') {
+                b.style.display = 'none';
+            }
+        }
+    };
+
+    /**
+     * Hide the canvas and display JS editor
+     */
+    resizeBigJsEditor() {
+        if (this.navBarMobile.offsetHeight > 0) {
+            this.removeAllOptions();
+            this.canvasZoneElement.style.width = '0';
+            this.switchWrapper.style.left = '';
+            this.switchWrapper.style.right = '0';
+            this.switchWrapperCode.style.display = 'none';
+            this.fpsLabelElement.style.display = 'none'
+            this.jsEditorElement.style.width = '100%';
+            this.jsEditorElement.style.display = 'block';
+            if (document.getElementsByClassName('gutter-horizontal').length > 0) document.getElementsByClassName('gutter-horizontal')[0].style.display = 'none';
+            this.switchWrapperCanvas.style.display = 'block';
+        }
+    };
+    /**
+     * Hide the JS editor and display the canvas
+     */
+    resizeBigCanvas() {
+        if (this.navBarMobile.offsetHeight > 0) {
+            this.removeAllOptions();
+            this.jsEditorElement.style.width = '0';
+            this.jsEditorElement.style.display = 'none';
+            document.getElementsByClassName('gutter-horizontal')[0].style.display = 'none';
+            this.switchWrapperCanvas.style.display = 'none';
+            this.canvasZoneElement.style.width = '100%';
+            this.switchWrapper.style.left = '0';
+            this.switchWrapper.style.right = '';
+            this.switchWrapperCode.style.display = 'block';
+            this.fpsLabelElement.style.display = 'block';
+        }
+    };
+    /**
+     * When someone resize from mobile to large screen version
+     */
+    resizeSplitted() {
+        this.removeAllOptions();
+        this.jsEditorElement.style.width = '50%';
+        this.jsEditorElement.style.display = 'block';
+        document.getElementsByClassName('gutter-horizontal')[0].style.display = 'block';
+        this.switchWrapperCanvas.style.display = 'block';
+        this.canvasZoneElement.style.width = '50%';
+        this.switchWrapperCode.style.display = 'block';
+        this.fpsLabelElement.style.display = 'block';
+    };
+
+    /**
+     * Canvas full page
+     */
+    goFullPage() {
+        var canvasElement = document.getElementById("renderCanvas");
+        canvasElement.style.position = "absolute";
+        canvasElement.style.top = 0;
+        canvasElement.style.left = 0;
+        canvasElement.style.zIndex = 100;
+    };
+    /**
+     * Canvas exit full page
+     */
+    exitFullPage() {
+        document.getElementById("renderCanvas").style.position = "relative";
+        document.getElementById("renderCanvas").style.zIndex = 0;
+    };
+    /**
+     * Canvas full screen
+     */
+    goFullscreen(engine) {
+        engine.switchFullscreen(true);
+    };
+    /**
+     * Editor full screen
+     */
+    editorGoFullscreen() {
+        var editorDiv = document.getElementById("jsEditor");
+        if (editorDiv.requestFullscreen) {
+            editorDiv.requestFullscreen();
+        } else if (editorDiv.mozRequestFullScreen) {
+            editorDiv.mozRequestFullScreen();
+        } else if (editorDiv.webkitRequestFullscreen) {
+            editorDiv.webkitRequestFullscreen();
+        }
+
+    };
+
+    /**
+     * Display the metadatas form
+     */
+    displayMetadata() {
+        this.skipNextHideMetadatas = true;
+        document.getElementById("saveLayer").style.display = "block";
+    };
+    /**
+     * Hide the metadatas form
+     */
+    hideMetadata() {
+        if (this.skipNextHideMetadatas) {
+            this.skipNextHideMetadatas = false;
+            return;
+        }
+        else {
+            this.skipNextHideMetadatas = false;
+            document.getElementById("saveLayer").style.display = "none";
+        }
+    };
+
+
+    /**
+     * Navigation Overwrites
+     */
+    exitPrompt(e) {
+        var safeToggle = document.getElementById("safemodeToggle1280");
+        if (safeToggle.classList.contains('checked')) {
+            e = e || window.event;
+            var message =
+                'This page is asking you to confirm that you want to leave - data you have entered may not be saved.';
+            if (e) {
+                e.returnValue = message;
+            }
+            return message;
+
+        }
+    };
+
+    showQRCodes() {
+        for (var i = 0; i < this.parent.utils.multipleSize.length; i++) {
+            $("#qrCodeImage" + this.parent.utils.multipleSize[i]).empty();
+            var playgroundCode = window.location.href.split("#");
+            playgroundCode.shift();
+            $("#qrCodeImage" + this.parent.utils.multipleSize[i]).qrcode({ text: "https://playground.babylonjs.com/frame.html#" + (playgroundCode.join("#")) });
+        }
+    };
+
+    /**
+     * When running code, display the loader
+     */
+    showBJSPGMenu() {
+        var headings = document.getElementsByClassName('category');
+        for (var i = 0; i < headings.length; i++) {
+            headings[i].style.visibility = 'visible';
+        }
+    };
+};

Playground/js/monacoCreator.js

@@ -0,0 +1,207 @@
+/**
+ * This JS file is for Monaco management
+ */
+class MonacoCreator {
+    constructor(parent) {
+        this.parent = parent;
+        
+        this.jsEditor = null;
+        this.monacoMode = "javascript";
+        this.blockEditorChange = false;
+
+        this.compilerTriggerTimeoutID = null;
+    }
+
+    // ACCESSORS
+
+    get JsEditor() {
+        return this.jsEditor;
+    };
+
+    getCode() {
+        if(this.jsEditor) return this.jsEditor.getValue();
+        else return "";
+    };
+    setCode(value) {
+        this.jsEditor.setValue(value);
+    };
+
+    get MonacoMode() {
+        return this.monacoMode;
+    };
+    set MonacoMode(mode) {
+        if (this.monacoMode != "javascript"
+            && this.monacoMode != "typescript")
+            console.warn("Error while defining Monaco Mode");
+        this.monacoMode = mode;
+    };
+
+    get BlockEditorChange() {
+        return this.blockEditorChange;
+    };
+    set BlockEditorChange(value) {
+        this.blockEditorChange = value;
+    };
+
+    // FUNCTIONS
+
+    /**
+     * Load the Monaco Node module.
+     */
+    loadMonaco(typings) {
+        var xhr = new XMLHttpRequest();
+
+        xhr.open('GET', typings || "babylon.d.txt", true);
+
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState === 4) {
+                if (xhr.status === 200) {
+                    require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' } });
+                    require(['vs/editor/editor.main'], function () {
+                        if (this.monacoMode === "javascript") {
+                            monaco.languages.typescript.javascriptDefaults.addExtraLib(xhr.responseText, 'babylon.d.ts');
+                        } else {
+                            monaco.languages.typescript.typescriptDefaults.addExtraLib(xhr.responseText, 'babylon.d.ts');
+                        }
+
+                        this.parent.main.run();
+                    }.bind(this));
+                }
+            }
+        }.bind(this);
+        xhr.send(null);
+    };
+
+    /**
+     * Function to (re)create the editor
+     */
+    createMonacoEditor() {
+        var oldCode = "";
+        if (this.jsEditor) {
+            oldCode = this.jsEditor.getValue();
+            this.jsEditor.dispose();
+        }
+
+        var editorOptions = {
+            value: "",
+            language: this.monacoMode,
+            lineNumbers: true,
+            tabSize: "auto",
+            insertSpaces: "auto",
+            roundedSelection: true,
+            automaticLayout: true,
+            scrollBeyondLastLine: false,
+            readOnly: false,
+            theme: this.parent.settingsPG.vsTheme,
+            contextmenu: false,
+            folding: true,
+            showFoldingControls: "always",
+            renderIndentGuides: true,
+            minimap: {
+                enabled: true
+            }
+        };
+        editorOptions.minimap.enabled = document.getElementById("minimapToggle1280").classList.contains('checked');
+        this.jsEditor = monaco.editor.create(document.getElementById('jsEditor'), editorOptions);
+        this.jsEditor.setValue(oldCode);
+        this.jsEditor.onKeyUp(function () {
+            this.parent.utils.markDirty();
+        }.bind(this));
+    };
+
+    /**
+     * Format the code in the editor
+     */
+    formatCode () {
+        this.jsEditor.getAction('editor.action.formatDocument').run();
+    };
+
+    /**
+     * Toggle the minimap
+     */
+    toggleMinimap () {
+        var minimapToggle = document.getElementById("minimapToggle1280");
+        if (minimapToggle.classList.contains('checked')) {
+            this.jsEditor.updateOptions({ minimap: { enabled: false } });
+            this.parent.utils.setToMultipleID("minimapToggle", "innerHTML", 'Minimap <i class="fa fa-square" aria-hidden="true"></i>');
+        } else {
+            this.jsEditor.updateOptions({ minimap: { enabled: true } });
+            this.parent.utils.setToMultipleID("minimapToggle", "innerHTML", 'Minimap <i class="fa fa-check-square" aria-hidden="true"></i>');
+        }
+        minimapToggle.classList.toggle('checked');
+    };
+
+    /**
+     * Get the code in the editor
+     * @param {Function} callBack : Function that will be called after retrieving the code.
+     */
+    getRunCode(callBack) {
+        if (this.parent.settingsPG.ScriptLanguage == "JS")
+            callBack(this.jsEditor.getValue());
+        else if (this.parent.settingsPG.ScriptLanguage == "TS") {
+            this.triggerCompile(this.JsEditor.getValue(), function (result) {
+                callBack(result + "var createScene = function() { return Playground.CreateScene(engine, engine.getRenderingCanvas()); }")
+            });
+        }
+    };
+
+    /**
+     * Usefull function for TypeScript code
+     * @param {*} codeValue 
+     * @param {*} callback 
+     */
+    triggerCompile(codeValue, callback) {
+        if (this.compilerTriggerTimeoutID !== null) {
+            window.clearTimeout(this.compilerTriggerTimeoutID);
+        }
+        this.compilerTriggerTimeoutID = window.setTimeout(function () {
+            try {
+
+                var output = this.transpileModule(codeValue, {
+                    module: ts.ModuleKind.AMD,
+                    target: ts.ScriptTarget.ES5,
+                    noLib: true,
+                    noResolve: true,
+                    suppressOutputPathCheck: true
+                });
+                if (typeof output === "string") {
+                    callback(output);
+                }
+            }
+            catch (e) {
+                this.parent.utils.showError(e.message, e);
+            }
+        }.bind(this), 100);
+    };
+    
+    /**
+     * Usefull function for TypeScript code
+     * @param {*} input 
+     * @param {*} options 
+     */
+    transpileModule(input, options) {
+        var inputFileName = options.jsx ? "module.tsx" : "module.ts";
+        var sourceFile = ts.createSourceFile(inputFileName, input, options.target || ts.ScriptTarget.ES5);
+        // Output
+        var outputText;
+        var program = ts.createProgram([inputFileName], options, {
+            getSourceFile: function (fileName) { return fileName.indexOf("module") === 0 ? sourceFile : undefined; },
+            writeFile: function (_name, text) { outputText = text; },
+            getDefaultLibFileName: function () { return "lib.d.ts"; },
+            useCaseSensitiveFileNames: function () { return false; },
+            getCanonicalFileName: function (fileName) { return fileName; },
+            getCurrentDirectory: function () { return ""; },
+            getNewLine: function () { return "\r\n"; },
+            fileExists: function (fileName) { return fileName === inputFileName; },
+            readFile: function () { return ""; },
+            directoryExists: function () { return true; },
+            getDirectories: function () { return []; }
+        });
+        // Emit
+        program.emit();
+        if (outputText === undefined) {
+            throw new Error("Output generation failed");
+        }
+        return outputText;
+    }
+};

Playground/js/pbt.js

@@ -521,12 +521,4 @@ var PBT = function() {
     }
 }
 
-showBJSPGMenu = function() {
-    var headings = document.getElementsByClassName('category');
-    
-    for (var i = 0; i < headings.length; i ++) {
-        headings[i].style.visibility = 'visible';
-    }
-}
-
     

Playground/js/settingsPG.js

@@ -0,0 +1,173 @@
+/**
+ * This JS file is for settings :
+ * - Theme
+ * - Script language
+ * - Font size
+ */
+class SettingsPG {
+    constructor(parent) {
+        this.parent = parent;
+
+        // The elements that will color with languages
+        this.elementForscriptLanguage = [
+            '#exampleList #exampleBanner',
+            '.navbar',
+            '.navbar .category',
+            '.navbar .select .toDisplay',
+            '.navbar .select .toDisplay .subSelect .toDisplaySub',
+            '#fpsLabel',
+            '.save-form',
+            '#switchWrapper',
+            '.navbarBottom',
+            '.navbarBottom .links .link a',
+            '.buttonPG'
+        ];
+        // The elements that will color with theme
+        this.elementToTheme = [
+            '.wrapper #jsEditor',
+            '.wrapper .gutter'
+        ];
+        // Editor font size
+        this.fontSize = localStorage.getItem("bjs-playground-font") || 14;
+        // Editor theme
+        this.vsTheme = localStorage.getItem("bjs-playground-theme") || 'light';
+        // Editor language
+        this.scriptLanguage = localStorage.getItem("bjs-playground-scriptLanguage") || 'JS';
+        this.defaultScene = "scripts/basic scene.js";
+        if (this.scriptLanguage == "JS") {
+            this.defaultScene = "scripts/basic scene.js";
+            this.parent.monacoCreator.monacoMode = "javascript";
+        }
+        else if (this.scriptLanguage == "TS") {
+            this.defaultScene = "scripts/basic scene.txt";
+            this.parent.monacoCreator.monacoMode = "typescript";
+        }
+    }
+
+    get ScriptLanguage() {
+        return this.scriptLanguage;
+    };
+    set ScriptLanguage(value) {
+        localStorage.setItem("bjs-playground-scriptLanguage", value);
+        this.scriptLanguage = value;
+    };
+    get DefaultScene() {
+        return this.defaultScene;
+    };
+
+
+    /**
+     * Change font size
+     */
+    setFontSize(size) {
+        localStorage.setItem("bjs-playground-font", size);
+        this.fontSize = size;
+        this.parent.monacoCreator.jsEditor.updateOptions({ fontSize: size });
+        var array = document.getElementsByClassName("displayFontSize");
+        for (var i = 0; i < array.length; i++) {
+            var subArray = array[i].children;
+            for (var j = 0; j < subArray.length; j++) {
+                subArray[j].classList.remove("selected");
+                if (subArray[j].innerText == size)
+                    subArray[j].classList.add("selected");
+            }
+        }
+    };
+    restoreFont() {
+        this.setFontSize(this.fontSize);
+    };
+
+    /**
+     * Toggle Typescript / Javascript language
+     */
+    setScriptLanguage() {
+        for (var index = 0; index < this.elementForscriptLanguage.length; index++) {
+            var obj = this.elementForscriptLanguage[index];
+            var domObjArr = document.querySelectorAll(obj);
+            for (var domObjIndex = 0; domObjIndex < domObjArr.length; domObjIndex++) {
+                var domObj = domObjArr[domObjIndex];
+                domObj.classList.remove('languageJS');
+                domObj.classList.remove('languageTS');
+                domObj.classList.add("language" + this.scriptLanguage);
+            }
+        }
+        if (this.scriptLanguage == "JS") {
+            this.parent.utils.setToMultipleID("toJSbutton", "removeClass", "floatLeft");
+        }
+        else if (this.scriptLanguage == "TS") {
+            this.parent.utils.setToMultipleID("toJSbutton", "addClass", "floatLeft");
+        }
+    };
+
+    /**
+     * Set the theme (dark / light)
+     */
+    setTheme(theme) {
+        localStorage.setItem("bjs-playground-theme", theme);
+        // Get the Monaco theme name.
+        // Change the selected button style
+        this.parent.utils.setToMultipleID("darkTheme", "removeClass", "selected");
+        this.parent.utils.setToMultipleID("lightTheme", "removeClass", "selected");
+        if (theme == 'dark') {
+            this.vsTheme = 'vs-dark';
+            this.parent.utils.setToMultipleID("darkTheme", "addClass", "selected");
+        }
+        else {
+            this.vsTheme = 'vs';
+            this.parent.utils.setToMultipleID("lightTheme", "addClass", "selected");
+        }
+
+        this.parent.monacoCreator.createMonacoEditor();
+
+        this.setFontSize(this.fontSize);
+        // Color the elements to theme
+        for (var index = 0; index < this.elementToTheme.length; index++) {
+            var obj = this.elementToTheme[index];
+            var domObjArr = document.querySelectorAll(obj);
+            for (var domObjIndex = 0; domObjIndex < domObjArr.length; domObjIndex++) {
+                var domObj = domObjArr[domObjIndex];
+                domObj.classList.remove('light');
+                domObj.classList.remove('dark');
+                domObj.classList.add(theme);
+            }
+        }
+    };
+    restoreTheme() {
+        this.setTheme(this.vsTheme, this.parent.monacoCreator);
+    };
+
+    /**
+     * Set BJS version on click
+     */
+    setBJSversion(evt, code) {
+        localStorage.setItem("bjs-playground-apiversion", evt.target.value);
+        localStorage.setItem("bjs-playground-apiversion-tempcode", code);
+        window.location.reload();
+    };
+    /**
+     * Check if we need to restore a BJS version
+     */
+    restoreVersion() {
+        if (localStorage.getItem("bjs-playground-apiversion") && localStorage.getItem("bjs-playground-apiversion") != null) {
+            BABYLON = null;
+
+            this.parent.menuPG.displayWaitDiv();
+
+            var newBJSscript = document.createElement('script');
+            newBJSscript.src = localStorage.getItem("bjs-playground-apiversion");
+            newBJSscript.onload = function () {
+                if(BABYLON.Engine.Version.search('-') != -1) this.parent.menuPG.displayVersionNumber("Latest");
+                else this.parent.menuPG.displayVersionNumber(BABYLON.Engine.Version);
+                this.parent.monacoCreator.setCode(localStorage.getItem("bjs-playground-apiversion-tempcode"));
+
+                localStorage.removeItem("bjs-playground-apiversion");
+                localStorage.removeItem("bjs-playground-apiversion-tempcode");
+
+                this.parent.main.compileAndRun();
+            }.bind(this);
+
+            document.head.appendChild(newBJSscript);
+        }
+        else return false;
+    };
+};

Playground/js/ts.js

@@ -1,60 +0,0 @@
-
-var compilerTriggerTimeoutID;
-function triggerCompile(d, func) {
-    if (compilerTriggerTimeoutID !== null) {
-        window.clearTimeout(compilerTriggerTimeoutID);
-    }
-    compilerTriggerTimeoutID = window.setTimeout(function () {
-        try {
-             
-            var output = transpileModule(d, {
-                module: ts.ModuleKind.AMD,
-                target: ts.ScriptTarget.ES5,
-                noLib: true,
-                noResolve: true,
-                suppressOutputPathCheck: true
-            });
-            if (typeof output === "string") {
-                func(output);
-            }
-        }
-        catch (e) {
-            showError(e.message, e);
-        }
-    }, 100);
-}
-function transpileModule(input, options) {
-    var inputFileName = options.jsx ? "module.tsx" : "module.ts";
-    var sourceFile = ts.createSourceFile(inputFileName, input, options.target || ts.ScriptTarget.ES5);
-    // Output
-    var outputText;
-    var program = ts.createProgram([inputFileName], options, {
-        getSourceFile: function (fileName) { return fileName.indexOf("module") === 0 ? sourceFile : undefined; },
-        writeFile: function (_name, text) { outputText = text; },
-        getDefaultLibFileName: function () { return "lib.d.ts"; },
-        useCaseSensitiveFileNames: function () { return false; },
-        getCanonicalFileName: function (fileName) { return fileName; },
-        getCurrentDirectory: function () { return ""; },
-        getNewLine: function () { return "\r\n"; },
-        fileExists: function (fileName) { return fileName === inputFileName; },
-        readFile: function () { return ""; },
-        directoryExists: function () { return true; },
-        getDirectories: function () { return []; }
-    });
-    // Emit
-    program.emit();
-    if (outputText === undefined) {
-        throw new Error("Output generation failed");
-    }
-    return outputText;
-}
-
-function getRunCode(jsEditor, callBack) {
-    triggerCompile(jsEditor.getValue(), function(result) {
-        callBack(result + "var createScene = function() { return Playground.CreateScene(engine, engine.getRenderingCanvas()); }")
-    });
-}
-
-var defaultScene = "scripts/basic scene.txt";
-var monacoMode = "typescript";
-

Playground/js/utils.js

@@ -0,0 +1,90 @@
+/**
+ * This JS file contains utils functions
+ */
+class Utils {
+    constructor(parent) {
+        this.parent = parent;
+        
+        this.multipleSize = [1280, 1024, 'Mobile'];
+    }
+
+    /**
+     * When something is written in the editor, it reset the safe mode
+     */
+    markDirty() {
+        if (this.parent.monacoCreator.BlockEditorChange) return;
+
+        this.setToMultipleID("safemodeToggle", "addClass", "checked");!
+        this.setToMultipleID('safemodeToggle', 'innerHTML', 'Safe mode <i class="fa fa-check-square" aria-hidden="true"></i>');
+    };
+
+    /**
+     * Used to show error messages
+     * @param {String} errorMessage 
+     * @param {String} errorEvent 
+     */
+    showError(errorMessage, errorEvent) {
+        var errorContent =
+            '<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button>';
+        if (errorEvent) {
+            var regEx = /\(.+:(\d+):(\d+)\)\n/g;
+
+            var match = regEx.exec(errorEvent.stack);
+            if (match) {
+                errorContent += "Line ";
+                var lineNumber = match[1];
+                var columnNumber = match[2];
+
+                errorContent += lineNumber + ':' + columnNumber + ' - ';
+            }
+        }
+
+        errorContent += errorMessage + '</div>';
+
+        document.getElementById("errorZone").style.display = 'block';
+        document.getElementById("errorZone").innerHTML = errorContent;
+
+        // Close button error
+        document.getElementById("errorZone").querySelector('.close').addEventListener('click', function () {
+            document.getElementById("errorZone").style.display = 'none';
+        });
+    };
+
+    /**
+     * Apply things to the differents menu sizes
+     */
+    setToMultipleID(id, thingToDo, param) {
+        this.multipleSize.forEach(function (size) {
+            if (thingToDo == "innerHTML") {
+                document.getElementById(id + size).innerHTML = param
+            }
+            else if (thingToDo == "click") {
+                if (param.length > 1) {
+                    for (var i = 0; i < param.length; i++) {
+                        document.getElementById(id + size).addEventListener("click", param[i]);
+                    }
+                }
+                else
+                    document.getElementById(id + size).addEventListener("click", param);
+            }
+            else if (thingToDo == "addClass") {
+                document.getElementById(id + size).classList.add(param);
+            }
+            else if (thingToDo == "removeClass") {
+                document.getElementById(id + size).classList.remove(param);
+            }
+            else if (thingToDo == "display") {
+                document.getElementById(id + size).style.display = param;
+            }
+        });
+    };
+
+    /**
+     * Function to get the current screen size
+     */
+    getCurrentSize() {
+        for(var i = 0; i < this.multipleSize.length; i++) {
+            if(document.getElementById("menuButton" + this.multipleSize[i]).offsetHeight > 0) return this.multipleSize[i];
+        }
+    };
+}

Playground/js/zipTool.js

@@ -0,0 +1,180 @@
+/**
+ * This JS file contains the ZIP tools
+ */
+class ZipTool {
+    constructor(parent) {
+        this.parent = parent;
+        
+        this.zipCode;
+    }
+
+    set ZipCode(value) {
+        this.zipCode = value;
+    }
+
+     
+    addContentToZip (zip, name, url, replace, buffer, then) {
+        if (url.substring(0, 5) == "data:" || url.substring(0, 5) == "http:" || url.substring(0, 5) == "blob:" || url.substring(0, 6) == "https:") {
+            then();
+            return;
+        }
+
+        var xhr = new XMLHttpRequest();
+
+        xhr.open('GET', url, true);
+
+        if (buffer) {
+            xhr.responseType = "arraybuffer";
+        }
+
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState === 4) {
+                if (xhr.status === 200) {
+                    var text;
+                    if (!buffer) {
+                        if (replace) {
+                            var splits = replace.split("\r\n");
+                            for (var index = 0; index < splits.length; index++) {
+                                splits[index] = "        " + splits[index];
+                            }
+                            replace = splits.join("\r\n");
+
+                            text = xhr.responseText.replace("####INJECT####", replace);
+                        } else {
+                            text = xhr.responseText;
+                        }
+                    }
+
+                    zip.file(name, buffer ? xhr.response : text);
+
+                    then();
+                }
+            }
+        };
+
+        xhr.send(null);
+    };
+    addTexturesToZip (zip, index, textures, folder, then) {
+
+        if (index === textures.length || !textures[index].name) {
+            then();
+            return;
+        }
+
+        if (textures[index].isRenderTarget || textures[index] instanceof BABYLON.DynamicTexture || textures[index].name.indexOf("data:") !== -1) {
+            this.addTexturesToZip(zip, index + 1, textures, folder, then);
+            return;
+        }
+
+        if (textures[index].isCube) {
+            if (textures[index].name.indexOf("dds") === -1) {
+                if (textures[index]._extensions) {
+                    for (var i = 0; i < 6; i++) {
+                        textures.push({ name: textures[index].name + textures[index]._extensions[i] });
+                    }
+                } else if (textures[index]._files) {
+                    for (var i = 0; i < 6; i++) {
+                        textures.push({ name: textures[index]._files[i] });
+                    }
+                }
+            }
+            else {
+                textures.push({ name: textures[index].name });
+            }
+            this.addTexturesToZip(zip, index + 1, textures, folder, then);
+            return;
+        }
+
+
+        if (folder == null) {
+            folder = zip.folder("textures");
+        }
+        var url;
+
+        if (textures[index].video) {
+            url = textures[index].video.currentSrc;
+        } else {
+            // url = textures[index].name;
+            url = textures[index].url ? textures[index].url : textures[index].name;
+        }
+
+        var name = textures[index].name.replace("textures/", "");
+        // var name = url.substr(url.lastIndexOf("/") + 1);
+
+        if (url != null) {
+            this.addContentToZip(folder,
+                name,
+                url,
+                null,
+                true,
+                function () {
+                    this.addTexturesToZip(zip, index + 1, textures, folder, then);
+                }.bind(this));
+        }
+        else {
+            this.addTexturesToZip(zip, index + 1, textures, folder, then);
+        }
+    };
+    addImportedFilesToZip (zip, index, importedFiles, folder, then) {
+        if (index === importedFiles.length) {
+            then();
+            return;
+        }
+
+        if (!folder) {
+            folder = zip.folder("scenes");
+        }
+        var url = importedFiles[index];
+
+        var name = url.substr(url.lastIndexOf("/") + 1);
+
+        this.addContentToZip(folder,
+            name,
+            url,
+            null,
+            true,
+            function () {
+                this.addImportedFilesToZip(zip, index + 1, importedFiles, folder, then);
+            }.bind(this));
+    };
+    getZip (engine) {
+        if (engine.scenes.length === 0) {
+            return;
+        }
+
+        var zip = new JSZip();
+
+        var scene = engine.scenes[0];
+        var textures = scene.textures;
+        var importedFiles = scene.importedMeshesFiles;
+
+        document.getElementById("statusBar").innerHTML = "Creating archive... Please wait.";
+
+        if (this.zipCode.indexOf("textures/worldHeightMap.jpg") !== -1) {
+            textures.push({ name: "textures/worldHeightMap.jpg" });
+        }
+
+        this.addContentToZip(zip,
+            "index.html",
+            "zipContent/index.html",
+            this.zipCode,
+            false,
+            function () {
+                this.addTexturesToZip(zip,
+                    0,
+                    textures,
+                    null,
+                    function () {
+                        this.addImportedFilesToZip(zip,
+                            0,
+                            importedFiles,
+                            null,
+                            function () {
+                                var blob = zip.generate({ type: "blob" });
+                                saveAs(blob, "sample.zip");
+                                document.getElementById("statusBar").innerHTML = "";
+                            }.bind(this));
+                    }.bind(this));
+            }.bind(this));
+    };
+}

Playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babylonjsplayground",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Babylon.js is a 3D engine based on webgl and javascript",
   "main": "",
   "repository": {

Playground/test.html

@@ -1,3 +1,5 @@
+<!-- TO DO - What is the purpose of this page ? -->
+
 <div class="navbar-inner" id="topbar">
     <a class="brand largeOnly" href="#" id="mainTitle">Babylon.js Playground</a>
     <div class="btn-group">

Playground/textures/pack1.json

@@ -0,0 +1,44 @@
+{"frames": {
+
+"eye.png":
+{
+	"frame": {"x":0,"y":148,"w":400,"h":400},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":400,"h":400},
+	"sourceSize": {"w":400,"h":400}
+},
+"redman.png":
+{
+	"frame": {"x":0,"y":0,"w":55,"h":97},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":55,"h":97},
+	"sourceSize": {"w":55,"h":97}
+},
+"spot.png":
+{
+	"frame": {"x":199,"y":0,"w":148,"h":148},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":148,"h":148},
+	"sourceSize": {"w":148,"h":148}
+},
+"triangle.png":
+{
+	"frame": {"x":55,"y":0,"w":144,"h":72},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":144,"h":72},
+	"sourceSize": {"w":144,"h":72}
+}},
+"meta": {
+	"app": "https://www.codeandweb.com/texturepacker",
+	"version": "1.0",
+	"image": "pack1.png",
+	"format": "RGBA8888",
+	"size": {"w":400,"h":548},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:c5944b8d86d99a167f95924d4a62d5c3:3ed0ae95f00621580b477fcf2f6edb75:5d0ff2351eb79b7bb8a91bc3358bcff4$"
+}
+}

Playground/ts-local.html

@@ -1,492 +0,0 @@
-<!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">
-
-    <script src="js/libs/pep.min.js"></script>
-    <!--For canvas/code separator-->
-    <script src="js/libs/split.js"></script>
-
-    <script src="js/libs/dat.gui.min.js"></script>
-    <!-- jszip -->
-    <script src="js/libs/jszip.min.js"></script>
-    <script src="js/libs/fileSaver.js"></script>
-    <!-- Dependencies -->
-    <script src="../dist/preview%20release/ammo.js"></script>
-    <script src="../dist/preview%20release/cannon.js"></script>
-    <script src="../dist/preview%20release/Oimo.js"></script>
-    <script src="../dist/preview%20release/gltf_validator.js"></script>
-    <script src="../dist/preview%20release/earcut.min.js"></script>
-    <!-- Babylon.js -->
-    <script src="../dist/preview%20release/babylon.js"></script>
-    <script src="../dist/preview%20release/gui/babylon.gui.min.js"></script>
-    <script src="../dist/preview%20release/inspector/babylon.inspector.bundle.js"></script>
-    <script src="../dist/preview%20release/materialsLibrary/babylonjs.materials.min.js"></script>
-    <script src="../dist/preview%20release/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
-    <script src="../dist/preview%20release/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
-    <script src="../dist/preview%20release/loaders/babylonjs.loaders.min.js"></script>
-    <script src="../dist/preview%20release/serializers/babylonjs.serializers.min.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>
-
-    <!-- Scene Manager -->
-    <script src="https://mackeyk24.github.io/toolkit/babylon.manager.js"></script>
-    <script src="https://mackeyk24.github.io/toolkit/babylon.navmesh.js"></script>
-
-    <link href="css/index.css" rel="stylesheet" />
-    <link href="css/color_ts.css" rel="stylesheet" />
-</head>
-
-<body>
-    <div class="navbar navBar1600">
-        <div class="title">
-            Babylon.js Playground
-        </div>
-        <div class="version" id="mainTitle">
-        </div>
-
-        <div class="category">
-            <div class="button run" id="runButton1600">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1600">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1600">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1600">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1600">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1600">Dark</div>
-                            <div class="option" id="lightTheme1600">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1600">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option" id="safemodeToggle1600">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked" id="editorButton1600">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1600">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1600">Format code</div>
-                    <div class="option" id="minimapToggle1600">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" style="height:auto;padding: 20px;background: white;" id="qrCodeImage">QR
-                                Code Image</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="button uncheck" id="debugButton1600">Inspector</div>
-            <div class="button" id="metadataButton1600">Metadata</div>
-        </div>
-
-
-
-        <div class="category right">
-            <div class="button select">
-                <span id="currentVersion1600">Version: Latest</span>
-                <div class="toDisplay">
-                    <div class="option" onclick="setVersion('latest');">Latest</div>
-                    <div class="option" onclick="setVersion('stable');">Stable</div>
-                </div>
-            </div>
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="navbar navBar1475">
-        <div class="title">
-            Babylon.js Playground
-        </div>
-        <div class="version" id="mainTitle">
-        </div>
-
-        <div class="category">
-            <div class="button run" id="runButton1475">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1475">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1475">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1475">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1475">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1475">Dark</div>
-                            <div class="option" id="lightTheme1475">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1475">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option" id='safemodeToggle1475'>Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked" id="editorButton1475">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1475">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1475">Format code</div>
-                    <div class="option" id="minimapToggle1475">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="debugButton1475">Inspector</div>
-                    <div class="option" id="metadataButton1475">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion1475">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="navbar navBar1030">
-        <div class="category">
-            <div class="button run" id="runButton1030">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1030">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1030">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1030">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1030">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1030">Dark</div>
-                            <div class="option" id="lightTheme1030">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1030">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option" id="safemodeToggle1030">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked" id="editorButton1030">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1030">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1030">Format code</div>
-                    <div class="option" id="minimapToggle1030">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="debugButton1030">Inspector</div>
-                    <div class="option" id="metadataButton1030">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion1030">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="navbar navBar750">
-        <div class="category">
-            <div class="button select">File
-                <div class="toDisplay">
-                    <div class="option" id="runButton750">Run
-                        <i class="fa fa-play" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="newButton750">New
-                        <i class="fa fa-file" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="clearButton750">Clear
-                        <i class="fa fa-trash" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="saveButton750">Save
-                        <i class="fa fa-floppy-o" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="zipButton750">Zip
-                        <i class="fa fa-download" aria-hidden="true"></i>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme750">Dark</div>
-                            <div class="option" id="lightTheme750">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize750">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option" id="safemodeToggle750">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div style="display:none;" class="option checked" id="editorButton750">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="fullscreenButton750">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton750">Editor Fullscreen</div>
-                    <div class="option" id="formatButton750">Format code</div>
-                    <div class="option" id="minimapToggle750">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="debugButton750">Inspector</div>
-                    <div class="option" id="metadataButton750">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion750">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select">
-                <span id="currentScript750">Examples</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="wrapper">
-        <div id="jsEditor"></div>
-        <div id="canvasZone">
-            <canvas touch-action="none" id="renderCanvas"></canvas>
-        </div>
-    </div>
-    <div id="exampleList" class="typescript">
-        <div id="exampleBanner">
-            <h1>Examples</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>
-
-    <span class="label" id="fpsLabel">FPS</span>
-
-    <div id="errorZone">
-    </div>
-
-    <div class="navbarBottom">
-        <div id="statusBar"></div>
-        <div class="links">
-            <div class='link'>
-                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
-            </div>
-        </div>
-    </div>
-
-    <div id="saveLayer" class="save-layer">
-        <div class="save-form">
-            <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" class="button">OK</div>
-                <div id="saveFormButtonCancel" class="button">Cancel</div>
-            </div>
-        </div>
-    </div>
-
-    <div id="waitDiv">
-        <span id="waitTitle">Babylon.js Playground
-            <BR>
-            <BR>
-            <BR>
-        </span>
-        <div id="logo-part">
-            <img src="v4.svg" id="waitLogo" />
-            <img src="spinner.svg" id="waitSpinner" />
-        </div>
-    </div>
-
-    <script src="js/libs/jquery.min.js"></script>
-    <script src="js/jquery.qrcode.js"></script>
-    <script src="js/qrcode.js"></script>
-
-    <script src="js/actions.js"></script>
-    <script src="js/pbt.js"></script>
-    <script src="js/libs/typescript.js"></script>
-    <script src="js/index.js"></script>
-    <script src="js/ts.js"></script>
-
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-41767310-2"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
-        gtag('js', new Date());
-
-        gtag('config', 'UA-41767310-2');
-    </script>
-</body>
-
-</html>

Playground/ts.html

@@ -1,492 +1,8 @@
-<!DOCTYPE html>
-<html>
+<script>
+    localStorage.setItem("bjs-playground-scriptLanguage", "TS");
 
-<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">
+    var parseURL = window.location.href.split("ts.html");
+    var hash = parseURL[parseURL.length - 1];
 
-    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
-
-    <script src="js/libs/pep.min.js"></script>
-    <!--For canvas/code separator-->
-    <script src="js/libs/split.js"></script>
-
-    <script src="js/libs/dat.gui.min.js"></script>
-    <!-- jszip -->
-    <script src="js/libs/jszip.min.js"></script>
-    <script src="js/libs/fileSaver.js"></script>
-    <!-- Dependencies -->
-    <script src="https://preview.babylonjs.com/ammo.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/gltf_validator.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/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/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>
-
-    <!-- Scene Manager -->
-    <script src="https://mackeyk24.github.io/toolkit/babylon.manager.js"></script>
-    <script src="https://mackeyk24.github.io/toolkit/babylon.navmesh.js"></script>
-
-    <link href="css/index.css" rel="stylesheet" />
-    <link href="css/color_ts.css" rel="stylesheet" />
-</head>
-
-<body>
-    <div class="navbar navBar1600">
-        <div class="title">
-            Babylon.js Playground
-        </div>
-        <div class="version" id="mainTitle">
-        </div>
-
-        <div class="category">
-            <div class="button run" id="runButton1600">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1600">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1600">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1600">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1600">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1600">Dark</div>
-                            <div class="option" id="lightTheme1600">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1600">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option" id="safemodeToggle1600">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked" id="editorButton1600">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1600">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1600">Format code</div>
-                    <div class="option" id="minimapToggle1600">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" style="height:auto;padding: 20px;background: white;" id="qrCodeImage">QR
-                                Code Image</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="button uncheck" id="debugButton1600">Inspector</div>
-            <div class="button" id="metadataButton1600">Metadata</div>
-        </div>
-
-
-
-        <div class="category right">
-            <div class="button select">
-                <span id="currentVersion1600">Version: Latest</span>
-                <div class="toDisplay">
-                    <div class="option" onclick="setVersion('latest');">Latest</div>
-                    <div class="option" onclick="setVersion('stable');">Stable</div>
-                </div>
-            </div>
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="navbar navBar1475">
-        <div class="title">
-            Babylon.js Playground
-        </div>
-        <div class="version" id="mainTitle">
-        </div>
-
-        <div class="category">
-            <div class="button run" id="runButton1475">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1475">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1475">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1475">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1475">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1475">Dark</div>
-                            <div class="option" id="lightTheme1475">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1475">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option" id='safemodeToggle1475'>Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked" id="editorButton1475">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1475">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1475">Format code</div>
-                    <div class="option" id="minimapToggle1475">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="debugButton1475">Inspector</div>
-                    <div class="option" id="metadataButton1475">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion1475">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="navbar navBar1030">
-        <div class="category">
-            <div class="button run" id="runButton1030">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1030">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1030">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1030">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1030">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1030">Dark</div>
-                            <div class="option" id="lightTheme1030">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1030">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option" id="safemodeToggle1030">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option checked" id="editorButton1030">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1030">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1030">Format code</div>
-                    <div class="option" id="minimapToggle1030">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="debugButton1030">Inspector</div>
-                    <div class="option" id="metadataButton1030">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion1030">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="navbar navBar750">
-        <div class="category">
-            <div class="button select">File
-                <div class="toDisplay">
-                    <div class="option" id="runButton750">Run
-                        <i class="fa fa-play" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="newButton750">New
-                        <i class="fa fa-file" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="clearButton750">Clear
-                        <i class="fa fa-trash" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="saveButton750">Save
-                        <i class="fa fa-floppy-o" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="zipButton750">Zip
-                        <i class="fa fa-download" aria-hidden="true"></i>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme750">Dark</div>
-                            <div class="option" id="lightTheme750">Light</div>
-                        </div>
-                    </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize750">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
-                        </div>
-                    </div>
-                    <div class="option" id="safemodeToggle750">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div style="display:none;" class="option checked" id="editorButton750">Editor
-                        <i class="fa fa-check-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="fullscreenButton750">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton750">Editor Fullscreen</div>
-                    <div class="option" id="formatButton750">Format code</div>
-                    <div class="option" id="minimapToggle750">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="debugButton750">Inspector</div>
-                    <div class="option" id="metadataButton750">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion750">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select">
-                <span id="currentScript750">Examples</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="wrapper">
-        <div id="jsEditor"></div>
-        <div id="canvasZone">
-            <canvas touch-action="none" id="renderCanvas"></canvas>
-        </div>
-    </div>
-    <div id="exampleList" class="typescript">
-        <div id="exampleBanner">
-            <h1>Examples</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>
-
-    <span class="label" id="fpsLabel">FPS</span>
-
-    <div id="errorZone">
-    </div>
-
-    <div class="navbarBottom">
-        <div id="statusBar"></div>
-        <div class="links">
-            <div class='link'>
-                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
-            </div>
-        </div>
-    </div>
-
-    <div id="saveLayer" class="save-layer">
-        <div class="save-form">
-            <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" class="button">OK</div>
-                <div id="saveFormButtonCancel" class="button">Cancel</div>
-            </div>
-        </div>
-    </div>
-
-    <div id="waitDiv">
-        <span id="waitTitle">Babylon.js Playground
-            <BR>
-            <BR>
-            <BR>
-        </span>
-        <div id="logo-part">
-            <img src="v4.svg" id="waitLogo" />
-            <img src="spinner.svg" id="waitSpinner" />
-        </div>
-    </div>
-
-    <script src="js/libs/jquery.min.js"></script>
-    <script src="js/jquery.qrcode.js"></script>
-    <script src="js/qrcode.js"></script>
-
-    <script src="js/actions.js"></script>
-    <script src="js/pbt.js"></script>
-    <script src="js/libs/typescript.js"></script>
-    <script src="js/index.js"></script>
-    <script src="js/ts.js"></script>
-
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-41767310-2"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
-        gtag('js', new Date());
-
-        gtag('config', 'UA-41767310-2');
-    </script>
-</body>
-
-</html>
+    window.location = "./"+hash;
+</script>

dist/preview release/glTF2Interface/package.json

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

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

@@ -1164,6 +1164,14 @@ declare module BABYLON.GUI {
         protected _adaptWidthToChildren: boolean;
         /** @hidden */
         protected _adaptHeightToChildren: boolean;
+        /**
+         * Gets or sets a boolean indicating that layout cycle errors should be displayed on the console
+         */
+        logLayoutCycleErrors: boolean;
+        /**
+         * Gets or sets the number of layout cycles (a change involved by a control while evaluating the layout) allowed
+         */
+        maxLayoutCycle: number;
         /** Gets or sets a boolean indicating if the container should try to adapt to its children height */
         adaptHeightToChildren: boolean;
         /** Gets or sets a boolean indicating if the container should try to adapt to its children width */
@@ -1637,6 +1645,10 @@ declare module BABYLON.GUI {
         private _manualWidth;
         private _manualHeight;
         private _doNotTrackManualChanges;
+        /**
+         * Gets or sets a boolean indicating that layou warnings should be ignored
+         */
+        ignoreLayoutWarnings: boolean;
         /** Gets or sets a boolean indicating if the stack panel is vertical or horizontal*/
         isVertical: boolean;
         /**

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

@@ -7,7 +7,7 @@
 		exports["babylonjs-gui"] = factory(require("babylonjs"));
 	else
 		root["BABYLON"] = root["BABYLON"] || {}, root["BABYLON"]["GUI"] = factory(root["BABYLON"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_perfCounter__) {
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Maths_math__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -366,7 +366,7 @@ module.exports = g;
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTextureInstrumentation", function() { return AdvancedDynamicTextureInstrumentation; });
-/* harmony import */ var babylonjs_Misc_perfCounter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/perfCounter */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_perfCounter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/perfCounter */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_perfCounter__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_perfCounter__WEBPACK_IMPORTED_MODULE_0__);
 
 /**
@@ -509,7 +509,7 @@ var AdvancedDynamicTextureInstrumentation = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTexture", function() { return AdvancedDynamicTexture; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _controls_container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./controls/container */ "./2D/controls/container.ts");
 /* harmony import */ var _style__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./style */ "./2D/style.ts");
@@ -1647,7 +1647,7 @@ var Button = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Checkbox", function() { return Checkbox; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
@@ -1828,7 +1828,7 @@ var Checkbox = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ColorPicker", function() { return ColorPicker; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _inputText__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./inputText */ "./2D/controls/inputText.ts");
@@ -3215,7 +3215,7 @@ var ColorPicker = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Container", function() { return Container; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/logger */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/logger */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../measure */ "./2D/measure.ts");
@@ -3246,6 +3246,14 @@ var Container = /** @class */ (function (_super) {
         _this._adaptWidthToChildren = false;
         /** @hidden */
         _this._adaptHeightToChildren = false;
+        /**
+         * Gets or sets a boolean indicating that layout cycle errors should be displayed on the console
+         */
+        _this.logLayoutCycleErrors = false;
+        /**
+         * Gets or sets the number of layout cycles (a change involved by a control while evaluating the layout) allowed
+         */
+        _this.maxLayoutCycle = 3;
         return _this;
     }
     Object.defineProperty(Container.prototype, "adaptHeightToChildren", {
@@ -3521,8 +3529,8 @@ var Container = /** @class */ (function (_super) {
                 this._postMeasure();
             }
             rebuildCount++;
-        } while (this._rebuildLayout && rebuildCount < 3);
-        if (rebuildCount >= 3) {
+        } while (this._rebuildLayout && rebuildCount < this.maxLayoutCycle);
+        if (rebuildCount >= 3 && this.logLayoutCycleErrors) {
             babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__["Logger"].Error("Layout cycle detected in GUI (Container name=" + this.name + ", uniqueId=" + this.uniqueId + ")");
         }
         context.restore();
@@ -3620,7 +3628,7 @@ var Container = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Control", function() { return Control; });
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
 /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../measure */ "./2D/measure.ts");
@@ -5811,7 +5819,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4__);
 
 
@@ -6267,7 +6275,7 @@ var Grid = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Image", function() { return Image; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 
@@ -7042,7 +7050,7 @@ var InputPassword = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "InputText", function() { return InputText; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
@@ -8053,7 +8061,7 @@ var InputText = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Line", function() { return Line; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
@@ -8321,7 +8329,7 @@ var Line = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MultiLine", function() { return MultiLine; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/abstractMesh */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/abstractMesh */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _multiLinePoint__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../multiLinePoint */ "./2D/multiLinePoint.ts");
@@ -8588,7 +8596,7 @@ var MultiLine = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RadioButton", function() { return RadioButton; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
@@ -8933,7 +8941,7 @@ var Rectangle = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ScrollViewer", function() { return ScrollViewer; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Events_pointerEvents__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Events/pointerEvents */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Events_pointerEvents__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Events/pointerEvents */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Events_pointerEvents__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Events_pointerEvents__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _rectangle__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../rectangle */ "./2D/controls/rectangle.ts");
 /* harmony import */ var _grid__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../grid */ "./2D/controls/grid.ts");
@@ -10024,7 +10032,7 @@ var SelectionPanel = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "BaseSlider", function() { return BaseSlider; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../control */ "./2D/controls/control.ts");
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../valueAndUnit */ "./2D/valueAndUnit.ts");
@@ -10925,7 +10933,7 @@ var Slider = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "StackPanel", function() { return StackPanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
@@ -10949,6 +10957,10 @@ var StackPanel = /** @class */ (function (_super) {
         _this._manualWidth = false;
         _this._manualHeight = false;
         _this._doNotTrackManualChanges = false;
+        /**
+         * Gets or sets a boolean indicating that layou warnings should be ignored
+         */
+        _this.ignoreLayoutWarnings = false;
         return _this;
     }
     Object.defineProperty(StackPanel.prototype, "isVertical", {
@@ -11053,7 +11065,9 @@ var StackPanel = /** @class */ (function (_super) {
                     child._top.ignoreAdaptiveScaling = true;
                 }
                 if (child._height.isPercentage) {
-                    babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].Warn("Control (Name:" + child.name + ", UniqueId:" + child.uniqueId + ") is using height in percentage mode inside a vertical StackPanel");
+                    if (!this.ignoreLayoutWarnings) {
+                        babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].Warn("Control (Name:" + child.name + ", UniqueId:" + child.uniqueId + ") is using height in percentage mode inside a vertical StackPanel");
+                    }
                 }
                 else {
                     stackHeight += child._currentMeasure.height + child.paddingTopInPixels + child.paddingBottomInPixels;
@@ -11066,7 +11080,9 @@ var StackPanel = /** @class */ (function (_super) {
                     child._left.ignoreAdaptiveScaling = true;
                 }
                 if (child._width.isPercentage) {
-                    babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].Warn("Control (Name:" + child.name + ", UniqueId:" + child.uniqueId + ") is using width in percentage mode inside a horizontal StackPanel");
+                    if (!this.ignoreLayoutWarnings) {
+                        babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].Warn("Control (Name:" + child.name + ", UniqueId:" + child.uniqueId + ") is using width in percentage mode inside a horizontal StackPanel");
+                    }
                 }
                 else {
                     stackWidth += child._currentMeasure.width + child.paddingLeftInPixels + child.paddingRightInPixels;
@@ -11183,7 +11199,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TextWrapping", function() { return TextWrapping; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TextBlock", function() { return TextBlock; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
@@ -11644,7 +11660,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "KeyPropertySet", function() { return KeyPropertySet; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VirtualKeyboard", function() { return VirtualKeyboard; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
 /* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./button */ "./2D/controls/button.ts");
@@ -12025,7 +12041,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Vector2WithInfo", function() { return Vector2WithInfo; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Matrix2D", function() { return Matrix2D; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -12249,7 +12265,7 @@ var Matrix2D = /** @class */ (function () {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Measure", function() { return Measure; });
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__);
 
 
@@ -12382,7 +12398,7 @@ var Measure = /** @class */ (function () {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MultiLinePoint", function() { return MultiLinePoint; });
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./valueAndUnit */ "./2D/valueAndUnit.ts");
 
@@ -12525,7 +12541,7 @@ var MultiLinePoint = /** @class */ (function () {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Style", function() { return Style; });
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./valueAndUnit */ "./2D/valueAndUnit.ts");
 
@@ -12832,7 +12848,7 @@ var ValueAndUnit = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AbstractButton3D", function() { return AbstractButton3D; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/transformNode */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/transformNode */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control3D */ "./3D/controls/control3D.ts");
 
@@ -12875,7 +12891,7 @@ var AbstractButton3D = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Button3D", function() { return Button3D; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _abstractButton3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./abstractButton3D */ "./3D/controls/abstractButton3D.ts");
 /* harmony import */ var _2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../2D/advancedDynamicTexture */ "./2D/advancedDynamicTexture.ts");
@@ -13052,7 +13068,7 @@ var Button3D = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Container3D", function() { return Container3D; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/transformNode */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/transformNode */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control3D */ "./3D/controls/control3D.ts");
 
@@ -13209,7 +13225,7 @@ var Container3D = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Control3D", function() { return Control3D; });
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _vector3WithInfo__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../vector3WithInfo */ "./3D/vector3WithInfo.ts");
 
@@ -13615,7 +13631,7 @@ var Control3D = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CylinderPanel", function() { return CylinderPanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
@@ -13701,7 +13717,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "HolographicButton", function() { return HolographicButton; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
 /* harmony import */ var _button3D__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./button3D */ "./3D/controls/button3D.ts");
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _materials_fluentMaterial__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../materials/fluentMaterial */ "./3D/materials/fluentMaterial.ts");
 /* harmony import */ var _2D_controls_stackPanel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../2D/controls/stackPanel */ "./2D/controls/stackPanel.ts");
@@ -14177,7 +14193,7 @@ var MeshButton3D = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PlanePanel", function() { return PlanePanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
 /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
@@ -14232,7 +14248,7 @@ var PlanePanel = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ScatterPanel", function() { return ScatterPanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
@@ -14359,7 +14375,7 @@ var ScatterPanel = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SpherePanel", function() { return SpherePanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
@@ -14444,7 +14460,7 @@ var SpherePanel = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "StackPanel3D", function() { return StackPanel3D; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
 
@@ -14569,7 +14585,7 @@ var StackPanel3D = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VolumeBasedPanel", function() { return VolumeBasedPanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
 
@@ -14760,7 +14776,7 @@ var VolumeBasedPanel = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "GUI3DManager", function() { return GUI3DManager; });
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _controls_container3D__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./controls/container3D */ "./3D/controls/container3D.ts");
 
@@ -15027,7 +15043,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FluentMaterialDefines", function() { return FluentMaterialDefines; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FluentMaterial", function() { return FluentMaterial; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _shaders_fluent_vertex__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./shaders/fluent.vertex */ "./3D/materials/shaders/fluent.vertex.ts");
 /* harmony import */ var _shaders_fluent_fragment__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./shaders/fluent.fragment */ "./3D/materials/shaders/fluent.fragment.ts");
@@ -15349,7 +15365,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "fluentPixelShader", function() { return fluentPixelShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 var name = 'fluentPixelShader';
@@ -15371,7 +15387,7 @@ var fluentPixelShader = { name: name, shader: shader };
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "fluentVertexShader", function() { return fluentVertexShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 var name = 'fluentVertexShader';
@@ -15394,7 +15410,7 @@ var fluentVertexShader = { name: name, shader: shader };
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Vector3WithInfo", function() { return Vector3WithInfo; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Maths/math");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -15688,14 +15704,14 @@ if (typeof globalObject !== "undefined") {
 
 /***/ }),
 
-/***/ "babylonjs/Misc/perfCounter":
+/***/ "babylonjs/Maths/math":
 /*!****************************************************************************************************!*\
   !*** external {"root":"BABYLON","commonjs":"babylonjs","commonjs2":"babylonjs","amd":"babylonjs"} ***!
   \****************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_perfCounter__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Maths_math__;
 
 /***/ })
 

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

@@ -1198,6 +1198,14 @@ declare module "babylonjs-gui/2D/controls/container" {
         protected _adaptWidthToChildren: boolean;
         /** @hidden */
         protected _adaptHeightToChildren: boolean;
+        /**
+         * Gets or sets a boolean indicating that layout cycle errors should be displayed on the console
+         */
+        logLayoutCycleErrors: boolean;
+        /**
+         * Gets or sets the number of layout cycles (a change involved by a control while evaluating the layout) allowed
+         */
+        maxLayoutCycle: number;
         /** Gets or sets a boolean indicating if the container should try to adapt to its children height */
         adaptHeightToChildren: boolean;
         /** Gets or sets a boolean indicating if the container should try to adapt to its children width */
@@ -1688,6 +1696,10 @@ declare module "babylonjs-gui/2D/controls/stackPanel" {
         private _manualWidth;
         private _manualHeight;
         private _doNotTrackManualChanges;
+        /**
+         * Gets or sets a boolean indicating that layou warnings should be ignored
+         */
+        ignoreLayoutWarnings: boolean;
         /** Gets or sets a boolean indicating if the stack panel is vertical or horizontal*/
         isVertical: boolean;
         /**
@@ -5025,6 +5037,14 @@ declare module BABYLON.GUI {
         protected _adaptWidthToChildren: boolean;
         /** @hidden */
         protected _adaptHeightToChildren: boolean;
+        /**
+         * Gets or sets a boolean indicating that layout cycle errors should be displayed on the console
+         */
+        logLayoutCycleErrors: boolean;
+        /**
+         * Gets or sets the number of layout cycles (a change involved by a control while evaluating the layout) allowed
+         */
+        maxLayoutCycle: number;
         /** Gets or sets a boolean indicating if the container should try to adapt to its children height */
         adaptHeightToChildren: boolean;
         /** Gets or sets a boolean indicating if the container should try to adapt to its children width */
@@ -5498,6 +5518,10 @@ declare module BABYLON.GUI {
         private _manualWidth;
         private _manualHeight;
         private _doNotTrackManualChanges;
+        /**
+         * Gets or sets a boolean indicating that layou warnings should be ignored
+         */
+        ignoreLayoutWarnings: boolean;
         /** Gets or sets a boolean indicating if the stack panel is vertical or horizontal*/
         isVertical: boolean;
         /**

dist/preview release/gui/package.json

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

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

@@ -149,7 +149,6 @@ declare module INSPECTOR {
         private _engineInstrumentation;
         private _timerIntervalId;
         constructor(props: IPaneComponentProps);
-        componentWillMount(): void;
         componentWillUnmount(): void;
         render(): JSX.Element | null;
     }
@@ -188,7 +187,7 @@ declare module INSPECTOR {
     }> {
         private _gridMesh;
         constructor(props: IRenderGridPropertyGridComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         addOrRemoveGrid(): void;
         render(): JSX.Element;
     }
@@ -197,8 +196,6 @@ declare module INSPECTOR {
     export class DebugTabComponent extends PaneComponent {
         private _physicsViewersEnabled;
         constructor(props: IPaneComponentProps);
-        componentWillMount(): void;
-        componentWillUnmount(): void;
         switchPhysicsViewers(): void;
         render(): JSX.Element | null;
     }
@@ -476,7 +473,7 @@ declare module INSPECTOR {
     }> {
         private _onDebugSelectionChangeObserver;
         constructor(props: ITextureLinkLineComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         debugTexture(): void;
         onLink(): void;
@@ -570,7 +567,6 @@ declare module INSPECTOR {
     export class TexturePropertyGridComponent extends React.Component<ITexturePropertyGridComponentProps> {
         private _adtInstrumentation;
         constructor(props: ITexturePropertyGridComponentProps);
-        componentWillMount(): void;
         componentWillUnmount(): void;
         updateTexture(file: File): void;
         render(): JSX.Element;
@@ -634,7 +630,7 @@ declare module INSPECTOR {
     }> {
         private _onSelectionChangedObserver;
         constructor(props: IRadioButtonLineComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         onChange(): void;
         render(): JSX.Element;
@@ -782,11 +778,13 @@ declare module INSPECTOR {
     }
     export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGridComponentProps, {
         displayNormals: boolean;
+        displayVertexColors: boolean;
     }> {
         constructor(props: IMeshPropertyGridComponentProps);
         renderWireframeOver(): void;
         renderNormalVectors(): void;
         displayNormals(): void;
+        displayVertexColors(): void;
         onMaterialLink(): void;
         onSourceMeshLink(): void;
         convertPhysicsTypeToString(): string;
@@ -901,7 +899,6 @@ declare module INSPECTOR {
         connect(animationGroup: BABYLON.AnimationGroup): void;
         updateCurrentFrame(animationGroup: BABYLON.AnimationGroup): void;
         shouldComponentUpdate(nextProps: IAnimationGroupGridComponentProps): boolean;
-        componentWillMount(): void;
         componentWillUnmount(): void;
         playOrPause(): void;
         onCurrentFrameChange(value: number): void;
@@ -1176,7 +1173,7 @@ declare module INSPECTOR {
         private _isPlaying;
         constructor(props: IAnimationGridComponentProps);
         playOrPause(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         onCurrentFrameChange(value: number): void;
         render(): JSX.Element;
@@ -1195,7 +1192,6 @@ declare module INSPECTOR {
         constructor(props: ISkeletonPropertyGridComponentProps);
         switchSkeletonViewers(): void;
         checkSkeletonViewerState(props: ISkeletonPropertyGridComponentProps): void;
-        componentWillMount(): void;
         shouldComponentUpdate(nextProps: ISkeletonPropertyGridComponentProps): boolean;
         render(): JSX.Element;
     }
@@ -1249,6 +1245,40 @@ declare module INSPECTOR {
     }
 }
 declare module INSPECTOR {
+    interface IVector4LineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        step?: number;
+        onChange?: (newvalue: BABYLON.Vector4) => void;
+        useEuler?: boolean;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class Vector4LineComponent extends React.Component<IVector4LineComponentProps, {
+        isExpanded: boolean;
+        value: BABYLON.Vector4;
+    }> {
+        static defaultProps: {
+            step: number;
+        };
+        private _localChange;
+        constructor(props: IVector4LineComponentProps);
+        getCurrentValue(): any;
+        shouldComponentUpdate(nextProps: IVector4LineComponentProps, nextState: {
+            isExpanded: boolean;
+            value: BABYLON.Vector4;
+        }): boolean;
+        switchExpandState(): void;
+        raiseOnPropertyChanged(previousValue: BABYLON.Vector4): void;
+        updateVector4(): void;
+        updateStateX(value: number): void;
+        updateStateY(value: number): void;
+        updateStateZ(value: number): void;
+        updateStateW(value: number): void;
+        render(): JSX.Element;
+    }
+}
+declare module INSPECTOR {
     interface INodeMaterialPropertyGridComponentProps {
         globalState: GlobalState;
         material: BABYLON.NodeMaterial;
@@ -1257,8 +1287,26 @@ declare module INSPECTOR {
         onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
     }
     export class NodeMaterialPropertyGridComponent extends React.Component<INodeMaterialPropertyGridComponentProps> {
+        private _onDebugSelectionChangeObservable;
         constructor(props: INodeMaterialPropertyGridComponentProps);
         edit(): void;
+        renderTextures(): JSX.Element | null;
+        renderInputValues(): JSX.Element | null;
+        render(): JSX.Element;
+    }
+}
+declare module INSPECTOR {
+    interface IMultiMaterialPropertyGridComponentProps {
+        globalState: GlobalState;
+        material: BABYLON.MultiMaterial;
+        lockObject: LockObject;
+        onSelectionChangedObservable?: BABYLON.Observable<any>;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class MultiMaterialPropertyGridComponent extends React.Component<IMultiMaterialPropertyGridComponentProps> {
+        constructor(props: IMultiMaterialPropertyGridComponentProps);
+        onMaterialLink(mat: BABYLON.Material): void;
+        renderChildMaterial(): JSX.Element;
         render(): JSX.Element;
     }
 }
@@ -1268,7 +1316,7 @@ declare module INSPECTOR {
         private _lockObject;
         constructor(props: IPaneComponentProps);
         timerRefresh(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         render(): JSX.Element | null;
     }
@@ -1290,7 +1338,7 @@ declare module INSPECTOR {
         private _backStack;
         private _onSelectionChangeObserver;
         constructor(props: IHeaderComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         goBack(): void;
         renderLogo(): JSX.Element | null;
@@ -1324,7 +1372,7 @@ declare module INSPECTOR {
     export class ToolsTabComponent extends PaneComponent {
         private _videoRecorder;
         constructor(props: IPaneComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         captureScreenshot(): void;
         recordVideo(): void;
@@ -1363,7 +1411,7 @@ declare module INSPECTOR {
         private _onTabChangedObserver;
         private _once;
         constructor(props: IActionTabsComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         changeSelectedTab(index: number): void;
         renderContent(): JSX.Element | null;
@@ -1428,7 +1476,7 @@ declare module INSPECTOR {
         private _onActiveCameraObserver;
         constructor(props: ICameraTreeItemComponentProps);
         setActive(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         render(): JSX.Element;
     }
@@ -1670,7 +1718,7 @@ declare module INSPECTOR {
             isSelected: boolean;
             isInPickingMode: boolean;
         }): boolean;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         onSelect(): void;
         onPickingMode(): void;
@@ -1710,7 +1758,7 @@ declare module INSPECTOR {
         private sceneMutationFunc;
         constructor(props: ISceneExplorerComponentProps);
         processMutation(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         filterContent(filter: string): void;
         findSiblings(parent: any, items: any[], target: any, goNext: boolean, data: {

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

@@ -173,7 +173,6 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/statisticsTabComp
         private _engineInstrumentation;
         private _timerIntervalId;
         constructor(props: IPaneComponentProps);
-        componentWillMount(): void;
         componentWillUnmount(): void;
         render(): JSX.Element | null;
     }
@@ -218,7 +217,7 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/ren
     }> {
         private _gridMesh;
         constructor(props: IRenderGridPropertyGridComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         addOrRemoveGrid(): void;
         render(): JSX.Element;
     }
@@ -228,8 +227,6 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/debugTabComponent
     export class DebugTabComponent extends PaneComponent {
         private _physicsViewersEnabled;
         constructor(props: IPaneComponentProps);
-        componentWillMount(): void;
-        componentWillUnmount(): void;
         switchPhysicsViewers(): void;
         render(): JSX.Element | null;
     }
@@ -554,7 +551,7 @@ declare module "babylonjs-inspector/components/actionTabs/lines/textureLinkLineC
     }> {
         private _onDebugSelectionChangeObserver;
         constructor(props: ITextureLinkLineComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         debugTexture(): void;
         onLink(): void;
@@ -667,7 +664,6 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/mat
     export class TexturePropertyGridComponent extends React.Component<ITexturePropertyGridComponentProps> {
         private _adtInstrumentation;
         constructor(props: ITexturePropertyGridComponentProps);
-        componentWillMount(): void;
         componentWillUnmount(): void;
         updateTexture(file: File): void;
         render(): JSX.Element;
@@ -744,7 +740,7 @@ declare module "babylonjs-inspector/components/actionTabs/lines/radioLineCompone
     }> {
         private _onSelectionChangedObserver;
         constructor(props: IRadioButtonLineComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         onChange(): void;
         render(): JSX.Element;
@@ -954,11 +950,13 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/mes
     }
     export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGridComponentProps, {
         displayNormals: boolean;
+        displayVertexColors: boolean;
     }> {
         constructor(props: IMeshPropertyGridComponentProps);
         renderWireframeOver(): void;
         renderNormalVectors(): void;
         displayNormals(): void;
+        displayVertexColors(): void;
         onMaterialLink(): void;
         onSourceMeshLink(): void;
         convertPhysicsTypeToString(): string;
@@ -1122,7 +1120,6 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/ani
         connect(animationGroup: AnimationGroup): void;
         updateCurrentFrame(animationGroup: AnimationGroup): void;
         shouldComponentUpdate(nextProps: IAnimationGroupGridComponentProps): boolean;
-        componentWillMount(): void;
         componentWillUnmount(): void;
         playOrPause(): void;
         onCurrentFrameChange(value: number): void;
@@ -1524,7 +1521,7 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/ani
         private _isPlaying;
         constructor(props: IAnimationGridComponentProps);
         playOrPause(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         onCurrentFrameChange(value: number): void;
         render(): JSX.Element;
@@ -1549,7 +1546,6 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/mes
         constructor(props: ISkeletonPropertyGridComponentProps);
         switchSkeletonViewers(): void;
         checkSkeletonViewerState(props: ISkeletonPropertyGridComponentProps): void;
-        componentWillMount(): void;
         shouldComponentUpdate(nextProps: ISkeletonPropertyGridComponentProps): boolean;
         render(): JSX.Element;
     }
@@ -1626,6 +1622,44 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/pos
         render(): JSX.Element;
     }
 }
+declare module "babylonjs-inspector/components/actionTabs/lines/vector4LineComponent" {
+    import * as React from "react";
+    import { Vector4 } from "babylonjs/Maths/math";
+    import { Observable } from "babylonjs/Misc/observable";
+    import { PropertyChangedEvent } from "babylonjs-inspector/components/propertyChangedEvent";
+    interface IVector4LineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        step?: number;
+        onChange?: (newvalue: Vector4) => void;
+        useEuler?: boolean;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class Vector4LineComponent extends React.Component<IVector4LineComponentProps, {
+        isExpanded: boolean;
+        value: Vector4;
+    }> {
+        static defaultProps: {
+            step: number;
+        };
+        private _localChange;
+        constructor(props: IVector4LineComponentProps);
+        getCurrentValue(): any;
+        shouldComponentUpdate(nextProps: IVector4LineComponentProps, nextState: {
+            isExpanded: boolean;
+            value: Vector4;
+        }): boolean;
+        switchExpandState(): void;
+        raiseOnPropertyChanged(previousValue: Vector4): void;
+        updateVector4(): void;
+        updateStateX(value: number): void;
+        updateStateY(value: number): void;
+        updateStateZ(value: number): void;
+        updateStateW(value: number): void;
+        render(): JSX.Element;
+    }
+}
 declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/materials/nodeMaterialPropertyGridComponent" {
     import * as React from "react";
     import { Observable } from "babylonjs/Misc/observable";
@@ -1641,8 +1675,33 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/mat
         onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
     }
     export class NodeMaterialPropertyGridComponent extends React.Component<INodeMaterialPropertyGridComponentProps> {
+        private _onDebugSelectionChangeObservable;
         constructor(props: INodeMaterialPropertyGridComponentProps);
         edit(): void;
+        renderTextures(): JSX.Element | null;
+        renderInputValues(): JSX.Element | null;
+        render(): JSX.Element;
+    }
+}
+declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/materials/multiMaterialPropertyGridComponent" {
+    import * as React from "react";
+    import { Observable } from "babylonjs/Misc/observable";
+    import { PropertyChangedEvent } from "babylonjs-inspector/components/propertyChangedEvent";
+    import { LockObject } from "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/lockObject";
+    import { GlobalState } from "babylonjs-inspector/components/globalState";
+    import { Material } from 'babylonjs/Materials/material';
+    import { MultiMaterial } from 'babylonjs/Materials/multiMaterial';
+    interface IMultiMaterialPropertyGridComponentProps {
+        globalState: GlobalState;
+        material: MultiMaterial;
+        lockObject: LockObject;
+        onSelectionChangedObservable?: Observable<any>;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    }
+    export class MultiMaterialPropertyGridComponent extends React.Component<IMultiMaterialPropertyGridComponentProps> {
+        constructor(props: IMultiMaterialPropertyGridComponentProps);
+        onMaterialLink(mat: Material): void;
+        renderChildMaterial(): JSX.Element;
         render(): JSX.Element;
     }
 }
@@ -1653,7 +1712,7 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGridTabCo
         private _lockObject;
         constructor(props: IPaneComponentProps);
         timerRefresh(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         render(): JSX.Element | null;
     }
@@ -1677,7 +1736,7 @@ declare module "babylonjs-inspector/components/headerComponent" {
         private _backStack;
         private _onSelectionChangeObserver;
         constructor(props: IHeaderComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         goBack(): void;
         renderLogo(): JSX.Element | null;
@@ -1717,7 +1776,7 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/toolsTabComponent
     export class ToolsTabComponent extends PaneComponent {
         private _videoRecorder;
         constructor(props: IPaneComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         captureScreenshot(): void;
         recordVideo(): void;
@@ -1760,7 +1819,7 @@ declare module "babylonjs-inspector/components/actionTabs/actionTabsComponent" {
         private _onTabChangedObserver;
         private _once;
         constructor(props: IActionTabsComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         changeSelectedTab(index: number): void;
         renderContent(): JSX.Element | null;
@@ -1834,7 +1893,7 @@ declare module "babylonjs-inspector/components/sceneExplorer/entities/cameraTree
         private _onActiveCameraObserver;
         constructor(props: ICameraTreeItemComponentProps);
         setActive(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         render(): JSX.Element;
     }
@@ -2127,7 +2186,7 @@ declare module "babylonjs-inspector/components/sceneExplorer/entities/sceneTreeI
             isSelected: boolean;
             isInPickingMode: boolean;
         }): boolean;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         onSelect(): void;
         onPickingMode(): void;
@@ -2172,7 +2231,7 @@ declare module "babylonjs-inspector/components/sceneExplorer/sceneExplorerCompon
         private sceneMutationFunc;
         constructor(props: ISceneExplorerComponentProps);
         processMutation(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         filterContent(filter: string): void;
         findSiblings(parent: any, items: any[], target: any, goNext: boolean, data: {
@@ -2403,7 +2462,6 @@ declare module INSPECTOR {
         private _engineInstrumentation;
         private _timerIntervalId;
         constructor(props: IPaneComponentProps);
-        componentWillMount(): void;
         componentWillUnmount(): void;
         render(): JSX.Element | null;
     }
@@ -2442,7 +2500,7 @@ declare module INSPECTOR {
     }> {
         private _gridMesh;
         constructor(props: IRenderGridPropertyGridComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         addOrRemoveGrid(): void;
         render(): JSX.Element;
     }
@@ -2451,8 +2509,6 @@ declare module INSPECTOR {
     export class DebugTabComponent extends PaneComponent {
         private _physicsViewersEnabled;
         constructor(props: IPaneComponentProps);
-        componentWillMount(): void;
-        componentWillUnmount(): void;
         switchPhysicsViewers(): void;
         render(): JSX.Element | null;
     }
@@ -2730,7 +2786,7 @@ declare module INSPECTOR {
     }> {
         private _onDebugSelectionChangeObserver;
         constructor(props: ITextureLinkLineComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         debugTexture(): void;
         onLink(): void;
@@ -2824,7 +2880,6 @@ declare module INSPECTOR {
     export class TexturePropertyGridComponent extends React.Component<ITexturePropertyGridComponentProps> {
         private _adtInstrumentation;
         constructor(props: ITexturePropertyGridComponentProps);
-        componentWillMount(): void;
         componentWillUnmount(): void;
         updateTexture(file: File): void;
         render(): JSX.Element;
@@ -2888,7 +2943,7 @@ declare module INSPECTOR {
     }> {
         private _onSelectionChangedObserver;
         constructor(props: IRadioButtonLineComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         onChange(): void;
         render(): JSX.Element;
@@ -3036,11 +3091,13 @@ declare module INSPECTOR {
     }
     export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGridComponentProps, {
         displayNormals: boolean;
+        displayVertexColors: boolean;
     }> {
         constructor(props: IMeshPropertyGridComponentProps);
         renderWireframeOver(): void;
         renderNormalVectors(): void;
         displayNormals(): void;
+        displayVertexColors(): void;
         onMaterialLink(): void;
         onSourceMeshLink(): void;
         convertPhysicsTypeToString(): string;
@@ -3155,7 +3212,6 @@ declare module INSPECTOR {
         connect(animationGroup: BABYLON.AnimationGroup): void;
         updateCurrentFrame(animationGroup: BABYLON.AnimationGroup): void;
         shouldComponentUpdate(nextProps: IAnimationGroupGridComponentProps): boolean;
-        componentWillMount(): void;
         componentWillUnmount(): void;
         playOrPause(): void;
         onCurrentFrameChange(value: number): void;
@@ -3430,7 +3486,7 @@ declare module INSPECTOR {
         private _isPlaying;
         constructor(props: IAnimationGridComponentProps);
         playOrPause(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         onCurrentFrameChange(value: number): void;
         render(): JSX.Element;
@@ -3449,7 +3505,6 @@ declare module INSPECTOR {
         constructor(props: ISkeletonPropertyGridComponentProps);
         switchSkeletonViewers(): void;
         checkSkeletonViewerState(props: ISkeletonPropertyGridComponentProps): void;
-        componentWillMount(): void;
         shouldComponentUpdate(nextProps: ISkeletonPropertyGridComponentProps): boolean;
         render(): JSX.Element;
     }
@@ -3503,6 +3558,40 @@ declare module INSPECTOR {
     }
 }
 declare module INSPECTOR {
+    interface IVector4LineComponentProps {
+        label: string;
+        target: any;
+        propertyName: string;
+        step?: number;
+        onChange?: (newvalue: BABYLON.Vector4) => void;
+        useEuler?: boolean;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class Vector4LineComponent extends React.Component<IVector4LineComponentProps, {
+        isExpanded: boolean;
+        value: BABYLON.Vector4;
+    }> {
+        static defaultProps: {
+            step: number;
+        };
+        private _localChange;
+        constructor(props: IVector4LineComponentProps);
+        getCurrentValue(): any;
+        shouldComponentUpdate(nextProps: IVector4LineComponentProps, nextState: {
+            isExpanded: boolean;
+            value: BABYLON.Vector4;
+        }): boolean;
+        switchExpandState(): void;
+        raiseOnPropertyChanged(previousValue: BABYLON.Vector4): void;
+        updateVector4(): void;
+        updateStateX(value: number): void;
+        updateStateY(value: number): void;
+        updateStateZ(value: number): void;
+        updateStateW(value: number): void;
+        render(): JSX.Element;
+    }
+}
+declare module INSPECTOR {
     interface INodeMaterialPropertyGridComponentProps {
         globalState: GlobalState;
         material: BABYLON.NodeMaterial;
@@ -3511,8 +3600,26 @@ declare module INSPECTOR {
         onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
     }
     export class NodeMaterialPropertyGridComponent extends React.Component<INodeMaterialPropertyGridComponentProps> {
+        private _onDebugSelectionChangeObservable;
         constructor(props: INodeMaterialPropertyGridComponentProps);
         edit(): void;
+        renderTextures(): JSX.Element | null;
+        renderInputValues(): JSX.Element | null;
+        render(): JSX.Element;
+    }
+}
+declare module INSPECTOR {
+    interface IMultiMaterialPropertyGridComponentProps {
+        globalState: GlobalState;
+        material: BABYLON.MultiMaterial;
+        lockObject: LockObject;
+        onSelectionChangedObservable?: BABYLON.Observable<any>;
+        onPropertyChangedObservable?: BABYLON.Observable<PropertyChangedEvent>;
+    }
+    export class MultiMaterialPropertyGridComponent extends React.Component<IMultiMaterialPropertyGridComponentProps> {
+        constructor(props: IMultiMaterialPropertyGridComponentProps);
+        onMaterialLink(mat: BABYLON.Material): void;
+        renderChildMaterial(): JSX.Element;
         render(): JSX.Element;
     }
 }
@@ -3522,7 +3629,7 @@ declare module INSPECTOR {
         private _lockObject;
         constructor(props: IPaneComponentProps);
         timerRefresh(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         render(): JSX.Element | null;
     }
@@ -3544,7 +3651,7 @@ declare module INSPECTOR {
         private _backStack;
         private _onSelectionChangeObserver;
         constructor(props: IHeaderComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         goBack(): void;
         renderLogo(): JSX.Element | null;
@@ -3578,7 +3685,7 @@ declare module INSPECTOR {
     export class ToolsTabComponent extends PaneComponent {
         private _videoRecorder;
         constructor(props: IPaneComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         captureScreenshot(): void;
         recordVideo(): void;
@@ -3617,7 +3724,7 @@ declare module INSPECTOR {
         private _onTabChangedObserver;
         private _once;
         constructor(props: IActionTabsComponentProps);
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         changeSelectedTab(index: number): void;
         renderContent(): JSX.Element | null;
@@ -3682,7 +3789,7 @@ declare module INSPECTOR {
         private _onActiveCameraObserver;
         constructor(props: ICameraTreeItemComponentProps);
         setActive(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         render(): JSX.Element;
     }
@@ -3924,7 +4031,7 @@ declare module INSPECTOR {
             isSelected: boolean;
             isInPickingMode: boolean;
         }): boolean;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         onSelect(): void;
         onPickingMode(): void;
@@ -3964,7 +4071,7 @@ declare module INSPECTOR {
         private sceneMutationFunc;
         constructor(props: ISceneExplorerComponentProps);
         processMutation(): void;
-        componentWillMount(): void;
+        componentDidMount(): void;
         componentWillUnmount(): void;
         filterContent(filter: string): void;
         findSiblings(parent: any, items: any[], target: any, goNext: boolean, data: {

dist/preview release/inspector/package.json

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

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

@@ -2031,6 +2031,7 @@ var GLTFLoader = /** @class */ (function () {
         else {
             var promises = new Array();
             var babylonMesh_1 = new babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["Mesh"](name, this._babylonScene);
+            babylonMesh_1.overrideMaterialSideOrientation = this._babylonScene.useRightHandedSystem ? babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["Material"].CounterClockWiseSideOrientation : babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["Material"].ClockWiseSideOrientation;
             this._createMorphTargets(context, node, mesh, primitive, babylonMesh_1);
             promises.push(this._loadVertexDataAsync(context, primitive, babylonMesh_1).then(function (babylonGeometry) {
                 return _this._loadMorphTargetsAsync(context, primitive, babylonMesh_1, babylonGeometry).then(function () {
@@ -2811,7 +2812,7 @@ var GLTFLoader = /** @class */ (function () {
     };
     GLTFLoader.prototype._createDefaultMaterial = function (name, babylonDrawMode) {
         var babylonMaterial = new babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["PBRMaterial"](name, this._babylonScene);
-        babylonMaterial.sideOrientation = this._babylonScene.useRightHandedSystem ? babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["Material"].CounterClockWiseSideOrientation : babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["Material"].ClockWiseSideOrientation;
+        // Moved to mesh so user can change materials on gltf meshes: babylonMaterial.sideOrientation = this._babylonScene.useRightHandedSystem ? Material.CounterClockWiseSideOrientation : Material.ClockWiseSideOrientation;
         babylonMaterial.fillMode = babylonDrawMode;
         babylonMaterial.enableSpecularAntiAliasing = true;
         babylonMaterial.useRadianceOverAlpha = !this._parent.transparencyAsCoverage;

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

@@ -4591,6 +4591,7 @@ var GLTFLoader = /** @class */ (function () {
         else {
             var promises = new Array();
             var babylonMesh_1 = new babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["Mesh"](name, this._babylonScene);
+            babylonMesh_1.overrideMaterialSideOrientation = this._babylonScene.useRightHandedSystem ? babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["Material"].CounterClockWiseSideOrientation : babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["Material"].ClockWiseSideOrientation;
             this._createMorphTargets(context, node, mesh, primitive, babylonMesh_1);
             promises.push(this._loadVertexDataAsync(context, primitive, babylonMesh_1).then(function (babylonGeometry) {
                 return _this._loadMorphTargetsAsync(context, primitive, babylonMesh_1, babylonGeometry).then(function () {
@@ -5371,7 +5372,7 @@ var GLTFLoader = /** @class */ (function () {
     };
     GLTFLoader.prototype._createDefaultMaterial = function (name, babylonDrawMode) {
         var babylonMaterial = new babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["PBRMaterial"](name, this._babylonScene);
-        babylonMaterial.sideOrientation = this._babylonScene.useRightHandedSystem ? babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["Material"].CounterClockWiseSideOrientation : babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["Material"].ClockWiseSideOrientation;
+        // Moved to mesh so user can change materials on gltf meshes: babylonMaterial.sideOrientation = this._babylonScene.useRightHandedSystem ? Material.CounterClockWiseSideOrientation : Material.ClockWiseSideOrientation;
         babylonMaterial.fillMode = babylonDrawMode;
         babylonMaterial.enableSpecularAntiAliasing = true;
         babylonMaterial.useRadianceOverAlpha = !this._parent.transparencyAsCoverage;

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

@@ -5933,6 +5933,7 @@ var GLTFLoader = /** @class */ (function () {
         else {
             var promises = new Array();
             var babylonMesh_1 = new babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["Mesh"](name, this._babylonScene);
+            babylonMesh_1.overrideMaterialSideOrientation = this._babylonScene.useRightHandedSystem ? babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["Material"].CounterClockWiseSideOrientation : babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["Material"].ClockWiseSideOrientation;
             this._createMorphTargets(context, node, mesh, primitive, babylonMesh_1);
             promises.push(this._loadVertexDataAsync(context, primitive, babylonMesh_1).then(function (babylonGeometry) {
                 return _this._loadMorphTargetsAsync(context, primitive, babylonMesh_1, babylonGeometry).then(function () {
@@ -6713,7 +6714,7 @@ var GLTFLoader = /** @class */ (function () {
     };
     GLTFLoader.prototype._createDefaultMaterial = function (name, babylonDrawMode) {
         var babylonMaterial = new babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["PBRMaterial"](name, this._babylonScene);
-        babylonMaterial.sideOrientation = this._babylonScene.useRightHandedSystem ? babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["Material"].CounterClockWiseSideOrientation : babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["Material"].ClockWiseSideOrientation;
+        // Moved to mesh so user can change materials on gltf meshes: babylonMaterial.sideOrientation = this._babylonScene.useRightHandedSystem ? Material.CounterClockWiseSideOrientation : Material.ClockWiseSideOrientation;
         babylonMaterial.fillMode = babylonDrawMode;
         babylonMaterial.enableSpecularAntiAliasing = true;
         babylonMaterial.useRadianceOverAlpha = !this._parent.transparencyAsCoverage;