Merge pull request #4507 from RaananW/3.3.0-alpha.7

3.3.0-alpha.7

dist/preview release/babylon.max.js

@@ -12092,7 +12092,7 @@ var BABYLON;
              * Returns the current version of the framework
              */
             get: function () {
-                return "3.3.0-alpha.6";
+                return "3.3.0-alpha.7";
             },
             enumerable: true,
             configurable: true
@@ -39230,7 +39230,7 @@ var BABYLON;
             }
         };
         /**
-         * Affects all gemetry data in one call
+         * Affects all geometry data in one call
          * @param vertexData defines the geometry data
          * @param updatable defines if the geometry must be flagged as updatable (false as default)
          */
@@ -71113,6 +71113,17 @@ var BABYLON;
             if (!this._mesh.rotationQuaternion) {
                 this._mesh.rotationQuaternion = new BABYLON.Quaternion();
             }
+            // Sync controller mesh and pointing pose node's state with controller
+            this.update();
+            if (this._pointingPoseNode) {
+                var parents = [];
+                var obj = this._pointingPoseNode;
+                while (obj.parent) {
+                    parents.push(obj.parent);
+                    obj = obj.parent;
+                }
+                parents.reverse().forEach(function (p) { p.computeWorldMatrix(true); });
+            }
             this._meshAttachedObservable.notifyObservers(mesh);
         };
         /**
@@ -72062,6 +72073,9 @@ var BABYLON;
             if (!loadedMeshInfo.pointingPoseNode) {
                 BABYLON.Tools.Warn('Missing pointing pose mesh with name: ' + this._mapping.pointingPoseMeshName);
             }
+            else {
+                this._pointingPoseNode = loadedMeshInfo.pointingPoseNode;
+            }
             return loadedMeshInfo;
             // Look through all children recursively. This will return null if no mesh exists with the given name.
             function getChildByName(node, name) {
@@ -87951,7 +87965,14 @@ var BABYLON;
          */
         function PointerDragBehavior(options) {
             this.options = options;
-            this._draggingID = -1;
+            /**
+             * The id of the pointer that is currently interacting with the behavior (-1 when no pointer is active)
+             */
+            this.currentDraggingPointerID = -1;
+            /**
+             * If the behavior is currently in a dragging state
+             */
+            this.dragging = false;
             // Debug mode will display drag planes to help visualize behavior
             this._debugMode = false;
             this._maxDragAngle = Math.PI / 5;
@@ -87980,9 +88001,23 @@ var BABYLON;
              */
             this._dragPlaneParent = null;
             /**
-             *  If the drag behavior will react to drag events
+             *  If the drag behavior will react to drag events (Default: true)
              */
             this.enabled = true;
+            /**
+             * If set, the drag plane/axis will be rotated based on the attached mesh's world rotation (Default: true)
+             */
+            this.useObjectOrienationForDragging = true;
+            this._tmpVector = new BABYLON.Vector3(0, 0, 0);
+            this._worldDragAxis = new BABYLON.Vector3(0, 0, 0);
+            // Variables to avoid instantiation in the below method
+            this._pointA = new BABYLON.Vector3(0, 0, 0);
+            this._pointB = new BABYLON.Vector3(0, 0, 0);
+            this._pointC = new BABYLON.Vector3(0, 0, 0);
+            this._lineA = new BABYLON.Vector3(0, 0, 0);
+            this._lineB = new BABYLON.Vector3(0, 0, 0);
+            this._localAxis = new BABYLON.Vector3(0, 0, 0);
+            this._lookAt = new BABYLON.Vector3(0, 0, 0);
             var optionCount = 0;
             if (options === undefined) {
                 options = {};
@@ -88031,8 +88066,7 @@ var BABYLON;
             }
             this._dragPlane = BABYLON.Mesh.CreatePlane("pointerDragPlane", this._debugMode ? 1 : 10000, PointerDragBehavior._planeScene, false, BABYLON.Mesh.DOUBLESIDE);
             // State of the drag
-            var dragging = false;
-            var lastPosition = new BABYLON.Vector3(0, 0, 0);
+            this.lastDragPosition = new BABYLON.Vector3(0, 0, 0);
             var delta = new BABYLON.Vector3(0, 0, 0);
             var dragLength = 0;
             var pickPredicate = function (m) {
@@ -88043,26 +88077,24 @@ var BABYLON;
                     return;
                 }
                 if (pointerInfo.type == BABYLON.PointerEventTypes.POINTERDOWN) {
-                    if (!dragging && pointerInfo.pickInfo && pointerInfo.pickInfo.hit && pointerInfo.pickInfo.pickedMesh && pointerInfo.pickInfo.ray && pickPredicate(pointerInfo.pickInfo.pickedMesh)) {
+                    if (!_this.dragging && pointerInfo.pickInfo && pointerInfo.pickInfo.hit && pointerInfo.pickInfo.pickedMesh && pointerInfo.pickInfo.ray && pickPredicate(pointerInfo.pickInfo.pickedMesh)) {
                         _this._updateDragPlanePosition(pointerInfo.pickInfo.ray);
                         var pickedPoint = _this._pickWithRayOnDragPlane(pointerInfo.pickInfo.ray);
                         if (pickedPoint) {
-                            dragging = true;
-                            _this._draggingID = pointerInfo.event.pointerId;
-                            lastPosition.copyFrom(pickedPoint);
-                            _this.onDragStartObservable.notifyObservers({ dragPlanePoint: pickedPoint });
+                            _this.dragging = true;
+                            _this.currentDraggingPointerID = pointerInfo.event.pointerId;
+                            _this.lastDragPosition.copyFrom(pickedPoint);
+                            _this.onDragStartObservable.notifyObservers({ dragPlanePoint: pickedPoint, pointerId: _this.currentDraggingPointerID });
                         }
                     }
                 }
                 else if (pointerInfo.type == BABYLON.PointerEventTypes.POINTERUP) {
-                    if (_this._draggingID == pointerInfo.event.pointerId) {
-                        dragging = false;
-                        _this._draggingID = -1;
-                        _this.onDragEndObservable.notifyObservers({ dragPlanePoint: lastPosition });
+                    if (_this.currentDraggingPointerID == pointerInfo.event.pointerId) {
+                        _this.releaseDrag();
                     }
                 }
                 else if (pointerInfo.type == BABYLON.PointerEventTypes.POINTERMOVE) {
-                    if (_this._draggingID == pointerInfo.event.pointerId && dragging && pointerInfo.pickInfo && pointerInfo.pickInfo.ray) {
+                    if (_this.currentDraggingPointerID == pointerInfo.event.pointerId && _this.dragging && pointerInfo.pickInfo && pointerInfo.pickInfo.ray) {
                         var pickedPoint = _this._pickWithRayOnDragPlane(pointerInfo.pickInfo.ray);
                         // Get angle between drag plane and ray. Only update the drag plane at non steep angles to avoid jumps in delta position
                         var angle = Math.acos(BABYLON.Vector3.Dot(_this._dragPlane.forward, pointerInfo.pickInfo.ray.direction));
@@ -88073,25 +88105,32 @@ var BABYLON;
                             // depending on the drag mode option drag accordingly
                             if (_this.options.dragAxis) {
                                 // Convert local drag axis to world
-                                var worldDragAxis = BABYLON.Vector3.TransformCoordinates(_this.options.dragAxis, _this._attachedNode.getWorldMatrix().getRotationMatrix());
+                                BABYLON.Vector3.TransformCoordinatesToRef(_this.options.dragAxis, _this._attachedNode.getWorldMatrix().getRotationMatrix(), _this._worldDragAxis);
                                 // Project delta drag from the drag plane onto the drag axis
-                                dragLength = BABYLON.Vector3.Dot(pickedPoint.subtract(lastPosition), worldDragAxis);
-                                worldDragAxis.scaleToRef(dragLength, delta);
+                                pickedPoint.subtractToRef(_this.lastDragPosition, _this._tmpVector);
+                                dragLength = BABYLON.Vector3.Dot(_this._tmpVector, _this._worldDragAxis);
+                                _this._worldDragAxis.scaleToRef(dragLength, delta);
                             }
                             else {
                                 dragLength = delta.length();
-                                pickedPoint.subtractToRef(lastPosition, delta);
+                                pickedPoint.subtractToRef(_this.lastDragPosition, delta);
                             }
                             if (_this.moveAttached) {
-                                _this._attachedNode.position.addInPlace(delta);
+                                _this._attachedNode.absolutePosition.addToRef(delta, _this._tmpVector);
+                                _this._attachedNode.setAbsolutePosition(_this._tmpVector);
                             }
-                            _this.onDragObservable.notifyObservers({ dragDistance: dragLength, delta: delta, dragPlanePoint: pickedPoint, dragPlaneNormal: _this._dragPlane.forward });
-                            lastPosition.copyFrom(pickedPoint);
+                            _this.onDragObservable.notifyObservers({ dragDistance: dragLength, delta: delta, dragPlanePoint: pickedPoint, dragPlaneNormal: _this._dragPlane.forward, pointerId: _this.currentDraggingPointerID });
+                            _this.lastDragPosition.copyFrom(pickedPoint);
                         }
                     }
                 }
             });
         };
