Nightly

dist/preview release/babylon.max.js

@@ -88939,6 +88939,19 @@ var BABYLON;
             });
             this._updateCamera();
         }
+        Object.defineProperty(UtilityLayerRenderer, "DefaultUtilityLayer", {
+            get: function () {
+                if (UtilityLayerRenderer._DefaultUtilityLayer == null) {
+                    UtilityLayerRenderer._DefaultUtilityLayer = new UtilityLayerRenderer(BABYLON.Engine.LastCreatedScene);
+                    UtilityLayerRenderer._DefaultUtilityLayer.originalScene.onDisposeObservable.add(function () {
+                        UtilityLayerRenderer._DefaultUtilityLayer = null;
+                    });
+                }
+                return UtilityLayerRenderer._DefaultUtilityLayer;
+            },
+            enumerable: true,
+            configurable: true
+        });
         UtilityLayerRenderer.prototype._notifyObservers = function (prePointerInfo, pickInfo, pointerEvent) {
             if (!prePointerInfo.skipOnPointerObservable) {
                 this.utilityLayerScene.onPointerObservable.notifyObservers(new BABYLON.PointerInfo(prePointerInfo.type, prePointerInfo.event, pickInfo));
@@ -88971,6 +88984,7 @@ var BABYLON;
         UtilityLayerRenderer.prototype._updateCamera = function () {
             this.utilityLayerScene.activeCamera = this.originalScene.activeCamera;
         };
+        UtilityLayerRenderer._DefaultUtilityLayer = null;
         return UtilityLayerRenderer;
     }());
     BABYLON.UtilityLayerRenderer = UtilityLayerRenderer;
