Merge branch 'master' of https://github.com/BabylonJS/Babylon.js

.vscode/launch.json

@@ -45,7 +45,7 @@
             "name": "Launch sandbox (Chrome)",
             "type": "chrome",
             "request": "launch",
-            "url": "http://localhost:1338/sandbox/index-local.html",
+            "url": "http://localhost:1338/sandbox/public/index-local.html",
             "webRoot": "${workspaceRoot}/",
             "sourceMaps": true,
             "preLaunchTask": "run",
@@ -59,7 +59,7 @@
             "type": "edge",
             "version": "dev",
             "request": "launch",
-            "url": "http://localhost:1338/sandbox/index-local.html",
+            "url": "http://localhost:1338/sandbox/public/index-local.html",
             "webRoot": "${workspaceRoot}/",
             "sourceMaps": true,
             "preLaunchTask": "run",

Tools/Config/config.json

@@ -47,7 +47,8 @@
         "serializers",
         "gui",
         "inspector",
-        "nodeEditor"
+        "nodeEditor",
+        "sandbox"
     ],
     "es6modules": [
         "core",
@@ -59,7 +60,8 @@
         "gui",
         "inspector",
         "viewer",
-        "nodeEditor"
+        "nodeEditor",
+        "sandbox"
     ],
     "lintModules": [
         "core",
@@ -636,6 +638,54 @@
             }
         }
     },
+    "sandbox": {
+        "libraries": [
+            {
+                "output": "babylon.sandbox.js",
+                "entry": "./legacy/legacy.ts"
+            }
+        ],
+        "build": {            
+            "ignoreInWorkerMode": true,
+            "ignoreInTestMode": true,
+            "mainFolder": "./sandbox/",
+            "uncheckedLintImports": [
+                "react",
+                "react-dom"
+            ],
+            "umd": {
+                "packageName": "babylonjs-sandbox",
+                "webpackRoot": "SANDBOX",
+                "processDeclaration": {
+                    "filename": "babylon.sandbox.module.d.ts",
+                    "moduleName": "SANDBOX",
+                    "importsToRemove": [],
+                    "classMap": {
+                        "babylonjs": "BABYLON",
+                        "react": "React",
+                        "@babylonjs/core": "BABYLON",
+                        "@fortawesome": false
+                    }
+                }
+            },
+            "es6": {
+                "webpackBuild": true,
+                "buildDependencies": [
+                    "Tools/**/*"
+                ],
+                "packageName": "@babylonjs/sandbox",
+                "readme": "dist/preview release/sandbox/readme-es6.md",
+                "packagesFiles": [
+                    "babylon.sandbox.max.js",
+                    "babylon.sandbox.max.js.map",
+                    "babylon.sandbox.module.d.ts",
+                    "readme.md"
+                ],
+                "typings": "babylon.sandbox.module.d.ts",
+                "index": "babylon.sandbox.max.js"
+            }
+        }
+    },
     "viewer": {
         "libraries": [
             {

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

@@ -7,7 +7,7 @@
 		exports["babylonjs-gui"] = factory(require("babylonjs"));
 	else
 		root["BABYLON"] = root["BABYLON"] || {}, root["BABYLON"]["GUI"] = factory(root["BABYLON"]);
-})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_perfCounter__) {
+})((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_observable__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -366,7 +366,7 @@ module.exports = g;
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTextureInstrumentation", function() { return AdvancedDynamicTextureInstrumentation; });
-/* harmony import */ var babylonjs_Misc_perfCounter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/perfCounter */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_perfCounter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/perfCounter */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_perfCounter__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_perfCounter__WEBPACK_IMPORTED_MODULE_0__);
 
 /**
@@ -509,7 +509,7 @@ var AdvancedDynamicTextureInstrumentation = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTexture", function() { return AdvancedDynamicTexture; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _controls_container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./controls/container */ "./2D/controls/container.ts");
 /* harmony import */ var _style__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./style */ "./2D/style.ts");
@@ -1481,7 +1481,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _textBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./textBlock */ "./2D/controls/textBlock.ts");
 /* harmony import */ var _image__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./image */ "./2D/controls/image.ts");
-/* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_5__);
 
 
@@ -1713,7 +1713,7 @@ babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_5__["_TypeStore"].RegisteredTy
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Checkbox", function() { return Checkbox; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
@@ -1896,7 +1896,7 @@ babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredT
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ColorPicker", function() { return ColorPicker; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _inputText__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./inputText */ "./2D/controls/inputText.ts");
@@ -3285,7 +3285,7 @@ babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredT
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Container", function() { return Container; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/logger */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/logger */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../measure */ "./2D/measure.ts");
@@ -3700,7 +3700,7 @@ babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredTypes
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Control", function() { return Control; });
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
 /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../measure */ "./2D/measure.ts");
@@ -5626,7 +5626,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DisplayGrid", function() { return DisplayGrid; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
-/* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__);
 
 
@@ -5859,7 +5859,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
 /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
-/* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3__);
 
 
@@ -5956,7 +5956,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4__);
 
 
@@ -6414,7 +6414,7 @@ babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_4__["_TypeStore"].RegisteredTypes[
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Image", function() { return Image; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 
@@ -7341,7 +7341,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "InputPassword", function() { return InputPassword; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
 /* harmony import */ var _inputText__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./inputText */ "./2D/controls/inputText.ts");
-/* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__);
 
 
@@ -7380,7 +7380,7 @@ babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__["_TypeStore"].RegisteredTy
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "InputText", function() { return InputText; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
@@ -8393,7 +8393,7 @@ babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].RegisteredT
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Line", function() { return Line; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
@@ -8664,7 +8664,7 @@ babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].Registere
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MultiLine", function() { return MultiLine; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/abstractMesh */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/abstractMesh */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _multiLinePoint__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../multiLinePoint */ "./2D/multiLinePoint.ts");
@@ -8934,7 +8934,7 @@ babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__["_TypeStore"].Registe
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RadioButton", function() { return RadioButton; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
@@ -9141,7 +9141,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Rectangle", function() { return Rectangle; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
 /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
-/* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__);
 
 
@@ -9291,7 +9291,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _scrollViewerWindow__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./scrollViewerWindow */ "./2D/controls/scrollViewers/scrollViewerWindow.ts");
 /* harmony import */ var _sliders_scrollBar__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../sliders/scrollBar */ "./2D/controls/sliders/scrollBar.ts");
 /* harmony import */ var _sliders_imageScrollBar__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../sliders/imageScrollBar */ "./2D/controls/sliders/imageScrollBar.ts");
-/* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_7__);
 
 
@@ -10914,7 +10914,7 @@ var SelectionPanel = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "BaseSlider", function() { return BaseSlider; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../control */ "./2D/controls/control.ts");
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../valueAndUnit */ "./2D/valueAndUnit.ts");
@@ -11244,7 +11244,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
 /* harmony import */ var _baseSlider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./baseSlider */ "./2D/controls/sliders/baseSlider.ts");
 /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../measure */ "./2D/measure.ts");
-/* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_3__);
 
 
@@ -11837,7 +11837,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Slider", function() { return Slider; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
 /* harmony import */ var _baseSlider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./baseSlider */ "./2D/controls/sliders/baseSlider.ts");
-/* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__);
 
 
@@ -12092,7 +12092,7 @@ babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_2__["_TypeStore"].RegisteredTy
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "StackPanel", function() { return StackPanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
@@ -12360,7 +12360,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TextWrapping", function() { return TextWrapping; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TextBlock", function() { return TextBlock; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
@@ -12823,7 +12823,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "KeyPropertySet", function() { return KeyPropertySet; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VirtualKeyboard", function() { return VirtualKeyboard; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
 /* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./button */ "./2D/controls/button.ts");
@@ -13212,7 +13212,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Vector2WithInfo", function() { return Vector2WithInfo; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Matrix2D", function() { return Matrix2D; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -13437,7 +13437,7 @@ var Matrix2D = /** @class */ (function () {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Measure", function() { return Measure; });
-/* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__);
 
 var tmpRect = [
@@ -13586,7 +13586,7 @@ var Measure = /** @class */ (function () {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MultiLinePoint", function() { return MultiLinePoint; });
-/* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./valueAndUnit */ "./2D/valueAndUnit.ts");
 
@@ -13729,7 +13729,7 @@ var MultiLinePoint = /** @class */ (function () {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Style", function() { return Style; });
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./valueAndUnit */ "./2D/valueAndUnit.ts");
 
@@ -14035,7 +14035,7 @@ var ValueAndUnit = /** @class */ (function () {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "XmlLoader", function() { return XmlLoader; });
-/* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/typeStore */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_typeStore__WEBPACK_IMPORTED_MODULE_0__);
 
 /**
@@ -14354,7 +14354,7 @@ var XmlLoader = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AbstractButton3D", function() { return AbstractButton3D; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/transformNode */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/transformNode */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control3D */ "./3D/controls/control3D.ts");
 
@@ -14397,7 +14397,7 @@ var AbstractButton3D = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Button3D", function() { return Button3D; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _abstractButton3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./abstractButton3D */ "./3D/controls/abstractButton3D.ts");
 /* harmony import */ var _2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../2D/advancedDynamicTexture */ "./2D/advancedDynamicTexture.ts");
@@ -14578,7 +14578,7 @@ var Button3D = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Container3D", function() { return Container3D; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/transformNode */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/transformNode */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control3D */ "./3D/controls/control3D.ts");
 
@@ -14735,7 +14735,7 @@ var Container3D = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Control3D", function() { return Control3D; });
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _vector3WithInfo__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../vector3WithInfo */ "./3D/vector3WithInfo.ts");
 
@@ -15141,7 +15141,7 @@ var Control3D = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CylinderPanel", function() { return CylinderPanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
@@ -15227,7 +15227,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "HolographicButton", function() { return HolographicButton; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
 /* harmony import */ var _button3D__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./button3D */ "./3D/controls/button3D.ts");
-/* harmony import */ var babylonjs_Materials_standardMaterial__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Materials/standardMaterial */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Materials_standardMaterial__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Materials/standardMaterial */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Materials_standardMaterial__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_standardMaterial__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _materials_fluentMaterial__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../materials/fluentMaterial */ "./3D/materials/fluentMaterial.ts");
 /* harmony import */ var _2D_controls_stackPanel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../2D/controls/stackPanel */ "./2D/controls/stackPanel.ts");
@@ -15721,7 +15721,7 @@ var MeshButton3D = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PlanePanel", function() { return PlanePanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
 /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
