Merge

dist/preview release/babylon.max.js

@@ -12953,7 +12953,7 @@ var BABYLON;
              * Returns the current version of the framework
              */
             get: function () {
-                return "4.0.0-alpha.9";
+                return "4.0.0-alpha.10";
             },
             enumerable: true,
             configurable: true
@@ -20306,7 +20306,7 @@ var BABYLON;
             if (this._cache.pivotMatrixUpdated) {
                 return false;
             }
-            if (this.infiniteDistance !== this._cache.infiniteDistance) {
+            if (this.infiniteDistance) {
                 return false;
             }
             if (!this._cache.position.equals(this._position)) {
@@ -52719,7 +52719,10 @@ var BABYLON;
             var camLeft = this._rigCameras[0];
             var camRight = this._rigCameras[1];
             camLeft.beta = camRight.beta = this.beta;
-            camLeft.radius = camRight.radius = this.radius;
+            // This looks like being an issue in rig mode. Should be looked if
+            // further issues are found. but was modifying the view matrix twice
+            // Line below commented in order to fix http://www.html5gamedevs.com/topic/41454-confusion-about-camera-positions/
+            // camLeft.radius = camRight.radius = this.radius;
             switch (this.cameraRigMode) {
                 case BABYLON.Camera.RIG_MODE_STEREOSCOPIC_ANAGLYPH:
                 case BABYLON.Camera.RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_PARALLEL:
@@ -66602,68 +66605,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.scaleInPlace(4);
-                this._ymesh.rotationQuaternion = new BABYLON.Quaternion();
-                this._ymesh.scaling.scaleInPlace(4);
-                this._zmesh.rotationQuaternion = new BABYLON.Quaternion();
-                this._zmesh.scaling.scaleInPlace(4);
-                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
@@ -66672,40 +66688,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);
-                    var cross = BABYLON.Vector3.Cross(BABYLON.Vector3.Forward(), xaxis);
-                    this._xmesh.rotationQuaternion.set(cross.x, cross.y, cross.z, 1 + BABYLON.Vector3.Dot(BABYLON.Vector3.Forward(), xaxis));
-                    this._xmesh.rotationQuaternion.normalize();
-                }
-                if (this._ymesh) {
-                    this._ymesh.position.copyFrom(position);
-                    var cross = BABYLON.Vector3.Cross(BABYLON.Vector3.Forward(), yaxis);
-                    this._ymesh.rotationQuaternion.set(cross.x, cross.y, cross.z, 1 + BABYLON.Vector3.Dot(BABYLON.Vector3.Forward(), yaxis));
-                    this._ymesh.rotationQuaternion.normalize();
-                }
-                if (this._zmesh) {
-                    this._zmesh.position.copyFrom(position);
-                    var cross = BABYLON.Vector3.Cross(BABYLON.Vector3.Forward(), zaxis);
-                    this._zmesh.rotationQuaternion.set(cross.x, cross.y, cross.z, 1 + BABYLON.Vector3.Dot(BABYLON.Vector3.Forward(), zaxis));
-                    this._zmesh.rotationQuaternion.normalize();
-                }
+                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;
         }());
@@ -67002,7 +67029,7 @@ var BABYLON;
          * @returns true if visible otherwise, false
          */
         DebugLayer.prototype.isVisible = function () {
-            return this.BJSINSPECTOR.Inspector.IsVisible;
+            return this.BJSINSPECTOR && this.BJSINSPECTOR.Inspector.IsVisible;
         };
         /**
          * Hide the inspector and close its window.
@@ -103617,7 +103644,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 };
@@ -103673,22 +103700,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

@@ -12920,7 +12920,7 @@ var BABYLON;
              * Returns the current version of the framework
              */
             get: function () {
-                return "4.0.0-alpha.9";
+                return "4.0.0-alpha.10";
             },
             enumerable: true,
             configurable: true
@@ -20273,7 +20273,7 @@ var BABYLON;
             if (this._cache.pivotMatrixUpdated) {
                 return false;
             }
-            if (this.infiniteDistance !== this._cache.infiniteDistance) {
+            if (this.infiniteDistance) {
                 return false;
             }
             if (!this._cache.position.equals(this._position)) {
@@ -52686,7 +52686,10 @@ var BABYLON;
             var camLeft = this._rigCameras[0];
             var camRight = this._rigCameras[1];
             camLeft.beta = camRight.beta = this.beta;
-            camLeft.radius = camRight.radius = this.radius;
+            // This looks like being an issue in rig mode. Should be looked if
+            // further issues are found. but was modifying the view matrix twice
+            // Line below commented in order to fix http://www.html5gamedevs.com/topic/41454-confusion-about-camera-positions/
+            // camLeft.radius = camRight.radius = this.radius;
             switch (this.cameraRigMode) {
                 case BABYLON.Camera.RIG_MODE_STEREOSCOPIC_ANAGLYPH:
                 case BABYLON.Camera.RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_PARALLEL:
@@ -66569,68 +66572,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.scaleInPlace(4);
-                this._ymesh.rotationQuaternion = new BABYLON.Quaternion();
-                this._ymesh.scaling.scaleInPlace(4);
-                this._zmesh.rotationQuaternion = new BABYLON.Quaternion();
-                this._zmesh.scaling.scaleInPlace(4);
-                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
@@ -66639,40 +66655,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);
-                    var cross = BABYLON.Vector3.Cross(BABYLON.Vector3.Forward(), xaxis);
-                    this._xmesh.rotationQuaternion.set(cross.x, cross.y, cross.z, 1 + BABYLON.Vector3.Dot(BABYLON.Vector3.Forward(), xaxis));
-                    this._xmesh.rotationQuaternion.normalize();
-                }
-                if (this._ymesh) {
-                    this._ymesh.position.copyFrom(position);
-                    var cross = BABYLON.Vector3.Cross(BABYLON.Vector3.Forward(), yaxis);
-                    this._ymesh.rotationQuaternion.set(cross.x, cross.y, cross.z, 1 + BABYLON.Vector3.Dot(BABYLON.Vector3.Forward(), yaxis));
-                    this._ymesh.rotationQuaternion.normalize();
-                }
-                if (this._zmesh) {
-                    this._zmesh.position.copyFrom(position);
-                    var cross = BABYLON.Vector3.Cross(BABYLON.Vector3.Forward(), zaxis);
-                    this._zmesh.rotationQuaternion.set(cross.x, cross.y, cross.z, 1 + BABYLON.Vector3.Dot(BABYLON.Vector3.Forward(), zaxis));
-                    this._zmesh.rotationQuaternion.normalize();
-                }
+                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;
         }());
@@ -66969,7 +66996,7 @@ var BABYLON;
          * @returns true if visible otherwise, false
          */
         DebugLayer.prototype.isVisible = function () {
-            return this.BJSINSPECTOR.Inspector.IsVisible;
+            return this.BJSINSPECTOR && this.BJSINSPECTOR.Inspector.IsVisible;
         };
         /**
          * Hide the inspector and close its window.
@@ -103584,7 +103611,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 };
@@ -103640,22 +103667,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

@@ -12920,7 +12920,7 @@ var BABYLON;
              * Returns the current version of the framework
              */
             get: function () {
-                return "4.0.0-alpha.9";
+                return "4.0.0-alpha.10";
             },
             enumerable: true,
             configurable: true