+        PointerDragBehavior.prototype.releaseDrag = function () {
+            this.dragging = false;
+            this.onDragEndObservable.notifyObservers({ dragPlanePoint: this.lastDragPosition, pointerId: this.currentDraggingPointerID });
+            this.currentDraggingPointerID = -1;
+        };
         PointerDragBehavior.prototype._pickWithRayOnDragPlane = function (ray) {
             var _this = this;
             if (!ray) {
@@ -88107,27 +88146,32 @@ var BABYLON;
         };
         // Position the drag plane based on the attached mesh position, for single axis rotate the plane along the axis to face the camera
         PointerDragBehavior.prototype._updateDragPlanePosition = function (ray) {
-            var pointA = this._dragPlaneParent ? this._dragPlaneParent.absolutePosition : this._attachedNode.absolutePosition;
+            this._pointA.copyFrom(this._dragPlaneParent ? this._dragPlaneParent.absolutePosition : this._attachedNode.absolutePosition);
             if (this.options.dragAxis) {
-                var localAxis = BABYLON.Vector3.TransformCoordinates(this.options.dragAxis, this._attachedNode.getWorldMatrix().getRotationMatrix());
+                this.useObjectOrienationForDragging ? BABYLON.Vector3.TransformCoordinatesToRef(this.options.dragAxis, this._attachedNode.getWorldMatrix().getRotationMatrix(), this._localAxis) : this._localAxis.copyFrom(this.options.dragAxis);
                 // Calculate plane normal in direction of camera but perpendicular to drag axis
-                var pointB = pointA.add(localAxis); // towards drag axis
-                var pointC = pointA.add(ray.origin.subtract(pointA).normalize()); // towards camera
+                this._pointA.addToRef(this._localAxis, this._pointB); // towards drag axis
+                ray.origin.subtractToRef(this._pointA, this._pointC);
+                this._pointA.addToRef(this._pointC.normalize(), this._pointC); // towards camera
                 // Get perpendicular line from direction to camera and drag axis
-                var lineA = pointB.subtract(pointA);
-                var lineB = pointC.subtract(pointA);
-                var perpLine = BABYLON.Vector3.Cross(lineA, lineB);
+                this._pointB.subtractToRef(this._pointA, this._lineA);
+                this._pointC.subtractToRef(this._pointA, this._lineB);
+                BABYLON.Vector3.CrossToRef(this._lineA, this._lineB, this._lookAt);
                 // Get perpendicular line from previous result and drag axis to adjust lineB to be perpendiculat to camera
-                var norm = BABYLON.Vector3.Cross(lineA, perpLine).normalize();
-                this._dragPlane.position.copyFrom(pointA);
-                this._dragPlane.lookAt(pointA.subtract(norm));
+                BABYLON.Vector3.CrossToRef(this._lineA, this._lookAt, this._lookAt);
+                this._lookAt.normalize();
+                this._dragPlane.position.copyFrom(this._pointA);
+                this._pointA.subtractToRef(this._lookAt, this._lookAt);
+                this._dragPlane.lookAt(this._lookAt);
             }
             else if (this.options.dragPlaneNormal) {
-                this._dragPlane.position.copyFrom(pointA);
-                this._dragPlane.lookAt(pointA.subtract(this.options.dragPlaneNormal));
+                this.useObjectOrienationForDragging ? BABYLON.Vector3.TransformCoordinatesToRef(this.options.dragPlaneNormal, this._attachedNode.getWorldMatrix().getRotationMatrix(), this._localAxis) : this._localAxis.copyFrom(this.options.dragPlaneNormal);
+                this._dragPlane.position.copyFrom(this._pointA);
+                this._pointA.subtractToRef(this._localAxis, this._lookAt);
+                this._dragPlane.lookAt(this._lookAt);
             }
             else {
-                this._dragPlane.position.copyFrom(pointA);
+                this._dragPlane.position.copyFrom(this._pointA);
                 this._dragPlane.lookAt(ray.origin);
             }
             this._dragPlane.computeWorldMatrix(true);
@@ -88150,6 +88194,243 @@ var BABYLON;
 var BABYLON;
 (function (BABYLON) {
     /**
+     * A behavior that when attached to a mesh will allow the mesh to be scaled
+     */
+    var MultiPointerScaleBehavior = /** @class */ (function () {
+        function MultiPointerScaleBehavior() {
+            this._startDistance = 0;
+            this._initialScale = new BABYLON.Vector3(0, 0, 0);
+            this._targetScale = new BABYLON.Vector3(0, 0, 0);
+            this._sceneRenderObserver = null;
+            this._dragBehaviorA = new BABYLON.PointerDragBehavior({});
+            this._dragBehaviorA.moveAttached = false;
+            this._dragBehaviorB = new BABYLON.PointerDragBehavior({});
+            this._dragBehaviorB.moveAttached = false;
+        }
+        Object.defineProperty(MultiPointerScaleBehavior.prototype, "name", {
+            /**
+             *  The name of the behavior
+             */
+            get: function () {
+                return "MultiPointerScale";
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         *  Initializes the behavior
+         */
+        MultiPointerScaleBehavior.prototype.init = function () { };
+        MultiPointerScaleBehavior.prototype._getCurrentDistance = function () {
+            return this._dragBehaviorA.lastDragPosition.subtract(this._dragBehaviorB.lastDragPosition).length();
+        };
+        /**
+         * Attaches the scale behavior the passed in mesh
+         * @param ownerNode The mesh that will be scaled around once attached
+         */
+        MultiPointerScaleBehavior.prototype.attach = function (ownerNode) {
+            var _this = this;
+            this._ownerNode = ownerNode;
+            // Create 2 drag behaviors such that each will only be triggered by a separate pointer
+            this._dragBehaviorA.onDragStartObservable.add(function (e) {
+                if (_this._dragBehaviorA.dragging && _this._dragBehaviorB.dragging) {
+                    if (_this._dragBehaviorA.currentDraggingPointerID == _this._dragBehaviorB.currentDraggingPointerID) {
+                        _this._dragBehaviorA.releaseDrag();
+                    }
+                    else {
+                        _this._initialScale.copyFrom(ownerNode.scaling);
+                        _this._startDistance = _this._getCurrentDistance();
+                    }
+                }
+            });
+            this._dragBehaviorB.onDragStartObservable.add(function (e) {
+                if (_this._dragBehaviorA.dragging && _this._dragBehaviorB.dragging) {
+                    if (_this._dragBehaviorA.currentDraggingPointerID == _this._dragBehaviorB.currentDraggingPointerID) {
+                        _this._dragBehaviorB.releaseDrag();
+                    }
+                    else {
+                        _this._initialScale.copyFrom(ownerNode.scaling);
+                        _this._startDistance = _this._getCurrentDistance();
+                    }
+                }
+            });
+            // Once both drag behaviors are active scale based on the distance between the two pointers
+            [this._dragBehaviorA, this._dragBehaviorB].forEach(function (behavior) {
+                behavior.onDragObservable.add(function () {
+                    if (_this._dragBehaviorA.dragging && _this._dragBehaviorB.dragging) {
+                        var ratio = _this._getCurrentDistance() / _this._startDistance;
+                        _this._initialScale.scaleToRef(ratio, _this._targetScale);
+                    }
+                });
+            });
+            ownerNode.addBehavior(this._dragBehaviorA);
+            ownerNode.addBehavior(this._dragBehaviorB);
+            // On every frame move towards target scaling to avoid jitter caused by vr controllers
+            this._sceneRenderObserver = ownerNode.getScene().onBeforeRenderObservable.add(function () {
+                if (_this._dragBehaviorA.dragging && _this._dragBehaviorB.dragging) {
+                    var change = _this._targetScale.subtract(ownerNode.scaling).scaleInPlace(0.1);
+                    if (change.length() > 0.01) {
+                        ownerNode.scaling.addInPlace(change);
+                    }
+                }
+            });
+        };
+        /**
+         *  Detaches the behavior from the mesh
+         */
+        MultiPointerScaleBehavior.prototype.detach = function () {
+            var _this = this;
+            this._ownerNode.getScene().onBeforeRenderObservable.remove(this._sceneRenderObserver);
+            [this._dragBehaviorA, this._dragBehaviorB].forEach(function (behavior) {
+                behavior.onDragStartObservable.clear();
+                behavior.onDragObservable.clear();
+                _this._ownerNode.removeBehavior(behavior);
+            });
+        };
+        return MultiPointerScaleBehavior;
+    }());
+    BABYLON.MultiPointerScaleBehavior = MultiPointerScaleBehavior;
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=babylon.multiPointerScaleBehavior.js.map
+
+var BABYLON;
+(function (BABYLON) {
+    /**
+     * A behavior that when attached to a mesh will allow the mesh to be dragged around based on directions and origin of the pointer's ray
+     */
+    var SixDofDragBehavior = /** @class */ (function () {
+        function SixDofDragBehavior() {
+            this._sceneRenderObserver = null;
+            this._targetPosition = new BABYLON.Vector3(0, 0, 0);
+            // How much faster the object should move when its further away
+            this._sixDofZDragFactor = 5;
+            /**
+             * If the behavior is currently in a dragging state
+             */
+            this.dragging = false;
+            /**
+             * The id of the pointer that is currently interacting with the behavior (-1 when no pointer is active)
+             */
+            this.currentDraggingPointerID = -1;
+        }
+        Object.defineProperty(SixDofDragBehavior.prototype, "name", {
+            /**
+             *  The name of the behavior
+             */
+            get: function () {
+                return "SixDofDrag";
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         *  Initializes the behavior
+         */
+        SixDofDragBehavior.prototype.init = function () { };
+        /**
+         * Attaches the scale behavior the passed in mesh
+         * @param ownerNode The mesh that will be scaled around once attached
+         */
+        SixDofDragBehavior.prototype.attach = function (ownerNode) {
+            var _this = this;
+            this._ownerNode = ownerNode;
+            this._scene = this._ownerNode.getScene();
+            if (!SixDofDragBehavior._virtualScene) {
+                SixDofDragBehavior._virtualScene = new BABYLON.Scene(this._scene.getEngine());
+                this._scene.getEngine().scenes.pop();
+            }
+            var pickedMesh = null;
+            var lastSixDofOriginPosition = new BABYLON.Vector3(0, 0, 0);
+            // Setup virtual meshes to be used for dragging without dirtying the existing scene
+            this._virtualOriginMesh = new BABYLON.AbstractMesh("", SixDofDragBehavior._virtualScene);
+            this._virtualOriginMesh.rotationQuaternion = new BABYLON.Quaternion();
+            this._virtualDragMesh = new BABYLON.AbstractMesh("", SixDofDragBehavior._virtualScene);
+            this._virtualDragMesh.rotationQuaternion = new BABYLON.Quaternion();
+            var pickPredicate = function (m) {
+                return _this._ownerNode == m || m.isDescendantOf(_this._ownerNode);
+            };
+            this._pointerObserver = this._scene.onPointerObservable.add(function (pointerInfo, eventState) {
+                if (pointerInfo.type == BABYLON.PointerEventTypes.POINTERDOWN) {
+                    if (!_this.dragging && pointerInfo.pickInfo && pointerInfo.pickInfo.hit && pointerInfo.pickInfo.pickedMesh && pointerInfo.pickInfo.ray && pickPredicate(pointerInfo.pickInfo.pickedMesh)) {
+                        pickedMesh = pointerInfo.pickInfo.pickedMesh;
+                        lastSixDofOriginPosition.copyFrom(pointerInfo.pickInfo.ray.origin);
+                        // Set position and orientation of the controller
+                        _this._virtualOriginMesh.position.copyFrom(pointerInfo.pickInfo.ray.origin);
+                        _this._virtualOriginMesh.lookAt(pointerInfo.pickInfo.ray.origin.subtract(pointerInfo.pickInfo.ray.direction));
+                        // Attach the virtual drag mesh to the virtual origin mesh so it can be dragged
+                        _this._virtualOriginMesh.removeChild(_this._virtualDragMesh);
+                        _this._virtualDragMesh.position.copyFrom(pickedMesh.absolutePosition);
+                        if (!pickedMesh.rotationQuaternion) {
+                            pickedMesh.rotationQuaternion = new BABYLON.Quaternion();
+                        }
+                        _this._virtualDragMesh.rotationQuaternion.copyFrom(pickedMesh.rotationQuaternion);
+                        _this._virtualOriginMesh.addChild(_this._virtualDragMesh);
+                        // Update state
+                        _this.dragging = true;
+                        _this.currentDraggingPointerID = pointerInfo.event.pointerId;
+                    }
+                }
+                else if (pointerInfo.type == BABYLON.PointerEventTypes.POINTERUP) {
+                    if (_this.currentDraggingPointerID == pointerInfo.event.pointerId) {
+                        _this.dragging = false;
+                        _this.currentDraggingPointerID = -1;
+                        pickedMesh = null;
+                        _this._virtualOriginMesh.removeChild(_this._virtualDragMesh);
+                    }
+                }
+                else if (pointerInfo.type == BABYLON.PointerEventTypes.POINTERMOVE) {
+                    if (_this.currentDraggingPointerID == pointerInfo.event.pointerId && _this.dragging && pointerInfo.pickInfo && pointerInfo.pickInfo.ray && pickedMesh) {
+                        // Calculate controller drag distance in controller space
+                        var originDragDifference = pointerInfo.pickInfo.ray.origin.subtract(lastSixDofOriginPosition);
+                        lastSixDofOriginPosition.copyFrom(pointerInfo.pickInfo.ray.origin);
+                        var localOriginDragDifference = BABYLON.Vector3.TransformCoordinates(originDragDifference, BABYLON.Matrix.Invert(_this._virtualOriginMesh.getWorldMatrix().getRotationMatrix()));
+                        _this._virtualOriginMesh.addChild(_this._virtualDragMesh);
+                        // Determine how much the controller moved to/away towards the dragged object and use this to move the object further when its further away
+                        var zDragDistance = BABYLON.Vector3.Dot(localOriginDragDifference, _this._virtualOriginMesh.position.normalizeToNew());
+                        _this._virtualDragMesh.position.z -= _this._virtualDragMesh.position.z < 1 ? zDragDistance * _this._sixDofZDragFactor : zDragDistance * _this._sixDofZDragFactor * _this._virtualDragMesh.position.z;
+                        if (_this._virtualDragMesh.position.z < 0) {
+                            _this._virtualDragMesh.position.z = 0;
+                        }
+                        // Update the controller position
+                        _this._virtualOriginMesh.position.copyFrom(pointerInfo.pickInfo.ray.origin);
+                        _this._virtualOriginMesh.lookAt(pointerInfo.pickInfo.ray.origin.subtract(pointerInfo.pickInfo.ray.direction));
+                        _this._virtualOriginMesh.removeChild(_this._virtualDragMesh);
+                        // Move the virtualObjectsPosition into the picked mesh's space if needed
+                        _this._targetPosition.copyFrom(_this._virtualDragMesh.absolutePosition);
+                        if (pickedMesh.parent) {
+                            BABYLON.Vector3.TransformCoordinatesToRef(_this._targetPosition, BABYLON.Matrix.Invert(pickedMesh.parent.getWorldMatrix()), _this._targetPosition);
+                        }
+                    }
+                }
+            });
+            // On every frame move towards target scaling to avoid jitter caused by vr controllers
+            this._sceneRenderObserver = ownerNode.getScene().onBeforeRenderObservable.add(function () {
+                if (_this.dragging && pickedMesh) {
+                    // Slowly move mesh to avoid jitter
+                    pickedMesh.position.addInPlace(_this._targetPosition.subtract(pickedMesh.position).scale(0.2));
+                }
+            });
+        };
+        /**
+         *  Detaches the behavior from the mesh
+         */
+        SixDofDragBehavior.prototype.detach = function () {
+            this._scene.onPointerObservable.remove(this._pointerObserver);
+            this._ownerNode.getScene().onBeforeRenderObservable.remove(this._sceneRenderObserver);
+            this._virtualOriginMesh.dispose();
+            this._virtualDragMesh.dispose();
+        };
+        return SixDofDragBehavior;
+    }());
+    BABYLON.SixDofDragBehavior = SixDofDragBehavior;
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=babylon.sixDofDragBehavior.js.map
+
+var BABYLON;
+(function (BABYLON) {
+    /**
      * Renders gizmos on top of an existing scene which provide controls for position, rotation, etc.
      */
     var Gizmo = /** @class */ (function () {
@@ -88367,7 +88648,7 @@ var BABYLON;
             rotationMesh.rotation.x = Math.PI / 2;
             _this._rootMesh.lookAt(_this._rootMesh.position.subtract(planeNormal));
             // Add drag behavior to handle events when the gizmo is dragged
-            _this._dragBehavior = new BABYLON.PointerDragBehavior({ dragPlaneNormal: planeNormal });
+            _this._dragBehavior = new BABYLON.PointerDragBehavior({ dragPlaneNormal: new BABYLON.Vector3(0, 0, 1) });
             _this._dragBehavior.moveAttached = false;
             _this._rootMesh.addBehavior(_this._dragBehavior);
             var lastDragPosition = null;
@@ -91028,7 +91309,7 @@ var BABYLON;
                 if (_this.rightController && _this.rightController._activePointer) {
                     _this._castRayAndSelectObject(_this.rightController);
                 }
-                if (!(_this.leftController && _this.leftController._activePointer) && !(_this.rightController && _this.rightController._activePointer)) {
+                if (_this._noControllerIsActive) {
                     _this._castRayAndSelectObject(_this._cameraGazer);
                 }
                 else {
@@ -91665,6 +91946,13 @@ var BABYLON;
                 this._interactionsEnabled = true;
             }
         };
+        Object.defineProperty(VRExperienceHelper.prototype, "_noControllerIsActive", {
+            get: function () {
+                return !(this.leftController && this.leftController._activePointer) && !(this.rightController && this.rightController._activePointer);
+            },
+            enumerable: true,
+            configurable: true
+        });
         VRExperienceHelper.prototype._isTeleportationFloor = function (mesh) {
             for (var i = 0; i < this._floorMeshesCollection.length; i++) {
                 if (this._floorMeshesCollection[i].id === mesh.id) {
@@ -91761,13 +92049,17 @@ var BABYLON;
                     });
                 }
                 controller.webVRController.onTriggerStateChangedObservable.add(function (stateObject) {
-                    if (!controller._pointerDownOnMeshAsked) {
+                    var gazer = controller;
+                    if (_this._noControllerIsActive) {
+                        gazer = _this._cameraGazer;
+                    }
+                    if (!gazer._pointerDownOnMeshAsked) {
                         if (stateObject.value > _this._padSensibilityUp) {
-                            controller._selectionPointerDown();
+                            gazer._selectionPointerDown();
                         }
                     }
                     else if (stateObject.value < _this._padSensibilityDown) {
-                        controller._selectionPointerUp();
+                        gazer._selectionPointerUp();
                     }
                 });
             }

dist/preview release/babylon.no-module.max.js

@@ -12059,7 +12059,7 @@ var BABYLON;
              * Returns the current version of the framework
              */
             get: function () {
-                return "3.3.0-alpha.6";
+                return "3.3.0-alpha.7";
             },
             enumerable: true,
             configurable: true
@@ -39197,7 +39197,7 @@ var BABYLON;
             }
         };
         /**
-         * Affects all gemetry data in one call
+         * Affects all geometry data in one call
          * @param vertexData defines the geometry data
          * @param updatable defines if the geometry must be flagged as updatable (false as default)
          */
@@ -71080,6 +71080,17 @@ var BABYLON;
             if (!this._mesh.rotationQuaternion) {
                 this._mesh.rotationQuaternion = new BABYLON.Quaternion();
             }
+            // Sync controller mesh and pointing pose node's state with controller
+            this.update();
+            if (this._pointingPoseNode) {
+                var parents = [];
+                var obj = this._pointingPoseNode;
+                while (obj.parent) {
+                    parents.push(obj.parent);
+                    obj = obj.parent;
+                }
+                parents.reverse().forEach(function (p) { p.computeWorldMatrix(true); });
+            }
             this._meshAttachedObservable.notifyObservers(mesh);
         };
         /**
@@ -72029,6 +72040,9 @@ var BABYLON;
             if (!loadedMeshInfo.pointingPoseNode) {
                 BABYLON.Tools.Warn('Missing pointing pose mesh with name: ' + this._mapping.pointingPoseMeshName);
             }
+            else {
+                this._pointingPoseNode = loadedMeshInfo.pointingPoseNode;
+            }
             return loadedMeshInfo;
             // Look through all children recursively. This will return null if no mesh exists with the given name.
             function getChildByName(node, name) {
@@ -87918,7 +87932,14 @@ var BABYLON;
          */
         function PointerDragBehavior(options) {
             this.options = options;
-            this._draggingID = -1;
+            /**
+             * The id of the pointer that is currently interacting with the behavior (-1 when no pointer is active)
+             */
+            this.currentDraggingPointerID = -1;
+            /**
+             * If the behavior is currently in a dragging state
+             */
+            this.dragging = false;
             // Debug mode will display drag planes to help visualize behavior
             this._debugMode = false;
             this._maxDragAngle = Math.PI / 5;
@@ -87947,9 +87968,23 @@ var BABYLON;
              */
             this._dragPlaneParent = null;
             /**
-             *  If the drag behavior will react to drag events
+             *  If the drag behavior will react to drag events (Default: true)
              */
             this.enabled = true;
+            /**
+             * If set, the drag plane/axis will be rotated based on the attached mesh's world rotation (Default: true)
+             */
+            this.useObjectOrienationForDragging = true;
+            this._tmpVector = new BABYLON.Vector3(0, 0, 0);
+            this._worldDragAxis = new BABYLON.Vector3(0, 0, 0);
+            // Variables to avoid instantiation in the below method
+            this._pointA = new BABYLON.Vector3(0, 0, 0);
+            this._pointB = new BABYLON.Vector3(0, 0, 0);
+            this._pointC = new BABYLON.Vector3(0, 0, 0);
+            this._lineA = new BABYLON.Vector3(0, 0, 0);
+            this._lineB = new BABYLON.Vector3(0, 0, 0);
+            this._localAxis = new BABYLON.Vector3(0, 0, 0);
+            this._lookAt = new BABYLON.Vector3(0, 0, 0);
             var optionCount = 0;
             if (options === undefined) {
                 options = {};
@@ -87998,8 +88033,7 @@ var BABYLON;
             }
             this._dragPlane = BABYLON.Mesh.CreatePlane("pointerDragPlane", this._debugMode ? 1 : 10000, PointerDragBehavior._planeScene, false, BABYLON.Mesh.DOUBLESIDE);
             // State of the drag
-            var dragging = false;
-            var lastPosition = new BABYLON.Vector3(0, 0, 0);
+            this.lastDragPosition = new BABYLON.Vector3(0, 0, 0);
             var delta = new BABYLON.Vector3(0, 0, 0);
             var dragLength = 0;
             var pickPredicate = function (m) {
@@ -88010,26 +88044,24 @@ var BABYLON;
                     return;
                 }
                 if (pointerInfo.type == BABYLON.PointerEventTypes.POINTERDOWN) {
-                    if (!dragging && pointerInfo.pickInfo && pointerInfo.pickInfo.hit && pointerInfo.pickInfo.pickedMesh && pointerInfo.pickInfo.ray && pickPredicate(pointerInfo.pickInfo.pickedMesh)) {
+                    if (!_this.dragging && pointerInfo.pickInfo && pointerInfo.pickInfo.hit && pointerInfo.pickInfo.pickedMesh && pointerInfo.pickInfo.ray && pickPredicate(pointerInfo.pickInfo.pickedMesh)) {
                         _this._updateDragPlanePosition(pointerInfo.pickInfo.ray);
                         var pickedPoint = _this._pickWithRayOnDragPlane(pointerInfo.pickInfo.ray);
                         if (pickedPoint) {
-                            dragging = true;
-                            _this._draggingID = pointerInfo.event.pointerId;
-                            lastPosition.copyFrom(pickedPoint);
-                            _this.onDragStartObservable.notifyObservers({ dragPlanePoint: pickedPoint });
+                            _this.dragging = true;
+                            _this.currentDraggingPointerID = pointerInfo.event.pointerId;
+                            _this.lastDragPosition.copyFrom(pickedPoint);
+                            _this.onDragStartObservable.notifyObservers({ dragPlanePoint: pickedPoint, pointerId: _this.currentDraggingPointerID });
                         }
                     }
                 }
                 else if (pointerInfo.type == BABYLON.PointerEventTypes.POINTERUP) {
-                    if (_this._draggingID == pointerInfo.event.pointerId) {
-                        dragging = false;
-                        _this._draggingID = -1;
-                        _this.onDragEndObservable.notifyObservers({ dragPlanePoint: lastPosition });
+                    if (_this.currentDraggingPointerID == pointerInfo.event.pointerId) {
+                        _this.releaseDrag();
                     }
                 }
                 else if (pointerInfo.type == BABYLON.PointerEventTypes.POINTERMOVE) {
-                    if (_this._draggingID == pointerInfo.event.pointerId && dragging && pointerInfo.pickInfo && pointerInfo.pickInfo.ray) {
+                    if (_this.currentDraggingPointerID == pointerInfo.event.pointerId && _this.dragging && pointerInfo.pickInfo && pointerInfo.pickInfo.ray) {
                         var pickedPoint = _this._pickWithRayOnDragPlane(pointerInfo.pickInfo.ray);
                         // Get angle between drag plane and ray. Only update the drag plane at non steep angles to avoid jumps in delta position
                         var angle = Math.acos(BABYLON.Vector3.Dot(_this._dragPlane.forward, pointerInfo.pickInfo.ray.direction));
@@ -88040,25 +88072,32 @@ var BABYLON;
                             // depending on the drag mode option drag accordingly
                             if (_this.options.dragAxis) {
                                 // Convert local drag axis to world
-                                var worldDragAxis = BABYLON.Vector3.TransformCoordinates(_this.options.dragAxis, _this._attachedNode.getWorldMatrix().getRotationMatrix());
+                                BABYLON.Vector3.TransformCoordinatesToRef(_this.options.dragAxis, _this._attachedNode.getWorldMatrix().getRotationMatrix(), _this._worldDragAxis);
                                 // Project delta drag from the drag plane onto the drag axis
-                                dragLength = BABYLON.Vector3.Dot(pickedPoint.subtract(lastPosition), worldDragAxis);
-                                worldDragAxis.scaleToRef(dragLength, delta);
+                                pickedPoint.subtractToRef(_this.lastDragPosition, _this._tmpVector);
+                                dragLength = BABYLON.Vector3.Dot(_this._tmpVector, _this._worldDragAxis);
+                                _this._worldDragAxis.scaleToRef(dragLength, delta);
                             }
                             else {
                                 dragLength = delta.length();
-                                pickedPoint.subtractToRef(lastPosition, delta);
+                                pickedPoint.subtractToRef(_this.lastDragPosition, delta);
                             }
                             if (_this.moveAttached) {
-                                _this._attachedNode.position.addInPlace(delta);
+                                _this._attachedNode.absolutePosition.addToRef(delta, _this._tmpVector);
+                                _this._attachedNode.setAbsolutePosition(_this._tmpVector);
                             }
-                            _this.onDragObservable.notifyObservers({ dragDistance: dragLength, delta: delta, dragPlanePoint: pickedPoint, dragPlaneNormal: _this._dragPlane.forward });
-                            lastPosition.copyFrom(pickedPoint);
+                            _this.onDragObservable.notifyObservers({ dragDistance: dragLength, delta: delta, dragPlanePoint: pickedPoint, dragPlaneNormal: _this._dragPlane.forward, pointerId: _this.currentDraggingPointerID });
+                            _this.lastDragPosition.copyFrom(pickedPoint);
                         }
                     }
                 }
             });
         };
+        PointerDragBehavior.prototype.releaseDrag = function () {
+            this.dragging = false;
+            this.onDragEndObservable.notifyObservers({ dragPlanePoint: this.lastDragPosition, pointerId: this.currentDraggingPointerID });
+            this.currentDraggingPointerID = -1;
+        };
         PointerDragBehavior.prototype._pickWithRayOnDragPlane = function (ray) {
             var _this = this;
             if (!ray) {
@@ -88074,27 +88113,32 @@ var BABYLON;
         };
         // Position the drag plane based on the attached mesh position, for single axis rotate the plane along the axis to face the camera
         PointerDragBehavior.prototype._updateDragPlanePosition = function (ray) {
-            var pointA = this._dragPlaneParent ? this._dragPlaneParent.absolutePosition : this._attachedNode.absolutePosition;
+            this._pointA.copyFrom(this._dragPlaneParent ? this._dragPlaneParent.absolutePosition : this._attachedNode.absolutePosition);
             if (this.options.dragAxis) {
-                var localAxis = BABYLON.Vector3.TransformCoordinates(this.options.dragAxis, this._attachedNode.getWorldMatrix().getRotationMatrix());
+                this.useObjectOrienationForDragging ? BABYLON.Vector3.TransformCoordinatesToRef(this.options.dragAxis, this._attachedNode.getWorldMatrix().getRotationMatrix(), this._localAxis) : this._localAxis.copyFrom(this.options.dragAxis);
                 // Calculate plane normal in direction of camera but perpendicular to drag axis
-                var pointB = pointA.add(localAxis); // towards drag axis
-                var pointC = pointA.add(ray.origin.subtract(pointA).normalize()); // towards camera
+                this._pointA.addToRef(this._localAxis, this._pointB); // towards drag axis
+                ray.origin.subtractToRef(this._pointA, this._pointC);
+                this._pointA.addToRef(this._pointC.normalize(), this._pointC); // towards camera
                 // Get perpendicular line from direction to camera and drag axis
-                var lineA = pointB.subtract(pointA);
-                var lineB = pointC.subtract(pointA);
-                var perpLine = BABYLON.Vector3.Cross(lineA, lineB);
+                this._pointB.subtractToRef(this._pointA, this._lineA);
+                this._pointC.subtractToRef(this._pointA, this._lineB);
+                BABYLON.Vector3.CrossToRef(this._lineA, this._lineB, this._lookAt);
                 // Get perpendicular line from previous result and drag axis to adjust lineB to be perpendiculat to camera
-                var norm = BABYLON.Vector3.Cross(lineA, perpLine).normalize();
-                this._dragPlane.position.copyFrom(pointA);
-                this._dragPlane.lookAt(pointA.subtract(norm));
+                BABYLON.Vector3.CrossToRef(this._lineA, this._lookAt, this._lookAt);
+                this._lookAt.normalize();
+                this._dragPlane.position.copyFrom(this._pointA);
+                this._pointA.subtractToRef(this._lookAt, this._lookAt);
+                this._dragPlane.lookAt(this._lookAt);
             }
             else if (this.options.dragPlaneNormal) {
-                this._dragPlane.position.copyFrom(pointA);
-                this._dragPlane.lookAt(pointA.subtract(this.options.dragPlaneNormal));
+                this.useObjectOrienationForDragging ? BABYLON.Vector3.TransformCoordinatesToRef(this.options.dragPlaneNormal, this._attachedNode.getWorldMatrix().getRotationMatrix(), this._localAxis) : this._localAxis.copyFrom(this.options.dragPlaneNormal);
+                this._dragPlane.position.copyFrom(this._pointA);
+                this._pointA.subtractToRef(this._localAxis, this._lookAt);
+                this._dragPlane.lookAt(this._lookAt);
             }
             else {
-                this._dragPlane.position.copyFrom(pointA);
+                this._dragPlane.position.copyFrom(this._pointA);
                 this._dragPlane.lookAt(ray.origin);
             }
             this._dragPlane.computeWorldMatrix(true);
@@ -88117,6 +88161,243 @@ var BABYLON;
 var BABYLON;
 (function (BABYLON) {
     /**
+     * A behavior that when attached to a mesh will allow the mesh to be scaled
+     */
+    var MultiPointerScaleBehavior = /** @class */ (function () {
+        function MultiPointerScaleBehavior() {
+            this._startDistance = 0;
+            this._initialScale = new BABYLON.Vector3(0, 0, 0);
+            this._targetScale = new BABYLON.Vector3(0, 0, 0);
+            this._sceneRenderObserver = null;
+            this._dragBehaviorA = new BABYLON.PointerDragBehavior({});
+            this._dragBehaviorA.moveAttached = false;
+            this._dragBehaviorB = new BABYLON.PointerDragBehavior({});
+            this._dragBehaviorB.moveAttached = false;
+        }
+        Object.defineProperty(MultiPointerScaleBehavior.prototype, "name", {
+            /**
+             *  The name of the behavior
+             */
+            get: function () {
+                return "MultiPointerScale";
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         *  Initializes the behavior
+         */
+        MultiPointerScaleBehavior.prototype.init = function () { };
+        MultiPointerScaleBehavior.prototype._getCurrentDistance = function () {
+            return this._dragBehaviorA.lastDragPosition.subtract(this._dragBehaviorB.lastDragPosition).length();
+        };
+        /**
+         * Attaches the scale behavior the passed in mesh
+         * @param ownerNode The mesh that will be scaled around once attached
+         */
+        MultiPointerScaleBehavior.prototype.attach = function (ownerNode) {
+            var _this = this;
+            this._ownerNode = ownerNode;
+            // Create 2 drag behaviors such that each will only be triggered by a separate pointer
+            this._dragBehaviorA.onDragStartObservable.add(function (e) {
+                if (_this._dragBehaviorA.dragging && _this._dragBehaviorB.dragging) {
+                    if (_this._dragBehaviorA.currentDraggingPointerID == _this._dragBehaviorB.currentDraggingPointerID) {
+                        _this._dragBehaviorA.releaseDrag();
+                    }
+                    else {
+                        _this._initialScale.copyFrom(ownerNode.scaling);
+                        _this._startDistance = _this._getCurrentDistance();
+                    }
+                }
+            });
+            this._dragBehaviorB.onDragStartObservable.add(function (e) {
+                if (_this._dragBehaviorA.dragging && _this._dragBehaviorB.dragging) {
+                    if (_this._dragBehaviorA.currentDraggingPointerID == _this._dragBehaviorB.currentDraggingPointerID) {
+                        _this._dragBehaviorB.releaseDrag();
+                    }
+                    else {
+                        _this._initialScale.copyFrom(ownerNode.scaling);
+                        _this._startDistance = _this._getCurrentDistance();
+                    }
+                }
+            });
+            // Once both drag behaviors are active scale based on the distance between the two pointers
+            [this._dragBehaviorA, this._dragBehaviorB].forEach(function (behavior) {
+                behavior.onDragObservable.add(function () {
+                    if (_this._dragBehaviorA.dragging && _this._dragBehaviorB.dragging) {
+                        var ratio = _this._getCurrentDistance() / _this._startDistance;
+                        _this._initialScale.scaleToRef(ratio, _this._targetScale);
+                    }
+                });
+            });
+            ownerNode.addBehavior(this._dragBehaviorA);
+            ownerNode.addBehavior(this._dragBehaviorB);
+            // On every frame move towards target scaling to avoid jitter caused by vr controllers
+            this._sceneRenderObserver = ownerNode.getScene().onBeforeRenderObservable.add(function () {
+                if (_this._dragBehaviorA.dragging && _this._dragBehaviorB.dragging) {
+                    var change = _this._targetScale.subtract(ownerNode.scaling).scaleInPlace(0.1);
+                    if (change.length() > 0.01) {
+                        ownerNode.scaling.addInPlace(change);
+                    }
+                }
+            });
+        };
+        /**
+         *  Detaches the behavior from the mesh
+         */
+        MultiPointerScaleBehavior.prototype.detach = function () {
+            var _this = this;
+            this._ownerNode.getScene().onBeforeRenderObservable.remove(this._sceneRenderObserver);
+            [this._dragBehaviorA, this._dragBehaviorB].forEach(function (behavior) {
+                behavior.onDragStartObservable.clear();
+                behavior.onDragObservable.clear();
+                _this._ownerNode.removeBehavior(behavior);
+            });
+        };
+        return MultiPointerScaleBehavior;
+    }());
+    BABYLON.MultiPointerScaleBehavior = MultiPointerScaleBehavior;
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=babylon.multiPointerScaleBehavior.js.map
+
+var BABYLON;
+(function (BABYLON) {
+    /**
+     * A behavior that when attached to a mesh will allow the mesh to be dragged around based on directions and origin of the pointer's ray
+     */
+    var SixDofDragBehavior = /** @class */ (function () {
+        function SixDofDragBehavior() {
+            this._sceneRenderObserver = null;
+            this._targetPosition = new BABYLON.Vector3(0, 0, 0);
+            // How much faster the object should move when its further away
+            this._sixDofZDragFactor = 5;
+            /**
+             * If the behavior is currently in a dragging state
+             */
+            this.dragging = false;
+            /**
+             * The id of the pointer that is currently interacting with the behavior (-1 when no pointer is active)
+             */
+            this.currentDraggingPointerID = -1;
+        }
+        Object.defineProperty(SixDofDragBehavior.prototype, "name", {
+            /**
+             *  The name of the behavior
+             */
+            get: function () {
+                return "SixDofDrag";
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         *  Initializes the behavior
+         */
+        SixDofDragBehavior.prototype.init = function () { };
+        /**
+         * Attaches the scale behavior the passed in mesh
+         * @param ownerNode The mesh that will be scaled around once attached
+         */
+        SixDofDragBehavior.prototype.attach = function (ownerNode) {
+            var _this = this;
+            this._ownerNode = ownerNode;
+            this._scene = this._ownerNode.getScene();
+            if (!SixDofDragBehavior._virtualScene) {
+                SixDofDragBehavior._virtualScene = new BABYLON.Scene(this._scene.getEngine());
+                this._scene.getEngine().scenes.pop();
+            }
+            var pickedMesh = null;
+            var lastSixDofOriginPosition = new BABYLON.Vector3(0, 0, 0);
+            // Setup virtual meshes to be used for dragging without dirtying the existing scene
+            this._virtualOriginMesh = new BABYLON.AbstractMesh("", SixDofDragBehavior._virtualScene);
+            this._virtualOriginMesh.rotationQuaternion = new BABYLON.Quaternion();
+            this._virtualDragMesh = new BABYLON.AbstractMesh("", SixDofDragBehavior._virtualScene);
+            this._virtualDragMesh.rotationQuaternion = new BABYLON.Quaternion();
+            var pickPredicate = function (m) {
+                return _this._ownerNode == m || m.isDescendantOf(_this._ownerNode);
+            };
+            this._pointerObserver = this._scene.onPointerObservable.add(function (pointerInfo, eventState) {
+                if (pointerInfo.type == BABYLON.PointerEventTypes.POINTERDOWN) {
+                    if (!_this.dragging && pointerInfo.pickInfo && pointerInfo.pickInfo.hit && pointerInfo.pickInfo.pickedMesh && pointerInfo.pickInfo.ray && pickPredicate(pointerInfo.pickInfo.pickedMesh)) {
+                        pickedMesh = pointerInfo.pickInfo.pickedMesh;
+                        lastSixDofOriginPosition.copyFrom(pointerInfo.pickInfo.ray.origin);
+                        // Set position and orientation of the controller
+                        _this._virtualOriginMesh.position.copyFrom(pointerInfo.pickInfo.ray.origin);
+                        _this._virtualOriginMesh.lookAt(pointerInfo.pickInfo.ray.origin.subtract(pointerInfo.pickInfo.ray.direction));
+                        // Attach the virtual drag mesh to the virtual origin mesh so it can be dragged
+                        _this._virtualOriginMesh.removeChild(_this._virtualDragMesh);
+                        _this._virtualDragMesh.position.copyFrom(pickedMesh.absolutePosition);
+                        if (!pickedMesh.rotationQuaternion) {
+                            pickedMesh.rotationQuaternion = new BABYLON.Quaternion();
+                        }
+                        _this._virtualDragMesh.rotationQuaternion.copyFrom(pickedMesh.rotationQuaternion);
+                        _this._virtualOriginMesh.addChild(_this._virtualDragMesh);
+                        // Update state
+                        _this.dragging = true;
+                        _this.currentDraggingPointerID = pointerInfo.event.pointerId;
+                    }
+                }
+                else if (pointerInfo.type == BABYLON.PointerEventTypes.POINTERUP) {
+                    if (_this.currentDraggingPointerID == pointerInfo.event.pointerId) {
+                        _this.dragging = false;
+                        _this.currentDraggingPointerID = -1;
+                        pickedMesh = null;
+                        _this._virtualOriginMesh.removeChild(_this._virtualDragMesh);
+                    }
+                }
+                else if (pointerInfo.type == BABYLON.PointerEventTypes.POINTERMOVE) {
+                    if (_this.currentDraggingPointerID == pointerInfo.event.pointerId && _this.dragging && pointerInfo.pickInfo && pointerInfo.pickInfo.ray && pickedMesh) {
+                        // Calculate controller drag distance in controller space
+                        var originDragDifference = pointerInfo.pickInfo.ray.origin.subtract(lastSixDofOriginPosition);
+                        lastSixDofOriginPosition.copyFrom(pointerInfo.pickInfo.ray.origin);
+                        var localOriginDragDifference = BABYLON.Vector3.TransformCoordinates(originDragDifference, BABYLON.Matrix.Invert(_this._virtualOriginMesh.getWorldMatrix().getRotationMatrix()));
+                        _this._virtualOriginMesh.addChild(_this._virtualDragMesh);
+                        // Determine how much the controller moved to/away towards the dragged object and use this to move the object further when its further away
+                        var zDragDistance = BABYLON.Vector3.Dot(localOriginDragDifference, _this._virtualOriginMesh.position.normalizeToNew());
+                        _this._virtualDragMesh.position.z -= _this._virtualDragMesh.position.z < 1 ? zDragDistance * _this._sixDofZDragFactor : zDragDistance * _this._sixDofZDragFactor * _this._virtualDragMesh.position.z;
+                        if (_this._virtualDragMesh.position.z < 0) {
+                            _this._virtualDragMesh.position.z = 0;
+                        }
+                        // Update the controller position
+                        _this._virtualOriginMesh.position.copyFrom(pointerInfo.pickInfo.ray.origin);
+                        _this._virtualOriginMesh.lookAt(pointerInfo.pickInfo.ray.origin.subtract(pointerInfo.pickInfo.ray.direction));
+                        _this._virtualOriginMesh.removeChild(_this._virtualDragMesh);
+                        // Move the virtualObjectsPosition into the picked mesh's space if needed
+                        _this._targetPosition.copyFrom(_this._virtualDragMesh.absolutePosition);
+                        if (pickedMesh.parent) {
+                            BABYLON.Vector3.TransformCoordinatesToRef(_this._targetPosition, BABYLON.Matrix.Invert(pickedMesh.parent.getWorldMatrix()), _this._targetPosition);
+                        }
+                    }
+                }
+            });
+            // On every frame move towards target scaling to avoid jitter caused by vr controllers
+            this._sceneRenderObserver = ownerNode.getScene().onBeforeRenderObservable.add(function () {
+                if (_this.dragging && pickedMesh) {
+                    // Slowly move mesh to avoid jitter
+                    pickedMesh.position.addInPlace(_this._targetPosition.subtract(pickedMesh.position).scale(0.2));
+                }
+            });
+        };
+        /**
+         *  Detaches the behavior from the mesh
+         */
+        SixDofDragBehavior.prototype.detach = function () {
+            this._scene.onPointerObservable.remove(this._pointerObserver);
+            this._ownerNode.getScene().onBeforeRenderObservable.remove(this._sceneRenderObserver);
+            this._virtualOriginMesh.dispose();
+            this._virtualDragMesh.dispose();
+        };
+        return SixDofDragBehavior;
+    }());
+    BABYLON.SixDofDragBehavior = SixDofDragBehavior;
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=babylon.sixDofDragBehavior.js.map
+
+var BABYLON;
+(function (BABYLON) {
+    /**
      * Renders gizmos on top of an existing scene which provide controls for position, rotation, etc.
      */
     var Gizmo = /** @class */ (function () {
@@ -88334,7 +88615,7 @@ var BABYLON;
             rotationMesh.rotation.x = Math.PI / 2;
             _this._rootMesh.lookAt(_this._rootMesh.position.subtract(planeNormal));
             // Add drag behavior to handle events when the gizmo is dragged
-            _this._dragBehavior = new BABYLON.PointerDragBehavior({ dragPlaneNormal: planeNormal });
+            _this._dragBehavior = new BABYLON.PointerDragBehavior({ dragPlaneNormal: new BABYLON.Vector3(0, 0, 1) });
             _this._dragBehavior.moveAttached = false;
             _this._rootMesh.addBehavior(_this._dragBehavior);
             var lastDragPosition = null;
@@ -90995,7 +91276,7 @@ var BABYLON;
                 if (_this.rightController && _this.rightController._activePointer) {
                     _this._castRayAndSelectObject(_this.rightController);
                 }
-                if (!(_this.leftController && _this.leftController._activePointer) && !(_this.rightController && _this.rightController._activePointer)) {
+                if (_this._noControllerIsActive) {
                     _this._castRayAndSelectObject(_this._cameraGazer);
                 }
                 else {
@@ -91632,6 +91913,13 @@ var BABYLON;
                 this._interactionsEnabled = true;
             }
         };
+        Object.defineProperty(VRExperienceHelper.prototype, "_noControllerIsActive", {
+            get: function () {
+                return !(this.leftController && this.leftController._activePointer) && !(this.rightController && this.rightController._activePointer);
+            },
+            enumerable: true,
+            configurable: true
+        });
         VRExperienceHelper.prototype._isTeleportationFloor = function (mesh) {
             for (var i = 0; i < this._floorMeshesCollection.length; i++) {
                 if (this._floorMeshesCollection[i].id === mesh.id) {
@@ -91728,13 +92016,17 @@ var BABYLON;
                     });
                 }
                 controller.webVRController.onTriggerStateChangedObservable.add(function (stateObject) {
-                    if (!controller._pointerDownOnMeshAsked) {
+                    var gazer = controller;
+                    if (_this._noControllerIsActive) {
+                        gazer = _this._cameraGazer;
+                    }
+                    if (!gazer._pointerDownOnMeshAsked) {
                         if (stateObject.value > _this._padSensibilityUp) {
-                            controller._selectionPointerDown();
+                            gazer._selectionPointerDown();
                         }
                     }
                     else if (stateObject.value < _this._padSensibilityDown) {
-                        controller._selectionPointerUp();
+                        gazer._selectionPointerUp();
                     }
                 });
             }

dist/preview release/glTF2Interface/package.json

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

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": "3.3.0-alpha.6",
+    "version": "3.3.0-alpha.7",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "3.3.0-alpha.6",
+    "version": "3.3.0-alpha.7",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/loaders/babylon.glTF2FileLoader.d.ts

@@ -512,6 +512,7 @@ declare module BABYLON.GLTF2 {
         private _getDefaultMaterial(drawMode);
         private _loadMaterialMetallicRoughnessPropertiesAsync(context, material, babylonMaterial);
         _loadMaterialAsync(context: string, material: _ILoaderMaterial, mesh: _ILoaderMesh, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Promise<void>;
+        _loadMaterialPropertiesAsync(context: string, material: _ILoaderMaterial, babylonMaterial: Material): Promise<void>;
         _createMaterial(name: string, drawMode: number): PBRMaterial;
         _loadMaterialBasePropertiesAsync(context: string, material: _ILoaderMaterial, babylonMaterial: PBRMaterial): Promise<void>;
         _loadMaterialAlphaProperties(context: string, material: _ILoaderMaterial, babylonMaterial: PBRMaterial): void;
@@ -578,6 +579,11 @@ declare module BABYLON.GLTF2 {
          */
         protected _loadMaterialAsync(context: string, material: _ILoaderMaterial, mesh: _ILoaderMesh, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Nullable<Promise<void>>;
         /**
+         * Override this method to modify the default behavior for loading material properties.
+         * @hidden
+         */
+        protected _loadMaterialPropertiesAsync(context: string, material: _ILoaderMaterial, babylonMaterial: Material): Nullable<Promise<void>>;
+        /**
          * Override this method to modify the default behavior for loading textures.
          * @hidden
          */
@@ -618,6 +624,11 @@ declare module BABYLON.GLTF2 {
          */
         static _LoadMaterialAsync(loader: GLTFLoader, context: string, material: _ILoaderMaterial, mesh: _ILoaderMesh, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Nullable<Promise<void>>;
         /**
+         * Helper method called by the loader to allow extensions to override loading material properties.
+         * @hidden
+         */
+        static _LoadMaterialPropertiesAsync(loader: GLTFLoader, context: string, material: _ILoaderMaterial, babylonMaterial: Material): Nullable<Promise<void>>;
+        /**
          * Helper method called by the loader to allow extensions to override loading textures.
          * @hidden
          */
@@ -673,6 +684,7 @@ declare module BABYLON.GLTF2.Extensions {
          * Gets an array of LOD properties from lowest to highest.
          */
         private _getLODs<T>(context, property, array, ids);
+        private _disposeUnusedMaterials();
     }
 }
 
@@ -715,7 +727,7 @@ declare module BABYLON.GLTF2.Extensions {
      */
     class KHR_materials_pbrSpecularGlossiness extends GLTFLoaderExtension {
         readonly name: string;
-        protected _loadMaterialAsync(context: string, material: _ILoaderMaterial, mesh: _ILoaderMesh, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Nullable<Promise<void>>;
+        protected _loadMaterialPropertiesAsync(context: string, material: _ILoaderMaterial, babylonMaterial: Material): Nullable<Promise<void>>;
         private _loadSpecularGlossinessPropertiesAsync(context, material, properties, babylonMaterial);
     }
 }
@@ -727,7 +739,7 @@ declare module BABYLON.GLTF2.Extensions {
      */
     class KHR_materials_unlit extends GLTFLoaderExtension {
         readonly name: string;
-        protected _loadMaterialAsync(context: string, material: _ILoaderMaterial, mesh: _ILoaderMesh, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Nullable<Promise<void>>;
+        protected _loadMaterialPropertiesAsync(context: string, material: _ILoaderMaterial, babylonMaterial: Material): Nullable<Promise<void>>;
         private _loadUnlitPropertiesAsync(context, material, babylonMaterial);
     }
 }

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

@@ -1771,25 +1771,38 @@ var BABYLON;
                 material._babylonData = material._babylonData || {};
                 var babylonData = material._babylonData[babylonDrawMode];
                 if (!babylonData) {
-                    var promises = new Array();
                     this._parent._logOpen(context + " " + (material.name || ""));
-                    var name_4 = material.name || "material_" + material._index;
+                    var name_4 = material.name || "material" + material._index;
                     var babylonMaterial = this._createMaterial(name_4, babylonDrawMode);
-                    promises.push(this._loadMaterialBasePropertiesAsync(context, material, babylonMaterial));
-                    promises.push(this._loadMaterialMetallicRoughnessPropertiesAsync(context, material, babylonMaterial));
-                    this._parent.onMaterialLoadedObservable.notifyObservers(babylonMaterial);
                     babylonData = {
                         material: babylonMaterial,
                         meshes: [],
-                        loaded: Promise.all(promises).then(function () { })
+                        loaded: this._loadMaterialPropertiesAsync(context, material, babylonMaterial)
                     };
                     material._babylonData[babylonDrawMode] = babylonData;
+                    this._parent.onMaterialLoadedObservable.notifyObservers(babylonMaterial);
                     this._parent._logClose();
                 }
                 babylonData.meshes.push(babylonMesh);
+                babylonMesh.onDisposeObservable.addOnce(function () {
+                    var index = babylonData.meshes.indexOf(babylonMesh);
+                    if (index !== -1) {
+                        babylonData.meshes.splice(index, 1);
+                    }
+                });
                 assign(babylonData.material);
                 return babylonData.loaded;
             };
+            GLTFLoader.prototype._loadMaterialPropertiesAsync = function (context, material, babylonMaterial) {
+                var promise = GLTF2.GLTFLoaderExtension._LoadMaterialPropertiesAsync(this, context, material, babylonMaterial);
+                if (promise) {
+                    return promise;
+                }
+                var promises = new Array();
+                promises.push(this._loadMaterialBasePropertiesAsync(context, material, babylonMaterial));
+                promises.push(this._loadMaterialMetallicRoughnessPropertiesAsync(context, material, babylonMaterial));
+                return Promise.all(promises).then(function () { });
+            };
             GLTFLoader.prototype._createMaterial = function (name, drawMode) {
                 var babylonMaterial = new BABYLON.PBRMaterial(name, this._babylonScene);
                 babylonMaterial.sideOrientation = this._babylonScene.useRightHandedSystem ? BABYLON.Material.CounterClockWiseSideOrientation : BABYLON.Material.ClockWiseSideOrientation;
@@ -2213,6 +2226,11 @@ var BABYLON;
              */
             GLTFLoaderExtension.prototype._loadMaterialAsync = function (context, material, mesh, babylonMesh, babylonDrawMode, assign) { return null; };
             /**
+             * Override this method to modify the default behavior for loading material properties.
+             * @hidden
+             */
+            GLTFLoaderExtension.prototype._loadMaterialPropertiesAsync = function (context, material, babylonMaterial) { return null; };
+            /**
              * Override this method to modify the default behavior for loading textures.
              * @hidden
              */
@@ -2298,6 +2316,13 @@ var BABYLON;
                 return loader._applyExtensions(function (extension) { return extension._loadMaterialAsync(context, material, mesh, babylonMesh, babylonDrawMode, assign); });
             };
             /**
+             * Helper method called by the loader to allow extensions to override loading material properties.
+             * @hidden
+             */
+            GLTFLoaderExtension._LoadMaterialPropertiesAsync = function (loader, context, material, babylonMaterial) {
+                return loader._applyExtensions(function (extension) { return extension._loadMaterialPropertiesAsync(context, material, babylonMaterial); });
+            };
+            /**
              * Helper method called by the loader to allow extensions to override loading textures.
              * @hidden
              */
@@ -2432,8 +2457,9 @@ var BABYLON;
                                 if (indexLOD !== 0) {
                                     var previousNodeLOD = nodeLODs[indexLOD - 1];
                                     if (previousNodeLOD._babylonMesh) {
-                                        previousNodeLOD._babylonMesh.dispose(false, true);
+                                        previousNodeLOD._babylonMesh.dispose();
                                         delete previousNodeLOD._babylonMesh;
+                                        _this._disposeUnusedMaterials();
                                     }
                                 }
                             });
@@ -2533,6 +2559,23 @@ var BABYLON;
                     properties.push(property);
                     return properties;
                 };
+                MSFT_lod.prototype._disposeUnusedMaterials = function () {
+                    var materials = this._loader._gltf.materials;
+                    if (materials) {
+                        for (var _i = 0, materials_1 = materials; _i < materials_1.length; _i++) {
+                            var material = materials_1[_i];
+                            if (material._babylonData) {
+                                for (var drawMode in material._babylonData) {
+                                    var babylonData = material._babylonData[drawMode];
+                                    if (babylonData.meshes.length === 0) {
+                                        babylonData.material.dispose(false, true);
+                                        delete material._babylonData[drawMode];
+                                    }
+                                }
+                            }
+                        }
+                    }
+                };
                 return MSFT_lod;
             }(GLTF2.GLTFLoaderExtension));
             Extensions.MSFT_lod = MSFT_lod;
@@ -2777,28 +2820,13 @@ var BABYLON;
                     _this.name = NAME;
                     return _this;
                 }
-                KHR_materials_pbrSpecularGlossiness.prototype._loadMaterialAsync = function (context, material, mesh, babylonMesh, babylonDrawMode, assign) {
+                KHR_materials_pbrSpecularGlossiness.prototype._loadMaterialPropertiesAsync = function (context, material, babylonMaterial) {
                     var _this = this;
                     return this._loadExtensionAsync(context, material, function (extensionContext, extension) {
-                        material._babylonData = material._babylonData || {};
-                        var babylonData = material._babylonData[babylonDrawMode];
-                        if (!babylonData) {
-                            var promises = new Array();
-                            var name_1 = material.name || "materialSG_" + material._index;
-                            var babylonMaterial = _this._loader._createMaterial(name_1, babylonDrawMode);
-                            promises.push(_this._loader._loadMaterialBasePropertiesAsync(context, material, babylonMaterial));
-                            promises.push(_this._loadSpecularGlossinessPropertiesAsync(extensionContext, material, extension, babylonMaterial));
-                            _this._loader._parent.onMaterialLoadedObservable.notifyObservers(babylonMaterial);
-                            babylonData = {
-                                material: babylonMaterial,
-                                meshes: [],
-                                loaded: Promise.all(promises).then(function () { })
-                            };
-                            material._babylonData[babylonDrawMode] = babylonData;
-                        }
-                        babylonData.meshes.push(babylonMesh);
-                        assign(babylonData.material);
-                        return babylonData.loaded;
+                        var promises = new Array();
+                        promises.push(_this._loader._loadMaterialBasePropertiesAsync(context, material, babylonMaterial));
+                        promises.push(_this._loadSpecularGlossinessPropertiesAsync(extensionContext, material, extension, babylonMaterial));
+                        return Promise.all(promises).then(function () { });
                     });
                 };
                 KHR_materials_pbrSpecularGlossiness.prototype._loadSpecularGlossinessPropertiesAsync = function (context, material, properties, babylonMaterial) {
@@ -2865,31 +2893,15 @@ var BABYLON;
                     _this.name = NAME;
                     return _this;
                 }
-                KHR_materials_unlit.prototype._loadMaterialAsync = function (context, material, mesh, babylonMesh, babylonDrawMode, assign) {
+                KHR_materials_unlit.prototype._loadMaterialPropertiesAsync = function (context, material, babylonMaterial) {
                     var _this = this;
                     return this._loadExtensionAsync(context, material, function () {
-                        material._babylonData = material._babylonData || {};
-                        var babylonData = material._babylonData[babylonDrawMode];
-                        if (!babylonData) {
-                            var name_1 = material.name || "materialUnlit_" + material._index;
-                            var babylonMaterial = _this._loader._createMaterial(name_1, babylonDrawMode);
-                            babylonMaterial.unlit = true;
-                            var promise = _this._loadUnlitPropertiesAsync(context, material, babylonMaterial);
-                            _this._loader._parent.onMaterialLoadedObservable.notifyObservers(babylonMaterial);
-                            babylonData = {
-                                material: babylonMaterial,
-                                meshes: [],
-                                loaded: promise
-                            };
-                            material._babylonData[babylonDrawMode] = babylonData;
-                        }
-                        babylonData.meshes.push(babylonMesh);
-                        assign(babylonData.material);
-                        return babylonData.loaded;
+                        return _this._loadUnlitPropertiesAsync(context, material, babylonMaterial);
                     });
                 };
                 KHR_materials_unlit.prototype._loadUnlitPropertiesAsync = function (context, material, babylonMaterial) {
                     var promises = new Array();
+                    babylonMaterial.unlit = true;
                     // Ensure metallic workflow
                     babylonMaterial.metallic = 1;
                     babylonMaterial.roughness = 1;

dist/preview release/loaders/babylon.glTFFileLoader.d.ts

@@ -1074,6 +1074,7 @@ declare module BABYLON.GLTF2 {
         private _getDefaultMaterial(drawMode);
         private _loadMaterialMetallicRoughnessPropertiesAsync(context, material, babylonMaterial);
         _loadMaterialAsync(context: string, material: _ILoaderMaterial, mesh: _ILoaderMesh, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Promise<void>;
+        _loadMaterialPropertiesAsync(context: string, material: _ILoaderMaterial, babylonMaterial: Material): Promise<void>;
         _createMaterial(name: string, drawMode: number): PBRMaterial;
         _loadMaterialBasePropertiesAsync(context: string, material: _ILoaderMaterial, babylonMaterial: PBRMaterial): Promise<void>;
         _loadMaterialAlphaProperties(context: string, material: _ILoaderMaterial, babylonMaterial: PBRMaterial): void;
@@ -1140,6 +1141,11 @@ declare module BABYLON.GLTF2 {
          */
         protected _loadMaterialAsync(context: string, material: _ILoaderMaterial, mesh: _ILoaderMesh, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Nullable<Promise<void>>;
         /**
+         * Override this method to modify the default behavior for loading material properties.
+         * @hidden
+         */
+        protected _loadMaterialPropertiesAsync(context: string, material: _ILoaderMaterial, babylonMaterial: Material): Nullable<Promise<void>>;
+        /**
          * Override this method to modify the default behavior for loading textures.
          * @hidden
          */
@@ -1180,6 +1186,11 @@ declare module BABYLON.GLTF2 {
          */
         static _LoadMaterialAsync(loader: GLTFLoader, context: string, material: _ILoaderMaterial, mesh: _ILoaderMesh, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Nullable<Promise<void>>;
         /**
+         * Helper method called by the loader to allow extensions to override loading material properties.
+         * @hidden
+         */
+        static _LoadMaterialPropertiesAsync(loader: GLTFLoader, context: string, material: _ILoaderMaterial, babylonMaterial: Material): Nullable<Promise<void>>;
+        /**
          * Helper method called by the loader to allow extensions to override loading textures.
          * @hidden
          */
@@ -1235,6 +1246,7 @@ declare module BABYLON.GLTF2.Extensions {
          * Gets an array of LOD properties from lowest to highest.
          */
         private _getLODs<T>(context, property, array, ids);
+        private _disposeUnusedMaterials();
     }
 }
 
@@ -1277,7 +1289,7 @@ declare module BABYLON.GLTF2.Extensions {
      */
     class KHR_materials_pbrSpecularGlossiness extends GLTFLoaderExtension {
         readonly name: string;
-        protected _loadMaterialAsync(context: string, material: _ILoaderMaterial, mesh: _ILoaderMesh, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Nullable<Promise<void>>;
+        protected _loadMaterialPropertiesAsync(context: string, material: _ILoaderMaterial, babylonMaterial: Material): Nullable<Promise<void>>;
         private _loadSpecularGlossinessPropertiesAsync(context, material, properties, babylonMaterial);
     }
 }
@@ -1289,7 +1301,7 @@ declare module BABYLON.GLTF2.Extensions {
      */
     class KHR_materials_unlit extends GLTFLoaderExtension {
         readonly name: string;
-        protected _loadMaterialAsync(context: string, material: _ILoaderMaterial, mesh: _ILoaderMesh, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Nullable<Promise<void>>;
+        protected _loadMaterialPropertiesAsync(context: string, material: _ILoaderMaterial, babylonMaterial: Material): Nullable<Promise<void>>;
         private _loadUnlitPropertiesAsync(context, material, babylonMaterial);
     }
 }

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

@@ -3972,25 +3972,38 @@ var BABYLON;
                 material._babylonData = material._babylonData || {};
                 var babylonData = material._babylonData[babylonDrawMode];
                 if (!babylonData) {
-                    var promises = new Array();
                     this._parent._logOpen(context + " " + (material.name || ""));
-                    var name_4 = material.name || "material_" + material._index;
+                    var name_4 = material.name || "material" + material._index;
                     var babylonMaterial = this._createMaterial(name_4, babylonDrawMode);
-                    promises.push(this._loadMaterialBasePropertiesAsync(context, material, babylonMaterial));
-                    promises.push(this._loadMaterialMetallicRoughnessPropertiesAsync(context, material, babylonMaterial));
-                    this._parent.onMaterialLoadedObservable.notifyObservers(babylonMaterial);
                     babylonData = {
                         material: babylonMaterial,
                         meshes: [],
-                        loaded: Promise.all(promises).then(function () { })
+                        loaded: this._loadMaterialPropertiesAsync(context, material, babylonMaterial)
                     };
                     material._babylonData[babylonDrawMode] = babylonData;
+                    this._parent.onMaterialLoadedObservable.notifyObservers(babylonMaterial);
                     this._parent._logClose();
                 }
                 babylonData.meshes.push(babylonMesh);
+                babylonMesh.onDisposeObservable.addOnce(function () {
+                    var index = babylonData.meshes.indexOf(babylonMesh);
+                    if (index !== -1) {
+                        babylonData.meshes.splice(index, 1);
+                    }
+                });
                 assign(babylonData.material);
                 return babylonData.loaded;
             };
+            GLTFLoader.prototype._loadMaterialPropertiesAsync = function (context, material, babylonMaterial) {
+                var promise = GLTF2.GLTFLoaderExtension._LoadMaterialPropertiesAsync(this, context, material, babylonMaterial);
+                if (promise) {
+                    return promise;
+                }
+                var promises = new Array();
+                promises.push(this._loadMaterialBasePropertiesAsync(context, material, babylonMaterial));
+                promises.push(this._loadMaterialMetallicRoughnessPropertiesAsync(context, material, babylonMaterial));
+                return Promise.all(promises).then(function () { });
+            };
             GLTFLoader.prototype._createMaterial = function (name, drawMode) {
                 var babylonMaterial = new BABYLON.PBRMaterial(name, this._babylonScene);
                 babylonMaterial.sideOrientation = this._babylonScene.useRightHandedSystem ? BABYLON.Material.CounterClockWiseSideOrientation : BABYLON.Material.ClockWiseSideOrientation;
@@ -4414,6 +4427,11 @@ var BABYLON;
              */
             GLTFLoaderExtension.prototype._loadMaterialAsync = function (context, material, mesh, babylonMesh, babylonDrawMode, assign) { return null; };
             /**
+             * Override this method to modify the default behavior for loading material properties.
+             * @hidden
+             */
+            GLTFLoaderExtension.prototype._loadMaterialPropertiesAsync = function (context, material, babylonMaterial) { return null; };
+            /**
              * Override this method to modify the default behavior for loading textures.
              * @hidden
              */
@@ -4499,6 +4517,13 @@ var BABYLON;
                 return loader._applyExtensions(function (extension) { return extension._loadMaterialAsync(context, material, mesh, babylonMesh, babylonDrawMode, assign); });
             };
             /**
+             * Helper method called by the loader to allow extensions to override loading material properties.
+             * @hidden
+             */
+            GLTFLoaderExtension._LoadMaterialPropertiesAsync = function (loader, context, material, babylonMaterial) {
+                return loader._applyExtensions(function (extension) { return extension._loadMaterialPropertiesAsync(context, material, babylonMaterial); });
+            };
+            /**
              * Helper method called by the loader to allow extensions to override loading textures.
              * @hidden
              */
@@ -4633,8 +4658,9 @@ var BABYLON;
                                 if (indexLOD !== 0) {
                                     var previousNodeLOD = nodeLODs[indexLOD - 1];
                                     if (previousNodeLOD._babylonMesh) {
-                                        previousNodeLOD._babylonMesh.dispose(false, true);
+                                        previousNodeLOD._babylonMesh.dispose();
                                         delete previousNodeLOD._babylonMesh;
+                                        _this._disposeUnusedMaterials();
                                     }
                                 }
                             });
@@ -4734,6 +4760,23 @@ var BABYLON;
                     properties.push(property);
                     return properties;
                 };
+                MSFT_lod.prototype._disposeUnusedMaterials = function () {
+                    var materials = this._loader._gltf.materials;
+                    if (materials) {
+                        for (var _i = 0, materials_1 = materials; _i < materials_1.length; _i++) {
+                            var material = materials_1[_i];
+                            if (material._babylonData) {
+                                for (var drawMode in material._babylonData) {
+                                    var babylonData = material._babylonData[drawMode];
+                                    if (babylonData.meshes.length === 0) {
+                                        babylonData.material.dispose(false, true);
+                                        delete material._babylonData[drawMode];
+                                    }
+                                }
+                            }
+                        }
+                    }
+                };
                 return MSFT_lod;
             }(GLTF2.GLTFLoaderExtension));
             Extensions.MSFT_lod = MSFT_lod;
@@ -4978,28 +5021,13 @@ var BABYLON;
                     _this.name = NAME;
                     return _this;
                 }
-                KHR_materials_pbrSpecularGlossiness.prototype._loadMaterialAsync = function (context, material, mesh, babylonMesh, babylonDrawMode, assign) {
+                KHR_materials_pbrSpecularGlossiness.prototype._loadMaterialPropertiesAsync = function (context, material, babylonMaterial) {
                     var _this = this;
                     return this._loadExtensionAsync(context, material, function (extensionContext, extension) {
-                        material._babylonData = material._babylonData || {};
-                        var babylonData = material._babylonData[babylonDrawMode];
-                        if (!babylonData) {
-                            var promises = new Array();
-                            var name_1 = material.name || "materialSG_" + material._index;
-                            var babylonMaterial = _this._loader._createMaterial(name_1, babylonDrawMode);
-                            promises.push(_this._loader._loadMaterialBasePropertiesAsync(context, material, babylonMaterial));
-                            promises.push(_this._loadSpecularGlossinessPropertiesAsync(extensionContext, material, extension, babylonMaterial));
-                            _this._loader._parent.onMaterialLoadedObservable.notifyObservers(babylonMaterial);
-                            babylonData = {
-                                material: babylonMaterial,
-                                meshes: [],
-                                loaded: Promise.all(promises).then(function () { })
-                            };
-                            material._babylonData[babylonDrawMode] = babylonData;
-                        }
-                        babylonData.meshes.push(babylonMesh);
-                        assign(babylonData.material);
-                        return babylonData.loaded;
+                        var promises = new Array();
+                        promises.push(_this._loader._loadMaterialBasePropertiesAsync(context, material, babylonMaterial));
+                        promises.push(_this._loadSpecularGlossinessPropertiesAsync(extensionContext, material, extension, babylonMaterial));
+                        return Promise.all(promises).then(function () { });
                     });
                 };
                 KHR_materials_pbrSpecularGlossiness.prototype._loadSpecularGlossinessPropertiesAsync = function (context, material, properties, babylonMaterial) {
@@ -5066,31 +5094,15 @@ var BABYLON;
                     _this.name = NAME;
                     return _this;
                 }
-                KHR_materials_unlit.prototype._loadMaterialAsync = function (context, material, mesh, babylonMesh, babylonDrawMode, assign) {
+                KHR_materials_unlit.prototype._loadMaterialPropertiesAsync = function (context, material, babylonMaterial) {
                     var _this = this;
                     return this._loadExtensionAsync(context, material, function () {
-                        material._babylonData = material._babylonData || {};
-                        var babylonData = material._babylonData[babylonDrawMode];
-                        if (!babylonData) {
-                            var name_1 = material.name || "materialUnlit_" + material._index;
-                            var babylonMaterial = _this._loader._createMaterial(name_1, babylonDrawMode);
-                            babylonMaterial.unlit = true;
-                            var promise = _this._loadUnlitPropertiesAsync(context, material, babylonMaterial);
-                            _this._loader._parent.onMaterialLoadedObservable.notifyObservers(babylonMaterial);
-                            babylonData = {
-                                material: babylonMaterial,
-                                meshes: [],
-                                loaded: promise
-                            };
-                            material._babylonData[babylonDrawMode] = babylonData;
-                        }
-                        babylonData.meshes.push(babylonMesh);
-                        assign(babylonData.material);
-                        return babylonData.loaded;
+                        return _this._loadUnlitPropertiesAsync(context, material, babylonMaterial);
                     });
                 };
                 KHR_materials_unlit.prototype._loadUnlitPropertiesAsync = function (context, material, babylonMaterial) {
                     var promises = new Array();
+                    babylonMaterial.unlit = true;
                     // Ensure metallic workflow
                     babylonMaterial.metallic = 1;
                     babylonMaterial.roughness = 1;

dist/preview release/loaders/babylonjs.loaders.d.ts

@@ -1170,6 +1170,7 @@ declare module BABYLON.GLTF2 {
         private _getDefaultMaterial(drawMode);
         private _loadMaterialMetallicRoughnessPropertiesAsync(context, material, babylonMaterial);
         _loadMaterialAsync(context: string, material: _ILoaderMaterial, mesh: _ILoaderMesh, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Promise<void>;
+        _loadMaterialPropertiesAsync(context: string, material: _ILoaderMaterial, babylonMaterial: Material): Promise<void>;
         _createMaterial(name: string, drawMode: number): PBRMaterial;
         _loadMaterialBasePropertiesAsync(context: string, material: _ILoaderMaterial, babylonMaterial: PBRMaterial): Promise<void>;
         _loadMaterialAlphaProperties(context: string, material: _ILoaderMaterial, babylonMaterial: PBRMaterial): void;
@@ -1236,6 +1237,11 @@ declare module BABYLON.GLTF2 {
          */
         protected _loadMaterialAsync(context: string, material: _ILoaderMaterial, mesh: _ILoaderMesh, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Nullable<Promise<void>>;
         /**
+         * Override this method to modify the default behavior for loading material properties.
+         * @hidden
+         */
+        protected _loadMaterialPropertiesAsync(context: string, material: _ILoaderMaterial, babylonMaterial: Material): Nullable<Promise<void>>;
+        /**
          * Override this method to modify the default behavior for loading textures.
          * @hidden
          */
@@ -1276,6 +1282,11 @@ declare module BABYLON.GLTF2 {
          */
         static _LoadMaterialAsync(loader: GLTFLoader, context: string, material: _ILoaderMaterial, mesh: _ILoaderMesh, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Nullable<Promise<void>>;
         /**
+         * Helper method called by the loader to allow extensions to override loading material properties.
+         * @hidden
+         */
+        static _LoadMaterialPropertiesAsync(loader: GLTFLoader, context: string, material: _ILoaderMaterial, babylonMaterial: Material): Nullable<Promise<void>>;
+        /**
          * Helper method called by the loader to allow extensions to override loading textures.
          * @hidden
          */
@@ -1331,6 +1342,7 @@ declare module BABYLON.GLTF2.Extensions {
          * Gets an array of LOD properties from lowest to highest.
          */
         private _getLODs<T>(context, property, array, ids);
+        private _disposeUnusedMaterials();
     }
 }
 
@@ -1373,7 +1385,7 @@ declare module BABYLON.GLTF2.Extensions {
      */
     class KHR_materials_pbrSpecularGlossiness extends GLTFLoaderExtension {
         readonly name: string;
-        protected _loadMaterialAsync(context: string, material: _ILoaderMaterial, mesh: _ILoaderMesh, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Nullable<Promise<void>>;
+        protected _loadMaterialPropertiesAsync(context: string, material: _ILoaderMaterial, babylonMaterial: Material): Nullable<Promise<void>>;
         private _loadSpecularGlossinessPropertiesAsync(context, material, properties, babylonMaterial);
     }
 }
@@ -1385,7 +1397,7 @@ declare module BABYLON.GLTF2.Extensions {
      */
     class KHR_materials_unlit extends GLTFLoaderExtension {
         readonly name: string;
-        protected _loadMaterialAsync(context: string, material: _ILoaderMaterial, mesh: _ILoaderMesh, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Nullable<Promise<void>>;
+        protected _loadMaterialPropertiesAsync(context: string, material: _ILoaderMaterial, babylonMaterial: Material): Nullable<Promise<void>>;
         private _loadUnlitPropertiesAsync(context, material, babylonMaterial);
     }
 }

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

@@ -4957,25 +4957,38 @@ var BABYLON;
                 material._babylonData = material._babylonData || {};
                 var babylonData = material._babylonData[babylonDrawMode];
                 if (!babylonData) {
-                    var promises = new Array();
                     this._parent._logOpen(context + " " + (material.name || ""));
-                    var name_4 = material.name || "material_" + material._index;
+                    var name_4 = material.name || "material" + material._index;
                     var babylonMaterial = this._createMaterial(name_4, babylonDrawMode);
-                    promises.push(this._loadMaterialBasePropertiesAsync(context, material, babylonMaterial));
-                    promises.push(this._loadMaterialMetallicRoughnessPropertiesAsync(context, material, babylonMaterial));
-                    this._parent.onMaterialLoadedObservable.notifyObservers(babylonMaterial);
                     babylonData = {
                         material: babylonMaterial,
                         meshes: [],
-                        loaded: Promise.all(promises).then(function () { })
+                        loaded: this._loadMaterialPropertiesAsync(context, material, babylonMaterial)
                     };
                     material._babylonData[babylonDrawMode] = babylonData;
+                    this._parent.onMaterialLoadedObservable.notifyObservers(babylonMaterial);
                     this._parent._logClose();
                 }
                 babylonData.meshes.push(babylonMesh);
+                babylonMesh.onDisposeObservable.addOnce(function () {
+                    var index = babylonData.meshes.indexOf(babylonMesh);
+                    if (index !== -1) {
+                        babylonData.meshes.splice(index, 1);
+                    }
+                });
                 assign(babylonData.material);
                 return babylonData.loaded;
             };
+            GLTFLoader.prototype._loadMaterialPropertiesAsync = function (context, material, babylonMaterial) {
+                var promise = GLTF2.GLTFLoaderExtension._LoadMaterialPropertiesAsync(this, context, material, babylonMaterial);
+                if (promise) {
+                    return promise;
+                }
+                var promises = new Array();
+                promises.push(this._loadMaterialBasePropertiesAsync(context, material, babylonMaterial));
+                promises.push(this._loadMaterialMetallicRoughnessPropertiesAsync(context, material, babylonMaterial));
+                return Promise.all(promises).then(function () { });
+            };
             GLTFLoader.prototype._createMaterial = function (name, drawMode) {
                 var babylonMaterial = new BABYLON.PBRMaterial(name, this._babylonScene);
                 babylonMaterial.sideOrientation = this._babylonScene.useRightHandedSystem ? BABYLON.Material.CounterClockWiseSideOrientation : BABYLON.Material.ClockWiseSideOrientation;
@@ -5399,6 +5412,11 @@ var BABYLON;
              */
             GLTFLoaderExtension.prototype._loadMaterialAsync = function (context, material, mesh, babylonMesh, babylonDrawMode, assign) { return null; };
             /**
+             * Override this method to modify the default behavior for loading material properties.
+             * @hidden
+             */
+            GLTFLoaderExtension.prototype._loadMaterialPropertiesAsync = function (context, material, babylonMaterial) { return null; };
+            /**
              * Override this method to modify the default behavior for loading textures.
              * @hidden
              */
@@ -5484,6 +5502,13 @@ var BABYLON;
                 return loader._applyExtensions(function (extension) { return extension._loadMaterialAsync(context, material, mesh, babylonMesh, babylonDrawMode, assign); });
             };
             /**
+             * Helper method called by the loader to allow extensions to override loading material properties.
+             * @hidden
+             */
+            GLTFLoaderExtension._LoadMaterialPropertiesAsync = function (loader, context, material, babylonMaterial) {
+                return loader._applyExtensions(function (extension) { return extension._loadMaterialPropertiesAsync(context, material, babylonMaterial); });
+            };
+            /**
              * Helper method called by the loader to allow extensions to override loading textures.
              * @hidden
              */
@@ -5609,8 +5634,9 @@ var BABYLON;
                                 if (indexLOD !== 0) {
                                     var previousNodeLOD = nodeLODs[indexLOD - 1];
                                     if (previousNodeLOD._babylonMesh) {
-                                        previousNodeLOD._babylonMesh.dispose(false, true);
+                                        previousNodeLOD._babylonMesh.dispose();
                                         delete previousNodeLOD._babylonMesh;
+                                        _this._disposeUnusedMaterials();
                                     }
                                 }
                             });
@@ -5710,6 +5736,23 @@ var BABYLON;
                     properties.push(property);
                     return properties;
                 };
+                MSFT_lod.prototype._disposeUnusedMaterials = function () {
+                    var materials = this._loader._gltf.materials;
+                    if (materials) {
+                        for (var _i = 0, materials_1 = materials; _i < materials_1.length; _i++) {
+                            var material = materials_1[_i];
+                            if (material._babylonData) {
+                                for (var drawMode in material._babylonData) {
+                                    var babylonData = material._babylonData[drawMode];
+                                    if (babylonData.meshes.length === 0) {
+                                        babylonData.material.dispose(false, true);
+                                        delete material._babylonData[drawMode];
+                                    }
+                                }
+                            }
+                        }
+                    }
+                };
                 return MSFT_lod;
             }(GLTF2.GLTFLoaderExtension));
             Extensions.MSFT_lod = MSFT_lod;
@@ -5918,28 +5961,13 @@ var BABYLON;
                     _this.name = NAME;
                     return _this;
                 }
-                KHR_materials_pbrSpecularGlossiness.prototype._loadMaterialAsync = function (context, material, mesh, babylonMesh, babylonDrawMode, assign) {
+                KHR_materials_pbrSpecularGlossiness.prototype._loadMaterialPropertiesAsync = function (context, material, babylonMaterial) {
                     var _this = this;
                     return this._loadExtensionAsync(context, material, function (extensionContext, extension) {
-                        material._babylonData = material._babylonData || {};
-                        var babylonData = material._babylonData[babylonDrawMode];
-                        if (!babylonData) {
-                            var promises = new Array();
-                            var name_1 = material.name || "materialSG_" + material._index;
-                            var babylonMaterial = _this._loader._createMaterial(name_1, babylonDrawMode);
-                            promises.push(_this._loader._loadMaterialBasePropertiesAsync(context, material, babylonMaterial));
-                            promises.push(_this._loadSpecularGlossinessPropertiesAsync(extensionContext, material, extension, babylonMaterial));
-                            _this._loader._parent.onMaterialLoadedObservable.notifyObservers(babylonMaterial);
-                            babylonData = {
-                                material: babylonMaterial,
-                                meshes: [],
-                                loaded: Promise.all(promises).then(function () { })
-                            };
-                            material._babylonData[babylonDrawMode] = babylonData;
-                        }
-                        babylonData.meshes.push(babylonMesh);
-                        assign(babylonData.material);
-                        return babylonData.loaded;
+                        var promises = new Array();
+                        promises.push(_this._loader._loadMaterialBasePropertiesAsync(context, material, babylonMaterial));
+                        promises.push(_this._loadSpecularGlossinessPropertiesAsync(extensionContext, material, extension, babylonMaterial));
+                        return Promise.all(promises).then(function () { });
                     });
                 };
                 KHR_materials_pbrSpecularGlossiness.prototype._loadSpecularGlossinessPropertiesAsync = function (context, material, properties, babylonMaterial) {
@@ -5997,31 +6025,15 @@ var BABYLON;
                     _this.name = NAME;
                     return _this;
                 }
-                KHR_materials_unlit.prototype._loadMaterialAsync = function (context, material, mesh, babylonMesh, babylonDrawMode, assign) {
+                KHR_materials_unlit.prototype._loadMaterialPropertiesAsync = function (context, material, babylonMaterial) {
                     var _this = this;
                     return this._loadExtensionAsync(context, material, function () {
-                        material._babylonData = material._babylonData || {};
-                        var babylonData = material._babylonData[babylonDrawMode];
-                        if (!babylonData) {
-                            var name_1 = material.name || "materialUnlit_" + material._index;
-                            var babylonMaterial = _this._loader._createMaterial(name_1, babylonDrawMode);
-                            babylonMaterial.unlit = true;
-                            var promise = _this._loadUnlitPropertiesAsync(context, material, babylonMaterial);
-                            _this._loader._parent.onMaterialLoadedObservable.notifyObservers(babylonMaterial);
-                            babylonData = {
-                                material: babylonMaterial,
-                                meshes: [],
-                                loaded: promise
-                            };
-                            material._babylonData[babylonDrawMode] = babylonData;
-                        }
-                        babylonData.meshes.push(babylonMesh);
-                        assign(babylonData.material);
-                        return babylonData.loaded;
+                        return _this._loadUnlitPropertiesAsync(context, material, babylonMaterial);
                     });
                 };
                 KHR_materials_unlit.prototype._loadUnlitPropertiesAsync = function (context, material, babylonMaterial) {
                     var promises = new Array();
+                    babylonMaterial.unlit = true;
                     // Ensure metallic workflow
                     babylonMaterial.metallic = 1;
                     babylonMaterial.roughness = 1;

dist/preview release/loaders/babylonjs.loaders.module.d.ts

@@ -1177,6 +1177,7 @@ declare module BABYLON.GLTF2 {
         private _getDefaultMaterial(drawMode);
         private _loadMaterialMetallicRoughnessPropertiesAsync(context, material, babylonMaterial);
         _loadMaterialAsync(context: string, material: _ILoaderMaterial, mesh: _ILoaderMesh, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Promise<void>;
+        _loadMaterialPropertiesAsync(context: string, material: _ILoaderMaterial, babylonMaterial: Material): Promise<void>;
         _createMaterial(name: string, drawMode: number): PBRMaterial;
         _loadMaterialBasePropertiesAsync(context: string, material: _ILoaderMaterial, babylonMaterial: PBRMaterial): Promise<void>;
         _loadMaterialAlphaProperties(context: string, material: _ILoaderMaterial, babylonMaterial: PBRMaterial): void;
@@ -1243,6 +1244,11 @@ declare module BABYLON.GLTF2 {
          */
         protected _loadMaterialAsync(context: string, material: _ILoaderMaterial, mesh: _ILoaderMesh, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Nullable<Promise<void>>;
         /**
+         * Override this method to modify the default behavior for loading material properties.
+         * @hidden
+         */
+        protected _loadMaterialPropertiesAsync(context: string, material: _ILoaderMaterial, babylonMaterial: Material): Nullable<Promise<void>>;
+        /**
          * Override this method to modify the default behavior for loading textures.
          * @hidden
          */
@@ -1283,6 +1289,11 @@ declare module BABYLON.GLTF2 {
          */
         static _LoadMaterialAsync(loader: GLTFLoader, context: string, material: _ILoaderMaterial, mesh: _ILoaderMesh, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Nullable<Promise<void>>;
         /**
+         * Helper method called by the loader to allow extensions to override loading material properties.
+         * @hidden
+         */
+        static _LoadMaterialPropertiesAsync(loader: GLTFLoader, context: string, material: _ILoaderMaterial, babylonMaterial: Material): Nullable<Promise<void>>;
+        /**
          * Helper method called by the loader to allow extensions to override loading textures.
          * @hidden
          */
@@ -1338,6 +1349,7 @@ declare module BABYLON.GLTF2.Extensions {
          * Gets an array of LOD properties from lowest to highest.
          */
         private _getLODs<T>(context, property, array, ids);
+        private _disposeUnusedMaterials();
     }
 }
 
@@ -1380,7 +1392,7 @@ declare module BABYLON.GLTF2.Extensions {
      */
     class KHR_materials_pbrSpecularGlossiness extends GLTFLoaderExtension {
         readonly name: string;
-        protected _loadMaterialAsync(context: string, material: _ILoaderMaterial, mesh: _ILoaderMesh, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Nullable<Promise<void>>;
+        protected _loadMaterialPropertiesAsync(context: string, material: _ILoaderMaterial, babylonMaterial: Material): Nullable<Promise<void>>;
         private _loadSpecularGlossinessPropertiesAsync(context, material, properties, babylonMaterial);
     }
 }
@@ -1392,7 +1404,7 @@ declare module BABYLON.GLTF2.Extensions {
      */
     class KHR_materials_unlit extends GLTFLoaderExtension {
         readonly name: string;
-        protected _loadMaterialAsync(context: string, material: _ILoaderMaterial, mesh: _ILoaderMesh, babylonMesh: Mesh, babylonDrawMode: number, assign: (babylonMaterial: Material) => void): Nullable<Promise<void>>;
+        protected _loadMaterialPropertiesAsync(context: string, material: _ILoaderMaterial, babylonMaterial: Material): Nullable<Promise<void>>;
         private _loadUnlitPropertiesAsync(context, material, babylonMaterial);
     }
 }

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": "3.3.0-alpha.6",
+    "version": "3.3.0-alpha.7",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -27,7 +27,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "3.3.0-alpha.6"
+        "babylonjs-gltf2interface": "3.3.0-alpha.7"
     },
     "peerDependencies": {
         "babylonjs": ">=3.2.0-alpha"

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": "3.3.0-alpha.6",
+    "version": "3.3.0-alpha.7",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

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": "3.3.0-alpha.6",
+    "version": "3.3.0-alpha.7",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

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": "3.3.0-alpha.6",
+    "version": "3.3.0-alpha.7",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

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": "3.3.0-alpha.6",
+    "version": "3.3.0-alpha.7",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -27,7 +27,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "3.3.0-alpha.6"
+        "babylonjs-gltf2interface": "3.3.0-alpha.7"
     },
     "peerDependencies": {
         "babylonjs": ">=3.2.0-alpha"

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

@@ -168,6 +168,7 @@ declare module BabylonViewer {
                 * This will be executed when the templates initialize.
                 */
             protected _onTemplatesLoaded(): Promise<AbstractViewer>;
+            toggleHD(): void;
             /**
                 * Toggle fullscreen of the entire viewer
                 */
@@ -366,6 +367,8 @@ declare module BabylonViewer {
                 * force resizing the engine.
                 */
             forceResize(): void;
+            protected _hdToggled: boolean;
+            toggleHD(): void;
             /**
                 * The resize function that will be registered with the window object
                 */
@@ -986,6 +989,7 @@ declare module BabylonViewer {
                     disableResize?: boolean;
                     engineOptions?: BABYLON.EngineOptions;
                     adaptiveQuality?: boolean;
+                    hdEnabled?: boolean;
             };
             templates?: {
                     main: ITemplateConfiguration;

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

@@ -168,6 +168,7 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * This will be executed when the templates initialize.
                 */
             protected _onTemplatesLoaded(): Promise<AbstractViewer>;
+            toggleHD(): void;
             /**
                 * Toggle fullscreen of the entire viewer
                 */
@@ -366,6 +367,8 @@ declare module 'babylonjs-viewer/viewer/viewer' {
                 * force resizing the engine.
                 */
             forceResize(): void;
+            protected _hdToggled: boolean;
+            toggleHD(): void;
             /**
                 * The resize function that will be registered with the window object
                 */
@@ -986,6 +989,7 @@ declare module 'babylonjs-viewer/configuration/configuration' {
                     disableResize?: boolean;
                     engineOptions?: EngineOptions;
                     adaptiveQuality?: boolean;
+                    hdEnabled?: boolean;
             };
             templates?: {
                     main: ITemplateConfiguration;

package.json

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

src/Engine/babylon.engine.ts

@@ -710,7 +710,7 @@
          * Returns the current version of the framework
          */
         public static get Version(): string {
-            return "3.3.0-alpha.6";
+            return "3.3.0-alpha.7";
         }
 
         // Updatable statics so stick with vars here