Fix PG dirty + clean

Playground/old/_headers

@@ -1,2 +0,0 @@
-/*
-	Access-Control-Allow-Origin: *

Playground/old/_redirects

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

Playground/old/babylonjs-loaders.js

@@ -1 +0,0 @@
-// Dummy file so Monaco will not complain

Playground/old/babylonjs-serializers.js

@@ -1 +0,0 @@
-// Dummy file so Monaco will not complain

Playground/old/css/color_ts.css

@@ -1,82 +0,0 @@
-/* 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);
-}
-#exampleList #exampleBanner h1 {
-    color: #ae00ef;
-}
-#exampleList .horizontalSeparator {
-    border-top: 1px solid #ae00ef;
-}
-#exampleList .categoryContainer .itemLine .itemContent .itemLineDocLink {
-    color: #ae00ef;
-}
-#exampleList .categoryContainer .itemLine .itemContent .itemLinePGLink {
-    color: #ae00ef;
-}
-
-#fpsLabel {
-    background-color: #9147c9;
-}
-.navbar .title {
-    color: #bb47c9;
-}
-.navbar .version {
-    color: #9147c9;
-}
-
-.button {
-    background-color: #9147c9;
-}
-.button:hover {
-    background-color: #bb47c9;
-}
-.navbar .button.run {
-    background-color: #bb47c9;
-}
-.navbar .select .toDisplay {
-    border: 1px solid #9147c9;
-}
-.navbar .select .subSelect .toDisplaySub {
-    border: 1px solid #9147c9;
-}
-
-.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 .toDisplay .option.light:hover {
-    cursor: pointer;
-    background-color: #d9d9d9;
-}
-
-
-.navbar .select .toDisplay .option.dark {
-    background-color: #333;
-    color: white;
-}
-.navbar .select .toDisplay .option.light {
-    background-color: white;
-    color: #9147c9;
-}
-.navbar .select .toDisplayBig {
-    border: 1px solid #9147c9;
-}
-
-.navbar .select .toDisplayBig.light {    
-    color: #bb47c9;
-}
-.navbar .select .toDisplayBig a.light {
-    color: #9147c9;
-}
-
-

Playground/old/css/frame.css

@@ -1,74 +0,0 @@
-html, body, canvas {
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-    background-color: #272822;
-    margin:0;
-    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    touch-action: none;
-}
-
-canvas {
-    height: calc(100% - 56px);
-    border:none !important;
-    outline:none !important;
-}
-
-.footerLeft{
-    position: relative;
-    display: flex;
-    align-items: center;
-}
-
-#fpsLabel {
-    cursor: default;
-    z-index:10;
-    color:white;
-    pointer-events: none;
-    user-select: none;
-    line-height: 56px;
-    vertical-align: middle;
-    margin: auto 0px auto 15px;
-}
-
-
-.footer {
-    position: absolute;
-    width: 100%;
-    height: 56px;
-    bottom: 0;
-    margin: 0;
-    padding: 0;
-    right: 0;
-    left: 0;
-    background-color: #201936;
-}
-
-.footerRight {
-    display: inline;
-    position: absolute;
-    bottom: 0;
-    right: 0px;
-    top: 0px;
-}
-
-.footerRight a {
-    float: left; /* Float links side by side */
-    width: 56px; 
-    height: 56px;
-    margin: 0px;
-    padding: 0;
-    transition: all 0.3s ease; /* Add transition for hover effects */
-}
-
-.footerRight a img {
-    margin: 10px;
-}
-
-.footerRight a:hover {
-    background-color: #2c5a74; /* Add a hover color */    
-}
-
-.footerRight a:active{
-    background-color: #162D3A; /* Add a hover color */
-}

Playground/old/css/img/canvas3Dbutton.svg

@@ -1 +0,0 @@
-<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/old/css/img/downloadButton.svg

@@ -1 +0,0 @@
-<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/old/css/img/examplesButton.svg

@@ -1 +0,0 @@
-<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/old/css/img/exitButton.svg

@@ -1,27 +0,0 @@
-<svg width="55" height="55" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
- <g>
-  <title>Layer 1</title>
-  <g stroke="null" id="svg_1">
-   <g stroke="null" id="cross">
-    <g stroke="null" id="svg_2">
-     <polygon stroke="null" points="39.666656494140625,16.904794692993164 38.352622985839844,15.602999687194824 28.333335876464844,25.53184700012207 18.31399917602539,15.602999687194824 16.999999046325684,16.904794692993164 27.01933479309082,26.833715438842773 16.999999046325684,36.7618522644043 18.31399917602539,38.06360626220703 28.333335876464844,28.135473251342773 38.352622985839844,38.06360626220703 39.666656494140625,36.7618522644043 29.64663314819336,26.833715438842773 " id="svg_3"/>
-    </g>
-   </g>
-  </g>
-  <g id="svg_4"/>
-  <g id="svg_5"/>
-  <g id="svg_6"/>
-  <g id="svg_7"/>
-  <g id="svg_8"/>
-  <g id="svg_9"/>
-  <g id="svg_10"/>
-  <g id="svg_11"/>
-  <g id="svg_12"/>
-  <g id="svg_13"/>
-  <g id="svg_14"/>
-  <g id="svg_15"/>
-  <g id="svg_16"/>
-  <g id="svg_17"/>
-  <g id="svg_18"/>
- </g>
-</svg>

Playground/old/css/img/hamburgerButton.svg

@@ -1 +0,0 @@
-<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/old/css/img/logoJS.svg

@@ -1,16 +0,0 @@
-<?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/old/css/img/logoTS.svg

@@ -1,22 +0,0 @@
-<?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/old/css/img/metadataButton.svg

@@ -1 +0,0 @@
-<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/old/css/img/newButton.svg

@@ -1 +0,0 @@
-<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/old/css/img/nextButton.svg

@@ -1,29 +0,0 @@
-<svg width="55" height="55" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
- <g>
-  <title>Layer 1</title>
-  <g stroke="null" id="svg_1">
-   <path stroke="null" id="Chevron_Right_1_" d="m35.3485,26.59648l-11.10481,-10.25958c-0.48727,-0.4492 -1.27673,-0.4492 -1.76523,0c-0.48727,0.4492 -0.48727,1.17881 0,1.62801l10.22399,9.44554l-10.22276,9.44554c-0.48727,0.4492 -0.48727,1.17881 0,1.62914c0.48727,0.4492 1.27796,0.4492 1.76523,0l11.10481,-10.25958c0.47989,-0.44455 0.47989,-1.18563 -0.00123,-1.62905l0,-0.00001z" fill="black"/>
-   <g stroke="null" id="svg_2"/>
-   <g stroke="null" id="svg_3"/>
-   <g stroke="null" id="svg_4"/>
-   <g stroke="null" id="svg_5"/>
-   <g stroke="null" id="svg_6"/>
-   <g stroke="null" id="svg_7"/>
-  </g>
-  <g id="svg_8"/>
-  <g id="svg_9"/>
-  <g id="svg_10"/>
-  <g id="svg_11"/>
-  <g id="svg_12"/>
-  <g id="svg_13"/>
-  <g id="svg_14"/>
-  <g id="svg_15"/>
-  <g id="svg_16"/>
-  <g id="svg_17"/>
-  <g id="svg_18"/>
-  <g id="svg_19"/>
-  <g id="svg_20"/>
-  <g id="svg_21"/>
-  <g id="svg_22"/>
- </g>
-</svg>

Playground/old/css/img/playButton.svg

@@ -1 +0,0 @@
-<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/old/css/img/previousButton.svg

@@ -1,29 +0,0 @@
-<svg width="55" height="55" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" stroke="null" style="vector-effect: non-scaling-stroke;">
- <g stroke="null">
-  <title stroke="null">Layer 1</title>
-  <g stroke="null" id="svg_1">
-   <path stroke="null" fill="black" d="m18.11847,26.59648l12.58068,-10.25958c0.55203,-0.4492 1.44641,-0.4492 1.99984,0c0.55203,0.4492 0.55203,1.17881 0,1.62801l-11.58279,9.44554l11.5814,9.44554c0.55203,0.4492 0.55203,1.17881 0,1.62914c-0.55203,0.4492 -1.44781,0.4492 -1.99984,0l-12.58068,-10.25958c-0.54367,-0.44455 -0.54367,-1.18563 0.00139,-1.62905l0,-0.00001l0,-0.00001z" id="Chevron_Right_1_"/>
-   <g stroke="null" id="svg_2"/>
-   <g stroke="null" id="svg_3"/>
-   <g stroke="null" id="svg_4"/>
-   <g stroke="null" id="svg_5"/>
-   <g stroke="null" id="svg_6"/>
-   <g stroke="null" id="svg_7"/>
-  </g>
-  <g stroke="null" id="svg_8"/>
-  <g stroke="null" id="svg_9"/>
-  <g stroke="null" id="svg_10"/>
-  <g stroke="null" id="svg_11"/>
-  <g stroke="null" id="svg_12"/>
-  <g stroke="null" id="svg_13"/>
-  <g stroke="null" id="svg_14"/>
-  <g stroke="null" id="svg_15"/>
-  <g stroke="null" id="svg_16"/>
-  <g stroke="null" id="svg_17"/>
-  <g stroke="null" id="svg_18"/>
-  <g stroke="null" id="svg_19"/>
-  <g stroke="null" id="svg_20"/>
-  <g stroke="null" id="svg_21"/>
-  <g stroke="null" id="svg_22"/>
- </g>
-</svg>

Playground/old/css/index_mobile.css

@@ -1,255 +0,0 @@
-@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;
-    }
-    .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/old/debug.html

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

Playground/old/frame.html

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

Playground/old/full.html

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

Playground/old/index-local.html

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

Playground/old/index.html

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

Playground/old/indexStable.html

@@ -1,438 +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/img/favicon/favicon.ico">
-
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
-        <link rel="stylesheet" href="/css/index.css" />
-        <link rel="stylesheet" href="/css/index_mobile.css" />
-
-        <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
-        <meta name="msapplication-TileColor" content="#ffffff">
-        <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
-        <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
-        <meta name="theme-color" content="#ffffff">
-    </head>
-
-    <body>
-        <!-- Big screens -->
-        <div class="navbar navBar1280 languageJS">
-            <div class="categoryTitle">
-                <img class="logo" src="/css/img/logo_v4.svg">
-                <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>
-            </div>
-
-            <div class="category languageJS" id="JStoTSbar">
-                <div class="buttonJStoTS languageTS" id="toTSbutton1280" title="Switch to TypeScript">Typescript</div>
-                <div class="buttonJStoTS languageJS" id="toJSbutton1280" title="Switch to JavaScript">Javascript</div>
-                <div class="buttonPG run removeOnDiff" id="runButton1280" title="Run&#10;(Alt+Enter)"><img
-                        src="/css/img/playButton.svg"></div>
-                <div class="buttonPG removeOnDiff" id="saveButton1280" title="Save&#10;(Ctrl+S)"><img
-                        src="/css/img/saveButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1280"
-                    title="Download ZIP&#10;(Ctrl+Shift+S)"><img src="/css/img/downloadButton.svg"></div>
-                <div class="buttonPG removeOnDiff" id="newButton1280" title="Create new"><img
-                        src="/css/img/newButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1280" title="Clear"><img
-                        src="/css/img/clearButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1280" title="Compare"><img
-                        src="/css/img/diffButton.svg"></div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1280"
-                    title="Previous difference&#10;(Shift+Alt+F5)"><img src="/css/img/previousButton.svg"></div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1280"
-                    title="Next difference&#10;(Alt+F5)"><img src="/css/img/nextButton.svg"></div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1280" title="Exit&#10;(Esc)"><img
-                        src="/css/img/exitButton.svg"></div>
-                <div class="buttonPG select removeOnDiff" id="menuButton1280" title="Options"><img
-                        src="/css/img/optionsButton.svg">
-                    <div class="toDisplay languageJS">
-                        <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                            <div class="toDisplaySub languageJS">
-                                <div class="option selected" id="darkTheme1280">Dark</div>
-                                <div class="option" id="lightTheme1280">Light</div>
-                            </div>
-                        </div>
-                        <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                            <div class="toDisplaySub displayFontSize languageJS">
-                                <div class="option">12</div>
-                                <div class="option selected">14</div>
-                                <div class="option">16</div>
-                                <div class="option">18</div>
-                                <div class="option">20</div>
-                                <div class="option">22</div>
-                            </div>
-                        </div>
-                        <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option checked noSubSelect" id="editorButton1280">Editor
-                            <i class="fa fa-check-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option noSubSelect" id="ctrlsToggle1280">CTRL+S to save
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
-                        <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
-                        <div class="option noSubSelect" id="formatButton1280">Format code</div>
-                        <div class="option noSubSelect" id="minimapToggle1280">Minimap
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option subSelect" id="qrCodeHover1280">QR Code Link <i class="fa fa-chevron-right"
-                                aria-hidden="true"></i>
-                            <div class="toDisplaySub qrCodeImage">
-                                <div class="option" id="qrCodeImage1280">[QR Code Image]</div>
-                            </div>
-                        </div>
-                        <div class="option uncheck noSubSelect" id="debugButton1280">Inspector</div>
-                        <div class="option nosubselect" id="metadataButton1280">Metadata</div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="category right">
-                <div class="button select">
-                    <span id="currentVersion1280"></span>
-                    <div class="toDisplay currentVersionDisplay" style="display: none"></div>
-                </div>
-                <div class="button select"><img class="examplesButton" src="/css/img/examplesButton.svg"></div>
-            </div>
-        </div>
-
-        <!-- Mid-size screens -->
-        <div class="navbar navBar1024 languageJS">
-            <div class="categoryTitle">
-                <img class="logo" src="/css/img/logo_v4.svg">
-                <div class="version"><span class="versionSub" id="mainTitle1024"></span></div>
-            </div>
-
-            <div class="category languageJS" id="JStoTSbar">
-                <div class="buttonJStoTS languageTS" id="toTSbutton1024" title="Switch to TypeScript">TS</div>
-                <div class="buttonJStoTS languageJS" id="toJSbutton1024" title="Switch to JavaScript">JS</div>
-                <div class="buttonSpaceKiller"></div>
-                <div class="buttonPG run removeOnDiff" id="runButton1024" title="Run&#10;(Alt+Enter)"><img
-                        src="/css/img/playButton.svg"></div>
-                <div class="buttonPG removeOnDiff" id="saveButton1024" title="Save&#10;(Ctrl+S)"><img
-                        src="/css/img/saveButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1024"
-                    title="Download ZIP&#10;(Ctrl+Shift+S)"><img src="/css/img/downloadButton.svg"></div>
-                <div class="buttonPG removeOnDiff" id="newButton1024" title="Create new"><img
-                        src="/css/img/newButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1024" title="Clear"><img
-                        src="/css/img/clearButton.svg"></div>
-                <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1024" title="Compare"><img
-                        src="/css/img/diffButton.svg"></div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1024"><img
-                        src="/css/img/previousButton.svg"></div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1024"><img
-                        src="/css/img/nextButton.svg"></div>
-                <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1024"><img
-                        src="/css/img/exitButton.svg"></div>
-
-                <div class="buttonPG select removeOnDiff" id="menuButton1024" title="Options"><img
-                        src="/css/img/optionsButton.svg">
-                    <div class="toDisplay">
-                        <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
-
-                            <div class="toDisplaySub">
-                                <div class="option selected" id="darkTheme1024">Dark</div>
-                                <div class="option" id="lightTheme1024">Light</div>
-                            </div>
-                        </div>
-                        <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                            <div class="toDisplaySub displayFontSize">
-                                <div class="option">12</div>
-                                <div class="option selected">14</div>
-                                <div class="option">16</div>
-                                <div class="option">18</div>
-                                <div class="option">20</div>
-                                <div class="option">22</div>
-                            </div>
-                        </div>
-                        <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option checked noSubSelect" id="editorButton1024">Editor
-                            <i class="fa fa-check-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option noSubSelect" id="ctrlsToggle1024">CTRL+S to save
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option noSubSelect" id="fullscreenButton1024">Fullscreen</div>
-                        <div class="option noSubSelect" id="editorFullscreenButton1024">Editor Fullscreen</div>
-                        <div class="option noSubSelect" id="formatButton1024">Format code</div>
-                        <div class="option noSubSelect" id="minimapToggle1024">Minimap
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div class="option subSelect" id="qrCodeHover1024">QR Code Link <i class="fa fa-chevron-right"
-                                aria-hidden="true"></i>
-                            <div class="toDisplaySub qrCodeImage">
-                                <div class="option" id="qrCodeImage1024">[QR Code Image]</div>
-                            </div>
-                        </div>
-                        <div class="option uncheck noSubSelect" id="debugButton1024">Inspector</div>
-                        <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="category right">
-                <div class="button select">
-                    <span id="currentVersion1024"></span>
-                    <div class="toDisplay currentVersionDisplay" style="display: none">
-                    </div>
-                </div>
-                <div class="button select"><img class="examplesButton" src="/css/img/examplesButton.svg"></div>
-            </div>
-        </div>
-
-        <!-- Mobile -->
-        <div class="navbar navBarMobile languageJS">
-            <div class="category languageJS" id="JStoTSbar">
-                <div class="button select" id="menuButtonMobile"><img src="/css/img/hamburgerButton.svg">
-                    <div class="toDisplay">
-                        <div class="option noSubSelect languageTS" id="toTSbuttonMobile">TypeScript</div>
-                        <div class="option noSubSelect languageJS" id="toJSbuttonMobile">JavaScript</div>
-                        <div class="option noSubSelect run" id="runButtonMobile"><img src="/css/img/playButton.svg">Run
-                        </div>
-                        <div class="option noSubSelect" id="saveButtonMobile"><img src="/css/img/saveButton.svg">Save
-                        </div>
-                        <div class="option noSubSelect" id="zipButtonMobile"><img
-                                src="/css/img/downloadButton.svg">Download
-                        </div>
-                        <div class="option noSubSelect" id="newButtonMobile"><img src="/css/img/newButton.svg">New</div>
-                        <div class="option noSubSelect" id="clearButtonMobile"><img src="/css/img/clearButton.svg">Clear
-                        </div>
-                        <div class="option noSubSelect" id="debugButtonMobile"><img
-                                src="/css/img/inspectorButton.svg">Inspector</div>
-                        <div class="option subSelect">
-                            <img src="/css/img/optionsButton.svg">
-                            Version<div id="currentVersionMobile"></div>
-                            <div class="toDisplaySub currentVersionDisplay">
-                            </div>
-                        </div>
-                        <div class="option subSelect"><img src="/css/img/optionsButton.svg">Theme
-                            <div class="toDisplaySub">
-                                <div class="option selected" id="darkThemeMobile">Dark</div>
-                                <div class="option" id="lightThemeMobile">Light</div>
-                            </div>
-                        </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 style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
-                            <i class="fa fa-check-square" aria-hidden="true"></i>
-                        </div>                        
-                        <div style="display: none;" class="option noSubSelect" id="ctrlsToggleMobile">CTRL+S to save
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>    
-                        <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile"
-                            style="display: none">Fullscreen</div>
-                        <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile"
-                            style="display: none">Editor
-                            Fullscreen</div>
-                        <div class="option nosubselect" id="formatButtonMobile"><img
-                                src="/css/img/optionsButton.svg">Format
-                            code</div>
-                        <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
-                            <i class="fa fa-square" aria-hidden="true"></i>
-                        </div>
-                        <!-- <div class="option subSelect" id="qrCodeHoverMobile"><img src="/css/img/optionsButton.svg">QR Code Link
-                        <div class="toDisplaySub qrCodeImage">
-                            <div class="option" id="qrCodeImageMobile">[QR Code Image]</div>
-                        </div>
-                    </div> -->
-                        <div class="option nosubselect" id="metadataButtonMobile"><img
-                                src="/css/img/metadataButton.svg">Metadata</div>
-                        <div class="option nosubselect"><img class="examplesButton"
-                                src="/css/img/examplesButton.svg">Examples</div>
-                        <div class="option subSelect"><img src="/css/img/examplesButton.svg">Links / Tools
-                            <div class="toDisplaySub displayFooterLinks">
-                                <div class="option link">
-                                    <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
-                                </div>
-                                <div class="option link">
-                                    <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
-                                </div>
-                                <div class="option link">
-                                    <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
-                                </div>
-                                <div class="option link">
-                                    <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
-                                </div>
-                                <div class="option link">
-                                    <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="categoryTitle">
-                    <img class="logo" src="/css/img/logo_v4.svg">
-                    <div class="version"><span class="versionSub" id="mainTitleMobile"></span></div>
-                </div>
-            </div>
-
-            <div 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" class="javascript">
-            <div id="exampleBanner" class="languageJS">
-                <h1>Examples<img id="examplesButtonClose" src="/css/img/clearButton.svg"></h1>
-            </div>
-            <div class="horizontalSeparator"></div>
-            <input id="filterBar" type="text" placeholder="Filter examples...">
-            <img id="filterBarClear"
-                src="/css/img/clear_button.png">
-        </div>
-
-        <div class="fpsLabel languageJS" id="fpsLabel"></div>
-
-        <div id="errorZone">
-        </div>
-
-        <div class="navbarBottom">
-            <div id="statusBar"></div>
-            <div class="links">
-                <div class='link'>
-                    <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
-                </div>
-                <div class='link'>
-                    <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
-                </div>
-                <div class='link'>
-                    <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
-                </div>
-                <div class='link'>
-                    <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
-                </div>
-                <div class='link'>
-                    <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
-                </div>
-            </div>
-        </div>
-
-        <div id="saveLayer" class="save-layer">
-            <div class="save-form languageJS ">
-                <img id="saveFormButtonClose" src="/css/img/clearButton.svg">
-                <label for="saveFormTitle">TITLE</label>
-                <div class="separator"></div>
-                <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
-
-                <label for="saveFormDescription">DESCRIPTION</label>
-                <div class="separator"></div>
-                <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
-
-                <label for="saveFormTags">TAGS (separated by comma)</label>
-                <div class="separator"></div>
-                <textarea id="saveFormTags" rows="4" cols="10"></textarea>
-
-                <div class="save-form-buttons" id="saveFormButtons">
-                    <div id="saveFormButtonOk">OK</div>
-                    <div id="saveFormButtonCancel">Cancel</div>
-                </div>
-            </div>
-        </div>
-
-        <div id="waitDiv">
-            <div id="logo-part">
-                <img src="/css/img/v4.svg" id="waitLogo" />
-                <img src="/css/img/spinner.svg" id="waitSpinner" />
-            </div>
-        </div>
-
-        <!-- Pep -->
-        <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
-        <!--For canvas/code separator-->
-        <script src="/js/libs/split.js"></script>
-
-        <!-- DatGUI -->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
-        <!-- jszip -->
-        <script src="/js/libs/jszip.min.js"></script>
-        <script src="/js/libs/fileSaver.js"></script>
-
-        <!-- Dependencies -->
-        <script src="https://cdn.babylonjs.com/ammo.js"></script>
-        <script src="https://cdn.babylonjs.com/cannon.js"></script>
-        <script src="https://cdn.babylonjs.com/Oimo.js"></script>
-        <script src="https://cdn.babylonjs.com/gltf_validator.js"></script>
-        <script src="https://cdn.babylonjs.com/earcut.min.js"></script>
-        <!-- Babylon.js -->
-        <script src="https://cdn.babylonjs.com/babylon.js"></script>
-        <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
-        <script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
-        <script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
-        <script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
-        <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>
-        <script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
-        <script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
-
-        <!-- Monaco -->
-        <script src="/node_modules/monaco-editor/dev/vs/loader.js"></script>
-
-        <!-- Extensions -->
-        <script
-            src="https://rawcdn.githack.com/BabylonJS/Extensions/f43ab677b4bca0a6ab77132d3f785be300382760/ClonerSystem/src/babylonx.cloner.js"
-            async>
-        </script>
-        <script
-            src="https://rawcdn.githack.com/BabylonJS/Extensions/785013ec55b210d12263c91f3f0a2ae70cf0bc8a/CompoundShader/src/babylonx.CompoundShader.js"
-            async></script>
-
-        <!-- Scene Manager -->
-        <script
-            src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.manager.js">
-        </script>
-        <script
-            src="https://rawcdn.githack.com/MackeyK24/MackeyK24.github.io/14fda491c50cfca6d3e2f6cbc5e6afe22cc455d6/toolkit/babylon.navmesh.js">
-        </script>
-
-        <!-- jQuery -->
-        <script src="https://code.jquery.com/jquery.min.js"></script>
-        <script src="https://rawcdn.githack.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js"></script>
-
-        <!-- TO DO - Why is this a split here ? It's already in the JS code (index.js) -->
-        <script>
-            Split(['#jsEditor', '#canvasZone']);
-        </script>
-
-        <!-- Main scripts -->
-        <script src="/js/config_versions.js"></script>
-        <script src="/js/examples.js"></script>
-        <script src="/js/main.js"></script>
-        <script src="/js/menuPG.js"></script>
-        <script src="/js/monacoCreator.js"></script>
-        <script src="/js/settingsPG.js"></script>
-        <script src="/js/utils.js"></script>
-        <script src="/js/zipTool.js"></script>
-        <script src="/js/index.js"></script>
-    </body>
-
-</html>

Playground/old/indexWebGPU.html

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

Playground/old/js/config_versions.js

@@ -1,43 +0,0 @@
-CONFIG_last_versions = [
-    ["Latest",[
-        "https://preview.babylonjs.com/babylon.js",
-        "https://preview.babylonjs.com/gui/babylon.gui.min.js",
-        "https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js",
-        "https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js",
-        "https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js",
-        "https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js",
-        "https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js",
-        "https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js",
-        "https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"
-    ]],
-    ["4.1.0", [
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/babylon.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/gui/babylon.gui.min.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/inspector/babylon.inspector.bundle.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/materialsLibrary/babylonjs.materials.min.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/postProcessesLibrary/babylonjs.postProcess.min.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/loaders/babylonjs.loaders.min.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.1.0/dist/serializers/babylonjs.serializers.min.js"
-    ]],
-    ["4.0.3", [
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/babylon.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/gui/babylon.gui.min.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/inspector/babylon.inspector.bundle.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/materialsLibrary/babylonjs.materials.min.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/postProcessesLibrary/babylonjs.postProcess.min.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/loaders/babylonjs.loaders.min.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@4.0.3/dist/serializers/babylonjs.serializers.min.js"
-    ]],
-    ["3.3", [
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/babylon.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/gui/babylon.gui.min.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/inspector/babylon.inspector.bundle.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/materialsLibrary/babylonjs.materials.min.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/postProcessesLibrary/babylonjs.postProcess.min.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/loaders/babylonjs.loaders.min.js",
-        "https://cdn.jsdelivr.net/gh/BabylonJS/Babylon.js@3.3.0/dist/serializers/babylonjs.serializers.min.js"
-    ]]
-];

Playground/old/js/definitionWorker.js

@@ -1,110 +0,0 @@
-// > This worker will analyze the syntaxtree and return an array of deprecated functions (but the goal is to do more in the future!)
-// We need to do this because:
-// - checking extended properties during completion is time consuming, so we need to prefilter potential candidates
-// - we don't want to maintain a static list of deprecated members or to instrument this work on the CI
-// - we have more plans involving syntaxtree analysis
-// > This worker was carefully crafted to work even if the processing is super fast or super long. 
-// In both cases the deprecation filter will start working after the worker is done.
-// We will also need this worker in the future to compute Intellicode scores for completion using dedicated attributes.
-
-// see monacoCreator.js/setupDefinitionWorker
-
-// monaco is using 'define' for module dependencies and service lookup.
-// hopefully typescript is self-contained
-var ts = null;
-var define = (id, dependencies, callback) => ts = callback();
-
-importScripts("../node_modules/monaco-editor/dev/vs/language/typescript/lib/typescriptServices.js");
-
-// store deprecated names
-var deprecatedCandidates = [];
-
-// optimize syntaxtree visitor, we don't care about non documented nodes
-function canHaveJsDoc(node) {
-    const kind = node.kind;
-    switch (kind) {
-        case ts.SyntaxKind.Parameter:
-        case ts.SyntaxKind.CallSignature:
-        case ts.SyntaxKind.ConstructSignature:
-        case ts.SyntaxKind.MethodSignature:
-        case ts.SyntaxKind.PropertySignature:
-        case ts.SyntaxKind.ArrowFunction:
-        case ts.SyntaxKind.ParenthesizedExpression:
-        case ts.SyntaxKind.SpreadAssignment:
-        case ts.SyntaxKind.ShorthandPropertyAssignment:
-        case ts.SyntaxKind.PropertyAssignment:
-        case ts.SyntaxKind.FunctionExpression:
-        case ts.SyntaxKind.FunctionDeclaration:
-        case ts.SyntaxKind.LabeledStatement:
-        case ts.SyntaxKind.ExpressionStatement:
-        case ts.SyntaxKind.VariableStatement:
-        case ts.SyntaxKind.Constructor:
-        case ts.SyntaxKind.MethodDeclaration:
-        case ts.SyntaxKind.PropertyDeclaration:
-        case ts.SyntaxKind.GetAccessor:
-        case ts.SyntaxKind.SetAccessor:
-        case ts.SyntaxKind.ClassDeclaration:
-        case ts.SyntaxKind.ClassExpression:
-        case ts.SyntaxKind.InterfaceDeclaration:
-        case ts.SyntaxKind.TypeAliasDeclaration:
-        case ts.SyntaxKind.EnumMember:
-        case ts.SyntaxKind.EnumDeclaration:
-        case ts.SyntaxKind.ModuleDeclaration:
-        case ts.SyntaxKind.ImportEqualsDeclaration:
-        case ts.SyntaxKind.IndexSignature:
-        case ts.SyntaxKind.FunctionType:
-        case ts.SyntaxKind.ConstructorType:
-        case ts.SyntaxKind.JSDocFunctionType:
-        case ts.SyntaxKind.EndOfFileToken:
-        case ts.SyntaxKind.ExportDeclaration:
-            return true;
-        default:
-            return false;
-    }
-}
-
-function onFindDeprecatedCandidate(node) {
-    const name = relatedName(node);
-    if (name)
-        deprecatedCandidates.push(name);
-}
-
-function relatedName(node) {
-    if (canHaveJsDoc(node) && node.name)
-        return node.name.escapedText;
-
-    if (node.parent)
-        return relatedName(parent);
-
-    return undefined;
-}
-
-function visit(node) {
-
-    if (node.jsDoc) {
-        for (const jsDocEntry of node.jsDoc) {
-            if (jsDocEntry.tags) {
-                for (const tag of jsDocEntry.tags) {
-                    if (tag.tagName && tag.tagName.escapedText == 'deprecated')
-                        onFindDeprecatedCandidate(node);
-                }
-            }
-        }
-    }
-
-    ts.forEachChild(node, visit);
-}
-
-function processDefinition(code) {
-    if (deprecatedCandidates.length == 0) {
-        const sourceFile = ts.createSourceFile('babylon.js', code, ts.ScriptTarget.ESNext, true);
-        ts.forEachChild(sourceFile, visit);
-    }
-
-    self.postMessage({ result: deprecatedCandidates });
-}
-
-self.addEventListener('message', event => {
-    const { code } = event.data;
-    processDefinition(code);
-});

Playground/old/js/examples.js

@@ -1,194 +0,0 @@
-/**
- * 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();
-
-        var scripts = this.parent.main.scripts;
-
-        if (!this.examplesLoaded) {
-
-            
-            function sortScriptsList(a, b) {
-                if (a.title < b.title) return -1;
-                else return 1;
-            }
-
-            for (var i = 0; i < scripts.length; i++) {
-                scripts[i].samples.sort(sortScriptsList);
-
-                var exampleCategory = document.createElement("div");
-                exampleCategory.classList.add("categoryContainer");
-
-                var exampleCategoryTitle = document.createElement("p");
-                exampleCategoryTitle.innerText = scripts[i].title;
-                exampleCategory.appendChild(exampleCategoryTitle);
-
-                for (var ii = 0; ii < scripts[i].samples.length; ii++) {
-                    var example = document.createElement("div");
-                    example.classList.add("itemLine");
-                    example.id = ii;
-
-                    var exampleImg = document.createElement("img");
-                    exampleImg.setAttribute("data-src", scripts[i].samples[ii].icon.replace("icons", "https://doc.babylonjs.com/examples/icons"));
-                    exampleImg.setAttribute("onClick", "document.getElementById('PGLink_" + scripts[i].samples[ii].PGID + "').click();");
-
-                    var exampleContent = document.createElement("div");
-                    exampleContent.classList.add("itemContent");
-                    exampleContent.setAttribute("onClick", "document.getElementById('PGLink_" + scripts[i].samples[ii].PGID + "').click();");
-
-                    var exampleContentLink = document.createElement("div");
-                    exampleContentLink.classList.add("itemContentLink");
-
-                    var exampleTitle = document.createElement("h3");
-                    exampleTitle.classList.add("exampleCategoryTitle");
-                    exampleTitle.innerText = scripts[i].samples[ii].title;
-                    var exampleDescr = document.createElement("div");
-                    exampleDescr.classList.add("itemLineChild");
-                    exampleDescr.innerText = scripts[i].samples[ii].description;
-
-                    var exampleDocLink = document.createElement("a");
-                    exampleDocLink.classList.add("itemLineDocLink");
-                    exampleDocLink.innerText = "Documentation";
-                    exampleDocLink.href = scripts[i].samples[ii].doc;
-                    exampleDocLink.target = "_blank";
-
-                    var examplePGLink = document.createElement("a");
-                    examplePGLink.id = "PGLink_" + scripts[i].samples[ii].PGID;
-                    examplePGLink.classList.add("itemLinePGLink");
-                    examplePGLink.innerText = "Display";
-                    examplePGLink.href = scripts[i].samples[ii].PGID;
-                    examplePGLink.addEventListener("click", function () {
-                        location.href = this.href;
-                        location.reload();
-                    });
-
-                    exampleContentLink.appendChild(exampleTitle);
-                    exampleContentLink.appendChild(exampleDescr);
-                    exampleContent.appendChild(exampleContentLink);
-                    exampleContent.appendChild(exampleDocLink);
-                    exampleContent.appendChild(examplePGLink);
-
-                    example.appendChild(exampleImg);
-                    example.appendChild(exampleContent);
-
-                    exampleCategory.appendChild(example);
-                }
-
-                exampleList.appendChild(exampleCategory);
-            }
-        }
-        this.examplesLoaded = true;
-
-
-        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);
-        this.exampleList.querySelectorAll("img").forEach(function (img) {
-            if (!img.src) {
-                img.src = img.getAttribute("data-src");
-            }
-        })
-    };
-
-    /**
-     * 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/old/js/frame.js

@@ -1,234 +0,0 @@
-var engine = null;
-var canvas = null;
-var scene = null;
-
-fastEval = function (code) {
-    var head = document.getElementsByTagName('head')[0];
-    var script = document.createElement('script');
-    script.setAttribute('type', 'text/javascript');
-
-    script.innerHTML = `try {${code};}
-    catch(e) {
-        handleException(e);
-    }`;
-
-    head.appendChild(script);
-}
-
-handleException = function (e) {
-    console.error(e);
-}
-
-run = function () {
-    var snippetUrl = "https://snippet.babylonjs.com";
-    var fpsLabel = document.getElementById("fpsLabel");
-    var refreshAnchor = document.getElementById("refresh");
-    var editAnchor = document.getElementById("edit");
-
-    var createEngineFunction = "createDefaultEngine";
-    var createSceneFunction;
-
-    if (location.href.toLowerCase().indexOf("noui") > -1) {
-        fpsLabel.style.visibility = "hidden";
-        fpsLabel.style.display = "none";
-        refreshAnchor.style.visibility = "hidden";
-        refreshAnchor.style.display = "none";
-        editAnchor.style.visibility = "hidden";
-        editAnchor.style.display = "none";
-    }
-
-    BABYLON.Engine.ShadersRepository = "/src/Shaders/";
-
-    compileAndRun = function (code) {
-        try {
-
-            if (!BABYLON.Engine.isSupported()) {
-                showError("Your browser does not support WebGL");
-                return;
-            }
-
-            if (engine) {
-                engine.dispose();
-                engine = null;
-            }
-
-            canvas = document.getElementById("renderCanvas");
-
-            createDefaultEngine = function () {
-                return new BABYLON.Engine(canvas, true, {
-                    preserveDrawingBuffer: true,
-                    stencil: true
-                });
-            }
-
-            if (code.indexOf("createEngine") !== -1) {
-                createEngineFunction = "createEngine";
-            }
-
-            // Check for different typos
-            if (code.indexOf("delayCreateScene") !== -1) { // delayCreateScene
-                createSceneFunction = "delayCreateScene";
-                checkCamera = false;
-            } else if (code.indexOf("createScene") !== -1) { // createScene
-                createSceneFunction = "createScene";
-            } else if (code.indexOf("CreateScene") !== -1) { // CreateScene
-                createSceneFunction = "CreateScene";
-            } else if (code.indexOf("createscene") !== -1) { // createscene
-                createSceneFunction = "createscene";
-            }
-
-            if (!createSceneFunction) {
-                // Just pasted code.
-                engine = createDefaultEngine();
-                scene = new BABYLON.Scene(engine);
-                var runScript = null;
-                fastEval("runScript = function(scene, canvas) {" + code + "}");
-                runScript(scene, canvas);
-            } else {
-                code += "\n engine = " + createEngineFunction + "();";
-                code += "\n if (!engine) throw 'engine should not be null.';";
-                code += "\n" + "scene = " + createSceneFunction + "();";
-
-                // Execute the code
-                fastEval(code);
-
-                if (!engine) {
-                    console.error("createEngine function must return an engine.");
-                    return;
-                }
-
-                if (!scene) {
-                    console.error(createSceneFunction + " function must return a scene.");
-                    return;
-                }
-            }
-
-            engine = engine;
-            engine.runRenderLoop(function () {
-                if (engine.scenes.length === 0) {
-                    return;
-                }
-
-                if (canvas.width !== canvas.clientWidth) {
-                    engine.resize();
-                }
-
-                var scene = engine.scenes[0];
-
-                if (scene.activeCamera || scene.activeCameras.length > 0) {
-                    scene.render();
-                }
-                if (fpsLabel && !(scene.activeCamera && 
-                    scene.activeCamera.getClassName && 
-                    scene.activeCamera.getClassName() === 'WebXRCamera')) {
-                    fpsLabel.innerHTML = engine.getFps().toFixed() + " fps";
-                }
-            }.bind(this));
-
-        } catch (e) {
-            // showError(e.message);
-        }
-    };
-    window.addEventListener("resize", function () {
-        if (engine) {
-            engine.resize();
-        }
-    });
-
-    // UI
-    var cleanHash = function () {
-        var splits = decodeURIComponent(location.hash.substr(1)).split("#");
-
-        if (splits.length > 2) {
-            splits.splice(2, splits.length - 2);
-        }
-
-        location.hash = splits.join("#");
-    };
-
-    var checkHash = function () {
-        if (location.hash) {
-            cleanHash();
-
-            try {
-                var xmlHttp = new XMLHttpRequest();
-                xmlHttp.onreadystatechange = function () {
-                    if (xmlHttp.readyState === 4) {
-                        if (xmlHttp.status === 200) {
-                            var snippet = JSON.parse(xmlHttp.responseText);
-                            var snippetCode = JSON.parse(snippet.jsonPayload).code;
-                            compileAndRun(snippetCode);
-
-                            var refresh = document.getElementById("refresh");
-
-                            if (snippet.name != null && snippet.name != "") {
-                                this.currentSnippetTitle = snippet.name;
-                            } else this.currentSnippetTitle = null;
-    
-                            if (snippet.description != null && snippet.description != "") {
-                                this.currentSnippetDescription = snippet.description;
-                            } else this.currentSnippetDescription = null;
-    
-                            if (snippet.tags != null && snippet.tags != "") {
-                                this.currentSnippetTags = snippet.tags;
-                            } else this.currentSnippetTags = null;
-
-                            updateMetadata.call(this);
-
-                            if (refresh) {
-                                refresh.addEventListener("click", function () {
-                                    compileAndRun(snippetCode);
-                                });
-                            }
-                        }
-                    }
-                };
-
-                var hash = location.hash.substr(1);
-                currentSnippetToken = hash.split("#")[0];
-                if (!hash.split("#")[1]) hash += "#0";
-
-                xmlHttp.open("GET", snippetUrl + "/" + hash.replace("#", "/"));
-                xmlHttp.send();
-
-                var edit = document.getElementById("edit");
-
-                if (edit) {
-                    edit.href = "//www.babylonjs-playground.com/#" + hash;
-                }
-            } catch (e) {
-
-            }
-        }
-    };
-
-    var updateMetadata = function() {
-        var selection;
-
-        if (this.currentSnippetTitle) {
-            selection = document.querySelector('title');
-            if (selection) {
-                selection.innerText = (this.currentSnippetTitle + " | Babylon.js Playground");
-            }
-        }
-
-        if (this.currentSnippetDescription) {
-            selection = document.querySelector('meta[name="description"]');
-            if (selection) {
-                selection.setAttribute("content", this.currentSnippetDescription + " - Babylon.js Playground");
-            }
-        }
-
-        if (this.currentSnippetTags) {
-            selection = document.querySelector('meta[name="keywords"]');
-            if (selection) {
-                selection.setAttribute("content", "babylon.js, game engine, webgl, 3d," + this.currentSnippetTags);
-            }
-        }
-    }
-
-    checkHash();
-
-}
-
-run();

Playground/old/js/index.js

@@ -1,23 +0,0 @@
-class Index {
-    constructor() {
-
-        this.examples = new Examples(this);
-        this.utils = new Utils(this);
-        this.monacoCreator = new MonacoCreator(this);
-        this.settingsPG = new SettingsPG(this);
-        this.menuPG = new MenuPG(this);
-        this.zipTool = new ZipTool(this);
-        this.main = new Main(this);
-
-        /**
-         * View split
-         */
-        this.splitInstance = Split(['#jsEditor', '#canvasZone'], {minSize: 0});
-
-        /**
-         * Run the main script
-         */
-        this.main.initialize();
-    }
-}
-index = new Index();

Playground/old/js/libs/fileSaver.js

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

Playground/old/js/menuPG.js

@@ -1,489 +0,0 @@
-/**
- * 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.allDisplayOnDiff = document.querySelectorAll('.displayOnDiff');
-        this.allRemoveOnDiff = document.querySelectorAll('.removeOnDiff');
-
-        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 () {
-                if(this.isMobileVersion) return;
-                else 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 (this.parent.settingsPG.mustModifyBJSversion()) 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;
-            }
-
-            // we do not want to proceed if a menu is displayed or if we are in diff mode
-            const candidates = ["saveLayer", "diffLayer", "diffView"];
-            if (candidates.every(c => !(document.getElementById(c).style.display === "block"))) {
-                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][0];
-
-                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';
-            }
-            
-            // Avoid an iPhone bug making the subitems disappear.
-            // Was previously done with "overflow-y : auto"
-            if(toDisplay.clientHeight < toDisplay.scrollHeight)
-                toDisplay.style.overflowY = "auto";
-            else
-                toDisplay.style.overflowY = "visible";
-        }
-        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';
-        }
-        this.setSelectorVisibility(this.allRemoveOnDiff, 'inline-block');
-        this.setSelectorVisibility(this.allDisplayOnDiff, 'none');
-    };
-    /**
-     * 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';
-        }
-        this.setSelectorVisibility(this.allRemoveOnDiff, 'inline-block');
-        this.setSelectorVisibility(this.allDisplayOnDiff, 'none');
-    };
-    /**
-     * 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';
-        this.setSelectorVisibility(this.allRemoveOnDiff, 'inline-block');
-        this.setSelectorVisibility(this.allDisplayOnDiff, 'none');
-    };
-    /**
-     * Switch to diff mode
-     */
-    resizeForDiff() {
-        this.jsEditorElement.style.width = '0';
-        this.jsEditorElement.style.display = 'none';
-        document.getElementsByClassName('gutter-horizontal')[0].style.display = 'none';
-        this.canvasZoneElement.style.width = '0';
-        this.switchWrapper.style.left = '';
-        this.switchWrapper.style.right = '0';
-        this.switchWrapperCode.style.display = 'none';
-        this.fpsLabelElement.style.display = 'none';
-        // make sure to hide all incompatible buttons with diff mode, and display dedicated buttons
-        this.setSelectorVisibility(this.allRemoveOnDiff, 'none');
-        this.setSelectorVisibility(this.allDisplayOnDiff, 'inline-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(false);
-    };
-    /**
-     * 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';
-        }
-    };
-
-    setSelectorVisibility(selector, displayState) {
-        if (selector) {
-            for (var index = 0; index < selector.length; index++) {
-                var item = selector[index];
-                item.style.display = displayState;
-            }
-        }
-    }
-};

Playground/old/js/monacoCreator.js

@@ -1,584 +0,0 @@
-/**
- * This JS file is for Monaco management
- * This file is quite technical, please make sure that you understand all parts before making changes.
- * Please also make sure that the following is still working before submitting a PR:
- * - autocompletion.
- * - deprecated members marking.
- * - compilation and proper error reporting for both JS and TS.
- * - private/internal member filtering (we should not see members starting with an underscore).
- * - dedicated adornments, like the one used for previewing colors for BABYLON.ColorX types.
- * - diff support.
- * - minimap support.
- */
-class MonacoCreator {
-    constructor(parent) {
-        this.parent = parent;
-
-        this.jsEditor = null;
-        this.diffEditor = null;
-        this.diffNavigator = null;
-        this.monacoMode = "javascript";
-        this.blockEditorChange = false;
-        this.definitionWorker = null;
-        this.deprecatedCandidates = [];
-        this.templates = [];
-
-        this.compilerTriggerTimeoutID = null;
-
-        this.addOnMonacoLoadedCallback(
-            function () {
-                this.parent.main.run();
-
-                // Register a global observable for inspector to request code changes
-                window.Playground = {
-                    onRequestCodeChangeObservable: new BABYLON.Observable()
-                }
-
-                window.Playground.onRequestCodeChangeObservable.add((options) => {
-                    let code = this.getCode();
-                    code = code.replace(options.regex, options.replace);
-
-                    this.setCode(code);
-                });
-            },
-            this
-        );
-    }
-
-    // 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
-
-    waitForDefine() {
-        return new Promise(function (resolve, reject) {
-            function timeout() {
-                if (!window.define) {
-                    setTimeout(timeout, 200);
-                } else {
-                    resolve();
-                }
-            }
-            timeout();
-        });
-    }
-
-    /**
-     * Load the Monaco Node module.
-     */
-    async loadMonaco(typings) {
-        await this.waitForDefine();
-        let response = await fetch(typings || "https://preview.babylonjs.com/babylon.d.ts");
-        if (!response.ok) {
-            return;
-        }
-
-        let libContent = await response.text();
-
-        if (!typings) {
-            response = await fetch(typings || "https://preview.babylonjs.com/gui/babylon.gui.d.ts");
-            if (!response.ok) {
-                return;
-            }
-
-            libContent += await response.text();
-        }
-
-        this.setupDefinitionWorker(libContent);
-
-        // Load code templates
-        response = await fetch("/templates.json");
-        if (response.ok) {
-            this.templates = await response.json();
-        }
-
-        // WARNING !!! We need the 'dev' version of Monaco, as we use monkey-patching to hook into the suggestion adapter
-        require.config({
-            paths: {
-                'vs': '/node_modules/monaco-editor/dev/vs'
-            }
-        });
-
-        require(['vs/editor/editor.main'], () => {
-            // Setup the Monaco compilation pipeline, so we can reuse it directly for our scrpting needs
-            this.setupMonacoCompilationPipeline(libContent);
-
-            // This is used for a vscode-like color preview for ColorX types
-            this.setupMonacoColorProvider();
-
-            // enhance templates with extra properties
-            for (const template of this.templates) {
-                template.kind = monaco.languages.CompletionItemKind.Snippet,
-                template.sortText = "!" + template.label; // make sure templates are on top of the completion window
-                template.insertTextRules = monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet;
-            }
-
-            // As explained above, we need the 'dev' version of Monaco to access this adapter!
-            require(['vs/language/typescript/languageFeatures'], module => {
-                this.hookMonacoCompletionProvider(module.SuggestAdapter);
-            });
-
-            this.onMonacoLoaded();
-        });
-    };
-
-    onMonacoLoaded() {
-        if (this.monacoLoaded) {
-            return;
-        }
-        this.onMonacoLoadedCallbacks.forEach((callbackDef) => {
-            callbackDef.func.call(callbackDef.context, this);
-        });
-        this.monacoLoaded = true;
-    }
-
-    /**
-     * This will register a new callback that will be triggered when the monaco loader is done.
-     * If the loader is already done, the function will be executed right away. 
-     * @param {Function} func the function to call when monaco is available
-     * @param {*} context The context of this function
-     */
-    addOnMonacoLoadedCallback(func, context) {
-        this.onMonacoLoadedCallbacks = this.onMonacoLoadedCallbacks || [];
-        if (this.monacoLoaded) {
-            func.call(context, this);
-        } else {
-            this.onMonacoLoadedCallbacks.push({
-                func: func,
-                context: context
-            });
-        }
-    }
-
-    // > This worker will analyze the syntaxtree and return an array of deprecated functions (but the goal is to do more in the future!)
-    // We need to do this because:
-    // - checking extended properties during completion is time consuming, so we need to prefilter potential candidates
-    // - we don't want to maintain a static list of deprecated members or to instrument this work on the CI
-    // - we have more plans involving syntaxtree analysis
-    // > This worker was carefully crafted to work even if the processing is super fast or super long. 
-    // In both cases the deprecation filter will start working after the worker is done.
-    // We will also need this worker in the future to compute Intellicode scores for completion using dedicated attributes.
-    setupDefinitionWorker(libContent) {
-        this.definitionWorker = new Worker('/js/definitionWorker.js');
-        this.definitionWorker.addEventListener('message', ({
-            data
-        }) => {
-            this.deprecatedCandidates = data.result;
-            this.analyzeCode();
-        });
-        this.definitionWorker.postMessage({
-            code: libContent
-        });
-    }
-
-    isDeprecatedEntry(details) {
-        return details &&
-            details.tags &&
-            details.tags.find(this.isDeprecatedTag);
-    }
-
-    isDeprecatedTag(tag) {
-        return tag &&
-            tag.name == "deprecated";
-    }
-
-    // This will make sure that all members marked with a deprecated jsdoc attribute will be marked as such in Monaco UI
-    // We use a prefiltered list of deprecated candidates, because the effective call to getCompletionEntryDetails is slow.
-    // @see setupDefinitionWorker
-    async analyzeCode() {
-        // if the definition worker is very fast, this can be called out of context. @see setupDefinitionWorker
-        if (!this.jsEditor)
-            return;
-
-        const model = this.jsEditor.getModel();
-        if (!model)
-            return;
-
-        const uri = model.uri;
-
-        let worker = null;
-        if (this.parent.settingsPG.ScriptLanguage == "JS")
-            worker = await monaco.languages.typescript.getJavaScriptWorker();
-        else
-            worker = await monaco.languages.typescript.getTypeScriptWorker();
-
-        const languageService = await worker(uri);
-        const source = '[deprecated members]';
-
-        monaco.editor.setModelMarkers(model, source, []);
-        const markers = [];
-
-        for (const candidate of this.deprecatedCandidates) {
-            const matches = model.findMatches(candidate, null, false, true, null, false);
-            for (const match of matches) {
-                const position = {
-                    lineNumber: match.range.startLineNumber,
-                    column: match.range.startColumn
-                };
-                const wordInfo = model.getWordAtPosition(position);
-                const offset = model.getOffsetAt(position);
-
-                // continue if we already found an issue here
-                if (markers.find(m => m.startLineNumber == position.lineNumber && m.startColumn == position.column))
-                    continue;
-
-                // the following is time consuming on all suggestions, that's why we precompute deprecated candidate names in the definition worker to filter calls
-                // @see setupDefinitionWorker
-                const details = await languageService.getCompletionEntryDetails(uri.toString(), offset, wordInfo.word);
-                if (this.isDeprecatedEntry(details)) {
-                    const deprecatedInfo = details.tags.find(this.isDeprecatedTag);
-                    markers.push({
-                        startLineNumber: match.range.startLineNumber,
-                        endLineNumber: match.range.endLineNumber,
-                        startColumn: wordInfo.startColumn,
-                        endColumn: wordInfo.endColumn,
-                        message: deprecatedInfo.text,
-                        severity: monaco.MarkerSeverity.Warning,
-                        source: source,
-                    });
-                }
-            }
-        }
-
-        monaco.editor.setModelMarkers(model, source, markers);
-    }
-
-    // This is our hook in the Monaco suggest adapter, we are called everytime a completion UI is displayed
-    // So we need to be super fast.
-    // We need the 'dev' version of Monaco, as we use monkey-patching to hook into this suggestion adapter
-    hookMonacoCompletionProvider(provider) {
-        const provideCompletionItems = provider.prototype.provideCompletionItems;
-        const owner = this;
-
-        provider.prototype.provideCompletionItems = async function (model, position, context, token) {
-            // reuse 'this' to preserve context through call (using apply)
-            const result = await provideCompletionItems.apply(this, [model, position, context, token]);
-
-            if (!result || !result.suggestions)
-                return result;
-
-            const suggestions = result.suggestions.filter(item => !item.label.startsWith("_"));
-
-            for (const suggestion of suggestions) {
-                if (owner.deprecatedCandidates.includes(suggestion.label)) {
-
-                    // the following is time consuming on all suggestions, that's why we precompute deprecated candidate names in the definition worker to filter calls
-                    // @see setupDefinitionWorker
-                    const uri = suggestion.uri;
-                    const worker = await this._worker(uri);
-                    const model = monaco.editor.getModel(uri);
-                    const details = await worker.getCompletionEntryDetails(uri.toString(), model.getOffsetAt(position), suggestion.label)
-
-                    if (owner.isDeprecatedEntry(details)) {
-                        suggestion.tags = [monaco.languages.CompletionItemTag.Deprecated];
-                    }
-                }
-            }
-
-            // add our own templates when invoked without context
-            if (context.triggerKind == monaco.languages.CompletionTriggerKind.Invoke) {
-                for (const template of owner.templates) {
-                    if (template.language && owner.monacoMode != template.language)
-                        continue;
-
-                    template.range = undefined;
-                    suggestions.push(template);
-                }
-            }
-
-            // preserve incomplete flag or force it when the definition is not yet analyzed
-            const incomplete = (result.incomplete && result.incomplete == true) || owner.deprecatedCandidates.length == 0;
-
-            return {
-                suggestions: suggestions,
-                incomplete: incomplete
-            };
-        }
-    }
-
-    // Setup both JS and TS compilation pipelines to work with our scripts. 
-    setupMonacoCompilationPipeline(libContent) {
-        const typescript = monaco.languages.typescript;
-
-        if (this.monacoMode === "javascript") {
-            typescript.javascriptDefaults.setCompilerOptions({
-                noLib: false,
-                allowNonTsExtensions: true // required to prevent Uncaught Error: Could not find file: 'inmemory://model/1'.
-            });
-
-            typescript.javascriptDefaults.addExtraLib(libContent, 'babylon.d.ts');
-        } else {
-            typescript.typescriptDefaults.setCompilerOptions({
-                module: typescript.ModuleKind.AMD,
-                target: typescript.ScriptTarget.ESNext,
-                noLib: false,
-                strict: false,
-                alwaysStrict: false,
-                strictFunctionTypes: false,
-                suppressExcessPropertyErrors: false,
-                suppressImplicitAnyIndexErrors: true,
-                noResolve: true,
-                suppressOutputPathCheck: true,
-
-                allowNonTsExtensions: true // required to prevent Uncaught Error: Could not find file: 'inmemory://model/1'.
-            });
-            typescript.typescriptDefaults.addExtraLib(libContent, 'babylon.d.ts');
-        }
-    }
-
-    // Provide an adornment for BABYLON.ColorX types: color preview
-    setupMonacoColorProvider() {
-        monaco.languages.registerColorProvider(this.monacoMode, {
-            provideColorPresentations: (model, colorInfo) => {
-                const color = colorInfo.color;
-
-                const precision = 100.0;
-                const converter = (n) => Math.round(n * precision) / precision;
-
-                let label;
-                if (color.alpha === undefined || color.alpha === 1.0) {
-                    label = `(${converter(color.red)}, ${converter(color.green)}, ${converter(color.blue)})`;
-                } else {
-                    label = `(${converter(color.red)}, ${converter(color.green)}, ${converter(color.blue)}, ${converter(color.alpha)})`;
-                }
-
-                return [{
-                    label: label
-                }];
-            },
-
-            provideDocumentColors: (model) => {
-                const digitGroup = "\\s*(\\d*(?:\\.\\d+)?)\\s*";
-                // we add \n{0} to workaround a Monaco bug, when setting regex options on their side
-                const regex = `BABYLON\\.Color(?:3|4)\\s*\\(${digitGroup},${digitGroup},${digitGroup}(?:,${digitGroup})?\\)\\n{0}`;
-                const matches = model.findMatches(regex, null, true, true, null, true);
-
-                const converter = (g) => g === undefined ? undefined : Number(g);
-
-                return matches.map(match => ({
-                    color: {
-                        red: converter(match.matches[1]),
-                        green: converter(match.matches[2]),
-                        blue: converter(match.matches[3]),
-                        alpha: converter(match.matches[4])
-                    },
-                    range: {
-                        startLineNumber: match.range.startLineNumber,
-                        startColumn: match.range.startColumn + match.matches[0].indexOf("("),
-                        endLineNumber: match.range.startLineNumber,
-                        endColumn: match.range.endColumn
-                    }
-                }));
-            }
-        });
-    }
-
-    /**
-     * 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');
-        var editorElement = document.getElementById('jsEditor');
-        editorElement.innerHTML = "";
-        editorElement.style.overflow = "unset";
-        this.jsEditor = monaco.editor.create(editorElement, editorOptions);
-        this.jsEditor.setValue(oldCode);
-
-        // We cannot call 'analyzeCode' on every keystroke, that's time consuming
-        // So use a debounced version to prevent over processing.
-        // Be careful to keep the proper context for the effective call (this).
-        const analyzeCodeDebounced = this.parent.utils.debounceAsync((async) => this.analyzeCode(), 500);
-
-        this.jsEditor.onDidChangeModelContent(function () {
-            this.parent.utils.markDirty();
-            analyzeCodeDebounced();
-        }.bind(this));
-    };
-
-    detectLanguage(text) {
-        return text && text.indexOf("class Playground") >= 0 ? "typescript" : "javascript";
-    }
-
-    createDiff(left, right, diffView) {
-        const language = this.detectLanguage(left);
-        let leftModel = monaco.editor.createModel(left, language);
-        let rightModel = monaco.editor.createModel(right, language);
-        const diffOptions = {
-            contextmenu: false,
-            lineNumbers: true,
-            readOnly: true,
-            theme: this.parent.settingsPG.vsTheme,
-            contextmenu: false,
-            fontSize: this.parent.settingsPG.fontSize
-        }
-
-        this.diffEditor = monaco.editor.createDiffEditor(diffView, diffOptions);
-        this.diffEditor.setModel({
-            original: leftModel,
-            modified: rightModel
-        });
-
-        this.diffNavigator = monaco.editor.createDiffNavigator(this.diffEditor, {
-            followsCaret: true,
-            ignoreCharChanges: true
-        });
-
-        const menuPG = this.parent.menuPG;
-        const main = this.parent.main;
-        const monacoCreator = this;
-
-        this.diffEditor.addCommand(monaco.KeyCode.Escape, function () {
-            main.toggleDiffEditor(monacoCreator, menuPG);
-        });
-        // Adding default VSCode bindinds for previous/next difference
-        this.diffEditor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.F5, function () {
-            main.navigateToNext();
-        });
-        this.diffEditor.addCommand(monaco.KeyMod.Shift | monaco.KeyMod.Alt | monaco.KeyCode.F5, function () {
-            main.navigateToPrevious();
-        });
-
-        this.diffEditor.focus();
-    }
-
-    disposeDiff() {
-        if (!this.diffEditor)
-            return;
-
-        // We need to properly dispose, else the monaco script editor will use those models in the editor compilation pipeline!
-        let model = this.diffEditor.getModel();
-        let leftModel = model.original;
-        let rightModel = model.modified;
-
-        leftModel.dispose();
-        rightModel.dispose();
-
-        this.diffNavigator.dispose();
-        this.diffEditor.dispose();
-
-        this.diffNavigator = null;
-        this.diffEditor = null;
-    }
-
-    /**
-     * 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
-     */
-    async getRunCode() {
-        var parent = this.parent;
-
-        if (parent.settingsPG.ScriptLanguage == "JS")
-            return this.jsEditor.getValue();
-
-        else if (parent.settingsPG.ScriptLanguage == "TS") {
-            const model = this.jsEditor.getModel();
-            const uri = model.uri;
-
-            const worker = await monaco.languages.typescript.getTypeScriptWorker();
-            const languageService = await worker(uri);
-
-            const uriStr = uri.toString();
-            const result = await languageService.getEmitOutput(uriStr);
-            const diagnostics = await Promise.all([languageService.getSyntacticDiagnostics(uriStr), languageService.getSemanticDiagnostics(uriStr)]);
-
-            diagnostics.forEach(function (diagset) {
-                if (diagset.length) {
-                    const diagnostic = diagset[0];
-                    const position = model.getPositionAt(diagnostic.start);
-
-                    const error = new EvalError(diagnostic.messageText);
-                    error.lineNumber = position.lineNumber;
-                    error.columnNumber = position.column;
-                    throw error;
-                }
-            });
-
-            const output = result.outputFiles[0].text;
-            const stub = "var createScene = function() { return Playground.CreateScene(engine, engine.getRenderingCanvas()); }";
-
-            return output + stub;
-        }
-    };
-};

Playground/old/js/settingsPG.js

@@ -1,247 +0,0 @@
-/**
- * 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.safeMode = localStorage.getItem("bjs-playground-safeMode") || false;
-        this.ctrlS = localStorage.getItem("bjs-playground-ctrlS") || true;
-        // 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 safe mode
-     */
-    setSafeMode(value) {
-        localStorage.setItem("bjs-playground-safeMode", value);
-        this.safeMode = value;
-        if (value) {
-            this.parent.utils.setToMultipleID("safemodeToggle", "innerHTML", 'Safe mode <i class="fa fa-check-square" aria-hidden="true"></i>');
-        } else {
-            this.parent.utils.setToMultipleID("safemodeToggle", "innerHTML", 'Safe mode <i class="fa fa-square" aria-hidden="true"></i>');
-        }
-    };
-    restoreSafeMode() {
-        this.setSafeMode(this.safeMode);
-    };    
-
-    /**
-     * Change CTRL+S
-     */
-    setCTRLS(value) {
-        localStorage.setItem("bjs-playground-ctrlS", value);
-        this.ctrlS = value;
-        if (value) {
-            this.parent.utils.setToMultipleID("ctrlsToggle", "innerHTML", 'CTRL+S to save <i class="fa fa-check-square" aria-hidden="true"></i>');
-        } else {
-            this.parent.utils.setToMultipleID("ctrlsToggle", "innerHTML", 'CTRL+S to save <i class="fa fa-square" aria-hidden="true"></i>');
-        }
-    };
-    restoreCTRLS() {
-        this.setSafeMode(this.ctrlS);
-    };   
-
-    /**
-     * 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");
-            this.parent.utils.setToMultipleID("toJSbutton", "addClass", "selectedLanguage");
-            this.parent.utils.setToMultipleID("toJSbutton", "innerHTML", "Javascript");
-            this.parent.utils.setToMultipleID("toTSbutton", "title", "Switch to TypeScript");
-        } else if (this.scriptLanguage == "TS") {
-            this.parent.utils.setToMultipleID("toJSbutton", "addClass", "floatLeft");
-            this.parent.utils.setToMultipleID("toTSbutton", "addClass", "selectedLanguage");
-            this.parent.utils.setToMultipleID("toTSbutton", "innerHTML", "Typescript");
-            this.parent.utils.setToMultipleID("toJSbutton", "title", "Switch to JavaScript");
-        }
-    };
-
-    /**
-     * 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 (this.mustModifyBJSversion()) {
-            this.parent.menuPG.displayWaitDiv();
-
-            window.def = window.define;
-            window.define = undefined;
-
-            var apiVersion = localStorage.getItem("bjs-playground-apiversion");
-            BABYLON = null;
-
-            var position = 0;
-            for (var i = 0; i < CONFIG_last_versions.length; i++) {
-                if (CONFIG_last_versions[i][0] == apiVersion) {
-                    position = i;
-                    break;
-                }
-            }
-
-            var count = CONFIG_last_versions[position][1].length - 1;
-            var newBJSscript = document.createElement('script');
-            newBJSscript.src = CONFIG_last_versions[position][1][0];
-            newBJSscript.onload = function () {
-                for (var i = 1; i < CONFIG_last_versions[position][1].length; i++) {
-                    var newBJSscript = document.createElement('script');
-                    newBJSscript.src = CONFIG_last_versions[position][1][i];
-                    newBJSscript.onload = function () {
-                        count--;
-                        if (count == 0) {
-                            if (BABYLON.Engine.Version.search('-') != -1) this.parent.menuPG.displayVersionNumber("Latest");
-                            else this.parent.menuPG.displayVersionNumber(BABYLON.Engine.Version);
-                            this.parent.utils.setToMultipleID("mainTitle", "innerHTML", "v" + BABYLON.Engine.Version);
-                            this.parent.monacoCreator.addOnMonacoLoadedCallback(() => {
-                                this.parent.monacoCreator.setCode(localStorage.getItem("bjs-playground-apiversion-tempcode"));
-
-
-                                localStorage.removeItem("bjs-playground-apiversion");
-                                localStorage.removeItem("bjs-playground-apiversion-tempcode");
-                                this.parent.main.compileAndRunFromOutside();
-                            });
-
-                            if (window.def) {
-                                window.define = window.def;
-                            }
-
-                        }
-                    }.bind(this);
-
-                    document.head.appendChild(newBJSscript);
-                }
-            }.bind(this);
-            document.head.appendChild(newBJSscript);
-        } else return false;
-    };
-
-    mustModifyBJSversion() {
-        if (localStorage.getItem("bjs-playground-apiversion") && localStorage.getItem("bjs-playground-apiversion") != null && localStorage.getItem("bjs-playground-apiversion") != "Latest") return true;
-        else return false;
-    };
-};

Playground/old/js/utils.js

@@ -1,184 +0,0 @@
-/**
- * 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>');
-    };
-
-    toLocationError(errorMessage, errorEvent) {
-        if (!errorEvent) {
-            return null;
-        }
-
-        // Do we have any location info?
-        if (errorEvent.hasOwnProperty('lineNumber') && errorEvent.hasOwnProperty('columnNumber'))
-            return errorEvent;
-
-        // Else try to parse the stack to retrieve location...
-        var regEx = /\(.+:(\d+):(\d+)\)\n/g;
-        var match = regEx.exec(errorEvent.stack);
-        if (match) {
-            var error = new EvalError(errorMessage);
-            error.lineNumber = match[1];
-            error.columnNumber = match[2];
-            return error;
-        }
-
-        // Not an error with proper location
-        return null;
-    }
-
-    /**
-     * Used to show error messages
-     * @param {String} errorMessage 
-     * @param {String} errorEvent 
-     */
-    showError(errorMessage, errorEvent) {
-        let errorContent = '<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button>';
-
-        const locationError = this.toLocationError(errorMessage, errorEvent);
-        if (locationError == null) {
-            // use a regular message
-            errorContent += `${errorMessage}</div>`;
-        } else {
-            // we have location information
-            errorContent += `<span id="gotoLocation">Line ${locationError.lineNumber} : ${locationError.columnNumber} - ${errorMessage}</span></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';
-        });
-
-        // Go To Location
-        const gotoLocation = document.getElementById("gotoLocation");
-        const jsEditor = this.parent.monacoCreator.jsEditor;
-        if (gotoLocation) {
-            gotoLocation.addEventListener('click', function () {
-                const position = {
-                    lineNumber: Number(locationError.lineNumber),
-                    column: Number(locationError.columnNumber)
-                };
-
-                jsEditor.revealPositionInCenter(position, monaco.editor.ScrollType.Smooth);
-                jsEditor.setPosition(position);
-            });
-        }
-    };
-
-    /**
-     * 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;
-            } else if (thingToDo === "title") {
-                document.getElementById(id + size).setAttribute("title", 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];
-        }
-    };
-
-    debounceAsync(fn, wait = 0, options = {}) {
-        let lastCallAt
-        let deferred
-        let timer
-        let pendingArgs = []
-        return function debounced(...args) {
-            const currentWait = getWait(wait)
-            const currentTime = new Date().getTime()
-
-            const isCold = !lastCallAt || (currentTime - lastCallAt) > currentWait
-
-            lastCallAt = currentTime
-
-            if (isCold && options.leading) {
-                return options.accumulate ?
-                    Promise.resolve(fn.call(this, [args])).then(result => result[0]) :
-                    Promise.resolve(fn.call(this, ...args))
-            }
-
-            if (deferred) {
-                clearTimeout(timer)
-            } else {
-                deferred = defer()
-            }
-
-            pendingArgs.push(args)
-            timer = setTimeout(flush.bind(this), currentWait)
-
-            if (options.accumulate) {
-                const argsIndex = pendingArgs.length - 1
-                return deferred.promise.then(results => results[argsIndex])
-            }
-
-            return deferred.promise
-        }
-
-        function getWait(wait) {
-            return (typeof wait === 'function') ? wait() : wait
-        }
-
-        function defer() {
-            const deferred = {}
-            deferred.promise = new Promise((resolve, reject) => {
-                deferred.resolve = resolve
-                deferred.reject = reject
-            })
-            return deferred
-        }
-
-        function flush() {
-            const thisDeferred = deferred
-            clearTimeout(timer)
-
-            Promise.resolve(
-                    options.accumulate ?
-                    fn.call(this, pendingArgs) :
-                    fn.apply(this, pendingArgs[pendingArgs.length - 1])
-                )
-                .then(thisDeferred.resolve, thisDeferred.reject)
-
-            pendingArgs = []
-            deferred = null
-        }
-    }
-}

Playground/old/js/zipTool.js

@@ -1,189 +0,0 @@
-/**
- * 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 && textures[index].name.indexOf(".env") === -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.";
-
-        var regex = /CreateGroundFromHeightMap\(".+", "(.+)"/g;
-
-        do {
-            let match = regex.exec(this.zipCode);            
-
-            if (!match) {
-                break;
-            }
-
-            textures.push({ name: match[1] });
-        } while(true);
-
-
-        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/old/package.json

@@ -1,14 +0,0 @@
-{
-  "name": "babylonjsplayground",
-  "version": "4.0.0",
-  "description": "Babylon.js is a 3D engine based on webgl and javascript",
-  "main": "",
-  "repository": {
-    "url": "https://github.com/BabylonJS/Babylon.js/"
-  },
-  "readme": "https://github.com/BabylonJS/Babylon.js/blob/master/readme.md",
-  "license": "(Apache-2.0)",
-  "dependencies": {
-    "monaco-editor": "~0.18.1"
-  }
-}

Playground/old/scripts/Basic sounds.js

@@ -1,30 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-
-    var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, 0), scene);
-
-    var gunshot = new BABYLON.Sound("Gunshot", "sounds/gunshot.wav", scene, function () {
-        console.log("Sound is now ready to be played.");
-        // Play immediatly
-        gunshot.play();
-        // Play after 3 seconds
-        gunshot.play(3);
-    });
-
-    // Load the sound and play it automatically once ready
-    var music = new BABYLON.Sound("Violons", "sounds/violons11.wav", scene, null, { loop: true, autoplay: true });
-
-    window.addEventListener("keydown", function (evt) {
-        // Press space key to fire
-        if (evt.keyCode === 32) {
-            gunshot.play();
-        }
-    });
-
-    // Stop the music after 5 seconds
-    window.setTimeout(function () {
-        music.stop();
-    }, 10000);
-
-    return scene;
-};

Playground/old/scripts/Easing functions.js

@@ -1,96 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-
-    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
-    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
-    camera.attachControl(canvas, true);
-
-    // Torus
-    var torus = BABYLON.Mesh.CreateTorus("torus", 8, 2, 32, scene, false);
-    torus.position.x = 25;
-    torus.position.z = 30;
-
-    var materialBox = new BABYLON.StandardMaterial("texture1", scene);
-    materialBox.diffuseColor = new BABYLON.Color3(0, 1, 0);//Green
-
-    // -----------------------------------------
-    // Creation of an easing animation within predefined easing functions
-    // ------------------------------------------
-
-    //Create a Vector3 animation at 30 FPS
-    var animationTorus = new BABYLON.Animation("torusEasingAnimation", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
-
-    // the torus destination position
-    var nextPos = torus.position.add(new BABYLON.Vector3(-80, 0, 0));
-
-    // Animation keys
-    var keysTorus = [];
-    keysTorus.push({ frame: 0, value: torus.position });
-    keysTorus.push({ frame: 120, value: nextPos });
-    animationTorus.setKeys(keysTorus);
-
-    // Adding an easing function
-    // You can use :
-    //1.	CircleEase()
-    //2.	BackEase(amplitude)
-    //3.	BounceEase(bounces, bounciness)
-    //4.	CubicEase()
-    //5.	ElasticEase(oscillations, springiness)
-    //6.	ExponentialEase(exponent)
-    //7.	PowerEase(power)
-    //8.	QuadraticEase()
-    //9.	QuarticEase()
-    //10.	QuinticEase()
-    //11.	SineEase()
-    // And if you want a total control, you can use a Bezier Curve animation
-    //12.   BezierCurveEase(x1, y1, x2, y2)
-    var easingFunction = new BABYLON.CircleEase();
-
-    // For each easing function, you can choose beetween EASEIN (default), EASEOUT, EASEINOUT
-    easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
-
-    // Adding easing function to my animation
-    animationTorus.setEasingFunction(easingFunction);
-
-    // Adding animation to my torus animations collection
-    torus.animations.push(animationTorus);
-
-    //Finally, launch animations on torus, from key 0 to key 120 with loop activated
-    scene.beginAnimation(torus, 0, 120, true);
-
-    // ------------------------------------------
-    // Using Bezier curve to create a custom easing function
-    // See here to see some samples and values : http://cubic-bezier.com/
-    // -----------------------------------------
-
-    // Torus
-    var bezierTorus = BABYLON.Mesh.CreateTorus("torus", 8, 2, 32, scene, false);
-    bezierTorus.position.x = 25;
-    bezierTorus.position.z = 0;
-
-
-    // Create the animation
-    var animationBezierTorus = new BABYLON.Animation("animationBezierTorus", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
-    var keysBezierTorus = [];
-    keysBezierTorus.push({ frame: 0, value: bezierTorus.position });
-    keysBezierTorus.push({ frame: 120, value: bezierTorus.position.add(new BABYLON.Vector3(-80, 0, 0)) });
-    animationBezierTorus.setKeys(keysBezierTorus);
-    var bezierEase = new BABYLON.BezierCurveEase(0.32, -0.73, 0.69, 1.59);
-    animationBezierTorus.setEasingFunction(bezierEase);
-    bezierTorus.animations.push(animationBezierTorus);
-    scene.beginAnimation(bezierTorus, 0, 120, true);
-
-    // ------------------------------------------
-    // Create a simple animation without easing functions
-    // ------------------------------------------
-
-    var torus0 = BABYLON.Mesh.CreateTorus("torus", 8, 2, 32, scene, false);
-    torus0.position.x = 25;
-    torus0.position.z = -30;
-    torus0.material = materialBox;
-
-    BABYLON.Animation.CreateAndStartAnimation("anim", torus0, "position", 30, 120,
-             torus0.position, torus0.position.add(new BABYLON.Vector3(-80, 0, 0)));
-
-    return scene;
-}

Playground/old/scripts/Environment.js

@@ -1,52 +0,0 @@
-function createScene() {
-    var scene = new BABYLON.Scene(engine);
-
-    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(10, 50, 50), scene);
-    var camera = new BABYLON.ArcRotateCamera("Camera", 0.4, 1.2, 20, new BABYLON.Vector3(-10, 0, 0), scene);
-
-    camera.attachControl(canvas, true);
-
-    var material1 = new BABYLON.StandardMaterial("mat1", scene);
-    material1.diffuseColor = new BABYLON.Color3(1, 1, 0);
-
-    for (var i = 0; i < 10; i++) {
-        var box = BABYLON.Mesh.CreateBox("Box", 1.0, scene);
-        box.material = material1;
-        box.position = new BABYLON.Vector3(-i * 5, 0, 0);
-    }
-
-    // Fog
-    scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
-    //BABYLON.Scene.FOGMODE_NONE;
-    //BABYLON.Scene.FOGMODE_EXP;
-    //BABYLON.Scene.FOGMODE_EXP2;
-    //BABYLON.Scene.FOGMODE_LINEAR;
-
-    scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);
-    scene.fogDensity = 0.01;
-
-    //Only if LINEAR
-    //scene.fogStart = 20.0;
-    //scene.fogEnd = 60.0;
-
-    // Skybox
-    var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
-    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
-    skyboxMaterial.backFaceCulling = false;
-    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
-    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
-    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
-    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
-    skyboxMaterial.disableLighting = true;
-    skybox.material = skyboxMaterial;
-
-    var alpha = 0;
-    scene.registerBeforeRender(function () {
-
-        scene.fogDensity = Math.cos(alpha) / 10;
-        alpha += 0.02;
-
-    });
-
-    return scene;
-};

Playground/old/scripts/Intersections.js

@@ -1,90 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-
-    var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 70, new BABYLON.Vector3(5, 0, 0), scene);
-    camera.attachControl(canvas, true);
-
-    // Material
-    var matPlan = new BABYLON.StandardMaterial("matPlan1", scene);
-    matPlan.backFaceCulling = false;
-    matPlan.emissiveColor = new BABYLON.Color3(0.2, 1, 0.2);
-
-    var matBB = new BABYLON.StandardMaterial("matBB", scene);
-    matBB.emissiveColor = new BABYLON.Color3(1, 1, 1);
-    matBB.wireframe = true;
-
-    // Intersection point
-    var pointToIntersect = new BABYLON.Vector3(-30, 0, 0);
-    var origin = BABYLON.Mesh.CreateSphere("origin", 4, 0.3, scene);
-    origin.position = pointToIntersect;
-    origin.material = matPlan;
-
-    // Create two planes
-    var plan1 = BABYLON.Mesh.CreatePlane("plane1", 20, scene);
-    plan1.position = new BABYLON.Vector3(13, 0, 0);
-    plan1.rotation.x = -Math.PI / 4;
-    plan1.material = matPlan;
-
-    var plan2 = BABYLON.Mesh.CreatePlane("plane2", 20, scene);
-    plan2.position = new BABYLON.Vector3(-13, 0, 0);
-    plan2.rotation.x = -Math.PI / 4;
-    plan2.material = matPlan;
-
-    // AABB - Axis aligned bounding box
-    var planAABB = BABYLON.Mesh.CreateBox("AABB", 20, scene);
-    planAABB.material = matBB;
-    planAABB.position = new BABYLON.Vector3(13, 0, 0);
-    planAABB.scaling = new BABYLON.Vector3(1, Math.cos(Math.PI / 4), Math.cos(Math.PI / 4));
-
-    // OBB - Object boundind box
-    var planOBB = BABYLON.Mesh.CreateBox("OBB", 20, scene);
-    planOBB.scaling = new BABYLON.Vector3(1, 1, 0.05);
-    planOBB.parent = plan2;
-    planOBB.material = matBB;
-
-    // Balloons
-    var balloon1 = BABYLON.Mesh.CreateSphere("balloon1", 10, 2.0, scene);
-    var balloon2 = BABYLON.Mesh.CreateSphere("balloon2", 10, 2.0, scene);
-    var balloon3 = BABYLON.Mesh.CreateSphere("balloon3", 10, 2.0, scene);
-    balloon1.material = new BABYLON.StandardMaterial("matBallon", scene);
-    balloon2.material = new BABYLON.StandardMaterial("matBallon", scene);
-    balloon3.material = new BABYLON.StandardMaterial("matBallon", scene);
-
-    balloon1.position = new BABYLON.Vector3(6, 5, 0);
-    balloon2.position = new BABYLON.Vector3(-6, 5, 0);
-    balloon3.position = new BABYLON.Vector3(-30, 5, 0);
-
-    //Animation
-    var alpha = Math.PI;
-    scene.registerBeforeRender(function () {
-
-        //Balloon 1 intersection -- Precise = false
-        if (balloon1.intersectsMesh(plan1, false)) {
-            balloon1.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
-        } else {
-            balloon1.material.emissiveColor = new BABYLON.Color3(1, 1, 1);
-        }
-
-        //Balloon 2 intersection -- Precise = true
-        if (balloon2.intersectsMesh(plan2, true)) {
-            balloon2.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
-        } else {
-            balloon2.material.emissiveColor = new BABYLON.Color3(1, 1, 1);
-        }
-
-        //balloon 3 intersection on single point
-        if (balloon3.intersectsPoint(pointToIntersect)) {
-            balloon3.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
-        } else {
-            balloon3.material.emissiveColor = new BABYLON.Color3(1, 1, 1);
-        }
-
-        alpha += 0.01;
-        balloon1.position.y += Math.cos(alpha) / 10;
-        balloon2.position.y = balloon1.position.y;
-        balloon3.position.y = balloon1.position.y;
-    });
-
-
-    return scene;
-}

Playground/old/scripts/Sound on mesh.js

@@ -1,62 +0,0 @@
-var createScene = function () {
-    // This creates a basic Babylon Scene object (non-mesh)
-    var scene = new BABYLON.Scene(engine);
-
-    // Lights
-    var light0 = new BABYLON.DirectionalLight("Omni", new BABYLON.Vector3(-2, -5, 2), scene);
-    var light1 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(2, -5, -2), scene);
-
-    // Need a free camera for collisions
-    var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, -8, -20), scene);
-    camera.attachControl(canvas, true);
-
-    //Ground
-    var ground = BABYLON.Mesh.CreatePlane("ground", 400.0, scene);
-    ground.material = new BABYLON.StandardMaterial("groundMat", scene);
-    ground.material.diffuseColor = new BABYLON.Color3(1, 1, 1);
-    ground.material.backFaceCulling = false;
-    ground.position = new BABYLON.Vector3(5, -10, -15);
-    ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);
-
-    //Simple crate
-    var box = BABYLON.Mesh.CreateBox("crate", 2, scene);
-    box.material = new BABYLON.StandardMaterial("Mat", scene);
-    box.material.diffuseTexture = new BABYLON.Texture("textures/crate.png", scene);
-    box.position = new BABYLON.Vector3(10, -9, 0);
-
-    // Create and load the sound async
-    var music = new BABYLON.Sound("Violons", "sounds/violons11.wav", scene, function () {
-        // Call with the sound is ready to be played (loaded & decoded)
-        // TODO: add your logic
-        console.log("Sound ready to be played!");
-    }, { loop: true, autoplay: true });
-
-    // Sound will now follow the mesh position
-    music.attachToMesh(box);
-
-    //Set gravity for the scene (G force like, on Y-axis)
-    scene.gravity = new BABYLON.Vector3(0, -0.9, 0);
-
-    // Enable Collisions
-    scene.collisionsEnabled = true;
-
-    //Then apply collisions and gravity to the active camera
-    camera.checkCollisions = true;
-    camera.applyGravity = true;
-
-    //Set the ellipsoid around the camera (e.g. your player's size)
-    camera.ellipsoid = new BABYLON.Vector3(1, 1, 1);
-
-    //finally, say which mesh will be collisionable
-    ground.checkCollisions = true;
-
-    var alpha = 0;
-
-    scene.registerBeforeRender(function () {
-        // Moving the box will automatically move the associated sound attached to it
-        box.position = new BABYLON.Vector3(Math.cos(alpha) * 30, -9, Math.sin(alpha) * 30);
-        alpha += 0.01;
-    });
-
-    return scene;
-};

Playground/old/scripts/actions.js

@@ -1,144 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
-    camera.setPosition(new BABYLON.Vector3(20, 200, 400));
-    camera.attachControl(canvas, true);
-
-
-    camera.lowerBetaLimit = 0.1;
-    camera.upperBetaLimit = (Math.PI / 2) * 0.99;
-    camera.lowerRadiusLimit = 150;
-
-    scene.clearColor = new BABYLON.Color3(0, 0, 0);
-
-    var light1 = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), scene);
-    var light2 = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), scene);
-    var light3 = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), scene);
-
-    light1.diffuse = BABYLON.Color3.Red();
-    light2.diffuse = BABYLON.Color3.Green();
-    light3.diffuse = BABYLON.Color3.Blue();
-
-    // Define states
-    light1.state = "on";
-    light2.state = "on";
-    light3.state = "on";
-
-    // Ground
-    var ground = BABYLON.Mesh.CreateGround("ground", 1000, 1000, 1, scene, false);
-    var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
-    groundMaterial.specularColor = BABYLON.Color3.Black();
-    ground.material = groundMaterial;
-
-    // Boxes
-    var redBox = BABYLON.Mesh.CreateBox("red", 20, scene);
-    var redMat = new BABYLON.StandardMaterial("ground", scene);
-    redMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
-    redMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
-    redMat.emissiveColor = BABYLON.Color3.Red();
-    redBox.material = redMat;
-    redBox.position.x -= 100;
-
-    var greenBox = BABYLON.Mesh.CreateBox("green", 20, scene);
-    var greenMat = new BABYLON.StandardMaterial("ground", scene);
-    greenMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
-    greenMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
-    greenMat.emissiveColor = BABYLON.Color3.Green();
-    greenBox.material = greenMat;
-    greenBox.position.z -= 100;
-
-    var blueBox = BABYLON.Mesh.CreateBox("blue", 20, scene);
-    var blueMat = new BABYLON.StandardMaterial("ground", scene);
-    blueMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
-    blueMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
-    blueMat.emissiveColor = BABYLON.Color3.Blue();
-    blueBox.material = blueMat;
-    blueBox.position.x += 100;
-
-    // Sphere
-    var sphere = BABYLON.Mesh.CreateSphere("sphere", 16, 20, scene);
-    var sphereMat = new BABYLON.StandardMaterial("ground", scene);
-    sphereMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
-    sphereMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
-    sphereMat.emissiveColor = BABYLON.Color3.Purple();
-    sphere.material = sphereMat;
-    sphere.position.z += 100;
-
-    // Rotating donut
-    var donut = BABYLON.Mesh.CreateTorus("donut", 20, 8, 16, scene);
-
-    // On pick interpolations
-    var prepareButton = function (mesh, color, light) {
-        var goToColorAction = new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, light, "diffuse", color, 1000, null, true);
-
-        mesh.actionManager = new BABYLON.ActionManager(scene);
-        mesh.actionManager.registerAction(
-            new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, light, "diffuse", BABYLON.Color3.Black(), 1000))
-            .then(new BABYLON.CombineAction(BABYLON.ActionManager.NothingTrigger, [ // Then is used to add a child action used alternatively with the root action. 
-                goToColorAction,                                                 // First click: root action. Second click: child action. Third click: going back to root action and so on...   
-                new BABYLON.SetValueAction(BABYLON.ActionManager.NothingTrigger, mesh.material, "wireframe", false)
-            ]));
-        mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPickTrigger, mesh.material, "wireframe", true))
-            .then(new BABYLON.DoNothingAction());
-        mesh.actionManager.registerAction(new BABYLON.SetStateAction(BABYLON.ActionManager.OnPickTrigger, light, "off"))
-            .then(new BABYLON.SetStateAction(BABYLON.ActionManager.OnPickTrigger, light, "on"));
-    }
-
-    prepareButton(redBox, BABYLON.Color3.Red(), light1);
-    prepareButton(greenBox, BABYLON.Color3.Green(), light2);
-    prepareButton(blueBox, BABYLON.Color3.Blue(), light3);
-
-    // Conditions
-    sphere.actionManager = new BABYLON.ActionManager(scene);
-    var condition1 = new BABYLON.StateCondition(sphere.actionManager, light1, "off");
-    var condition2 = new BABYLON.StateCondition(sphere.actionManager, light1, "on");
-
-    sphere.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnLeftPickTrigger, camera, "alpha", 0, 500, condition1));
-    sphere.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnLeftPickTrigger, camera, "alpha", Math.PI, 500, condition2));
-
-    // Over/Out
-    var makeOverOut = function (mesh) {
-        mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesh.material, "emissiveColor", mesh.material.emissiveColor));
-        mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOverTrigger, mesh.material, "emissiveColor", BABYLON.Color3.White()));
-        mesh.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesh, "scaling", new BABYLON.Vector3(1, 1, 1), 150));
-        mesh.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOverTrigger, mesh, "scaling", new BABYLON.Vector3(1.1, 1.1, 1.1), 150));
-    }
-
-    makeOverOut(redBox);
-    makeOverOut(greenBox);
-    makeOverOut(blueBox);
-    makeOverOut(sphere);
-
-    // scene's actions
-    scene.actionManager = new BABYLON.ActionManager(scene);
-
-    var rotate = function (mesh) {
-        scene.actionManager.registerAction(new BABYLON.IncrementValueAction(BABYLON.ActionManager.OnEveryFrameTrigger, mesh, "rotation.y", 0.01));
-    }
-
-    rotate(redBox);
-    rotate(greenBox);
-    rotate(blueBox);
-
-    // Intersections
-    donut.actionManager = new BABYLON.ActionManager(scene);
-
-    donut.actionManager.registerAction(new BABYLON.SetValueAction(
-        { trigger: BABYLON.ActionManager.OnIntersectionEnterTrigger, parameter: sphere },
-        donut, "scaling", new BABYLON.Vector3(1.2, 1.2, 1.2)));
-
-    donut.actionManager.registerAction(new BABYLON.SetValueAction(
-        { trigger: BABYLON.ActionManager.OnIntersectionExitTrigger, parameter: sphere }
-        , donut, "scaling", new BABYLON.Vector3(1, 1, 1)));
-
-    // Animations
-    var alpha = 0;
-    scene.registerBeforeRender(function () {
-        donut.position.x = 100 * Math.cos(alpha);
-        donut.position.y = 5;
-        donut.position.z = 100 * Math.sin(alpha);
-        alpha += 0.01;
-    });
-
-    return scene;
-}

Playground/old/scripts/animations.js

@@ -1,74 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-
-    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
-    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);
-    camera.attachControl(canvas, true);
-
-    //Boxes
-    var box1 = BABYLON.Mesh.CreateBox("Box1", 10.0, scene);
-    box1.position.x = -20;
-    var box2 = BABYLON.Mesh.CreateBox("Box2", 10.0, scene);
-
-    var materialBox = new BABYLON.StandardMaterial("texture1", scene);
-    materialBox.diffuseColor = new BABYLON.Color3(0, 1, 0);//Green
-    var materialBox2 = new BABYLON.StandardMaterial("texture2", scene);
-
-    //Applying materials
-    box1.material = materialBox;
-    box2.material = materialBox2;
-
-    //Positioning box
-    box2.position.x = 20;
-
-    // Creation of a basic animation with box 1
-    //----------------------------------------
-
-    //Create a scaling animation at 30 FPS
-    var animationBox = new BABYLON.Animation("tutoAnimation", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
-                                                                    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
-    //Here we have chosen a loop mode, but you can change to :
-    //  Use previous values and increment it (BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE)
-    //  Restart from initial value (BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE)
-    //  Keep the final value (BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT)
-
-    // Animation keys
-    var keys = [];
-    //At the animation key 0, the value of scaling is "1"
-    keys.push({
-        frame: 0,
-        value: 1
-    });
-
-    //At the animation key 20, the value of scaling is "0.2"
-    keys.push({
-        frame: 20,
-        value: 0.2
-    });
-
-    //At the animation key 100, the value of scaling is "1"
-    keys.push({
-        frame: 100,
-        value: 1
-    });
-
-    //Adding keys to the animation object
-    animationBox.setKeys(keys);
-
-    //Then add the animation object to box1
-    box1.animations.push(animationBox);
-
-    //Finally, launch animations on box1, from key 0 to key 100 with loop activated
-    scene.beginAnimation(box1, 0, 100, true);
-
-    // Creation of a manual animation with box 2
-    //------------------------------------------
-    scene.registerBeforeRender(function () {
-
-        //The color is defined at run time with random()
-        box2.material.diffuseColor = new BABYLON.Color3(Math.random(), Math.random(), Math.random());
-
-    });
-
-    return scene;
-}

Playground/old/scripts/basic elements.js

@@ -1,71 +0,0 @@
-var createScene = function () {
-	var scene = new BABYLON.Scene(engine);
-
-	var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 8, 50, BABYLON.Vector3.Zero(), scene);
-
-	camera.attachControl(canvas, true);
-
-	var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
-
-	//Creation of a box
-	//(name of the box, size, scene)
-	var box = BABYLON.Mesh.CreateBox("box", 6.0, scene);
-
-	//Creation of a sphere 
-	//(name of the sphere, segments, diameter, scene) 
-	var sphere = BABYLON.Mesh.CreateSphere("sphere", 10.0, 10.0, scene);
-
-	//Creation of a plan
-	//(name of the plane, size, scene)
-	var plan = BABYLON.Mesh.CreatePlane("plane", 10.0, scene);
-
-	//Creation of a cylinder
-	//(name, height, diameter, tessellation, scene, updatable)
-	var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
-
-	// Creation of a torus
-	// (name, diameter, thickness, tessellation, scene, updatable)
-	var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
-
-	// Creation of a knot
-	// (name, radius, tube, radialSegments, tubularSegments, p, q, scene, updatable)
-	var knot = BABYLON.Mesh.CreateTorusKnot("knot", 2, 0.5, 128, 64, 2, 3, scene);
-
-	// Creation of a lines mesh
-	var lines = BABYLON.Mesh.CreateLines("lines", [
-        new BABYLON.Vector3(-10, 0, 0),
-        new BABYLON.Vector3(10, 0, 0),
-        new BABYLON.Vector3(0, 0, -10),
-        new BABYLON.Vector3(0, 0, 10)
-	], scene);
-
-	// Creation of a ribbon
-	// let's first create many paths along a maths exponential function as an example 
-	var exponentialPath = function (p) {
-		var path = [];
-		for (var i = -10; i < 10; i++) {
-			path.push(new BABYLON.Vector3(p, i, Math.sin(p / 3) * 5 * Math.exp(-(i - p) * (i - p) / 60) + i / 3));
-		}
-		return path;
-	};
-	// let's populate arrayOfPaths with all these different paths
-	var arrayOfPaths = [];
-	for (var p = 0; p < 20; p++) {
-		arrayOfPaths[p] = exponentialPath(p);
-	}
-
-	// (name, array of paths, closeArray, closePath, offset, scene)
-	var ribbon = BABYLON.Mesh.CreateRibbon("ribbon", arrayOfPaths, false, false, 0, scene);
-
-
-	// Moving elements
-	box.position = new BABYLON.Vector3(-10, 0, 0);   // Using a vector
-	sphere.position = new BABYLON.Vector3(0, 10, 0); // Using a vector
-	plan.position.z = 10;                            // Using a single coordinate component
-	cylinder.position.z = -10;
-	torus.position.x = 10;
-	knot.position.y = -10;
-	ribbon.position = new BABYLON.Vector3(-10, -10, 20);
-
-	return scene;
-}

Playground/old/scripts/basic scene.js

@@ -1,32 +0,0 @@
-var createScene = function () {
-
-    // This creates a basic Babylon Scene object (non-mesh)
-    var scene = new BABYLON.Scene(engine);
-
-    // This creates and positions a free camera (non-mesh)
-    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
-
-    // This targets the camera to scene origin
-    camera.setTarget(BABYLON.Vector3.Zero());
-
-    // This attaches the camera to the canvas
-    camera.attachControl(canvas, true);
-
-    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
-    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
-
-    // Default intensity is 1. Let's dim the light a small amount
-    light.intensity = 0.7;
-
-    // Our built-in 'sphere' shape.
-    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);
-
-    // Move the sphere upward 1/2 its height
-    sphere.position.y = 1;
-
-    // Our built-in 'ground' shape.
-    var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
-
-    return scene;
-
-};

Playground/old/scripts/basic scene.txt

@@ -1,32 +0,0 @@
-class Playground { 
-    public static CreateScene(engine: BABYLON.Engine, canvas: HTMLCanvasElement): BABYLON.Scene {
-        // This creates a basic Babylon Scene object (non-mesh)
-        var scene = new BABYLON.Scene(engine);
-
-        // This creates and positions a free camera (non-mesh)
-        var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
-
-        // This targets the camera to scene origin
-        camera.setTarget(BABYLON.Vector3.Zero());
-
-        // This attaches the camera to the canvas
-        camera.attachControl(canvas, true);
-
-        // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
-        var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
-
-        // Default intensity is 1. Let's dim the light a small amount
-        light.intensity = 0.7;
-
-        // Our built-in 'sphere' shape. Params: name, subdivs, size, scene
-        var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
-
-        // Move the sphere upward 1/2 its height
-        sphere.position.y = 1;
-
-        // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene
-        var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
-
-        return scene;
-    }
-}

Playground/old/scripts/cameras.js

@@ -1,33 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-
-    // Setup a simple environment
-    var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 2, 8), scene);
-    var box1 = BABYLON.Mesh.CreateBox("b1", 1.0, scene);
-    var box2 = BABYLON.Mesh.CreateBox("b2", 1.0, scene);
-    box2.position.x = -3;
-    var box3 = BABYLON.Mesh.CreateBox("b3", 1.0, scene);
-    box3.position.x = 3;
-
-    // ArcRotateCamera >> Camera rotating around a 3D point (here Vector zero)
-    // Parameters : name, alpha, beta, radius, target, scene
-    var arcCamera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
-    arcCamera.setPosition(new BABYLON.Vector3(0, 0, 50));
-    arcCamera.target = new BABYLON.Vector3(3, 0, 0);
-
-    // FreeCamera >> You can move around the world with mouse and keyboard (LEFT/RIGHT/UP/DOWN)
-    // Parameters : name, position, scene
-    var freeCamera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, 5), scene);
-    freeCamera.rotation = new BABYLON.Vector3(0, Math.PI, 0);
-
-    // TouchCamera >> Move in your world with your touch screen (or with your mouse, by drag/drop)
-    // Parameters : name, position, scene
-    var touchCamera = new BABYLON.TouchCamera("TouchCamera", new BABYLON.Vector3(0, 0, 10), scene);
-    touchCamera.rotation = new BABYLON.Vector3(0, Math.PI, 0);
-
-    //Attach a camera to the scene and the canvas
-    scene.activeCamera = freeCamera;
-    freeCamera.attachControl(canvas, true);
-
-    return scene;
-}

Playground/old/scripts/collisions.js

@@ -1,45 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-
-    // Lights
-    var light0 = new BABYLON.DirectionalLight("Omni", new BABYLON.Vector3(-2, -5, 2), scene);
-    var light1 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(2, -5, -2), scene);
-
-    // Need a free camera for collisions
-    var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, -8, -20), scene);
-    camera.attachControl(canvas, true);
-
-    //Ground
-    var ground = BABYLON.Mesh.CreatePlane("ground", 20.0, scene);
-    ground.material = new BABYLON.StandardMaterial("groundMat", scene);
-    ground.material.diffuseColor = new BABYLON.Color3(1, 1, 1);
-    ground.material.backFaceCulling = false;
-    ground.position = new BABYLON.Vector3(5, -10, -15);
-    ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);
-
-    //Simple crate
-    var box = new BABYLON.Mesh.CreateBox("crate", 2, scene);
-    box.material = new BABYLON.StandardMaterial("Mat", scene);
-    box.material.diffuseTexture = new BABYLON.Texture("textures/crate.png", scene);
-    box.material.diffuseTexture.hasAlpha = true;
-    box.position = new BABYLON.Vector3(5, -9, -10);
-
-    //Set gravity for the scene (G force like, on Y-axis)
-    scene.gravity = new BABYLON.Vector3(0, -0.9, 0);
-
-    // Enable Collisions
-    scene.collisionsEnabled = true;
-
-    //Then apply collisions and gravity to the active camera
-    camera.checkCollisions = true;
-    camera.applyGravity = true;
-
-    //Set the ellipsoid around the camera (e.g. your player's size)
-    camera.ellipsoid = new BABYLON.Vector3(1, 1, 1);
-
-    //finally, say which mesh will be collisionable
-    ground.checkCollisions = true;
-    box.checkCollisions = true;
-
-    return scene;
-}

Playground/old/scripts/drag and drop.js

@@ -1,130 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
-    camera.setPosition(new BABYLON.Vector3(20, 200, 400));
-
-    camera.lowerBetaLimit = 0.1;
-    camera.upperBetaLimit = (Math.PI / 2) * 0.99;
-    camera.lowerRadiusLimit = 150;
-
-    scene.clearColor = new BABYLON.Color3(0, 0, 0);
-
-    // Light
-    var light = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), scene);
-
-    // Ground
-    var ground = BABYLON.Mesh.CreateGround("ground", 1000, 1000, 1, scene, false);
-    var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
-    groundMaterial.specularColor = BABYLON.Color3.Black();
-    ground.material = groundMaterial;
-
-    // Meshes
-    var redSphere = BABYLON.Mesh.CreateSphere("red", 32, 20, scene);
-    var redMat = new BABYLON.StandardMaterial("ground", scene);
-    redMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
-    redMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
-    redMat.emissiveColor = BABYLON.Color3.Red();
-    redSphere.material = redMat;
-    redSphere.position.y = 10;
-    redSphere.position.x -= 100;
-
-    var greenBox = BABYLON.Mesh.CreateBox("green", 20, scene);
-    var greenMat = new BABYLON.StandardMaterial("ground", scene);
-    greenMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
-    greenMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
-    greenMat.emissiveColor = BABYLON.Color3.Green();
-    greenBox.material = greenMat;
-    greenBox.position.z -= 100;
-    greenBox.position.y = 10;
-
-    var blueBox = BABYLON.Mesh.CreateBox("blue", 20, scene);
-    var blueMat = new BABYLON.StandardMaterial("ground", scene);
-    blueMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
-    blueMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
-    blueMat.emissiveColor = BABYLON.Color3.Blue();
-    blueBox.material = blueMat;
-    blueBox.position.x += 100;
-    blueBox.position.y = 10;
-
-
-    var purpleDonut = BABYLON.Mesh.CreateTorus("red", 30, 10, 32, scene);
-    var purpleMat = new BABYLON.StandardMaterial("ground", scene);
-    purpleMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
-    purpleMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
-    purpleMat.emissiveColor = BABYLON.Color3.Purple();
-    purpleDonut.material = purpleMat;
-    purpleDonut.position.y = 10;
-    purpleDonut.position.z += 100;
-
-    // Events
-    var canvas = engine.getRenderingCanvas();
-    var startingPoint;
-    var currentMesh;
-
-    var getGroundPosition = function () {
-        // Use a predicate to get position on the ground
-        var pickinfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh == ground; });
-        if (pickinfo.hit) {
-            return pickinfo.pickedPoint;
-        }
-
-        return null;
-    }
-
-    var onPointerDown = function (evt) {
-        if (evt.button !== 0) {
-            return;
-        }
-
-        // check if we are under a mesh
-        var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh !== ground; });
-        if (pickInfo.hit) {
-            currentMesh = pickInfo.pickedMesh;
-            startingPoint = getGroundPosition(evt);
-
-            if (startingPoint) { // we need to disconnect camera from canvas
-                setTimeout(function () {
-                    camera.detachControl(canvas);
-                }, 0);
-            }
-        }
-    }
-
-    var onPointerUp = function () {
-        if (startingPoint) {
-            camera.attachControl(canvas, true);
-            startingPoint = null;
-            return;
-        }
-    }
-
-    var onPointerMove = function (evt) {
-        if (!startingPoint) {
-            return;
-        }
-
-        var current = getGroundPosition(evt);
-
-        if (!current) {
-            return;
-        }
-
-        var diff = current.subtract(startingPoint);
-        currentMesh.position.addInPlace(diff);
-
-        startingPoint = current;
-
-    }
-
-    canvas.addEventListener("pointerdown", onPointerDown, false);
-    canvas.addEventListener("pointerup", onPointerUp, false);
-    canvas.addEventListener("pointermove", onPointerMove, false);
-
-    scene.onDispose = function () {
-        canvas.removeEventListener("pointerdown", onPointerDown);
-        canvas.removeEventListener("pointerup", onPointerUp);
-        canvas.removeEventListener("pointermove", onPointerMove);
-    }
-
-    return scene;
-};

Playground/old/scripts/fresnel.js

@@ -1,126 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
-    var material = new BABYLON.StandardMaterial("kosh", scene);
-    var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 32, 3, scene);
-    var sphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 32, 3, scene);
-    var sphere3 = BABYLON.Mesh.CreateSphere("Sphere3", 32, 3, scene);
-    var sphere4 = BABYLON.Mesh.CreateSphere("Sphere4", 32, 3, scene);
-    var sphere5 = BABYLON.Mesh.CreateSphere("Sphere5", 32, 3, scene);
-    var light = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(-17.6, 18.8, -49.9), scene);
-
-    camera.setPosition(new BABYLON.Vector3(-15, 3, 0));
-    camera.attachControl(canvas, true);
-
-    sphere2.position.z -= 5;
-    sphere3.position.z += 5;
-    sphere4.position.x += 5;
-    sphere5.position.x -= 5;
-
-    // Sphere1 material
-    material.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
-    material.diffuseColor = new BABYLON.Color3(0, 0, 0);
-    material.emissiveColor = new BABYLON.Color3(0.5, 0.5, 0.5);
-    material.alpha = 0.2;
-    material.specularPower = 16;
-
-    // Fresnel
-    material.reflectionFresnelParameters = new BABYLON.FresnelParameters();
-    material.reflectionFresnelParameters.bias = 0.1;
-
-    material.emissiveFresnelParameters = new BABYLON.FresnelParameters();
-    material.emissiveFresnelParameters.bias = 0.6;
-    material.emissiveFresnelParameters.power = 4;
-    material.emissiveFresnelParameters.leftColor = BABYLON.Color3.White();
-    material.emissiveFresnelParameters.rightColor = BABYLON.Color3.Black();
-
-    material.opacityFresnelParameters = new BABYLON.FresnelParameters();
-    material.opacityFresnelParameters.leftColor = BABYLON.Color3.White();
-    material.opacityFresnelParameters.rightColor = BABYLON.Color3.Black();
-
-    sphere1.material = material;
-
-    // Sphere2 material
-    material = new BABYLON.StandardMaterial("kosh2", scene);
-    material.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
-    material.diffuseColor = new BABYLON.Color3(0, 0, 0);
-    material.emissiveColor = new BABYLON.Color3(0.5, 0.5, 0.5);
-    material.specularPower = 32;
-
-    // Fresnel
-    material.reflectionFresnelParameters = new BABYLON.FresnelParameters();
-    material.reflectionFresnelParameters.bias = 0.1;
-
-    material.emissiveFresnelParameters = new BABYLON.FresnelParameters();
-    material.emissiveFresnelParameters.bias = 0.5;
-    material.emissiveFresnelParameters.power = 4;
-    material.emissiveFresnelParameters.leftColor = BABYLON.Color3.White();
-    material.emissiveFresnelParameters.rightColor = BABYLON.Color3.Black();
-
-    sphere2.material = material;
-
-    // Sphere3 material
-    material = new BABYLON.StandardMaterial("kosh3", scene);
-    material.diffuseColor = new BABYLON.Color3(0, 0, 0);
-    material.emissiveColor = BABYLON.Color3.White();
-    material.specularPower = 64;
-    material.alpha = 0.2;
-
-    // Fresnel
-    material.emissiveFresnelParameters = new BABYLON.FresnelParameters();
-    material.emissiveFresnelParameters.bias = 0.2;
-    material.emissiveFresnelParameters.leftColor = BABYLON.Color3.White();
-    material.emissiveFresnelParameters.rightColor = BABYLON.Color3.Black();
-
-    material.opacityFresnelParameters = new BABYLON.FresnelParameters();
-    material.opacityFresnelParameters.power = 4;
-    material.opacityFresnelParameters.leftColor = BABYLON.Color3.White();
-    material.opacityFresnelParameters.rightColor = BABYLON.Color3.Black();
-
-    sphere3.material = material;
-
-    // Sphere4 material
-    material = new BABYLON.StandardMaterial("kosh4", scene);
-    material.diffuseColor = new BABYLON.Color3(0, 0, 0);
-    material.emissiveColor = BABYLON.Color3.White();
-    material.specularPower = 64;
-
-    // Fresnel
-    material.emissiveFresnelParameters = new BABYLON.FresnelParameters();
-    material.emissiveFresnelParameters.power = 4;
-    material.emissiveFresnelParameters.bias = 0.5;
-    material.emissiveFresnelParameters.leftColor = BABYLON.Color3.White();
-    material.emissiveFresnelParameters.rightColor = BABYLON.Color3.Black();
-
-    sphere4.material = material;
-
-    // Sphere5 material
-    material = new BABYLON.StandardMaterial("kosh5", scene);
-    material.diffuseColor = new BABYLON.Color3(0, 0, 0);
-    material.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
-    material.reflectionTexture.level = 0.5;
-    material.specularPower = 64;
-    material.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
-
-    // Fresnel
-    material.emissiveFresnelParameters = new BABYLON.FresnelParameters();
-    material.emissiveFresnelParameters.bias = 0.4;
-    material.emissiveFresnelParameters.power = 2;
-    material.emissiveFresnelParameters.leftColor = BABYLON.Color3.Black();
-    material.emissiveFresnelParameters.rightColor = BABYLON.Color3.White();
-
-    sphere5.material = material;
-
-    // Skybox
-    var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
-    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
-    skyboxMaterial.backFaceCulling = false;
-    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
-    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
-    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
-    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
-    skyboxMaterial.disableLighting = true;
-    skybox.material = skyboxMaterial;
-
-    return scene;
-}

Playground/old/scripts/gui.js

@@ -1,258 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-
- 
-    var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, 1.0, 110, BABYLON.Vector3.Zero(), scene);
-    camera.attachControl(canvas, true);
-
-    var hemi = new BABYLON.HemisphericLight("toto");
-
-    var sphereMaterial = new BABYLON.StandardMaterial();
-
-    //Creation of 6 spheres
-    var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 10.0, 9.0, scene);
-    var sphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 2.0, 9.0, scene);//Only two segments
-    var sphere3 = BABYLON.Mesh.CreateSphere("Sphere3", 10.0, 9.0, scene);
-    var sphere4 = BABYLON.Mesh.CreateSphere("Sphere4", 10.0, 0.5, scene);
-    var sphere5 = BABYLON.Mesh.CreateSphere("Sphere5", 10.0, 9.0, scene);
-    var sphere6 = BABYLON.Mesh.CreateSphere("Sphere6", 10.0, 9.0, scene);
-    var sphere7 = BABYLON.Mesh.CreateSphere("Sphere7", 10.0, 9.0, scene);
-
-    //Position the spheres
-    sphere1.position.x = -30;
-    sphere2.position.x = -20;
-    sphere3.position.x = -10;
-    sphere4.position.x = 0;
-    sphere5.position.x = 10;
-    sphere6.position.x = 20;
-    sphere7.position.x = 30;
-
-    // Material
-    sphere1.material = sphereMaterial;
-    sphere2.material = sphereMaterial;
-    sphere3.material = sphereMaterial;
-    sphere4.material = sphereMaterial;
-    sphere5.material = sphereMaterial;
-    sphere6.material = sphereMaterial;
-    sphere7.material = sphereMaterial;
-
-    // GUI
-    var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("ui1");
-
-    var panel = new BABYLON.GUI.StackPanel();  
-    panel.width = 0.25;
-    panel.rotation = 0.2;
-    panel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-    advancedTexture.addControl(panel);
-
-    var button1 = BABYLON.GUI.Button.CreateSimpleButton("but1", "Click Me");
-    button1.width = 0.2;
-    button1.height = "40px";
-    button1.color = "white";
-    button1.cornerRadius = 20;
-    button1.background = "green";
-    button1.onPointerUpObservable.add(function() {
-        circle.scaleX += 0.1;
-    });
-    panel.addControl(button1);
-
-    var circle = new BABYLON.GUI.Ellipse();
-    circle.width = "50px";
-    circle.color = "white";
-    circle.thickness = 5;
-    circle.height = "50px";
-    circle.paddingTop = "2px";
-    circle.paddingBottom = "2px";
-    panel.addControl(circle);
-
-    var button2 = BABYLON.GUI.Button.CreateSimpleButton("but2", "Click Me 2");
-    button2.width = 0.2;
-    button2.height = "40px";
-    button2.color = "white";
-    button2.background = "green";
-    button2.onPointerUpObservable.add(function() {
-        circle.scaleX -= 0.1;
-    });
-    panel.addControl(button2); 
-
-    var createLabel = function(mesh) {
-        var label = new BABYLON.GUI.Rectangle("label for " + mesh.name);
-        label.background = "black"
-        label.height = "30px";
-        label.alpha = 0.5;
-        label.width = "100px";
-        label.cornerRadius = 20;
-        label.thickness = 1;
-        label.linkOffsetY = 30;
-        advancedTexture.addControl(label); 
-        label.linkWithMesh(mesh);
-
-        var text1 = new BABYLON.GUI.TextBlock();
-        text1.text = mesh.name;
-        text1.color = "white";
-        label.addControl(text1);  
-    }  
-
-    createLabel(sphere1);
-    createLabel(sphere2);
-    createLabel(sphere3);
-    createLabel(sphere4);
-    createLabel(sphere5);
-    createLabel(sphere6);
-
-    var label = new BABYLON.GUI.Rectangle("label for " + sphere7.name);
-    label.background = "black"
-    label.height = "30px";
-    label.alpha = 0.5;
-    label.width = "100px";
-    label.cornerRadius = 20;
-    label.thickness = 1;
-    label.linkOffsetY = 30;
-    label.top = "10%";
-    label.zIndex = 5;
-    label.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;    
-    advancedTexture.addControl(label); 
-
-    var text1 = new BABYLON.GUI.TextBlock();
-    text1.text = sphere7.name;
-    text1.color = "white";
-    label.addControl(text1);    
-
-    var line = new BABYLON.GUI.Line();
-    line.alpha = 0.5;
-    line.lineWidth = 5;
-    line.dash = [5, 10];
-    advancedTexture.addControl(line); 
-    line.linkWithMesh(sphere7);
-    line.connectedControl = label;
-
-    var endRound = new BABYLON.GUI.Ellipse();
-    endRound.width = "10px";
-    endRound.background = "black";
-    endRound.height = "10px";
-    endRound.color = "white";
-    advancedTexture.addControl(endRound);
-    endRound.linkWithMesh(sphere7);
-
-    // Plane
-    var plane = BABYLON.Mesh.CreatePlane("plane", 20);
-    plane.parent = sphere4;
-    plane.position.y = -10;
-
-    // GUI
-    var advancedTexture2 = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane);
-
-    var panel2 = new BABYLON.GUI.StackPanel();  
-    panel2.top = "100px";
-    advancedTexture2.addControl(panel2);    
-
-    var button1 = BABYLON.GUI.Button.CreateSimpleButton("but1", "Click Me");
-    button1.width = 1;
-    button1.height = "100px";
-    button1.color = "white";
-    button1.fontSize = 50;
-    button1.background = "green";
-    panel2.addControl(button1);
-
-    var textblock = new BABYLON.GUI.TextBlock();
-    textblock.height = "150px";
-    textblock.fontSize = 100;
-    textblock.text = "please pick an option:";
-    panel2.addControl(textblock);   
-
-    var addRadio = function(text, parent) {
-
-        var button = new BABYLON.GUI.RadioButton();
-        button.width = "40px";
-        button.height = "40px";
-        button.color = "white";
-        button.background = "green";     
-
-        button.onIsCheckedChangedObservable.add(function(state) {
-            if (state) {
-                textblock.text = "You selected " + text;
-            }
-        }); 
-
-        var header = BABYLON.GUI.Control.AddHeader(button, text, "400px", { isHorizontal: true, controlFirst: true });
-        header.height = "100px";
-        header.children[1].fontSize = 80;
-        header.children[1].onPointerDownObservable.add(function() {
-            button.isChecked = !button.isChecked;
-        });
-
-        parent.addControl(header);    
-    }
-
-
-    addRadio("option 1", panel2);
-    addRadio("option 2", panel2);
-    addRadio("option 3", panel2);
-    addRadio("option 4", panel2);
-    addRadio("option 5", panel2);    
-
-    scene.registerBeforeRender(function() {
-        panel.rotation += 0.01;
-    });
-
-    // Another GUI on the right
-  var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
-    advancedTexture.layer.layerMask = 2;
-
-    var panel3 = new BABYLON.GUI.StackPanel();
-    panel3.width = "220px";
-    panel3.fontSize = "14px";
-    panel3.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
-    panel3.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
-    advancedTexture.addControl(panel3);
-
-    var checkbox = new BABYLON.GUI.Checkbox();
-    checkbox.width = "20px";
-    checkbox.height = "20px";
-    checkbox.isChecked = true;
-    checkbox.color = "green";
-
-    var panelForCheckbox = BABYLON.GUI.Control.AddHeader(checkbox, "checkbox", "180px", { isHorizontal: true, controlFirst: true});
-    panelForCheckbox.color = "white";
-    panelForCheckbox.height = "20px";
-    panelForCheckbox.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-    panel3.addControl(panelForCheckbox); 
-
-    var header = new BABYLON.GUI.TextBlock();
-    header.text = "Slider:";
-    header.height = "40px";
-    header.color = "white";
-    header.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-    header.paddingTop = "10px";
-    panel3.addControl(header); 
-
-    var slider = new BABYLON.GUI.Slider();
-    slider.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-    slider.minimum = 0;
-    slider.maximum = 2 * Math.PI;
-    slider.color = "green";
-    slider.value = 0;
-    slider.height = "20px";
-    slider.width = "200px";
-    panel3.addControl(slider);   
-
-    header = new BABYLON.GUI.TextBlock();
-    header.text = "Sphere diffuse:";
-    header.height = "40px";
-    header.color = "white";
-    header.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-    header.paddingTop = "10px";
-    panel3.addControl(header);      
-
-    var picker = new BABYLON.GUI.ColorPicker();
-    picker.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-    picker.value = sphereMaterial.diffuseColor;
-    picker.height = "150px";
-    picker.width = "150px";
-    picker.onValueChangedObservable.add(function(value) { // value is a color3
-        sphereMaterial.diffuseColor = value;
-    });    
-    panel3.addControl(picker);  
-
-    return scene;
-};

Playground/old/scripts/height Map.js

@@ -1,49 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-
-    // Light
-    var spot = new BABYLON.PointLight("spot", new BABYLON.Vector3(0, 30, 10), scene);
-    spot.diffuse = new BABYLON.Color3(1, 1, 1);
-    spot.specular = new BABYLON.Color3(0, 0, 0);
-
-    // Camera
-    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
-    camera.lowerBetaLimit = 0.1;
-    camera.upperBetaLimit = (Math.PI / 2) * 0.9;
-    camera.lowerRadiusLimit = 30;
-    camera.upperRadiusLimit = 150;
-    camera.attachControl(canvas, true);
-
-    // Ground
-    var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
-    groundMaterial.diffuseTexture = new BABYLON.Texture("textures/earth.jpg", scene);
-
-    var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "textures/worldHeightMap.jpg", 200, 200, 250, 0, 10, scene, false);
-    ground.material = groundMaterial;
-
-    //Sphere to see the light's position
-    var sun = BABYLON.Mesh.CreateSphere("sun", 10, 4, scene);
-    sun.material = new BABYLON.StandardMaterial("sun", scene);
-    sun.material.emissiveColor = new BABYLON.Color3(1, 1, 0);
-
-    // Skybox
-    var skybox = BABYLON.Mesh.CreateBox("skyBox", 800.0, scene);
-    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
-    skyboxMaterial.backFaceCulling = false;
-    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
-    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
-    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
-    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
-    skyboxMaterial.disableLighting = true;
-    skybox.material = skyboxMaterial;
-
-    //Sun animation
-    scene.registerBeforeRender(function () {
-        sun.position = spot.position;
-        spot.position.x -= 0.5;
-        if (spot.position.x < -90)
-            spot.position.x = 100;
-    });
-
-    return scene;
-}

Playground/old/scripts/import meshes.js

@@ -1,23 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-
-    //Adding a light
-    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
-
-    //Adding an Arc Rotate Camera
-    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
-    camera.attachControl(canvas, false);
-
-    // The first parameter can be used to specify which mesh to import. Here we import all meshes
-    BABYLON.SceneLoader.ImportMesh("", "scenes/", "skull.babylon", scene, function (newMeshes) {
-        // Set the target of the camera to the first imported mesh
-        camera.target = newMeshes[0];
-    });
-
-    // Move the light with the camera
-    scene.registerBeforeRender(function () {
-        light.position = camera.position;
-    });
-
-    return scene;
-}

Playground/old/scripts/instanced bones.js

@@ -1,59 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-    var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(0, -0.5, -1.0), scene);
-    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 30, 0), scene);
-    
-    camera.attachControl(canvas, false);
-    camera.setPosition(new BABYLON.Vector3(20, 70, 120));
-    light.position = new BABYLON.Vector3(50, 250, 200);
-	light.shadowOrthoScale = 2.0;
-    camera.minZ = 1.0;
-
-    scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3);
-
-    // Ground
-    var ground = BABYLON.Mesh.CreateGround("ground", 1000, 1000, 1, scene, false);
-    var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
-    groundMaterial.diffuseColor = new BABYLON.Color3(0.2, 0.2, 0.2);
-    groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
-    ground.material = groundMaterial;
-    ground.receiveShadows = true;
-
-    // Shadows
-    var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
-    shadowGenerator.useBlurExponentialShadowMap = true;
-
-    // Dude
-    BABYLON.SceneLoader.ImportMesh("him", "scenes/Dude/", "Dude.babylon", scene, function (newMeshes2, particleSystems2, skeletons2) {
-        var dude = newMeshes2[0];
-
-        for (var index = 1; index < newMeshes2.length; index++) {
-            shadowGenerator.getShadowMap().renderList.push(newMeshes2[index]);
-        }
-
-        for (var count = 0; count < 50; count++) {
-            var offsetX = 200 * Math.random() - 100;
-            var offsetZ = 200 * Math.random() - 100;
-            for (index = 1; index < newMeshes2.length; index++) {
-                var instance = newMeshes2[index].createInstance("instance" + count);
-
-                shadowGenerator.getShadowMap().renderList.push(instance);
-
-                instance.parent = newMeshes2[index].parent;
-                instance.position = newMeshes2[index].position.clone();
-
-                if (!instance.parent.subMeshes) {
-                    instance.position.x += offsetX;
-                    instance.position.z -= offsetZ;
-                }
-            }
-        }
-
-        dude.rotation.y = Math.PI;
-        dude.position = new BABYLON.Vector3(0, 0, -80);
-
-        scene.beginAnimation(skeletons2[0], 0, 100, true, 1.0);
-    });
-
-    return scene;
-};

Playground/old/scripts/lights.js

@@ -1,70 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-
-    // Setup camera
-    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
-    camera.setPosition(new BABYLON.Vector3(-10, 10, 0));
-    camera.attachControl(canvas, true);
-
-    // Lights
-    var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 10, 0), scene);
-    var light1 = new BABYLON.PointLight("Omni1", new BABYLON.Vector3(0, -10, 0), scene);
-    var light2 = new BABYLON.PointLight("Omni2", new BABYLON.Vector3(10, 0, 0), scene);
-    var light3 = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(1, -1, 0), scene);
-
-    var material = new BABYLON.StandardMaterial("kosh", scene);
-    var sphere = BABYLON.Mesh.CreateSphere("Sphere", 16, 3, scene);
-
-    // Creating light sphere
-    var lightSphere0 = BABYLON.Mesh.CreateSphere("Sphere0", 16, 0.5, scene);
-    var lightSphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 16, 0.5, scene);
-    var lightSphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 16, 0.5, scene);
-
-    lightSphere0.material = new BABYLON.StandardMaterial("red", scene);
-    lightSphere0.material.diffuseColor = new BABYLON.Color3(0, 0, 0);
-    lightSphere0.material.specularColor = new BABYLON.Color3(0, 0, 0);
-    lightSphere0.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
-
-    lightSphere1.material = new BABYLON.StandardMaterial("green", scene);
-    lightSphere1.material.diffuseColor = new BABYLON.Color3(0, 0, 0);
-    lightSphere1.material.specularColor = new BABYLON.Color3(0, 0, 0);
-    lightSphere1.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
-
-    lightSphere2.material = new BABYLON.StandardMaterial("blue", scene);
-    lightSphere2.material.diffuseColor = new BABYLON.Color3(0, 0, 0);
-    lightSphere2.material.specularColor = new BABYLON.Color3(0, 0, 0);
-    lightSphere2.material.emissiveColor = new BABYLON.Color3(0, 0, 1);
-
-    // Sphere material
-    material.diffuseColor = new BABYLON.Color3(1, 1, 1);
-    sphere.material = material;
-
-    // Lights colors
-    light0.diffuse = new BABYLON.Color3(1, 0, 0);
-    light0.specular = new BABYLON.Color3(1, 0, 0);
-
-    light1.diffuse = new BABYLON.Color3(0, 1, 0);
-    light1.specular = new BABYLON.Color3(0, 1, 0);
-
-    light2.diffuse = new BABYLON.Color3(0, 0, 1);
-    light2.specular = new BABYLON.Color3(0, 0, 1);
-
-    light3.diffuse = new BABYLON.Color3(1, 1, 1);
-    light3.specular = new BABYLON.Color3(1, 1, 1);
-
-    // Animations
-    var alpha = 0;
-    scene.beforeRender = function () {
-        light0.position = new BABYLON.Vector3(10 * Math.sin(alpha), 0, 10 * Math.cos(alpha));
-        light1.position = new BABYLON.Vector3(10 * Math.sin(alpha), 0, -10 * Math.cos(alpha));
-        light2.position = new BABYLON.Vector3(10 * Math.cos(alpha), 0, 10 * Math.sin(alpha));
-
-        lightSphere0.position = light0.position;
-        lightSphere1.position = light1.position;
-        lightSphere2.position = light2.position;
-
-        alpha += 0.01;
-    };
-
-    return scene;
-}

Playground/old/scripts/materials.js

@@ -1,82 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-
-    //Create a light
-    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(-60, 60, 80), scene);
-
-    //Create an Arc Rotate Camera - aimed negative z this time
-    var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, 1.0, 110, BABYLON.Vector3.Zero(), scene);
-    camera.attachControl(canvas, true);
-
-    //Creation of 6 spheres
-    var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 10.0, 9.0, scene);
-    var sphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 2.0, 9.0, scene);//Only two segments
-    var sphere3 = BABYLON.Mesh.CreateSphere("Sphere3", 10.0, 9.0, scene);
-    var sphere4 = BABYLON.Mesh.CreateSphere("Sphere4", 10.0, 9.0, scene);
-    var sphere5 = BABYLON.Mesh.CreateSphere("Sphere5", 10.0, 9.0, scene);
-    var sphere6 = BABYLON.Mesh.CreateSphere("Sphere6", 10.0, 9.0, scene);
-
-    //Position the spheres
-    sphere1.position.x = 40;
-    sphere2.position.x = 25;
-    sphere3.position.x = 10;
-    sphere4.position.x = -5;
-    sphere5.position.x = -20;
-    sphere6.position.x = -35;
-
-    //Creation of a plane
-    var plane = BABYLON.Mesh.CreatePlane("plane", 120, scene);
-    plane.position.y = -5;
-    plane.rotation.x = Math.PI / 2;
-
-    //Creation of a material with wireFrame
-    var materialSphere1 = new BABYLON.StandardMaterial("texture1", scene);
-    materialSphere1.wireframe = true;
-
-    //Creation of a red material with alpha
-    var materialSphere2 = new BABYLON.StandardMaterial("texture2", scene);
-    materialSphere2.diffuseColor = new BABYLON.Color3(1, 0, 0); //Red
-    materialSphere2.alpha = 0.3;
-
-    //Creation of a material with an image texture
-    var materialSphere3 = new BABYLON.StandardMaterial("texture3", scene);
-    materialSphere3.diffuseTexture = new BABYLON.Texture("textures/misc.jpg", scene);
-
-    //Creation of a material with translated texture
-    var materialSphere4 = new BABYLON.StandardMaterial("texture4", scene);
-    materialSphere4.diffuseTexture = new BABYLON.Texture("textures/misc.jpg", scene);
-    materialSphere4.diffuseTexture.vOffset = 0.1;//Vertical offset of 10%
-    materialSphere4.diffuseTexture.uOffset = 0.4;//Horizontal offset of 40%
-
-    //Creation of a material with an alpha texture
-    var materialSphere5 = new BABYLON.StandardMaterial("texture5", scene);
-    materialSphere5.diffuseTexture = new BABYLON.Texture("textures/tree.png", scene);
-    materialSphere5.diffuseTexture.hasAlpha = true;//Has an alpha
-
-    //Creation of a material and show all the faces
-    var materialSphere6 = new BABYLON.StandardMaterial("texture6", scene);
-    materialSphere6.diffuseTexture = new BABYLON.Texture("textures/tree.png", scene);
-    materialSphere6.diffuseTexture.hasAlpha = true;//Have an alpha
-    materialSphere6.backFaceCulling = false;//Show all the faces of the element
-
-    //Creation of a repeated textured material
-    var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene);
-    materialPlane.diffuseTexture = new BABYLON.Texture("textures/grass.jpg", scene);
-    materialPlane.diffuseTexture.uScale = 5.0;//Repeat 5 times on the Vertical Axes
-    materialPlane.diffuseTexture.vScale = 5.0;//Repeat 5 times on the Horizontal Axes
-    materialPlane.backFaceCulling = false;//Always show the front and the back of an element
-
-    //Apply the materials to meshes
-    sphere1.material = materialSphere1;
-    sphere2.material = materialSphere2;
-
-    sphere3.material = materialSphere3;
-    sphere4.material = materialSphere4;
-
-    sphere5.material = materialSphere5;
-    sphere6.material = materialSphere6;
-
-    plane.material = materialPlane;
-
-    return scene;
-};

Playground/old/scripts/particles.js

@@ -1,98 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-
-    // Setup environment
-    var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 2, 8), scene);
-    var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
-    camera.attachControl(canvas, true);
-
-    // Fountain object
-    var fountain = BABYLON.Mesh.CreateBox("foutain", 1.0, scene);
-
-    // Ground
-    var ground = BABYLON.Mesh.CreatePlane("ground", 50.0, scene);
-    ground.position = new BABYLON.Vector3(0, -10, 0);
-    ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);
-
-    ground.material = new BABYLON.StandardMaterial("groundMat", scene);
-    ground.material.backFaceCulling = false;
-    ground.material.diffuseColor = new BABYLON.Color3(0.3, 0.3, 1);
-
-    // Create a particle system
-    var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
-
-    //Texture of each particle
-    particleSystem.particleTexture = new BABYLON.Texture("textures/flare.png", scene);
-
-    // Where the particles come from
-    particleSystem.emitter = fountain; // the starting object, the emitter
-    particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); // Starting all from
-    particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); // To...
-
-    // Colors of all particles
-    particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
-    particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
-    particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);
-
-    // Size of each particle (random between...
-    particleSystem.minSize = 0.1;
-    particleSystem.maxSize = 0.5;
-
-    // Life time of each particle (random between...
-    particleSystem.minLifeTime = 0.3;
-    particleSystem.maxLifeTime = 1.5;
-
-    // Emission rate
-    particleSystem.emitRate = 1500;
-
-    // Blend mode : BLENDMODE_ONEONE, or BLENDMODE_STANDARD
-    particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
-
-    // Set the gravity of all particles
-    particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);
-
-    // Direction of each particle after it has been emitted
-    particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
-    particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);
-
-    // Angular speed, in radians
-    particleSystem.minAngularSpeed = 0;
-    particleSystem.maxAngularSpeed = Math.PI;
-
-    // Speed
-    particleSystem.minEmitPower = 1;
-    particleSystem.maxEmitPower = 3;
-    particleSystem.updateSpeed = 0.005;
-
-    // Start the particle system
-    particleSystem.start();
-
-    // Fountain's animation
-    var keys = [];
-    var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
-                                                                    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
-    // At the animation key 0, the value of scaling is "1"
-    keys.push({
-        frame: 0,
-        value: 0
-    });
-
-    // At the animation key 50, the value of scaling is "0.2"
-    keys.push({
-        frame: 50,
-        value: Math.PI
-    });
-
-    // At the animation key 100, the value of scaling is "1"
-    keys.push({
-        frame: 100,
-        value: 0
-    });
-
-    // Launch animation
-    animation.setKeys(keys);
-    fountain.animations.push(animation);
-    scene.beginAnimation(fountain, 0, 100, true);
-
-    return scene;
-}

Playground/old/scripts/pbr.js

@@ -1,75 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-    var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 4, Math.PI / 2.5, 200, BABYLON.Vector3.Zero(), scene);
-    camera.attachControl(canvas, true);
-    camera.minZ = 0.1;
-    
-    // Environment Texture
-    var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("textures/environment.dds", scene);
-
-    scene.imageProcessingConfiguration.exposure = 0.6;
-    scene.imageProcessingConfiguration.contrast = 1.6;
-
-    // Skybox
-    var hdrSkybox = BABYLON.Mesh.CreateBox("hdrSkyBox", 1000.0, scene);
-    var hdrSkyboxMaterial = new BABYLON.PBRMaterial("skyBox", scene);
-    hdrSkyboxMaterial.backFaceCulling = false;
-    hdrSkyboxMaterial.reflectionTexture = hdrTexture.clone();
-    hdrSkyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
-	hdrSkyboxMaterial.microSurface = 1.0;
-    hdrSkyboxMaterial.disableLighting = true;
-    hdrSkybox.material = hdrSkyboxMaterial;
-    hdrSkybox.infiniteDistance = true;
-
-    // Create meshes
-    var sphereGlass = BABYLON.Mesh.CreateSphere("sphereGlass", 48, 30.0, scene);
-    sphereGlass.translate(new BABYLON.Vector3(1, 0, 0), -60);
-
-    var sphereMetal = BABYLON.Mesh.CreateSphere("sphereMetal", 48, 30.0, scene);
-    sphereMetal.translate(new BABYLON.Vector3(1, 0, 0), 60);
-
-	var spherePlastic = BABYLON.Mesh.CreateSphere("spherePlastic", 48, 30.0, scene);
-    spherePlastic.translate(new BABYLON.Vector3(0, 0, 1), -60);
-
-    var woodPlank = BABYLON.MeshBuilder.CreateBox("plane", { width: 65, height: 1, depth: 65 }, scene);
-
-    // Create materials
-    var glass = new BABYLON.PBRMaterial("glass", scene);
-    glass.reflectionTexture = hdrTexture;
-    glass.refractionTexture = hdrTexture;
-    glass.linkRefractionWithTransparency = true;
-    glass.indexOfRefraction = 0.52;
-    glass.alpha = 0;
-    glass.microSurface = 1;
-    glass.reflectivityColor = new BABYLON.Color3(0.2, 0.2, 0.2);
-    glass.albedoColor = new BABYLON.Color3(0.85, 0.85, 0.85);
-    sphereGlass.material = glass;
-
-    var metal = new BABYLON.PBRMaterial("metal", scene);
-    metal.reflectionTexture = hdrTexture;
-    metal.microSurface = 0.96;
-    metal.reflectivityColor = new BABYLON.Color3(0.85, 0.85, 0.85);
-    metal.albedoColor = new BABYLON.Color3(0.01, 0.01, 0.01);
-    sphereMetal.material = metal;
-	
-	var plastic = new BABYLON.PBRMaterial("plastic", scene);
-    plastic.reflectionTexture = hdrTexture;
-    plastic.microSurface = 0.96;
-	plastic.albedoColor = new BABYLON.Color3(0.206, 0.94, 1);
-	plastic.reflectivityColor = new BABYLON.Color3(0.003, 0.003, 0.003);
-    spherePlastic.material = plastic;
-
-    var wood = new BABYLON.PBRMaterial("wood", scene);
-    wood.reflectionTexture = hdrTexture;
-    wood.environmentIntensity = 1;
-    wood.specularIntensity = 0.3;
-
-    wood.reflectivityTexture = new BABYLON.Texture("textures/reflectivity.png", scene);
-    wood.useMicroSurfaceFromReflectivityMapAlpha = true;
-
-    wood.albedoColor = BABYLON.Color3.White();
-    wood.albedoTexture = new BABYLON.Texture("textures/albedo.png", scene);
-    woodPlank.material = wood;
-		
-    return scene;
-};

Playground/old/scripts/physics.js

@@ -1,143 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-    scene.clearColor = BABYLON.Color3.Purple();
-
-    var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -20), scene);
-    camera.attachControl(canvas, true);
-    camera.checkCollisions = true;
-    camera.applyGravity = true;
-    camera.setTarget(new BABYLON.Vector3(0, 0, 0));
-
-    var light = new BABYLON.DirectionalLight("dir02", new BABYLON.Vector3(0.2, -1, 0), scene);
-    light.position = new BABYLON.Vector3(0, 80, 0);
-
-    // Material
-    var materialAmiga = new BABYLON.StandardMaterial("amiga", scene);
-    materialAmiga.diffuseTexture = new BABYLON.Texture("textures/amiga.jpg", scene);
-    materialAmiga.emissiveColor = new BABYLON.Color3(0.5, 0.5, 0.5);
-    materialAmiga.diffuseTexture.uScale = 5;
-    materialAmiga.diffuseTexture.vScale = 5;
-
-    var materialAmiga2 = new BABYLON.StandardMaterial("amiga", scene);
-    materialAmiga2.diffuseTexture = new BABYLON.Texture("textures/amiga.jpg", scene);
-    materialAmiga2.emissiveColor = new BABYLON.Color3(0.5, 0.5, 0.5);
-
-    // Shadows
-    var shadowGenerator = new BABYLON.ShadowGenerator(2048, light);
-
-    // Physics
-    //scene.enablePhysics(null, new BABYLON.CannonJSPlugin());
-    scene.enablePhysics(null, new BABYLON.OimoJSPlugin());
-
-    // Spheres
-    var y = 0;
-    for (var index = 0; index < 100; index++) {
-        var sphere = BABYLON.Mesh.CreateSphere("Sphere0", 16, 3, scene);
-        sphere.material = materialAmiga;
-
-        sphere.position = new BABYLON.Vector3(Math.random() * 20 - 10, y, Math.random() * 10 - 5);
-
-        shadowGenerator.addShadowCaster(sphere);
-
-        sphere.physicsImpostor = new BABYLON.PhysicsImpostor(sphere, BABYLON.PhysicsImpostor.SphereImpostor, { mass: 1 }, scene);
- 
-        y += 2;
-    }
-
-    // Link
-    var spheres = [];
-    for (index = 0; index < 10; index++) {
-        sphere = BABYLON.Mesh.CreateSphere("Sphere0", 16, 1, scene);
-        spheres.push(sphere);
-        sphere.material = materialAmiga2;
-        sphere.position = new BABYLON.Vector3(Math.random() * 20 - 10, y, Math.random() * 10 - 5);
-
-        shadowGenerator.addShadowCaster(sphere);
-
-        sphere.physicsImpostor = new BABYLON.PhysicsImpostor(sphere, BABYLON.PhysicsImpostor.SphereImpostor, { mass: 1 }, scene);
-    }
-
-    for (index = 0; index < 9; index++) {
-        spheres[index].setPhysicsLinkWith(spheres[index + 1], new BABYLON.Vector3(0, 0.5, 0), new BABYLON.Vector3(0, -0.5, 0));
-    }
-
-    // Box
-    var box0 = BABYLON.Mesh.CreateBox("Box0", 3, scene);
-    box0.position = new BABYLON.Vector3(3, 30, 0);
-    var materialWood = new BABYLON.StandardMaterial("wood", scene);
-    materialWood.diffuseTexture = new BABYLON.Texture("textures/crate.png", scene);
-    materialWood.emissiveColor = new BABYLON.Color3(0.5, 0.5, 0.5);
-    box0.material = materialWood;
-
-    shadowGenerator.addShadowCaster(box0);
-
-    // Compound
-    var part0 = BABYLON.Mesh.CreateBox("part0", 3, scene);
-    part0.position = new BABYLON.Vector3(3, 30, 0);
-    part0.material = materialWood;
-
-    var part1 = BABYLON.Mesh.CreateBox("part1", 3, scene);
-    part1.parent = part0; // We need a hierarchy for compound objects
-    part1.position = new BABYLON.Vector3(0, 3, 0);
-    part1.material = materialWood;
-
-    shadowGenerator.addShadowCaster(part0);
-    shadowGenerator.addShadowCaster(part1);
-	shadowGenerator.useBlurExponentialShadowMap = true;
-    shadowGenerator.useKernelBlur = true;
-    shadowGenerator.blurKernel = 32;
-
-
-    // Playground
-    var ground = BABYLON.Mesh.CreateBox("Ground", 1, scene);
-    ground.scaling = new BABYLON.Vector3(100, 1, 100);
-    ground.position.y = -5.0;
-    ground.checkCollisions = true;
-
-    var border0 = BABYLON.Mesh.CreateBox("border0", 1, scene);
-    border0.scaling = new BABYLON.Vector3(1, 100, 100);
-    border0.position.y = -5.0;
-    border0.position.x = -50.0;
-    border0.checkCollisions = true;
-
-    var border1 = BABYLON.Mesh.CreateBox("border1", 1, scene);
-    border1.scaling = new BABYLON.Vector3(1, 100, 100);
-    border1.position.y = -5.0;
-    border1.position.x = 50.0;
-    border1.checkCollisions = true;
-
-    var border2 = BABYLON.Mesh.CreateBox("border2", 1, scene);
-    border2.scaling = new BABYLON.Vector3(100, 100, 1);
-    border2.position.y = -5.0;
-    border2.position.z = 50.0;
-    border2.checkCollisions = true;
-
-    var border3 = BABYLON.Mesh.CreateBox("border3", 1, scene);
-    border3.scaling = new BABYLON.Vector3(100, 100, 1);
-    border3.position.y = -5.0;
-    border3.position.z = -50.0;
-    border3.checkCollisions = true;
-
-    var groundMat = new BABYLON.StandardMaterial("groundMat", scene);
-    groundMat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 0.5);
-    groundMat.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
-    groundMat.backFaceCulling = false;
-    ground.material = groundMat;
-    border0.material = groundMat;
-    border1.material = groundMat;
-    border2.material = groundMat;
-    border3.material = groundMat;
-    ground.receiveShadows = true;
-
-    // Physics
-    box0.physicsImpostor = new BABYLON.PhysicsImpostor(box0, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 2, friction: 0.4, restitution: 0.3 }, scene);
-    ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, friction: 0.5, restitution: 0.7 }, scene);
-    border0.physicsImpostor = new BABYLON.PhysicsImpostor(border0, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0 }, scene);
-    border1.physicsImpostor = new BABYLON.PhysicsImpostor(border1, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0 }, scene);
-    border2.physicsImpostor = new BABYLON.PhysicsImpostor(border2, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0 }, scene);
-    border3.physicsImpostor = new BABYLON.PhysicsImpostor(border3, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0 }, scene);
-
-    part0.physicsImpostor = new BABYLON.PhysicsImpostor(part0, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 2, friction: 0.4, restitution: 0.3 }, scene);
-
-    return scene;
-}

Playground/old/scripts/picking.js

@@ -1,30 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-
-    // setup environment
-    var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 10, 20), scene);
-    var freeCamera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, -30), scene);
-
-    // Impact impostor
-    var impact = BABYLON.Mesh.CreatePlane("impact", 1, scene);
-    impact.material = new BABYLON.StandardMaterial("impactMat", scene);
-    impact.material.diffuseTexture = new BABYLON.Texture("textures/impact.png", scene);
-    impact.material.diffuseTexture.hasAlpha = true;
-    impact.position = new BABYLON.Vector3(0, 0, -0.1);
-
-    //Wall
-    var wall = BABYLON.Mesh.CreatePlane("wall", 20.0, scene);
-    wall.material = new BABYLON.StandardMaterial("wallMat", scene);
-    wall.material.emissiveColor = new BABYLON.Color3(0.5, 1, 0.5);
-
-    //When pointer down event is raised
-    scene.onPointerDown = function (evt, pickResult) {
-        // if the click hits the ground object, we change the impact position
-        if (pickResult.hit) {
-            impact.position.x = pickResult.pickedPoint.x;
-            impact.position.y = pickResult.pickedPoint.y;
-        }
-    };
-
-    return scene;
-}

Playground/old/scripts/pointer events handling.js

@@ -1,82 +0,0 @@
-var createScene = function () {
-
-    var scene = new BABYLON.Scene(engine);
-    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
-    camera.setTarget(BABYLON.Vector3.Zero());
-    camera.attachControl(canvas, true);
-    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
-    light.intensity = 0.7;
-    var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
-    sphere.position.y = 1;
-    var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
-
-    scene.exclusiveDoubleMode = false;
-
-    scene.onPrePointerObservable.add( function(pointerInfo, eventState) {
-        console.log('%c PrePointerObservable: pointer down', 'background: red; color: white');
-        //pointerInfo.skipOnPointerObservable = true;
-    }, BABYLON.PointerEventTypes.POINTERDOWN, false);
-    scene.onPrePointerObservable.add( function(pointerInfo, eventState) {
-        console.log('%c PrePointerObservable: pointer up', 'background: red; color: white');
-        // pointerInfo.skipOnPointerObservable = true;
-    }, BABYLON.PointerEventTypes.POINTERUP, false);
-    scene.onPrePointerObservable.add( function(pointerInfo, eventState) {
-        console.log('%c PrePointerObservable: pointer pick: ' + pointerInfo.pickInfo.pickedMesh.name, 'background: red; color: white');
-    }, BABYLON.PointerEventTypes.POINTERPICK, false);
-    scene.onPrePointerObservable.add( function(pointerInfo, eventState) {
-        console.log('%c PrePointerObservable: pointer tap', 'background: red; color: white');
-    }, BABYLON.PointerEventTypes.POINTERTAP, false);
-    scene.onPrePointerObservable.add( function(pointerInfo, eventState) {
-        console.log('%c PrePointerObservable: pointer double tap', 'background: red; color: white');
-    }, BABYLON.PointerEventTypes.POINTERDOUBLETAP, false);
-    scene.onPointerObservable.add( function(pointerInfo, eventState) {
-        console.log('%c PointerObservable: pointer down', 'background: blue; color: white');
-    }, BABYLON.PointerEventTypes.POINTERDOWN, false);
-    scene.onPointerObservable.add( function(pointerInfo, eventState) {
-        console.log('%c PointerObservable: pointer up', 'background: blue; color: white');
-    }, BABYLON.PointerEventTypes.POINTERUP, false);
-    scene.onPointerObservable.add( function(pointerInfo, eventState) {
-        console.log('%c PointerObservable: pointer pick: ' + pointerInfo.pickInfo.pickedMesh.name, 'background: blue; color: white');
-    }, BABYLON.PointerEventTypes.POINTERPICK, false);
-    scene.onPointerObservable.add( function(pointerInfo, eventState) {
-        console.log('%c PointerObservable: pointer tap', 'background: blue; color: white');
-    }, BABYLON.PointerEventTypes.POINTERTAP, false);
-    scene.onPointerObservable.add( function(pointerInfo, eventState) {
-        console.log('%c PointerObservable: pointer double tap', 'background: blue; color: white');
-    }, BABYLON.PointerEventTypes.POINTERDOUBLETAP, false);
-
-    var meshes = [sphere, ground];
-    for (var i=0; i< meshes.length; i++) {
-        let mesh = meshes[i];
-        mesh.actionManager = new BABYLON.ActionManager(scene);
-        mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnLongPressTrigger, (function(mesh) {
-            console.log("%c ActionManager: long press : " + mesh.name, 'background: green; color: white');
-        }).bind(this, mesh)));
-        mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnLeftPickTrigger, (function(mesh) {
-            console.log("%c ActionManager: left pick: " + mesh.name, 'background: green; color: white');
-        }).bind(this, mesh)));
-        mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnRightPickTrigger, (function(mesh) {
-            console.log("%c ActionManager: right pick: " + mesh.name, 'background: green; color: white');
-        }).bind(this, mesh)));
-        mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnCenterPickTrigger, (function(mesh) {
-            console.log("%c ActionManager: center pick: " + mesh.name, 'background: green; color: white');
-        }).bind(this, mesh)));
-        mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, (function(mesh) {
-            console.log("%c ActionManager: pick : " + mesh.name, 'background: green; color: white');
-        }).bind(this, mesh)));
-        mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickDownTrigger, (function(mesh) {
-            console.log("%c ActionManager: pick down : " + mesh.name, 'background: green; color: white');
-        }).bind(this, mesh)));
-        mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickUpTrigger, (function(mesh) {
-            console.log("%c ActionManager: pick up : " + mesh.name, 'background: green; color: white');
-        }).bind(this, mesh)));
-        mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnDoublePickTrigger, (function(mesh) {
-            console.log("%c ActionManager: double pick : " + mesh.name, 'background: green; color: white');
-        }).bind(this, mesh)));
-        mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickOutTrigger, (function(mesh) {
-            console.log("%c ActionManager: pick out : " + mesh.name, 'background: green; color: white');
-        }).bind(this, mesh)));
-    }
-
-    return scene;
-};

Playground/old/scripts/proceduralTexture.js

@@ -1,165 +0,0 @@
-var createScene = function () {
-    var CreateBosquet = function (name, x, y, z, scene, shadowGenerator, woodMaterial, grassMaterial) {
-        var bosquet = BABYLON.Mesh.CreateBox(name, 2, scene);
-        bosquet.position = new BABYLON.Vector3(x, y, z);
-        bosquet.material = grassMaterial;
-
-        var bosquetbawl = BABYLON.Mesh.CreateBox(name + "bawl", 1, scene);
-        bosquetbawl.position = new BABYLON.Vector3(x, y + 1, z);
-        bosquetbawl.material = grassMaterial;
-
-        shadowGenerator.getShadowMap().renderList.push(bosquet);
-        shadowGenerator.getShadowMap().renderList.push(bosquetbawl);
-    }
-
-    var CreateTree = function (name, x, y, z, scene, shadowGenerator, woodMaterial, grassMaterial) {
-        var trunk = BABYLON.Mesh.CreateCylinder(name + "trunk", 7, 2, 2, 12, 1, scene);
-        trunk.position = new BABYLON.Vector3(x, y, z);
-        trunk.material = woodMaterial;
-
-        var leafs = BABYLON.Mesh.CreateSphere(name + "leafs", 20, 7, scene);
-        leafs.position = new BABYLON.Vector3(x, y + 5.0, z);
-        leafs.material = grassMaterial;
-
-        shadowGenerator.getShadowMap().renderList.push(trunk);
-        shadowGenerator.getShadowMap().renderList.push(leafs);
-    }
-
-    var createFontain = function (name, x, y, z, scene, shadowGenerator, marbleMaterial, fireMaterial) {
-        var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 20, scene);
-        torus.position = new BABYLON.Vector3(x, y, z);
-        torus.material = marbleMaterial;
-
-        var fontainGround = BABYLON.Mesh.CreateBox("fontainGround", 4, scene);
-        fontainGround.position = new BABYLON.Vector3(x, y - 2, z);
-        fontainGround.material = marbleMaterial;
-
-        var fontainSculptur1 = BABYLON.Mesh.CreateCylinder("fontainSculptur1", 2, 2, 1, 10, 1, scene);
-        fontainSculptur1.position = new BABYLON.Vector3(x, y, z);
-        fontainSculptur1.material = marbleMaterial;
-
-        var fontainSculptur2 = BABYLON.Mesh.CreateSphere("fontainSculptur2", 7, 1.7, scene);
-        fontainSculptur2.position = new BABYLON.Vector3(x, y + 0.9, z);
-        fontainSculptur2.material = fireMaterial;
-        fontainSculptur2.rotate(new BABYLON.Vector3(1.0, 0.0, 0.0), Math.PI / 2.0, BABYLON.Space.Local);
-
-        shadowGenerator.getShadowMap().renderList.push(torus);
-        shadowGenerator.getShadowMap().renderList.push(fontainSculptur1);
-        shadowGenerator.getShadowMap().renderList.push(fontainSculptur2);
-    }
-
-    var createTorch = function (name, x, y, z, scene, shadowGenerator, brickMaterial, woodMaterial, grassMaterial) {
-        //createBrickBlock
-        var brickblock = BABYLON.Mesh.CreateBox(name + "brickblock", 1, scene);
-        brickblock.position = new BABYLON.Vector3(x, y, z);
-        brickblock.material = brickMaterial;
-
-        //createWood
-        var torchwood = BABYLON.Mesh.CreateCylinder(name + "torchwood", 2, 0.25, 0.1, 12, 1, scene);
-        torchwood.position = new BABYLON.Vector3(x, y + 1, z);
-        torchwood.material = woodMaterial;
-
-        //leafs
-        var leafs2 = BABYLON.Mesh.CreateSphere(name + "leafs2", 10, 1.2, scene);
-        leafs2.position = new BABYLON.Vector3(x, y + 2, z);
-        leafs2.material = grassMaterial;
-
-        shadowGenerator.getShadowMap().renderList.push(torchwood);
-        shadowGenerator.getShadowMap().renderList.push(leafs2);
-        shadowGenerator.getShadowMap().renderList.push(brickblock);
-    }
-
-    //Ok, enough helpers, let the building start 
-    var scene = new BABYLON.Scene(engine);
-    var camera = new BABYLON.ArcRotateCamera("Camera", 1, 1.2, 25, new BABYLON.Vector3(10, 0, 0), scene);
-    camera.upperBetaLimit = 1.2;
-    camera.attachControl(canvas, true);
-
-    //Material declaration
-    var woodMaterial = new BABYLON.StandardMaterial(name, scene);
-    var woodTexture = new BABYLON.WoodProceduralTexture(name + "text", 1024, scene);
-    woodTexture.ampScale = 50.0;
-    woodMaterial.diffuseTexture = woodTexture;
-
-    var grassMaterial = new BABYLON.StandardMaterial(name + "bawl", scene);
-    var grassTexture = new BABYLON.GrassProceduralTexture(name + "textbawl", 256, scene);
-    grassMaterial.ambientTexture = grassTexture;
-
-    var marbleMaterial = new BABYLON.StandardMaterial("torus", scene);
-    var marbleTexture = new BABYLON.MarbleProceduralTexture("marble", 512, scene);
-    marbleTexture.numberOfBricksHeight = 5;
-    marbleTexture.numberOfBricksWidth = 5;
-    marbleMaterial.ambientTexture = marbleTexture;
-
-    var fireMaterial = new BABYLON.StandardMaterial("fontainSculptur2", scene);
-    var fireTexture = new BABYLON.FireProceduralTexture("fire", 256, scene);
-    fireMaterial.diffuseTexture = fireTexture;
-    fireMaterial.opacityTexture = fireTexture;
-
-    var brickMaterial = new BABYLON.StandardMaterial(name, scene);
-    var brickTexture = new BABYLON.BrickProceduralTexture(name + "text", 512, scene);
-    brickTexture.numberOfBricksHeight = 2;
-    brickTexture.numberOfBricksWidth = 3;
-    brickMaterial.diffuseTexture = brickTexture;
-
-    //light
-    var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-0.5, -1, -0.5), scene);
-    light.diffuse = new BABYLON.Color3(1, 1, 1);
-    light.specular = new BABYLON.Color3(1, 1, 1);
-    light.groundColor = new BABYLON.Color3(0, 0, 0);
-    light.position = new BABYLON.Vector3(20, 40, 20);
-
-    //Create a square of grass using a custom procedural texture
-    var square = BABYLON.Mesh.CreateGround("square", 20, 20, 2, scene);
-    square.position = new BABYLON.Vector3(0, 0, 0);
-    var customMaterial = new BABYLON.StandardMaterial("custommat", scene);
-    var customProcText = new BABYLON.CustomProceduralTexture("customtext", "./textures/customProceduralTextures/land", 1024, scene);
-    customMaterial.ambientTexture = customProcText;
-    square.material = customMaterial;
-
-    //Applying some shadows
-    var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
-    square.receiveShadows = true;
-
-    //Creating 4 bosquets
-    CreateBosquet("b1", -9, 1, 9, scene, shadowGenerator, woodMaterial, grassMaterial);
-    CreateBosquet("b2", -9, 1, -9, scene, shadowGenerator, woodMaterial, grassMaterial);
-    CreateBosquet("b3", 9, 1, 9, scene, shadowGenerator, woodMaterial, grassMaterial);
-    CreateBosquet("b4", 9, 1, -9, scene, shadowGenerator, woodMaterial, grassMaterial);
-
-    CreateTree("a1", 0, 3.5, 0, scene, shadowGenerator, woodMaterial, grassMaterial);
-
-    //Creating macadam
-    var macadam = BABYLON.Mesh.CreateGround("square", 20, 20, 2, scene);
-    macadam.position = new BABYLON.Vector3(20, 0, 0);
-    var customMaterialmacadam = new BABYLON.StandardMaterial("macadam", scene);
-    var customProcTextmacadam = new BABYLON.RoadProceduralTexture("customtext", 512, scene);
-    customMaterialmacadam.diffuseTexture = customProcTextmacadam;
-    macadam.material = customMaterialmacadam;
-    macadam.receiveShadows = true;
-
-    //Creating a fontain
-    createFontain("fontain", 20, 0.25, 0, scene, shadowGenerator, marbleMaterial, fireMaterial);
-    createTorch("torch1", 15, 0.5, 5, scene, shadowGenerator, brickMaterial, woodMaterial, grassMaterial);
-    createTorch("torch2", 15, 0.5, -5, scene, shadowGenerator, brickMaterial, woodMaterial, grassMaterial);
-    createTorch("torch3", 25, 0.5, 5, scene, shadowGenerator, brickMaterial, woodMaterial, grassMaterial);
-    createTorch("torch4", 25, 0.5, -5, scene, shadowGenerator, brickMaterial, woodMaterial, grassMaterial);
-
-    //Using a procedural texture to create the sky
-    var boxCloud = BABYLON.Mesh.CreateSphere("boxCloud", 100, 1000, scene);
-    boxCloud.position = new BABYLON.Vector3(0, 0, 12);
-    var cloudMaterial = new BABYLON.StandardMaterial("cloudMat", scene);
-    var cloudProcText = new BABYLON.CloudProceduralTexture("cloud", 1024, scene);
-    cloudMaterial.emissiveTexture = cloudProcText;
-    cloudMaterial.backFaceCulling = false;
-    cloudMaterial.emissiveTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
-    boxCloud.material = cloudMaterial;
-
-    scene.registerBeforeRender(function () {
-        camera.alpha += 0.001 * scene.getAnimationRatio();
-    });
-
-    return scene;
-
-};
-

Playground/old/scripts/refraction and reflection.js

@@ -1,39 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
-    var material = new BABYLON.StandardMaterial("kosh", scene);
-    var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 32, 5, scene);
-    var light = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(-17.6, 18.8, -49.9), scene);
-
-    camera.setPosition(new BABYLON.Vector3(-15, 3, 0));
-    camera.attachControl(canvas, true);
-
-    // Sphere1 material
-    material.refractionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
-    material.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
-    material.diffuseColor = new BABYLON.Color3(0, 0, 0);
-    material.invertRefractionY = false;
-    material.indexOfRefraction = 0.98;
-    material.specularPower = 128;
-    sphere1.material = material;
-
-    material.refractionFresnelParameters = new BABYLON.FresnelParameters();
-    material.refractionFresnelParameters.power = 2;
-    material.reflectionFresnelParameters = new BABYLON.FresnelParameters();
-    material.reflectionFresnelParameters.power = 2;
-    material.reflectionFresnelParameters.leftColor = BABYLON.Color3.Black();
-    material.reflectionFresnelParameters.rightColor = BABYLON.Color3.White();
-
-    // Skybox
-    var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
-    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
-    skyboxMaterial.backFaceCulling = false;
-    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
-    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
-    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
-    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
-    skyboxMaterial.disableLighting = true;
-    skybox.material = skyboxMaterial;
-
-    return scene;
-}

Playground/old/scripts/rotation and scaling.js

@@ -1,47 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-
-    var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI, Math.PI / 8, 150, BABYLON.Vector3.Zero(), scene);
-
-    camera.attachControl(canvas, true);
-
-    var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
-
-    //Creation of 3 boxes and 2 spheres
-    var box1 = BABYLON.Mesh.CreateBox("Box1", 6.0, scene);
-    var box2 = BABYLON.Mesh.CreateBox("Box2", 6.0, scene);
-    var box3 = BABYLON.Mesh.CreateBox("Box3", 6.0, scene);
-    var box4 = BABYLON.Mesh.CreateBox("Box4", 6.0, scene);
-    var box5 = BABYLON.Mesh.CreateBox("Box5", 6.0, scene);
-    var box6 = BABYLON.Mesh.CreateBox("Box6", 6.0, scene);
-    var box7 = BABYLON.Mesh.CreateBox("Box7", 6.0, scene);
-
-    //Moving boxes on the x axis
-    box1.position.x = -20;
-    box2.position.x = -10;
-    box3.position.x = 0;
-    box4.position.x = 15;
-    box5.position.x = 30;
-    box6.position.x = 45;
-
-    //Rotate box around the x axis
-    box1.rotation.x = Math.PI / 6;
-
-    //Rotate box around the y axis
-    box2.rotation.y = Math.PI / 3;
-
-    //Scaling on the x axis
-    box4.scaling.x = 2;
-
-    //Scaling on the y axis
-    box5.scaling.y = 2;
-
-    //Scaling on the z axis
-    box6.scaling.z = 2;
-
-    //Moving box7 relatively to box1
-    box7.parent = box1;
-    box7.position.z = -10;
-
-    return scene;
-}

Playground/old/scripts/scripts.txt

@@ -1,33 +0,0 @@
-basic scene
-basic elements
-rotation and scaling
-materials
-cameras
-lights
-animations
-sprites
-collisions
-intersections
-picking
-particles
-environment
-height map
-shadows
-import meshes
-actions
-drag and drop
-fresnel
-easing functions
-proceduralTexture
-basic sounds
-sound on mesh
-ssao rendering pipeline
-ssao 2
-volumetric Light Scattering
-refraction and Reflection
-pbr
-instanced bones
-pointer events handling
-webvr
-gui
-physics

Playground/old/scripts/shadows.js

@@ -1,72 +0,0 @@
-var createScene = function () {
-	var scene = new BABYLON.Scene(engine);
-
-	// Setup environment
-	var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 90, BABYLON.Vector3.Zero(), scene);
-	camera.lowerBetaLimit = 0.1;
-	camera.upperBetaLimit = (Math.PI / 2) * 0.9;
-	camera.lowerRadiusLimit = 30;
-	camera.upperRadiusLimit = 150;
-	camera.attachControl(canvas, true);
-
-	// light1
-	var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene);
-	light.position = new BABYLON.Vector3(20, 40, 20);
-	light.intensity = 0.5;
-
-	var lightSphere = BABYLON.Mesh.CreateSphere("sphere", 10, 2, scene);
-	lightSphere.position = light.position;
-	lightSphere.material = new BABYLON.StandardMaterial("light", scene);
-	lightSphere.material.emissiveColor = new BABYLON.Color3(1, 1, 0);
-
-	// light2
-	var light2 = new BABYLON.SpotLight("spot02", new BABYLON.Vector3(30, 40, 20),
-												new BABYLON.Vector3(-1, -2, -1), 1.1, 16, scene);
-	light2.intensity = 0.5;
-
-	var lightSphere2 = BABYLON.Mesh.CreateSphere("sphere", 10, 2, scene);
-	lightSphere2.position = light2.position;
-	lightSphere2.material = new BABYLON.StandardMaterial("light", scene);
-	lightSphere2.material.emissiveColor = new BABYLON.Color3(1, 1, 0);
-
-	// Ground
-	var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "textures/heightMap.png", 100, 100, 100, 0, 10, scene, false);
-	var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
-	groundMaterial.diffuseTexture = new BABYLON.Texture("textures/ground.jpg", scene);
-	groundMaterial.diffuseTexture.uScale = 6;
-	groundMaterial.diffuseTexture.vScale = 6;
-	groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
-	ground.position.y = -2.05;
-	ground.material = groundMaterial;
-
-	// Torus
-	var torus = BABYLON.Mesh.CreateTorus("torus", 4, 2, 30, scene, false);
-
-	// Box
-    var box = BABYLON.Mesh.CreateBox("box", 3);
-    box.parent = torus;	
-
-	// Shadows
-	var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
-	shadowGenerator.addShadowCaster(torus);
-	shadowGenerator.useExponentialShadowMap = true;
-
-	var shadowGenerator2 = new BABYLON.ShadowGenerator(1024, light2);
-	shadowGenerator2.addShadowCaster(torus);
-	shadowGenerator2.usePoissonSampling = true;
-
-	ground.receiveShadows = true;
-
-	// Animations
-	var alpha = 0;
-	scene.registerBeforeRender(function () {
-		torus.rotation.x += 0.01;
-		torus.rotation.z += 0.02;
-
-		torus.position = new BABYLON.Vector3(Math.cos(alpha) * 30, 10, Math.sin(alpha) * 30);
-		alpha += 0.01;
-
-	});
-
-	return scene;
-}

Playground/old/scripts/spriteMap.js

@@ -1,639 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-    // Create camera and light
-    var light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5), scene);
-    var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -30), scene);
-    
-    // Attach the Controls to the canvas
-    camera.attachControl(canvas, true);
-    
-    // Load the JSON file, for simplicity in this demonstration it is included in-line.
-    let atlasJSON = getJSONFile();
-    
-    // Load the SpriteSheet Associated with the JSON Atlas.
-    let spriteSheet = new BABYLON.Texture('./textures/spriteMap/none_trimmed/Legends_Level_A.png', scene,
-    false, //NoMipMaps
-    false, //InvertY usually false if exported from TexturePacker
-    BABYLON.Texture.NEAREST_NEAREST, //Sampling Mode
-    null, //Onload, you could spin up the sprite map in a function nested here
-    null, //OnError
-    null, //CustomBuffer
-    false, //DeleteBuffer
-    BABYLON.Engine.TEXTURETYPE_RGBA //ImageFormageType RGBA
-    );
-    
-    spriteSheet.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE;
-    spriteSheet.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; //Or Wrap, its up to you...
-    
-    let backgroundSize = new BABYLON.Vector2(200,60);
-    
-    let background = new BABYLON.SpriteMap('background', atlasJSON, spriteSheet,
-    {
-        stageSize: backgroundSize,
-        maxAnimationFrames:8,
-        baseTile : 42,
-        layerCount: 2,
-        flipU: true, //Sometimes you gotta flip the depending on the sprite format.
-        colorMultiply : new BABYLON.Vector3(0.3,0.3,0.3)
-    },
-    scene);    
-    
-    //Set all the available tiles to the top left corner of the background for Visual debugging, and reference.
-    for(var i = 0; i<background.spriteCount; i++){
-        background.changeTiles(0, new BABYLON.Vector2(i + 1, backgroundSize.y - 1), i)
-    }
-
-    //TILE, FRAME, NEXT TILE, Timing, Speed
-    //See documentation for Animation Map Information. - TODO
-    let eighth = 1 / 8
-    let speed = 0.005
-    background.addAnimationToTile(1, 0, 2, eighth * 1, speed)
-    background.addAnimationToTile(1, 1, 3, eighth * 2, speed)
-    background.addAnimationToTile(1, 2, 4, eighth * 3, speed)
-    background.addAnimationToTile(1, 3, 5, eighth * 4, speed)
-    background.addAnimationToTile(1, 4, 6, eighth * 5, speed)
-    background.addAnimationToTile(1, 5, 7, eighth * 6, speed)
-    background.addAnimationToTile(1, 6, 8, eighth * 7, speed)
-    background.addAnimationToTile(1, 7, 1, 1, 	  	   speed)
-
-    background.addAnimationToTile(25, 0, 26, eighth * 1, speed)
-    background.addAnimationToTile(25, 1, 27, eighth * 2, speed)
-    background.addAnimationToTile(25, 2, 28, eighth * 3, speed)
-    background.addAnimationToTile(25, 3, 29, eighth * 4, speed)
-    background.addAnimationToTile(25, 4, 30, eighth * 5, speed)
-    background.addAnimationToTile(25, 5, 31, eighth * 6, speed)
-    background.addAnimationToTile(25, 6, 29, eighth * 7, speed)
-    background.addAnimationToTile(25, 7, 25, 1, 	 	 speed)
-
-    background.addAnimationToTile(48, 0, 49, 0.25, 	speed)
-    background.addAnimationToTile(48, 1, 50, 0.5, 	speed)
-    background.addAnimationToTile(48, 2, 51, 0.75, 	speed)
-    background.addAnimationToTile(48, 4, 48, 1, 	speed)
-
-    background.addAnimationToTile(49, 0, 50, 0.25, 	speed * 0.5)
-    background.addAnimationToTile(49, 1, 51, 0.5, 	speed * 0.5)
-    background.addAnimationToTile(49, 2, 48, 0.75, 	speed * 0.5)
-    background.addAnimationToTile(49, 4, 49, 1, 	speed * 0.5)
-
-    background.addAnimationToTile(50, 0, 51, 0.25,  speed * 0.3)
-    background.addAnimationToTile(50, 1, 48, 0.5,   speed * 0.3)
-    background.addAnimationToTile(50, 2, 49, 0.75,  speed * 0.3)
-    background.addAnimationToTile(50, 4, 50, 1, 	speed * 0.3)
-
-    background.position.z = 5;
-
-    //Procedurally Editing the Tiles
-    //Adding Water to BG
-    let tilePositions = []
-    for(let x = 15; x < backgroundSize.x - 15; x++){
-        for(let y = backgroundSize.y - 26; y > 0; y--){
-            if(x % 12 == 0){
-                tilePositions.push(new BABYLON.Vector2(x, y))
-            }
-        }
-    }
-    background.changeTiles(1, tilePositions, 1)
-    
-    //Adding Sewer Drains to BG
-    tilePositions = []
-    for(let x = 15; x < backgroundSize.x - 15; x++){
-        if(x % 12 == 0){
-            tilePositions.push(new BABYLON.Vector2(x, backgroundSize.y - 26))
-        }
-    }
-    background.changeTiles(1, tilePositions, 25)
-    
-    //More Water!
-    tilePositions = []
-    for(let x = 15; x < backgroundSize.x - 15; x++){
-        for(let y = backgroundSize.y - 12; y > 0; y--){
-            if((x + 6) % 12 == 0){
-                tilePositions.push(new BABYLON.Vector2(x, y))
-            }
-        }
-    }
-    
-    background.changeTiles(1, tilePositions, 1);
-
-    tilePositions = [];
-    
-    //Random Array for placing variations of the torches animation.
-    let pTiles = [48, 49, 50, 48, 49, 50, 48];
-    
-    //Making the Base of the level
-    let levelSize = new BABYLON.Vector2(80,40);
-    
-    let levelBase = new BABYLON.SpriteMap('base', atlasJSON, spriteSheet,
-    {
-        stageSize: levelSize,
-        maxAnimationFrames:8,
-        baseTile : 42,
-        layerCount: 2,
-        flipU: true,
-        colorMultiply : new BABYLON.Vector3(0.6,0.6,0.6)
-    },
-    scene);
-    
-    //Duplicating over the animation map from the background system.
-    levelBase.animationMap = background.animationMap
-    
-    
-    //Making a hole.
-    tilePositions = []
-    for(let x = 15; x < levelSize.x - 15; x++){
-        for(let y = levelSize.y - 15; y > 15; y--){
-            tilePositions.push(new BABYLON.Vector2(x, y))
-        }
-    }
-    levelBase.changeTiles(0, tilePositions, 0)
-
-    //Adding Columns
-    tilePositions = []
-    for(let x = 15; x < levelSize.x - 15; x++){
-        for(let y = levelSize.y - 16; y > 16; y--){
-            if(x % 6 == 0){
-                tilePositions.push(new BABYLON.Vector2(x, y))
-            }
-        }
-    }
-    levelBase.changeTiles(0, tilePositions, 23)
-
-    //Adding Torches
-    for(let x = 15; x < levelSize.x - 15; x++){
-        if((x + 6) % 12 == 0){
-            levelBase.changeTiles(1, new BABYLON.Vector2(x, 18),
-            pTiles[Math.floor(Math.random()*pTiles.length)])
-        }
-    }
-
-    //Adding Caps
-    tilePositions = []
-    for(let x =1 5; x < levelSize.x - 15; x++){
-        if(x % 6 == 0){
-         tilePositions.push(new BABYLON.Vector2(x, 16))
-        }
-    }
-    levelBase.changeTiles(0, tilePositions, 24)
-
-    //Adding Bases
-    tilePositions = []
-    for(let x = 15; x < levelSize.x - 15; x++){
-        if(x % 6 == 0){
-            tilePositions.push(new BABYLON.Vector2(x, 25))
-        }
-    }
-    levelBase.changeTiles(0, tilePositions, 22)
-
-    //Now this last section was created like all the last two, except it was later exported from the browser and saved.
-    //This shows how to load from the .tilemaps file
-       
-    levelStage = new BABYLON.SpriteMap('levelStage', atlasJSON, spriteSheet,
-    {
-        stageSize: levelSize,
-        maxAnimationFrames:8,
-        baseTile : 42,
-        layerCount: 2,
-        flipU: true
-    },
-    scene);
-
-    levelStage.loadTileMaps('./textures/spriteMap/none_trimmed/levelStage.tilemaps')
-    levelStage.animationMap = background.animationMap
-    levelStage.position.z = -5   
-
-    //To download .tilemaps file for this SpriteMap uncomment the below line.
-    //levelStage.saveTileMaps();
-	
-    return scene;
-}
-
-const getJSONFile = ()=>{
-    return {"frames": [
-{
-	"filename": "blank.png",
-	"frame": {"x":221,"y":221,"w":1,"h":1},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Falling-Water-0.png",
-	"frame": {"x":1,"y":1,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Falling-Water-1.png",
-	"frame": {"x":1,"y":36,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Falling-Water-2.png",
-	"frame": {"x":1,"y":71,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Falling-Water-3.png",
-	"frame": {"x":1,"y":106,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Falling-Water-4.png",
-	"frame": {"x":1,"y":141,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Falling-Water-5.png",
-	"frame": {"x":1,"y":176,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Falling-Water-6.png",
-	"frame": {"x":1,"y":211,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Falling-Water-7.png",
-	"frame": {"x":1,"y":246,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Large-Column-Light-0.png",
-	"frame": {"x":36,"y":1,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Large-Column-Light-1.png",
-	"frame": {"x":71,"y":1,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Large-Column-Light-2.png",
-	"frame": {"x":106,"y":1,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Large-Column-Light-3.png",
-	"frame": {"x":141,"y":1,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Large_Column-0.png",
-	"frame": {"x":176,"y":1,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Large_Column-1.png",
-	"frame": {"x":211,"y":1,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Large_Column-2.png",
-	"frame": {"x":246,"y":1,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Large_Column-3.png",
-	"frame": {"x":36,"y":36,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Roman-Column-0.png",
-	"frame": {"x":36,"y":71,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Roman-Column-1.png",
-	"frame": {"x":36,"y":106,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Roman-Column-2.png",
-	"frame": {"x":36,"y":141,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Roman-Column-3.png",
-	"frame": {"x":36,"y":176,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Roman_Column_Light-0.png",
-	"frame": {"x":36,"y":211,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Roman_Column_Light-1.png",
-	"frame": {"x":36,"y":246,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Roman_Column_Light-2.png",
-	"frame": {"x":71,"y":36,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Roman_Column_Light-3.png",
-	"frame": {"x":106,"y":36,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Sewer-Drain-0.png",
-	"frame": {"x":141,"y":36,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Sewer-Drain-1.png",
-	"frame": {"x":176,"y":36,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Sewer-Drain-2.png",
-	"frame": {"x":211,"y":36,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Sewer-Drain-3.png",
-	"frame": {"x":246,"y":36,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Sewer-Drain-4.png",
-	"frame": {"x":71,"y":71,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Sewer-Drain-5.png",
-	"frame": {"x":71,"y":106,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Sewer-Drain-6.png",
-	"frame": {"x":71,"y":141,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Sewer-Drain-7.png",
-	"frame": {"x":71,"y":176,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Stone-Platform-0.png",
-	"frame": {"x":71,"y":211,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Stone-Platform-1.png",
-	"frame": {"x":71,"y":246,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Stone-Platform-2.png",
-	"frame": {"x":106,"y":106,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Stone-Platform-3.png",
-	"frame": {"x":106,"y":141,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Stone-Platform-4.png",
-	"frame": {"x":106,"y":176,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Stone-Platform-5.png",
-	"frame": {"x":106,"y":211,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Stone-Platform-6.png",
-	"frame": {"x":106,"y":246,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Stone-Platform-7.png",
-	"frame": {"x":141,"y":106,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Stone-Platform-8.png",
-	"frame": {"x":176,"y":106,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Stone-Platform-9.png",
-	"frame": {"x":211,"y":106,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Stone-Platform-10.png",
-	"frame": {"x":106,"y":71,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Stone-Platform-11.png",
-	"frame": {"x":141,"y":71,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Stone-Platform-12.png",
-	"frame": {"x":176,"y":71,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Stone-Platform-13.png",
-	"frame": {"x":211,"y":71,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Stone-Platform-14.png",
-	"frame": {"x":246,"y":71,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Torch-A-0.png",
-	"frame": {"x":246,"y":106,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Torch-A-1.png",
-	"frame": {"x":141,"y":141,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Torch-A-2.png",
-	"frame": {"x":141,"y":176,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-},
-{
-	"filename": "Torch-A-3.png",
-	"frame": {"x":141,"y":211,"w":32,"h":32},
-	"rotated": false,
-	"trimmed": false,
-	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
-	"sourceSize": {"w":32,"h":32}
-}],
-"meta": {
-	"app": "https://www.codeandweb.com/texturepacker",
-	"version": "1.0",
-	"image": "Legends_Level_A.png",
-	"format": "RGBA8888",
-	"size": {"w":279,"h":279},
-	"scale": "1",
-	"smartupdate": "$TexturePacker:SmartUpdate:a755ec93daaec56d1c8bcd801e167677:2e759c84cbaf9134b80c1a34b50e5c9c:9f820b9412efc8199e0407f80b8c0011$"
-}
-}
-
-}

Playground/old/scripts/sprites.js

@@ -1,61 +0,0 @@
-var createScene = function () {
-    var scene = new BABYLON.Scene(engine);
-
-    // Create camera and light
-    var light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5), scene);
-    var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 8, new BABYLON.Vector3(0, 0, 0), scene);
-    camera.attachControl(canvas, true);
-
-    // Create a sprite manager to optimize GPU ressources
-    // Parameters : name, imgUrl, capacity, cellSize, scene
-    var spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "textures/palm.png", 2000, 800, scene);
-
-    //We create 2000 trees at random positions
-    for (var i = 0; i < 2000; i++) {
-        var tree = new BABYLON.Sprite("tree", spriteManagerTrees);
-        tree.position.x = Math.random() * 100 - 50;
-        tree.position.z = Math.random() * 100 - 50;
-        tree.isPickable = true;
-
-        //Some "dead" trees
-        if (Math.round(Math.random() * 5) === 0) {
-            tree.angle = Math.PI * 90 / 180;
-            tree.position.y = -0.3;
-        }
-    }
-
-    //Create a manager for the player's sprite animation
-    var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "textures/player.png", 2, 64, scene);
-
-    // First animated player
-    var player = new BABYLON.Sprite("player", spriteManagerPlayer);
-    player.playAnimation(0, 40, true, 100);
-    player.position.y = -0.3;
-    player.size = 0.3;
-    player.isPickable = true;
-
-    // Second standing player
-    var player2 = new BABYLON.Sprite("player2", spriteManagerPlayer);
-    player2.stopAnimation(); // Not animated
-    player2.cellIndex = 2; // Going to frame number 2
-    player2.position.y = -0.3;
-    player2.position.x = 1;
-    player2.size = 0.3;
-    player2.invertU = -1; //Change orientation
-    player2.isPickable = true;
-
-
-    // Picking
-    spriteManagerTrees.isPickable = true;
-    spriteManagerPlayer.isPickable = true;
-
-    scene.onPointerDown = function (evt) {
-        var pickResult = scene.pickSprite(this.pointerX, this.pointerY);
-        if (pickResult.hit) {
-            pickResult.pickedSprite.angle += 0.5;
-        }
-    };
-
-
-    return scene;
-}

Playground/old/scripts/ssao 2.js

@@ -1,72 +0,0 @@
-var createScene = function () {
-    // Create scene
-    var scene = new BABYLON.Scene(engine);
-    scene.clearColor = BABYLON.Color3.Black();
-
-    // Create camera
-    var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(29, 13, 23), scene);
-    camera.setTarget(new BABYLON.Vector3(0, 0, 0));
-    camera.attachControl(canvas);
-
-    // Create some boxes and deactivate lighting (specular color and back faces)
-    var boxMaterial = new BABYLON.StandardMaterial("boxMaterail", scene);
-    boxMaterial.diffuseTexture = new BABYLON.Texture("textures/ground.jpg", scene);
-    boxMaterial.specularColor = BABYLON.Color3.Black();
-    boxMaterial.emissiveColor = BABYLON.Color3.White();
-
-    for (var i = 0; i < 10; i++) {
-        for (var j = 0; j < 10; j++) {
-            var box = BABYLON.Mesh.CreateBox("box" + i + " - " + j, 5, scene);
-            box.position = new BABYLON.Vector3(i * 5, 2.5, j * 5);
-            box.rotation = new BABYLON.Vector3(i, i * j, j);
-            box.material = boxMaterial;
-        }
-    }
-
-    // Create SSAO and configure all properties (for the example)
-    var ssaoRatio = {
-        ssaoRatio: 0.5, // Ratio of the SSAO post-process, in a lower resolution
-        blurRatio: 0.5// Ratio of the combine post-process (combines the SSAO and the scene)
-    };
-
-    if (BABYLON.SSAO2RenderingPipeline.IsSupported) {
-        var ssao = new BABYLON.SSAO2RenderingPipeline("ssao", scene, ssaoRatio);
-        ssao.radius = 3.5;
-        ssao.totalStrength = 1.3;
-        ssao.expensiveBlur = true;
-        ssao.samples = 16;
-        ssao.maxZ = 250;
-        // Attach camera to the SSAO render pipeline
-        scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline("ssao", camera);
-
-        // Manage SSAO
-        var isAttached = true;
-        window.addEventListener("keydown", function (evt) {
-            // draw SSAO with scene when pressed "1"
-            if (evt.keyCode === 49) {
-                if (!isAttached) {
-                    isAttached = true;
-                    scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline("ssao", camera);
-                }
-                scene.postProcessRenderPipelineManager.enableEffectInPipeline("ssao", ssao.SSAOCombineRenderEffect, camera);
-            }
-                // draw without SSAO when pressed "2"
-            else if (evt.keyCode === 50) {
-                isAttached = false;
-                scene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline("ssao", camera);
-            }
-                // draw only SSAO when pressed "2"
-            else if (evt.keyCode === 51) {
-                if (!isAttached) {
-                    isAttached = true;
-                    scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline("ssao", camera);
-                }
-                scene.postProcessRenderPipelineManager.disableEffectInPipeline("ssao", ssao.SSAOCombineRenderEffect, camera);
-            }
-        });
-    } else {
-        alert("WebGL2 is required to use SSAO2 effect");
-    }
-
-    return scene;
-}

Playground/old/scripts/ssao rendering pipeline.js

@@ -1,69 +0,0 @@
-var createScene = function () {
-    // Create scene
-    var scene = new BABYLON.Scene(engine);
-    scene.clearColor = BABYLON.Color3.Black();
-
-    // Create camera
-    var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(29, 13, 23), scene);
-    camera.setTarget(new BABYLON.Vector3(0, 0, 0));
-    camera.attachControl(canvas);
-
-    // Create some boxes and deactivate lighting (specular color and back faces)
-    var boxMaterial = new BABYLON.StandardMaterial("boxMaterail", scene);
-    boxMaterial.diffuseTexture = new BABYLON.Texture("textures/ground.jpg", scene);
-    boxMaterial.specularColor = BABYLON.Color3.Black();
-    boxMaterial.emissiveColor = BABYLON.Color3.White();
-
-    for (var i = 0; i < 10; i++) {
-        for (var j = 0; j < 10; j++) {
-            var box = BABYLON.Mesh.CreateBox("box" + i + " - " + j, 5, scene);
-            box.position = new BABYLON.Vector3(i * 5, 2.5, j * 5);
-            box.rotation = new BABYLON.Vector3(i, i * j, j);
-            box.material = boxMaterial;
-        }
-    }
-
-    // Create SSAO and configure all properties (for the example)
-    var ssaoRatio = {
-        ssaoRatio: 0.5, // Ratio of the SSAO post-process, in a lower resolution
-        combineRatio: 1.0 // Ratio of the combine post-process (combines the SSAO and the scene)
-    };
-
-    var ssao = new BABYLON.SSAORenderingPipeline("ssao", scene, ssaoRatio);
-    ssao.fallOff = 0.000001;
-    ssao.area = 1;
-    ssao.radius = 0.0001;
-    ssao.totalStrength = 1.0;
-    ssao.base = 0.5;
-
-    // Attach camera to the SSAO render pipeline
-    scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline("ssao", camera);
-
-    // Manage SSAO
-    var isAttached = true;
-    window.addEventListener("keydown", function (evt) {
-        // draw SSAO with scene when pressed "1"
-        if (evt.keyCode === 49) {
-            if (!isAttached) {
-                isAttached = true;
-                scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline("ssao", camera);
-            }
-            scene.postProcessRenderPipelineManager.enableEffectInPipeline("ssao", ssao.SSAOCombineRenderEffect, camera);
-        }
-            // draw without SSAO when pressed "2"
-        else if (evt.keyCode === 50) {
-            isAttached = false;
-            scene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline("ssao", camera);
-        }
-            // draw only SSAO when pressed "2"
-        else if (evt.keyCode === 51) {
-            if (!isAttached) {
-                isAttached = true;
-                scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline("ssao", camera);
-            }
-            scene.postProcessRenderPipelineManager.disableEffectInPipeline("ssao", ssao.SSAOCombineRenderEffect, camera);
-        }
-    });
-
-	return scene;
-}

Playground/old/scripts/volumetric light scattering.js

@@ -1,33 +0,0 @@
-var createScene = function () {
-	var scene = new BABYLON.Scene(engine);
-
-	//Adding a light
-	var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
-
-	//Adding an Arc Rotate Camera
-	var camera = new BABYLON.ArcRotateCamera("Camera", -0.5, 2.2, 100, BABYLON.Vector3.Zero(), scene);
-	camera.attachControl(canvas, false);
-
-	// The first parameter can be used to specify which mesh to import. Here we import all meshes
-	BABYLON.SceneLoader.ImportMesh("", "scenes/", "skull.babylon", scene, function (newMeshes) {
-		// Set the target of the camera to the first imported mesh
-		camera.target = newMeshes[0];
-
-		newMeshes[0].material = new BABYLON.StandardMaterial("skull", scene);
-		newMeshes[0].material.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
-	});
-
-	// Create the "God Rays" effect (volumetric light scattering)
-	var godrays = new BABYLON.VolumetricLightScatteringPostProcess('godrays', 1.0, camera, null, 100, BABYLON.Texture.BILINEAR_SAMPLINGMODE, engine, false);
-
-	// By default it uses a billboard to render the sun, just apply the desired texture
-	// position and scale
-	godrays.mesh.material.diffuseTexture = new BABYLON.Texture('textures/sun.png', scene, true, false, BABYLON.Texture.BILINEAR_SAMPLINGMODE);
-	godrays.mesh.material.diffuseTexture.hasAlpha = true;
-	godrays.mesh.position = new BABYLON.Vector3(-150, 150, 150);
-	godrays.mesh.scaling = new BABYLON.Vector3(350, 350, 350);
-
-	light.position = godrays.mesh.position;
-
-	return scene;
-}

Playground/old/scripts/webvr.js

@@ -1,74 +0,0 @@
-var createScene = function() {
-    // Create scene
-	var scene = new BABYLON.Scene(engine);
-
-    // Create simple sphere
-    var sphere = BABYLON.Mesh.CreateIcoSphere("sphere", {radius:0.2, flat:true, subdivisions: 1}, this.scene);
-    sphere.position.y = 3;
-    sphere.material = new BABYLON.StandardMaterial("sphere material",scene)
-
-    // Lights and camera
-    var light = new BABYLON.DirectionalLight("light", new BABYLON.Vector3(0, -0.5, 1.0), scene);
-    light.position = new BABYLON.Vector3(0, 5, -2);
-    var camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 4, 3, new BABYLON.Vector3(0, 3, 0), scene);
-    camera.attachControl(canvas, true);
-    scene.activeCamera.beta += 0.8;
-
-    // Default Environment
-    var environment = scene.createDefaultEnvironment({ enableGroundShadow: true, groundYBias: 1 });
-    environment.setMainColor(BABYLON.Color3.FromHexString("#74b9ff"))
-    
-    // Shadows
-    var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
-    shadowGenerator.useBlurExponentialShadowMap = true;
-    shadowGenerator.blurKernel = 32;
-    shadowGenerator.addShadowCaster(sphere, true);
-
-    // Enable VR
-    var vrHelper = scene.createDefaultVRExperience({createDeviceOrientationCamera:false});
-    vrHelper.enableTeleportation({floorMeshes: [environment.ground]});
-
-    // Runs every frame to rotate the sphere
-    scene.onBeforeRenderObservable.add(()=>{
-        sphere.rotation.y += 0.0001*scene.getEngine().getDeltaTime();
-        sphere.rotation.x += 0.0001*scene.getEngine().getDeltaTime();
-    })
-
-    // GUI
-    var plane = BABYLON.Mesh.CreatePlane("plane", 1);
-    plane.position = new BABYLON.Vector3(0.4, 4, 0.4)
-    var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane);
-    var panel = new BABYLON.GUI.StackPanel();    
-    advancedTexture.addControl(panel);  
-    var header = new BABYLON.GUI.TextBlock();
-    header.text = "Color GUI";
-    header.height = "100px";
-    header.color = "white";
-    header.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
-    header.fontSize = "120"
-    panel.addControl(header); 
-    var picker = new BABYLON.GUI.ColorPicker();
-    picker.value = sphere.material.diffuseColor;
-    picker.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
-    picker.height = "350px";
-    picker.width = "350px";
-    picker.onValueChangedObservable.add(function(value) {
-        sphere.material.diffuseColor.copyFrom(value);
-    });
-    panel.addControl(picker);
-    
-	return scene;
-};
-
-var colors = {
-        seaFoam: BABYLON.Color3.FromHexString("#16a085"),
-        green: BABYLON.Color3.FromHexString("#27ae60"),
-        blue: BABYLON.Color3.FromHexString("#2980b9"),
-        purple: BABYLON.Color3.FromHexString("#8e44ad"),
-        navy: BABYLON.Color3.FromHexString("#2c3e50"),
-        yellow: BABYLON.Color3.FromHexString("#f39c12"),
-        orange: BABYLON.Color3.FromHexString("#d35400"),
-        red: BABYLON.Color3.FromHexString("#c0392b"),
-        white: BABYLON.Color3.FromHexString("#bdc3c7"),
-        gray: BABYLON.Color3.FromHexString("#7f8c8d")
-    }

Playground/src/tools/monacoManager.ts

@@ -70,6 +70,7 @@ export class MonacoManager {
 
             if (this._editor) {
                 this._editor?.setValue(code);
+                this._isDirty = false;
                 this.globalState.onRunRequiredObservable.notifyObservers();
             } else {
                 this.globalState.currentCode = code;