@@ -20273,7 +20273,7 @@ var BABYLON;
             if (this._cache.pivotMatrixUpdated) {
                 return false;
             }
-            if (this.infiniteDistance !== this._cache.infiniteDistance) {
+            if (this.infiniteDistance) {
                 return false;
             }
             if (!this._cache.position.equals(this._position)) {
@@ -52686,7 +52686,10 @@ var BABYLON;
             var camLeft = this._rigCameras[0];
             var camRight = this._rigCameras[1];
             camLeft.beta = camRight.beta = this.beta;
-            camLeft.radius = camRight.radius = this.radius;
+            // This looks like being an issue in rig mode. Should be looked if
+            // further issues are found. but was modifying the view matrix twice
+            // Line below commented in order to fix http://www.html5gamedevs.com/topic/41454-confusion-about-camera-positions/
+            // camLeft.radius = camRight.radius = this.radius;
             switch (this.cameraRigMode) {
                 case BABYLON.Camera.RIG_MODE_STEREOSCOPIC_ANAGLYPH:
                 case BABYLON.Camera.RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_PARALLEL:
@@ -66569,68 +66572,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.scaleInPlace(4);
-                this._ymesh.rotationQuaternion = new BABYLON.Quaternion();
-                this._ymesh.scaling.scaleInPlace(4);
-                this._zmesh.rotationQuaternion = new BABYLON.Quaternion();
-                this._zmesh.scaling.scaleInPlace(4);
-                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
@@ -66639,40 +66655,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);
-                    var cross = BABYLON.Vector3.Cross(BABYLON.Vector3.Forward(), xaxis);
-                    this._xmesh.rotationQuaternion.set(cross.x, cross.y, cross.z, 1 + BABYLON.Vector3.Dot(BABYLON.Vector3.Forward(), xaxis));
-                    this._xmesh.rotationQuaternion.normalize();
-                }
-                if (this._ymesh) {
-                    this._ymesh.position.copyFrom(position);
-                    var cross = BABYLON.Vector3.Cross(BABYLON.Vector3.Forward(), yaxis);
-                    this._ymesh.rotationQuaternion.set(cross.x, cross.y, cross.z, 1 + BABYLON.Vector3.Dot(BABYLON.Vector3.Forward(), yaxis));
-                    this._ymesh.rotationQuaternion.normalize();
-                }
-                if (this._zmesh) {
-                    this._zmesh.position.copyFrom(position);
-                    var cross = BABYLON.Vector3.Cross(BABYLON.Vector3.Forward(), zaxis);
-                    this._zmesh.rotationQuaternion.set(cross.x, cross.y, cross.z, 1 + BABYLON.Vector3.Dot(BABYLON.Vector3.Forward(), zaxis));
-                    this._zmesh.rotationQuaternion.normalize();
-                }
+                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;
         }());