@@ -15776,7 +15776,7 @@ var PlanePanel = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ScatterPanel", function() { return ScatterPanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
@@ -15903,7 +15903,7 @@ var ScatterPanel = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SpherePanel", function() { return SpherePanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
@@ -15989,7 +15989,7 @@ var SpherePanel = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "StackPanel3D", function() { return StackPanel3D; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
 
@@ -16114,7 +16114,7 @@ var StackPanel3D = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VolumeBasedPanel", function() { return VolumeBasedPanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
 
@@ -16305,7 +16305,7 @@ var VolumeBasedPanel = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "GUI3DManager", function() { return GUI3DManager; });
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _controls_container3D__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./controls/container3D */ "./3D/controls/container3D.ts");
 
@@ -16572,7 +16572,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FluentMaterialDefines", function() { return FluentMaterialDefines; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FluentMaterial", function() { return FluentMaterial; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _shaders_fluent_vertex__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./shaders/fluent.vertex */ "./3D/materials/shaders/fluent.vertex.ts");
 /* harmony import */ var _shaders_fluent_fragment__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./shaders/fluent.fragment */ "./3D/materials/shaders/fluent.fragment.ts");
@@ -16895,7 +16895,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "fluentPixelShader", function() { return fluentPixelShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 var name = 'fluentPixelShader';
@@ -16917,7 +16917,7 @@ var fluentPixelShader = { name: name, shader: shader };
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "fluentVertexShader", function() { return fluentVertexShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 var name = 'fluentVertexShader';
@@ -16940,7 +16940,7 @@ var fluentVertexShader = { name: name, shader: shader };
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Vector3WithInfo", function() { return Vector3WithInfo; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/perfCounter");
+/* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math.vector */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -17242,14 +17242,14 @@ if (typeof globalObject !== "undefined") {
 
 /***/ }),
 
-/***/ "babylonjs/Misc/perfCounter":
+/***/ "babylonjs/Misc/observable":
 /*!****************************************************************************************************!*\
   !*** external {"root":"BABYLON","commonjs":"babylonjs","commonjs2":"babylonjs","amd":"babylonjs"} ***!
   \****************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_perfCounter__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_observable__;
 
 /***/ })
 

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

@@ -931,23 +931,21 @@ var KHR_materials_sheen = /** @class */ (function () {
         }
         var promises = new Array();
         babylonMaterial.sheen.isEnabled = true;
-        if (properties.intensityFactor != undefined) {
-            babylonMaterial.sheen.intensity = properties.intensityFactor;
+        babylonMaterial.sheen.intensity = 1;
+        if (properties.sheenColorFactor != undefined) {
+            babylonMaterial.sheen.color = babylonjs_Materials_PBR_pbrMaterial__WEBPACK_IMPORTED_MODULE_0__["Color3"].FromArray(properties.sheenColorFactor);
         }
         else {
-            babylonMaterial.sheen.intensity = 0;
+            babylonMaterial.sheen.color = babylonjs_Materials_PBR_pbrMaterial__WEBPACK_IMPORTED_MODULE_0__["Color3"].Black();
         }
-        if (properties.colorFactor != undefined) {
-            babylonMaterial.sheen.color = babylonjs_Materials_PBR_pbrMaterial__WEBPACK_IMPORTED_MODULE_0__["Color3"].FromArray(properties.colorFactor);
-        }
-        if (properties.colorIntensityTexture) {
-            promises.push(this._loader.loadTextureInfoAsync(context + "/sheenTexture", properties.colorIntensityTexture, function (texture) {
-                texture.name = babylonMaterial.name + " (Sheen Intensity)";
+        if (properties.sheenTexture) {
+            promises.push(this._loader.loadTextureInfoAsync(context + "/sheenTexture", properties.sheenTexture, function (texture) {
+                texture.name = babylonMaterial.name + " (Sheen Color)";
                 babylonMaterial.sheen.texture = texture;
             }));
         }
-        if (properties.roughnessFactor !== undefined) {
-            babylonMaterial.sheen.roughness = properties.roughnessFactor;
+        if (properties.sheenRoughnessFactor !== undefined) {
+            babylonMaterial.sheen.roughness = properties.sheenRoughnessFactor;
         }
         else {
             babylonMaterial.sheen.roughness = 0;
@@ -2667,7 +2665,7 @@ var GLTFLoader = /** @class */ (function () {
                 });
             });
             return resultPromise;
-        }, function (error) {
+        }).catch(function (error) {
             if (!_this._disposed) {
                 _this._parent.onErrorObservable.notifyObservers(error);
                 _this._parent.onErrorObservable.clear();

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

@@ -3511,23 +3511,21 @@ var KHR_materials_sheen = /** @class */ (function () {
         }
         var promises = new Array();
         babylonMaterial.sheen.isEnabled = true;
-        if (properties.intensityFactor != undefined) {
-            babylonMaterial.sheen.intensity = properties.intensityFactor;
+        babylonMaterial.sheen.intensity = 1;
+        if (properties.sheenColorFactor != undefined) {
+            babylonMaterial.sheen.color = babylonjs_Materials_PBR_pbrMaterial__WEBPACK_IMPORTED_MODULE_0__["Color3"].FromArray(properties.sheenColorFactor);
         }
         else {
-            babylonMaterial.sheen.intensity = 0;
+            babylonMaterial.sheen.color = babylonjs_Materials_PBR_pbrMaterial__WEBPACK_IMPORTED_MODULE_0__["Color3"].Black();
         }
-        if (properties.colorFactor != undefined) {
-            babylonMaterial.sheen.color = babylonjs_Materials_PBR_pbrMaterial__WEBPACK_IMPORTED_MODULE_0__["Color3"].FromArray(properties.colorFactor);
-        }
-        if (properties.colorIntensityTexture) {
-            promises.push(this._loader.loadTextureInfoAsync(context + "/sheenTexture", properties.colorIntensityTexture, function (texture) {
-                texture.name = babylonMaterial.name + " (Sheen Intensity)";
+        if (properties.sheenTexture) {
+            promises.push(this._loader.loadTextureInfoAsync(context + "/sheenTexture", properties.sheenTexture, function (texture) {
+                texture.name = babylonMaterial.name + " (Sheen Color)";
                 babylonMaterial.sheen.texture = texture;
             }));
         }
-        if (properties.roughnessFactor !== undefined) {
-            babylonMaterial.sheen.roughness = properties.roughnessFactor;
+        if (properties.sheenRoughnessFactor !== undefined) {
+            babylonMaterial.sheen.roughness = properties.sheenRoughnessFactor;
         }
         else {
             babylonMaterial.sheen.roughness = 0;
@@ -5247,7 +5245,7 @@ var GLTFLoader = /** @class */ (function () {
                 });
             });
             return resultPromise;
-        }, function (error) {
+        }).catch(function (error) {
             if (!_this._disposed) {
                 _this._parent.onErrorObservable.notifyObservers(error);
                 _this._parent.onErrorObservable.clear();

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

@@ -738,10 +738,10 @@ var OBJFileLoader = /** @class */ (function () {
                 unwrappedPositionsForBabylon.push(wrappedPositionForBabylon[l].x, wrappedPositionForBabylon[l].y, wrappedPositionForBabylon[l].z);
                 unwrappedNormalsForBabylon.push(wrappedNormalsForBabylon[l].x, wrappedNormalsForBabylon[l].y, wrappedNormalsForBabylon[l].z);
                 unwrappedUVForBabylon.push(wrappedUvsForBabylon[l].x, wrappedUvsForBabylon[l].y); //z is an optional value not supported by BABYLON
-            }
-            if (_this._meshLoadOptions.ImportVertexColors === true) {
-                //Push the r, g, b, a values of each element in the unwrapped array
-                unwrappedColorsForBabylon.push(wrappedColorsForBabylon[l].r, wrappedColorsForBabylon[l].g, wrappedColorsForBabylon[l].b, wrappedColorsForBabylon[l].a);
+                if (_this._meshLoadOptions.ImportVertexColors === true) {
+                    //Push the r, g, b, a values of each element in the unwrapped array
+                    unwrappedColorsForBabylon.push(wrappedColorsForBabylon[l].r, wrappedColorsForBabylon[l].g, wrappedColorsForBabylon[l].b, wrappedColorsForBabylon[l].a);
+                }
             }
             // Reset arrays for the next new meshes
             wrappedPositionForBabylon = [];

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

@@ -967,10 +967,10 @@ var OBJFileLoader = /** @class */ (function () {
                 unwrappedPositionsForBabylon.push(wrappedPositionForBabylon[l].x, wrappedPositionForBabylon[l].y, wrappedPositionForBabylon[l].z);
                 unwrappedNormalsForBabylon.push(wrappedNormalsForBabylon[l].x, wrappedNormalsForBabylon[l].y, wrappedNormalsForBabylon[l].z);
                 unwrappedUVForBabylon.push(wrappedUvsForBabylon[l].x, wrappedUvsForBabylon[l].y); //z is an optional value not supported by BABYLON
-            }
-            if (_this._meshLoadOptions.ImportVertexColors === true) {
-                //Push the r, g, b, a values of each element in the unwrapped array
-                unwrappedColorsForBabylon.push(wrappedColorsForBabylon[l].r, wrappedColorsForBabylon[l].g, wrappedColorsForBabylon[l].b, wrappedColorsForBabylon[l].a);
+                if (_this._meshLoadOptions.ImportVertexColors === true) {
+                    //Push the r, g, b, a values of each element in the unwrapped array
+                    unwrappedColorsForBabylon.push(wrappedColorsForBabylon[l].r, wrappedColorsForBabylon[l].g, wrappedColorsForBabylon[l].b, wrappedColorsForBabylon[l].a);
+                }
             }
             // Reset arrays for the next new meshes
             wrappedPositionForBabylon = [];
@@ -4891,23 +4891,21 @@ var KHR_materials_sheen = /** @class */ (function () {
         }
         var promises = new Array();
         babylonMaterial.sheen.isEnabled = true;
-        if (properties.intensityFactor != undefined) {
-            babylonMaterial.sheen.intensity = properties.intensityFactor;
+        babylonMaterial.sheen.intensity = 1;
+        if (properties.sheenColorFactor != undefined) {
+            babylonMaterial.sheen.color = babylonjs_Materials_PBR_pbrMaterial__WEBPACK_IMPORTED_MODULE_0__["Color3"].FromArray(properties.sheenColorFactor);
         }
         else {
-            babylonMaterial.sheen.intensity = 0;
-        }
-        if (properties.colorFactor != undefined) {
-            babylonMaterial.sheen.color = babylonjs_Materials_PBR_pbrMaterial__WEBPACK_IMPORTED_MODULE_0__["Color3"].FromArray(properties.colorFactor);
+            babylonMaterial.sheen.color = babylonjs_Materials_PBR_pbrMaterial__WEBPACK_IMPORTED_MODULE_0__["Color3"].Black();
         }
-        if (properties.colorIntensityTexture) {
-            promises.push(this._loader.loadTextureInfoAsync(context + "/sheenTexture", properties.colorIntensityTexture, function (texture) {
-                texture.name = babylonMaterial.name + " (Sheen Intensity)";
+        if (properties.sheenTexture) {
+            promises.push(this._loader.loadTextureInfoAsync(context + "/sheenTexture", properties.sheenTexture, function (texture) {
+                texture.name = babylonMaterial.name + " (Sheen Color)";
                 babylonMaterial.sheen.texture = texture;
             }));
         }
-        if (properties.roughnessFactor !== undefined) {
-            babylonMaterial.sheen.roughness = properties.roughnessFactor;
+        if (properties.sheenRoughnessFactor !== undefined) {
+            babylonMaterial.sheen.roughness = properties.sheenRoughnessFactor;
         }
         else {
             babylonMaterial.sheen.roughness = 0;
@@ -6627,7 +6625,7 @@ var GLTFLoader = /** @class */ (function () {
                 });
             });
             return resultPromise;
-        }, function (error) {
+        }).catch(function (error) {
             if (!_this._disposed) {
                 _this._parent.onErrorObservable.notifyObservers(error);
                 _this._parent.onErrorObservable.clear();

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

@@ -0,0 +1,135 @@
+/// <reference types="react" />
+declare module SANDBOX {
+    export class GlobalState {
+        currentScene: BABYLON.Scene;
+        onSceneLoaded: BABYLON.Observable<{
+            scene: BABYLON.Scene;
+            filename: string;
+        }>;
+        onError: BABYLON.Observable<{
+            scene?: BABYLON.Scene | undefined;
+            message?: string | undefined;
+        }>;
+        onEnvironmentChanged: BABYLON.Observable<string>;
+        onRequestClickInterceptor: BABYLON.Observable<void>;
+        onClickInterceptorClicked: BABYLON.Observable<void>;
+        filesInput: BABYLON.FilesInput;
+        isDebugLayerEnabled: boolean;
+        showDebugLayer(): void;
+        hideDebugLayer(): void;
+    }
+}
+declare module SANDBOX {
+    export class LocalStorageHelper {
+        static ReadLocalStorageValue(key: string, defaultValue: number): number;
+    }
+}
+declare module SANDBOX {
+    export class EnvironmentTools {
+        static SkyboxPath: string;
+        static Skyboxes: string[];
+        static SkyboxesNames: string[];
+        static LoadSkyboxPathTexture(scene: BABYLON.Scene): BABYLON.HDRCubeTexture | BABYLON.CubeTexture;
+        static HookWithEnvironmentChange(globalState: GlobalState): void;
+    }
+}
+declare module SANDBOX {
+    interface IRenderingZoneProps {
+        globalState: GlobalState;
+        assetUrl?: string;
+        cameraPosition?: BABYLON.Vector3;
+        expanded: boolean;
+    }
+    export class RenderingZone extends React.Component<IRenderingZoneProps> {
+        private _currentPluginName;
+        private _engine;
+        private _scene;
+        private _canvas;
+        constructor(props: IRenderingZoneProps);
+        initEngine(): void;
+        prepareCamera(): void;
+        handleErrors(): void;
+        prepareLighting(): void;
+        onSceneLoaded(filename: string): void;
+        loadAssetFromUrl(): void;
+        loadAsset(): void;
+        componentDidMount(): void;
+        shouldComponentUpdate(nextProps: IRenderingZoneProps): boolean;
+        render(): JSX.Element;
+    }
+}
+declare module SANDBOX {
+    interface IFooterButtonProps {
+        globalState: GlobalState;
+        enabled: boolean;
+        onClick: () => void;
+        icon: any;
+        label: string;
+    }
+    export class FooterButton extends React.Component<IFooterButtonProps> {
+        render(): JSX.Element | null;
+    }
+}
+declare module SANDBOX {
+    interface IDropUpButtonProps {
+        globalState: GlobalState;
+        enabled: boolean;
+        icon: any;
+        label: string;
+        options: string[];
+        onOptionPicked: (option: string) => void;
+    }
+    export class DropUpButton extends React.Component<IDropUpButtonProps, {
+        isOpen: boolean;
+    }> {
+        private _onClickInterceptorClickedObserver;
+        constructor(props: IDropUpButtonProps);
+        componentWillUnmount(): void;
+        switchDropUp(): void;
+        clickOption(option: string): void;
+        render(): JSX.Element | null;
+    }
+}
+declare module SANDBOX {
+    interface IFooterFileButtonProps {
+        globalState: GlobalState;
+        enabled: boolean;
+        icon: any;
+        label: string;
+        onFilesPicked: (evt: Event, files: FileList | null) => void;
+    }
+    export class FooterFileButton extends React.Component<IFooterFileButtonProps> {
+        onFilePicked(evt: React.ChangeEvent<HTMLInputElement>): void;
+        render(): JSX.Element | null;
+    }
+}
+declare module SANDBOX {
+    interface IFooterProps {
+        globalState: GlobalState;
+    }
+    export class Footer extends React.Component<IFooterProps> {
+        constructor(props: IFooterProps);
+        showInspector(): void;
+        render(): JSX.Element;
+    }
+}
+declare module SANDBOX {
+    interface ISandboxProps {
+    }
+    export class Sandbox extends React.Component<ISandboxProps, {
+        isFooterVisible: boolean;
+        errorMessage: string;
+    }> {
+        private _globalState;
+        private _assetUrl?;
+        private _cameraPosition?;
+        private _logoRef;
+        private _dropTextRef;
+        private _clickInterceptorRef;
+        constructor(props: ISandboxProps);
+        checkUrl(): void;
+        componentDidUpdate(): void;
+        render(): JSX.Element;
+        static Show(hostElement: HTMLElement): void;
+    }
+}

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

@@ -0,0 +1,298 @@
+/// <reference types="react" />
+declare module "babylonjs-sandbox/globalState" {
+    import { Observable } from 'babylonjs/Misc/observable';
+    import { Scene } from 'babylonjs/scene';
+    import { FilesInput } from 'babylonjs/Misc/filesInput';
+    export class GlobalState {
+        currentScene: Scene;
+        onSceneLoaded: Observable<{
+            scene: Scene;
+            filename: string;
+        }>;
+        onError: Observable<{
+            scene?: Scene | undefined;
+            message?: string | undefined;
+        }>;
+        onEnvironmentChanged: Observable<string>;
+        onRequestClickInterceptor: Observable<void>;
+        onClickInterceptorClicked: Observable<void>;
+        filesInput: FilesInput;
+        isDebugLayerEnabled: boolean;
+        showDebugLayer(): void;
+        hideDebugLayer(): void;
+    }
+}
+declare module "babylonjs-sandbox/tools/localStorageHelper" {
+    export class LocalStorageHelper {
+        static ReadLocalStorageValue(key: string, defaultValue: number): number;
+    }
+}
+declare module "babylonjs-sandbox/tools/environmentTools" {
+    import { HDRCubeTexture } from 'babylonjs/Materials/Textures/hdrCubeTexture';
+    import { CubeTexture } from 'babylonjs/Materials/Textures/cubeTexture';
+    import { Scene } from 'babylonjs/scene';
+    import { GlobalState } from "babylonjs-sandbox/globalState";
+    export class EnvironmentTools {
+        static SkyboxPath: string;
+        static Skyboxes: string[];
+        static SkyboxesNames: string[];
+        static LoadSkyboxPathTexture(scene: Scene): HDRCubeTexture | CubeTexture;
+        static HookWithEnvironmentChange(globalState: GlobalState): void;
+    }
+}
+declare module "babylonjs-sandbox/components/renderingZone" {
+    import * as React from "react";
+    import { GlobalState } from "babylonjs-sandbox/globalState";
+    import { Vector3 } from 'babylonjs/Maths/math.vector';
+    interface IRenderingZoneProps {
+        globalState: GlobalState;
+        assetUrl?: string;
+        cameraPosition?: Vector3;
+        expanded: boolean;
+    }
+    export class RenderingZone extends React.Component<IRenderingZoneProps> {
+        private _currentPluginName;
+        private _engine;
+        private _scene;
+        private _canvas;
+        constructor(props: IRenderingZoneProps);
+        initEngine(): void;
+        prepareCamera(): void;
+        handleErrors(): void;
+        prepareLighting(): void;
+        onSceneLoaded(filename: string): void;
+        loadAssetFromUrl(): void;
+        loadAsset(): void;
+        componentDidMount(): void;
+        shouldComponentUpdate(nextProps: IRenderingZoneProps): boolean;
+        render(): JSX.Element;
+    }
+}
+declare module "babylonjs-sandbox/components/footerButton" {
+    import * as React from "react";
+    import { GlobalState } from "babylonjs-sandbox/globalState";
+    interface IFooterButtonProps {
+        globalState: GlobalState;
+        enabled: boolean;
+        onClick: () => void;
+        icon: any;
+        label: string;
+    }
+    export class FooterButton extends React.Component<IFooterButtonProps> {
+        render(): JSX.Element | null;
+    }
+}
+declare module "babylonjs-sandbox/components/dropUpButton" {
+    import * as React from "react";
+    import { GlobalState } from "babylonjs-sandbox/globalState";
+    interface IDropUpButtonProps {
+        globalState: GlobalState;
+        enabled: boolean;
+        icon: any;
+        label: string;
+        options: string[];
+        onOptionPicked: (option: string) => void;
+    }
+    export class DropUpButton extends React.Component<IDropUpButtonProps, {
+        isOpen: boolean;
+    }> {
+        private _onClickInterceptorClickedObserver;
+        constructor(props: IDropUpButtonProps);
+        componentWillUnmount(): void;
+        switchDropUp(): void;
+        clickOption(option: string): void;
+        render(): JSX.Element | null;
+    }
+}
+declare module "babylonjs-sandbox/components/footerFileButton" {
+    import * as React from "react";
+    import { GlobalState } from "babylonjs-sandbox/globalState";
+    interface IFooterFileButtonProps {
+        globalState: GlobalState;
+        enabled: boolean;
+        icon: any;
+        label: string;
+        onFilesPicked: (evt: Event, files: FileList | null) => void;
+    }
+    export class FooterFileButton extends React.Component<IFooterFileButtonProps> {
+        onFilePicked(evt: React.ChangeEvent<HTMLInputElement>): void;
+        render(): JSX.Element | null;
+    }
+}
+declare module "babylonjs-sandbox/components/footer" {
+    import * as React from "react";
+    import { GlobalState } from "babylonjs-sandbox/globalState";
+    interface IFooterProps {
+        globalState: GlobalState;
+    }
+    export class Footer extends React.Component<IFooterProps> {
+        constructor(props: IFooterProps);
+        showInspector(): void;
+        render(): JSX.Element;
+    }
+}
+declare module "babylonjs-sandbox/sandbox" {
+    import * as React from "react";
+    interface ISandboxProps {
+    }
+    export class Sandbox extends React.Component<ISandboxProps, {
+        isFooterVisible: boolean;
+        errorMessage: string;
+    }> {
+        private _globalState;
+        private _assetUrl?;
+        private _cameraPosition?;
+        private _logoRef;
+        private _dropTextRef;
+        private _clickInterceptorRef;
+        constructor(props: ISandboxProps);
+        checkUrl(): void;
+        componentDidUpdate(): void;
+        render(): JSX.Element;
+        static Show(hostElement: HTMLElement): void;
+    }
+}
+declare module "babylonjs-sandbox/index" {
+    export * from "babylonjs-sandbox/sandbox";
+}
+declare module "babylonjs-sandbox/legacy/legacy" {
+    export * from "babylonjs-sandbox/index";
+}
+declare module "babylonjs-sandbox" {
+    export * from "babylonjs-sandbox/legacy/legacy";
+}
+/// <reference types="react" />
+declare module SANDBOX {
+    export class GlobalState {
+        currentScene: BABYLON.Scene;
+        onSceneLoaded: BABYLON.Observable<{
+            scene: BABYLON.Scene;
+            filename: string;
+        }>;
+        onError: BABYLON.Observable<{
+            scene?: BABYLON.Scene | undefined;
+            message?: string | undefined;
+        }>;
+        onEnvironmentChanged: BABYLON.Observable<string>;
+        onRequestClickInterceptor: BABYLON.Observable<void>;
+        onClickInterceptorClicked: BABYLON.Observable<void>;
+        filesInput: BABYLON.FilesInput;
+        isDebugLayerEnabled: boolean;
+        showDebugLayer(): void;
+        hideDebugLayer(): void;
+    }
+}
+declare module SANDBOX {
+    export class LocalStorageHelper {
+        static ReadLocalStorageValue(key: string, defaultValue: number): number;
+    }
+}
+declare module SANDBOX {
+    export class EnvironmentTools {
+        static SkyboxPath: string;
+        static Skyboxes: string[];
+        static SkyboxesNames: string[];
+        static LoadSkyboxPathTexture(scene: BABYLON.Scene): BABYLON.HDRCubeTexture | BABYLON.CubeTexture;
+        static HookWithEnvironmentChange(globalState: GlobalState): void;
+    }
+}
+declare module SANDBOX {
+    interface IRenderingZoneProps {
+        globalState: GlobalState;
+        assetUrl?: string;
+        cameraPosition?: BABYLON.Vector3;
+        expanded: boolean;
+    }
+    export class RenderingZone extends React.Component<IRenderingZoneProps> {
+        private _currentPluginName;
+        private _engine;
+        private _scene;
+        private _canvas;
+        constructor(props: IRenderingZoneProps);
+        initEngine(): void;
+        prepareCamera(): void;
+        handleErrors(): void;
+        prepareLighting(): void;
+        onSceneLoaded(filename: string): void;
+        loadAssetFromUrl(): void;
+        loadAsset(): void;
+        componentDidMount(): void;
+        shouldComponentUpdate(nextProps: IRenderingZoneProps): boolean;
+        render(): JSX.Element;
+    }
+}
+declare module SANDBOX {
+    interface IFooterButtonProps {
+        globalState: GlobalState;
+        enabled: boolean;
+        onClick: () => void;
+        icon: any;
+        label: string;
+    }
+    export class FooterButton extends React.Component<IFooterButtonProps> {
+        render(): JSX.Element | null;
+    }
+}
+declare module SANDBOX {
+    interface IDropUpButtonProps {
+        globalState: GlobalState;
+        enabled: boolean;
+        icon: any;
+        label: string;
+        options: string[];
+        onOptionPicked: (option: string) => void;
+    }
+    export class DropUpButton extends React.Component<IDropUpButtonProps, {
+        isOpen: boolean;
+    }> {
+        private _onClickInterceptorClickedObserver;
+        constructor(props: IDropUpButtonProps);
+        componentWillUnmount(): void;
+        switchDropUp(): void;
+        clickOption(option: string): void;
+        render(): JSX.Element | null;
+    }
+}
+declare module SANDBOX {
+    interface IFooterFileButtonProps {
+        globalState: GlobalState;
+        enabled: boolean;
+        icon: any;
+        label: string;
+        onFilesPicked: (evt: Event, files: FileList | null) => void;
+    }
+    export class FooterFileButton extends React.Component<IFooterFileButtonProps> {
+        onFilePicked(evt: React.ChangeEvent<HTMLInputElement>): void;
+        render(): JSX.Element | null;
+    }
+}
+declare module SANDBOX {
+    interface IFooterProps {
+        globalState: GlobalState;
+    }
+    export class Footer extends React.Component<IFooterProps> {
+        constructor(props: IFooterProps);
+        showInspector(): void;
+        render(): JSX.Element;
+    }
+}
+declare module SANDBOX {
+    interface ISandboxProps {
+    }
+    export class Sandbox extends React.Component<ISandboxProps, {
+        isFooterVisible: boolean;
+        errorMessage: string;
+    }> {
+        private _globalState;
+        private _assetUrl?;
+        private _cameraPosition?;
+        private _logoRef;
+        private _dropTextRef;
+        private _clickInterceptorRef;
+        constructor(props: ISandboxProps);
+        checkUrl(): void;
+        componentDidUpdate(): void;
+        render(): JSX.Element;
+        static Show(hostElement: HTMLElement): void;
+    }
+}

dist/preview release/sandbox/package.json

@@ -0,0 +1,27 @@
+{
+    "author": {
+        "name": "David CATUHE"
+    },
+    "name": "babylonjs-sandbox",
+    "description": "The Babylon.js sandbox",
+    "version": "4.2.0-alpha.20",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/BabylonJS/Babylon.js.git"
+    },
+    "license": "Apache-2.0",
+    "dependencies": {
+        "babylonjs": "4.2.0-alpha.20"
+    },
+    "files": [
+        "babylon.sandbox.max.js.map",
+        "babylon.sandbox.max.js",
+        "babylon.sandbox.js",
+        "babylon.sandbox.module.d.ts",
+        "readme.md",
+        "package.json"
+    ],
+    "engines": {
+        "node": "*"
+    }
+}

dist/preview release/sandbox/readme-es6.md

@@ -0,0 +1,3 @@
+# Babylon.js Sandbox
+
+An extension to easily create a full page viewer (ala sandbox.babylonjs.com)

dist/preview release/sandbox/readme.md

@@ -0,0 +1,16 @@
+# Babylon.js Sandbox
+
+An extension to easily create a full page viewer (ala sandbox.babylonjs.com)
+
+## Usage
+### Online method
+Call the method `Show` of the `BABYLON.Sandbox` class: 
+```
+BABYLON.Sandbox.Show({hostElement: document.getElementById("host")});
+```
+
+### Offline method
+If you don't have access to internet, the node editor should be imported manually in your HTML page :
+```
+<script src="babylon.sandbox.js" />
+``` 

dist/preview release/what's new.md

@@ -231,6 +231,7 @@
 - Fixed `DracoCompression` to not load empty data into attributes ([bghgary](https://github.com/bghgary))
 - Fixed `Mesh.subdivide` where one face could be lost depending on the number of subdivision ([Popov72](https://github.com/Popov72))
 - Fixed `AssetContainer.instantiateModelsToScene` with cloneMaterials=true and MultiMaterials to properly set the cloned submaterials ([ghempton](https://github.com/ghempton))
+- Fix crash when loading a .obj file with vertex colors ([Popov72](https://github.com/Popov72))
 
 ## Breaking changes
 

inspector/src/components/actionTabs/tabs/propertyGrids/cameras/commonCameraPropertyGridComponent.tsx

@@ -49,6 +49,7 @@ export class CommonCameraPropertyGridComponent extends React.Component<ICommonCa
                     <FloatLineComponent lockObject={this.props.lockObject} label="Near plane" target={camera} propertyName="minZ" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <FloatLineComponent lockObject={this.props.lockObject} label="Far plane" target={camera} propertyName="maxZ" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <SliderLineComponent label="Inertia" target={camera} propertyName="inertia" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <FloatLineComponent isInteger lockObject={this.props.lockObject} label="Layer mask" target={camera} propertyName="layerMask" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <OptionsLineComponent label="Mode" options={modeOptions} target={camera} propertyName="mode" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={(value) => this.setState({ mode: value })} />
                     {
                         camera.mode === Camera.PERSPECTIVE_CAMERA &&

inspector/src/components/actionTabs/tabs/propertyGrids/meshes/meshPropertyGridComponent.tsx

@@ -395,6 +395,7 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
                         <CheckBoxLineComponent label="Infinite distance" target={mesh} propertyName="infiniteDistance" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     }
                     <SliderLineComponent label="Rendering group ID" decimalCount={0} target={mesh} propertyName="renderingGroupId" minimum={RenderingManager.MIN_RENDERINGGROUPS} maximum={RenderingManager.MAX_RENDERINGGROUPS - 1} step={1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />                    
+                    <FloatLineComponent isInteger lockObject={this.props.lockObject} label="Layer mask" target={mesh} propertyName="layerMask" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 </LineContainerComponent>
                 {
                     mesh.morphTargetManager != null &&

inspector/src/components/globalState.ts

@@ -11,6 +11,7 @@ import { PropertyChangedEvent } from "./propertyChangedEvent";
 import { ReplayRecorder } from './replayRecorder';
 import { DataStorage } from 'babylonjs/Misc/dataStorage';
 import { CodeChangedEvent } from './codeChangedEvent';
+import { Inspector } from '../inspector';
 
 export class GlobalState {
     public onSelectionChangedObservable: Observable<any>;
@@ -110,6 +111,7 @@ export class GlobalState {
             this.onValidationResultsUpdatedObservable.notifyObservers(results);
 
             if (results.issues.numErrors || results.issues.numWarnings) {
+                Inspector.MarkLineContainerTitleForHighlighting("GLTF VALIDATION");
                 this.onTabChangedObservable.notifyObservers(3);
             }
         });

loaders/src/OBJ/objFileLoader.ts

@@ -449,10 +449,10 @@ export class OBJFileLoader implements ISceneLoaderPluginAsync, ISceneLoaderPlugi
                 unwrappedPositionsForBabylon.push(wrappedPositionForBabylon[l].x, wrappedPositionForBabylon[l].y, wrappedPositionForBabylon[l].z);
                 unwrappedNormalsForBabylon.push(wrappedNormalsForBabylon[l].x, wrappedNormalsForBabylon[l].y, wrappedNormalsForBabylon[l].z);
                 unwrappedUVForBabylon.push(wrappedUvsForBabylon[l].x, wrappedUvsForBabylon[l].y); //z is an optional value not supported by BABYLON
-            }
-            if (this._meshLoadOptions.ImportVertexColors === true) {
-                //Push the r, g, b, a values of each element in the unwrapped array
-                unwrappedColorsForBabylon.push(wrappedColorsForBabylon[l].r, wrappedColorsForBabylon[l].g, wrappedColorsForBabylon[l].b, wrappedColorsForBabylon[l].a);
+                if (this._meshLoadOptions.ImportVertexColors === true) {
+                    //Push the r, g, b, a values of each element in the unwrapped array
+                    unwrappedColorsForBabylon.push(wrappedColorsForBabylon[l].r, wrappedColorsForBabylon[l].g, wrappedColorsForBabylon[l].b, wrappedColorsForBabylon[l].a);
+                }
             }
             // Reset arrays for the next new meshes
             wrappedPositionForBabylon = [];

sandbox/README-ES6.md

@@ -0,0 +1,3 @@
+# Babylon.js Sandbox
+
+An extension to easily create a full page viewer (ala sandbox.babylonjs.com)

sandbox/README.md

@@ -0,0 +1,16 @@
+# Babylon.js Sandbox
+
+An extension to easily create a full page viewer (ala sandbox.babylonjs.com)
+
+## Usage
+### Online method
+Call the method `Show` of the `BABYLON.Sandbox` class: 
+```
+BABYLON.Sandbox.Show({hostElement: document.getElementById("host")});
+```
+
+### Offline method
+If you don't have access to internet, the node editor should be imported manually in your HTML page :
+```
+<script src="babylon.sandbox.js" />
+``` 

sandbox/index.css

@@ -174,29 +174,6 @@ a:visited {
     right: 30px;
 }
 
-#loadingText {
-    width: 100%;
-    height: 60px;
-    position: absolute;
-    top: 50%;
-    left: 0;
-    margin-top: -30px;
-    color: white;
-    text-align: center;
-    padding-top: 10px;
-    font-size: 30px;
-    transition: transform 0.25s ease-in-out;
-    -webkit-transition: -webkit-transform 0.25s ease-in-out;
-    z-index: 3;
-    cursor: default;
-    background-color: var(--footer-background);
-}
-
-.loadingText {
-    transform: translateX(120%);
-    -webkit-transform: translateX(120%);
-}
-
 #errorZone {
     display:none;
     position: absolute;

sandbox/public/index-local.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+    <title>Babylon.js Sandbox - View glTF, glb, obj and babylon files</title>
+    <meta name="description" content="Viewer for glTF, glb, obj and babylon files powered by Babylon.js" />
+    <meta name="keywords"
+        content="Babylon.js, Babylon, BabylonJS, glTF, glb, obj, viewer, online viewer, 3D model viewer, 3D, webgl" />
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
+    <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
+    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+
+    <script src="../../Tools/DevLoader/BabylonLoader.js"></script>
+    
+    <style>
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+            padding: 0;
+            margin: 0;
+            overflow: hidden;
+        }
+
+        #host-element {
+            width: 100%;
+            height: 100%;            
+        }
+    </style>
+</head>
+
+<body>
+    <div id="host-element">
+    </div>
+    <script>
+        // Load the scripts + map file to allow vscode debug.
+        BABYLONDEVTOOLS.Loader
+            .require("index.js")
+            .load(() => {
+            });
+    </script>
+</body>
+
+</html>

sandbox/public/index.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+    <title>Babylon.js Sandbox - View glTF, glb, obj and babylon files</title>
+    <meta name="description" content="Viewer for glTF, glb, obj and babylon files powered by Babylon.js" />
+    <meta name="keywords"
+        content="Babylon.js, Babylon, BabylonJS, glTF, glb, obj, viewer, online viewer, 3D model viewer, 3D, webgl" />
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
+    <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
+    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+
+    <script src="https://preview.babylonjs.com/ammo.js"></script>
+    <script src="https://preview.babylonjs.com/cannon.js"></script>
+    <script src="https://preview.babylonjs.com/Oimo.js"></script>
+    <script src="https://preview.babylonjs.com/libktx.js"></script>
+    <script src="https://preview.babylonjs.com/babylon.js"></script>
+    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.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/materialsLibrary/babylonjs.materials.min.js"></script>
+
+    
+    <script src="https://preview.babylonjs.com/sandbox/babylon.sandbox.js"></script>
+    
+    <style>
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+            padding: 0;
+            margin: 0;
+            overflow: hidden;
+        }
+
+        #host-element {
+            width: 100%;
+            height: 100%;               
+            padding: 0;
+            margin: 0;
+            overflow: hidden;         
+        }
+    </style>
+</head>
+
+<body>    
+    <div id="host-element">
+    </div>
+    <script src="index.js"></script>
+</body>
+
+</html>

sandbox/public/index.js

@@ -0,0 +1,3 @@
+var hostElement = document.getElementById("host-element");
+
+BABYLON.Sandbox.Show(hostElement);

sandbox/src/components/dropUpButton.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { GlobalState } from '../globalState';
+import { Nullable } from 'babylonjs/types';
+import { Observer } from 'babylonjs/Misc/observable';
+
+
+interface IDropUpButtonProps {
+    globalState: GlobalState;
+    enabled: boolean;
+    icon: any;
+    label: string;
+    options: string[];
+    onOptionPicked: (option: string) => void;
+}
+
+export class DropUpButton extends React.Component<IDropUpButtonProps, {isOpen: boolean}> {
+    private _onClickInterceptorClickedObserver: Nullable<Observer<void>>;
+
+    public constructor(props: IDropUpButtonProps) {    
+        super(props);
+
+        this.state = {isOpen: false};
+
+        this._onClickInterceptorClickedObserver = props.globalState.onClickInterceptorClicked.add(() => {
+            this.switchDropUp();
+        });
+    }
+
+    componentWillUnmount() {
+        this.props.globalState.onClickInterceptorClicked.remove(this._onClickInterceptorClickedObserver);
+    }
+
+    switchDropUp() {
+        this.props.globalState.onRequestClickInterceptor.notifyObservers();
+        this.setState({isOpen: !this.state.isOpen});
+    }
+
+    clickOption(option: string) {
+        this.switchDropUp()
+        this.props.onOptionPicked(option);
+    }
+
+    public render() {
+        if (!this.props.enabled) {
+            return null;
+        }
+
+        return (
+            <>
+                <div className="button" onClick={() => this.switchDropUp()}>
+                    <img src={this.props.icon} alt={this.props.label} title={this.props.label}  />
+                </div>
+                {
+                    this.state.isOpen &&
+                    <div className="dropup-content">
+                    {
+                        this.props.options.map(o => {
+                            return(
+                                <div key={o} onClick={() => this.clickOption(o)}>
+                                    {o}
+                                </div>
+                            )
+                        })
+                    }
+                    </div>
+                }
+            </>
+        )
+    }
+}

sandbox/src/components/footer.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { GlobalState } from '../globalState';
+import { FooterButton } from './footerButton';
+import { DropUpButton } from './dropUpButton';
+import { EnvironmentTools } from '../tools/environmentTools';
+import { FooterFileButton } from './footerFileButton';
+
+require("../scss/footer.scss");
+var babylonIdentity = require("../img/babylon-identity.svg");
+var iconEdit = require("../img/icon-edit.svg");
+var iconOpen = require("../img/icon-open.svg");
+var iconIBL = require("../img/icon-ibl.svg");
+
+interface IFooterProps {
+    globalState: GlobalState;
+}
+
+export class Footer extends React.Component<IFooterProps> {
+    
+        
+    public constructor(props: IFooterProps) {    
+        super(props);
+        props.globalState.onSceneLoaded.add(info => {
+            this.forceUpdate();
+        });
+    }
+
+    showInspector() {
+        if (this.props.globalState.currentScene) {
+            if (this.props.globalState.currentScene.debugLayer.isVisible()) {
+                this.props.globalState.hideDebugLayer();
+            }
+            else {
+                this.props.globalState.showDebugLayer();
+            }
+        }
+    }
+
+    render() {
+        return (            
+            <div id="footer" className="footer">
+                <div className="footerLeft">
+                    <img id="logoImg" src={babylonIdentity}/>
+                </div>
+                <div className="footerRight">
+                    <FooterFileButton globalState={this.props.globalState} 
+                                enabled={true}
+                                icon={iconOpen}
+                                onFilesPicked={(evt, files) => {
+                                    this.props.globalState.filesInput.loadFiles(evt);
+                                }}
+                                label="Open your scene from your hard drive (.babylon, .gltf, .glb, .obj)"/>
+                    <DropUpButton globalState={this.props.globalState} 
+                                    icon={iconIBL}
+                                    label="Select environment"
+                                    options={EnvironmentTools.SkyboxesNames}
+                                    onOptionPicked={option => this.props.globalState.onEnvironmentChanged.notifyObservers(option)}
+                                    enabled={!!this.props.globalState.currentScene}/>
+                    <FooterButton globalState={this.props.globalState} 
+                                    icon={iconEdit}
+                                    label="Display inspector"
+                                    onClick={() => this.showInspector()}
+                                    enabled={!!this.props.globalState.currentScene}/>
+                </div>
+            </div>
+        )
+    }
+}

sandbox/src/components/footerButton.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { GlobalState } from '../globalState';
+
+interface IFooterButtonProps {
+    globalState: GlobalState;
+    enabled: boolean;
+    onClick: () => void;
+    icon: any;
+    label: string;
+}
+
+export class FooterButton extends React.Component<IFooterButtonProps> {
+
+    public render() {
+        if (!this.props.enabled) {
+            return null;
+        }
+
+        return (
+            <div className="button" onClick={() => this.props.onClick()}>
+                <img src={this.props.icon} alt={this.props.label} title={this.props.label} />
+            </div>
+        )
+    }
+}

sandbox/src/components/footerFileButton.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { GlobalState } from '../globalState';
+
+interface IFooterFileButtonProps {
+    globalState: GlobalState;
+    enabled: boolean;
+    icon: any;
+    label: string;
+    onFilesPicked: (evt: Event,files: FileList | null) => void;
+}
+
+export class FooterFileButton extends React.Component<IFooterFileButtonProps> {
+
+    onFilePicked(evt: React.ChangeEvent<HTMLInputElement>) {
+        this.props.onFilesPicked(evt.nativeEvent, evt.target.files);
+    }
+
+    public render() {
+        if (!this.props.enabled) {
+            return null;
+        }
+
+        return (
+            <div className="custom-upload" title={this.props.label}>
+                <img src={this.props.icon}/>
+                <input type="file" id="files" multiple onChange={evt => this.onFilePicked(evt)}/>
+            </div>
+        )
+    }
+}

sandbox/src/components/renderingZone.tsx

@@ -0,0 +1,271 @@
+import * as React from "react";
+import { GlobalState } from '../globalState';
+
+import { Engine } from 'babylonjs/Engines/engine';
+import { SceneLoader } from 'babylonjs/Loading/sceneLoader';
+import { GLTFFileLoader } from "babylonjs-loaders/glTF/glTFFileLoader";
+import { Scene } from 'babylonjs/scene';
+import { Vector3 } from 'babylonjs/Maths/math.vector';
+import { ArcRotateCamera } from 'babylonjs/Cameras/arcRotateCamera';
+import { FramingBehavior } from 'babylonjs/Behaviors/Cameras/framingBehavior';
+import { EnvironmentTools } from '../tools/environmentTools';
+import { Tools } from 'babylonjs/Misc/tools';
+import { FilesInput } from 'babylonjs/Misc/filesInput';
+import {Animation} from 'babylonjs/Animations/animation';
+
+require("../scss/renderingZone.scss");
+
+interface IRenderingZoneProps {
+    globalState: GlobalState;
+    assetUrl?: string;
+    cameraPosition?: Vector3;
+    expanded: boolean;
+}
+
+export class RenderingZone extends React.Component<IRenderingZoneProps> {
+    private _currentPluginName: string;
+    private _engine: Engine;
+    private _scene: Scene;
+    private _canvas: HTMLCanvasElement;
+
+    public constructor(props: IRenderingZoneProps) {
+        super(props);
+    }
+
+    initEngine() {
+        this._canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
+        this._engine = new Engine(this._canvas, true, { premultipliedAlpha: false, preserveDrawingBuffer: true });
+   
+        this._engine.loadingUIBackgroundColor = "#2A2342";
+
+        // Resize
+        window.addEventListener("resize", () => {
+            this._engine.resize();
+        });
+
+        this.loadAsset();
+
+        // File inputs
+        let filesInput = new FilesInput(this._engine, null, 
+            (sceneFile: File, scene: Scene) => {
+                this._scene = scene;
+                this.onSceneLoaded(sceneFile.name);
+            },
+            null, null, null, 
+            () => {
+                Tools.ClearLogCache();
+                if (this._scene) {
+                    this.props.globalState.isDebugLayerEnabled = this.props.globalState.currentScene.debugLayer.isVisible();
+
+                    if (this.props.globalState.isDebugLayerEnabled) {
+                        this._scene.debugLayer.hide();
+                    }
+                }
+            }, null, null);
+
+        filesInput.onProcessFileCallback = (file, name, extension) => {
+            if (filesInput.filesToLoad && filesInput.filesToLoad.length === 1 && extension) {
+                if (extension.toLowerCase() === "dds" ||
+                    extension.toLowerCase() === "env" ||
+                    extension.toLowerCase() === "hdr") {
+                    FilesInput.FilesToLoad[name] = file;
+                    EnvironmentTools.SkyboxPath = "file:" + (file as any).correctName;
+                    return false;
+                }
+            }
+            return true;
+        };
+        filesInput.monitorElementForDragNDrop(this._canvas);
+
+        this.props.globalState.filesInput = filesInput;
+    }
+
+    prepareCamera() {
+        let camera: ArcRotateCamera;
+
+        // Attach camera to canvas inputs
+        if (!this._scene.activeCamera || this._scene.lights.length === 0) {
+            this._scene.createDefaultCamera(true);
+
+            camera = this._scene.activeCamera! as ArcRotateCamera;
+
+            if (this.props.cameraPosition) {
+                camera.setPosition(this.props.cameraPosition);
+            }
+            else {
+                if (this._currentPluginName === "gltf") {
+                    // glTF assets use a +Z forward convention while the default camera faces +Z. Rotate the camera to look at the front of the asset.
+                    camera.alpha += Math.PI;
+                }
+
+                // Enable camera's behaviors
+                camera.useFramingBehavior = true;
+
+                var framingBehavior = camera.getBehaviorByName("Framing") as FramingBehavior;
+                framingBehavior.framingTime = 0;
+                framingBehavior.elevationReturnTime = -1;
+
+                if (this._scene.meshes.length) {
+                   camera.lowerRadiusLimit = null;
+
+                    var worldExtends = this._scene.getWorldExtends(function (mesh) {
+                        return mesh.isVisible && mesh.isEnabled();
+                    });
+                    framingBehavior.zoomOnBoundingInfo(worldExtends.min, worldExtends.max);
+                }
+            }
+
+            camera.pinchPrecision = 200 / camera.radius;
+            camera.upperRadiusLimit = 5 * camera.radius;
+
+            camera.wheelDeltaPercentage = 0.01;
+            camera.pinchDeltaPercentage = 0.01;
+        }
+
+        this._scene.activeCamera!.attachControl(this._canvas);     
+    }
+
+    handleErrors() {
+        // In case of error during loading, meshes will be empty and clearColor is set to red
+        if (this._scene.meshes.length === 0 && this._scene.clearColor.r === 1 && this._scene.clearColor.g === 0 && this._scene.clearColor.b === 0) {
+            this._canvas.style.opacity = "0";
+            this.props.globalState.onError.notifyObservers({scene: this._scene, message: "No mesh found in your scene"});
+        }
+        else {
+            if (Tools.errorsCount > 0) {
+                this.props.globalState.onError.notifyObservers({scene: this._scene, message: "Scene loaded but several errors were found"});
+            }
+        //    this._canvas.style.opacity = "1";
+            let camera = this._scene.activeCamera! as ArcRotateCamera;
+            if (camera.keysUp) {
+                camera.keysUp.push(90); // Z
+                camera.keysUp.push(87); // W
+                camera.keysDown.push(83); // S
+                camera.keysLeft.push(65); // A
+                camera.keysLeft.push(81); // Q
+                camera.keysRight.push(69); // E
+                camera.keysRight.push(68); // D
+            }
+        }      
+    }
+
+    prepareLighting() {
+        if (this._currentPluginName === "gltf") {
+            if (!this._scene.environmentTexture) {
+                this._scene.environmentTexture = EnvironmentTools.LoadSkyboxPathTexture(this._scene);
+            }
+
+            if (this._scene.environmentTexture) {
+                this._scene.createDefaultSkybox(this._scene.environmentTexture, true, (this._scene.activeCamera!.maxZ - this._scene.activeCamera!.minZ) / 2, 0.3, false);
+            }
+        }
+        else {
+            var pbrPresent = false;
+            for (var i = 0; i < this._scene.materials.length; i++) {
+                if (this._scene.materials[i].transparencyMode !== undefined) {
+                    pbrPresent = true;
+                    break;
+                }
+            }
+
+            if (pbrPresent) {
+                if (!this._scene.environmentTexture) {
+                    this._scene.environmentTexture = EnvironmentTools.LoadSkyboxPathTexture(this._scene);
+                }
+            }
+            else {
+                this._scene.createDefaultLight();
+            }
+        }
+    }
+
+    onSceneLoaded(filename: string) {
+        this._engine.clearInternalTexturesCache();
+
+        this._scene.skipFrustumClipping = true;
+
+        this.props.globalState.onSceneLoaded.notifyObservers({scene: this._scene, filename: filename});
+
+        this.prepareCamera();
+        this.prepareLighting();
+        this.handleErrors();
+
+        if (this.props.globalState.isDebugLayerEnabled) {
+            this.props.globalState.showDebugLayer();
+        }
+    }
+
+    loadAssetFromUrl() {
+        let assetUrl = this.props.assetUrl!;
+        let rootUrl = Tools.GetFolderPath(assetUrl);
+        let fileName = Tools.GetFilename(assetUrl);
+        SceneLoader.LoadAsync(rootUrl, fileName, this._engine).then((scene) => {
+            if (this._scene) {
+                this._scene.dispose();
+            }
+
+            this._scene = scene;
+
+            this.onSceneLoaded(fileName);
+
+            scene.whenReadyAsync().then(() => {
+                this._engine.runRenderLoop(() => {
+                    scene.render();
+                });
+            });
+        }).catch((reason) => {
+            this.props.globalState.onError.notifyObservers({ message : reason.message});
+            //TODO sceneError({ name: fileName }, null, reason.message || reason);
+        });
+    }
+
+    loadAsset() {
+        if (this.props.assetUrl) {
+            this.loadAssetFromUrl();
+            return;
+        }
+    }
+
+    componentDidMount() {
+        if (!Engine.isSupported()) {
+            return;
+        }
+
+        Engine.ShadersRepository = "/src/Shaders/";
+
+        // This is really important to tell Babylon.js to use decomposeLerp and matrix interpolation
+        Animation.AllowMatricesInterpolation = true;
+    
+        // Setting up some GLTF values
+        GLTFFileLoader.IncrementalLoading = false;
+        SceneLoader.OnPluginActivatedObservable.add((plugin) =>{
+            this._currentPluginName = plugin.name;
+            if (this._currentPluginName === "gltf") {
+                (plugin as GLTFFileLoader).onValidatedObservable.add((results) =>{
+                    if (results.issues.numErrors > 0) {
+                        this.props.globalState.showDebugLayer();
+                    }
+                });
+            }
+        });
+
+        this.initEngine();
+    }
+
+    shouldComponentUpdate(nextProps: IRenderingZoneProps) {
+        if (nextProps.expanded !== this.props.expanded) {
+            setTimeout(() => this._engine.resize());
+            return true;
+        }
+        return false;
+    }
+
+    public render() {
+        return (
+            <div id="canvasZone" className={this.props.expanded ? "expanded" : ""}>
+                <canvas id="renderCanvas" touch-action="none" 
+                    onContextMenu={evt => evt.preventDefault()}></canvas>
+            </div>
+        )
+    }
+}

sandbox/src/globalState.ts

@@ -0,0 +1,29 @@
+import { Observable } from 'babylonjs/Misc/observable';
+import { Scene } from 'babylonjs/scene';
+import { FilesInput } from 'babylonjs/Misc/filesInput';
+
+export class GlobalState {
+    currentScene: Scene;
+    onSceneLoaded = new Observable<{scene: Scene, filename: string}>();
+    onError = new Observable<{scene?: Scene, message?: string}>();
+    onEnvironmentChanged = new Observable<string>();    
+    onRequestClickInterceptor = new Observable<void>();
+    onClickInterceptorClicked = new Observable<void>();
+
+    filesInput: FilesInput;
+    isDebugLayerEnabled = false;
+
+    public showDebugLayer() {
+        this.isDebugLayerEnabled = true;
+        if (this.currentScene) {
+            this.currentScene.debugLayer.show();
+        }    
+    }
+
+    public hideDebugLayer() {
+        this.isDebugLayerEnabled = false;
+        if (this.currentScene) {
+            this.currentScene.debugLayer.hide();
+        }     
+    }
+}

sandbox/src/img/icon-open.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;}</style></defs><title>Asset 11</title><g id="Layer_2" data-name="Layer 2"><g id="Page_Elements" data-name="Page Elements"><path class="cls-1" d="M26.67,44.77H41.88v1.52H25.15V22H38.4l6.52,6.52v5.64H43.4V29.56H37.31V23.48H26.67ZM38.83,28h3.49l-3.49-3.48Zm8,12.13-1.93-1.92v8H43.4v-8l-1.94,1.92L40.39,39.1l3.77-3.77,3.76,3.77Z"/><rect class="cls-2" width="70" height="70"/></g></g></svg>

sandbox/src/index.ts

@@ -0,0 +1 @@
+export * from "./sandbox";

sandbox/src/legacy/legacy.ts

@@ -0,0 +1,9 @@
+import { Sandbox } from "../index";
+
+var globalObject = (typeof global !== 'undefined') ? global : ((typeof window !== 'undefined') ? window : undefined);
+if (typeof globalObject !== "undefined") {
+    (<any>globalObject).BABYLON = (<any>globalObject).BABYLON || {};
+    (<any>globalObject).BABYLON.Sandbox = Sandbox;
+}
+
+export * from "../index";

sandbox/src/sandbox.tsx

@@ -0,0 +1,150 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { GlobalState } from './globalState';
+import { RenderingZone } from './components/renderingZone';
+import { Footer } from './components/footer';
+import { EnvironmentTools } from './tools/environmentTools';
+import { Vector3 } from 'babylonjs/Maths/math.vector';
+
+require("./scss/main.scss");
+var fullScreenLogo = require("./img/logo-fullscreen.svg");
+
+interface ISandboxProps {
+}
+
+export class Sandbox extends React.Component<ISandboxProps, {isFooterVisible: boolean, errorMessage: string}> {
+    private _globalState: GlobalState;
+    private _assetUrl?: string;    
+    private _cameraPosition?: Vector3;
+    private _logoRef: React.RefObject<HTMLImageElement>;    
+    private _dropTextRef: React.RefObject<HTMLDivElement>;
+    private _clickInterceptorRef: React.RefObject<HTMLDivElement>;
+    
+    public constructor(props: ISandboxProps) {
+        super(props);
+        this._globalState = new GlobalState();
+        this._logoRef = React.createRef();
+        this._dropTextRef = React.createRef();
+        this._clickInterceptorRef = React.createRef();
+
+        this.state = {isFooterVisible: true, errorMessage: ""};
+        
+        this.checkUrl();
+
+        EnvironmentTools.HookWithEnvironmentChange(this._globalState);
+
+        // Events
+        this._globalState.onSceneLoaded.add(info => {
+            document.title = "Babylon.js - " + info.filename;
+
+            this._globalState.currentScene = info.scene;
+            if (this._globalState.currentScene.meshes.length === 0 && this._globalState.currentScene.clearColor.r === 1 && this._globalState.currentScene.clearColor.g === 0 && this._globalState.currentScene.clearColor.b === 0) {
+                this._logoRef.current!.className = "";
+            }
+            else {
+                this._logoRef.current!.className = "hidden";
+                this._dropTextRef.current!.className = "hidden";
+            }
+        });
+
+        this._globalState.onError.add(error => {
+            if (error.scene) {
+                this._globalState.showDebugLayer();
+            }
+
+            if (error.message) {
+                this.setState({errorMessage: error.message});
+            }
+        });
+
+        this._globalState.onRequestClickInterceptor.add(() => {
+            let div = this._clickInterceptorRef.current!;
+
+            if (div.classList.contains("hidden")) {
+                div.classList.remove("hidden");
+            } else {
+                div.classList.add("hidden");
+            }
+        });
+
+        // Keyboard
+        window.addEventListener("keydown", (event: KeyboardEvent) =>{
+            // Press space to toggle footer
+            if (event.keyCode === 32 && event.target && (event.target as HTMLElement).nodeName !== "INPUT") {
+                this.setState({isFooterVisible: !this.state.isFooterVisible});
+            }
+        });
+    }
+
+    checkUrl() {
+        // Check URL
+        var indexOf = location.href.indexOf("?");
+        if (indexOf !== -1) {
+            var params = location.href.substr(indexOf + 1).split("&");
+            for (var index = 0; index < params.length; index++) {
+                var param = params[index].split("=");
+                var name = param[0];
+                var value = param[1];
+                switch (name) {
+                    case "assetUrl": {
+                        this._assetUrl = value;
+                        break;
+                    }
+                    case "cameraPosition": {
+                        this._cameraPosition = Vector3.FromArray(value.split(",").map(function(component) { return +component; }));
+                        break;
+                    }
+                    case "kiosk": {
+                        this.state = {isFooterVisible: value === "true" ? false : true, errorMessage: ""};
+                        break;
+                    }
+                }
+            }
+        }
+    }
+
+    componentDidUpdate() {
+        this._assetUrl = undefined;
+        this._cameraPosition = undefined;
+    }
+
+    public render() {
+
+        return (
+            <div id="root">
+                <p id="droptext" ref={this._dropTextRef}>Drag and drop gltf, glb, obj or babylon files to view them</p>
+                <RenderingZone globalState={this._globalState} 
+                    assetUrl={this._assetUrl} 
+                    cameraPosition={this._cameraPosition} 
+                    expanded={!this.state.isFooterVisible}/>                
+                <div ref={this._clickInterceptorRef} 
+                    onClick={() => this._globalState.onClickInterceptorClicked.notifyObservers()}
+                    className="clickInterceptor hidden"></div>
+                {
+                    this.state.isFooterVisible &&
+                    <Footer globalState={this._globalState} />
+                }
+                <div id="logoContainer">
+                    <img id="logo" src={fullScreenLogo} ref={this._logoRef}/>
+                </div>                      
+                {
+                    this.state.errorMessage &&
+                    <div id="errorZone">
+                        <div className="message">
+                            {this.state.errorMessage}
+                        </div>
+                        <button type="button" className="close" 
+                            onClick={() => this.setState({errorMessage: ""})}
+                            data-dismiss="alert">&times;</button>
+                    </div>                           
+                } 
+            </div>   
+        )
+    }
+
+    public static Show(hostElement: HTMLElement) {
+        const sandBox = React.createElement(Sandbox, {});
+        
+        ReactDOM.render(sandBox, hostElement);
+    }
+}

sandbox/src/scss/footer.scss

@@ -0,0 +1,133 @@
+.footer {
+    position: relative;
+    width: 100%;
+    height: var(--footer-height);
+    margin: 0;
+    padding: 0;
+    background-color:var(--footer-background);
+    font-size: 0;
+    display: grid;
+    grid-template-rows: 100%;
+    grid-template-columns: 201px 1fr 210px;
+    
+    .footerLeft {
+        display: grid;
+        grid-column: 1;
+        grid-row: 1;
+        padding-left: 40px;
+        align-content: center; 
+        overflow: hidden;
+
+        #logoImg {
+            height: var(--footer-height);
+            width: 161px;
+        }
+    }
+
+    .footerRight {
+        display: flex;
+        flex-direction: row-reverse;
+        grid-column: 3;
+        grid-row: 1;
+
+        .button {
+            float: left; /* Float links side by side */
+            width: var(--footer-height);
+            height: var(--footer-height);
+            margin: 0px;
+            padding: 0;
+            transition: all 0.3s ease; /* Add transition for hover effects */
+            display: grid;
+            align-content: center;
+            justify-content: center;
+            cursor: pointer;
+
+            img {
+                width: var(--footer-height);
+                height: var(--footer-height);
+            }
+            
+            &:hover {
+                background-color: var(--button-hover-color);
+            }
+            
+            &:active {
+                background-color: var(--button-hover-background);
+            }
+        }         
+        
+        .dropup-content {
+            position: absolute;
+            bottom: var(--footer-height);
+            right: 0px;     
+            z-index: 100;
+
+            div  {
+                background-color: var(--button-hover-color);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                font-size: var(--font-size);
+                width: calc(2 * var(--footer-height));
+                color: white;
+                cursor: pointer;
+                height: 40px;
+                box-sizing: border-box;
+                padding: 0;
+                margin: 0;
+                display: grid;
+                align-content: center;
+                justify-content: center;
+            
+                &:hover {
+                    background-color: var(--button-hover-hover); 
+                    transition: all 0.3s ease;
+                }
+                &:active {
+                    background-color: var(--button-hover-background);
+                    transition: all 0.3s ease;
+                }
+            }
+        }    
+        
+        .custom-upload {
+            position: relative;
+            background-position: center right;
+            background-repeat: no-repeat;
+            width: var(--footer-height);
+            height: var(--footer-height);
+            cursor: pointer;
+            display: grid;
+
+            img {
+                grid-row: 1;
+                grid-column: 1;
+                width: var(--footer-height);
+                height: var(--footer-height);
+                pointer-events: none;
+            }
+            
+            &:hover {
+                background-color: var(--button-hover-color);
+            }
+            
+            &:active {
+                background-color: var(--button-hover-background);
+            }
+
+            input[type=file] {
+                grid-row: 1;
+                grid-column: 1;
+                outline:none;
+                position: relative;
+                text-align: right;    
+                -moz-opacity:0 ;
+                opacity: 0;
+                z-index: 2;
+                width:100%;
+                height:100%;
+                filter:alpha(opacity=0);
+            }
+        }
+    }
+}

sandbox/src/scss/main.scss

@@ -0,0 +1,98 @@
+html {
+    --background: #2A2342;
+    --footer-background: #201936;
+    --footer-height: 70px;
+    --button-hover-color: #BB464B;
+    --button-hover-hover: #e0684b;
+    --button-hover-background:  #162D3A;
+    --font-size: 20px;
+}
+
+html, body, #root {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    font-size: var(--font-size);
+    background: var(--background);
+    font-family: "acumin-pro-condensed";
+    font-weight: normal;    
+}
+
+.hidden {
+    display: none !important;
+}
+
+.clickInterceptor {
+    position: absolute;
+    width: 100%;
+    height: 100%;    
+    z-index: 99;
+    top:0;
+    left:0;
+}
+
+#droptext {
+    position: absolute;
+    text-align: center;
+    color: #fff;
+    height: 50px;
+    width: 100%;
+    bottom: 50px;    
+}
+
+#logoContainer {
+    position: absolute;
+    top:0;
+    left:0;
+    width: 100%;   
+    height: calc(100% - 70px);
+    pointer-events: none;
+}
+
+#logo {
+    position: absolute;
+    width: 20%;
+    height: 20%;
+    top: 40%;
+    left: 40%;
+    pointer-events: none;
+}
+
+#errorZone {
+    position: absolute;
+    width: 50%;
+    left: 25%;
+    bottom: 80px;
+    background-color: #C73228;
+    padding:20px;
+    border-radius: 5px;
+    color:white;
+    display: grid;
+    grid-template-columns: 1fr 32px;
+
+        .message {
+            grid-column: 1;
+            grid-row: 1;
+            align-self: center;
+        }
+
+        button {
+            grid-column: 2;
+            grid-row: 1;
+            padding: 0;
+            cursor: pointer;
+            background: transparent;
+            border: 0;
+            -webkit-appearance: none;
+            color: #000;
+            text-shadow: 0 1px 0 #fff;
+            opacity: .4;
+            font-size: 1.8em;
+
+            &:hover {
+                transform: scale(1.2);
+            }
+        }
+}

sandbox/src/scss/renderingZone.scss

@@ -0,0 +1,26 @@
+#canvasZone {
+    display: block;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    width: 100%;
+    height: calc(100% - var(--footer-height));   
+
+    &.expanded {
+       height: 100%; 
+    }
+}
+
+#renderCanvas {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    touch-action: none;
+    -ms-touch-action: none;  
+    display: block;
+    border: 0;
+    outline: 0;
+}

sandbox/src/tools/environmentTools.ts

@@ -0,0 +1,57 @@
+import { HDRCubeTexture } from 'babylonjs/Materials/Textures/hdrCubeTexture';
+import { CubeTexture } from 'babylonjs/Materials/Textures/cubeTexture';
+import { Scene } from 'babylonjs/scene';
+import { LocalStorageHelper } from './localStorageHelper';
+import { GlobalState } from '../globalState';
+import { Engine } from 'babylonjs/Engines/engine';
+import { StandardMaterial } from 'babylonjs/Materials/standardMaterial';
+import { PBRMaterial } from 'babylonjs/Materials/PBR/pbrMaterial';
+import { Texture } from 'babylonjs/Materials/Textures/texture';
+
+export class EnvironmentTools {
+    public static SkyboxPath = "";
+    public static Skyboxes = [
+        "https://assets.babylonjs.com/environments/environmentSpecular.env",
+        "https://assets.babylonjs.com/environments/studio.env",
+    ];
+    
+    public static SkyboxesNames = [
+        "Default",
+        "Studio",
+    ];    
+
+    public static LoadSkyboxPathTexture(scene: Scene) {                
+        var defaultSkyboxIndex = LocalStorageHelper.ReadLocalStorageValue("defaultSkyboxId", 0);
+        let path = this.SkyboxPath || this.Skyboxes[defaultSkyboxIndex];
+        if (path.indexOf(".hdr") === (path.length - 4)) {
+            return new HDRCubeTexture(path, scene, 256, false, true, false, true);
+        }
+        return CubeTexture.CreateFromPrefilteredData(path, scene);
+    }
+
+    public static HookWithEnvironmentChange(globalState: GlobalState) {
+        globalState.onEnvironmentChanged.add(option => {
+            this.SkyboxPath = "";
+            let index = EnvironmentTools.SkyboxesNames.indexOf(option);
+
+            if (typeof (Storage) !== "undefined") {
+                localStorage.setItem("defaultSkyboxId", index.toString());
+            }
+
+            var currentScene = Engine.LastCreatedScene!;
+            currentScene.environmentTexture = this.LoadSkyboxPathTexture(currentScene);
+            for (var i = 0; i < currentScene.materials.length; i++) {
+                var material = currentScene.materials[i] as (StandardMaterial | PBRMaterial);
+                if (material.name === "skyBox") {
+                    var reflectionTexture = material.reflectionTexture;
+                    if (reflectionTexture && reflectionTexture.coordinatesMode === Texture.SKYBOX_MODE) {
+                        material.reflectionTexture = currentScene.environmentTexture.clone();
+                        if (material.reflectionTexture) {
+                            material.reflectionTexture.coordinatesMode = Texture.SKYBOX_MODE;
+                        }
+                    }
+                }
+            }
+        });        
+    }
+}

sandbox/src/tools/localStorageHelper.ts

@@ -0,0 +1,9 @@
+export class LocalStorageHelper {
+    public static ReadLocalStorageValue(key: string, defaultValue: number) {
+        if (typeof (Storage) !== "undefined" && localStorage.getItem(key) !== null) {
+            return parseInt(localStorage.getItem(key)!);
+        }
+    
+        return defaultValue;
+    }
+}

sandbox/tsconfig.json

@@ -0,0 +1,28 @@
+{
+    "extends": "../tsconfigRules",
+    "compilerOptions": {
+        "jsx": "react",
+        "baseUrl": "./src/",
+        "rootDir": "./src/",
+        "paths": {
+            "babylonjs-gui/*": [
+                "../../dist/preview release/gui/babylon.gui.module.d.ts"
+            ],
+            "babylonjs-gltf2interface": [
+                "../../dist/preview release/glTF2Interface/babylon.glTF2Interface.d.ts"
+            ],
+            "babylonjs-loaders/*": [
+                "../../dist/preview release/loaders/babylonjs.loaders.module.d.ts"
+            ],
+            "babylonjs-materials/*": [
+                "../../dist/preview release/materialsLibrary/babylonjs.materials.module.d.ts"
+            ],
+            "babylonjs-serializers/*": [
+                "../../dist/preview release/serializers/babylonjs.serializers.module.d.ts"
+            ],
+            "babylonjs/*": [
+                "../../dist/preview release/babylon.module.d.ts"
+            ]
+        }
+    }
+}

sandbox/webpack.config.js

@@ -0,0 +1,46 @@
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const babylonWebpackConfig = require('../Tools/WebpackPlugins/babylonWebpackConfig');
+
+var config = babylonWebpackConfig({
+    module: "sandbox",
+    resolve: {
+        extensions: [".js", '.ts', ".tsx"],
+    },
+    moduleRules: [
+        {
+            test: /\.scss$/,
+            use: [
+                // fallback to style-loader in development
+                process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
+                "css-loader",
+                "sass-loader"
+            ]
+        }, 
+        {
+            test: /\.css$/,
+            use: ['style-loader', 'css-loader']
+        },
+        {
+            test: /\.svg$/,
+            use: [
+              {
+                loader: 'svg-url-loader',
+                options: {
+                  limit: 10000,
+                },
+              },
+            ],
+          }
+    ],
+    plugins: [
+        new MiniCssExtractPlugin({
+            // Options similar to the same options in webpackOptions.output
+            // both options are optional
+            filename: "[name].css",
+            chunkFilename: "[id].css"
+        })
+    ]
+});
+
+module.exports = config;

src/Misc/filesInput.ts

@@ -3,6 +3,7 @@ import { Scene } from "../scene";
 import { ISceneLoaderProgressEvent, SceneLoader } from "../Loading/sceneLoader";
 import { Logger } from "../Misc/logger";
 import { FilesInputStore } from "./filesInputStore";
+import { Nullable } from '../types';
 
 /**
  * Class used to help managing file picking and drag'n'drop
@@ -18,17 +19,17 @@ export class FilesInput {
     /**
      * Callback called when a file is processed
      */
-    public onProcessFileCallback: (file: File, name: string, extension: string) => true = () => { return true; };
+    public onProcessFileCallback: (file: File, name: string, extension: string) => boolean = () => { return true; };
 
     private _engine: Engine;
-    private _currentScene: Scene;
-    private _sceneLoadedCallback: (sceneFile: File, scene: Scene) => void;
-    private _progressCallback: (progress: ISceneLoaderProgressEvent) => void;
-    private _additionalRenderLoopLogicCallback: () => void;
-    private _textureLoadingCallback: (remaining: number) => void;
-    private _startingProcessingFilesCallback: (files?: File[]) => void;
-    private _onReloadCallback: (sceneFile: File) => void;
-    private _errorCallback: (sceneFile: File, scene: Scene, message: string) => void;
+    private _currentScene: Nullable<Scene>;
+    private _sceneLoadedCallback: Nullable<(sceneFile: File, scene: Scene) => void>;
+    private _progressCallback: Nullable<(progress: ISceneLoaderProgressEvent) => void>;
+    private _additionalRenderLoopLogicCallback: Nullable<() => void>;
+    private _textureLoadingCallback: Nullable<(remaining: number) => void>;
+    private _startingProcessingFilesCallback: Nullable<(files?: File[]) => void>;
+    private _onReloadCallback: Nullable<(sceneFile: File) => void>;
+    private _errorCallback: Nullable<(sceneFile: File, scene: Nullable<Scene>, message: string) => void>;
     private _elementToMonitor: HTMLElement;
 
     private _sceneFileToLoad: File;
@@ -46,8 +47,14 @@ export class FilesInput {
      * @param onReloadCallback callback called when a reload is requested
      * @param errorCallback callback call if an error occurs
      */
-    constructor(engine: Engine, scene: Scene, sceneLoadedCallback: (sceneFile: File, scene: Scene) => void, progressCallback: (progress: ISceneLoaderProgressEvent) => void, additionalRenderLoopLogicCallback: () => void,
-        textureLoadingCallback: (remaining: number) => void, startingProcessingFilesCallback: (files?: File[]) => void, onReloadCallback: (sceneFile: File) => void, errorCallback: (sceneFile: File, scene: Scene, message: string) => void) {
+    constructor(engine: Engine, scene: Nullable<Scene>,
+        sceneLoadedCallback: Nullable<(sceneFile: File, scene: Scene) => void>,
+        progressCallback: Nullable<(progress: ISceneLoaderProgressEvent) => void>,
+        additionalRenderLoopLogicCallback: Nullable<() => void>,
+        textureLoadingCallback: Nullable<(remaining: number) => void>,
+        startingProcessingFilesCallback: Nullable<(files?: File[]) => void>,
+        onReloadCallback: Nullable<(sceneFile: File) => void>,
+        errorCallback: Nullable<(sceneFile: File, scene: Nullable<Scene>, message: string) => void>) {
         this._engine = engine;
         this._currentScene = scene;
 
@@ -82,6 +89,11 @@ export class FilesInput {
         }
     }
 
+    /** Gets the current list of files to load */
+    public get filesToLoad() {
+        return this._filesToLoad;
+    }
+
     /**
      * Release all associated resources
      */