Merge pull request #5553 from sebavan/master

Nightly

dist/preview release/babylon.max.js

@@ -66602,70 +66602,81 @@ var BABYLON;
              * Creates a new AxesViewer
              * @param scene defines the hosting scene
              * @param scaleLines defines a number used to scale line length (1 by default)
+             * @param renderingGroupId defines a number used to set the renderingGroupId of the meshes (2 by default)
+             * @param xAxis defines the node hierarchy used to render the x-axis
+             * @param yAxis defines the node hierarchy used to render the y-axis
+             * @param zAxis defines the node hierarchy used to render the z-axis
              */
-            function AxesViewer(scene, scaleLines) {
+            function AxesViewer(scene, scaleLines, renderingGroupId, xAxis, yAxis, zAxis) {
                 if (scaleLines === void 0) { scaleLines = 1; }
+                if (renderingGroupId === void 0) { renderingGroupId = 2; }
                 this._tmpVector = new BABYLON.Vector3();
                 this._scaleLinesFactor = 4;
+                this._instanced = false;
                 /**
                  * Gets or sets a number used to scale line length
                  */
                 this.scaleLines = 1;
                 this.scaleLines = scaleLines;
-                var greenColoredMaterial = new BABYLON.StandardMaterial("", scene);
-                greenColoredMaterial.disableLighting = true;
-                greenColoredMaterial.emissiveColor = BABYLON.Color3.Green().scale(0.5);
-                var redColoredMaterial = new BABYLON.StandardMaterial("", scene);
-                redColoredMaterial.disableLighting = true;
-                redColoredMaterial.emissiveColor = BABYLON.Color3.Red().scale(0.5);
-                var blueColoredMaterial = new BABYLON.StandardMaterial("", scene);
-                blueColoredMaterial.disableLighting = true;
-                blueColoredMaterial.emissiveColor = BABYLON.Color3.Blue().scale(0.5);
-                this._xmesh = BABYLON.AxisDragGizmo._CreateArrow(scene, redColoredMaterial);
-                this._ymesh = BABYLON.AxisDragGizmo._CreateArrow(scene, greenColoredMaterial);
-                this._zmesh = BABYLON.AxisDragGizmo._CreateArrow(scene, blueColoredMaterial);
-                this._xmesh.rotationQuaternion = new BABYLON.Quaternion();
-                this._xmesh.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
-                this._ymesh.rotationQuaternion = new BABYLON.Quaternion();
-                this._ymesh.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
-                this._zmesh.rotationQuaternion = new BABYLON.Quaternion();
-                this._zmesh.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
-                AxesViewer._recursiveChangeRenderingGroupId(this._xmesh, 2);
-                AxesViewer._recursiveChangeRenderingGroupId(this._ymesh, 2);
-                AxesViewer._recursiveChangeRenderingGroupId(this._zmesh, 2);
+                if (!xAxis) {
+                    var redColoredMaterial = new BABYLON.StandardMaterial("", scene);
+                    redColoredMaterial.disableLighting = true;
+                    redColoredMaterial.emissiveColor = BABYLON.Color3.Red().scale(0.5);
+                    xAxis = BABYLON.AxisDragGizmo._CreateArrow(scene, redColoredMaterial);
+                }
+                if (!yAxis) {
+                    var greenColoredMaterial = new BABYLON.StandardMaterial("", scene);
+                    greenColoredMaterial.disableLighting = true;
+                    greenColoredMaterial.emissiveColor = BABYLON.Color3.Green().scale(0.5);
+                    yAxis = BABYLON.AxisDragGizmo._CreateArrow(scene, greenColoredMaterial);
+                }
+                if (!zAxis) {
+                    var blueColoredMaterial = new BABYLON.StandardMaterial("", scene);
+                    blueColoredMaterial.disableLighting = true;
+                    blueColoredMaterial.emissiveColor = BABYLON.Color3.Blue().scale(0.5);
+                    zAxis = BABYLON.AxisDragGizmo._CreateArrow(scene, blueColoredMaterial);
+                }
+                this._xAxis = xAxis;
+                this._xAxis.rotationQuaternion = new BABYLON.Quaternion();
+                this._xAxis.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
+                this._yAxis = yAxis;
+                this._yAxis.rotationQuaternion = new BABYLON.Quaternion();
+                this._yAxis.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
+                this._zAxis = zAxis;
+                this._zAxis.rotationQuaternion = new BABYLON.Quaternion();
+                this._zAxis.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
+                if (renderingGroupId != null) {
+                    AxesViewer._SetRenderingGroupId(this._xAxis, renderingGroupId);
+                    AxesViewer._SetRenderingGroupId(this._yAxis, renderingGroupId);
+                    AxesViewer._SetRenderingGroupId(this._zAxis, renderingGroupId);
+                }
                 this.scene = scene;
                 this.update(new BABYLON.Vector3(), BABYLON.Vector3.Right(), BABYLON.Vector3.Up(), BABYLON.Vector3.Forward());
             }
-            Object.defineProperty(AxesViewer.prototype, "xAxisMesh", {
-                /** Gets the mesh used to render x-axis */
+            Object.defineProperty(AxesViewer.prototype, "xAxis", {
+                /** Gets the node hierarchy used to render x-axis */
                 get: function () {
-                    return this._xmesh;
+                    return this._xAxis;
                 },
                 enumerable: true,
                 configurable: true
             });
-            Object.defineProperty(AxesViewer.prototype, "yAxisMesh", {
-                /** Gets the mesh used to render x-axis */
+            Object.defineProperty(AxesViewer.prototype, "yAxis", {
+                /** Gets the node hierarchy used to render y-axis */
                 get: function () {
-                    return this._ymesh;
+                    return this._yAxis;
                 },
                 enumerable: true,
                 configurable: true
             });
-            Object.defineProperty(AxesViewer.prototype, "zAxisMesh", {
-                /** Gets the mesh used to render x-axis */
+            Object.defineProperty(AxesViewer.prototype, "zAxis", {
+                /** Gets the node hierarchy used to render z-axis */
                 get: function () {
-                    return this._zmesh;
+                    return this._zAxis;
                 },
                 enumerable: true,
                 configurable: true
             });
-            AxesViewer._recursiveChangeRenderingGroupId = function (mesh, id) {
-                mesh.renderingGroupId = id;
-                mesh.getChildMeshes().forEach(function (m) {
-                    AxesViewer._recursiveChangeRenderingGroupId(m, id);
-                });
-            };
             /**
              * Force the viewer to update
              * @param position defines the position of the viewer
@@ -66674,40 +66685,51 @@ var BABYLON;
              * @param zaxis defines the z axis of the viewer
              */
             AxesViewer.prototype.update = function (position, xaxis, yaxis, zaxis) {
-                if (this._xmesh) {
-                    this._xmesh.position.copyFrom(position);
-                    xaxis.scaleToRef(-1, this._tmpVector);
-                    this._xmesh.setDirection(this._tmpVector);
-                    this._xmesh.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
-                }
-                if (this._ymesh) {
-                    this._ymesh.position.copyFrom(position);
-                    yaxis.scaleToRef(-1, this._tmpVector);
-                    this._ymesh.setDirection(this._tmpVector);
-                    this._ymesh.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
-                }
-                if (this._zmesh) {
-                    this._zmesh.position.copyFrom(position);
-                    zaxis.scaleToRef(-1, this._tmpVector);
-                    this._zmesh.setDirection(this._tmpVector);
-                    this._zmesh.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
-                }
+                this._xAxis.position.copyFrom(position);
+                xaxis.scaleToRef(-1, this._tmpVector);
+                this._xAxis.setDirection(this._tmpVector);
+                this._xAxis.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
+                this._yAxis.position.copyFrom(position);
+                yaxis.scaleToRef(-1, this._tmpVector);
+                this._yAxis.setDirection(this._tmpVector);
+                this._yAxis.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
+                this._zAxis.position.copyFrom(position);
+                zaxis.scaleToRef(-1, this._tmpVector);
+                this._zAxis.setDirection(this._tmpVector);
+                this._zAxis.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
+            };
+            /**
+             * Creates an instance of this axes viewer.
+             * @returns a new axes viewer with instanced meshes
+             */
+            AxesViewer.prototype.createInstance = function () {
+                var xAxis = BABYLON.AxisDragGizmo._CreateArrowInstance(this.scene, this._xAxis);
+                var yAxis = BABYLON.AxisDragGizmo._CreateArrowInstance(this.scene, this._yAxis);
+                var zAxis = BABYLON.AxisDragGizmo._CreateArrowInstance(this.scene, this._zAxis);
+                var axesViewer = new AxesViewer(this.scene, this.scaleLines, null, xAxis, yAxis, zAxis);
+                axesViewer._instanced = true;
+                return axesViewer;
             };
             /** Releases resources */
             AxesViewer.prototype.dispose = function () {
-                if (this._xmesh) {
-                    this._xmesh.dispose();
+                if (this._xAxis) {
+                    this._xAxis.dispose(false, !this._instanced);
+                    delete this._xAxis;
                 }
-                if (this._ymesh) {
-                    this._ymesh.dispose();
+                if (this._yAxis) {
+                    this._yAxis.dispose(false, !this._instanced);
+                    delete this._yAxis;
                 }
-                if (this._zmesh) {
-                    this._zmesh.dispose();
+                if (this._zAxis) {
+                    this._zAxis.dispose(false, !this._instanced);
+                    delete this._zAxis;
                 }
-                this._xmesh = null;
-                this._ymesh = null;
-                this._zmesh = null;
-                this.scene = null;
+                delete this.scene;
+            };
+            AxesViewer._SetRenderingGroupId = function (node, id) {
+                node.getChildMeshes().forEach(function (mesh) {
+                    mesh.renderingGroupId = id;
+                });
             };
             return AxesViewer;
         }());
@@ -103619,7 +103641,7 @@ var BABYLON;
             var arrow = AxisDragGizmo._CreateArrow(gizmoLayer.utilityLayerScene, coloredMaterial);
             arrow.lookAt(_this._rootMesh.position.subtract(dragAxis));
             arrow.scaling.scaleInPlace(1 / 3);
-            _this._rootMesh.addChild(arrow);
+            arrow.parent = _this._rootMesh;
             var currentSnapDragDistance = 0;
             var tmpVector = new BABYLON.Vector3();
             var tmpSnapEvent = { snapDistance: 0 };
@@ -103675,22 +103697,32 @@ var BABYLON;
         }
         /** @hidden */
         AxisDragGizmo._CreateArrow = function (scene, material) {
-            var arrow = new BABYLON.AbstractMesh("", scene);
-            var arrowMesh = BABYLON.MeshBuilder.CreateCylinder("yPosMesh", { diameterTop: 0, height: 1.5, diameterBottom: 0.75, tessellation: 96 }, scene);
-            var arrowTail = BABYLON.MeshBuilder.CreateLines("yPosMesh", { points: [new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(0, 1.1, 0)] }, scene);
-            arrowTail.color = material.emissiveColor;
-            arrow.addChild(arrowMesh);
-            arrow.addChild(arrowTail);
+            var arrow = new BABYLON.TransformNode("arrow", scene);
+            var cylinder = BABYLON.MeshBuilder.CreateCylinder("cylinder", { diameterTop: 0, height: 1.5, diameterBottom: 0.75, tessellation: 96 }, scene);
+            var line = BABYLON.MeshBuilder.CreateLines("line", { points: [new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(0, 1.1, 0)] }, scene);
+            line.color = material.emissiveColor;
+            cylinder.parent = arrow;
+            line.parent = arrow;
             // Position arrow pointing in its drag axis
-            arrowMesh.scaling.scaleInPlace(0.05);
-            arrowMesh.material = material;
-            arrowMesh.rotation.x = Math.PI / 2;
-            arrowMesh.position.z += 0.3;
-            arrowTail.scaling.scaleInPlace(0.26);
-            arrowTail.rotation.x = Math.PI / 2;
-            arrowTail.material = material;
+            cylinder.scaling.scaleInPlace(0.05);
+            cylinder.material = material;
+            cylinder.rotation.x = Math.PI / 2;
+            cylinder.position.z += 0.3;
+            line.scaling.scaleInPlace(0.26);
+            line.rotation.x = Math.PI / 2;
+            line.material = material;
             return arrow;
         };
+        /** @hidden */
+        AxisDragGizmo._CreateArrowInstance = function (scene, arrow) {
+            var instance = new BABYLON.TransformNode("arrow", scene);
+            for (var _i = 0, _a = arrow.getChildMeshes(); _i < _a.length; _i++) {
+                var mesh = _a[_i];
+                var childInstance = mesh.createInstance(mesh.name);
+                childInstance.parent = instance;
+            }
+            return instance;
+        };
         AxisDragGizmo.prototype._attachedMeshChanged = function (value) {
             if (this.dragBehavior) {
                 this.dragBehavior.enabled = value ? true : false;

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

@@ -66569,70 +66569,81 @@ var BABYLON;
              * Creates a new AxesViewer
              * @param scene defines the hosting scene
              * @param scaleLines defines a number used to scale line length (1 by default)
+             * @param renderingGroupId defines a number used to set the renderingGroupId of the meshes (2 by default)
+             * @param xAxis defines the node hierarchy used to render the x-axis
+             * @param yAxis defines the node hierarchy used to render the y-axis
+             * @param zAxis defines the node hierarchy used to render the z-axis
              */
-            function AxesViewer(scene, scaleLines) {
+            function AxesViewer(scene, scaleLines, renderingGroupId, xAxis, yAxis, zAxis) {
                 if (scaleLines === void 0) { scaleLines = 1; }
+                if (renderingGroupId === void 0) { renderingGroupId = 2; }
                 this._tmpVector = new BABYLON.Vector3();
                 this._scaleLinesFactor = 4;
+                this._instanced = false;
                 /**
                  * Gets or sets a number used to scale line length
                  */
                 this.scaleLines = 1;
                 this.scaleLines = scaleLines;
-                var greenColoredMaterial = new BABYLON.StandardMaterial("", scene);
-                greenColoredMaterial.disableLighting = true;
-                greenColoredMaterial.emissiveColor = BABYLON.Color3.Green().scale(0.5);
-                var redColoredMaterial = new BABYLON.StandardMaterial("", scene);
-                redColoredMaterial.disableLighting = true;
-                redColoredMaterial.emissiveColor = BABYLON.Color3.Red().scale(0.5);
-                var blueColoredMaterial = new BABYLON.StandardMaterial("", scene);
-                blueColoredMaterial.disableLighting = true;
-                blueColoredMaterial.emissiveColor = BABYLON.Color3.Blue().scale(0.5);
-                this._xmesh = BABYLON.AxisDragGizmo._CreateArrow(scene, redColoredMaterial);
-                this._ymesh = BABYLON.AxisDragGizmo._CreateArrow(scene, greenColoredMaterial);
-                this._zmesh = BABYLON.AxisDragGizmo._CreateArrow(scene, blueColoredMaterial);
-                this._xmesh.rotationQuaternion = new BABYLON.Quaternion();
-                this._xmesh.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
-                this._ymesh.rotationQuaternion = new BABYLON.Quaternion();
-                this._ymesh.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
-                this._zmesh.rotationQuaternion = new BABYLON.Quaternion();
-                this._zmesh.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
-                AxesViewer._recursiveChangeRenderingGroupId(this._xmesh, 2);
-                AxesViewer._recursiveChangeRenderingGroupId(this._ymesh, 2);
-                AxesViewer._recursiveChangeRenderingGroupId(this._zmesh, 2);
+                if (!xAxis) {
+                    var redColoredMaterial = new BABYLON.StandardMaterial("", scene);
+                    redColoredMaterial.disableLighting = true;
+                    redColoredMaterial.emissiveColor = BABYLON.Color3.Red().scale(0.5);
+                    xAxis = BABYLON.AxisDragGizmo._CreateArrow(scene, redColoredMaterial);
+                }
+                if (!yAxis) {
+                    var greenColoredMaterial = new BABYLON.StandardMaterial("", scene);
+                    greenColoredMaterial.disableLighting = true;
+                    greenColoredMaterial.emissiveColor = BABYLON.Color3.Green().scale(0.5);
+                    yAxis = BABYLON.AxisDragGizmo._CreateArrow(scene, greenColoredMaterial);
+                }
+                if (!zAxis) {
+                    var blueColoredMaterial = new BABYLON.StandardMaterial("", scene);
+                    blueColoredMaterial.disableLighting = true;
+                    blueColoredMaterial.emissiveColor = BABYLON.Color3.Blue().scale(0.5);
+                    zAxis = BABYLON.AxisDragGizmo._CreateArrow(scene, blueColoredMaterial);
+                }
+                this._xAxis = xAxis;
+                this._xAxis.rotationQuaternion = new BABYLON.Quaternion();
+                this._xAxis.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
+                this._yAxis = yAxis;
+                this._yAxis.rotationQuaternion = new BABYLON.Quaternion();
+                this._yAxis.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
+                this._zAxis = zAxis;
+                this._zAxis.rotationQuaternion = new BABYLON.Quaternion();
+                this._zAxis.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
+                if (renderingGroupId != null) {
+                    AxesViewer._SetRenderingGroupId(this._xAxis, renderingGroupId);
+                    AxesViewer._SetRenderingGroupId(this._yAxis, renderingGroupId);
+                    AxesViewer._SetRenderingGroupId(this._zAxis, renderingGroupId);
+                }
                 this.scene = scene;
                 this.update(new BABYLON.Vector3(), BABYLON.Vector3.Right(), BABYLON.Vector3.Up(), BABYLON.Vector3.Forward());
             }
-            Object.defineProperty(AxesViewer.prototype, "xAxisMesh", {
-                /** Gets the mesh used to render x-axis */
+            Object.defineProperty(AxesViewer.prototype, "xAxis", {
+                /** Gets the node hierarchy used to render x-axis */
                 get: function () {
-                    return this._xmesh;
+                    return this._xAxis;
                 },
                 enumerable: true,
                 configurable: true
             });
-            Object.defineProperty(AxesViewer.prototype, "yAxisMesh", {
-                /** Gets the mesh used to render x-axis */
+            Object.defineProperty(AxesViewer.prototype, "yAxis", {
+                /** Gets the node hierarchy used to render y-axis */
                 get: function () {
-                    return this._ymesh;
+                    return this._yAxis;
                 },
                 enumerable: true,
                 configurable: true
             });
-            Object.defineProperty(AxesViewer.prototype, "zAxisMesh", {
-                /** Gets the mesh used to render x-axis */
+            Object.defineProperty(AxesViewer.prototype, "zAxis", {
+                /** Gets the node hierarchy used to render z-axis */
                 get: function () {
-                    return this._zmesh;
+                    return this._zAxis;
                 },
                 enumerable: true,
                 configurable: true
             });
-            AxesViewer._recursiveChangeRenderingGroupId = function (mesh, id) {
-                mesh.renderingGroupId = id;
-                mesh.getChildMeshes().forEach(function (m) {
-                    AxesViewer._recursiveChangeRenderingGroupId(m, id);
-                });
-            };
             /**
              * Force the viewer to update
              * @param position defines the position of the viewer
@@ -66641,40 +66652,51 @@ var BABYLON;
              * @param zaxis defines the z axis of the viewer
              */
             AxesViewer.prototype.update = function (position, xaxis, yaxis, zaxis) {
-                if (this._xmesh) {
-                    this._xmesh.position.copyFrom(position);
-                    xaxis.scaleToRef(-1, this._tmpVector);
-                    this._xmesh.setDirection(this._tmpVector);
-                    this._xmesh.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
-                }
-                if (this._ymesh) {
-                    this._ymesh.position.copyFrom(position);
-                    yaxis.scaleToRef(-1, this._tmpVector);
-                    this._ymesh.setDirection(this._tmpVector);
-                    this._ymesh.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
-                }
-                if (this._zmesh) {
-                    this._zmesh.position.copyFrom(position);
-                    zaxis.scaleToRef(-1, this._tmpVector);
-                    this._zmesh.setDirection(this._tmpVector);
-                    this._zmesh.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
-                }
+                this._xAxis.position.copyFrom(position);
+                xaxis.scaleToRef(-1, this._tmpVector);
+                this._xAxis.setDirection(this._tmpVector);
+                this._xAxis.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
+                this._yAxis.position.copyFrom(position);
+                yaxis.scaleToRef(-1, this._tmpVector);
+                this._yAxis.setDirection(this._tmpVector);
+                this._yAxis.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
+                this._zAxis.position.copyFrom(position);
+                zaxis.scaleToRef(-1, this._tmpVector);
+                this._zAxis.setDirection(this._tmpVector);
+                this._zAxis.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
+            };
+            /**
+             * Creates an instance of this axes viewer.
+             * @returns a new axes viewer with instanced meshes
+             */
+            AxesViewer.prototype.createInstance = function () {
+                var xAxis = BABYLON.AxisDragGizmo._CreateArrowInstance(this.scene, this._xAxis);
+                var yAxis = BABYLON.AxisDragGizmo._CreateArrowInstance(this.scene, this._yAxis);
+                var zAxis = BABYLON.AxisDragGizmo._CreateArrowInstance(this.scene, this._zAxis);
+                var axesViewer = new AxesViewer(this.scene, this.scaleLines, null, xAxis, yAxis, zAxis);
+                axesViewer._instanced = true;
+                return axesViewer;
             };
             /** Releases resources */
             AxesViewer.prototype.dispose = function () {
-                if (this._xmesh) {
-                    this._xmesh.dispose();
+                if (this._xAxis) {
+                    this._xAxis.dispose(false, !this._instanced);
+                    delete this._xAxis;
                 }
-                if (this._ymesh) {
-                    this._ymesh.dispose();
+                if (this._yAxis) {
+                    this._yAxis.dispose(false, !this._instanced);
+                    delete this._yAxis;
                 }
-                if (this._zmesh) {
-                    this._zmesh.dispose();
+                if (this._zAxis) {
+                    this._zAxis.dispose(false, !this._instanced);
+                    delete this._zAxis;
                 }
-                this._xmesh = null;
-                this._ymesh = null;
-                this._zmesh = null;
-                this.scene = null;
+                delete this.scene;
+            };
+            AxesViewer._SetRenderingGroupId = function (node, id) {
+                node.getChildMeshes().forEach(function (mesh) {
+                    mesh.renderingGroupId = id;
+                });
             };
             return AxesViewer;
         }());
@@ -103586,7 +103608,7 @@ var BABYLON;
             var arrow = AxisDragGizmo._CreateArrow(gizmoLayer.utilityLayerScene, coloredMaterial);
             arrow.lookAt(_this._rootMesh.position.subtract(dragAxis));
             arrow.scaling.scaleInPlace(1 / 3);
-            _this._rootMesh.addChild(arrow);
+            arrow.parent = _this._rootMesh;
             var currentSnapDragDistance = 0;
             var tmpVector = new BABYLON.Vector3();
             var tmpSnapEvent = { snapDistance: 0 };
@@ -103642,22 +103664,32 @@ var BABYLON;
         }
         /** @hidden */
         AxisDragGizmo._CreateArrow = function (scene, material) {
-            var arrow = new BABYLON.AbstractMesh("", scene);
-            var arrowMesh = BABYLON.MeshBuilder.CreateCylinder("yPosMesh", { diameterTop: 0, height: 1.5, diameterBottom: 0.75, tessellation: 96 }, scene);
-            var arrowTail = BABYLON.MeshBuilder.CreateLines("yPosMesh", { points: [new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(0, 1.1, 0)] }, scene);
-            arrowTail.color = material.emissiveColor;
-            arrow.addChild(arrowMesh);
-            arrow.addChild(arrowTail);
+            var arrow = new BABYLON.TransformNode("arrow", scene);
+            var cylinder = BABYLON.MeshBuilder.CreateCylinder("cylinder", { diameterTop: 0, height: 1.5, diameterBottom: 0.75, tessellation: 96 }, scene);
+            var line = BABYLON.MeshBuilder.CreateLines("line", { points: [new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(0, 1.1, 0)] }, scene);
+            line.color = material.emissiveColor;
+            cylinder.parent = arrow;
+            line.parent = arrow;
             // Position arrow pointing in its drag axis
-            arrowMesh.scaling.scaleInPlace(0.05);
-            arrowMesh.material = material;
-            arrowMesh.rotation.x = Math.PI / 2;
-            arrowMesh.position.z += 0.3;
-            arrowTail.scaling.scaleInPlace(0.26);
-            arrowTail.rotation.x = Math.PI / 2;
-            arrowTail.material = material;
+            cylinder.scaling.scaleInPlace(0.05);
+            cylinder.material = material;
+            cylinder.rotation.x = Math.PI / 2;
+            cylinder.position.z += 0.3;
+            line.scaling.scaleInPlace(0.26);
+            line.rotation.x = Math.PI / 2;
+            line.material = material;
             return arrow;
         };
+        /** @hidden */
+        AxisDragGizmo._CreateArrowInstance = function (scene, arrow) {
+            var instance = new BABYLON.TransformNode("arrow", scene);
+            for (var _i = 0, _a = arrow.getChildMeshes(); _i < _a.length; _i++) {
+                var mesh = _a[_i];
+                var childInstance = mesh.createInstance(mesh.name);
+                childInstance.parent = instance;
+            }
+            return instance;
+        };
         AxisDragGizmo.prototype._attachedMeshChanged = function (value) {
             if (this.dragBehavior) {
                 this.dragBehavior.enabled = value ? true : false;

dist/preview release/es6.js

@@ -66569,70 +66569,81 @@ var BABYLON;
              * Creates a new AxesViewer
              * @param scene defines the hosting scene
              * @param scaleLines defines a number used to scale line length (1 by default)
+             * @param renderingGroupId defines a number used to set the renderingGroupId of the meshes (2 by default)
+             * @param xAxis defines the node hierarchy used to render the x-axis
+             * @param yAxis defines the node hierarchy used to render the y-axis
+             * @param zAxis defines the node hierarchy used to render the z-axis
              */
-            function AxesViewer(scene, scaleLines) {
+            function AxesViewer(scene, scaleLines, renderingGroupId, xAxis, yAxis, zAxis) {
                 if (scaleLines === void 0) { scaleLines = 1; }
+                if (renderingGroupId === void 0) { renderingGroupId = 2; }
                 this._tmpVector = new BABYLON.Vector3();
                 this._scaleLinesFactor = 4;
+                this._instanced = false;
                 /**
                  * Gets or sets a number used to scale line length
                  */
                 this.scaleLines = 1;
                 this.scaleLines = scaleLines;
-                var greenColoredMaterial = new BABYLON.StandardMaterial("", scene);
-                greenColoredMaterial.disableLighting = true;
-                greenColoredMaterial.emissiveColor = BABYLON.Color3.Green().scale(0.5);
-                var redColoredMaterial = new BABYLON.StandardMaterial("", scene);
-                redColoredMaterial.disableLighting = true;
-                redColoredMaterial.emissiveColor = BABYLON.Color3.Red().scale(0.5);
-                var blueColoredMaterial = new BABYLON.StandardMaterial("", scene);
-                blueColoredMaterial.disableLighting = true;
-                blueColoredMaterial.emissiveColor = BABYLON.Color3.Blue().scale(0.5);
-                this._xmesh = BABYLON.AxisDragGizmo._CreateArrow(scene, redColoredMaterial);
-                this._ymesh = BABYLON.AxisDragGizmo._CreateArrow(scene, greenColoredMaterial);
-                this._zmesh = BABYLON.AxisDragGizmo._CreateArrow(scene, blueColoredMaterial);
-                this._xmesh.rotationQuaternion = new BABYLON.Quaternion();
-                this._xmesh.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
-                this._ymesh.rotationQuaternion = new BABYLON.Quaternion();
-                this._ymesh.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
-                this._zmesh.rotationQuaternion = new BABYLON.Quaternion();
-                this._zmesh.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
-                AxesViewer._recursiveChangeRenderingGroupId(this._xmesh, 2);
-                AxesViewer._recursiveChangeRenderingGroupId(this._ymesh, 2);
-                AxesViewer._recursiveChangeRenderingGroupId(this._zmesh, 2);
+                if (!xAxis) {
+                    var redColoredMaterial = new BABYLON.StandardMaterial("", scene);
+                    redColoredMaterial.disableLighting = true;
+                    redColoredMaterial.emissiveColor = BABYLON.Color3.Red().scale(0.5);
+                    xAxis = BABYLON.AxisDragGizmo._CreateArrow(scene, redColoredMaterial);
+                }
+                if (!yAxis) {
+                    var greenColoredMaterial = new BABYLON.StandardMaterial("", scene);
+                    greenColoredMaterial.disableLighting = true;
+                    greenColoredMaterial.emissiveColor = BABYLON.Color3.Green().scale(0.5);
+                    yAxis = BABYLON.AxisDragGizmo._CreateArrow(scene, greenColoredMaterial);
+                }
+                if (!zAxis) {
+                    var blueColoredMaterial = new BABYLON.StandardMaterial("", scene);
+                    blueColoredMaterial.disableLighting = true;
+                    blueColoredMaterial.emissiveColor = BABYLON.Color3.Blue().scale(0.5);
+                    zAxis = BABYLON.AxisDragGizmo._CreateArrow(scene, blueColoredMaterial);
+                }
+                this._xAxis = xAxis;
+                this._xAxis.rotationQuaternion = new BABYLON.Quaternion();
+                this._xAxis.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
+                this._yAxis = yAxis;
+                this._yAxis.rotationQuaternion = new BABYLON.Quaternion();
+                this._yAxis.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
+                this._zAxis = zAxis;
+                this._zAxis.rotationQuaternion = new BABYLON.Quaternion();
+                this._zAxis.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
+                if (renderingGroupId != null) {
+                    AxesViewer._SetRenderingGroupId(this._xAxis, renderingGroupId);
+                    AxesViewer._SetRenderingGroupId(this._yAxis, renderingGroupId);
+                    AxesViewer._SetRenderingGroupId(this._zAxis, renderingGroupId);
+                }
                 this.scene = scene;
                 this.update(new BABYLON.Vector3(), BABYLON.Vector3.Right(), BABYLON.Vector3.Up(), BABYLON.Vector3.Forward());
             }
-            Object.defineProperty(AxesViewer.prototype, "xAxisMesh", {
-                /** Gets the mesh used to render x-axis */
+            Object.defineProperty(AxesViewer.prototype, "xAxis", {
+                /** Gets the node hierarchy used to render x-axis */
                 get: function () {
-                    return this._xmesh;
+                    return this._xAxis;
                 },
                 enumerable: true,
                 configurable: true
             });
-            Object.defineProperty(AxesViewer.prototype, "yAxisMesh", {
-                /** Gets the mesh used to render x-axis */
+            Object.defineProperty(AxesViewer.prototype, "yAxis", {
+                /** Gets the node hierarchy used to render y-axis */
                 get: function () {
-                    return this._ymesh;
+                    return this._yAxis;
                 },
                 enumerable: true,
                 configurable: true
             });
-            Object.defineProperty(AxesViewer.prototype, "zAxisMesh", {
-                /** Gets the mesh used to render x-axis */
+            Object.defineProperty(AxesViewer.prototype, "zAxis", {
+                /** Gets the node hierarchy used to render z-axis */
                 get: function () {
-                    return this._zmesh;
+                    return this._zAxis;
                 },
                 enumerable: true,
                 configurable: true
             });
-            AxesViewer._recursiveChangeRenderingGroupId = function (mesh, id) {
-                mesh.renderingGroupId = id;
-                mesh.getChildMeshes().forEach(function (m) {
-                    AxesViewer._recursiveChangeRenderingGroupId(m, id);
-                });
-            };
             /**
              * Force the viewer to update
              * @param position defines the position of the viewer
@@ -66641,40 +66652,51 @@ var BABYLON;
              * @param zaxis defines the z axis of the viewer
              */
             AxesViewer.prototype.update = function (position, xaxis, yaxis, zaxis) {
-                if (this._xmesh) {
-                    this._xmesh.position.copyFrom(position);
-                    xaxis.scaleToRef(-1, this._tmpVector);
-                    this._xmesh.setDirection(this._tmpVector);
-                    this._xmesh.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
-                }
-                if (this._ymesh) {
-                    this._ymesh.position.copyFrom(position);
-                    yaxis.scaleToRef(-1, this._tmpVector);
-                    this._ymesh.setDirection(this._tmpVector);
-                    this._ymesh.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
-                }
-                if (this._zmesh) {
-                    this._zmesh.position.copyFrom(position);
-                    zaxis.scaleToRef(-1, this._tmpVector);
-                    this._zmesh.setDirection(this._tmpVector);
-                    this._zmesh.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
-                }
+                this._xAxis.position.copyFrom(position);
+                xaxis.scaleToRef(-1, this._tmpVector);
+                this._xAxis.setDirection(this._tmpVector);
+                this._xAxis.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
+                this._yAxis.position.copyFrom(position);
+                yaxis.scaleToRef(-1, this._tmpVector);
+                this._yAxis.setDirection(this._tmpVector);
+                this._yAxis.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
+                this._zAxis.position.copyFrom(position);
+                zaxis.scaleToRef(-1, this._tmpVector);
+                this._zAxis.setDirection(this._tmpVector);
+                this._zAxis.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
+            };
+            /**
+             * Creates an instance of this axes viewer.
+             * @returns a new axes viewer with instanced meshes
+             */
+            AxesViewer.prototype.createInstance = function () {
+                var xAxis = BABYLON.AxisDragGizmo._CreateArrowInstance(this.scene, this._xAxis);
+                var yAxis = BABYLON.AxisDragGizmo._CreateArrowInstance(this.scene, this._yAxis);
+                var zAxis = BABYLON.AxisDragGizmo._CreateArrowInstance(this.scene, this._zAxis);
+                var axesViewer = new AxesViewer(this.scene, this.scaleLines, null, xAxis, yAxis, zAxis);
+                axesViewer._instanced = true;
+                return axesViewer;
             };
             /** Releases resources */
             AxesViewer.prototype.dispose = function () {
-                if (this._xmesh) {
-                    this._xmesh.dispose();
+                if (this._xAxis) {
+                    this._xAxis.dispose(false, !this._instanced);
+                    delete this._xAxis;
                 }
-                if (this._ymesh) {
-                    this._ymesh.dispose();
+                if (this._yAxis) {
+                    this._yAxis.dispose(false, !this._instanced);
+                    delete this._yAxis;
                 }
-                if (this._zmesh) {
-                    this._zmesh.dispose();
+                if (this._zAxis) {
+                    this._zAxis.dispose(false, !this._instanced);
+                    delete this._zAxis;
                 }
-                this._xmesh = null;
-                this._ymesh = null;
-                this._zmesh = null;
-                this.scene = null;
+                delete this.scene;
+            };
+            AxesViewer._SetRenderingGroupId = function (node, id) {
+                node.getChildMeshes().forEach(function (mesh) {
+                    mesh.renderingGroupId = id;
+                });
             };
             return AxesViewer;
         }());
@@ -103586,7 +103608,7 @@ var BABYLON;
             var arrow = AxisDragGizmo._CreateArrow(gizmoLayer.utilityLayerScene, coloredMaterial);
             arrow.lookAt(_this._rootMesh.position.subtract(dragAxis));
             arrow.scaling.scaleInPlace(1 / 3);
-            _this._rootMesh.addChild(arrow);
+            arrow.parent = _this._rootMesh;
             var currentSnapDragDistance = 0;
             var tmpVector = new BABYLON.Vector3();
             var tmpSnapEvent = { snapDistance: 0 };
@@ -103642,22 +103664,32 @@ var BABYLON;
         }
         /** @hidden */
         AxisDragGizmo._CreateArrow = function (scene, material) {
-            var arrow = new BABYLON.AbstractMesh("", scene);
-            var arrowMesh = BABYLON.MeshBuilder.CreateCylinder("yPosMesh", { diameterTop: 0, height: 1.5, diameterBottom: 0.75, tessellation: 96 }, scene);
-            var arrowTail = BABYLON.MeshBuilder.CreateLines("yPosMesh", { points: [new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(0, 1.1, 0)] }, scene);
-            arrowTail.color = material.emissiveColor;
-            arrow.addChild(arrowMesh);
-            arrow.addChild(arrowTail);
+            var arrow = new BABYLON.TransformNode("arrow", scene);
+            var cylinder = BABYLON.MeshBuilder.CreateCylinder("cylinder", { diameterTop: 0, height: 1.5, diameterBottom: 0.75, tessellation: 96 }, scene);
+            var line = BABYLON.MeshBuilder.CreateLines("line", { points: [new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(0, 1.1, 0)] }, scene);
+            line.color = material.emissiveColor;
+            cylinder.parent = arrow;
+            line.parent = arrow;
             // Position arrow pointing in its drag axis
-            arrowMesh.scaling.scaleInPlace(0.05);
-            arrowMesh.material = material;
-            arrowMesh.rotation.x = Math.PI / 2;
-            arrowMesh.position.z += 0.3;
-            arrowTail.scaling.scaleInPlace(0.26);
-            arrowTail.rotation.x = Math.PI / 2;
-            arrowTail.material = material;
+            cylinder.scaling.scaleInPlace(0.05);
+            cylinder.material = material;
+            cylinder.rotation.x = Math.PI / 2;
+            cylinder.position.z += 0.3;
+            line.scaling.scaleInPlace(0.26);
+            line.rotation.x = Math.PI / 2;
+            line.material = material;
             return arrow;
         };
+        /** @hidden */
+        AxisDragGizmo._CreateArrowInstance = function (scene, arrow) {
+            var instance = new BABYLON.TransformNode("arrow", scene);
+            for (var _i = 0, _a = arrow.getChildMeshes(); _i < _a.length; _i++) {
+                var mesh = _a[_i];
+                var childInstance = mesh.createInstance(mesh.name);
+                childInstance.parent = instance;
+            }
+            return instance;
+        };
         AxisDragGizmo.prototype._attachedMeshChanged = function (value) {
             if (this.dragBehavior) {
                 this.dragBehavior.enabled = value ? true : false;

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

@@ -1956,6 +1956,75 @@ declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {
     /**
+        * Class used to hold a viewer window and sliders in a grid
+     */
+    export class ScrollViewer extends Rectangle {
+            /** name of ScrollViewer */
+            name?: string | undefined;
+            /**
+                * Adds windowContents to the grid view window
+                * @param windowContents the contents to add the grid view window
+                */
+            addToWindow(windowContents: Control): void;
+            /**
+                * Gets or sets a value indicating the padding to use on the left of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            paddingLeft: string | number;
+            /**
+                * Gets a value indicating the padding in pixels to use on the left of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            readonly paddingLeftInPixels: number;
+            /**
+                * Gets or sets a value indicating the padding to use on the right of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            paddingRight: string | number;
+            /**
+                * Gets a value indicating the padding in pixels to use on the right of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            readonly paddingRightInPixels: number;
+            /**
+                * Gets or sets a value indicating the padding to use on the top of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            paddingTop: string | number;
+            /**
+                * Gets a value indicating the padding in pixels to use on the top of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            readonly paddingTopInPixels: number;
+            /**
+                * Gets or sets a value indicating the padding to use on the bottom of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            paddingBottom: string | number;
+            /**
+                * Gets a value indicating the padding in pixels to use on the bottom of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            readonly paddingBottomInPixels: number;
+            /**
+             * Creates a new ScrollViewer
+             * @param name of ScrollViewer
+             */
+            constructor(
+            /** name of ScrollViewer */
+            name?: string | undefined);
+            /** Gets or sets the bar color */
+            barColor: string;
+            /** Gets or sets the bar color */
+            barBorderColor: string;
+            /** Gets or sets the bar background */
+            barBackground: string;
+            /** @hidden */
+            protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+    }
+}
+declare module BABYLON.GUI {
+    /**
         * Enum that determines the text-wrapping mode to use.
         */
     export enum TextWrapping {

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

@@ -40,6 +40,7 @@ declare module 'babylonjs-gui/2D/controls' {
     export * from "babylonjs-gui/2D/controls/radioButton";
     export * from "babylonjs-gui/2D/controls/stackPanel";
     export * from "babylonjs-gui/2D/controls/selector";
+    export * from "babylonjs-gui/2D/controls/scrollViewer";
     export * from "babylonjs-gui/2D/controls/textBlock";
     export * from "babylonjs-gui/2D/controls/virtualKeyboard";
     export * from "babylonjs-gui/2D/controls/rectangle";
@@ -2102,6 +2103,79 @@ declare module 'babylonjs-gui/2D/controls/selector' {
     }
 }
 
+declare module 'babylonjs-gui/2D/controls/scrollViewer' {
+    import { Measure } from "babylonjs-gui/2D/measure";
+    import { Rectangle } from "babylonjs-gui/2D/controls/rectangle";
+    import { Control } from "babylonjs-gui/2D/controls/control";
+    /**
+        * Class used to hold a viewer window and sliders in a grid
+     */
+    export class ScrollViewer extends Rectangle {
+            /** name of ScrollViewer */
+            name?: string | undefined;
+            /**
+                * Adds windowContents to the grid view window
+                * @param windowContents the contents to add the grid view window
+                */
+            addToWindow(windowContents: Control): void;
+            /**
+                * Gets or sets a value indicating the padding to use on the left of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            paddingLeft: string | number;
+            /**
+                * Gets a value indicating the padding in pixels to use on the left of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            readonly paddingLeftInPixels: number;
+            /**
+                * Gets or sets a value indicating the padding to use on the right of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            paddingRight: string | number;
+            /**
+                * Gets a value indicating the padding in pixels to use on the right of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            readonly paddingRightInPixels: number;
+            /**
+                * Gets or sets a value indicating the padding to use on the top of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            paddingTop: string | number;
+            /**
+                * Gets a value indicating the padding in pixels to use on the top of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            readonly paddingTopInPixels: number;
+            /**
+                * Gets or sets a value indicating the padding to use on the bottom of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            paddingBottom: string | number;
+            /**
+                * Gets a value indicating the padding in pixels to use on the bottom of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            readonly paddingBottomInPixels: number;
+            /**
+             * Creates a new ScrollViewer
+             * @param name of ScrollViewer
+             */
+            constructor(
+            /** name of ScrollViewer */
+            name?: string | undefined);
+            /** Gets or sets the bar color */
+            barColor: string;
+            /** Gets or sets the bar color */
+            barBorderColor: string;
+            /** Gets or sets the bar background */
+            barBackground: string;
+            /** @hidden */
+            protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+    }
+}
+
 declare module 'babylonjs-gui/2D/controls/textBlock' {
     import { Observable } from "babylonjs";
     import { Measure } from "babylonjs-gui/2D/measure";
@@ -5009,6 +5083,75 @@ declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {
     /**
+        * Class used to hold a viewer window and sliders in a grid
+     */
+    export class ScrollViewer extends Rectangle {
+            /** name of ScrollViewer */
+            name?: string | undefined;
+            /**
+                * Adds windowContents to the grid view window
+                * @param windowContents the contents to add the grid view window
+                */
+            addToWindow(windowContents: Control): void;
+            /**
+                * Gets or sets a value indicating the padding to use on the left of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            paddingLeft: string | number;
+            /**
+                * Gets a value indicating the padding in pixels to use on the left of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            readonly paddingLeftInPixels: number;
+            /**
+                * Gets or sets a value indicating the padding to use on the right of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            paddingRight: string | number;
+            /**
+                * Gets a value indicating the padding in pixels to use on the right of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            readonly paddingRightInPixels: number;
+            /**
+                * Gets or sets a value indicating the padding to use on the top of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            paddingTop: string | number;
+            /**
+                * Gets a value indicating the padding in pixels to use on the top of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            readonly paddingTopInPixels: number;
+            /**
+                * Gets or sets a value indicating the padding to use on the bottom of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            paddingBottom: string | number;
+            /**
+                * Gets a value indicating the padding in pixels to use on the bottom of the viewer window
+                * @see http://doc.babylonjs.com/how_to/gui#position-and-size
+                */
+            readonly paddingBottomInPixels: number;
+            /**
+             * Creates a new ScrollViewer
+             * @param name of ScrollViewer
+             */
+            constructor(
+            /** name of ScrollViewer */
+            name?: string | undefined);
+            /** Gets or sets the bar color */
+            barColor: string;
+            /** Gets or sets the bar color */
+            barBorderColor: string;
+            /** Gets or sets the bar background */
+            barBackground: string;
+            /** @hidden */
+            protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+    }
+}
+declare module BABYLON.GUI {
+    /**
         * Enum that determines the text-wrapping mode to use.
         */
     export enum TextWrapping {