@@ -66969,7 +66996,7 @@ var BABYLON;
          * @returns true if visible otherwise, false
          */
         DebugLayer.prototype.isVisible = function () {
-            return this.BJSINSPECTOR.Inspector.IsVisible;
+            return this.BJSINSPECTOR && this.BJSINSPECTOR.Inspector.IsVisible;
         };
         /**
          * Hide the inspector and close its window.
@@ -103584,7 +103611,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 };
@@ -103640,22 +103667,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/glTF2Interface/package.json

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

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 {

dist/preview release/gui/package.json

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

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

@@ -3,13 +3,15 @@
 //   ../../../../Tools/Gulp/babylonjs
 declare module INSPECTOR {
 }
-export declare class Inspector {
-    static OnSelectionChangeObservable: BABYLON.Observable<string>;
-    static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
-    static readonly IsVisible: boolean;
-    static EarlyAttachToLoader(): void;
-    static Show(scene: BABYLON.Scene, userOptions: Partial<BABYLON.IInspectorOptions>): void;
-    static Hide(): void;
+declare module INSPECTOR {
+    export class Inspector {
+        static OnSelectionChangeObservable: BABYLON.Observable<string>;
+        static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
+        static readonly IsVisible: boolean;
+        static EarlyAttachToLoader(): void;
+        static Show(scene: BABYLON.Scene, userOptions: Partial<BABYLON.IInspectorOptions>): void;
+        static Hide(): void;
+    }
 }
 declare module INSPECTOR {
     export class PropertyChangedEvent {

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

@@ -6,15 +6,17 @@ declare module 'babylonjs-inspector' {
     export * from "babylonjs-inspector/inspector";
 }
 
-import { Scene, Observable, IInspectorOptions } from "babylonjs";
-import { PropertyChangedEvent } from "babylonjs-inspector/components/propertyChangedEvent";
-export declare class Inspector {
-    static OnSelectionChangeObservable: Observable<string>;
-    static OnPropertyChangedObservable: Observable<PropertyChangedEvent>;
-    static readonly IsVisible: boolean;
-    static EarlyAttachToLoader(): void;
-    static Show(scene: Scene, userOptions: Partial<IInspectorOptions>): void;
-    static Hide(): void;
+declare module 'babylonjs-inspector/inspector' {
+    import { Scene, Observable, IInspectorOptions } from "babylonjs";
+    import { PropertyChangedEvent } from "babylonjs-inspector/components/propertyChangedEvent";
+    export class Inspector {
+        static OnSelectionChangeObservable: Observable<string>;
+        static OnPropertyChangedObservable: Observable<PropertyChangedEvent>;
+        static readonly IsVisible: boolean;
+        static EarlyAttachToLoader(): void;
+        static Show(scene: Scene, userOptions: Partial<IInspectorOptions>): void;
+        static Hide(): void;
+    }
 }
 
 declare module 'babylonjs-inspector/components/propertyChangedEvent' {
@@ -32,13 +34,15 @@ declare module 'babylonjs-inspector/components/propertyChangedEvent' {
 //   ../../../../Tools/Gulp/babylonjs
 declare module INSPECTOR {
 }
-export declare class Inspector {
-    static OnSelectionChangeObservable: BABYLON.Observable<string>;
-    static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
-    static readonly IsVisible: boolean;
-    static EarlyAttachToLoader(): void;
-    static Show(scene: BABYLON.Scene, userOptions: Partial<BABYLON.IInspectorOptions>): void;
-    static Hide(): void;
+declare module INSPECTOR {
+    export class Inspector {
+        static OnSelectionChangeObservable: BABYLON.Observable<string>;
+        static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
+        static readonly IsVisible: boolean;
+        static EarlyAttachToLoader(): void;
+        static Show(scene: BABYLON.Scene, userOptions: Partial<BABYLON.IInspectorOptions>): void;
+        static Hide(): void;
+    }
 }
 declare module INSPECTOR {
     export class PropertyChangedEvent {

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "4.0.0-alpha.9",
+    "version": "4.0.0-alpha.10",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,10 +28,10 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.0.0-alpha.9",
-        "babylonjs-gui": "4.0.0-alpha.9",
-        "babylonjs-loaders": "4.0.0-alpha.9",
-        "babylonjs-serializers": "4.0.0-alpha.9"
+        "babylonjs": "4.0.0-alpha.10",
+        "babylonjs-gui": "4.0.0-alpha.10",
+        "babylonjs-loaders": "4.0.0-alpha.10",
+        "babylonjs-serializers": "4.0.0-alpha.10"
     },
     "engines": {
         "node": "*"

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

@@ -2206,13 +2206,18 @@ var BABYLON;
                 var sampler = (texture.sampler == undefined ? GLTFLoader._DefaultSampler : ArrayItem.Get(context + "/sampler", this.gltf.samplers, texture.sampler));
                 var samplerData = this._loadSampler("/samplers/" + sampler.index, sampler);
                 var image = ArrayItem.Get(context + "/source", this.gltf.images, texture.source);
-                var textureURL = null;
-                if (image.uri && !BABYLON.Tools.IsBase64(image.uri) && this.babylonScene.getEngine().textureFormatInUse) {
-                    // If an image uri and a texture format is set like (eg. KTX) load from url instead of blob to support texture format and fallback
-                    textureURL = this._uniqueRootUrl + image.uri;
+                var url = null;
+                if (image.uri) {
+                    if (BABYLON.Tools.IsBase64(image.uri)) {
+                        url = image.uri;
+                    }
+                    else if (this.babylonScene.getEngine().textureFormatInUse) {
+                        // If an image uri and a texture format is set like (eg. KTX) load from url instead of blob to support texture format and fallback
+                        url = this._rootUrl + image.uri;
+                    }
                 }
                 var deferred = new BABYLON.Deferred();
-                var babylonTexture = new BABYLON.Texture(textureURL, this.babylonScene, samplerData.noMipMaps, false, samplerData.samplingMode, function () {
+                var babylonTexture = new BABYLON.Texture(url, this.babylonScene, samplerData.noMipMaps, false, samplerData.samplingMode, function () {
                     if (!_this._disposed) {
                         deferred.resolve();
                     }
@@ -2222,7 +2227,7 @@ var BABYLON;
                     }
                 });
                 promises.push(deferred.promise);
-                if (!textureURL) {
+                if (!url) {
                     promises.push(this.loadImageAsync("/images/" + image.index, image).then(function (data) {
                         var name = image.uri || _this._fileName + "#image" + image.index;
                         var dataUrl = "data:" + _this._uniqueRootUrl + name;

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

@@ -4414,13 +4414,18 @@ var BABYLON;
                 var sampler = (texture.sampler == undefined ? GLTFLoader._DefaultSampler : ArrayItem.Get(context + "/sampler", this.gltf.samplers, texture.sampler));
                 var samplerData = this._loadSampler("/samplers/" + sampler.index, sampler);
                 var image = ArrayItem.Get(context + "/source", this.gltf.images, texture.source);
-                var textureURL = null;
-                if (image.uri && !BABYLON.Tools.IsBase64(image.uri) && this.babylonScene.getEngine().textureFormatInUse) {
-                    // If an image uri and a texture format is set like (eg. KTX) load from url instead of blob to support texture format and fallback
-                    textureURL = this._uniqueRootUrl + image.uri;
+                var url = null;
+                if (image.uri) {
+                    if (BABYLON.Tools.IsBase64(image.uri)) {
+                        url = image.uri;
+                    }
+                    else if (this.babylonScene.getEngine().textureFormatInUse) {
+                        // If an image uri and a texture format is set like (eg. KTX) load from url instead of blob to support texture format and fallback
+                        url = this._rootUrl + image.uri;
+                    }
                 }
                 var deferred = new BABYLON.Deferred();
-                var babylonTexture = new BABYLON.Texture(textureURL, this.babylonScene, samplerData.noMipMaps, false, samplerData.samplingMode, function () {
+                var babylonTexture = new BABYLON.Texture(url, this.babylonScene, samplerData.noMipMaps, false, samplerData.samplingMode, function () {
                     if (!_this._disposed) {
                         deferred.resolve();
                     }
@@ -4430,7 +4435,7 @@ var BABYLON;
                     }
                 });
                 promises.push(deferred.promise);
-                if (!textureURL) {
+                if (!url) {
                     promises.push(this.loadImageAsync("/images/" + image.index, image).then(function (data) {
                         var name = image.uri || _this._fileName + "#image" + image.index;
                         var dataUrl = "data:" + _this._uniqueRootUrl + name;

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

@@ -5476,13 +5476,18 @@ var BABYLON;
                 var sampler = (texture.sampler == undefined ? GLTFLoader._DefaultSampler : ArrayItem.Get(context + "/sampler", this.gltf.samplers, texture.sampler));
                 var samplerData = this._loadSampler("/samplers/" + sampler.index, sampler);
                 var image = ArrayItem.Get(context + "/source", this.gltf.images, texture.source);
-                var textureURL = null;
-                if (image.uri && !BABYLON.Tools.IsBase64(image.uri) && this.babylonScene.getEngine().textureFormatInUse) {
-                    // If an image uri and a texture format is set like (eg. KTX) load from url instead of blob to support texture format and fallback
-                    textureURL = this._uniqueRootUrl + image.uri;
+                var url = null;
+                if (image.uri) {
+                    if (BABYLON.Tools.IsBase64(image.uri)) {
+                        url = image.uri;
+                    }
+                    else if (this.babylonScene.getEngine().textureFormatInUse) {
+                        // If an image uri and a texture format is set like (eg. KTX) load from url instead of blob to support texture format and fallback
+                        url = this._rootUrl + image.uri;
+                    }
                 }
                 var deferred = new BABYLON.Deferred();
-                var babylonTexture = new BABYLON.Texture(textureURL, this.babylonScene, samplerData.noMipMaps, false, samplerData.samplingMode, function () {
+                var babylonTexture = new BABYLON.Texture(url, this.babylonScene, samplerData.noMipMaps, false, samplerData.samplingMode, function () {
                     if (!_this._disposed) {
                         deferred.resolve();
                     }
@@ -5492,7 +5497,7 @@ var BABYLON;
                     }
                 });
                 promises.push(deferred.promise);
-                if (!textureURL) {
+                if (!url) {
                     promises.push(this.loadImageAsync("/images/" + image.index, image).then(function (data) {
                         var name = image.uri || _this._fileName + "#image" + image.index;
                         var dataUrl = "data:" + _this._uniqueRootUrl + name;

dist/preview release/loaders/package.json

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

dist/preview release/materialsLibrary/package.json

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

dist/preview release/postProcessesLibrary/package.json

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

dist/preview release/proceduralTexturesLibrary/package.json

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

dist/preview release/serializers/package.json

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

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

@@ -928,6 +928,17 @@ declare module BabylonViewer {
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 declare module BabylonViewer {
+    /**
+        * Will attach an init function the the DOMContentLoaded event.
+        * The init function will be removed automatically after the event was triggered.
+        */
+    export function initListeners(): void;
+    /**
+        * Select all HTML tags on the page that match the selector and initialize a viewer
+        *
+        * @param selector the selector to initialize the viewer on (default is 'babylon')
+        */
+    export function InitTags(selector?: string): void;
 }
 declare module BabylonViewer {
 }

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