@@ -89512,6 +89526,7 @@ var BABYLON;
          * @param gizmoLayer The utility layer the gizmo will be added to
          */
         function Gizmo(/** The utility layer the gizmo will be added to */ gizmoLayer) {
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = this;
             this.gizmoLayer = gizmoLayer;
             /**
@@ -89595,7 +89610,9 @@ var BABYLON;
          * @param dragAxis The axis which the gizmo will be able to drag on
          * @param color The color of the gizmo
          */
-        function AxisDragGizmo(gizmoLayer, dragAxis, color) {
+        function AxisDragGizmo(dragAxis, color, gizmoLayer) {
+            if (color === void 0) { color = BABYLON.Color3.Gray(); }
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
             _this._pointerObserver = null;
             /**
@@ -89706,7 +89723,9 @@ var BABYLON;
          * @param dragAxis The axis which the gizmo will be able to scale on
          * @param color The color of the gizmo
          */
-        function AxisScaleGizmo(gizmoLayer, dragAxis, color) {
+        function AxisScaleGizmo(dragAxis, color, gizmoLayer) {
+            if (color === void 0) { color = BABYLON.Color3.Gray(); }
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
             _this._pointerObserver = null;
             /**
@@ -89839,7 +89858,9 @@ var BABYLON;
          * @param planeNormal The normal of the plane which the gizmo will be able to rotate on
          * @param color The color of the gizmo
          */
-        function PlaneRotationGizmo(gizmoLayer, planeNormal, color) {
+        function PlaneRotationGizmo(planeNormal, color, gizmoLayer) {
+            if (color === void 0) { color = BABYLON.Color3.Gray(); }
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
             _this._pointerObserver = null;
             /**
@@ -89985,10 +90006,11 @@ var BABYLON;
              * @param gizmoLayer The utility layer the gizmo will be added to
              */
         function PositionGizmo(gizmoLayer) {
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
-            _this._xDrag = new BABYLON.AxisDragGizmo(gizmoLayer, new BABYLON.Vector3(1, 0, 0), BABYLON.Color3.Green().scale(0.5));
-            _this._yDrag = new BABYLON.AxisDragGizmo(gizmoLayer, new BABYLON.Vector3(0, 1, 0), BABYLON.Color3.Red().scale(0.5));
-            _this._zDrag = new BABYLON.AxisDragGizmo(gizmoLayer, new BABYLON.Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5));
+            _this._xDrag = new BABYLON.AxisDragGizmo(new BABYLON.Vector3(1, 0, 0), BABYLON.Color3.Green().scale(0.5), gizmoLayer);
+            _this._yDrag = new BABYLON.AxisDragGizmo(new BABYLON.Vector3(0, 1, 0), BABYLON.Color3.Red().scale(0.5), gizmoLayer);
+            _this._zDrag = new BABYLON.AxisDragGizmo(new BABYLON.Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5), gizmoLayer);
             _this.attachedMesh = null;
             return _this;
         }
@@ -90045,10 +90067,11 @@ var BABYLON;
          * @param gizmoLayer The utility layer the gizmo will be added to
          */
         function RotationGizmo(gizmoLayer) {
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
-            _this._xDrag = new BABYLON.PlaneRotationGizmo(gizmoLayer, new BABYLON.Vector3(1, 0, 0), BABYLON.Color3.Green().scale(0.5));
-            _this._yDrag = new BABYLON.PlaneRotationGizmo(gizmoLayer, new BABYLON.Vector3(0, 1, 0), BABYLON.Color3.Red().scale(0.5));
-            _this._zDrag = new BABYLON.PlaneRotationGizmo(gizmoLayer, new BABYLON.Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5));
+            _this._xDrag = new BABYLON.PlaneRotationGizmo(new BABYLON.Vector3(1, 0, 0), BABYLON.Color3.Green().scale(0.5), gizmoLayer);
+            _this._yDrag = new BABYLON.PlaneRotationGizmo(new BABYLON.Vector3(0, 1, 0), BABYLON.Color3.Red().scale(0.5), gizmoLayer);
+            _this._zDrag = new BABYLON.PlaneRotationGizmo(new BABYLON.Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5), gizmoLayer);
             _this.attachedMesh = null;
             return _this;
         }
@@ -90105,10 +90128,11 @@ var BABYLON;
          * @param gizmoLayer The utility layer the gizmo will be added to
          */
         function ScaleGizmo(gizmoLayer) {
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
-            _this._xDrag = new BABYLON.AxisScaleGizmo(gizmoLayer, new BABYLON.Vector3(1, 0, 0), BABYLON.Color3.Green().scale(0.5));
-            _this._yDrag = new BABYLON.AxisScaleGizmo(gizmoLayer, new BABYLON.Vector3(0, 1, 0), BABYLON.Color3.Red().scale(0.5));
-            _this._zDrag = new BABYLON.AxisScaleGizmo(gizmoLayer, new BABYLON.Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5));
+            _this._xDrag = new BABYLON.AxisScaleGizmo(new BABYLON.Vector3(1, 0, 0), BABYLON.Color3.Green().scale(0.5), gizmoLayer);
+            _this._yDrag = new BABYLON.AxisScaleGizmo(new BABYLON.Vector3(0, 1, 0), BABYLON.Color3.Red().scale(0.5), gizmoLayer);
+            _this._zDrag = new BABYLON.AxisScaleGizmo(new BABYLON.Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5), gizmoLayer);
             _this.attachedMesh = null;
             return _this;
         }
@@ -90165,7 +90189,9 @@ var BABYLON;
          * @param gizmoLayer The utility layer the gizmo will be added to
          * @param color The color of the gizmo
          */
-        function BoundingBoxGizmo(gizmoLayer, color) {
+        function BoundingBoxGizmo(color, gizmoLayer) {
+            if (color === void 0) { color = BABYLON.Color3.Gray(); }
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
             _this._boundingDimensions = new BABYLON.Vector3(1, 1, 1);
             _this._renderObserver = null;

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

@@ -88906,6 +88906,19 @@ var BABYLON;
             });
             this._updateCamera();
         }
