Merge branch 'master' into frames-comment

.vscode/settings.json

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

Playground/index-local.html

@@ -49,18 +49,18 @@
         </div>
 
         <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton1280">Typescript</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton1280">Javascript</div>
-            <div class="buttonPG run removeOnDiff" id="runButton1280"><img src="css/img/playButton.svg"></div>
-            <div class="buttonPG removeOnDiff" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
-            <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
-            <div class="buttonPG removeOnDiff" id="newButton1280"><img src="css/img/newButton.svg"></div>
-            <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
-            <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1280"><img src="css/img/diffButton.svg"></div>
-            <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1280"><img src="css/img/previousButton.svg"></div>
-            <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1280"><img src="css/img/nextButton.svg"></div>
-            <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1280"><img src="css/img/exitButton.svg"></div>
-            <div class="buttonPG select removeOnDiff" id="menuButton1280"><img src="css/img/optionsButton.svg">
+            <div class="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">
@@ -103,11 +103,11 @@
         </div>
 
         <div class="category right">
-            <div class="buttonPG select removeOnDiff">
+            <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"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+            <div class="buttonPG select removeOnDiff" title="Examples"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
     </div>
 
@@ -119,20 +119,20 @@
         </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="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"><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 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"><img src="css/img/optionsButton.svg">
+            <div class="buttonPG select removeOnDiff" id="menuButton1024" title="Options"><img src="css/img/optionsButton.svg">
                 <div class="toDisplay">
                     <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
 
@@ -176,12 +176,12 @@
         </div>
 
         <div class="category right">
-            <div class="buttonPG select removeOnDiff">
+            <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"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+            <div class="buttonPG select removeOnDiff" title="Examples"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
     </div>
 

Playground/index.html

@@ -61,18 +61,18 @@
         </div>
 
         <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton1280">Typescript</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton1280">Javascript</div>
-            <div class="buttonPG run removeOnDiff" id="runButton1280"><img src="css/img/playButton.svg"></div>
-            <div class="buttonPG removeOnDiff" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
-            <div class="buttonPG removeOnPhone removeOnDiff" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
-            <div class="buttonPG removeOnDiff" id="newButton1280"><img src="css/img/newButton.svg"></div>
-            <div class="buttonPG removeOnPhone removeOnDiff" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
-            <div class="buttonPG removeOnPhone removeOnDiff" id="diffButton1280"><img src="css/img/diffButton.svg"></div>
-            <div class="buttonPG removeOnPhone displayOnDiff" id="previousButton1280"><img src="css/img/previousButton.svg"></div>
-            <div class="buttonPG removeOnPhone displayOnDiff" id="nextButton1280"><img src="css/img/nextButton.svg"></div>
-            <div class="buttonPG removeOnPhone displayOnDiff" id="exitButton1280"><img src="css/img/exitButton.svg"></div>
-            <div class="buttonPG select removeOnDiff" id="menuButton1280"><img src="css/img/optionsButton.svg">
+            <div class="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">
@@ -115,11 +115,11 @@
         </div>
 
         <div class="category right">
-            <div class="buttonPG select removeOnDiff">
+            <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"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+            <div class="buttonPG select removeOnDiff" title="Examples"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
     </div>
 
@@ -131,20 +131,20 @@
         </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="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"><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 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"><img src="css/img/optionsButton.svg">
+            <div class="buttonPG select removeOnDiff" id="menuButton1024" title="Options"><img src="css/img/optionsButton.svg">
                 <div class="toDisplay">
                     <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
 
@@ -188,12 +188,12 @@
         </div>
 
         <div class="category right">
-            <div class="buttonPG select removeOnDiff">
+            <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"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+            <div class="buttonPG select removeOnDiff" title="Examples"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
     </div>
 

Playground/indexStable.html

@@ -60,14 +60,18 @@
         </div>
 
         <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton1280">Typescript</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton1280">Javascript</div>
-            <div class="button run" id="runButton1280"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton1280"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
-            <div class="button select" id="menuButton1280"><img src="css/img/optionsButton.svg">
+            <div class="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">
@@ -126,16 +130,20 @@
         </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="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="button run" id="runButton1024"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton1024"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
-
-            <div class="button select" id="menuButton1024"><img src="css/img/optionsButton.svg">
+            <div class="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>
 

Playground/indexWebGPU.html

