Merge pull request #9102 from BabylonJS/master

4.2.0-beta.10

.gitignore

@@ -157,6 +157,7 @@ node_modules
 # for VSCode
 .vs
 .tempChromeProfileForDebug
+.tempChromeCanaryProfileForDebug
 .temp
 *.js.map
 *.js.fx
@@ -200,5 +201,6 @@ gui/dist/
 # Local Netlify folder
 .netlify
 Playground/dist/
+Playground/temp/
 Sandbox/public/dist/
 ktx2Decoder/dist/

Playground/index.js

@@ -78,10 +78,12 @@ let checkBabylonVersionAsync= function () {
     return Promise.all(tasks);
 }
 
+var storedPGObbject = BABYLON.Playground;
+
 checkBabylonVersionAsync().then(() => {
     if (typeof BABYLONDEVTOOLS !== 'undefined') {
         var hostElement = document.getElementById("host-element");
-        BABYLON.Playground.Show(hostElement);
+        storedPGObbject.Show(hostElement);
         return;
     }
 

dist/preview release/babylon.d.ts

@@ -5054,14 +5054,14 @@ declare module BABYLON {
         private _alignTangentsWithPath;
         private readonly _pointAtData;
         /**
-        * new Path3D(path, normal, raw)
-        * Creates a Path3D. A Path3D is a logical math object, so not a mesh.
-        * please read the description in the tutorial : https://doc.babylonjs.com/how_to/how_to_use_path3d
-        * @param path an array of Vector3, the curve axis of the Path3D
-        * @param firstNormal (options) Vector3, the first wanted normal to the curve. Ex (0, 1, 0) for a vertical normal.
-        * @param raw (optional, default false) : boolean, if true the returned Path3D isn't normalized. Useful to depict path acceleration or speed.
-        * @param alignTangentsWithPath (optional, default false) : boolean, if true the tangents will be aligned with the path.
-        */
+         * new Path3D(path, normal, raw)
+         * Creates a Path3D. A Path3D is a logical math object, so not a mesh.
+         * please read the description in the tutorial : https://doc.babylonjs.com/how_to/how_to_use_path3d
+         * @param path an array of Vector3, the curve axis of the Path3D
+         * @param firstNormal (options) Vector3, the first wanted normal to the curve. Ex (0, 1, 0) for a vertical normal.
+         * @param raw (optional, default false) : boolean, if true the returned Path3D isn't normalized. Useful to depict path acceleration or speed.
+         * @param alignTangentsWithPath (optional, default false) : boolean, if true the tangents will be aligned with the path.
+         */
         constructor(
         /**
          * an array of Vector3, the curve axis of the Path3D
@@ -35146,6 +35146,7 @@ declare module BABYLON {
         _isActiveIntermediate: boolean;
         _onlyForInstancesIntermediate: boolean;
         _actAsRegularMesh: boolean;
+        _currentLOD: Nullable<AbstractMesh>;
     }
     /**
      * Class used to store all common mesh properties
@@ -41979,6 +41980,7 @@ declare module BABYLON {
         static ExclusiveDoubleClickMode: boolean;
         /** This is a defensive check to not allow control attachment prior to an already active one. If already attached, previous control is unattached before attaching the new one. */
         private _alreadyAttached;
+        private _alreadyAttachedTo;
         private _wheelEventName;
         private _onPointerMove;
         private _onPointerDown;
@@ -42009,6 +42011,7 @@ declare module BABYLON {
         private _meshUnderPointerId;
         private _onKeyDown;
         private _onKeyUp;
+        private _keyboardIsAttached;
         private _onCanvasFocusObserver;
         private _onCanvasBlurObserver;
         private _scene;

dist/preview release/babylon.max.js

@@ -39860,7 +39860,7 @@ var ThinEngine = /** @class */ (function () {
          */
         // Not mixed with Version for tooling purpose.
         get: function () {
-            return "babylonjs@4.2.0-beta.9";
+            return "babylonjs@4.2.0-beta.10";
         },
         enumerable: false,
         configurable: true
@@ -39870,7 +39870,7 @@ var ThinEngine = /** @class */ (function () {
          * Returns the current version of the framework
          */
         get: function () {
-            return "4.2.0-beta.9";
+            return "4.2.0-beta.10";
         },
         enumerable: false,
         configurable: true
@@ -51838,6 +51838,7 @@ var InputManager = /** @class */ (function () {
         this._previousStartingPointerTime = 0;
         this._pointerCaptures = {};
         this._meshUnderPointerId = [];
+        this._keyboardIsAttached = false;
         this._scene = scene;
     }
     Object.defineProperty(InputManager.prototype, "meshUnderPointer", {
@@ -52174,6 +52175,7 @@ var InputManager = /** @class */ (function () {
         if (this._alreadyAttached) {
             this.detachControl();
         }
+        this._alreadyAttachedTo = elementToAttachTo;
         var engine = scene.getEngine();
         this._initActionManager = function (act, clickInfo) {
             if (!_this._meshPickProceed) {
@@ -52453,19 +52455,20 @@ var InputManager = /** @class */ (function () {
                 scene.actionManager.processTrigger(_Engines_constants__WEBPACK_IMPORTED_MODULE_3__["Constants"].ACTION_OnKeyUpTrigger, _Actions_actionEvent__WEBPACK_IMPORTED_MODULE_4__["ActionEvent"].CreateNewFromScene(scene, evt));
             }
         };
+        var attachedFunction = function () {
+            if (!elementToAttachTo || _this._keyboardIsAttached) {
+                return;
+            }
+            elementToAttachTo.addEventListener("keydown", _this._onKeyDown, false);
+            elementToAttachTo.addEventListener("keyup", _this._onKeyUp, false);
+            _this._keyboardIsAttached = true;
+        };
         // Keyboard events
         this._onCanvasFocusObserver = engine.onCanvasFocusObservable.add((function () {
-            var fn = function () {
-                if (!elementToAttachTo) {
-                    return;
-                }
-                elementToAttachTo.addEventListener("keydown", _this._onKeyDown, false);
-                elementToAttachTo.addEventListener("keyup", _this._onKeyUp, false);
-            };
             if (document.activeElement === elementToAttachTo) {
-                fn();
+                attachedFunction();
             }
-            return fn;
+            return attachedFunction;
         })());
         this._onCanvasBlurObserver = engine.onCanvasBlurObservable.add(function () {
             if (!elementToAttachTo) {
@@ -52473,7 +52476,9 @@ var InputManager = /** @class */ (function () {
             }
             elementToAttachTo.removeEventListener("keydown", _this._onKeyDown);
             elementToAttachTo.removeEventListener("keyup", _this._onKeyUp);
+            _this._keyboardIsAttached = false;
         });
+        attachedFunction();
         // Pointer events
         var eventPrefix = _Misc_tools__WEBPACK_IMPORTED_MODULE_5__["Tools"].GetPointerPrefix(engine);
         if (attachMove) {
@@ -52502,19 +52507,18 @@ var InputManager = /** @class */ (function () {
      * Detaches all event handlers
      */
     InputManager.prototype.detachControl = function () {
-        var canvas = this._scene.getEngine().getInputElement();
         var engine = this._scene.getEngine();
         var eventPrefix = _Misc_tools__WEBPACK_IMPORTED_MODULE_5__["Tools"].GetPointerPrefix(engine);
-        if (!canvas) {
+        if (!this._alreadyAttachedTo) {
             return;
         }
         if (!this._alreadyAttached) {
             return;
         }
         // Pointer
-        canvas.removeEventListener(eventPrefix + "move", this._onPointerMove);
-        canvas.removeEventListener(this._wheelEventName, this._onPointerMove);
-        canvas.removeEventListener(eventPrefix + "down", this._onPointerDown);
+        this._alreadyAttachedTo.removeEventListener(eventPrefix + "move", this._onPointerMove);
+        this._alreadyAttachedTo.removeEventListener(this._wheelEventName, this._onPointerMove);
+        this._alreadyAttachedTo.removeEventListener(eventPrefix + "down", this._onPointerDown);
         window.removeEventListener(eventPrefix + "up", this._onPointerUp);
         // Blur / Focus
         if (this._onCanvasBlurObserver) {
@@ -52524,11 +52528,11 @@ var InputManager = /** @class */ (function () {
             engine.onCanvasFocusObservable.remove(this._onCanvasFocusObserver);
         }
         // Keyboard
-        canvas.removeEventListener("keydown", this._onKeyDown);
-        canvas.removeEventListener("keyup", this._onKeyUp);
+        this._alreadyAttachedTo.removeEventListener("keydown", this._onKeyDown);
+        this._alreadyAttachedTo.removeEventListener("keyup", this._onKeyUp);
         // Cursor
         if (!this._scene.doNotHandleCursors) {
-            canvas.style.cursor = this._scene.defaultCursor;
+            this._alreadyAttachedTo.style.cursor = this._scene.defaultCursor;
         }
         this._alreadyAttached = false;
     };
@@ -59822,7 +59826,7 @@ var ShadowGenerator = /** @class */ (function () {
         var engine = scene.getEngine();
         var material = subMesh.getMaterial();
         effectiveMesh._internalAbstractMeshDataInfo._isActiveIntermediate = false;
-        if (!material || subMesh.verticesCount === 0) {
+        if (!material || subMesh.verticesCount === 0 || subMesh._renderId === scene.getRenderId()) {
             return;
         }
         // Culling
@@ -59833,7 +59837,16 @@ var ShadowGenerator = /** @class */ (function () {
             return;
         }
         var hardwareInstancedRendering = engine.getCaps().instancedArrays && (batch.visibleInstances[subMesh._id] !== null && batch.visibleInstances[subMesh._id] !== undefined || renderingMesh.hasThinInstances);
+        if (effectiveMesh._internalAbstractMeshDataInfo._currentLOD !== effectiveMesh) {
+            if (hardwareInstancedRendering) {
+                delete batch.renderSelf[subMesh._id];
+            }
+            else {
+                return;
+            }
+        }
         if (this.isReady(subMesh, hardwareInstancedRendering, isTransparent)) {
+            subMesh._renderId = scene.getRenderId();
             var shadowDepthWrapper = (_a = renderingMesh.material) === null || _a === void 0 ? void 0 : _a.shadowDepthWrapper;
             var effect_1 = (_b = shadowDepthWrapper === null || shadowDepthWrapper === void 0 ? void 0 : shadowDepthWrapper.getEffect(subMesh, this)) !== null && _b !== void 0 ? _b : this._effect;
             engine.enableEffect(effect_1);
@@ -109116,9 +109129,7 @@ var BezierCurve = /** @class */ (function () {
             refinedT = Math.min(1, Math.max(0, refinedT));
         }
         // Resolve cubic bezier for the given x
-        return 3 * Math.pow(1 - refinedT, 2) * refinedT * y1 +
-            3 * (1 - refinedT) * Math.pow(refinedT, 2) * y2 +
-            Math.pow(refinedT, 3);
+        return 3 * Math.pow(1 - refinedT, 2) * refinedT * y1 + 3 * (1 - refinedT) * Math.pow(refinedT, 2) * y2 + Math.pow(refinedT, 3);
     };
     return BezierCurve;
 }());
@@ -109134,7 +109145,7 @@ var Angle = /** @class */ (function () {
     function Angle(radians) {
         this._radians = radians;
         if (this._radians < 0.0) {
-            this._radians += (2.0 * Math.PI);
+            this._radians += 2.0 * Math.PI;
         }
     }
     /**
@@ -109142,7 +109153,7 @@ var Angle = /** @class */ (function () {
      * @returns the Angle value in degrees (float)
      */
     Angle.prototype.degrees = function () {
-        return this._radians * 180.0 / Math.PI;
+        return (this._radians * 180.0) / Math.PI;
     };
     /**
      * Get value in radians
@@ -109176,7 +109187,7 @@ var Angle = /** @class */ (function () {
      * @returns a new Angle
      */
     Angle.FromDegrees = function (degrees) {
-        return new Angle(degrees * Math.PI / 180.0);
+        return new Angle((degrees * Math.PI) / 180.0);
     };
     return Angle;
 }());
@@ -109202,8 +109213,8 @@ var Arc2 = /** @class */ (function () {
         this.midPoint = midPoint;
         this.endPoint = endPoint;
         var temp = Math.pow(midPoint.x, 2) + Math.pow(midPoint.y, 2);
-        var startToMid = (Math.pow(startPoint.x, 2) + Math.pow(startPoint.y, 2) - temp) / 2.;
-        var midToEnd = (temp - Math.pow(endPoint.x, 2) - Math.pow(endPoint.y, 2)) / 2.;
+        var startToMid = (Math.pow(startPoint.x, 2) + Math.pow(startPoint.y, 2) - temp) / 2;
+        var midToEnd = (temp - Math.pow(endPoint.x, 2) - Math.pow(endPoint.y, 2)) / 2;
         var det = (startPoint.x - midPoint.x) * (midPoint.y - endPoint.y) - (midPoint.x - endPoint.x) * (startPoint.y - midPoint.y);
         this.centerPoint = new _math_vector__WEBPACK_IMPORTED_MODULE_1__["Vector2"]((startToMid * (midPoint.y - endPoint.y) - midToEnd * (startPoint.y - midPoint.y)) / det, ((startPoint.x - midPoint.x) * midToEnd - (midPoint.x - endPoint.x) * startToMid) / det);
         this.radius = this.centerPoint.subtract(this.startPoint).length();
@@ -109224,7 +109235,7 @@ var Arc2 = /** @class */ (function () {
         if (a3 - a2 < -180.0) {
             a3 += 360.0;
         }
-        this.orientation = (a2 - a1) < 0 ? Orientation.CW : Orientation.CCW;
+        this.orientation = a2 - a1 < 0 ? Orientation.CW : Orientation.CCW;
         this.angle = Angle.FromDegrees(this.orientation === Orientation.CW ? a1 - a3 : a3 - a1);
     }
     return Arc2;
@@ -109312,7 +109323,7 @@ var Path2 = /** @class */ (function () {
         if (this.closed) {
             var lastPoint = this._points[this._points.length - 1];
             var firstPoint = this._points[0];
-            result += (firstPoint.subtract(lastPoint).length());
+            result += firstPoint.subtract(lastPoint).length();
         }
         return result;
     };
@@ -109339,11 +109350,11 @@ var Path2 = /** @class */ (function () {
             var a = this._points[i];
             var b = this._points[j];
             var bToA = b.subtract(a);
-            var nextOffset = (bToA.length() + previousOffset);
+            var nextOffset = bToA.length() + previousOffset;
             if (lengthPosition >= previousOffset && lengthPosition <= nextOffset) {
                 var dir = bToA.normalize();
                 var localOffset = lengthPosition - previousOffset;
-                return new _math_vector__WEBPACK_IMPORTED_MODULE_1__["Vector2"](a.x + (dir.x * localOffset), a.y + (dir.y * localOffset));
+                return new _math_vector__WEBPACK_IMPORTED_MODULE_1__["Vector2"](a.x + dir.x * localOffset, a.y + dir.y * localOffset);
             }
             previousOffset = nextOffset;
         }
@@ -109366,14 +109377,14 @@ var Path2 = /** @class */ (function () {
  */
 var Path3D = /** @class */ (function () {
     /**
-    * new Path3D(path, normal, raw)
-    * Creates a Path3D. A Path3D is a logical math object, so not a mesh.
-    * please read the description in the tutorial : https://doc.babylonjs.com/how_to/how_to_use_path3d
-    * @param path an array of Vector3, the curve axis of the Path3D
-    * @param firstNormal (options) Vector3, the first wanted normal to the curve. Ex (0, 1, 0) for a vertical normal.
-    * @param raw (optional, default false) : boolean, if true the returned Path3D isn't normalized. Useful to depict path acceleration or speed.
-    * @param alignTangentsWithPath (optional, default false) : boolean, if true the tangents will be aligned with the path.
-    */
+     * new Path3D(path, normal, raw)
+     * Creates a Path3D. A Path3D is a logical math object, so not a mesh.
+     * please read the description in the tutorial : https://doc.babylonjs.com/how_to/how_to_use_path3d
+     * @param path an array of Vector3, the curve axis of the Path3D
+     * @param firstNormal (options) Vector3, the first wanted normal to the curve. Ex (0, 1, 0) for a vertical normal.
+     * @param raw (optional, default false) : boolean, if true the returned Path3D isn't normalized. Useful to depict path acceleration or speed.
+     * @param alignTangentsWithPath (optional, default false) : boolean, if true the tangents will be aligned with the path.
+     */
     function Path3D(
     /**
      * an array of Vector3, the curve axis of the Path3D
@@ -109531,7 +109542,7 @@ var Path3D = /** @class */ (function () {
             var point = this._curve[i + 0];
             var tangent = this._curve[i + 1].subtract(point).normalize();
             var subLength = this._distances[i + 1] - this._distances[i + 0];
-            var subPosition = Math.min(Math.max(_math_vector__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Dot(tangent, target.subtract(point).normalize()), 0.0) * _math_vector__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Distance(point, target) / subLength, 1.0);
+            var subPosition = Math.min((Math.max(_math_vector__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Dot(tangent, target.subtract(point).normalize()), 0.0) * _math_vector__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Distance(point, target)) / subLength, 1.0);
             var distance = _math_vector__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Distance(point.add(tangent.scale(subPosition * subLength)), target);
             if (distance < smallestDistance) {
                 smallestDistance = distance;
@@ -109550,10 +109561,10 @@ var Path3D = /** @class */ (function () {
         if (start === void 0) { start = 0.0; }
         if (end === void 0) { end = 1.0; }
         if (start < 0.0) {
-            start = 1 - (start * -1.0) % 1.0;
+            start = 1 - ((start * -1.0) % 1.0);
         }
         if (end < 0.0) {
-            end = 1 - (end * -1.0) % 1.0;
+            end = 1 - ((end * -1.0) % 1.0);
         }
         if (start > end) {
             var _start = start;
@@ -109598,6 +109609,9 @@ var Path3D = /** @class */ (function () {
     Path3D.prototype._compute = function (firstNormal, alignTangentsWithPath) {
         if (alignTangentsWithPath === void 0) { alignTangentsWithPath = false; }
         var l = this._curve.length;
+        if (l < 2) {
+            return;
+        }
         // first and last tangents
         this._tangents[0] = this._getFirstNonNullVector(0);
         if (!this._raw) {
@@ -109689,7 +109703,8 @@ var Path3D = /** @class */ (function () {
         }
         if (va === undefined || va === null) {
             var point;
-            if (!_math_scalar__WEBPACK_IMPORTED_MODULE_0__["Scalar"].WithinEpsilon(Math.abs(vt.y) / tgl, 1.0, _math_constants__WEBPACK_IMPORTED_MODULE_2__["Epsilon"])) { // search for a point in the plane
+            if (!_math_scalar__WEBPACK_IMPORTED_MODULE_0__["Scalar"].WithinEpsilon(Math.abs(vt.y) / tgl, 1.0, _math_constants__WEBPACK_IMPORTED_MODULE_2__["Epsilon"])) {
+                // search for a point in the plane
                 point = new _math_vector__WEBPACK_IMPORTED_MODULE_1__["Vector3"](0.0, -1.0, 0.0);
             }
             else if (!_math_scalar__WEBPACK_IMPORTED_MODULE_0__["Scalar"].WithinEpsilon(Math.abs(vt.x) / tgl, 1.0, _math_constants__WEBPACK_IMPORTED_MODULE_2__["Epsilon"])) {
@@ -109944,7 +109959,7 @@ var Curve3 = /** @class */ (function () {
     Curve3.prototype._computeLength = function (path) {
         var l = 0;
         for (var i = 1; i < path.length; i++) {
-            l += (path[i].subtract(path[i - 1])).length();
+            l += path[i].subtract(path[i - 1]).length();
         }
         return l;
     };
@@ -121413,6 +121428,7 @@ var _InternalAbstractMeshDataInfo = /** @class */ (function () {
         this._isActiveIntermediate = false;
         this._onlyForInstancesIntermediate = false;
         this._actAsRegularMesh = false;
+        this._currentLOD = null;
     }
     return _InternalAbstractMeshDataInfo;
 }());
@@ -164889,7 +164905,7 @@ var CannonJSPlugin = /** @class */ (function () {
         var meshChildren = mainImpostor.object.getChildMeshes ? mainImpostor.object.getChildMeshes(true) : [];
         var currentRotation = mainImpostor.object.rotationQuaternion;
         if (meshChildren.length) {
-            var processMesh = function (localPosition, mesh) {
+            var processMesh_1 = function (mesh) {
                 if (!currentRotation || !mesh.rotationQuaternion) {
                     return;
                 }
@@ -164897,15 +164913,15 @@ var CannonJSPlugin = /** @class */ (function () {
                 if (childImpostor) {
                     var parent = childImpostor.parent;
                     if (parent !== mainImpostor) {
-                        var pPosition = mesh.position.clone();
-                        // let localRotation = mesh.rotationQuaternion.multiply(Quaternion.Inverse(currentRotation));
+                        var pPosition = mesh.getAbsolutePosition().subtract(mesh.parent.getAbsolutePosition());
+                        var q = mesh.rotationQuaternion;
                         if (childImpostor.physicsBody) {
                             _this.removePhysicsBody(childImpostor);
                             childImpostor.physicsBody = null;
                         }
                         childImpostor.parent = mainImpostor;
                         childImpostor.resetUpdateFlags();
-                        mainImpostor.physicsBody.addShape(_this._createShape(childImpostor), new _this.BJSCANNON.Vec3(pPosition.x, pPosition.y, pPosition.z) /*, new this.BJSCANNON.Quaternion(localRotation.x, localRotation.y, localRotation.z, localRotation.w)*/);
+                        mainImpostor.physicsBody.addShape(_this._createShape(childImpostor), new _this.BJSCANNON.Vec3(pPosition.x, pPosition.y, pPosition.z), new _this.BJSCANNON.Quaternion(q.x, q.y, q.z, q.w));
                         //Add the mass of the children.
                         mainImpostor.physicsBody.mass += childImpostor.getParam("mass");
                     }
@@ -164913,9 +164929,9 @@ var CannonJSPlugin = /** @class */ (function () {
                 currentRotation.multiplyInPlace(mesh.rotationQuaternion);
                 mesh.getChildMeshes(true)
                     .filter(function (m) { return !!m.physicsImpostor; })
-                    .forEach(processMesh.bind(_this, mesh.getAbsolutePosition()));
+                    .forEach(processMesh_1);
             };
-            meshChildren.filter(function (m) { return !!m.physicsImpostor; }).forEach(processMesh.bind(this, mainImpostor.object.getAbsolutePosition()));
+            meshChildren.filter(function (m) { return !!m.physicsImpostor; }).forEach(processMesh_1);
         }
     };
     CannonJSPlugin.prototype.removePhysicsBody = function (impostor) {
@@ -165164,8 +165180,7 @@ var CannonJSPlugin = /** @class */ (function () {
         //make sure it is updated...
         object.computeWorldMatrix && object.computeWorldMatrix(true);
         // The delta between the mesh position and the mesh bounding box center
-        var bInfo = object.getBoundingInfo();
-        if (!bInfo) {
+        if (!object.getBoundingInfo()) {
             return;
         }
         var center = impostor.getObjectCenter();
@@ -167658,12 +167673,17 @@ var PhysicsImpostor = /** @class */ (function () {
     PhysicsImpostor.prototype.getObjectExtendSize = function () {
         if (this.object.getBoundingInfo) {
             var q = this.object.rotationQuaternion;
+            var scaling = this.object.scaling.clone();
             //reset rotation
             this.object.rotationQuaternion = PhysicsImpostor.IDENTITY_QUATERNION;
             //calculate the world matrix with no rotation
-            this.object.computeWorldMatrix && this.object.computeWorldMatrix(true);
+            var worldMatrix = this.object.computeWorldMatrix && this.object.computeWorldMatrix(true);
+            if (worldMatrix) {
+                worldMatrix.decompose(scaling, undefined, undefined);
+            }
             var boundingInfo = this.object.getBoundingInfo();
-            var size = boundingInfo.boundingBox.extendSize.scale(2).multiplyInPlace(this.object.scaling);
+            // get the global scaling of the object
+            var size = boundingInfo.boundingBox.extendSize.scale(2).multiplyInPlace(scaling);
             //bring back the rotation
             this.object.rotationQuaternion = q;
             //calculate the world matrix with the new rotation
@@ -202985,6 +203005,7 @@ var Scene = /** @class */ (function (_super) {
             if (meshToRender === undefined || meshToRender === null) {
                 continue;
             }
+            mesh._internalAbstractMeshDataInfo._currentLOD = meshToRender;
             // Compute world matrix if LOD is billboard
             if (meshToRender !== mesh && meshToRender.billboardMode !== _Meshes_transformNode__WEBPACK_IMPORTED_MODULE_8__["TransformNode"].BILLBOARDMODE_NONE) {
                 meshToRender.computeWorldMatrix();

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

@@ -5092,14 +5092,14 @@ declare module "babylonjs/Maths/math.path" {
         private _alignTangentsWithPath;
         private readonly _pointAtData;
         /**
-        * new Path3D(path, normal, raw)
-        * Creates a Path3D. A Path3D is a logical math object, so not a mesh.
-        * please read the description in the tutorial : https://doc.babylonjs.com/how_to/how_to_use_path3d
-        * @param path an array of Vector3, the curve axis of the Path3D
-        * @param firstNormal (options) Vector3, the first wanted normal to the curve. Ex (0, 1, 0) for a vertical normal.
-        * @param raw (optional, default false) : boolean, if true the returned Path3D isn't normalized. Useful to depict path acceleration or speed.
-        * @param alignTangentsWithPath (optional, default false) : boolean, if true the tangents will be aligned with the path.
-        */
+         * new Path3D(path, normal, raw)
+         * Creates a Path3D. A Path3D is a logical math object, so not a mesh.
+         * please read the description in the tutorial : https://doc.babylonjs.com/how_to/how_to_use_path3d
+         * @param path an array of Vector3, the curve axis of the Path3D
+         * @param firstNormal (options) Vector3, the first wanted normal to the curve. Ex (0, 1, 0) for a vertical normal.
+         * @param raw (optional, default false) : boolean, if true the returned Path3D isn't normalized. Useful to depict path acceleration or speed.
+         * @param alignTangentsWithPath (optional, default false) : boolean, if true the tangents will be aligned with the path.
+         */
         constructor(
         /**
          * an array of Vector3, the curve axis of the Path3D
@@ -36496,6 +36496,7 @@ declare module "babylonjs/Meshes/abstractMesh" {
         _isActiveIntermediate: boolean;
         _onlyForInstancesIntermediate: boolean;
         _actAsRegularMesh: boolean;
+        _currentLOD: Nullable<AbstractMesh>;
     }
     /**
      * Class used to store all common mesh properties
@@ -43493,6 +43494,7 @@ declare module "babylonjs/Inputs/scene.inputManager" {
         static ExclusiveDoubleClickMode: boolean;
         /** This is a defensive check to not allow control attachment prior to an already active one. If already attached, previous control is unattached before attaching the new one. */
         private _alreadyAttached;
+        private _alreadyAttachedTo;
         private _wheelEventName;
         private _onPointerMove;
         private _onPointerDown;
@@ -43523,6 +43525,7 @@ declare module "babylonjs/Inputs/scene.inputManager" {
         private _meshUnderPointerId;
         private _onKeyDown;
         private _onKeyUp;
+        private _keyboardIsAttached;
         private _onCanvasFocusObserver;
         private _onCanvasBlurObserver;
         private _scene;
@@ -85829,14 +85832,14 @@ declare module BABYLON {
         private _alignTangentsWithPath;
         private readonly _pointAtData;
         /**
-        * new Path3D(path, normal, raw)
-        * Creates a Path3D. A Path3D is a logical math object, so not a mesh.
-        * please read the description in the tutorial : https://doc.babylonjs.com/how_to/how_to_use_path3d
-        * @param path an array of Vector3, the curve axis of the Path3D
-        * @param firstNormal (options) Vector3, the first wanted normal to the curve. Ex (0, 1, 0) for a vertical normal.
-        * @param raw (optional, default false) : boolean, if true the returned Path3D isn't normalized. Useful to depict path acceleration or speed.
-        * @param alignTangentsWithPath (optional, default false) : boolean, if true the tangents will be aligned with the path.
-        */
+         * new Path3D(path, normal, raw)
+         * Creates a Path3D. A Path3D is a logical math object, so not a mesh.
+         * please read the description in the tutorial : https://doc.babylonjs.com/how_to/how_to_use_path3d
+         * @param path an array of Vector3, the curve axis of the Path3D
+         * @param firstNormal (options) Vector3, the first wanted normal to the curve. Ex (0, 1, 0) for a vertical normal.
+         * @param raw (optional, default false) : boolean, if true the returned Path3D isn't normalized. Useful to depict path acceleration or speed.
+         * @param alignTangentsWithPath (optional, default false) : boolean, if true the tangents will be aligned with the path.
+         */
         constructor(
         /**
          * an array of Vector3, the curve axis of the Path3D
@@ -115921,6 +115924,7 @@ declare module BABYLON {
         _isActiveIntermediate: boolean;
         _onlyForInstancesIntermediate: boolean;
         _actAsRegularMesh: boolean;
+        _currentLOD: Nullable<AbstractMesh>;
     }
     /**
      * Class used to store all common mesh properties
@@ -122754,6 +122758,7 @@ declare module BABYLON {
         static ExclusiveDoubleClickMode: boolean;
         /** This is a defensive check to not allow control attachment prior to an already active one. If already attached, previous control is unattached before attaching the new one. */
         private _alreadyAttached;
+        private _alreadyAttachedTo;
         private _wheelEventName;
         private _onPointerMove;
         private _onPointerDown;
@@ -122784,6 +122789,7 @@ declare module BABYLON {
         private _meshUnderPointerId;
         private _onKeyDown;
         private _onKeyUp;
+        private _keyboardIsAttached;
         private _onCanvasFocusObserver;
         private _onCanvasBlurObserver;
         private _scene;

dist/preview release/documentation.d.ts

@@ -5054,14 +5054,14 @@ declare module BABYLON {
         private _alignTangentsWithPath;
         private readonly _pointAtData;
         /**
-        * new Path3D(path, normal, raw)
-        * Creates a Path3D. A Path3D is a logical math object, so not a mesh.
-        * please read the description in the tutorial : https://doc.babylonjs.com/how_to/how_to_use_path3d
-        * @param path an array of Vector3, the curve axis of the Path3D
-        * @param firstNormal (options) Vector3, the first wanted normal to the curve. Ex (0, 1, 0) for a vertical normal.
-        * @param raw (optional, default false) : boolean, if true the returned Path3D isn't normalized. Useful to depict path acceleration or speed.
-        * @param alignTangentsWithPath (optional, default false) : boolean, if true the tangents will be aligned with the path.
-        */
+         * new Path3D(path, normal, raw)
+         * Creates a Path3D. A Path3D is a logical math object, so not a mesh.
+         * please read the description in the tutorial : https://doc.babylonjs.com/how_to/how_to_use_path3d
+         * @param path an array of Vector3, the curve axis of the Path3D
+         * @param firstNormal (options) Vector3, the first wanted normal to the curve. Ex (0, 1, 0) for a vertical normal.
+         * @param raw (optional, default false) : boolean, if true the returned Path3D isn't normalized. Useful to depict path acceleration or speed.
+         * @param alignTangentsWithPath (optional, default false) : boolean, if true the tangents will be aligned with the path.
+         */
         constructor(
         /**
          * an array of Vector3, the curve axis of the Path3D
@@ -35146,6 +35146,7 @@ declare module BABYLON {
         _isActiveIntermediate: boolean;
         _onlyForInstancesIntermediate: boolean;
         _actAsRegularMesh: boolean;
+        _currentLOD: Nullable<AbstractMesh>;
     }
     /**
      * Class used to store all common mesh properties
@@ -41979,6 +41980,7 @@ declare module BABYLON {
         static ExclusiveDoubleClickMode: boolean;
         /** This is a defensive check to not allow control attachment prior to an already active one. If already attached, previous control is unattached before attaching the new one. */
         private _alreadyAttached;
+        private _alreadyAttachedTo;
         private _wheelEventName;
         private _onPointerMove;
         private _onPointerDown;
@@ -42009,6 +42011,7 @@ declare module BABYLON {
         private _meshUnderPointerId;
         private _onKeyDown;
         private _onKeyUp;
+        private _keyboardIsAttached;
         private _onCanvasFocusObserver;
         private _onCanvasBlurObserver;
         private _scene;

dist/preview release/glTF2Interface/package.json

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

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_Maths_math_vector__) {
+})((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 = {};
@@ -400,7 +400,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/Maths/math.vector");
+/* 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__);
 
 /**
@@ -543,7 +543,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/Maths/math.vector");
+/* 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");
@@ -1532,7 +1532,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/Maths/math.vector");
+/* 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__);
 
 
@@ -1764,7 +1764,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/Maths/math.vector");
+/* 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");
@@ -1947,7 +1947,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/Maths/math.vector");
+/* 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");
@@ -3340,7 +3340,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/Maths/math.vector");
+/* 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");
@@ -3757,7 +3757,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/Maths/math.vector");
+/* 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");
@@ -5706,7 +5706,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/Maths/math.vector");
+/* 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__);
 
 
@@ -5939,7 +5939,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/Maths/math.vector");
+/* 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__);
 
 
@@ -6036,7 +6036,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/Maths/math.vector");
+/* 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__);
 
 
@@ -6494,7 +6494,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/Maths/math.vector");
+/* 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");
 
@@ -7431,7 +7431,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/Maths/math.vector");
+/* 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__);
 
 
@@ -7470,7 +7470,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/Maths/math.vector");
+/* 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");
@@ -8483,7 +8483,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/Maths/math.vector");
+/* 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");
@@ -8754,7 +8754,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/Maths/math.vector");
+/* 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");
@@ -9024,7 +9024,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/Maths/math.vector");
+/* 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");
@@ -9231,7 +9231,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/Maths/math.vector");
+/* 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__);
 
 
@@ -9381,7 +9381,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/Maths/math.vector");
+/* 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__);
 
 
@@ -11012,7 +11012,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/Maths/math.vector");
+/* 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");
@@ -11346,7 +11346,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/Maths/math.vector");
+/* 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__);
 
 
@@ -11939,7 +11939,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/Maths/math.vector");
+/* 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__);
 
 
@@ -12211,7 +12211,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/Maths/math.vector");
+/* 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");
@@ -12481,7 +12481,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/Maths/math.vector");
+/* 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");
@@ -13017,7 +13017,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/Maths/math.vector");
+/* 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");
@@ -13406,7 +13406,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/Maths/math.vector");
+/* 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__);
 
 
@@ -13631,7 +13631,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/Maths/math.vector");
+/* 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 = [
@@ -13796,7 +13796,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/Maths/math.vector");
+/* 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");
 
@@ -13939,7 +13939,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/Maths/math.vector");
+/* 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");
 
@@ -14245,7 +14245,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/Maths/math.vector");
+/* 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__);
 
 /**
@@ -14564,7 +14564,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/Maths/math.vector");
+/* 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");
 
@@ -14607,7 +14607,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/Maths/math.vector");
+/* 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");
@@ -14788,7 +14788,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/Maths/math.vector");
+/* 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");
 
@@ -14945,7 +14945,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/Maths/math.vector");
+/* 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");
 
@@ -15351,7 +15351,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/Maths/math.vector");
+/* 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");
@@ -15437,7 +15437,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/Maths/math.vector");
+/* 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");
@@ -15931,7 +15931,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/Maths/math.vector");
+/* 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");
@@ -15986,7 +15986,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/Maths/math.vector");
+/* 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");
@@ -16113,7 +16113,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/Maths/math.vector");
+/* 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");
@@ -16199,7 +16199,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/Maths/math.vector");
+/* 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");
 
@@ -16324,7 +16324,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/Maths/math.vector");
+/* 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");
 
@@ -16515,7 +16515,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/Maths/math.vector");
+/* 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");
 
@@ -16782,7 +16782,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/Maths/math.vector");
+/* 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");
@@ -17098,7 +17098,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/Maths/math.vector");
+/* 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';
@@ -17120,7 +17120,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/Maths/math.vector");
+/* 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';
@@ -17143,7 +17143,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/Maths/math.vector");
+/* 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__);
 
 
@@ -17445,14 +17445,14 @@ if (typeof globalObject !== "undefined") {
 
 /***/ }),
 
-/***/ "babylonjs/Maths/math.vector":
+/***/ "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_Maths_math_vector__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_observable__;
 
 /***/ })
 

dist/preview release/gui/package.json

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

dist/preview release/inspector/babylon.inspector.bundle.max.js

@@ -76342,10 +76342,8 @@ var GLTFComponent = /** @class */ (function (_super) {
         }
         var issues = validationResults.issues;
         return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__["LineContainerComponent"], { globalState: this.props.globalState, title: "GLTF VALIDATION", closed: !issues.numErrors && !issues.numWarnings },
-            issues.numErrors !== 0 &&
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_messageLineComponent__WEBPACK_IMPORTED_MODULE_6__["MessageLineComponent"], { text: "Your file has some validation issues", icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_7__["faTimesCircle"], color: "Red" }),
-            issues.numErrors === 0 &&
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_messageLineComponent__WEBPACK_IMPORTED_MODULE_6__["MessageLineComponent"], { text: "Your file is a valid glTF file", icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_7__["faCheck"], color: "Green" }),
+            issues.numErrors !== 0 && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_messageLineComponent__WEBPACK_IMPORTED_MODULE_6__["MessageLineComponent"], { text: "Your file has some validation issues", icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_7__["faTimesCircle"], color: "Red" }),
+            issues.numErrors === 0 && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_messageLineComponent__WEBPACK_IMPORTED_MODULE_6__["MessageLineComponent"], { text: "Your file is a valid glTF file", icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_7__["faCheck"], color: "Green" }),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__["TextLineComponent"], { label: "Errors", value: issues.numErrors.toString() }),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__["TextLineComponent"], { label: "Warnings", value: issues.numWarnings.toString() }),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__["TextLineComponent"], { label: "Infos", value: issues.numInfos.toString() }),
@@ -76355,15 +76353,26 @@ var GLTFComponent = /** @class */ (function (_super) {
     GLTFComponent.prototype.render = function () {
         var extensionStates = this.props.globalState.glTFLoaderExtensionDefaults;
         var loaderState = this.props.globalState.glTFLoaderDefaults;
-        var animationStartMode = [
-            { label: "None", value: babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_9__["GLTFLoaderAnimationStartMode"].NONE },
-            { label: "First", value: babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_9__["GLTFLoaderAnimationStartMode"].FIRST },
-            { label: "ALL", value: babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_9__["GLTFLoaderAnimationStartMode"].ALL }
-        ];
-        var coordinateSystemMode = [
-            { label: "Auto", value: babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_9__["GLTFLoaderCoordinateSystemMode"].AUTO },
-            { label: "Right handed", value: babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_9__["GLTFLoaderCoordinateSystemMode"].FORCE_RIGHT_HANDED }
-        ];
+        var animationStartMode = (typeof babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_9__["GLTFLoaderAnimationStartMode"] !== "undefined"
+            ? [
+                { label: "None", value: babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_9__["GLTFLoaderAnimationStartMode"].NONE },
+                { label: "First", value: babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_9__["GLTFLoaderAnimationStartMode"].FIRST },
+                { label: "ALL", value: babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_9__["GLTFLoaderAnimationStartMode"].ALL },
+            ]
+            : [
+                { label: "None", value: 0 },
+                { label: "First", value: 1 },
+                { label: "ALL", value: 2 },
+            ]);
+        var coordinateSystemMode = typeof babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_9__["GLTFLoaderCoordinateSystemMode"] !== "undefined"
+            ? [
+                { label: "Auto", value: babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_9__["GLTFLoaderCoordinateSystemMode"].AUTO },
+                { label: "Right handed", value: babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_9__["GLTFLoaderCoordinateSystemMode"].FORCE_RIGHT_HANDED },
+            ]
+            : [
+                { label: "Auto", value: 0 },
+                { label: "Right handed", value: 1 },
+            ];
         return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null,
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__["LineContainerComponent"], { globalState: this.props.globalState, title: "GLTF LOADER", closed: true },
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__["OptionsLineComponent"], { label: "Animation start mode", options: animationStartMode, target: loaderState, propertyName: "animationStartMode" }),
@@ -76377,31 +76386,30 @@ var GLTFComponent = /** @class */ (function (_super) {
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Validate", target: loaderState, propertyName: "validate" }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_messageLineComponent__WEBPACK_IMPORTED_MODULE_6__["MessageLineComponent"], { text: "You need to reload your file to see these changes" })),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lineContainerComponent__WEBPACK_IMPORTED_MODULE_2__["LineContainerComponent"], { globalState: this.props.globalState, title: "GLTF EXTENSIONS", closed: true },
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "MSFT_lod", isSelected: function () { return extensionStates["MSFT_lod"].enabled; }, onSelect: function (value) { return extensionStates["MSFT_lod"].enabled = value; } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "MSFT_lod", isSelected: function () { return extensionStates["MSFT_lod"].enabled; }, onSelect: function (value) { return (extensionStates["MSFT_lod"].enabled = value); } }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { label: "Maximum LODs", target: extensionStates["MSFT_lod"], propertyName: "maxLODsToLoad", additionalClass: "gltf-extension-property", isInteger: true }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "MSFT_minecraftMesh", isSelected: function () { return extensionStates["MSFT_minecraftMesh"].enabled; }, onSelect: function (value) { return extensionStates["MSFT_minecraftMesh"].enabled = value; } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "MSFT_sRGBFactors", isSelected: function () { return extensionStates["MSFT_sRGBFactors"].enabled; }, onSelect: function (value) { return extensionStates["MSFT_sRGBFactors"].enabled = value; } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "MSFT_audio_emitter", isSelected: function () { return extensionStates["MSFT_audio_emitter"].enabled; }, onSelect: function (value) { return extensionStates["MSFT_audio_emitter"].enabled = value; } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_xmp", isSelected: function () { return extensionStates["KHR_xmp"].enabled; }, onSelect: function (value) { return extensionStates["KHR_xmp"].enabled = value; } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_draco_mesh_compression", isSelected: function () { return extensionStates["KHR_draco_mesh_compression"].enabled; }, onSelect: function (value) { return extensionStates["KHR_draco_mesh_compression"].enabled = value; } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_mesh_quantization", isSelected: function () { return extensionStates["KHR_mesh_quantization"].enabled; }, onSelect: function (value) { return extensionStates["KHR_mesh_quantization"].enabled = value; } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_materials_pbrSpecularGloss...", isSelected: function () { return extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled; }, onSelect: function (value) { return extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled = value; } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_materials_clearcoat", isSelected: function () { return extensionStates["KHR_materials_clearcoat"].enabled; }, onSelect: function (value) { return extensionStates["KHR_materials_clearcoat"].enabled = value; } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_materials_ior", isSelected: function () { return extensionStates["KHR_materials_ior"].enabled; }, onSelect: function (value) { return extensionStates["KHR_materials_ior"].enabled = value; } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_materials_sheen", isSelected: function () { return extensionStates["KHR_materials_sheen"].enabled; }, onSelect: function (value) { return extensionStates["KHR_materials_sheen"].enabled = value; } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_materials_specular", isSelected: function () { return extensionStates["KHR_materials_specular"].enabled; }, onSelect: function (value) { return extensionStates["KHR_materials_specular"].enabled = value; } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_materials_unlit", isSelected: function () { return extensionStates["KHR_materials_unlit"].enabled; }, onSelect: function (value) { return extensionStates["KHR_materials_unlit"].enabled = value; } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_materials_variants", isSelected: function () { return extensionStates["KHR_materials_variants"].enabled; }, onSelect: function (value) { return extensionStates["KHR_materials_variants"].enabled = value; } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_materials_transmission", isSelected: function () { return extensionStates["KHR_materials_transmission"].enabled; }, onSelect: function (value) { return extensionStates["KHR_materials_transmission"].enabled = value; } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_lights_punctual", isSelected: function () { return extensionStates["KHR_lights_punctual"].enabled; }, onSelect: function (value) { return extensionStates["KHR_lights_punctual"].enabled = value; } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_texture_basisu", isSelected: function () { return extensionStates["KHR_texture_basisu"].enabled; }, onSelect: function (value) { return extensionStates["KHR_texture_basisu"].enabled = value; } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_texture_transform", isSelected: function () { return extensionStates["KHR_texture_transform"].enabled; }, onSelect: function (value) { return extensionStates["KHR_texture_transform"].enabled = value; } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "EXT_lights_image_based", isSelected: function () { return extensionStates["EXT_lights_image_based"].enabled; }, onSelect: function (value) { return extensionStates["EXT_lights_image_based"].enabled = value; } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "EXT_mesh_gpu_instancing", isSelected: function () { return extensionStates["EXT_mesh_gpu_instancing"].enabled; }, onSelect: function (value) { return extensionStates["EXT_mesh_gpu_instancing"].enabled = value; } }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "EXT_texture_webp", isSelected: function () { return extensionStates["EXT_texture_webp"].enabled; }, onSelect: function (value) { return extensionStates["EXT_texture_webp"].enabled = value; } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "MSFT_minecraftMesh", isSelected: function () { return extensionStates["MSFT_minecraftMesh"].enabled; }, onSelect: function (value) { return (extensionStates["MSFT_minecraftMesh"].enabled = value); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "MSFT_sRGBFactors", isSelected: function () { return extensionStates["MSFT_sRGBFactors"].enabled; }, onSelect: function (value) { return (extensionStates["MSFT_sRGBFactors"].enabled = value); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "MSFT_audio_emitter", isSelected: function () { return extensionStates["MSFT_audio_emitter"].enabled; }, onSelect: function (value) { return (extensionStates["MSFT_audio_emitter"].enabled = value); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_xmp", isSelected: function () { return extensionStates["KHR_xmp"].enabled; }, onSelect: function (value) { return (extensionStates["KHR_xmp"].enabled = value); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_draco_mesh_compression", isSelected: function () { return extensionStates["KHR_draco_mesh_compression"].enabled; }, onSelect: function (value) { return (extensionStates["KHR_draco_mesh_compression"].enabled = value); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_mesh_quantization", isSelected: function () { return extensionStates["KHR_mesh_quantization"].enabled; }, onSelect: function (value) { return (extensionStates["KHR_mesh_quantization"].enabled = value); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_materials_pbrSpecularGloss...", isSelected: function () { return extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled; }, onSelect: function (value) { return (extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled = value); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_materials_clearcoat", isSelected: function () { return extensionStates["KHR_materials_clearcoat"].enabled; }, onSelect: function (value) { return (extensionStates["KHR_materials_clearcoat"].enabled = value); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_materials_ior", isSelected: function () { return extensionStates["KHR_materials_ior"].enabled; }, onSelect: function (value) { return (extensionStates["KHR_materials_ior"].enabled = value); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_materials_sheen", isSelected: function () { return extensionStates["KHR_materials_sheen"].enabled; }, onSelect: function (value) { return (extensionStates["KHR_materials_sheen"].enabled = value); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_materials_specular", isSelected: function () { return extensionStates["KHR_materials_specular"].enabled; }, onSelect: function (value) { return (extensionStates["KHR_materials_specular"].enabled = value); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_materials_unlit", isSelected: function () { return extensionStates["KHR_materials_unlit"].enabled; }, onSelect: function (value) { return (extensionStates["KHR_materials_unlit"].enabled = value); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_materials_variants", isSelected: function () { return extensionStates["KHR_materials_variants"].enabled; }, onSelect: function (value) { return (extensionStates["KHR_materials_variants"].enabled = value); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_materials_transmission", isSelected: function () { return extensionStates["KHR_materials_transmission"].enabled; }, onSelect: function (value) { return (extensionStates["KHR_materials_transmission"].enabled = value); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_lights_punctual", isSelected: function () { return extensionStates["KHR_lights_punctual"].enabled; }, onSelect: function (value) { return (extensionStates["KHR_lights_punctual"].enabled = value); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_texture_basisu", isSelected: function () { return extensionStates["KHR_texture_basisu"].enabled; }, onSelect: function (value) { return (extensionStates["KHR_texture_basisu"].enabled = value); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "KHR_texture_transform", isSelected: function () { return extensionStates["KHR_texture_transform"].enabled; }, onSelect: function (value) { return (extensionStates["KHR_texture_transform"].enabled = value); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "EXT_lights_image_based", isSelected: function () { return extensionStates["EXT_lights_image_based"].enabled; }, onSelect: function (value) { return (extensionStates["EXT_lights_image_based"].enabled = value); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "EXT_mesh_gpu_instancing", isSelected: function () { return extensionStates["EXT_mesh_gpu_instancing"].enabled; }, onSelect: function (value) { return (extensionStates["EXT_mesh_gpu_instancing"].enabled = value); } }),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "EXT_texture_webp", isSelected: function () { return extensionStates["EXT_texture_webp"].enabled; }, onSelect: function (value) { return (extensionStates["EXT_texture_webp"].enabled = value); } }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_messageLineComponent__WEBPACK_IMPORTED_MODULE_6__["MessageLineComponent"], { text: "You need to reload your file to see these changes" })),
-            loaderState["validate"] && this.props.globalState.validationResults &&
-                this.renderValidation()));
+            loaderState["validate"] && this.props.globalState.validationResults && this.renderValidation()));
     };
     return GLTFComponent;
 }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -76940,38 +76948,38 @@ var GlobalState = /** @class */ (function () {
         this.validationResults = null;
         this.onValidationResultsUpdatedObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
         this.glTFLoaderExtensionDefaults = {
-            "MSFT_lod": { enabled: true, maxLODsToLoad: 10 },
-            "MSFT_minecraftMesh": { enabled: true },
-            "MSFT_sRGBFactors": { enabled: true },
-            "MSFT_audio_emitter": { enabled: true },
-            "KHR_xmp": { enabled: true },
-            "KHR_draco_mesh_compression": { enabled: true },
-            "KHR_mesh_quantization": { enabled: true },
-            "KHR_materials_pbrSpecularGlossiness": { enabled: true },
-            "KHR_materials_clearcoat": { enabled: true },
-            "KHR_materials_ior": { enabled: true },
-            "KHR_materials_sheen": { enabled: true },
-            "KHR_materials_specular": { enabled: true },
-            "KHR_materials_unlit": { enabled: true },
-            "KHR_materials_variants": { enabled: true },
-            "KHR_materials_transmission": { enabled: true },
-            "KHR_lights_punctual": { enabled: true },
-            "KHR_texture_basisu": { enabled: true },
-            "KHR_texture_transform": { enabled: true },
-            "EXT_lights_image_based": { enabled: true },
-            "EXT_mesh_gpu_instancing": { enabled: true },
-            "EXT_texture_webp": { enabled: true },
+            MSFT_lod: { enabled: true, maxLODsToLoad: 10 },
+            MSFT_minecraftMesh: { enabled: true },
+            MSFT_sRGBFactors: { enabled: true },
+            MSFT_audio_emitter: { enabled: true },
+            KHR_xmp: { enabled: true },
+            KHR_draco_mesh_compression: { enabled: true },
+            KHR_mesh_quantization: { enabled: true },
+            KHR_materials_pbrSpecularGlossiness: { enabled: true },
+            KHR_materials_clearcoat: { enabled: true },
+            KHR_materials_ior: { enabled: true },
+            KHR_materials_sheen: { enabled: true },
+            KHR_materials_specular: { enabled: true },
+            KHR_materials_unlit: { enabled: true },
+            KHR_materials_variants: { enabled: true },
+            KHR_materials_transmission: { enabled: true },
+            KHR_lights_punctual: { enabled: true },
+            KHR_texture_basisu: { enabled: true },
+            KHR_texture_transform: { enabled: true },
+            EXT_lights_image_based: { enabled: true },
+            EXT_mesh_gpu_instancing: { enabled: true },
+            EXT_texture_webp: { enabled: true },
         };
         this.glTFLoaderDefaults = {
-            "animationStartMode": babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_0__["GLTFLoaderAnimationStartMode"].FIRST,
-            "capturePerformanceCounters": false,
-            "compileMaterials": false,
-            "compileShadowGenerators": false,
-            "coordinateSystemMode": babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_0__["GLTFLoaderCoordinateSystemMode"].AUTO,
-            "loggingEnabled": false,
-            "transparencyAsCoverage": false,
-            "useClipPlane": false,
-            "validate": true,
+            animationStartMode: typeof babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_0__["GLTFLoaderAnimationStartMode"] !== 'undefined' ? babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_0__["GLTFLoaderAnimationStartMode"].FIRST : 1,
+            capturePerformanceCounters: false,
+            compileMaterials: false,
+            compileShadowGenerators: false,
+            coordinateSystemMode: typeof babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_0__["GLTFLoaderCoordinateSystemMode"] !== 'undefined' ? babylonjs_loaders_glTF_index__WEBPACK_IMPORTED_MODULE_0__["GLTFLoaderCoordinateSystemMode"].AUTO : 0,
+            loggingEnabled: false,
+            transparencyAsCoverage: false,
+            useClipPlane: false,
+            validate: true,
         };
         this.glTFLoaderExtensions = {};
         this.blockMutationUpdates = false;

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

@@ -33,7 +33,7 @@ declare module INSPECTOR {
         };
         validationResults: BABYLON.Nullable<BABYLON.GLTF2.IGLTFValidationResults>;
         onValidationResultsUpdatedObservable: BABYLON.Observable<BABYLON.Nullable<BABYLON.GLTF2.IGLTFValidationResults>>;
-        onExtensionLoadedObservable: BABYLON.Observable<BABYLON.IGLTFLoaderExtension>;
+        onExtensionLoadedObservable: BABYLON.Observable<import("babylonjs-loaders/glTF/index").IGLTFLoaderExtension>;
         glTFLoaderExtensionDefaults: {
             [name: string]: {
                 [key: string]: any;
@@ -43,7 +43,7 @@ declare module INSPECTOR {
             [key: string]: any;
         };
         glTFLoaderExtensions: {
-            [key: string]: BABYLON.IGLTFLoaderExtension;
+            [key: string]: import("babylonjs-loaders/glTF/index").IGLTFLoaderExtension;
         };
         blockMutationUpdates: boolean;
         selectedLineContainerTitles: Array<string>;
@@ -56,7 +56,7 @@ declare module INSPECTOR {
         get ignoreBackfacesForPicking(): boolean;
         set ignoreBackfacesForPicking(value: boolean);
         init(propertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>): void;
-        prepareGLTFPlugin(loader: BABYLON.GLTFFileLoader): void;
+        prepareGLTFPlugin(loader: import("babylonjs-loaders/glTF/index").GLTFFileLoader): void;
         lightGizmos: Array<BABYLON.LightGizmo>;
         enableLightGizmo(light: BABYLON.Light, enable?: boolean): void;
         cameraGizmos: Array<BABYLON.CameraGizmo>;

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

@@ -21,7 +21,6 @@ declare module "babylonjs-inspector/components/replayRecorder" {
     }
 }
 declare module "babylonjs-inspector/components/globalState" {
-    import { GLTFFileLoader, IGLTFLoaderExtension } from "babylonjs-loaders/glTF/index";
     import { IGLTFValidationResults } from "babylonjs-gltf2interface";
     import { Nullable } from "babylonjs/types";
     import { Observable, Observer } from "babylonjs/Misc/observable";
@@ -46,7 +45,7 @@ declare module "babylonjs-inspector/components/globalState" {
         };
         validationResults: Nullable<IGLTFValidationResults>;
         onValidationResultsUpdatedObservable: Observable<Nullable<IGLTFValidationResults>>;
-        onExtensionLoadedObservable: Observable<IGLTFLoaderExtension>;
+        onExtensionLoadedObservable: Observable<import("babylonjs-loaders/glTF/index").IGLTFLoaderExtension>;
         glTFLoaderExtensionDefaults: {
             [name: string]: {
                 [key: string]: any;
@@ -56,7 +55,7 @@ declare module "babylonjs-inspector/components/globalState" {
             [key: string]: any;
         };
         glTFLoaderExtensions: {
-            [key: string]: IGLTFLoaderExtension;
+            [key: string]: import("babylonjs-loaders/glTF/index").IGLTFLoaderExtension;
         };
         blockMutationUpdates: boolean;
         selectedLineContainerTitles: Array<string>;
@@ -69,7 +68,7 @@ declare module "babylonjs-inspector/components/globalState" {
         get ignoreBackfacesForPicking(): boolean;
         set ignoreBackfacesForPicking(value: boolean);
         init(propertyChangedObservable: Observable<PropertyChangedEvent>): void;
-        prepareGLTFPlugin(loader: GLTFFileLoader): void;
+        prepareGLTFPlugin(loader: import("babylonjs-loaders/glTF/index").GLTFFileLoader): void;
         lightGizmos: Array<LightGizmo>;
         enableLightGizmo(light: Light, enable?: boolean): void;
         cameraGizmos: Array<CameraGizmo>;
@@ -4576,7 +4575,7 @@ declare module INSPECTOR {
         };
         validationResults: BABYLON.Nullable<BABYLON.GLTF2.IGLTFValidationResults>;
         onValidationResultsUpdatedObservable: BABYLON.Observable<BABYLON.Nullable<BABYLON.GLTF2.IGLTFValidationResults>>;
-        onExtensionLoadedObservable: BABYLON.Observable<BABYLON.IGLTFLoaderExtension>;
+        onExtensionLoadedObservable: BABYLON.Observable<import("babylonjs-loaders/glTF/index").IGLTFLoaderExtension>;
         glTFLoaderExtensionDefaults: {
             [name: string]: {
                 [key: string]: any;
@@ -4586,7 +4585,7 @@ declare module INSPECTOR {
             [key: string]: any;
         };
         glTFLoaderExtensions: {
-            [key: string]: BABYLON.IGLTFLoaderExtension;
+            [key: string]: import("babylonjs-loaders/glTF/index").IGLTFLoaderExtension;
         };
         blockMutationUpdates: boolean;
         selectedLineContainerTitles: Array<string>;
@@ -4599,7 +4598,7 @@ declare module INSPECTOR {
         get ignoreBackfacesForPicking(): boolean;
         set ignoreBackfacesForPicking(value: boolean);
         init(propertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>): void;
-        prepareGLTFPlugin(loader: BABYLON.GLTFFileLoader): void;
+        prepareGLTFPlugin(loader: import("babylonjs-loaders/glTF/index").GLTFFileLoader): void;
         lightGizmos: Array<BABYLON.LightGizmo>;
         enableLightGizmo(light: BABYLON.Light, enable?: boolean): void;
         cameraGizmos: Array<BABYLON.CameraGizmo>;

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "4.2.0-beta.9",
+    "version": "4.2.0-beta.10",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -29,12 +29,12 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-beta.9",
-        "babylonjs-gui": "4.2.0-beta.9",
-        "babylonjs-loaders": "4.2.0-beta.9",
-        "babylonjs-materials": "4.2.0-beta.9",
-        "babylonjs-serializers": "4.2.0-beta.9",
-        "babylonjs-gltf2interface": "4.2.0-beta.9"
+        "babylonjs": "4.2.0-beta.10",
+        "babylonjs-gui": "4.2.0-beta.10",
+        "babylonjs-loaders": "4.2.0-beta.10",
+        "babylonjs-materials": "4.2.0-beta.10",
+        "babylonjs-serializers": "4.2.0-beta.10",
+        "babylonjs-gltf2interface": "4.2.0-beta.10"
     },
     "peerDependencies": {
         "@types/react": ">=16.7.3",

dist/preview release/loaders/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-loaders",
     "description": "The Babylon.js file loaders library is an extension you can use to load different 3D file types into a Babylon scene.",
-    "version": "4.2.0-beta.9",
+    "version": "4.2.0-beta.10",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,8 +28,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "4.2.0-beta.9",
-        "babylonjs": "4.2.0-beta.9"
+        "babylonjs-gltf2interface": "4.2.0-beta.10",
+        "babylonjs": "4.2.0-beta.10"
     },
     "engines": {
         "node": "*"

dist/preview release/materialsLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-materials",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "4.2.0-beta.9",
+    "version": "4.2.0-beta.10",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-beta.9"
+        "babylonjs": "4.2.0-beta.10"
     },
     "engines": {
         "node": "*"

dist/preview release/nodeEditor/package.json

@@ -4,14 +4,14 @@
     },
     "name": "babylonjs-node-editor",
     "description": "The Babylon.js node material editor.",
-    "version": "4.2.0-beta.9",
+    "version": "4.2.0-beta.10",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
     },
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-beta.9"
+        "babylonjs": "4.2.0-beta.10"
     },
     "files": [
         "babylon.nodeEditor.max.js.map",

dist/preview release/package.json

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

dist/preview release/packagesSizeBaseLine.json

@@ -1 +1 @@
-{"thinEngineOnly":118502,"engineOnly":154942,"sceneOnly":521474,"minGridMaterial":662820,"minStandardMaterial":818984}
+{"thinEngineOnly":118504,"engineOnly":154944,"sceneOnly":521788,"minGridMaterial":663134,"minStandardMaterial":819298}

dist/preview release/postProcessesLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-post-process",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "4.2.0-beta.9",
+    "version": "4.2.0-beta.10",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-beta.9"
+        "babylonjs": "4.2.0-beta.10"
     },
     "engines": {
         "node": "*"

dist/preview release/proceduralTexturesLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-procedural-textures",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "4.2.0-beta.9",
+    "version": "4.2.0-beta.10",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-beta.9"
+        "babylonjs": "4.2.0-beta.10"
     },
     "engines": {
         "node": "*"

dist/preview release/serializers/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-serializers",
     "description": "The Babylon.js serializers library is an extension you can use to serialize Babylon scenes.",
-    "version": "4.2.0-beta.9",
+    "version": "4.2.0-beta.10",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,8 +28,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-beta.9",
-        "babylonjs-gltf2interface": "4.2.0-beta.9"
+        "babylonjs": "4.2.0-beta.10",
+        "babylonjs-gltf2interface": "4.2.0-beta.10"
     },
     "engines": {
         "node": "*"

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

@@ -5092,14 +5092,14 @@ declare module "babylonjs/Maths/math.path" {
         private _alignTangentsWithPath;
         private readonly _pointAtData;
         /**
-        * new Path3D(path, normal, raw)
-        * Creates a Path3D. A Path3D is a logical math object, so not a mesh.
-        * please read the description in the tutorial : https://doc.babylonjs.com/how_to/how_to_use_path3d
-        * @param path an array of Vector3, the curve axis of the Path3D
-        * @param firstNormal (options) Vector3, the first wanted normal to the curve. Ex (0, 1, 0) for a vertical normal.
-        * @param raw (optional, default false) : boolean, if true the returned Path3D isn't normalized. Useful to depict path acceleration or speed.
-        * @param alignTangentsWithPath (optional, default false) : boolean, if true the tangents will be aligned with the path.
-        */
+         * new Path3D(path, normal, raw)
+         * Creates a Path3D. A Path3D is a logical math object, so not a mesh.
+         * please read the description in the tutorial : https://doc.babylonjs.com/how_to/how_to_use_path3d
+         * @param path an array of Vector3, the curve axis of the Path3D
+         * @param firstNormal (options) Vector3, the first wanted normal to the curve. Ex (0, 1, 0) for a vertical normal.
+         * @param raw (optional, default false) : boolean, if true the returned Path3D isn't normalized. Useful to depict path acceleration or speed.
+         * @param alignTangentsWithPath (optional, default false) : boolean, if true the tangents will be aligned with the path.
+         */
         constructor(
         /**
          * an array of Vector3, the curve axis of the Path3D
@@ -36496,6 +36496,7 @@ declare module "babylonjs/Meshes/abstractMesh" {
         _isActiveIntermediate: boolean;
         _onlyForInstancesIntermediate: boolean;
         _actAsRegularMesh: boolean;
+        _currentLOD: Nullable<AbstractMesh>;
     }
     /**
      * Class used to store all common mesh properties
@@ -43493,6 +43494,7 @@ declare module "babylonjs/Inputs/scene.inputManager" {
         static ExclusiveDoubleClickMode: boolean;
         /** This is a defensive check to not allow control attachment prior to an already active one. If already attached, previous control is unattached before attaching the new one. */
         private _alreadyAttached;
+        private _alreadyAttachedTo;
         private _wheelEventName;
         private _onPointerMove;
         private _onPointerDown;
@@ -43523,6 +43525,7 @@ declare module "babylonjs/Inputs/scene.inputManager" {
         private _meshUnderPointerId;
         private _onKeyDown;
         private _onKeyUp;
+        private _keyboardIsAttached;
         private _onCanvasFocusObserver;
         private _onCanvasBlurObserver;
         private _scene;
@@ -85829,14 +85832,14 @@ declare module BABYLON {
         private _alignTangentsWithPath;
         private readonly _pointAtData;
         /**
-        * new Path3D(path, normal, raw)
-        * Creates a Path3D. A Path3D is a logical math object, so not a mesh.
-        * please read the description in the tutorial : https://doc.babylonjs.com/how_to/how_to_use_path3d
-        * @param path an array of Vector3, the curve axis of the Path3D
-        * @param firstNormal (options) Vector3, the first wanted normal to the curve. Ex (0, 1, 0) for a vertical normal.
-        * @param raw (optional, default false) : boolean, if true the returned Path3D isn't normalized. Useful to depict path acceleration or speed.
-        * @param alignTangentsWithPath (optional, default false) : boolean, if true the tangents will be aligned with the path.
-        */
+         * new Path3D(path, normal, raw)
+         * Creates a Path3D. A Path3D is a logical math object, so not a mesh.
+         * please read the description in the tutorial : https://doc.babylonjs.com/how_to/how_to_use_path3d
+         * @param path an array of Vector3, the curve axis of the Path3D
+         * @param firstNormal (options) Vector3, the first wanted normal to the curve. Ex (0, 1, 0) for a vertical normal.
+         * @param raw (optional, default false) : boolean, if true the returned Path3D isn't normalized. Useful to depict path acceleration or speed.
+         * @param alignTangentsWithPath (optional, default false) : boolean, if true the tangents will be aligned with the path.
+         */
         constructor(
         /**
          * an array of Vector3, the curve axis of the Path3D
@@ -115921,6 +115924,7 @@ declare module BABYLON {
         _isActiveIntermediate: boolean;
         _onlyForInstancesIntermediate: boolean;
         _actAsRegularMesh: boolean;
+        _currentLOD: Nullable<AbstractMesh>;
     }
     /**
      * Class used to store all common mesh properties
@@ -122754,6 +122758,7 @@ declare module BABYLON {
         static ExclusiveDoubleClickMode: boolean;
         /** This is a defensive check to not allow control attachment prior to an already active one. If already attached, previous control is unattached before attaching the new one. */
         private _alreadyAttached;
+        private _alreadyAttachedTo;
         private _wheelEventName;
         private _onPointerMove;
         private _onPointerDown;
@@ -122784,6 +122789,7 @@ declare module BABYLON {
         private _meshUnderPointerId;
         private _onKeyDown;
         private _onKeyUp;
+        private _keyboardIsAttached;
         private _onCanvasFocusObserver;
         private _onCanvasBlurObserver;
         private _scene;

dist/preview release/what's new.md

@@ -126,6 +126,8 @@
 - Ammo.js IDL exposed property update and raycast vehicle stablization support ([MackeyK24](https://github.com/MackeyK24))
 - Recast.js plugin nav mesh and crowd agent to ref performance optimizations. ([MackeyK24](https://github.com/MackeyK24))
 - Added `scene.physicsEnabled` boolean ([Deltakosh](https://github.com/deltakosh))
+- Fixed an issue with transformation set after physics body was created using Cannon.js (excluding height and plane) ([#7928](https://github.com/BabylonJS/Babylon.js/issues/7928)) ([RaananW](https://github.com/RaananW))
+- Fix an issue with compound creation and scaling preset ([#8888](https://github.com/BabylonJS/Babylon.js/issues/8888)) ([RaananW](https://github.com/RaananW))
 
 ### Loaders
 
@@ -306,7 +308,6 @@
 - Make sure bone matrices are up to date when calling `TransformNode.attachToBone` ([Popov72](https://github.com/Popov72))
 - Fix display problem with transparent objects and SSAO2 pipeline (bug in the `GeometryBufferRenderer`) ([Popov72](https://github.com/Popov72))
 - Fixed `Sound` not accepting a `TransformNode` as a source for spatial sound ([Poolminer](https://github.com/Poolminer))
-- Fixed an issue with transformation set after physics body was created using Cannon.js (excluding height and plane) ([#7928](https://github.com/BabylonJS/Babylon.js/issues/7928)) ([RaananW](https://github.com/RaananW))
 - Fix bug when using `ShadowOnlyMaterial` with Cascaded Shadow Map and `autoCalcDepthBounds` is `true` ([Popov72](https://github.com/Popov72))
 - Fix OBJ serializer default scene scene handedness causing [OBJ Mirror export](https://forum.babylonjs.com/t/obj-export-mirrored/10835/10)
 - Fix bug when using shadows + instances + transparent meshes + `transparencyShadow = false` ([Popov72](https://github.com/Popov72))
@@ -337,6 +338,8 @@
 - Changed use of mousemove to pointermove in freeCameraMouseInput and flyCameraMouseInput to fix issue with Firefox ([PolygonalSun](https://github.com/PolygonalSun))
 - Fixed `TriPlanarMaterial` to compute the right world normals ([julien-moreau](https://github.com/julien-moreau))
 - Fix `SkeletonViewer` to use utillity layer with custom lighting to improve debug mesh visibility ([Drigax](https://github.com/drigax))
+- Fix same sub mesh being rendered multiple times in the shadow map ([Popov72](https://github.com/Popov72))
+- Fix incorrect shadows on the master mesh when using a lod mesh ([Popov72](https://github.com/Popov72))
 
 ## Breaking changes
 

inspector/src/components/actionTabs/tabs/tools/gltfComponent.tsx

@@ -9,8 +9,8 @@ import { MessageLineComponent } from "../../lines/messageLineComponent";
 import { faCheck, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import { TextLineComponent } from "../../lines/textLineComponent";
 import { GLTFLoaderCoordinateSystemMode, GLTFLoaderAnimationStartMode } from "babylonjs-loaders/glTF/index";
-import { Nullable } from 'babylonjs/types';
-import { Observer } from 'babylonjs/Misc/observable';
+import { Nullable } from "babylonjs/types";
+import { Observer } from "babylonjs/Misc/observable";
 import { IGLTFValidationResults } from "babylonjs-gltf2interface";
 
 interface IGLTFComponentProps {
@@ -69,14 +69,8 @@ export class GLTFComponent extends React.Component<IGLTFComponentProps> {
 
         return (
             <LineContainerComponent globalState={this.props.globalState} title="GLTF VALIDATION" closed={!issues.numErrors && !issues.numWarnings}>
-                {
-                    issues.numErrors !== 0 &&
-                    <MessageLineComponent text="Your file has some validation issues" icon={faTimesCircle} color="Red" />
-                }
-                {
-                    issues.numErrors === 0 &&
-                    <MessageLineComponent text="Your file is a valid glTF file" icon={faCheck} color="Green" />
-                }
+                {issues.numErrors !== 0 && <MessageLineComponent text="Your file has some validation issues" icon={faTimesCircle} color="Red" />}
+                {issues.numErrors === 0 && <MessageLineComponent text="Your file is a valid glTF file" icon={faCheck} color="Green" />}
                 <TextLineComponent label="Errors" value={issues.numErrors.toString()} />
                 <TextLineComponent label="Warnings" value={issues.numWarnings.toString()} />
                 <TextLineComponent label="Infos" value={issues.numInfos.toString()} />
@@ -90,16 +84,29 @@ export class GLTFComponent extends React.Component<IGLTFComponentProps> {
         const extensionStates = this.props.globalState.glTFLoaderExtensionDefaults;
         const loaderState = this.props.globalState.glTFLoaderDefaults;
 
-        var animationStartMode = [
-            { label: "None", value: GLTFLoaderAnimationStartMode.NONE },
-            { label: "First", value: GLTFLoaderAnimationStartMode.FIRST },
-            { label: "ALL", value: GLTFLoaderAnimationStartMode.ALL }
-        ];
+        var animationStartMode =
+            (typeof GLTFLoaderAnimationStartMode !== "undefined"
+                ? [
+                      { label: "None", value: GLTFLoaderAnimationStartMode.NONE },
+                      { label: "First", value: GLTFLoaderAnimationStartMode.FIRST },
+                      { label: "ALL", value: GLTFLoaderAnimationStartMode.ALL },
+                  ]
+                : [
+                    { label: "None", value: 0 },
+                    { label: "First", value: 1 },
+                    { label: "ALL", value: 2 },
+                ]);
 
-        var coordinateSystemMode = [
-            { label: "Auto", value: GLTFLoaderCoordinateSystemMode.AUTO },
-            { label: "Right handed", value: GLTFLoaderCoordinateSystemMode.FORCE_RIGHT_HANDED }
-        ];
+        var coordinateSystemMode =
+            typeof GLTFLoaderCoordinateSystemMode !== "undefined"
+                ? [
+                      { label: "Auto", value: GLTFLoaderCoordinateSystemMode.AUTO },
+                      { label: "Right handed", value: GLTFLoaderCoordinateSystemMode.FORCE_RIGHT_HANDED },
+                  ]
+                : [
+                    { label: "Auto", value: 0 },
+                    { label: "Right handed", value: 1 },
+                ];
 
         return (
             <div>
@@ -116,35 +123,32 @@ export class GLTFComponent extends React.Component<IGLTFComponentProps> {
                     <MessageLineComponent text="You need to reload your file to see these changes" />
                 </LineContainerComponent>
                 <LineContainerComponent globalState={this.props.globalState} title="GLTF EXTENSIONS" closed={true}>
-                    <CheckBoxLineComponent label="MSFT_lod" isSelected={() => extensionStates["MSFT_lod"].enabled} onSelect={(value) => extensionStates["MSFT_lod"].enabled = value} />
+                    <CheckBoxLineComponent label="MSFT_lod" isSelected={() => extensionStates["MSFT_lod"].enabled} onSelect={(value) => (extensionStates["MSFT_lod"].enabled = value)} />
                     <FloatLineComponent label="Maximum LODs" target={extensionStates["MSFT_lod"]} propertyName="maxLODsToLoad" additionalClass="gltf-extension-property" isInteger={true} />
-                    <CheckBoxLineComponent label="MSFT_minecraftMesh" isSelected={() => extensionStates["MSFT_minecraftMesh"].enabled} onSelect={(value) => extensionStates["MSFT_minecraftMesh"].enabled = value} />
-                    <CheckBoxLineComponent label="MSFT_sRGBFactors" isSelected={() => extensionStates["MSFT_sRGBFactors"].enabled} onSelect={(value) => extensionStates["MSFT_sRGBFactors"].enabled = value} />
-                    <CheckBoxLineComponent label="MSFT_audio_emitter" isSelected={() => extensionStates["MSFT_audio_emitter"].enabled} onSelect={(value) => extensionStates["MSFT_audio_emitter"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_xmp" isSelected={() => extensionStates["KHR_xmp"].enabled} onSelect={(value) => extensionStates["KHR_xmp"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_draco_mesh_compression" isSelected={() => extensionStates["KHR_draco_mesh_compression"].enabled} onSelect={(value) => extensionStates["KHR_draco_mesh_compression"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_mesh_quantization" isSelected={() => extensionStates["KHR_mesh_quantization"].enabled} onSelect={(value) => extensionStates["KHR_mesh_quantization"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_materials_pbrSpecularGloss..." isSelected={() => extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled} onSelect={(value) => extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_materials_clearcoat" isSelected={() => extensionStates["KHR_materials_clearcoat"].enabled} onSelect={(value) => extensionStates["KHR_materials_clearcoat"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_materials_ior" isSelected={() => extensionStates["KHR_materials_ior"].enabled} onSelect={(value) => extensionStates["KHR_materials_ior"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_materials_sheen" isSelected={() => extensionStates["KHR_materials_sheen"].enabled} onSelect={(value) => extensionStates["KHR_materials_sheen"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_materials_specular" isSelected={() => extensionStates["KHR_materials_specular"].enabled} onSelect={(value) => extensionStates["KHR_materials_specular"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_materials_unlit" isSelected={() => extensionStates["KHR_materials_unlit"].enabled} onSelect={(value) => extensionStates["KHR_materials_unlit"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_materials_variants" isSelected={() => extensionStates["KHR_materials_variants"].enabled} onSelect={(value) => extensionStates["KHR_materials_variants"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_materials_transmission" isSelected={() => extensionStates["KHR_materials_transmission"].enabled} onSelect={(value) => extensionStates["KHR_materials_transmission"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_lights_punctual" isSelected={() => extensionStates["KHR_lights_punctual"].enabled} onSelect={(value) => extensionStates["KHR_lights_punctual"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_texture_basisu" isSelected={() => extensionStates["KHR_texture_basisu"].enabled} onSelect={(value) => extensionStates["KHR_texture_basisu"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_texture_transform" isSelected={() => extensionStates["KHR_texture_transform"].enabled} onSelect={(value) => extensionStates["KHR_texture_transform"].enabled = value} />
-                    <CheckBoxLineComponent label="EXT_lights_image_based" isSelected={() => extensionStates["EXT_lights_image_based"].enabled} onSelect={(value) => extensionStates["EXT_lights_image_based"].enabled = value} />
-                    <CheckBoxLineComponent label="EXT_mesh_gpu_instancing" isSelected={() => extensionStates["EXT_mesh_gpu_instancing"].enabled} onSelect={(value) => extensionStates["EXT_mesh_gpu_instancing"].enabled = value} />
-                    <CheckBoxLineComponent label="EXT_texture_webp" isSelected={() => extensionStates["EXT_texture_webp"].enabled} onSelect={(value) => extensionStates["EXT_texture_webp"].enabled = value} />
+                    <CheckBoxLineComponent label="MSFT_minecraftMesh" isSelected={() => extensionStates["MSFT_minecraftMesh"].enabled} onSelect={(value) => (extensionStates["MSFT_minecraftMesh"].enabled = value)} />
+                    <CheckBoxLineComponent label="MSFT_sRGBFactors" isSelected={() => extensionStates["MSFT_sRGBFactors"].enabled} onSelect={(value) => (extensionStates["MSFT_sRGBFactors"].enabled = value)} />
+                    <CheckBoxLineComponent label="MSFT_audio_emitter" isSelected={() => extensionStates["MSFT_audio_emitter"].enabled} onSelect={(value) => (extensionStates["MSFT_audio_emitter"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_xmp" isSelected={() => extensionStates["KHR_xmp"].enabled} onSelect={(value) => (extensionStates["KHR_xmp"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_draco_mesh_compression" isSelected={() => extensionStates["KHR_draco_mesh_compression"].enabled} onSelect={(value) => (extensionStates["KHR_draco_mesh_compression"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_mesh_quantization" isSelected={() => extensionStates["KHR_mesh_quantization"].enabled} onSelect={(value) => (extensionStates["KHR_mesh_quantization"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_materials_pbrSpecularGloss..." isSelected={() => extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled} onSelect={(value) => (extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_materials_clearcoat" isSelected={() => extensionStates["KHR_materials_clearcoat"].enabled} onSelect={(value) => (extensionStates["KHR_materials_clearcoat"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_materials_ior" isSelected={() => extensionStates["KHR_materials_ior"].enabled} onSelect={(value) => (extensionStates["KHR_materials_ior"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_materials_sheen" isSelected={() => extensionStates["KHR_materials_sheen"].enabled} onSelect={(value) => (extensionStates["KHR_materials_sheen"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_materials_specular" isSelected={() => extensionStates["KHR_materials_specular"].enabled} onSelect={(value) => (extensionStates["KHR_materials_specular"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_materials_unlit" isSelected={() => extensionStates["KHR_materials_unlit"].enabled} onSelect={(value) => (extensionStates["KHR_materials_unlit"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_materials_variants" isSelected={() => extensionStates["KHR_materials_variants"].enabled} onSelect={(value) => (extensionStates["KHR_materials_variants"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_materials_transmission" isSelected={() => extensionStates["KHR_materials_transmission"].enabled} onSelect={(value) => (extensionStates["KHR_materials_transmission"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_lights_punctual" isSelected={() => extensionStates["KHR_lights_punctual"].enabled} onSelect={(value) => (extensionStates["KHR_lights_punctual"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_texture_basisu" isSelected={() => extensionStates["KHR_texture_basisu"].enabled} onSelect={(value) => (extensionStates["KHR_texture_basisu"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_texture_transform" isSelected={() => extensionStates["KHR_texture_transform"].enabled} onSelect={(value) => (extensionStates["KHR_texture_transform"].enabled = value)} />
+                    <CheckBoxLineComponent label="EXT_lights_image_based" isSelected={() => extensionStates["EXT_lights_image_based"].enabled} onSelect={(value) => (extensionStates["EXT_lights_image_based"].enabled = value)} />
+                    <CheckBoxLineComponent label="EXT_mesh_gpu_instancing" isSelected={() => extensionStates["EXT_mesh_gpu_instancing"].enabled} onSelect={(value) => (extensionStates["EXT_mesh_gpu_instancing"].enabled = value)} />
+                    <CheckBoxLineComponent label="EXT_texture_webp" isSelected={() => extensionStates["EXT_texture_webp"].enabled} onSelect={(value) => (extensionStates["EXT_texture_webp"].enabled = value)} />
                     <MessageLineComponent text="You need to reload your file to see these changes" />
                 </LineContainerComponent>
-                {
-                    loaderState["validate"] && this.props.globalState.validationResults &&
-                    this.renderValidation()
-                }
+                {loaderState["validate"] && this.props.globalState.validationResults && this.renderValidation()}
             </div>
         );
     }
-}
+}

inspector/src/components/globalState.ts

@@ -1,4 +1,4 @@
-import { GLTFFileLoader, IGLTFLoaderExtension, GLTFLoaderAnimationStartMode, GLTFLoaderCoordinateSystemMode } from "babylonjs-loaders/glTF/index";
+import { GLTFLoaderAnimationStartMode, GLTFLoaderCoordinateSystemMode } from "babylonjs-loaders/glTF/index";
 import { IGLTFValidationResults } from "babylonjs-gltf2interface";
 
 import { Nullable } from "babylonjs/types";
@@ -10,8 +10,8 @@ import { Camera } from "babylonjs/Cameras/camera";
 import { LightGizmo } from "babylonjs/Gizmos/lightGizmo";
 import { CameraGizmo } from "babylonjs/Gizmos/cameraGizmo";
 import { PropertyChangedEvent } from "./propertyChangedEvent";
-import { ReplayRecorder } from './replayRecorder';
-import { DataStorage } from 'babylonjs/Misc/dataStorage';
+import { ReplayRecorder } from "./replayRecorder";
+import { DataStorage } from "babylonjs/Misc/dataStorage";
 
 export class GlobalState {
     public onSelectionChangedObservable: Observable<any>;
@@ -26,45 +26,45 @@ export class GlobalState {
     public validationResults: Nullable<IGLTFValidationResults> = null;
     public onValidationResultsUpdatedObservable = new Observable<Nullable<IGLTFValidationResults>>();
 
-    public onExtensionLoadedObservable: Observable<IGLTFLoaderExtension>;
+    public onExtensionLoadedObservable: Observable<import("babylonjs-loaders/glTF/index").IGLTFLoaderExtension>;
 
     public glTFLoaderExtensionDefaults: { [name: string]: { [key: string]: any } } = {
-        "MSFT_lod": { enabled: true, maxLODsToLoad: 10 },
-        "MSFT_minecraftMesh": { enabled: true },
-        "MSFT_sRGBFactors": { enabled: true },
-        "MSFT_audio_emitter": { enabled: true },
-        "KHR_xmp": { enabled: true },
-        "KHR_draco_mesh_compression": { enabled: true },
-        "KHR_mesh_quantization": { enabled: true },
-        "KHR_materials_pbrSpecularGlossiness": { enabled: true },
-        "KHR_materials_clearcoat": { enabled: true },
-        "KHR_materials_ior": { enabled: true },
-        "KHR_materials_sheen": { enabled: true },
-        "KHR_materials_specular": { enabled: true },
-        "KHR_materials_unlit": { enabled: true },
-        "KHR_materials_variants": { enabled: true },
-        "KHR_materials_transmission": { enabled: true },
-        "KHR_lights_punctual": { enabled: true },
-        "KHR_texture_basisu": { enabled: true },
-        "KHR_texture_transform": { enabled: true },
-        "EXT_lights_image_based": { enabled: true },
-        "EXT_mesh_gpu_instancing": { enabled: true },
-        "EXT_texture_webp": { enabled: true },
+        MSFT_lod: { enabled: true, maxLODsToLoad: 10 },
+        MSFT_minecraftMesh: { enabled: true },
+        MSFT_sRGBFactors: { enabled: true },
+        MSFT_audio_emitter: { enabled: true },
+        KHR_xmp: { enabled: true },
+        KHR_draco_mesh_compression: { enabled: true },
+        KHR_mesh_quantization: { enabled: true },
+        KHR_materials_pbrSpecularGlossiness: { enabled: true },
+        KHR_materials_clearcoat: { enabled: true },
+        KHR_materials_ior: { enabled: true },
+        KHR_materials_sheen: { enabled: true },
+        KHR_materials_specular: { enabled: true },
+        KHR_materials_unlit: { enabled: true },
+        KHR_materials_variants: { enabled: true },
+        KHR_materials_transmission: { enabled: true },
+        KHR_lights_punctual: { enabled: true },
+        KHR_texture_basisu: { enabled: true },
+        KHR_texture_transform: { enabled: true },
+        EXT_lights_image_based: { enabled: true },
+        EXT_mesh_gpu_instancing: { enabled: true },
+        EXT_texture_webp: { enabled: true },
     };
 
     public glTFLoaderDefaults: { [key: string]: any } = {
-        "animationStartMode": GLTFLoaderAnimationStartMode.FIRST,
-        "capturePerformanceCounters": false,
-        "compileMaterials": false,
-        "compileShadowGenerators": false,
-        "coordinateSystemMode": GLTFLoaderCoordinateSystemMode.AUTO,
-        "loggingEnabled": false,
-        "transparencyAsCoverage": false,
-        "useClipPlane": false,
-        "validate": true,
+        animationStartMode: typeof GLTFLoaderAnimationStartMode !== 'undefined' ? GLTFLoaderAnimationStartMode.FIRST : 1 ,
+        capturePerformanceCounters: false,
+        compileMaterials: false,
+        compileShadowGenerators: false,
+        coordinateSystemMode: typeof GLTFLoaderCoordinateSystemMode !== 'undefined' ? GLTFLoaderCoordinateSystemMode.AUTO : 0,
+        loggingEnabled: false,
+        transparencyAsCoverage: false,
+        useClipPlane: false,
+        validate: true,
     };
 
-    public glTFLoaderExtensions: { [key: string]: IGLTFLoaderExtension } = {};
+    public glTFLoaderExtensions: { [key: string]: import("babylonjs-loaders/glTF/index").IGLTFLoaderExtension } = {};
 
     public blockMutationUpdates = false;
     public selectedLineContainerTitles: Array<string> = [];
@@ -107,12 +107,12 @@ export class GlobalState {
     public init(propertyChangedObservable: Observable<PropertyChangedEvent>) {
         this.onPropertyChangedObservable = propertyChangedObservable;
 
-        this.onNewSceneObservable.add(scene => {
+        this.onNewSceneObservable.add((scene) => {
             this.recorder.cancel();
         });
     }
 
-    public prepareGLTFPlugin(loader: GLTFFileLoader) {
+    public prepareGLTFPlugin(loader: import("babylonjs-loaders/glTF/index").GLTFFileLoader) {
         this.glTFLoaderExtensions = {};
         var loaderState = this.glTFLoaderDefaults;
         if (loaderState !== undefined) {
@@ -121,7 +121,7 @@ export class GlobalState {
             }
         }
 
-        loader.onExtensionLoadedObservable.add((extension: IGLTFLoaderExtension) => {
+        loader.onExtensionLoadedObservable.add((extension: import("babylonjs-loaders/glTF/index").IGLTFLoaderExtension) => {
             var extensionState = this.glTFLoaderExtensionDefaults[extension.name];
             if (extensionState !== undefined) {
                 for (const key in extensionState) {
@@ -153,11 +153,11 @@ export class GlobalState {
     public enableLightGizmo(light: Light, enable = true) {
         if (enable) {
             if (!light.reservedDataStore) {
-                light.reservedDataStore = {}
+                light.reservedDataStore = {};
             }
             if (!light.reservedDataStore.lightGizmo) {
                 light.reservedDataStore.lightGizmo = new LightGizmo();
-                this.lightGizmos.push(light.reservedDataStore.lightGizmo)
+                this.lightGizmos.push(light.reservedDataStore.lightGizmo);
                 light.reservedDataStore.lightGizmo.light = light;
                 light.reservedDataStore.lightGizmo.material.reservedDataStore = { hidden: true };
             }
@@ -172,11 +172,11 @@ export class GlobalState {
     public enableCameraGizmo(camera: Camera, enable = true) {
         if (enable) {
             if (!camera.reservedDataStore) {
-                camera.reservedDataStore = {}
+                camera.reservedDataStore = {};
             }
             if (!camera.reservedDataStore.cameraGizmo) {
                 camera.reservedDataStore.cameraGizmo = new CameraGizmo();
-                this.cameraGizmos.push(camera.reservedDataStore.cameraGizmo)
+                this.cameraGizmos.push(camera.reservedDataStore.cameraGizmo);
                 camera.reservedDataStore.cameraGizmo.camera = camera;
                 camera.reservedDataStore.cameraGizmo.material.reservedDataStore = { hidden: true };
             }
@@ -186,4 +186,4 @@ export class GlobalState {
             camera.reservedDataStore.cameraGizmo = null;
         }
     }
-}
+}

inspector/src/inspector.ts

@@ -13,7 +13,6 @@ import { SceneExplorerComponent } from "./components/sceneExplorer/sceneExplorer
 import { EmbedHostComponent } from "./components/embedHost/embedHostComponent";
 import { PropertyChangedEvent } from "./components/propertyChangedEvent";
 import { GlobalState } from "./components/globalState";
-import { GLTFFileLoader } from "babylonjs-loaders/glTF/index";
 
 interface IInternalInspectorOptions extends IInspectorOptions {
     popup: boolean;
@@ -335,7 +334,7 @@ export class Inspector {
     public static EarlyAttachToLoader() {
         if (!this._GlobalState.onPluginActivatedObserver) {
             this._GlobalState.onPluginActivatedObserver = SceneLoader.OnPluginActivatedObservable.add((rawLoader) => {
-                const loader = rawLoader as GLTFFileLoader;
+                const loader = rawLoader as import("babylonjs-loaders/glTF/index").GLTFFileLoader;
                 if (loader.name === "gltf") {
                     this._GlobalState.prepareGLTFPlugin(loader);
                 }

package.json

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

src/Engines/thinEngine.ts

@@ -157,14 +157,14 @@ export class ThinEngine {
      */
     // Not mixed with Version for tooling purpose.
     public static get NpmPackage(): string {
-        return "babylonjs@4.2.0-beta.9";
+        return "babylonjs@4.2.0-beta.10";
     }
 
     /**
      * Returns the current version of the framework
      */
     public static get Version(): string {
-        return "4.2.0-beta.9";
+        return "4.2.0-beta.10";
     }
 
     /**

src/Inputs/scene.inputManager.ts

@@ -62,6 +62,7 @@ export class InputManager {
 
     /** This is a defensive check to not allow control attachment prior to an already active one. If already attached, previous control is unattached before attaching the new one. */
     private _alreadyAttached = false;
+    private _alreadyAttachedTo: HTMLElement;
 
     // Pointers
     private _wheelEventName = "";
@@ -102,6 +103,7 @@ export class InputManager {
     // Keyboard
     private _onKeyDown: (evt: KeyboardEvent) => void;
     private _onKeyUp: (evt: KeyboardEvent) => void;
+    private _keyboardIsAttached = false;
     private _onCanvasFocusObserver: Nullable<Observer<Engine>>;
     private _onCanvasBlurObserver: Nullable<Observer<Engine>>;
 
@@ -473,6 +475,7 @@ export class InputManager {
         if (this._alreadyAttached) {
             this.detachControl();
         }
+        this._alreadyAttachedTo = elementToAttachTo;
         let engine = scene.getEngine();
 
         this._initActionManager = (act: Nullable<AbstractActionManager>, clickInfo: _ClickInfo): Nullable<AbstractActionManager> => {
@@ -801,20 +804,23 @@ export class InputManager {
             }
         };
 
+        let attachedFunction = () => {
+            if (!elementToAttachTo || this._keyboardIsAttached) {
+                return;
+            }
+            elementToAttachTo.addEventListener("keydown", this._onKeyDown, false);
+            elementToAttachTo.addEventListener("keyup", this._onKeyUp, false);
+            this._keyboardIsAttached = true;
+        };
+
         // Keyboard events
         this._onCanvasFocusObserver = engine.onCanvasFocusObservable.add(
             (() => {
-                let fn = () => {
-                    if (!elementToAttachTo) {
-                        return;
-                    }
-                    elementToAttachTo.addEventListener("keydown", this._onKeyDown, false);
-                    elementToAttachTo.addEventListener("keyup", this._onKeyUp, false);
-                };
+
                 if (document.activeElement === elementToAttachTo) {
-                    fn();
+                    attachedFunction();
                 }
-                return fn;
+                return attachedFunction;
             })()
         );
 
@@ -824,8 +830,11 @@ export class InputManager {
             }
             elementToAttachTo.removeEventListener("keydown", this._onKeyDown);
             elementToAttachTo.removeEventListener("keyup", this._onKeyUp);
+            this._keyboardIsAttached = false;
         });
 
+        attachedFunction();
+
         // Pointer events
         var eventPrefix = Tools.GetPointerPrefix(engine);
 
@@ -860,11 +869,10 @@ export class InputManager {
      * Detaches all event handlers
      */
     public detachControl() {
-        const canvas = this._scene.getEngine().getInputElement();
         const engine = this._scene.getEngine();
         const eventPrefix = Tools.GetPointerPrefix(engine);
 
-        if (!canvas) {
+        if (!this._alreadyAttachedTo) {
             return;
         }
 
@@ -873,9 +881,9 @@ export class InputManager {
         }
 
         // Pointer
-        canvas.removeEventListener(eventPrefix + "move", <any>this._onPointerMove);
-        canvas.removeEventListener(this._wheelEventName, <any>this._onPointerMove);
-        canvas.removeEventListener(eventPrefix + "down", <any>this._onPointerDown);
+        this._alreadyAttachedTo.removeEventListener(eventPrefix + "move", <any>this._onPointerMove);
+        this._alreadyAttachedTo.removeEventListener(this._wheelEventName, <any>this._onPointerMove);
+        this._alreadyAttachedTo.removeEventListener(eventPrefix + "down", <any>this._onPointerDown);
         window.removeEventListener(eventPrefix + "up", <any>this._onPointerUp);
 
         // Blur / Focus
@@ -888,12 +896,12 @@ export class InputManager {
         }
 
         // Keyboard
-        canvas.removeEventListener("keydown", this._onKeyDown);
-        canvas.removeEventListener("keyup", this._onKeyUp);
+        this._alreadyAttachedTo.removeEventListener("keydown", this._onKeyDown);
+        this._alreadyAttachedTo.removeEventListener("keyup", this._onKeyUp);
 
         // Cursor
         if (!this._scene.doNotHandleCursors) {
-            canvas.style.cursor = this._scene.defaultCursor;
+            this._alreadyAttachedTo.style.cursor = this._scene.defaultCursor;
         }
 
         this._alreadyAttached = false;

src/Lights/Shadows/shadowGenerator.ts

@@ -1085,7 +1085,7 @@ export class ShadowGenerator implements IShadowGenerator {
 
         effectiveMesh._internalAbstractMeshDataInfo._isActiveIntermediate = false;
 
-        if (!material || subMesh.verticesCount === 0) {
+        if (!material || subMesh.verticesCount === 0 || subMesh._renderId === scene.getRenderId()) {
             return;
         }
 
@@ -1099,7 +1099,17 @@ export class ShadowGenerator implements IShadowGenerator {
         }
 
         var hardwareInstancedRendering = engine.getCaps().instancedArrays && (batch.visibleInstances[subMesh._id] !== null && batch.visibleInstances[subMesh._id] !== undefined || renderingMesh.hasThinInstances);
+        if (effectiveMesh._internalAbstractMeshDataInfo._currentLOD !== effectiveMesh) {
+            if (hardwareInstancedRendering) {
+                delete batch.renderSelf[subMesh._id];
+            } else {
+                return;
+            }
+        }
+
         if (this.isReady(subMesh, hardwareInstancedRendering, isTransparent)) {
+            subMesh._renderId = scene.getRenderId();
+
             const shadowDepthWrapper = renderingMesh.material?.shadowDepthWrapper;
 
             let effect = shadowDepthWrapper?.getEffect(subMesh, this) ?? this._effect;

src/Maths/math.path.ts

@@ -1,7 +1,7 @@
-import { DeepImmutable, Nullable } from '../types';
-import { Scalar } from './math.scalar';
-import { Vector2, Vector3, Quaternion, Matrix } from './math.vector';
-import { Epsilon } from './math.constants';
+import { DeepImmutable, Nullable } from "../types";
+import { Scalar } from "./math.scalar";
+import { Vector2, Vector3, Quaternion, Matrix } from "./math.vector";
+import { Epsilon } from "./math.constants";
 
 /**
  * Defines potential orientation for back face culling
@@ -12,7 +12,7 @@ export enum Orientation {
      */
     CW = 0,
     /** Counter clockwise */
-    CCW = 1
+    CCW = 1,
 }
 
 /** Class used to represent a Bezier curve */
@@ -27,7 +27,6 @@ export class BezierCurve {
      * @returns the interpolated value
      */
     public static Interpolate(t: number, x1: number, y1: number, x2: number, y2: number): number {
-
         // Extract X (which is equal to time here)
         var f0 = 1 - 3 * x2 + 3 * x1;
         var f1 = 3 * x2 - 6 * x1;
@@ -42,13 +41,10 @@ export class BezierCurve {
             var slope = 1.0 / (3.0 * f0 * refinedT2 + 2.0 * f1 * refinedT + f2);
             refinedT -= (x - t) * slope;
             refinedT = Math.min(1, Math.max(0, refinedT));
-
         }
 
         // Resolve cubic bezier for the given x
-        return 3 * Math.pow(1 - refinedT, 2) * refinedT * y1 +
-            3 * (1 - refinedT) * Math.pow(refinedT, 2) * y2 +
-            Math.pow(refinedT, 3);
+        return 3 * Math.pow(1 - refinedT, 2) * refinedT * y1 + 3 * (1 - refinedT) * Math.pow(refinedT, 2) * y2 + Math.pow(refinedT, 3);
     }
 }
 
@@ -64,7 +60,9 @@ export class Angle {
      */
     constructor(radians: number) {
         this._radians = radians;
-        if (this._radians < 0.0) { this._radians += (2.0 * Math.PI); }
+        if (this._radians < 0.0) {
+            this._radians += 2.0 * Math.PI;
+        }
     }
 
     /**
@@ -72,7 +70,7 @@ export class Angle {
      * @returns the Angle value in degrees (float)
      */
     public degrees() {
-        return this._radians * 180.0 / Math.PI;
+        return (this._radians * 180.0) / Math.PI;
     }
 
     /**
@@ -109,7 +107,7 @@ export class Angle {
      * @returns a new Angle
      */
     public static FromDegrees(degrees: number): Angle {
-        return new Angle(degrees * Math.PI / 180.0);
+        return new Angle((degrees * Math.PI) / 180.0);
     }
 }
 
@@ -150,17 +148,14 @@ export class Arc2 {
         /** Defines the mid point of the arc */
         public midPoint: Vector2,
         /** Defines the end point of the arc */
-        public endPoint: Vector2) {
-
+        public endPoint: Vector2
+    ) {
         var temp = Math.pow(midPoint.x, 2) + Math.pow(midPoint.y, 2);
-        var startToMid = (Math.pow(startPoint.x, 2) + Math.pow(startPoint.y, 2) - temp) / 2.;
-        var midToEnd = (temp - Math.pow(endPoint.x, 2) - Math.pow(endPoint.y, 2)) / 2.;
+        var startToMid = (Math.pow(startPoint.x, 2) + Math.pow(startPoint.y, 2) - temp) / 2;
+        var midToEnd = (temp - Math.pow(endPoint.x, 2) - Math.pow(endPoint.y, 2)) / 2;
         var det = (startPoint.x - midPoint.x) * (midPoint.y - endPoint.y) - (midPoint.x - endPoint.x) * (startPoint.y - midPoint.y);
 
-        this.centerPoint = new Vector2(
-            (startToMid * (midPoint.y - endPoint.y) - midToEnd * (startPoint.y - midPoint.y)) / det,
-            ((startPoint.x - midPoint.x) * midToEnd - (midPoint.x - endPoint.x) * startToMid) / det
-        );
+        this.centerPoint = new Vector2((startToMid * (midPoint.y - endPoint.y) - midToEnd * (startPoint.y - midPoint.y)) / det, ((startPoint.x - midPoint.x) * midToEnd - (midPoint.x - endPoint.x) * startToMid) / det);
 
         this.radius = this.centerPoint.subtract(this.startPoint).length();
 
@@ -171,12 +166,20 @@ export class Arc2 {
         var a3 = Angle.BetweenTwoPoints(this.centerPoint, this.endPoint).degrees();
 
         // angles correction
-        if (a2 - a1 > +180.0) { a2 -= 360.0; }
-        if (a2 - a1 < -180.0) { a2 += 360.0; }
-        if (a3 - a2 > +180.0) { a3 -= 360.0; }
-        if (a3 - a2 < -180.0) { a3 += 360.0; }
+        if (a2 - a1 > +180.0) {
+            a2 -= 360.0;
+        }
+        if (a2 - a1 < -180.0) {
+            a2 += 360.0;
+        }
+        if (a3 - a2 > +180.0) {
+            a3 -= 360.0;
+        }
+        if (a3 - a2 < -180.0) {
+            a3 += 360.0;
+        }
 
-        this.orientation = (a2 - a1) < 0 ? Orientation.CW : Orientation.CCW;
+        this.orientation = a2 - a1 < 0 ? Orientation.CW : Orientation.CCW;
         this.angle = Angle.FromDegrees(this.orientation === Orientation.CW ? a1 - a3 : a3 - a1);
     }
 }
@@ -239,7 +242,9 @@ export class Path2 {
         var arc = new Arc2(startPoint, midPoint, endPoint);
 
         var increment = arc.angle.radians() / numberOfSegments;
-        if (arc.orientation === Orientation.CW) { increment *= -1; }
+        if (arc.orientation === Orientation.CW) {
+            increment *= -1;
+        }
         var currentAngle = arc.startAngle.radians() + increment;
 
         for (var i = 0; i < numberOfSegments; i++) {
@@ -268,7 +273,7 @@ export class Path2 {
         if (this.closed) {
             var lastPoint = this._points[this._points.length - 1];
             var firstPoint = this._points[0];
-            result += (firstPoint.subtract(lastPoint).length());
+            result += firstPoint.subtract(lastPoint).length();
         }
         return result;
     }
@@ -301,15 +306,12 @@ export class Path2 {
             var b = this._points[j];
             var bToA = b.subtract(a);
 
-            var nextOffset = (bToA.length() + previousOffset);
+            var nextOffset = bToA.length() + previousOffset;
             if (lengthPosition >= previousOffset && lengthPosition <= nextOffset) {
                 var dir = bToA.normalize();
                 var localOffset = lengthPosition - previousOffset;
 
-                return new Vector2(
-                    a.x + (dir.x * localOffset),
-                    a.y + (dir.y * localOffset)
-                );
+                return new Vector2(a.x + dir.x * localOffset, a.y + dir.y * localOffset);
             }
             previousOffset = nextOffset;
         }
@@ -354,14 +356,14 @@ export class Path3D {
     };
 
     /**
-    * new Path3D(path, normal, raw)
-    * Creates a Path3D. A Path3D is a logical math object, so not a mesh.
-    * please read the description in the tutorial : https://doc.babylonjs.com/how_to/how_to_use_path3d
-    * @param path an array of Vector3, the curve axis of the Path3D
-    * @param firstNormal (options) Vector3, the first wanted normal to the curve. Ex (0, 1, 0) for a vertical normal.
-    * @param raw (optional, default false) : boolean, if true the returned Path3D isn't normalized. Useful to depict path acceleration or speed.
-    * @param alignTangentsWithPath (optional, default false) : boolean, if true the tangents will be aligned with the path.
-    */
+     * new Path3D(path, normal, raw)
+     * Creates a Path3D. A Path3D is a logical math object, so not a mesh.
+     * please read the description in the tutorial : https://doc.babylonjs.com/how_to/how_to_use_path3d
+     * @param path an array of Vector3, the curve axis of the Path3D
+     * @param firstNormal (options) Vector3, the first wanted normal to the curve. Ex (0, 1, 0) for a vertical normal.
+     * @param raw (optional, default false) : boolean, if true the returned Path3D isn't normalized. Useful to depict path acceleration or speed.
+     * @param alignTangentsWithPath (optional, default false) : boolean, if true the tangents will be aligned with the path.
+     */
     constructor(
         /**
          * an array of Vector3, the curve axis of the Path3D
@@ -517,7 +519,7 @@ export class Path3D {
             let point = this._curve[i + 0];
             let tangent = this._curve[i + 1].subtract(point).normalize();
             let subLength = this._distances[i + 1] - this._distances[i + 0];
-            let subPosition = Math.min(Math.max(Vector3.Dot(tangent, target.subtract(point).normalize()), 0.0) * Vector3.Distance(point, target) / subLength, 1.0);
+            let subPosition = Math.min((Math.max(Vector3.Dot(tangent, target.subtract(point).normalize()), 0.0) * Vector3.Distance(point, target)) / subLength, 1.0);
             let distance = Vector3.Distance(point.add(tangent.scale(subPosition * subLength)), target);
 
             if (distance < smallestDistance) {
@@ -536,10 +538,10 @@ export class Path3D {
      */
     public slice(start: number = 0.0, end: number = 1.0) {
         if (start < 0.0) {
-            start = 1 - (start * -1.0) % 1.0;
+            start = 1 - ((start * -1.0) % 1.0);
         }
         if (end < 0.0) {
-            end = 1 - (end * -1.0) % 1.0;
+            end = 1 - ((end * -1.0) % 1.0);
         }
         if (start > end) {
             let _start = start;
@@ -586,7 +588,11 @@ export class Path3D {
 
     // private function compute() : computes tangents, normals and binormals
     private _compute(firstNormal: Nullable<Vector3>, alignTangentsWithPath = false): void {
-        var l = this._curve.length;
+        const l = this._curve.length;
+
+        if (l < 2) {
+            return;
+        }
 
         // first and last tangents
         this._tangents[0] = this._getFirstNonNullVector(0);
@@ -612,12 +618,12 @@ export class Path3D {
         this._distances[0] = 0.0;
 
         // normals and binormals : next points
-        var prev: Vector3;        // previous vector (segment)
-        var cur: Vector3;         // current vector (segment)
-        var curTang: Vector3;     // current tangent
+        var prev: Vector3; // previous vector (segment)
+        var cur: Vector3; // current vector (segment)
+        var curTang: Vector3; // current tangent
         // previous normal
-        var prevNor: Vector3;    // previous normal
-        var prevBinor: Vector3;   // previous binormal
+        var prevNor: Vector3; // previous normal
+        var prevBinor: Vector3; // previous binormal
 
         for (var i = 1; i < l; i++) {
             // tangents
@@ -686,21 +692,18 @@ export class Path3D {
 
         if (va === undefined || va === null) {
             var point: Vector3;
-            if (!Scalar.WithinEpsilon(Math.abs(vt.y) / tgl, 1.0, Epsilon)) {     // search for a point in the plane
+            if (!Scalar.WithinEpsilon(Math.abs(vt.y) / tgl, 1.0, Epsilon)) {
+                // search for a point in the plane
                 point = new Vector3(0.0, -1.0, 0.0);
-            }
-            else if (!Scalar.WithinEpsilon(Math.abs(vt.x) / tgl, 1.0, Epsilon)) {
+            } else if (!Scalar.WithinEpsilon(Math.abs(vt.x) / tgl, 1.0, Epsilon)) {
                 point = new Vector3(1.0, 0.0, 0.0);
-            }
-            else if (!Scalar.WithinEpsilon(Math.abs(vt.z) / tgl, 1.0, Epsilon)) {
+            } else if (!Scalar.WithinEpsilon(Math.abs(vt.z) / tgl, 1.0, Epsilon)) {
                 point = new Vector3(0.0, 0.0, 1.0);
-            }
-            else {
+            } else {
                 point = Vector3.Zero();
             }
             normal0 = Vector3.Cross(vt, point);
-        }
-        else {
+        } else {
             normal0 = Vector3.Cross(vt, va);
             Vector3.CrossToRef(normal0, vt, normal0);
         }
@@ -893,8 +896,7 @@ export class Curve3 {
                 }
             }
             catmullRom.push(catmullRom[0]);
-        }
-        else {
+        } else {
             var totalPoints = new Array<Vector3>();
             totalPoints.push(points[0].clone());
             Array.prototype.push.apply(totalPoints, points);
@@ -958,8 +960,8 @@ export class Curve3 {
     private _computeLength(path: DeepImmutable<Vector3[]>): number {
         var l = 0;
         for (var i = 1; i < path.length; i++) {
-            l += (path[i].subtract(path[i - 1])).length();
+            l += path[i].subtract(path[i - 1]).length();
         }
         return l;
     }
-}
+}

src/Meshes/abstractMesh.ts

@@ -86,6 +86,7 @@ class _InternalAbstractMeshDataInfo {
     public _isActiveIntermediate = false;
     public _onlyForInstancesIntermediate = false;
     public _actAsRegularMesh = false;
+    public _currentLOD: Nullable<AbstractMesh> = null;
 }
 
 /**

src/Physics/Plugins/cannonJSPlugin.ts

@@ -8,6 +8,7 @@ import { PhysicsImpostor, IPhysicsEnabledObject } from "../../Physics/physicsImp
 import { PhysicsJoint, IMotorEnabledJoint, DistanceJointData, SpringJointData } from "../../Physics/physicsJoint";
 import { PhysicsEngine } from "../../Physics/physicsEngine";
 import { PhysicsRaycastResult } from "../physicsRaycastResult";
+import { TransformNode } from '../../Meshes/transformNode';
 
 //declare var require: any;
 declare var CANNON: any;
@@ -155,7 +156,7 @@ export class CannonJSPlugin implements IPhysicsEnginePlugin {
         var meshChildren = mainImpostor.object.getChildMeshes ? mainImpostor.object.getChildMeshes(true) : [];
         let currentRotation: Nullable<Quaternion> = mainImpostor.object.rotationQuaternion;
         if (meshChildren.length) {
-            var processMesh = (localPosition: Vector3, mesh: AbstractMesh) => {
+            const processMesh = (mesh: AbstractMesh) => {
                 if (!currentRotation || !mesh.rotationQuaternion) {
                     return;
                 }
@@ -164,15 +165,15 @@ export class CannonJSPlugin implements IPhysicsEnginePlugin {
                 if (childImpostor) {
                     var parent = childImpostor.parent;
                     if (parent !== mainImpostor) {
-                        var pPosition = mesh.position.clone();
-                        // let localRotation = mesh.rotationQuaternion.multiply(Quaternion.Inverse(currentRotation));
+                        const pPosition = mesh.getAbsolutePosition().subtract((mesh.parent as TransformNode).getAbsolutePosition());
+                        const q = mesh.rotationQuaternion;
                         if (childImpostor.physicsBody) {
                             this.removePhysicsBody(childImpostor);
                             childImpostor.physicsBody = null;
                         }
                         childImpostor.parent = mainImpostor;
                         childImpostor.resetUpdateFlags();
-                        mainImpostor.physicsBody.addShape(this._createShape(childImpostor), new this.BJSCANNON.Vec3(pPosition.x, pPosition.y, pPosition.z) /*, new this.BJSCANNON.Quaternion(localRotation.x, localRotation.y, localRotation.z, localRotation.w)*/);
+                        mainImpostor.physicsBody.addShape(this._createShape(childImpostor), new this.BJSCANNON.Vec3(pPosition.x, pPosition.y, pPosition.z) , new this.BJSCANNON.Quaternion(q.x, q.y, q.z, q.w));
                         //Add the mass of the children.
                         mainImpostor.physicsBody.mass += childImpostor.getParam("mass");
                     }
@@ -180,9 +181,9 @@ export class CannonJSPlugin implements IPhysicsEnginePlugin {
                 currentRotation.multiplyInPlace(mesh.rotationQuaternion);
                 mesh.getChildMeshes(true)
                     .filter((m) => !!m.physicsImpostor)
-                    .forEach(processMesh.bind(this, mesh.getAbsolutePosition()));
+                    .forEach(processMesh);
             };
-            meshChildren.filter((m) => !!m.physicsImpostor).forEach(processMesh.bind(this, mainImpostor.object.getAbsolutePosition()));
+            meshChildren.filter((m) => !!m.physicsImpostor).forEach(processMesh);
         }
     }
 
@@ -464,8 +465,7 @@ export class CannonJSPlugin implements IPhysicsEnginePlugin {
         //make sure it is updated...
         object.computeWorldMatrix && object.computeWorldMatrix(true);
         // The delta between the mesh position and the mesh bounding box center
-        let bInfo = object.getBoundingInfo();
-        if (!bInfo) {
+        if (!object.getBoundingInfo()) {
             return;
         }
         var center = impostor.getObjectCenter();
@@ -510,7 +510,7 @@ export class CannonJSPlugin implements IPhysicsEnginePlugin {
             }
 
             //calculate the new center using a pivot (since this.BJSCANNON.js doesn't center height maps)
-            var p = Matrix.Translation(boundingInfo.boundingBox.extendSizeWorld.x, 0, -boundingInfo.boundingBox.extendSizeWorld.z);
+            const p = Matrix.Translation(boundingInfo.boundingBox.extendSizeWorld.x, 0, -boundingInfo.boundingBox.extendSizeWorld.z);
             mesh.setPreTransformMatrix(p);
             mesh.computeWorldMatrix(true);
 

src/Physics/physicsImpostor.ts

@@ -610,12 +610,17 @@ export class PhysicsImpostor {
     public getObjectExtendSize(): Vector3 {
         if (this.object.getBoundingInfo) {
             let q = this.object.rotationQuaternion;
+            const scaling = this.object.scaling.clone();
             //reset rotation
             this.object.rotationQuaternion = PhysicsImpostor.IDENTITY_QUATERNION;
             //calculate the world matrix with no rotation
-            this.object.computeWorldMatrix && this.object.computeWorldMatrix(true);
+            const worldMatrix = this.object.computeWorldMatrix && this.object.computeWorldMatrix(true);
+            if (worldMatrix) {
+                worldMatrix.decompose(scaling, undefined, undefined);
+            }
             const boundingInfo = this.object.getBoundingInfo();
-            const size = boundingInfo.boundingBox.extendSize.scale(2).multiplyInPlace(this.object.scaling);
+            // get the global scaling of the object
+            const size = boundingInfo.boundingBox.extendSize.scale(2).multiplyInPlace(scaling);
             //bring back the rotation
             this.object.rotationQuaternion = q;
             //calculate the world matrix with the new rotation
@@ -885,7 +890,7 @@ export class PhysicsImpostor {
     /**
      * event and body object due to cannon's event-based architecture.
      */
-    public onCollide = (e: { body: any, point: Nullable<Vector3> }) => {
+    public onCollide = (e: { body: any; point: Nullable<Vector3> }) => {
         if (!this._onPhysicsCollideCallbacks.length && !this.onCollideEvent) {
             return;
         }

src/scene.ts

@@ -3555,6 +3555,7 @@ export class Scene extends AbstractScene implements IAnimatable, IClipPlanesHold
             if (meshToRender === undefined || meshToRender === null) {
                 continue;
             }
+            mesh._internalAbstractMeshDataInfo._currentLOD = meshToRender;
 
             // Compute world matrix if LOD is billboard
             if (meshToRender !== mesh && meshToRender.billboardMode !== TransformNode.BILLBOARDMODE_NONE) {