+        Object.defineProperty(UtilityLayerRenderer, "DefaultUtilityLayer", {
+            get: function () {
+                if (UtilityLayerRenderer._DefaultUtilityLayer == null) {
+                    UtilityLayerRenderer._DefaultUtilityLayer = new UtilityLayerRenderer(BABYLON.Engine.LastCreatedScene);
+                    UtilityLayerRenderer._DefaultUtilityLayer.originalScene.onDisposeObservable.add(function () {
+                        UtilityLayerRenderer._DefaultUtilityLayer = null;
+                    });
+                }
+                return UtilityLayerRenderer._DefaultUtilityLayer;
+            },
+            enumerable: true,
+            configurable: true
+        });
         UtilityLayerRenderer.prototype._notifyObservers = function (prePointerInfo, pickInfo, pointerEvent) {
             if (!prePointerInfo.skipOnPointerObservable) {
                 this.utilityLayerScene.onPointerObservable.notifyObservers(new BABYLON.PointerInfo(prePointerInfo.type, prePointerInfo.event, pickInfo));
@@ -88938,6 +88951,7 @@ var BABYLON;
         UtilityLayerRenderer.prototype._updateCamera = function () {
             this.utilityLayerScene.activeCamera = this.originalScene.activeCamera;
         };
+        UtilityLayerRenderer._DefaultUtilityLayer = null;
         return UtilityLayerRenderer;
     }());
     BABYLON.UtilityLayerRenderer = UtilityLayerRenderer;
@@ -89479,6 +89493,7 @@ var BABYLON;
          * @param gizmoLayer The utility layer the gizmo will be added to
          */
         function Gizmo(/** The utility layer the gizmo will be added to */ gizmoLayer) {
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = this;
             this.gizmoLayer = gizmoLayer;
             /**
@@ -89562,7 +89577,9 @@ var BABYLON;
          * @param dragAxis The axis which the gizmo will be able to drag on
          * @param color The color of the gizmo
          */
-        function AxisDragGizmo(gizmoLayer, dragAxis, color) {
+        function AxisDragGizmo(dragAxis, color, gizmoLayer) {
+            if (color === void 0) { color = BABYLON.Color3.Gray(); }
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
             _this._pointerObserver = null;
             /**
@@ -89673,7 +89690,9 @@ var BABYLON;
          * @param dragAxis The axis which the gizmo will be able to scale on
          * @param color The color of the gizmo
          */
-        function AxisScaleGizmo(gizmoLayer, dragAxis, color) {
+        function AxisScaleGizmo(dragAxis, color, gizmoLayer) {
+            if (color === void 0) { color = BABYLON.Color3.Gray(); }
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
             _this._pointerObserver = null;
             /**
@@ -89806,7 +89825,9 @@ var BABYLON;
          * @param planeNormal The normal of the plane which the gizmo will be able to rotate on
          * @param color The color of the gizmo
          */
-        function PlaneRotationGizmo(gizmoLayer, planeNormal, color) {
+        function PlaneRotationGizmo(planeNormal, color, gizmoLayer) {
+            if (color === void 0) { color = BABYLON.Color3.Gray(); }
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
             _this._pointerObserver = null;
             /**
@@ -89952,10 +89973,11 @@ var BABYLON;
              * @param gizmoLayer The utility layer the gizmo will be added to
              */
         function PositionGizmo(gizmoLayer) {
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
-            _this._xDrag = new BABYLON.AxisDragGizmo(gizmoLayer, new BABYLON.Vector3(1, 0, 0), BABYLON.Color3.Green().scale(0.5));
-            _this._yDrag = new BABYLON.AxisDragGizmo(gizmoLayer, new BABYLON.Vector3(0, 1, 0), BABYLON.Color3.Red().scale(0.5));
-            _this._zDrag = new BABYLON.AxisDragGizmo(gizmoLayer, new BABYLON.Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5));
+            _this._xDrag = new BABYLON.AxisDragGizmo(new BABYLON.Vector3(1, 0, 0), BABYLON.Color3.Green().scale(0.5), gizmoLayer);
+            _this._yDrag = new BABYLON.AxisDragGizmo(new BABYLON.Vector3(0, 1, 0), BABYLON.Color3.Red().scale(0.5), gizmoLayer);
+            _this._zDrag = new BABYLON.AxisDragGizmo(new BABYLON.Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5), gizmoLayer);
             _this.attachedMesh = null;
             return _this;
         }
@@ -90012,10 +90034,11 @@ var BABYLON;
          * @param gizmoLayer The utility layer the gizmo will be added to
          */
         function RotationGizmo(gizmoLayer) {
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
-            _this._xDrag = new BABYLON.PlaneRotationGizmo(gizmoLayer, new BABYLON.Vector3(1, 0, 0), BABYLON.Color3.Green().scale(0.5));
-            _this._yDrag = new BABYLON.PlaneRotationGizmo(gizmoLayer, new BABYLON.Vector3(0, 1, 0), BABYLON.Color3.Red().scale(0.5));
-            _this._zDrag = new BABYLON.PlaneRotationGizmo(gizmoLayer, new BABYLON.Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5));
+            _this._xDrag = new BABYLON.PlaneRotationGizmo(new BABYLON.Vector3(1, 0, 0), BABYLON.Color3.Green().scale(0.5), gizmoLayer);
+            _this._yDrag = new BABYLON.PlaneRotationGizmo(new BABYLON.Vector3(0, 1, 0), BABYLON.Color3.Red().scale(0.5), gizmoLayer);
+            _this._zDrag = new BABYLON.PlaneRotationGizmo(new BABYLON.Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5), gizmoLayer);
             _this.attachedMesh = null;
             return _this;
         }
@@ -90072,10 +90095,11 @@ var BABYLON;
          * @param gizmoLayer The utility layer the gizmo will be added to
          */
         function ScaleGizmo(gizmoLayer) {
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
-            _this._xDrag = new BABYLON.AxisScaleGizmo(gizmoLayer, new BABYLON.Vector3(1, 0, 0), BABYLON.Color3.Green().scale(0.5));
-            _this._yDrag = new BABYLON.AxisScaleGizmo(gizmoLayer, new BABYLON.Vector3(0, 1, 0), BABYLON.Color3.Red().scale(0.5));
-            _this._zDrag = new BABYLON.AxisScaleGizmo(gizmoLayer, new BABYLON.Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5));
+            _this._xDrag = new BABYLON.AxisScaleGizmo(new BABYLON.Vector3(1, 0, 0), BABYLON.Color3.Green().scale(0.5), gizmoLayer);
+            _this._yDrag = new BABYLON.AxisScaleGizmo(new BABYLON.Vector3(0, 1, 0), BABYLON.Color3.Red().scale(0.5), gizmoLayer);
+            _this._zDrag = new BABYLON.AxisScaleGizmo(new BABYLON.Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5), gizmoLayer);
             _this.attachedMesh = null;
             return _this;
         }
@@ -90132,7 +90156,9 @@ var BABYLON;
          * @param gizmoLayer The utility layer the gizmo will be added to
          * @param color The color of the gizmo
          */
-        function BoundingBoxGizmo(gizmoLayer, color) {
+        function BoundingBoxGizmo(color, gizmoLayer) {
+            if (color === void 0) { color = BABYLON.Color3.Gray(); }
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
             _this._boundingDimensions = new BABYLON.Vector3(1, 1, 1);
             _this._renderObserver = null;

dist/preview release/es6.js

@@ -88906,6 +88906,19 @@ var BABYLON;
             });
             this._updateCamera();
         }
+        Object.defineProperty(UtilityLayerRenderer, "DefaultUtilityLayer", {
+            get: function () {
+                if (UtilityLayerRenderer._DefaultUtilityLayer == null) {
+                    UtilityLayerRenderer._DefaultUtilityLayer = new UtilityLayerRenderer(BABYLON.Engine.LastCreatedScene);
+                    UtilityLayerRenderer._DefaultUtilityLayer.originalScene.onDisposeObservable.add(function () {
+                        UtilityLayerRenderer._DefaultUtilityLayer = null;
+                    });
+                }
+                return UtilityLayerRenderer._DefaultUtilityLayer;
+            },
+            enumerable: true,
+            configurable: true
+        });
         UtilityLayerRenderer.prototype._notifyObservers = function (prePointerInfo, pickInfo, pointerEvent) {
             if (!prePointerInfo.skipOnPointerObservable) {
                 this.utilityLayerScene.onPointerObservable.notifyObservers(new BABYLON.PointerInfo(prePointerInfo.type, prePointerInfo.event, pickInfo));
@@ -88938,6 +88951,7 @@ var BABYLON;
         UtilityLayerRenderer.prototype._updateCamera = function () {
             this.utilityLayerScene.activeCamera = this.originalScene.activeCamera;
         };
+        UtilityLayerRenderer._DefaultUtilityLayer = null;
         return UtilityLayerRenderer;
     }());
     BABYLON.UtilityLayerRenderer = UtilityLayerRenderer;