@@ -62,14 +62,18 @@
         </div>
 
         <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton1280">Typescript</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton1280">Javascript</div>
-            <div class="buttonPG run" id="runButton1280"><img src="css/img/playButton.svg"></div>
-            <div class="buttonPG" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
-            <div class="buttonPG removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
-            <div class="buttonPG" id="newButton1280"><img src="css/img/newButton.svg"></div>
-            <div class="buttonPG removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
-            <div class="buttonPG select" id="menuButton1280"><img src="css/img/optionsButton.svg">
+            <div class="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">
@@ -112,11 +116,11 @@
         </div>
 
         <div class="category right">
-            <div class="buttonPG select">
+            <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"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+            <div class="buttonPG select removeOnDiff" title="Examples"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
     </div>
 
@@ -128,16 +132,20 @@
         </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="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" id="runButton1024"><img src="css/img/playButton.svg"></div>
-            <div class="buttonPG" id="saveButton1024"><img src="css/img/saveButton.svg"></div>
-            <div class="buttonPG removeOnPhone" id="zipButton1024"><img src="css/img/downloadButton.svg"></div>
-            <div class="buttonPG" id="newButton1024"><img src="css/img/newButton.svg"></div>
-            <div class="buttonPG removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
+            <div class="buttonPG 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" id="menuButton1024"><img src="css/img/optionsButton.svg">
+            <div class="buttonPG select removeOnDiff" id="menuButton1024" title="Options"><img src="css/img/optionsButton.svg">
                 <div class="toDisplay">
                     <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
 

Playground/js/main.js