@@ -997,7 +997,17 @@ declare module 'babylonjs-viewer/optimizer/custom' {
 }
 
 declare module 'babylonjs-viewer/initializer' {
-    
+    /**
+        * Will attach an init function the the DOMContentLoaded event.
+        * The init function will be removed automatically after the event was triggered.
+        */
+    export function initListeners(): void;
+    /**
+        * Select all HTML tags on the page that match the selector and initialize a viewer
+        *
+        * @param selector the selector to initialize the viewer on (default is 'babylon')
+        */
+    export function InitTags(selector?: string): void;
 }
 
 declare module 'babylonjs-viewer/configuration' {

dist/preview release/what's new.md

@@ -18,6 +18,7 @@
 - GUI:
   - Added new [ImageBasedSlider](http://doc.babylonjs.com/how_to/gui#imagebasedslider) to let users customize sliders using images ([Deltakosh](https://github.com/deltakosh))
   - Added support for clipboard events to let users perform `cut`, `copy` and `paste` events ([Saket Saurabh](https://github.com/ssaket))
+  - Added new ScrollViewer for larger containers to be viewed using Sliders ([JohnK](https://github.com/BabylonJSGuide/))
 
 ## Updates
 
@@ -70,6 +71,7 @@
 - Added support for overriding the mesh used for the world matrix for a mesh with a skeleton ([bghgary](https://github.com/bghgary))
 - Added support for linking a bone to a transform node ([bghgary](https://github.com/bghgary))
 - Factored out `setDirection` function from `lookAt` for transform node ([bghgary](https://github.com/bghgary))
+- Add support for setting renderingGroupId and creating instances to `AxesViewer` ([bghgary](https://github.com/bghgary))
 
 ### glTF Loader
 
@@ -102,6 +104,7 @@
 - PointerDragBahavior using Mesh as base type, causing type-checking problems with AbstractMesh ([Poolminer](https://github.com/Poolminer/))
 - TransformNode lookAt not working in world space when node's parent has rotation ([TrevorDev](https://github.com/TrevorDev))
 - MakeNotPickableAndWrapInBoundingBox had unexpected behavior when input had scaling of 0 on an axis ([TrevorDev](https://github.com/TrevorDev))
+- Fixed an issue with loading base64 encoded images in the glTF loader ([bghgary](https://github.com/bghgary))
 
 ### Core Engine
 - Fixed a bug with `mesh.alwaysSelectAsActiveMesh` preventing layerMask to be taken in account ([Deltakosh](https://github.com/deltakosh))
@@ -115,6 +118,8 @@
 - Added a `DeepImmutable<T>` type to specifiy that a referenced object should be considered recursively immutable, meaning that all its properties are `readonly` and that if a property is a reference to an object, this object is also recursively immutable. ([barroij](https://github.com/barroij))
 - Fixed `VideoTexture` poster property when autoplay is turned off.
 - Fixed position and rotation of plane mesh created by MeshBuilder.CreatePlane when specifying a source plane ([sable](https://github.com/thscott), [bghgary](https://github.com/bghgary))
+- Fixed inspector dynamic loading ([Sebavan](https://github.com/Sebavan))
+- Fixed infiniteDistance not working anymore ([Sebavan](https://github.com/Sebavan))
 
 ### Viewer
 
@@ -150,3 +155,4 @@
   - _Note: The root node is still a `Mesh` object and is still the first in the returned list of meshes_
   - `TransformNode` objects are excluded from the returned list of meshes when importing mesh
   - `TransformNode` objects do not raise `onMeshLoaded` events
+- `xAxisMesh`, `yAxisMesh`, and `zAxisMesh` of `AxesViewer` was renamed to `xAxis`, `yAxis`, and `zAxis` respectively and now return a `TransformNode` to represent the parent node of the cylinder and line of the arrow ([bghgary](https://github.com/bghgary))

gui/src/2D/controls/index.ts

@@ -13,6 +13,7 @@ export * from "./multiLine";
 export * from "./radioButton";
 export * from "./stackPanel";
 export * from "./selector";
+export * from "./scrollViewer";
 export * from "./textBlock";
 export * from "./virtualKeyboard";
 export * from "./rectangle";

gui/src/2D/controls/scrollViewer.ts

@@ -0,0 +1,364 @@
+import { Measure } from "../measure";
+import { Rectangle } from "./rectangle";
+import { Grid } from "./grid";
+import { Control } from "./control";
+import { Slider } from "./slider";
+import { ValueAndUnit } from "../valueAndUnit";
+import { Container } from "./container";
+import { TextBlock } from "./textBlock";
+
+/**
+ * Class used to hold a viewer window and sliders in a grid
+*/
+export class ScrollViewer extends Rectangle {
+    private _grid: Grid;
+    private _horizontalBarSpace: Rectangle;
+    private _verticalBarSpace: Rectangle;
+    private _dragSpace: Rectangle;
+    private _horizontalBar: Slider;
+    private _verticalBar: Slider;
+    private _barColor: string = "grey";
+    private _barBorderColor: string = "#444444";
+    private _barBackground: string = "white";
+    private _scrollGridWidth: number = 30;
+    private _scrollGridHeight: number = 30;
+    private _widthScale: number;
+    private _heightScale: number;
+    private _endLeft: number;
+    private _endTop: number;
+    private _window: Container;
+    private _windowContents: Control;
+
+    /**
+     * Adds windowContents to the grid view window
+     * @param windowContents the contents to add the grid view window
+     */
+    public addToWindow(windowContents: Control): void {
+        this._window.removeControl(this._windowContents);
+        this._windowContents.dispose();
+        this._windowContents = windowContents;
+        if (windowContents.typeName === "TextBlock") {
+            this._updateTextBlock(windowContents);
+        }
+        else {
+            this._updateScroller(windowContents);
+        }
+        this._window.addControl(windowContents);
+    }
+
+    /**
+     * 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
+     */
+    public get paddingLeft(): string | number {
+        return this._windowContents.paddingLeft;
+    }
+
+    /**
+     * 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
+     */
+    public get paddingLeftInPixels(): number {
+        return this._windowContents.paddingLeftInPixels;
+    }
+
+    public set paddingLeft(value: string | number) {
+        this._windowContents.paddingLeft = value;
+    }
+
+    /**
+     * 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
+     */
+    public get paddingRight(): string | number {
+        return this._windowContents.paddingRight;
+    }
+
+    /**
+     * 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
+     */
+    public get paddingRightInPixels(): number {
+        return this._windowContents.paddingRightInPixels;
+    }
+
+    public set paddingRight(value: string | number) {
+        this._windowContents.paddingRight = value;
+    }
+
+    /**
+     * 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
+     */
+    public get paddingTop(): string | number {
+        return this._windowContents.paddingTop;
+    }
+
+    /**
+     * 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
+     */
+    public get paddingTopInPixels(): number {
+        return this._windowContents.paddingTopInPixels;
+    }
+
+    public set paddingTop(value: string | number) {
+        this._windowContents.paddingTop = value;
+    }
+
+    /**
+     * 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
+     */
+    public get paddingBottom(): string | number {
+        return this._windowContents.paddingBottom;
+    }
+
+    /**
+     * 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
+     */
+    public get paddingBottomInPixels(): number {
+        return this._windowContents.paddingBottomInPixels;
+    }
+
+    public set paddingBottom(value: string | number) {
+        this._windowContents.paddingBottom = value;
+    }
+
+    /**
+    * Creates a new ScrollViewer
+    * @param name of ScrollViewer
+    */
+    constructor(
+        /** name of ScrollViewer */
+        public name?: string) {
+        super(name);
+
+        this.onDirtyObservable.add(() => {
+            this._horizontalBarSpace.color = this.color;
+            this._verticalBarSpace.color = this.color;
+            this._dragSpace.color = this.color;
+            this._updateScroller(this._windowContents);
+            if (this._windowContents.typeName === "TextBlock") {
+                this._updateTextBlock(this._windowContents);
+            }
+        });
+
+        this._grid = new Grid();
+        this._horizontalBar = new Slider();
+        this._verticalBar = new Slider();
+
+        this._window = new Container();
+        this._window.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        this._window.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+
+        this._windowContents = new Control();
+        this._window.addControl(this._windowContents);
+
+        this._width = new ValueAndUnit(0.25, ValueAndUnit.UNITMODE_PERCENTAGE, false);
+        this._height = new ValueAndUnit(0.25, ValueAndUnit.UNITMODE_PERCENTAGE, false);
+        this._background = "black";
+
+        this.fontSize = "16px";
+
+        this._grid.addColumnDefinition(1, true);
+        this._grid.addColumnDefinition(this._scrollGridWidth, true);
+        this._grid.addRowDefinition(1, true);
+        this._grid.addRowDefinition(this._scrollGridHeight, true);
+
+        this.addControl(this._grid);
+        this._grid.addControl(this._window, 0, 0);
+
+        this._verticalBar.paddingLeft = 0;
+        this._verticalBar.width = "25px";
+        this._verticalBar.value = 0;
+        this._verticalBar.maximum = 100;
+        this._verticalBar.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
+        this._verticalBar.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
+        this._verticalBar.left = 0.05;
+        this._verticalBar.isThumbClamped = true;
+        this._verticalBar.color = "grey";
+        this._verticalBar.borderColor = "#444444";
+        this._verticalBar.background = "white";
+        this._verticalBar.isVertical = true;
+        this._verticalBar.rotation = Math.PI;
+
+        this._verticalBarSpace = new Rectangle();
+        this._verticalBarSpace.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        this._verticalBarSpace.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+        this._verticalBarSpace.color = this.color;
+        this._verticalBarSpace.thickness = 1;
+        this._grid.addControl(this._verticalBarSpace, 0, 1);
+        this._verticalBarSpace.addControl(this._verticalBar);
+
+        this._verticalBar.onValueChangedObservable.add((value) => {
+            this._window.top = value * this._endTop / 100 + "px";
+        });
+
+        this._horizontalBar.paddingLeft = 0;
+        this._horizontalBar.height = "25px";
+        this._horizontalBar.value = 0;
+        this._horizontalBar.maximum = 100;
+        this._horizontalBar.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
+        this._horizontalBar.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
+        this._horizontalBar.left = 0.05;
+        this._horizontalBar.isThumbClamped = true;
+        this._horizontalBar.color = "grey";
+        this._horizontalBar.borderColor = "#444444";
+        this._horizontalBar.background = "white";
+
+        this._horizontalBarSpace = new Rectangle();
+        this._horizontalBarSpace.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        this._horizontalBarSpace.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+        this._horizontalBarSpace.color = this.color;
+        this._horizontalBarSpace.thickness = 1;
+        this._grid.addControl(this._horizontalBarSpace, 1, 0);
+        this._horizontalBarSpace.addControl(this._horizontalBar);
+
+        this._horizontalBar.onValueChangedObservable.add((value) => {
+            this._window.left = value * this._endLeft / 100 + "px";
+        });
+
+        this._dragSpace = new Rectangle();
+        this._dragSpace.color = this.color;
+        this._dragSpace.thickness = 2;
+        this._dragSpace.background = this._barColor;
+        this._grid.addControl(this._dragSpace, 1, 1);
+    }
+
+    /** Gets or sets the bar color */
+    public get barColor(): string {
+        return this._barColor;
+    }
+
+    public set barColor(color: string) {
+        if (this._barColor === color) {
+            return;
+        }
+
+        this._barColor = color;
+        this._horizontalBar.color = color;
+        this._verticalBar.color = color;
+        this._dragSpace.background = color;
+    }
+
+    /** Gets or sets the bar color */
+    public get barBorderColor(): string {
+        return this._barBorderColor;
+    }
+
+    public set barBorderColor(color: string) {
+        if (this._barBorderColor === color) {
+            return;
+        }
+
+        this._barBorderColor = color;
+        this._horizontalBar.borderColor = color;
+        this._verticalBar.borderColor = color;
+    }
+
+    /** Gets or sets the bar background */
+    public get barBackground(): string {
+        return this._barBackground;
+    }
+
+    public set barBackground(color: string) {
+        if (this._barBackground === color) {
+            return;
+        }
+
+        this._barBackground = color;
+        this._horizontalBar.background = color;
+        this._verticalBar.background = color;
+    }
+
+    /** @hidden */
+    protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
+        super._additionalProcessing(parentMeasure, context);
+
+        let viewerWidth = this._width.getValueInPixel(this._host, parentMeasure.width);
+        let viewerHeight = this._height.getValueInPixel(this._host, parentMeasure.height);
+
+        let innerWidth = viewerWidth - this._scrollGridWidth - 2 * this.thickness;
+        let innerHeight = viewerHeight  - this._scrollGridHeight - 2 * this.thickness;
+        this._horizontalBar.width = (innerWidth * 0.8) + "px";
+        this._verticalBar.height = (innerHeight * 0.8) + "px";
+
+        this._grid.setColumnDefinition(0, innerWidth, true);
+        this._grid.setRowDefinition(0, innerHeight, true);
+    }
+
+    /** @hidden */
+    private _updateScroller(windowContents: Control): void {
+
+        let windowContentsWidth: number  = parseFloat(windowContents.width.toString());
+        if (windowContents._width.unit === 0) {
+            this._widthScale = windowContentsWidth / 100;
+            windowContentsWidth = this._host.getSize().width * this._widthScale;
+            windowContents.width = windowContentsWidth + "px";
+        }
+
+        let windowContentsHeight: number  = parseFloat(windowContents.height.toString());
+        if (windowContents._height.unit === 0) {
+            this._heightScale = windowContentsHeight / 100;
+            windowContentsHeight = this._host.getSize().height * this._heightScale;
+            windowContents.height = this._host.getSize().height * this._heightScale + "px";
+        }
+
+        this._window.width = windowContents.width;
+        this._window.height = windowContents.height;
+        this._windowContents.width = windowContents.width;
+        this._windowContents.height = windowContents.height;
+
+        let viewerWidth = this._width.getValueInPixel(this._host, this._host.getSize().width);
+        let viewerHeight = this._height.getValueInPixel(this._host, this._host.getSize().height);
+
+        let innerWidth = viewerWidth - this._scrollGridWidth - 2 * this.thickness;
+        let innerHeight = viewerHeight  - this._scrollGridHeight - 2 * this.thickness;
+
+        if (windowContentsWidth <= innerWidth) {
+            this._grid.setRowDefinition(0, viewerHeight - 2 * this.thickness , true);
+            this._grid.setRowDefinition(1, 0, true);
+            this._horizontalBar.isVisible = false;
+        }
+        else {
+            this._grid.setRowDefinition(0, innerHeight, true);
+            this._grid.setRowDefinition(1, this._scrollGridHeight, true);
+            this._horizontalBar.isVisible = true;
+        }
+
+        if (windowContentsHeight < innerHeight) {
+            this._grid.setColumnDefinition(0, viewerWidth - 2 * this.thickness, true);
+            this._grid.setColumnDefinition(1, 0, true);
+            this._verticalBar.isVisible = false;
+        }
+        else {
+            this._grid.setColumnDefinition(0, innerWidth, true);
+            this._grid.setColumnDefinition(1, this._scrollGridWidth, true);
+            this._verticalBar.isVisible = true;
+        }
+
+        this._endLeft = innerWidth - windowContentsWidth;
+        this._endTop = innerHeight - windowContentsHeight;
+    }
+
+    /** @hidden */
+    private _updateTextBlock(windowContents: Control): void {
+        let viewerWidth = this._width.getValueInPixel(this._host, this._host.getSize().width);
+        let innerWidth = viewerWidth - this._scrollGridWidth - 2 * this.thickness;
+
+        windowContents.width = innerWidth + "px";
+
+        this._window.width = windowContents.width;
+        this._windowContents.width = windowContents.width;
+
+        (<TextBlock>windowContents).onLinesReadyObservable.add(() => {
+            let windowContentsHeight = (this.fontOffset.height) * (<TextBlock>windowContents).lines.length + windowContents.paddingTopInPixels + windowContents.paddingBottomInPixels;
+            windowContents.height = windowContentsHeight + "px";
+            this._window.height = windowContents.height;
+            this._windowContents.height = windowContents.height;
+            this._updateScroller(windowContents);
+        });
+    }
+}

inspector/src/components/actionTabs/actionTabs.scss

@@ -5,6 +5,10 @@
     bottom: 0px;
 }
 
+#__resizable_base__ {
+    display: none;
+}
+
 #actionTabs {
     background: #333333;
     height: 100%;

inspector/src/components/actionTabs/lineContainerComponent.tsx

@@ -9,14 +9,26 @@ interface ILineContainerComponentProps {
 }
 
 export class LineContainerComponent extends React.Component<ILineContainerComponentProps, { isExpanded: boolean }> {
+    private static _InMemoryStorage: {[key: string]: boolean};
+    
     constructor(props: ILineContainerComponentProps) {
         super(props);
 
         let initialState: boolean;
 
-        if (typeof (Storage) !== "undefined" && localStorage.getItem(this.props.title) !== null) {
-            initialState = localStorage.getItem(this.props.title) === "true";
-        } else {
+        try
+        { 
+            if (LineContainerComponent._InMemoryStorage && LineContainerComponent._InMemoryStorage[this.props.title] !== undefined) {
+                initialState = LineContainerComponent._InMemoryStorage[this.props.title];
+            } else if (typeof (Storage) !== "undefined" && localStorage.getItem(this.props.title) !== null) {
+                initialState = localStorage.getItem(this.props.title) === "true";
+            } else {
+                initialState = !this.props.closed;
+            }   
+        }
+        catch (e) {
+            LineContainerComponent._InMemoryStorage = {};
+            LineContainerComponent._InMemoryStorage[this.props.title] = !this.props.closed
             initialState = !this.props.closed;
         }
 
@@ -24,10 +36,23 @@ export class LineContainerComponent extends React.Component<ILineContainerCompon
     }
 
     switchExpandedState(): void {
-        if (typeof (Storage) !== "undefined") {
-            localStorage.setItem(this.props.title, !this.state.isExpanded ? "true" : "false");
+        const newState = !this.state.isExpanded;
+        
+        try
+        { 
+            if (LineContainerComponent._InMemoryStorage) {
+                LineContainerComponent._InMemoryStorage[this.props.title] = newState;
+            } else if (typeof (Storage) !== "undefined") {
+                localStorage.setItem(this.props.title, newState ? "true" : "false");
+            }
+        }
+        catch (e) {
+            LineContainerComponent._InMemoryStorage = {};
+            LineContainerComponent._InMemoryStorage[this.props.title] = newState;
         }
-        this.setState({ isExpanded: !this.state.isExpanded });
+        
+        this.setState({ isExpanded: newState });
+
     }
 
     renderHeader() {

inspector/src/components/actionTabs/tabs/propertyGrids/materials/texturePropertyGridComponent.tsx

@@ -90,7 +90,7 @@ export class TexturePropertyGridComponent extends React.Component<ITextureProper
                         <div>
                             <FloatLineComponent lockObject={this.props.lockObject} label="U offset" target={texture} propertyName="uOffset" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                             <FloatLineComponent lockObject={this.props.lockObject} label="V offset" target={texture} propertyName="vOffset" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                            <FloatLineComponent lockObject={this.props.lockObject} label="V scale" target={texture} propertyName="uScale" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                            <FloatLineComponent lockObject={this.props.lockObject} label="U scale" target={texture} propertyName="uScale" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                             <FloatLineComponent lockObject={this.props.lockObject} label="V scale" target={texture} propertyName="vScale" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                             <FloatLineComponent lockObject={this.props.lockObject} label="U angle" target={texture} propertyName="uAng" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                             <FloatLineComponent lockObject={this.props.lockObject} label="V angle" target={texture} propertyName="vAng" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />

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

@@ -40,9 +40,9 @@ export class AxesViewerComponent extends React.Component<IAxisViewerComponentPro
         const y = new Vector3(0, 1, 0);
         const z = new Vector3(0, 0, 1);
 
-        viewer.xAxisMesh!.reservedDataStore = { hidden: true };
-        viewer.yAxisMesh!.reservedDataStore = { hidden: true };
-        viewer.zAxisMesh!.reservedDataStore = { hidden: true };
+        viewer.xAxis.reservedDataStore = { hidden: true };
+        viewer.yAxis.reservedDataStore = { hidden: true };
+        viewer.zAxis.reservedDataStore = { hidden: true };
 
         node.reservedDataStore.onBeforeRenderObserver = scene.onBeforeRenderObservable.add(() => {
             let matrix = node.getWorldMatrix();

inspector/src/components/embedHost/embedHost.scss

@@ -5,6 +5,10 @@
     bottom: 0px;
 }
 
+#__resizable_base__ {
+    display: none;
+}
+
 #embed {
     background: #333333;
     height: 100%;

inspector/src/components/sceneExplorer/sceneExplorer.scss

@@ -9,6 +9,10 @@
     }
 }
 
+#__resizable_base__ {
+    display: none;
+}
+
 #sceneExplorer {
     background: #333333;
     height: 100%;

loaders/src/glTF/2.0/glTFLoader.ts

@@ -1702,14 +1702,19 @@ import { IGLTFLoader, GLTFFileLoader, GLTFLoaderState, IGLTFLoaderData, GLTFLoad
             const samplerData = this._loadSampler(`/samplers/${sampler.index}`, sampler);
 
             const image = ArrayItem.Get(`${context}/source`, this.gltf.images, texture.source);
-            let textureURL: Nullable<string> = null;
-            if (image.uri && !Tools.IsBase64(image.uri) && this.babylonScene.getEngine().textureFormatInUse) {
-                // If an image uri and a texture format is set like (eg. KTX) load from url instead of blob to support texture format and fallback
-                textureURL = this._uniqueRootUrl + image.uri;
+            let url: Nullable<string> = null;
+            if (image.uri) {
+                if (Tools.IsBase64(image.uri)) {
+                    url = image.uri;
+                }
+                else if (this.babylonScene.getEngine().textureFormatInUse) {
+                    // If an image uri and a texture format is set like (eg. KTX) load from url instead of blob to support texture format and fallback
+                    url = this._rootUrl + image.uri;
+                }
             }
 
             const deferred = new Deferred<void>();
-            const babylonTexture = new Texture(textureURL, this.babylonScene, samplerData.noMipMaps, false, samplerData.samplingMode, () => {
+            const babylonTexture = new Texture(url, this.babylonScene, samplerData.noMipMaps, false, samplerData.samplingMode, () => {
                 if (!this._disposed) {
                     deferred.resolve();
                 }
@@ -1720,7 +1725,7 @@ import { IGLTFLoader, GLTFFileLoader, GLTFLoaderState, IGLTFLoaderData, GLTFLoad
             });
             promises.push(deferred.promise);
 
-            if (!textureURL) {
+            if (!url) {
                 promises.push(this.loadImageAsync(`/images/${image.index}`, image).then((data) => {
                     const name = image.uri || `${this._fileName}#image${image.index}`;
                     const dataUrl = `data:${this._uniqueRootUrl}${name}`;

package.json

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

src/Cameras/arcRotateCamera.ts

@@ -1068,7 +1068,6 @@ import { ArcRotateCameraInputsManager } from "Cameras/arcRotateCameraInputsManag
             var camRight = <ArcRotateCamera>this._rigCameras[1];
 
             camLeft.beta = camRight.beta = this.beta;
-            camLeft.radius = camRight.radius = this.radius;
 
             switch (this.cameraRigMode) {
                 case Camera.RIG_MODE_STEREOSCOPIC_ANAGLYPH:

src/Debug/axesViewer.ts

@@ -1,7 +1,7 @@
 import { Vector3, Color3, Quaternion } from "Maths/math";
 import { Nullable } from "types";
 import { Scene } from "scene";
-import { AbstractMesh } from "Meshes/AbstractMesh";
+import { TransformNode } from "Meshes/TransformNode";
 import { StandardMaterial } from "Materials/standardMaterial";
 import { AxisDragGizmo } from "Gizmos/axisDragGizmo";
 
@@ -9,75 +9,86 @@ import { AxisDragGizmo } from "Gizmos/axisDragGizmo";
      * The Axes viewer will show 3 axes in a specific point in space
      */
     export class AxesViewer {
-        private _xmesh: Nullable<AbstractMesh>;
-        private _ymesh: Nullable<AbstractMesh>;
-        private _zmesh: Nullable<AbstractMesh>;
+        private _xAxis: TransformNode;
+        private _yAxis: TransformNode;
+        private _zAxis: TransformNode;
+        private _tmpVector = new Vector3();
+        private _scaleLinesFactor = 4;
+        private _instanced = false;
 
         /**
          * Gets the hosting scene
          */
-        public scene: Nullable<Scene>;
+        public scene: Scene;
+
         /**
          * Gets or sets a number used to scale line length
          */
         public scaleLines = 1;
 
-        /** Gets the mesh used to render x-axis */
-        public get xAxisMesh(): Nullable<AbstractMesh> {
-            return this._xmesh;
-        }
-
-        /** Gets the mesh used to render x-axis */
-        public get yAxisMesh(): Nullable<AbstractMesh> {
-            return this._ymesh;
+        /** Gets the node hierarchy used to render x-axis */
+        public get xAxis(): TransformNode {
+            return this._xAxis;
         }
 
-        /** Gets the mesh used to render x-axis */
-        public get zAxisMesh(): Nullable<AbstractMesh> {
-            return this._zmesh;
+        /** Gets the node hierarchy used to render y-axis */
+        public get yAxis(): TransformNode {
+            return this._yAxis;
         }
 
-        private static _recursiveChangeRenderingGroupId(mesh: AbstractMesh, id: number) {
-            mesh.renderingGroupId = id;
-            mesh.getChildMeshes().forEach((m) => {
-                AxesViewer._recursiveChangeRenderingGroupId(m, id);
-            });
+        /** Gets the node hierarchy used to render z-axis */
+        public get zAxis(): TransformNode {
+            return this._zAxis;
         }
 
         /**
          * 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
          */
-        constructor(scene: Scene, scaleLines = 1) {
+        constructor(scene: Scene, scaleLines = 1, renderingGroupId: Nullable<number> = 2, xAxis?: TransformNode, yAxis?: TransformNode, zAxis?: TransformNode) {
             this.scaleLines = scaleLines;
 
-            var greenColoredMaterial = new StandardMaterial("", scene);
-            greenColoredMaterial.disableLighting = true;
-            greenColoredMaterial.emissiveColor = Color3.Green().scale(0.5);
-
-            var redColoredMaterial = new StandardMaterial("", scene);
-            redColoredMaterial.disableLighting = true;
-            redColoredMaterial.emissiveColor = Color3.Red().scale(0.5);
-
-            var blueColoredMaterial = new StandardMaterial("", scene);
-            blueColoredMaterial.disableLighting = true;
-            blueColoredMaterial.emissiveColor = Color3.Blue().scale(0.5);
+            if (!xAxis) {
+                var redColoredMaterial = new StandardMaterial("", scene);
+                redColoredMaterial.disableLighting = true;
+                redColoredMaterial.emissiveColor = Color3.Red().scale(0.5);
+                xAxis = AxisDragGizmo._CreateArrow(scene, redColoredMaterial);
+            }
 
-            this._xmesh = AxisDragGizmo._CreateArrow(scene, redColoredMaterial);
-            this._ymesh = AxisDragGizmo._CreateArrow(scene, greenColoredMaterial);
-            this._zmesh = AxisDragGizmo._CreateArrow(scene, blueColoredMaterial);
+            if (!yAxis) {
+                var greenColoredMaterial = new StandardMaterial("", scene);
+                greenColoredMaterial.disableLighting = true;
+                greenColoredMaterial.emissiveColor = Color3.Green().scale(0.5);
+                yAxis = AxisDragGizmo._CreateArrow(scene, greenColoredMaterial);
+            }
 
-            this._xmesh.rotationQuaternion = new Quaternion();
-            this._xmesh.scaling.scaleInPlace(4);
-            this._ymesh.rotationQuaternion = new Quaternion();
-            this._ymesh.scaling.scaleInPlace(4);
-            this._zmesh.rotationQuaternion = new Quaternion();
-            this._zmesh.scaling.scaleInPlace(4);
+            if (!zAxis) {
+                var blueColoredMaterial = new StandardMaterial("", scene);
+                blueColoredMaterial.disableLighting = true;
+                blueColoredMaterial.emissiveColor = Color3.Blue().scale(0.5);
+                zAxis = AxisDragGizmo._CreateArrow(scene, blueColoredMaterial);
+            }
 
-            AxesViewer._recursiveChangeRenderingGroupId(this._xmesh, 2);
-            AxesViewer._recursiveChangeRenderingGroupId(this._ymesh, 2);
-            AxesViewer._recursiveChangeRenderingGroupId(this._zmesh, 2);
+            this._xAxis = xAxis;
+            this._xAxis.rotationQuaternion = new Quaternion();
+            this._xAxis.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
+            this._yAxis = yAxis;
+            this._yAxis.rotationQuaternion = new Quaternion();
+            this._yAxis.scaling.setAll(this.scaleLines * this._scaleLinesFactor);
+            this._zAxis = zAxis;
+            this._zAxis.rotationQuaternion = new 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 Vector3(), Vector3.Right(), Vector3.Up(), Vector3.Forward());
@@ -91,50 +102,59 @@ import { AxisDragGizmo } from "Gizmos/axisDragGizmo";
          * @param zaxis defines the z axis of the viewer
          */
         public update(position: Vector3, xaxis: Vector3, yaxis: Vector3, zaxis: Vector3): void {
-            if (this._xmesh) {
-                this._xmesh.position.copyFrom(position);
-
-                var cross = Vector3.Cross(Vector3.Forward(), xaxis);
-                this._xmesh.rotationQuaternion!.set(cross.x, cross.y, cross.z, 1 + Vector3.Dot(Vector3.Forward(), xaxis));
-                this._xmesh.rotationQuaternion!.normalize();
-            }
-            if (this._ymesh) {
-                this._ymesh.position.copyFrom(position);
-
-                var cross = Vector3.Cross(Vector3.Forward(), yaxis);
-                this._ymesh.rotationQuaternion!.set(cross.x, cross.y, cross.z, 1 + Vector3.Dot(Vector3.Forward(), yaxis));
-                this._ymesh.rotationQuaternion!.normalize();
-            }
-            if (this._zmesh) {
-                this._zmesh.position.copyFrom(position);
-
-                var cross = Vector3.Cross(Vector3.Forward(), zaxis);
-                this._zmesh.rotationQuaternion!.set(cross.x, cross.y, cross.z, 1 + Vector3.Dot(Vector3.Forward(), zaxis));
-                this._zmesh.rotationQuaternion!.normalize();
-            }
+            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
+         */
+        public createInstance(): AxesViewer {
+            const xAxis = AxisDragGizmo._CreateArrowInstance(this.scene, this._xAxis);
+            const yAxis = AxisDragGizmo._CreateArrowInstance(this.scene, this._yAxis);
+            const zAxis = AxisDragGizmo._CreateArrowInstance(this.scene, this._zAxis);
+            const axesViewer = new AxesViewer(this.scene, this.scaleLines, null, xAxis, yAxis, zAxis);
+            axesViewer._instanced = true;
+            return axesViewer;
         }
 
         /** Releases resources */
         public dispose() {
-
-            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;
         }
 
-    }
+        private static _SetRenderingGroupId(node: TransformNode, id: number) {
+            node.getChildMeshes().forEach((mesh) => {
+                mesh.renderingGroupId = id;
+            });
+        }
+    }
+}

src/Debug/debugLayer.ts

@@ -167,7 +167,7 @@ declare module "scene" {
          * @returns true if visible otherwise, false
          */
         public isVisible(): boolean {
-            return this.BJSINSPECTOR.Inspector.IsVisible;
+            return this.BJSINSPECTOR && this.BJSINSPECTOR.Inspector.IsVisible;
         }
 
         /**

src/Engines/engine.ts

@@ -516,7 +516,7 @@ declare type RenderTargetTexture = import("Materials/Textures/renderTargetTextur
          * Returns the current version of the framework
          */
         public static get Version(): string {
-            return "4.0.0-alpha.9";
+            return "4.0.0-alpha.10";
         }
 
         /**

src/Gizmos/axisDragGizmo.ts

@@ -2,6 +2,7 @@ import { Observer, Observable } from "Misc/observable";
 import { Nullable } from "types";
 import { PointerInfo } from "Events/pointerEvents";
 import { Vector3, Color3, Matrix } from "Maths/math";
+import { TransformNode } from "Meshes/transformNode";
 import { AbstractMesh } from "Meshes/abstractMesh";
 import { Mesh } from "Meshes/mesh";
 import { LinesMesh } from "Meshes/linesMesh";
@@ -30,28 +31,38 @@ import { Scene } from "scene";
          * Event that fires each time the gizmo snaps to a new location.
          * * snapDistance is the the change in distance
          */
-        public onSnapObservable = new Observable<{snapDistance: number}>();
+        public onSnapObservable = new Observable<{ snapDistance: number }>();
 
         /** @hidden */
-        public static _CreateArrow(scene: Scene, material: StandardMaterial) {
-            var arrow = new AbstractMesh("", scene);
-            var arrowMesh = MeshBuilder.CreateCylinder("yPosMesh", {diameterTop: 0, height: 1.5, diameterBottom: 0.75, tessellation: 96}, scene);
-            var arrowTail = MeshBuilder.CreateLines("yPosMesh", {points: [new Vector3(0, 0, 0), new Vector3(0, 1.1, 0)]}, scene);
-            arrowTail.color = material.emissiveColor;
-            arrow.addChild(arrowMesh);
-            arrow.addChild(arrowTail);
+        public static _CreateArrow(scene: Scene, material: StandardMaterial): TransformNode {
+            var arrow = new TransformNode("arrow", scene);
+            var cylinder = MeshBuilder.CreateCylinder("cylinder", { diameterTop: 0, height: 1.5, diameterBottom: 0.75, tessellation: 96 }, scene);
+            var line = MeshBuilder.CreateLines("line", { points: [new Vector3(0, 0, 0), new 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 */
+        public static _CreateArrowInstance(scene: Scene, arrow: TransformNode): TransformNode {
+            const instance = new TransformNode("arrow", scene);
+            for (const mesh of arrow.getChildMeshes()) {
+                const childInstance = (mesh as Mesh).createInstance(mesh.name);
+                childInstance.parent = instance;
+            }
+            return instance;
+        }
+
         /**
          * Creates an AxisDragGizmo
          * @param gizmoLayer The utility layer the gizmo will be added to
@@ -75,14 +86,13 @@ import { Scene } from "scene";
 
             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 Vector3();
-            var tmpSnapEvent = {snapDistance: 0};
+            var tmpSnapEvent = { snapDistance: 0 };
             // Add drag behavior to handle events when the gizmo is dragged
-            this.dragBehavior = new PointerDragBehavior({dragAxis: dragAxis});
+            this.dragBehavior = new PointerDragBehavior({ dragAxis: dragAxis });
             this.dragBehavior.moveAttached = false;
             this._rootMesh.addBehavior(this.dragBehavior);
 
@@ -95,13 +105,13 @@ import { Scene } from "scene";
                         this.attachedMesh.parent.computeWorldMatrix().invertToRef(tmpMatrix);
                         tmpMatrix.setTranslationFromFloats(0, 0, 0);
                         Vector3.TransformCoordinatesToRef(event.delta, tmpMatrix, localDelta);
-                    }else {
+                    } else {
                         localDelta.copyFrom(event.delta);
                     }
                     // Snapping logic
                     if (this.snapDistance == 0) {
                         this.attachedMesh.position.addInPlace(localDelta);
-                    }else {
+                    } else {
                         currentSnapDragDistance += event.dragDistance;
                         if (Math.abs(currentSnapDragDistance) > this.snapDistance) {
                             var dragSteps = Math.floor(Math.abs(currentSnapDragDistance) / this.snapDistance);

src/Meshes/transformNode.ts

@@ -243,7 +243,7 @@ import { Bone } from "Bones/bone";
                 return false;
             }
 
-            if (this.infiniteDistance !== this._cache.infiniteDistance) {
+            if (this.infiniteDistance) {
                 return false;
             }