@@ -89479,6 +89493,7 @@ var BABYLON;
          * @param gizmoLayer The utility layer the gizmo will be added to
          */
         function Gizmo(/** The utility layer the gizmo will be added to */ gizmoLayer) {
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = this;
             this.gizmoLayer = gizmoLayer;
             /**
@@ -89562,7 +89577,9 @@ var BABYLON;
          * @param dragAxis The axis which the gizmo will be able to drag on
          * @param color The color of the gizmo
          */
-        function AxisDragGizmo(gizmoLayer, dragAxis, color) {
+        function AxisDragGizmo(dragAxis, color, gizmoLayer) {
+            if (color === void 0) { color = BABYLON.Color3.Gray(); }
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
             _this._pointerObserver = null;
             /**
@@ -89673,7 +89690,9 @@ var BABYLON;
          * @param dragAxis The axis which the gizmo will be able to scale on
          * @param color The color of the gizmo
          */
-        function AxisScaleGizmo(gizmoLayer, dragAxis, color) {
+        function AxisScaleGizmo(dragAxis, color, gizmoLayer) {
+            if (color === void 0) { color = BABYLON.Color3.Gray(); }
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
             _this._pointerObserver = null;
             /**
@@ -89806,7 +89825,9 @@ var BABYLON;
          * @param planeNormal The normal of the plane which the gizmo will be able to rotate on
          * @param color The color of the gizmo
          */
-        function PlaneRotationGizmo(gizmoLayer, planeNormal, color) {
+        function PlaneRotationGizmo(planeNormal, color, gizmoLayer) {
+            if (color === void 0) { color = BABYLON.Color3.Gray(); }
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
             _this._pointerObserver = null;
             /**
@@ -89952,10 +89973,11 @@ var BABYLON;
              * @param gizmoLayer The utility layer the gizmo will be added to
              */
         function PositionGizmo(gizmoLayer) {
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
-            _this._xDrag = new BABYLON.AxisDragGizmo(gizmoLayer, new BABYLON.Vector3(1, 0, 0), BABYLON.Color3.Green().scale(0.5));
-            _this._yDrag = new BABYLON.AxisDragGizmo(gizmoLayer, new BABYLON.Vector3(0, 1, 0), BABYLON.Color3.Red().scale(0.5));
-            _this._zDrag = new BABYLON.AxisDragGizmo(gizmoLayer, new BABYLON.Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5));
+            _this._xDrag = new BABYLON.AxisDragGizmo(new BABYLON.Vector3(1, 0, 0), BABYLON.Color3.Green().scale(0.5), gizmoLayer);
+            _this._yDrag = new BABYLON.AxisDragGizmo(new BABYLON.Vector3(0, 1, 0), BABYLON.Color3.Red().scale(0.5), gizmoLayer);
+            _this._zDrag = new BABYLON.AxisDragGizmo(new BABYLON.Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5), gizmoLayer);
             _this.attachedMesh = null;
             return _this;
         }
@@ -90012,10 +90034,11 @@ var BABYLON;
          * @param gizmoLayer The utility layer the gizmo will be added to
          */
         function RotationGizmo(gizmoLayer) {
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
-            _this._xDrag = new BABYLON.PlaneRotationGizmo(gizmoLayer, new BABYLON.Vector3(1, 0, 0), BABYLON.Color3.Green().scale(0.5));
-            _this._yDrag = new BABYLON.PlaneRotationGizmo(gizmoLayer, new BABYLON.Vector3(0, 1, 0), BABYLON.Color3.Red().scale(0.5));
-            _this._zDrag = new BABYLON.PlaneRotationGizmo(gizmoLayer, new BABYLON.Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5));
+            _this._xDrag = new BABYLON.PlaneRotationGizmo(new BABYLON.Vector3(1, 0, 0), BABYLON.Color3.Green().scale(0.5), gizmoLayer);
+            _this._yDrag = new BABYLON.PlaneRotationGizmo(new BABYLON.Vector3(0, 1, 0), BABYLON.Color3.Red().scale(0.5), gizmoLayer);
+            _this._zDrag = new BABYLON.PlaneRotationGizmo(new BABYLON.Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5), gizmoLayer);
             _this.attachedMesh = null;
             return _this;
         }
@@ -90072,10 +90095,11 @@ var BABYLON;
          * @param gizmoLayer The utility layer the gizmo will be added to
          */
         function ScaleGizmo(gizmoLayer) {
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
-            _this._xDrag = new BABYLON.AxisScaleGizmo(gizmoLayer, new BABYLON.Vector3(1, 0, 0), BABYLON.Color3.Green().scale(0.5));
-            _this._yDrag = new BABYLON.AxisScaleGizmo(gizmoLayer, new BABYLON.Vector3(0, 1, 0), BABYLON.Color3.Red().scale(0.5));
-            _this._zDrag = new BABYLON.AxisScaleGizmo(gizmoLayer, new BABYLON.Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5));
+            _this._xDrag = new BABYLON.AxisScaleGizmo(new BABYLON.Vector3(1, 0, 0), BABYLON.Color3.Green().scale(0.5), gizmoLayer);
+            _this._yDrag = new BABYLON.AxisScaleGizmo(new BABYLON.Vector3(0, 1, 0), BABYLON.Color3.Red().scale(0.5), gizmoLayer);
+            _this._zDrag = new BABYLON.AxisScaleGizmo(new BABYLON.Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5), gizmoLayer);
             _this.attachedMesh = null;
             return _this;
         }
@@ -90132,7 +90156,9 @@ var BABYLON;
          * @param gizmoLayer The utility layer the gizmo will be added to
          * @param color The color of the gizmo
          */
-        function BoundingBoxGizmo(gizmoLayer, color) {
+        function BoundingBoxGizmo(color, gizmoLayer) {
+            if (color === void 0) { color = BABYLON.Color3.Gray(); }
+            if (gizmoLayer === void 0) { gizmoLayer = BABYLON.UtilityLayerRenderer.DefaultUtilityLayer; }
             var _this = _super.call(this, gizmoLayer) || this;
             _this._boundingDimensions = new BABYLON.Vector3(1, 1, 1);
             _this._renderObserver = null;

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

@@ -152,6 +152,7 @@ declare module BabylonViewer {
     
     
     
+    
     /**
         * The Default viewer is the default implementation of the AbstractViewer.
         * It uses the templating system to render a new canvas and controls.
@@ -165,11 +166,11 @@ declare module BabylonViewer {
                 * @param initialConfiguration the initial configuration. Defaults to extending the default configuration
                 */
             constructor(containerElement: HTMLElement, initialConfiguration?: ViewerConfiguration);
+            registerTemplatePlugin(plugin: IViewerTemplatePlugin): void;
             /**
                 * This will be executed when the templates initialize.
                 */
             protected _onTemplatesLoaded(): Promise<AbstractViewer>;
-            toggleHD(): void;
             toggleVR(): void;
             /**
                 * Toggle fullscreen of the entire viewer
@@ -1152,6 +1153,8 @@ declare module BabylonViewer {
                 * The event is a native browser event (like mouse or pointer events)
                 */
             onEventTriggered: BABYLON.Observable<EventCallback>;
+            onParamsUpdated: BABYLON.Observable<Template>;
+            onHTMLRendered: BABYLON.Observable<Template>;
             /**
                 * is the template loaded?
                 */
@@ -1227,6 +1230,28 @@ declare module BabylonViewer {
 
 declare module BabylonViewer {
     
+    export interface IViewerTemplatePlugin {
+        readonly templateName: string;
+        readonly eventsToAttach?: Array<string>;
+        interactionPredicate(event: EventCallback): boolean;
+        onEvent?(event: EventCallback): void;
+        addHTMLTemplate?(template: Template): void;
+    }
+    export abstract class AbstractViewerNavbarButton implements IViewerTemplatePlugin {
+        readonly templateName: string;
+        readonly eventsToAttach: Array<string>;
+        protected _prepend: boolean;
+        protected abstract _buttonClass: string;
+        protected abstract _htmlTemplate: string;
+        interactionPredicate(event: EventCallback): boolean;
+        abstract onEvent(event: EventCallback): void;
+        addHTMLTemplate(template: Template): void;
+        protected _generateHTMLElement(template: Template): Element | DocumentFragment;
+    }
+}
+
+declare module BabylonViewer {
+    
     
     
     

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

@@ -152,6 +152,7 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
     import { Template } from 'babylonjs-viewer/templating/templateManager';
     import { AbstractViewer } from 'babylonjs-viewer/viewer/viewer';
     import { ViewerModel } from 'babylonjs-viewer/model/viewerModel';
+    import { IViewerTemplatePlugin } from 'babylonjs-viewer/templating/viewerTemplatePlugin';
     /**
         * The Default viewer is the default implementation of the AbstractViewer.
         * It uses the templating system to render a new canvas and controls.
@@ -165,11 +166,11 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * @param initialConfiguration the initial configuration. Defaults to extending the default configuration
                 */
             constructor(containerElement: HTMLElement, initialConfiguration?: ViewerConfiguration);
+            registerTemplatePlugin(plugin: IViewerTemplatePlugin): void;
             /**
                 * This will be executed when the templates initialize.
                 */
             protected _onTemplatesLoaded(): Promise<AbstractViewer>;
-            toggleHD(): void;
             toggleVR(): void;
             /**
                 * Toggle fullscreen of the entire viewer
@@ -1152,6 +1153,8 @@ declare module 'babylonjs-viewer/templating/templateManager' {
                 * The event is a native browser event (like mouse or pointer events)
                 */
             onEventTriggered: Observable<EventCallback>;
+            onParamsUpdated: Observable<Template>;
+            onHTMLRendered: Observable<Template>;
             /**
                 * is the template loaded?
                 */
@@ -1225,6 +1228,28 @@ declare module 'babylonjs-viewer/templating/templateManager' {
     }
 }
 
+declare module 'babylonjs-viewer/templating/viewerTemplatePlugin' {
+    import { EventCallback, Template } from "babylonjs-viewer/templating/templateManager";
+    export interface IViewerTemplatePlugin {
+        readonly templateName: string;
+        readonly eventsToAttach?: Array<string>;
+        interactionPredicate(event: EventCallback): boolean;
+        onEvent?(event: EventCallback): void;
+        addHTMLTemplate?(template: Template): void;
+    }
+    export abstract class AbstractViewerNavbarButton implements IViewerTemplatePlugin {
+        readonly templateName: string;
+        readonly eventsToAttach: Array<string>;
+        protected _prepend: boolean;
+        protected abstract _buttonClass: string;
+        protected abstract _htmlTemplate: string;
+        interactionPredicate(event: EventCallback): boolean;
+        abstract onEvent(event: EventCallback): void;
+        addHTMLTemplate(template: Template): void;
+        protected _generateHTMLElement(template: Template): Element | DocumentFragment;
+    }
+}
+
 declare module 'babylonjs-viewer/managers/sceneManager' {
     import { Scene, ArcRotateCamera, Engine, Light, SceneOptimizer, EnvironmentHelper, Color3, Observable, DefaultRenderingPipeline, Nullable, VRExperienceHelper } from 'babylonjs';
     import { ILightConfiguration, ISceneConfiguration, ISceneOptimizerConfiguration, ICameraConfiguration, ISkyboxConfiguration, ViewerConfiguration, IGroundConfiguration, IModelConfiguration, IVRConfiguration } from 'babylonjs-viewer/configuration';