@@ -271,11 +271,14 @@ class Main {
         this.loadScriptsList(restoreVersionResult);
 
         // -------------------- UI --------------------
+        var handleRun = () => compileAndRun(this.parent, this.fpsLabel);
+        var handleSave = () => this.askForSave();
+        var handleGetZip = () => this.parent.zipTool.getZip(engine);
 
         // Display BJS version
         if (BABYLON) this.parent.utils.setToMultipleID("mainTitle", "innerHTML", "v" + BABYLON.Engine.Version);
         // Run
-        this.parent.utils.setToMultipleID("runButton", "click", () => compileAndRun(this.parent, this.fpsLabel));
+        this.parent.utils.setToMultipleID("runButton", "click", handleRun);
         // New
         this.parent.utils.setToMultipleID("newButton", "click", function () {
             this.parent.menuPG.removeAllOptions();
@@ -287,7 +290,7 @@ class Main {
             this.clear.call(this);
         }.bind(this));
         // Save
-        this.parent.utils.setToMultipleID("saveButton", "click", this.askForSave.bind(this));
+        this.parent.utils.setToMultipleID("saveButton", "click", handleSave);
         // Diff
         this.parent.utils.setToMultipleID("diffButton", "click", this.askForDiff.bind(this));
         this.parent.utils.setToMultipleID("previousButton", "click", this.navigateToPrevious.bind(this));
@@ -296,9 +299,7 @@ class Main {
             this.toggleDiffEditor(this.parent.monacoCreator, this.parent.menuPG)
         }.bind(this));
         // Zip
-        this.parent.utils.setToMultipleID("zipButton", "click", function () {
-            this.parent.zipTool.getZip(engine);
-        }.bind(this));
+        this.parent.utils.setToMultipleID("zipButton", "click", handleGetZip);
         // Themes
         this.parent.utils.setToMultipleID("darkTheme", "click", function () {
             this.parent.menuPG.removeAllOptions();
@@ -426,6 +427,30 @@ class Main {
         this.parent.settingsPG.setScriptLanguage();
         // Check if it's mobile mode. If true, switch to full canvas by default
         this.parent.menuPG.resizeBigCanvas();
+
+        // HotKeys
+        document.onkeydown = function (e) {
+            // Alt+Enter to Run
+            if (e.altKey && (e.key === 'Enter' || event.which === 13)) {
+                handleRun();
+            }
+            // Ctrl+Shift+S to Download Zip
+            else if (
+              (window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) &&
+              e.shiftKey &&
+              (e.key === 'S' || event.which === 83)
+            ) {
+                handleGetZip();
+            }
+            // Ctrl+S to Save
+            else if (
+              (window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) &&
+              (e.key === 'S' || event.which === 83)
+            ) {
+                e.preventDefault();
+                handleSave();
+            }
+        };
     };
 
     /**

Playground/js/mainWebGPU.js

@@ -262,11 +262,14 @@ class Main {
         this.loadScriptsList(restoreVersionResult);
 
         // -------------------- UI --------------------
+        var handleRun = () => compileAndRun(this.parent, this.fpsLabel);
+        var handleSave = () => this.askForSave();
+        var handleGetZip = () => this.parent.zipTool.getZip(engine);
 
         // Display BJS version
         if (BABYLON) this.parent.utils.setToMultipleID("mainTitle", "innerHTML", "v" + BABYLON.Engine.Version);
         // Run
-        this.parent.utils.setToMultipleID("runButton", "click", () => compileAndRun(this.parent, this.fpsLabel));
+        this.parent.utils.setToMultipleID("runButton", "click", handleRun);
         // New
         this.parent.utils.setToMultipleID("newButton", "click", function () {
             this.parent.menuPG.removeAllOptions();
@@ -278,11 +281,9 @@ class Main {
             this.clear.call(this);
         }.bind(this));
         // Save
-        this.parent.utils.setToMultipleID("saveButton", "click", this.askForSave.bind(this));
+        this.parent.utils.setToMultipleID("saveButton", "click", handleSave);
         // Zip
-        this.parent.utils.setToMultipleID("zipButton", "click", function () {
-            this.parent.zipTool.getZip(engine);
-        }.bind(this));
+        this.parent.utils.setToMultipleID("zipButton", "click", handleGetZip);
         // Themes
         this.parent.utils.setToMultipleID("darkTheme", "click", function () {
             this.parent.menuPG.removeAllOptions();
@@ -410,6 +411,30 @@ class Main {
         this.parent.settingsPG.setScriptLanguage();
         // Check if it's mobile mode. If true, switch to full canvas by default
         this.parent.menuPG.resizeBigCanvas();
+
+        // HotKeys
+        document.onkeydown = function (e) {
+            // Alt+Enter to Run
+            if (e.altKey && (e.key === 'Enter' || event.which === 13)) {
+                handleRun();
+            }
+            // Ctrl+Shift+S to Download Zip
+            else if (
+              (window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) &&
+              e.shiftKey &&
+              (e.key === 'S' || event.which === 83)
+            ) {
+                handleGetZip();
+            }
+            // Ctrl+S to Save
+            else if (
+              (window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) &&
+              (e.key === 'S' || event.which === 83)
+            ) {
+                e.preventDefault();
+                handleSave();
+            }
+        };
     };
 
     /**

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

@@ -367,6 +367,14 @@ declare module BABYLON.GUI {
         private _renderScale;
         private _rootElement;
         private _cursorChanged;
+        /** @hidden */
+        _numLayoutCalls: number;
+        /** Gets the number of layout calls made the last time the ADT has been rendered */
+        get numLayoutCalls(): number;
+        /** @hidden */
+        _numRenderCalls: number;
+        /** Gets the number of render calls made the last time the ADT has been rendered */
+        get numRenderCalls(): number;
         /**
         * Define type to string to ensure compatibility across browsers
         * Safari doesn't support DataTransfer constructor
@@ -436,6 +444,11 @@ declare module BABYLON.GUI {
         get renderAtIdealSize(): boolean;
         set renderAtIdealSize(value: boolean);
         /**
+         * Gets the ratio used when in "ideal mode"
+        * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+         * */
+        get idealRatio(): number;
+        /**
         * Gets the underlying layer used to render the texture when in fullscreen mode
         */
         get layer(): BABYLON.Nullable<BABYLON.Layer>;
@@ -701,6 +714,8 @@ declare module BABYLON.GUI {
         /** @hidden */
         protected _rebuildLayout: boolean;
         /** @hidden */
+        _customData: any;
+        /** @hidden */
         _isClipped: boolean;
         /** @hidden */
         _automaticSize: boolean;
@@ -1226,7 +1241,7 @@ declare module BABYLON.GUI {
     export class Container extends Control {
         name?: string | undefined;
         /** @hidden */
-        protected _children: Control[];
+        _children: Control[];
         /** @hidden */
         protected _measureForChildren: Measure;
         /** @hidden */
@@ -2867,6 +2882,24 @@ declare module BABYLON.GUI {
     export class _ScrollViewerWindow extends Container {
         parentClientWidth: number;
         parentClientHeight: number;
+        private _freezeControls;
+        private _parentMeasure;
+        private _oldLeft;
+        private _oldTop;
+        get freezeControls(): boolean;
+        set freezeControls(value: boolean);
+        private _bucketWidth;
+        private _bucketHeight;
+        private _buckets;
+        private _bucketLen;
+        get bucketWidth(): number;
+        get bucketHeight(): number;
+        setBucketSizes(width: number, height: number): void;
+        private _useBuckets;
+        private _makeBuckets;
+        private _dispatchInBuckets;
+        private _updateMeasures;
+        private _updateChildrenMeasures;
         /**
         * Creates a new ScrollViewerWindow
         * @param name of ScrollViewerWindow
@@ -2875,6 +2908,12 @@ declare module BABYLON.GUI {
         protected _getTypeName(): string;
         /** @hidden */
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        /** @hidden */
+        _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean;
+        private _scrollChildren;
+        private _scrollChildrenWithBuckets;
+        /** @hidden */
+        _draw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
         protected _postMeasure(): void;
     }
 }
@@ -2980,8 +3019,6 @@ declare module BABYLON.GUI {
         private _barImage;
         private _barBackgroundImage;
         private _barSize;
-        private _endLeft;
-        private _endTop;
         private _window;
         private _pointerIsOver;
         private _wheelPrecision;
@@ -3016,6 +3053,41 @@ declare module BABYLON.GUI {
         get children(): Control[];
         _flagDescendantsAsMatrixDirty(): void;
         /**
+         * Freezes or unfreezes the controls in the window.
+         * When controls are frozen, the scroll viewer can render a lot more quickly but updates to positions/sizes of controls
+         * are not taken into account. If you want to change positions/sizes, unfreeze, perform the changes then freeze again
+         */
+        get freezeControls(): boolean;
+        set freezeControls(value: boolean);
+        /** Gets the bucket width */
+        get bucketWidth(): number;
+        /** Gets the bucket height */
+        get bucketHeight(): number;
+        /**
+         * Sets the bucket sizes.
+         * When freezeControls is true, setting a non-zero bucket size will improve performances by updating only
+         * controls that are visible. The bucket sizes is used to subdivide (internally) the window area to smaller areas into which
+         * controls are dispatched. So, the size should be roughly equals to the mean size of all the controls of
+         * the window. To disable the usage of buckets, sets either width or height (or both) to 0.
+         * Please note that using this option will raise the memory usage (the higher the bucket sizes, the less memory
+         * used), that's why it is not enabled by default.
+         * @param width width of the bucket
+         * @param height height of the bucket
+         */
+        setBucketSizes(width: number, height: number): void;
+        private _forceHorizontalBar;
+        private _forceVerticalBar;
+        /**
+         * Forces the horizontal scroll bar to be displayed
+         */
+        get forceHorizontalBar(): boolean;
+        set forceHorizontalBar(value: boolean);
+        /**
+         * Forces the vertical scroll bar to be displayed
+         */
+        get forceVerticalBar(): boolean;
+        set forceVerticalBar(value: boolean);
+        /**
         * Creates a new ScrollViewer
         * @param name of ScrollViewer
         */
@@ -3059,6 +3131,7 @@ declare module BABYLON.GUI {
         /** Gets or sets the bar background image */
         get barImage(): Image;
         set barImage(value: Image);
+        private _setWindowPosition;
         /** @hidden */
         private _updateScroller;
         _link(host: AdvancedDynamicTexture): void;

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

@@ -386,6 +386,14 @@ declare module "babylonjs-gui/2D/advancedDynamicTexture" {
         private _renderScale;
         private _rootElement;
         private _cursorChanged;
+        /** @hidden */
+        _numLayoutCalls: number;
+        /** Gets the number of layout calls made the last time the ADT has been rendered */
+        get numLayoutCalls(): number;
+        /** @hidden */
+        _numRenderCalls: number;
+        /** Gets the number of render calls made the last time the ADT has been rendered */
+        get numRenderCalls(): number;
         /**
         * Define type to string to ensure compatibility across browsers
         * Safari doesn't support DataTransfer constructor
@@ -455,6 +463,11 @@ declare module "babylonjs-gui/2D/advancedDynamicTexture" {
         get renderAtIdealSize(): boolean;
         set renderAtIdealSize(value: boolean);
         /**
+         * Gets the ratio used when in "ideal mode"
+        * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+         * */
+        get idealRatio(): number;
+        /**
         * Gets the underlying layer used to render the texture when in fullscreen mode
         */
         get layer(): Nullable<Layer>;
@@ -731,6 +744,8 @@ declare module "babylonjs-gui/2D/controls/control" {
         /** @hidden */
         protected _rebuildLayout: boolean;
         /** @hidden */
+        _customData: any;
+        /** @hidden */
         _isClipped: boolean;
         /** @hidden */
         _automaticSize: boolean;
@@ -1260,7 +1275,7 @@ declare module "babylonjs-gui/2D/controls/container" {
     export class Container extends Control {
         name?: string | undefined;
         /** @hidden */
-        protected _children: Control[];
+        _children: Control[];
         /** @hidden */
         protected _measureForChildren: Measure;
         /** @hidden */
@@ -2978,6 +2993,24 @@ declare module "babylonjs-gui/2D/controls/scrollViewers/scrollViewerWindow" {
     export class _ScrollViewerWindow extends Container {
         parentClientWidth: number;
         parentClientHeight: number;
+        private _freezeControls;
+        private _parentMeasure;
+        private _oldLeft;
+        private _oldTop;
+        get freezeControls(): boolean;
+        set freezeControls(value: boolean);
+        private _bucketWidth;
+        private _bucketHeight;
+        private _buckets;
+        private _bucketLen;
+        get bucketWidth(): number;
+        get bucketHeight(): number;
+        setBucketSizes(width: number, height: number): void;
+        private _useBuckets;
+        private _makeBuckets;
+        private _dispatchInBuckets;
+        private _updateMeasures;
+        private _updateChildrenMeasures;
         /**
         * Creates a new ScrollViewerWindow
         * @param name of ScrollViewerWindow
@@ -2986,6 +3019,12 @@ declare module "babylonjs-gui/2D/controls/scrollViewers/scrollViewerWindow" {
         protected _getTypeName(): string;
         /** @hidden */
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        /** @hidden */
+        _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean;
+        private _scrollChildren;
+        private _scrollChildrenWithBuckets;
+        /** @hidden */
+        _draw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
         protected _postMeasure(): void;
     }
 }
@@ -3107,8 +3146,6 @@ declare module "babylonjs-gui/2D/controls/scrollViewers/scrollViewer" {
         private _barImage;
         private _barBackgroundImage;
         private _barSize;
-        private _endLeft;
-        private _endTop;
         private _window;
         private _pointerIsOver;
         private _wheelPrecision;
@@ -3143,6 +3180,41 @@ declare module "babylonjs-gui/2D/controls/scrollViewers/scrollViewer" {
         get children(): Control[];
         _flagDescendantsAsMatrixDirty(): void;
         /**
+         * Freezes or unfreezes the controls in the window.
+         * When controls are frozen, the scroll viewer can render a lot more quickly but updates to positions/sizes of controls
+         * are not taken into account. If you want to change positions/sizes, unfreeze, perform the changes then freeze again
+         */
+        get freezeControls(): boolean;
+        set freezeControls(value: boolean);
+        /** Gets the bucket width */
+        get bucketWidth(): number;
+        /** Gets the bucket height */
+        get bucketHeight(): number;
+        /**
+         * Sets the bucket sizes.
+         * When freezeControls is true, setting a non-zero bucket size will improve performances by updating only
+         * controls that are visible. The bucket sizes is used to subdivide (internally) the window area to smaller areas into which
+         * controls are dispatched. So, the size should be roughly equals to the mean size of all the controls of
+         * the window. To disable the usage of buckets, sets either width or height (or both) to 0.
+         * Please note that using this option will raise the memory usage (the higher the bucket sizes, the less memory
+         * used), that's why it is not enabled by default.
+         * @param width width of the bucket
+         * @param height height of the bucket
+         */
+        setBucketSizes(width: number, height: number): void;
+        private _forceHorizontalBar;
+        private _forceVerticalBar;
+        /**
+         * Forces the horizontal scroll bar to be displayed
+         */
+        get forceHorizontalBar(): boolean;
+        set forceHorizontalBar(value: boolean);
+        /**
+         * Forces the vertical scroll bar to be displayed
+         */
+        get forceVerticalBar(): boolean;
+        set forceVerticalBar(value: boolean);
+        /**
         * Creates a new ScrollViewer
         * @param name of ScrollViewer
         */
@@ -3186,6 +3258,7 @@ declare module "babylonjs-gui/2D/controls/scrollViewers/scrollViewer" {
         /** Gets or sets the bar background image */
         get barImage(): Image;
         set barImage(value: Image);
+        private _setWindowPosition;
         /** @hidden */
         private _updateScroller;
         _link(host: AdvancedDynamicTexture): void;
@@ -4614,6 +4687,14 @@ declare module BABYLON.GUI {
         private _renderScale;
         private _rootElement;
         private _cursorChanged;
+        /** @hidden */
+        _numLayoutCalls: number;
+        /** Gets the number of layout calls made the last time the ADT has been rendered */
+        get numLayoutCalls(): number;
+        /** @hidden */
+        _numRenderCalls: number;
+        /** Gets the number of render calls made the last time the ADT has been rendered */
+        get numRenderCalls(): number;
         /**
         * Define type to string to ensure compatibility across browsers
         * Safari doesn't support DataTransfer constructor
@@ -4683,6 +4764,11 @@ declare module BABYLON.GUI {
         get renderAtIdealSize(): boolean;
         set renderAtIdealSize(value: boolean);
         /**
+         * Gets the ratio used when in "ideal mode"
+        * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+         * */
+        get idealRatio(): number;
+        /**
         * Gets the underlying layer used to render the texture when in fullscreen mode
         */
         get layer(): BABYLON.Nullable<BABYLON.Layer>;
@@ -4948,6 +5034,8 @@ declare module BABYLON.GUI {
         /** @hidden */
         protected _rebuildLayout: boolean;
         /** @hidden */
+        _customData: any;
+        /** @hidden */
         _isClipped: boolean;
         /** @hidden */
         _automaticSize: boolean;
@@ -5473,7 +5561,7 @@ declare module BABYLON.GUI {
     export class Container extends Control {
         name?: string | undefined;
         /** @hidden */
-        protected _children: Control[];
+        _children: Control[];
         /** @hidden */
         protected _measureForChildren: Measure;
         /** @hidden */
@@ -7114,6 +7202,24 @@ declare module BABYLON.GUI {
     export class _ScrollViewerWindow extends Container {
         parentClientWidth: number;
         parentClientHeight: number;
+        private _freezeControls;
+        private _parentMeasure;
+        private _oldLeft;
+        private _oldTop;
+        get freezeControls(): boolean;
+        set freezeControls(value: boolean);
+        private _bucketWidth;
+        private _bucketHeight;
+        private _buckets;
+        private _bucketLen;
+        get bucketWidth(): number;
+        get bucketHeight(): number;
+        setBucketSizes(width: number, height: number): void;
+        private _useBuckets;
+        private _makeBuckets;
+        private _dispatchInBuckets;
+        private _updateMeasures;
+        private _updateChildrenMeasures;
         /**
         * Creates a new ScrollViewerWindow
         * @param name of ScrollViewerWindow
@@ -7122,6 +7228,12 @@ declare module BABYLON.GUI {
         protected _getTypeName(): string;
         /** @hidden */
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        /** @hidden */
+        _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean;
+        private _scrollChildren;
+        private _scrollChildrenWithBuckets;
+        /** @hidden */
+        _draw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
         protected _postMeasure(): void;
     }
 }
@@ -7227,8 +7339,6 @@ declare module BABYLON.GUI {
         private _barImage;
         private _barBackgroundImage;
         private _barSize;
-        private _endLeft;
-        private _endTop;
         private _window;
         private _pointerIsOver;
         private _wheelPrecision;
@@ -7263,6 +7373,41 @@ declare module BABYLON.GUI {
         get children(): Control[];
         _flagDescendantsAsMatrixDirty(): void;
         /**
+         * Freezes or unfreezes the controls in the window.
+         * When controls are frozen, the scroll viewer can render a lot more quickly but updates to positions/sizes of controls
+         * are not taken into account. If you want to change positions/sizes, unfreeze, perform the changes then freeze again
+         */
+        get freezeControls(): boolean;
+        set freezeControls(value: boolean);
+        /** Gets the bucket width */
+        get bucketWidth(): number;
+        /** Gets the bucket height */
+        get bucketHeight(): number;
+        /**
+         * Sets the bucket sizes.
+         * When freezeControls is true, setting a non-zero bucket size will improve performances by updating only
+         * controls that are visible. The bucket sizes is used to subdivide (internally) the window area to smaller areas into which
+         * controls are dispatched. So, the size should be roughly equals to the mean size of all the controls of
+         * the window. To disable the usage of buckets, sets either width or height (or both) to 0.
+         * Please note that using this option will raise the memory usage (the higher the bucket sizes, the less memory
+         * used), that's why it is not enabled by default.
+         * @param width width of the bucket
+         * @param height height of the bucket
+         */
+        setBucketSizes(width: number, height: number): void;
+        private _forceHorizontalBar;
+        private _forceVerticalBar;
+        /**
+         * Forces the horizontal scroll bar to be displayed
+         */
+        get forceHorizontalBar(): boolean;
+        set forceHorizontalBar(value: boolean);
+        /**
+         * Forces the vertical scroll bar to be displayed
+         */
+        get forceVerticalBar(): boolean;
+        set forceVerticalBar(value: boolean);
+        /**
         * Creates a new ScrollViewer
         * @param name of ScrollViewer
         */
@@ -7306,6 +7451,7 @@ declare module BABYLON.GUI {
         /** Gets or sets the bar background image */
         get barImage(): Image;
         set barImage(value: Image);
+        private _setWindowPosition;
         /** @hidden */
         private _updateScroller;
         _link(host: AdvancedDynamicTexture): void;

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -623,7 +623,7 @@ var WaterMaterial = /** @class */ (function (_super) {
         */
         _this.waveSpeed = 1.0;
         /**
-         * Sets or gets wether or not automatic clipping should be enabled or not. Setting to true will save performances and
+         * Sets or gets whether or not automatic clipping should be enabled or not. Setting to true will save performances and
          * will avoid calculating useless pixels in the pixel shader of the water material.
          */
         _this.disableClipPlane = false;

dist/preview release/materialsLibrary/babylonjs.materials.d.ts

@@ -945,7 +945,7 @@ declare module BABYLON {
         */
         waveSpeed: number;
         /**
-         * Sets or gets wether or not automatic clipping should be enabled or not. Setting to true will save performances and
+         * Sets or gets whether or not automatic clipping should be enabled or not. Setting to true will save performances and
          * will avoid calculating useless pixels in the pixel shader of the water material.
          */
         disableClipPlane: boolean;

dist/preview release/materialsLibrary/babylonjs.materials.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -6864,7 +6864,7 @@ var WaterMaterial = /** @class */ (function (_super) {
         */
         _this.waveSpeed = 1.0;
         /**
-         * Sets or gets wether or not automatic clipping should be enabled or not. Setting to true will save performances and
+         * Sets or gets whether or not automatic clipping should be enabled or not. Setting to true will save performances and
          * will avoid calculating useless pixels in the pixel shader of the water material.
          */
         _this.disableClipPlane = false;

dist/preview release/materialsLibrary/babylonjs.materials.module.d.ts

@@ -1443,7 +1443,7 @@ declare module "babylonjs-materials/water/waterMaterial" {
         */
         waveSpeed: number;
         /**
-         * Sets or gets wether or not automatic clipping should be enabled or not. Setting to true will save performances and
+         * Sets or gets whether or not automatic clipping should be enabled or not. Setting to true will save performances and
          * will avoid calculating useless pixels in the pixel shader of the water material.
          */
         disableClipPlane: boolean;
@@ -2510,7 +2510,7 @@ declare module BABYLON {
         */
         waveSpeed: number;
         /**
-         * Sets or gets wether or not automatic clipping should be enabled or not. Setting to true will save performances and
+         * Sets or gets whether or not automatic clipping should be enabled or not. Setting to true will save performances and
          * will avoid calculating useless pixels in the pixel shader of the water material.
          */
         disableClipPlane: boolean;

dist/preview release/packagesSizeBaseLine.json

@@ -1 +1 @@
-{"thinEngineOnly":112567,"engineOnly":148699,"sceneOnly":504058,"minGridMaterial":634782,"minStandardMaterial":774821}
+{"thinEngineOnly":112467,"engineOnly":148577,"sceneOnly":503616,"minGridMaterial":634284,"minStandardMaterial":774311}

dist/preview release/postProcessesLibrary/babylon.asciiArtPostProcess.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/postProcessesLibrary/babylon.digitalRainPostProcess.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/postProcessesLibrary/babylonjs.postProcess.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** C:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {