Changed function parameters to include options

dist/preview release/babylon.max.js

@@ -9856,7 +9856,7 @@ var BABYLON;
         /**
         * new Path3D(path, normal, raw)
         * Creates a Path3D. A Path3D is a logical math object, so not a mesh.
-        * please read the description in the tutorial :  http://doc.babylonjs.com/tutorials/How_to_use_Path3D
+        * please read the description in the tutorial : https://doc.babylonjs.com/how_to/how_to_use_path3d
         * @param path an array of Vector3, the curve axis of the Path3D
         * @param normal (options) Vector3, the first wanted normal to the curve. Ex (0, 1, 0) for a vertical normal.
         * @param raw (optional, default false) : boolean, if true the returned Path3D isn't normalized. Useful to depict path acceleration or speed.
@@ -10049,7 +10049,7 @@ var BABYLON;
         /**
          * A Curve3 object is a logical object, so not a mesh, to handle curves in the 3D geometric space.
          * A Curve3 is designed from a series of successive Vector3.
-         * Tuto : http://doc.babylonjs.com/tutorials/How_to_use_Curve3#curve3-object
+         * Tuto : https://doc.babylonjs.com/how_to/how_to_use_curve3#curve3-object
          * @param points points which make up the curve
          */
         function Curve3(points) {
@@ -10058,7 +10058,7 @@ var BABYLON;
             this._length = this._computeLength(points);
         }
         /**
-         * Returns a Curve3 object along a Quadratic Bezier curve : http://doc.babylonjs.com/tutorials/How_to_use_Curve3#quadratic-bezier-curve
+         * Returns a Curve3 object along a Quadratic Bezier curve : https://doc.babylonjs.com/how_to/how_to_use_curve3#quadratic-bezier-curve
          * @param v0 (Vector3) the origin point of the Quadratic Bezier
          * @param v1 (Vector3) the control point
          * @param v2 (Vector3) the end point of the Quadratic Bezier
@@ -10078,7 +10078,7 @@ var BABYLON;
             return new Curve3(bez);
         };
         /**
-         * Returns a Curve3 object along a Cubic Bezier curve : http://doc.babylonjs.com/tutorials/How_to_use_Curve3#cubic-bezier-curve
+         * Returns a Curve3 object along a Cubic Bezier curve : https://doc.babylonjs.com/how_to/how_to_use_curve3#cubic-bezier-curve
          * @param v0 (Vector3) the origin point of the Cubic Bezier
          * @param v1 (Vector3) the first control point
          * @param v2 (Vector3) the second control point
@@ -10099,7 +10099,7 @@ var BABYLON;
             return new Curve3(bez);
         };
         /**
-         * Returns a Curve3 object along a Hermite Spline curve : http://doc.babylonjs.com/tutorials/How_to_use_Curve3#hermite-spline
+         * Returns a Curve3 object along a Hermite Spline curve : https://doc.babylonjs.com/how_to/how_to_use_curve3#hermite-spline
          * @param p1 (Vector3) the origin point of the Hermite Spline
          * @param t1 (Vector3) the tangent vector at the origin point
          * @param p2 (Vector3) the end point of the Hermite Spline
@@ -20512,6 +20512,34 @@ var BABYLON;
                 this.rotation.y = yaw + yawCor;
                 this.rotation.z = rollCor;
             }
+            // Correct for parent's rotation offset
+            if (space === BABYLON.Space.WORLD && this.parent) {
+                if (this.rotationQuaternion) {
+                    // Get local rotation matrix of the looking object
+                    var rotationMatrix = BABYLON.Tmp.Matrix[0];
+                    this.rotationQuaternion.toRotationMatrix(rotationMatrix);
+                    // Offset rotation by parent's inverted rotation matrix to correct in world space
+                    var parentRotationMatrix = BABYLON.Tmp.Matrix[1];
+                    this.parent.getWorldMatrix().getRotationMatrixToRef(parentRotationMatrix);
+                    parentRotationMatrix.invert();
+                    rotationMatrix.multiplyToRef(parentRotationMatrix, rotationMatrix);
+                    this.rotationQuaternion.fromRotationMatrix(rotationMatrix);
+                }
+                else {
+                    // Get local rotation matrix of the looking object
+                    var quaternionRotation = BABYLON.Tmp.Quaternion[0];
+                    BABYLON.Quaternion.FromEulerVectorToRef(this.rotation, quaternionRotation);
+                    var rotationMatrix = BABYLON.Tmp.Matrix[0];
+                    quaternionRotation.toRotationMatrix(rotationMatrix);
+                    // Offset rotation by parent's inverted rotation matrix to correct in world space
+                    var parentRotationMatrix = BABYLON.Tmp.Matrix[1];
+                    this.parent.getWorldMatrix().getRotationMatrixToRef(parentRotationMatrix);
+                    parentRotationMatrix.invert();
+                    rotationMatrix.multiplyToRef(parentRotationMatrix, rotationMatrix);
+                    quaternionRotation.fromRotationMatrix(rotationMatrix);
+                    quaternionRotation.toEulerAnglesToRef(this.rotation);
+                }
+            }
             return this;
         };
         /**
@@ -23013,7 +23041,7 @@ var BABYLON;
         __extends(Light, _super);
         /**
          * Creates a Light object in the scene.
-         * Documentation : http://doc.babylonjs.com/tutorials/lights
+         * Documentation : https://doc.babylonjs.com/babylon101/lights
          * @param name The firendly name of the light
          * @param scene The scene the light belongs too
          */
@@ -35868,7 +35896,7 @@ var BABYLON;
           * * You can build other polyhedron types than the 15 embbeded ones by setting the parameter `custom` (`polyhedronObject`, default null). If you set the parameter `custom`, this overwrittes the parameter `type`
           * * A `polyhedronObject` is a formatted javascript object. You'll find a full file with pre-set polyhedra here : https://github.com/BabylonJS/Extensions/tree/master/Polyhedron
           * * You can set the color and the UV of each side of the polyhedron with the parameters `faceColors` (Color4, default `(1, 1, 1, 1)`) and faceUV (Vector4, default `(0, 0, 1, 1)`)
-          * * To understand how to set `faceUV` or `faceColors`, please read this by considering the right number of faces of your polyhedron, instead of only 6 for the box : http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors
+          * * To understand how to set `faceUV` or `faceColors`, please read this by considering the right number of faces of your polyhedron, instead of only 6 for the box : https://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors
           * * The parameter `flat` (boolean, default true). If set to false, it gives the polyhedron a single global face, so less vertices and shared normals. In this case, `faceColors` and `faceUV` are ignored
           * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
           * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
@@ -52726,7 +52754,7 @@ var BABYLON;
          * Creates a HemisphericLight object in the scene according to the passed direction (Vector3).
          * The HemisphericLight simulates the ambient environment light, so the passed direction is the light reflection direction, not the incoming direction.
          * The HemisphericLight can't cast shadows.
-         * Documentation : http://doc.babylonjs.com/tutorials/lights
+         * Documentation : https://doc.babylonjs.com/babylon101/lights
          * @param name The friendly name of the light
          * @param direction The direction of the light reflection
          * @param scene The scene the light belongs to
@@ -53117,7 +53145,7 @@ var BABYLON;
          * ```javascript
          * var pointLight = new BABYLON.PointLight("pl", camera.position, scene);
          * ```
-         * Documentation : http://doc.babylonjs.com/tutorials/lights
+         * Documentation : https://doc.babylonjs.com/babylon101/lights
          * @param name The light friendly name
          * @param position The position of the point light in the scene
          * @param scene The scene the lights belongs to
@@ -53300,7 +53328,7 @@ var BABYLON;
          * Creates a DirectionalLight object in the scene, oriented towards the passed direction (Vector3).
          * The directional light is emitted from everywhere in the given direction.
          * It can cast shadows.
-         * Documentation : http://doc.babylonjs.com/tutorials/lights
+         * Documentation : https://doc.babylonjs.com/babylon101/lights
          * @param name The friendly name of the light
          * @param direction The direction of the light
          * @param scene The scene the light belongs to
@@ -53533,7 +53561,7 @@ var BABYLON;
         /**
          * Creates a SpotLight object in the scene. A spot light is a simply light oriented cone.
          * It can cast shadows.
-         * Documentation : http://doc.babylonjs.com/tutorials/lights
+         * Documentation : https://doc.babylonjs.com/babylon101/lights
          * @param name The light friendly name
          * @param position The position of the spot light in the scene
          * @param direction The direction of the light in the scene
@@ -69901,11 +69929,11 @@ var BABYLON;
          * * The parameter `size` sets the size (float) of each box side (default 1)
          * * You can set some different box dimensions by using the parameters `width`, `height` and `depth` (all by default have the same value of `size`)
          * * You can set different colors and different images to each box side by using the parameters `faceColors` (an array of 6 Color3 elements) and `faceUV` (an array of 6 Vector4 elements)
-         * * Please read this tutorial : http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors
+         * * Please read this tutorial : https://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#box
+         * @see https://doc.babylonjs.com/how_to/set_shapes#box
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
@@ -69928,13 +69956,13 @@ var BABYLON;
          * * You can create an unclosed sphere with the parameter `arc` (positive float, default 1), valued between 0 and 1, what is the ratio of the circumference (latitude) : 2 x PI x ratio
          * * You can create an unclosed sphere on its height with the parameter `slice` (positive float, default1), valued between 0 and 1, what is the height ratio (longitude)
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the sphere mesh
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#sphere
+         * @see https://doc.babylonjs.com/how_to/set_shapes#sphere
          */
         MeshBuilder.CreateSphere = function (name, options, scene) {
             var sphere = new BABYLON.Mesh(name, scene);
@@ -69950,13 +69978,13 @@ var BABYLON;
          * * The parameter `tessellation` sets the number of polygon sides (positive integer, default 64). So a tessellation valued to 3 will build a triangle, to 4 a square, etc
          * * You can create an unclosed polygon with the parameter `arc` (positive float, default 1), valued between 0 and 1, what is the ratio of the circumference : 2 x PI x ratio
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the plane polygonal mesh
-         * @see http://doc.babylonjs.com/how_to/set_shapes#disc-or-regular-polygon
+         * @see https://doc.babylonjs.com/how_to/set_shapes#disc-or-regular-polygon
          */
         MeshBuilder.CreateDisc = function (name, options, scene) {
             if (scene === void 0) { scene = null; }
@@ -69974,13 +70002,13 @@ var BABYLON;
          * * The parameter `subdivisions` sets the number of subdivisions (postive integer, default 4). The more subdivisions, the more faces on the icosphere whatever its size
          * * The parameter `flat` (boolean, default true) gives each side its own normals. Set it to false to get a smooth continuous light reflection on the surface
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the icosahedron mesh
-         * @see http://doc.babylonjs.com/how_to/polyhedra_shapes#icosphere
+         * @see https://doc.babylonjs.com/how_to/polyhedra_shapes#icosphere
          */
         MeshBuilder.CreateIcoSphere = function (name, options, scene) {
             var sphere = new BABYLON.Mesh(name, scene);
@@ -69997,9 +70025,9 @@ var BABYLON;
          * * The parameter `closePath` (boolean, default false) creates a seam between the first and the last points of each path of the path array
          * * The parameter `offset` (positive integer, default : rounded half size of the pathArray length), is taken in account only if the `pathArray` is containing a single path
          * * It's the offset to join the points from the same path. Ex : offset = 10 means the point 1 is joined to the point 11
-         * * The optional parameter `instance` is an instance of an existing Ribbon object to be updated with the passed `pathArray` parameter : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#ribbon
+         * * The optional parameter `instance` is an instance of an existing Ribbon object to be updated with the passed `pathArray` parameter : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#ribbon
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The optional parameter `invertUV` (boolean, default false) swaps in the geometry the U and V coordinates to apply a texture
          * * The parameter `uvs` is an optional flat array of `Vector2` to update/set each ribbon vertex with its own custom UV values instead of the computed ones
          * * The parameters `colors` is an optional flat array of `Color4` to set/update each ribbon vertex with its own custom color values
@@ -70010,8 +70038,8 @@ var BABYLON;
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the ribbon mesh
-         * @see http://doc.babylonjs.com/tutorials/Ribbon_Tutorial
-         * @see http://doc.babylonjs.com/tutorials/Parametric_Shapes
+         * @see https://doc.babylonjs.com/how_to/ribbon_tutorial
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes
          */
         MeshBuilder.CreateRibbon = function (name, options, scene) {
             if (scene === void 0) { scene = null; }
@@ -70144,15 +70172,15 @@ var BABYLON;
          * * Each array (color or UVs) is always ordered the same way : the first element is the bottom cap, the last element is the top cap. The other elements are each a ring surface.
          * * If `enclose` is false, a ring surface is one element.
          * * If `enclose` is true, a ring surface is 3 successive elements in the array : the tubular surface, then the two closing faces.
-         * * Example how to set colors and textures on a sliced cylinder : http://www.html5gamedevs.com/topic/17945-creating-a-closed-slice-of-a-cylinder/#comment-106379
+         * * Example how to set colors and textures on a sliced cylinder : https://www.html5gamedevs.com/topic/17945-creating-a-closed-slice-of-a-cylinder/#comment-106379
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created.
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the cylinder mesh
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#cylinder-or-cone
+         * @see https://doc.babylonjs.com/how_to/set_shapes#cylinder-or-cone
          */
         MeshBuilder.CreateCylinder = function (name, options, scene) {
             var cylinder = new BABYLON.Mesh(name, scene);
@@ -70168,13 +70196,13 @@ var BABYLON;
          * * The parameter `thickness` sets the diameter size of the tube of the torus (float, default 0.5)
          * * The parameter `tessellation` sets the number of torus sides (postive integer, default 16)
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created.
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the torus mesh
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#torus
+         * @see https://doc.babylonjs.com/how_to/set_shapes#torus
          */
         MeshBuilder.CreateTorus = function (name, options, scene) {
             var torus = new BABYLON.Mesh(name, scene);
@@ -70191,13 +70219,13 @@ var BABYLON;
          * * The parameter `tubularSegments` sets the number of tubes to decompose the knot into (positive integer, default 32)
          * * The parameters `p` and `q` are the number of windings on each axis (positive integers, default 2 and 3)
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created.
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the torus knot mesh
-         * @see  http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#torus-knot
+         * @see  https://doc.babylonjs.com/how_to/set_shapes#torus-knot
          */
         MeshBuilder.CreateTorusKnot = function (name, options, scene) {
             var torusKnot = new BABYLON.Mesh(name, scene);
@@ -70215,10 +70243,10 @@ var BABYLON;
          * * The optional parameter `instance` is an instance of an existing LineSystem object to be updated with the passed `lines` parameter
          * * The optional parameter `colors` is an array of line colors, each line colors being an array of successive Color4, one per line point
          * * The optional parameter `useVertexAlpha` is to be set to `false` (default `true`) when you don't need the alpha blending (faster)
-         * * Updating a simple Line mesh, you just need to update every line in the `lines` array : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#lines-and-dashedlines
+         * * Updating a simple Line mesh, you just need to update every line in the `lines` array : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#lines-and-dashedlines
          * * When updating an instance, remember that only line point positions can change, not the number of points, neither the number of lines
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#line-system
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#line-system
          * @param name defines the name of the new line system
          * @param options defines the options used to create the line system
          * @param scene defines the hosting scene
@@ -70272,12 +70300,12 @@ var BABYLON;
          * A line mesh is considered as a parametric shape since it has no predefined original shape. Its shape is determined by the passed array of points as an input parameter
          * * Like every other parametric shape, it is dynamically updatable by passing an existing instance of LineMesh to this static function
          * * The parameter `points` is an array successive Vector3
-         * * The optional parameter `instance` is an instance of an existing LineMesh object to be updated with the passed `points` parameter : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#lines-and-dashedlines
+         * * The optional parameter `instance` is an instance of an existing LineMesh object to be updated with the passed `points` parameter : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#lines-and-dashedlines
          * * The optional parameter `colors` is an array of successive Color4, one per line point
          * * The optional parameter `useVertexAlpha` is to be set to `false` (default `true`) when you don't need alpha blending (faster)
          * * When updating an instance, remember that only point positions can change, not the number of points
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#lines
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#lines
          * @param name defines the name of the new line system
          * @param options defines the options used to create the line system
          * @param scene defines the hosting scene
@@ -70297,14 +70325,14 @@ var BABYLON;
          * * The parameter `dashNb` is the intended total number of dashes (positive integer, default 200)
          * * The parameter `dashSize` is the size of the dashes relatively the dash number (positive float, default 3)
          * * The parameter `gapSize` is the size of the gap between two successive dashes relatively the dash number (positive float, default 1)
-         * * The optional parameter `instance` is an instance of an existing LineMesh object to be updated with the passed `points` parameter : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#lines-and-dashedlines
+         * * The optional parameter `instance` is an instance of an existing LineMesh object to be updated with the passed `points` parameter : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#lines-and-dashedlines
          * * When updating an instance, remember that only point positions can change, not the number of points
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the dashed line mesh
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#dashed-lines
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#dashed-lines
          */
         MeshBuilder.CreateDashedLines = function (name, options, scene) {
             if (scene === void 0) { scene = null; }
@@ -70375,19 +70403,18 @@ var BABYLON;
          * * The parameter `rotation` (float, default 0 radians) is the angle value to rotate the shape each step (each path point), from the former step (so rotation added each step) along the curve.
          * * The parameter `scale` (float, default 1) is the value to scale the shape.
          * * The parameter `cap` sets the way the extruded shape is capped. Possible values : BABYLON.Mesh.NO_CAP (default), BABYLON.Mesh.CAP_START, BABYLON.Mesh.CAP_END, BABYLON.Mesh.CAP_ALL
-         * * The optional parameter `instance` is an instance of an existing ExtrudedShape object to be updated with the passed `shape`, `path`, `scale` or `rotation` parameters : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#extruded-shape
+         * * The optional parameter `instance` is an instance of an existing ExtrudedShape object to be updated with the passed `shape`, `path`, `scale` or `rotation` parameters : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#extruded-shape
          * * Remember you can only change the shape or path point positions, not their number when updating an extruded shape.
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The optional parameter `invertUV` (boolean, default false) swaps in the geometry the U and V coordinates to apply a texture.
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created.
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the extruded shape mesh
-         * @see http://doc.babylonjs.com/tutorials/Parametric_Shapes
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
          */
         MeshBuilder.ExtrudeShape = function (name, options, scene) {
             if (scene === void 0) { scene = null; }
@@ -70414,19 +70441,19 @@ var BABYLON;
          * * The parameter `ribbonClosePath` (boolean, default false) forces the extrusion underlying ribbon to close all the paths in its `pathArray`
          * * The parameter `ribbonCloseArray` (boolean, default false) forces the extrusion underlying ribbon to close its `pathArray`
          * * The parameter `cap` sets the way the extruded shape is capped. Possible values : BABYLON.Mesh.NO_CAP (default), BABYLON.Mesh.CAP_START, BABYLON.Mesh.CAP_END, BABYLON.Mesh.CAP_ALL
-         * * The optional parameter `instance` is an instance of an existing ExtrudedShape object to be updated with the passed `shape`, `path`, `scale` or `rotation` parameters : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#extruded-shape
+         * * The optional parameter `instance` is an instance of an existing ExtrudedShape object to be updated with the passed `shape`, `path`, `scale` or `rotation` parameters : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#extruded-shape
          * * Remember you can only change the shape or path point positions, not their number when updating an extruded shape
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The optional parameter `invertUV` (boolean, default false) swaps in the geometry the U and V coordinates to apply a texture
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the custom extruded shape mesh
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#custom-extruded-shapes
-         * @see http://doc.babylonjs.com/tutorials/Parametric_Shapes
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#custom-extruded-shapes
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
          */
         MeshBuilder.ExtrudeShapeCustom = function (name, options, scene) {
             var path = options.path;
@@ -70453,14 +70480,14 @@ var BABYLON;
          * * The parameter `closed` (boolean, default true) opens/closes the lathe circumference. This should be set to false when used with the parameter "arc"
          * * The parameter `cap` sets the way the extruded shape is capped. Possible values : BABYLON.Mesh.NO_CAP (default), BABYLON.Mesh.CAP_START, BABYLON.Mesh.CAP_END, BABYLON.Mesh.CAP_ALL
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The optional parameter `invertUV` (boolean, default false) swaps in the geometry the U and V coordinates to apply a texture
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the lathe mesh
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#lathe
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#lathe
          */
         MeshBuilder.CreateLathe = function (name, options, scene) {
             var arc = options.arc ? ((options.arc <= 0 || options.arc > 1) ? 1.0 : options.arc) : 1.0;
@@ -70506,13 +70533,13 @@ var BABYLON;
          * * You can set some different plane dimensions by using the parameters `width` and `height` (both by default have the same value of `size`)
          * * The parameter `sourcePlane` is a Plane instance. It builds a mesh plane from a Math plane
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the plane mesh
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#plane
+         * @see https://doc.babylonjs.com/how_to/set_shapes#plane
          */
         MeshBuilder.CreatePlane = function (name, options, scene) {
             var plane = new BABYLON.Mesh(name, scene);
@@ -70539,7 +70566,7 @@ var BABYLON;
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the ground mesh
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#plane
+         * @see https://doc.babylonjs.com/how_to/set_shapes#ground
          */
         MeshBuilder.CreateGround = function (name, options, scene) {
             var ground = new BABYLON.GroundMesh(name, scene);
@@ -70568,7 +70595,7 @@ var BABYLON;
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the tiled ground mesh
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#tiled-ground
+         * @see https://doc.babylonjs.com/how_to/set_shapes#tiled-ground
          */
         MeshBuilder.CreateTiledGround = function (name, options, scene) {
             var tiledGround = new BABYLON.Mesh(name, scene);
@@ -70592,8 +70619,8 @@ var BABYLON;
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the ground mesh
-         * @see http://doc.babylonjs.com/babylon101/height_map
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#ground-from-a-height-map
+         * @see https://doc.babylonjs.com/babylon101/height_map
+         * @see https://doc.babylonjs.com/how_to/set_shapes#ground-from-a-height-map
          */
         MeshBuilder.CreateGroundFromHeightMap = function (name, url, options, scene) {
             var width = options.width || 10.0;
@@ -70694,7 +70721,7 @@ var BABYLON;
         /**
          * Creates an extruded polygon mesh, with depth in the Y direction.
          * * You can set different colors and different images to the top, bottom and extruded side by using the parameters `faceColors` (an array of 3 Color3 elements) and `faceUV` (an array of 3 Vector4 elements)
-         * @see http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors
+         * @see https://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
@@ -70713,17 +70740,17 @@ var BABYLON;
          * * This function is called on each point of the tube path and is passed the index `i` of the i-th point and the distance of this point from the first point of the path. It must return a radius value (positive float)
          * * The parameter `arc` (positive float, maximum 1, default 1) is the ratio to apply to the tube circumference : 2 x PI x arc
          * * The parameter `cap` sets the way the extruded shape is capped. Possible values : BABYLON.Mesh.NO_CAP (default), BABYLON.Mesh.CAP_START, BABYLON.Mesh.CAP_END, BABYLON.Mesh.CAP_ALL
-         * * The optional parameter `instance` is an instance of an existing Tube object to be updated with the passed `pathArray` parameter : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#tube
+         * * The optional parameter `instance` is an instance of an existing Tube object to be updated with the passed `pathArray` parameter : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#tube
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The optional parameter `invertUV` (boolean, default false) swaps in the geometry the U and V coordinates to apply a texture
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the tube mesh
-         * @see http://doc.babylonjs.com/tutorials/Parametric_Shapes
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#tube
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes
+         * @see https://doc.babylonjs.com/how_to/set_shapes#tube
          */
         MeshBuilder.CreateTube = function (name, options, scene) {
             var path = options.path;
@@ -70838,16 +70865,16 @@ var BABYLON;
          * * You can build other polyhedron types than the 15 embbeded ones by setting the parameter `custom` (`polyhedronObject`, default null). If you set the parameter `custom`, this overwrittes the parameter `type`
          * * A `polyhedronObject` is a formatted javascript object. You'll find a full file with pre-set polyhedra here : https://github.com/BabylonJS/Extensions/tree/master/Polyhedron
          * * You can set the color and the UV of each side of the polyhedron with the parameters `faceColors` (Color4, default `(1, 1, 1, 1)`) and faceUV (Vector4, default `(0, 0, 1, 1)`)
-         * * To understand how to set `faceUV` or `faceColors`, please read this by considering the right number of faces of your polyhedron, instead of only 6 for the box : http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors
+         * * To understand how to set `faceUV` or `faceColors`, please read this by considering the right number of faces of your polyhedron, instead of only 6 for the box : https://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors
          * * The parameter `flat` (boolean, default true). If set to false, it gives the polyhedron a single global face, so less vertices and shared normals. In this case, `faceColors` and `faceUV` are ignored
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the polyhedron mesh
-         * @see http://doc.babylonjs.com/how_to/polyhedra_shapes
+         * @see https://doc.babylonjs.com/how_to/polyhedra_shapes
          */
         MeshBuilder.CreatePolyhedron = function (name, options, scene) {
             var polyhedron = new BABYLON.Mesh(name, scene);
@@ -70869,7 +70896,7 @@ var BABYLON;
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the decal mesh
-         * @see http://doc.babylonjs.com/how_to/decals
+         * @see https://doc.babylonjs.com/how_to/decals
          */
         MeshBuilder.CreateDecal = function (name, sourceMesh, options) {
             var indices = sourceMesh.getIndices();
@@ -76859,7 +76886,7 @@ var BABYLON;
          * Creates a ShadowGenerator object.
          * A ShadowGenerator is the required tool to use the shadows.
          * Each light casting shadows needs to use its own ShadowGenerator.
-         * Documentation : http://doc.babylonjs.com/tutorials/shadows
+         * Documentation : https://doc.babylonjs.com/babylon101/shadows
          * @param mapSize The size of the texture what stores the shadows. Example : 1024.
          * @param light The light object generating the shadows.
          * @param useFullFloatFirst By default the generator will try to use half float textures but if you need precision (for self shadowing for instance), you can use this option to enforce full float texture.
@@ -109926,40 +109953,40 @@ var BABYLON;
             this._onResize = function (evt) {
                 VirtualJoystick.vjCanvasWidth = window.innerWidth;
                 VirtualJoystick.vjCanvasHeight = window.innerHeight;
-                if (VirtualJoystick.vjCanvas) {
-                    VirtualJoystick.vjCanvas.width = VirtualJoystick.vjCanvasWidth;
-                    VirtualJoystick.vjCanvas.height = VirtualJoystick.vjCanvasHeight;
+                if (VirtualJoystick.Canvas) {
+                    VirtualJoystick.Canvas.width = VirtualJoystick.vjCanvasWidth;
+                    VirtualJoystick.Canvas.height = VirtualJoystick.vjCanvasHeight;
                 }
                 VirtualJoystick.halfWidth = VirtualJoystick.vjCanvasWidth / 2;
             };
             // injecting a canvas element on top of the canvas 3D game
-            if (!VirtualJoystick.vjCanvas) {
+            if (!VirtualJoystick.Canvas) {
                 window.addEventListener("resize", this._onResize, false);
-                VirtualJoystick.vjCanvas = document.createElement("canvas");
+                VirtualJoystick.Canvas = document.createElement("canvas");
                 VirtualJoystick.vjCanvasWidth = window.innerWidth;
                 VirtualJoystick.vjCanvasHeight = window.innerHeight;
-                VirtualJoystick.vjCanvas.width = window.innerWidth;
-                VirtualJoystick.vjCanvas.height = window.innerHeight;
-                VirtualJoystick.vjCanvas.style.width = "100%";
-                VirtualJoystick.vjCanvas.style.height = "100%";
-                VirtualJoystick.vjCanvas.style.position = "absolute";
-                VirtualJoystick.vjCanvas.style.backgroundColor = "transparent";
-                VirtualJoystick.vjCanvas.style.top = "0px";
-                VirtualJoystick.vjCanvas.style.left = "0px";
-                VirtualJoystick.vjCanvas.style.zIndex = "5";
-                VirtualJoystick.vjCanvas.style.msTouchAction = "none";
+                VirtualJoystick.Canvas.width = window.innerWidth;
+                VirtualJoystick.Canvas.height = window.innerHeight;
+                VirtualJoystick.Canvas.style.width = "100%";
+                VirtualJoystick.Canvas.style.height = "100%";
+                VirtualJoystick.Canvas.style.position = "absolute";
+                VirtualJoystick.Canvas.style.backgroundColor = "transparent";
+                VirtualJoystick.Canvas.style.top = "0px";
+                VirtualJoystick.Canvas.style.left = "0px";
+                VirtualJoystick.Canvas.style.zIndex = "5";
+                VirtualJoystick.Canvas.style.msTouchAction = "none";
                 // Support for jQuery PEP polyfill
-                VirtualJoystick.vjCanvas.setAttribute("touch-action", "none");
-                var context = VirtualJoystick.vjCanvas.getContext('2d');
+                VirtualJoystick.Canvas.setAttribute("touch-action", "none");
+                var context = VirtualJoystick.Canvas.getContext('2d');
                 if (!context) {
                     throw new Error("Unable to create canvas for virtual joystick");
                 }
                 VirtualJoystick.vjCanvasContext = context;
                 VirtualJoystick.vjCanvasContext.strokeStyle = "#ffffff";
                 VirtualJoystick.vjCanvasContext.lineWidth = 2;
-                document.body.appendChild(VirtualJoystick.vjCanvas);
+                document.body.appendChild(VirtualJoystick.Canvas);
             }
-            VirtualJoystick.halfWidth = VirtualJoystick.vjCanvas.width / 2;
+            VirtualJoystick.halfWidth = VirtualJoystick.Canvas.width / 2;
             this.pressed = false;
             // default joystick color
             this._joystickColor = "cyan";
@@ -109979,11 +110006,11 @@ var BABYLON;
             this._onPointerUpHandlerRef = function (evt) {
                 _this._onPointerUp(evt);
             };
-            VirtualJoystick.vjCanvas.addEventListener('pointerdown', this._onPointerDownHandlerRef, false);
-            VirtualJoystick.vjCanvas.addEventListener('pointermove', this._onPointerMoveHandlerRef, false);
-            VirtualJoystick.vjCanvas.addEventListener('pointerup', this._onPointerUpHandlerRef, false);
-            VirtualJoystick.vjCanvas.addEventListener('pointerout', this._onPointerUpHandlerRef, false);
-            VirtualJoystick.vjCanvas.addEventListener("contextmenu", function (evt) {
+            VirtualJoystick.Canvas.addEventListener('pointerdown', this._onPointerDownHandlerRef, false);
+            VirtualJoystick.Canvas.addEventListener('pointermove', this._onPointerMoveHandlerRef, false);
+            VirtualJoystick.Canvas.addEventListener('pointerup', this._onPointerUpHandlerRef, false);
+            VirtualJoystick.Canvas.addEventListener('pointerout', this._onPointerUpHandlerRef, false);
+            VirtualJoystick.Canvas.addEventListener("contextmenu", function (evt) {
                 evt.preventDefault(); // Disables system menu
             }, false);
             requestAnimationFrame(function () { _this._drawVirtualJoystick(); });
@@ -110177,14 +110204,14 @@ var BABYLON;
          * Release internal HTML canvas
          */
         VirtualJoystick.prototype.releaseCanvas = function () {
-            if (VirtualJoystick.vjCanvas) {
-                VirtualJoystick.vjCanvas.removeEventListener('pointerdown', this._onPointerDownHandlerRef);
-                VirtualJoystick.vjCanvas.removeEventListener('pointermove', this._onPointerMoveHandlerRef);
-                VirtualJoystick.vjCanvas.removeEventListener('pointerup', this._onPointerUpHandlerRef);
-                VirtualJoystick.vjCanvas.removeEventListener('pointerout', this._onPointerUpHandlerRef);
+            if (VirtualJoystick.Canvas) {
+                VirtualJoystick.Canvas.removeEventListener('pointerdown', this._onPointerDownHandlerRef);
+                VirtualJoystick.Canvas.removeEventListener('pointermove', this._onPointerMoveHandlerRef);
+                VirtualJoystick.Canvas.removeEventListener('pointerup', this._onPointerUpHandlerRef);
+                VirtualJoystick.Canvas.removeEventListener('pointerout', this._onPointerUpHandlerRef);
                 window.removeEventListener("resize", this._onResize);
-                document.body.removeChild(VirtualJoystick.vjCanvas);
-                VirtualJoystick.vjCanvas = null;
+                document.body.removeChild(VirtualJoystick.Canvas);
+                VirtualJoystick.Canvas = null;
             }
         };
         // Used to draw the virtual joystick inside a 2D canvas on top of the WebGL rendering canvas

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

@@ -9823,7 +9823,7 @@ var BABYLON;
         /**
         * new Path3D(path, normal, raw)
         * Creates a Path3D. A Path3D is a logical math object, so not a mesh.
-        * please read the description in the tutorial :  http://doc.babylonjs.com/tutorials/How_to_use_Path3D
+        * please read the description in the tutorial : https://doc.babylonjs.com/how_to/how_to_use_path3d
         * @param path an array of Vector3, the curve axis of the Path3D
         * @param normal (options) Vector3, the first wanted normal to the curve. Ex (0, 1, 0) for a vertical normal.
         * @param raw (optional, default false) : boolean, if true the returned Path3D isn't normalized. Useful to depict path acceleration or speed.
@@ -10016,7 +10016,7 @@ var BABYLON;
         /**
          * A Curve3 object is a logical object, so not a mesh, to handle curves in the 3D geometric space.
          * A Curve3 is designed from a series of successive Vector3.
-         * Tuto : http://doc.babylonjs.com/tutorials/How_to_use_Curve3#curve3-object
+         * Tuto : https://doc.babylonjs.com/how_to/how_to_use_curve3#curve3-object
          * @param points points which make up the curve
          */
         function Curve3(points) {
@@ -10025,7 +10025,7 @@ var BABYLON;
             this._length = this._computeLength(points);
         }
         /**
-         * Returns a Curve3 object along a Quadratic Bezier curve : http://doc.babylonjs.com/tutorials/How_to_use_Curve3#quadratic-bezier-curve
+         * Returns a Curve3 object along a Quadratic Bezier curve : https://doc.babylonjs.com/how_to/how_to_use_curve3#quadratic-bezier-curve
          * @param v0 (Vector3) the origin point of the Quadratic Bezier
          * @param v1 (Vector3) the control point
          * @param v2 (Vector3) the end point of the Quadratic Bezier
@@ -10045,7 +10045,7 @@ var BABYLON;
             return new Curve3(bez);
         };
         /**
-         * Returns a Curve3 object along a Cubic Bezier curve : http://doc.babylonjs.com/tutorials/How_to_use_Curve3#cubic-bezier-curve
+         * Returns a Curve3 object along a Cubic Bezier curve : https://doc.babylonjs.com/how_to/how_to_use_curve3#cubic-bezier-curve
          * @param v0 (Vector3) the origin point of the Cubic Bezier
          * @param v1 (Vector3) the first control point
          * @param v2 (Vector3) the second control point
@@ -10066,7 +10066,7 @@ var BABYLON;
             return new Curve3(bez);
         };
         /**
-         * Returns a Curve3 object along a Hermite Spline curve : http://doc.babylonjs.com/tutorials/How_to_use_Curve3#hermite-spline
+         * Returns a Curve3 object along a Hermite Spline curve : https://doc.babylonjs.com/how_to/how_to_use_curve3#hermite-spline
          * @param p1 (Vector3) the origin point of the Hermite Spline
          * @param t1 (Vector3) the tangent vector at the origin point
          * @param p2 (Vector3) the end point of the Hermite Spline
@@ -20479,6 +20479,34 @@ var BABYLON;
                 this.rotation.y = yaw + yawCor;
                 this.rotation.z = rollCor;
             }
+            // Correct for parent's rotation offset
+            if (space === BABYLON.Space.WORLD && this.parent) {
+                if (this.rotationQuaternion) {
+                    // Get local rotation matrix of the looking object
+                    var rotationMatrix = BABYLON.Tmp.Matrix[0];
+                    this.rotationQuaternion.toRotationMatrix(rotationMatrix);
+                    // Offset rotation by parent's inverted rotation matrix to correct in world space
+                    var parentRotationMatrix = BABYLON.Tmp.Matrix[1];
+                    this.parent.getWorldMatrix().getRotationMatrixToRef(parentRotationMatrix);
+                    parentRotationMatrix.invert();
+                    rotationMatrix.multiplyToRef(parentRotationMatrix, rotationMatrix);
+                    this.rotationQuaternion.fromRotationMatrix(rotationMatrix);
+                }
+                else {
+                    // Get local rotation matrix of the looking object
+                    var quaternionRotation = BABYLON.Tmp.Quaternion[0];
+                    BABYLON.Quaternion.FromEulerVectorToRef(this.rotation, quaternionRotation);
+                    var rotationMatrix = BABYLON.Tmp.Matrix[0];
+                    quaternionRotation.toRotationMatrix(rotationMatrix);
+                    // Offset rotation by parent's inverted rotation matrix to correct in world space
+                    var parentRotationMatrix = BABYLON.Tmp.Matrix[1];
+                    this.parent.getWorldMatrix().getRotationMatrixToRef(parentRotationMatrix);
+                    parentRotationMatrix.invert();
+                    rotationMatrix.multiplyToRef(parentRotationMatrix, rotationMatrix);
+                    quaternionRotation.fromRotationMatrix(rotationMatrix);
+                    quaternionRotation.toEulerAnglesToRef(this.rotation);
+                }
+            }
             return this;
         };
         /**
@@ -22980,7 +23008,7 @@ var BABYLON;
         __extends(Light, _super);
         /**
          * Creates a Light object in the scene.
-         * Documentation : http://doc.babylonjs.com/tutorials/lights
+         * Documentation : https://doc.babylonjs.com/babylon101/lights
          * @param name The firendly name of the light
          * @param scene The scene the light belongs too
          */
@@ -35835,7 +35863,7 @@ var BABYLON;
           * * You can build other polyhedron types than the 15 embbeded ones by setting the parameter `custom` (`polyhedronObject`, default null). If you set the parameter `custom`, this overwrittes the parameter `type`
           * * A `polyhedronObject` is a formatted javascript object. You'll find a full file with pre-set polyhedra here : https://github.com/BabylonJS/Extensions/tree/master/Polyhedron
           * * You can set the color and the UV of each side of the polyhedron with the parameters `faceColors` (Color4, default `(1, 1, 1, 1)`) and faceUV (Vector4, default `(0, 0, 1, 1)`)
-          * * To understand how to set `faceUV` or `faceColors`, please read this by considering the right number of faces of your polyhedron, instead of only 6 for the box : http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors
+          * * To understand how to set `faceUV` or `faceColors`, please read this by considering the right number of faces of your polyhedron, instead of only 6 for the box : https://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors
           * * The parameter `flat` (boolean, default true). If set to false, it gives the polyhedron a single global face, so less vertices and shared normals. In this case, `faceColors` and `faceUV` are ignored
           * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
           * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
@@ -52693,7 +52721,7 @@ var BABYLON;
          * Creates a HemisphericLight object in the scene according to the passed direction (Vector3).
          * The HemisphericLight simulates the ambient environment light, so the passed direction is the light reflection direction, not the incoming direction.
          * The HemisphericLight can't cast shadows.
-         * Documentation : http://doc.babylonjs.com/tutorials/lights
+         * Documentation : https://doc.babylonjs.com/babylon101/lights
          * @param name The friendly name of the light
          * @param direction The direction of the light reflection
          * @param scene The scene the light belongs to
@@ -53084,7 +53112,7 @@ var BABYLON;
          * ```javascript
          * var pointLight = new BABYLON.PointLight("pl", camera.position, scene);
          * ```
-         * Documentation : http://doc.babylonjs.com/tutorials/lights
+         * Documentation : https://doc.babylonjs.com/babylon101/lights
          * @param name The light friendly name
          * @param position The position of the point light in the scene
          * @param scene The scene the lights belongs to
@@ -53267,7 +53295,7 @@ var BABYLON;
          * Creates a DirectionalLight object in the scene, oriented towards the passed direction (Vector3).
          * The directional light is emitted from everywhere in the given direction.
          * It can cast shadows.
-         * Documentation : http://doc.babylonjs.com/tutorials/lights
+         * Documentation : https://doc.babylonjs.com/babylon101/lights
          * @param name The friendly name of the light
          * @param direction The direction of the light
          * @param scene The scene the light belongs to
@@ -53500,7 +53528,7 @@ var BABYLON;
         /**
          * Creates a SpotLight object in the scene. A spot light is a simply light oriented cone.
          * It can cast shadows.
-         * Documentation : http://doc.babylonjs.com/tutorials/lights
+         * Documentation : https://doc.babylonjs.com/babylon101/lights
          * @param name The light friendly name
          * @param position The position of the spot light in the scene
          * @param direction The direction of the light in the scene
@@ -69868,11 +69896,11 @@ var BABYLON;
          * * The parameter `size` sets the size (float) of each box side (default 1)
          * * You can set some different box dimensions by using the parameters `width`, `height` and `depth` (all by default have the same value of `size`)
          * * You can set different colors and different images to each box side by using the parameters `faceColors` (an array of 6 Color3 elements) and `faceUV` (an array of 6 Vector4 elements)
-         * * Please read this tutorial : http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors
+         * * Please read this tutorial : https://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#box
+         * @see https://doc.babylonjs.com/how_to/set_shapes#box
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
@@ -69895,13 +69923,13 @@ var BABYLON;
          * * You can create an unclosed sphere with the parameter `arc` (positive float, default 1), valued between 0 and 1, what is the ratio of the circumference (latitude) : 2 x PI x ratio
          * * You can create an unclosed sphere on its height with the parameter `slice` (positive float, default1), valued between 0 and 1, what is the height ratio (longitude)
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the sphere mesh
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#sphere
+         * @see https://doc.babylonjs.com/how_to/set_shapes#sphere
          */
         MeshBuilder.CreateSphere = function (name, options, scene) {
             var sphere = new BABYLON.Mesh(name, scene);
@@ -69917,13 +69945,13 @@ var BABYLON;
          * * The parameter `tessellation` sets the number of polygon sides (positive integer, default 64). So a tessellation valued to 3 will build a triangle, to 4 a square, etc
          * * You can create an unclosed polygon with the parameter `arc` (positive float, default 1), valued between 0 and 1, what is the ratio of the circumference : 2 x PI x ratio
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the plane polygonal mesh
-         * @see http://doc.babylonjs.com/how_to/set_shapes#disc-or-regular-polygon
+         * @see https://doc.babylonjs.com/how_to/set_shapes#disc-or-regular-polygon
          */
         MeshBuilder.CreateDisc = function (name, options, scene) {
             if (scene === void 0) { scene = null; }
@@ -69941,13 +69969,13 @@ var BABYLON;
          * * The parameter `subdivisions` sets the number of subdivisions (postive integer, default 4). The more subdivisions, the more faces on the icosphere whatever its size
          * * The parameter `flat` (boolean, default true) gives each side its own normals. Set it to false to get a smooth continuous light reflection on the surface
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the icosahedron mesh
-         * @see http://doc.babylonjs.com/how_to/polyhedra_shapes#icosphere
+         * @see https://doc.babylonjs.com/how_to/polyhedra_shapes#icosphere
          */
         MeshBuilder.CreateIcoSphere = function (name, options, scene) {
             var sphere = new BABYLON.Mesh(name, scene);
@@ -69964,9 +69992,9 @@ var BABYLON;
          * * The parameter `closePath` (boolean, default false) creates a seam between the first and the last points of each path of the path array
          * * The parameter `offset` (positive integer, default : rounded half size of the pathArray length), is taken in account only if the `pathArray` is containing a single path
          * * It's the offset to join the points from the same path. Ex : offset = 10 means the point 1 is joined to the point 11
-         * * The optional parameter `instance` is an instance of an existing Ribbon object to be updated with the passed `pathArray` parameter : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#ribbon
+         * * The optional parameter `instance` is an instance of an existing Ribbon object to be updated with the passed `pathArray` parameter : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#ribbon
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The optional parameter `invertUV` (boolean, default false) swaps in the geometry the U and V coordinates to apply a texture
          * * The parameter `uvs` is an optional flat array of `Vector2` to update/set each ribbon vertex with its own custom UV values instead of the computed ones
          * * The parameters `colors` is an optional flat array of `Color4` to set/update each ribbon vertex with its own custom color values
@@ -69977,8 +70005,8 @@ var BABYLON;
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the ribbon mesh
-         * @see http://doc.babylonjs.com/tutorials/Ribbon_Tutorial
-         * @see http://doc.babylonjs.com/tutorials/Parametric_Shapes
+         * @see https://doc.babylonjs.com/how_to/ribbon_tutorial
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes
          */
         MeshBuilder.CreateRibbon = function (name, options, scene) {
             if (scene === void 0) { scene = null; }
@@ -70111,15 +70139,15 @@ var BABYLON;
          * * Each array (color or UVs) is always ordered the same way : the first element is the bottom cap, the last element is the top cap. The other elements are each a ring surface.
          * * If `enclose` is false, a ring surface is one element.
          * * If `enclose` is true, a ring surface is 3 successive elements in the array : the tubular surface, then the two closing faces.
-         * * Example how to set colors and textures on a sliced cylinder : http://www.html5gamedevs.com/topic/17945-creating-a-closed-slice-of-a-cylinder/#comment-106379
+         * * Example how to set colors and textures on a sliced cylinder : https://www.html5gamedevs.com/topic/17945-creating-a-closed-slice-of-a-cylinder/#comment-106379
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created.
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the cylinder mesh
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#cylinder-or-cone
+         * @see https://doc.babylonjs.com/how_to/set_shapes#cylinder-or-cone
          */
         MeshBuilder.CreateCylinder = function (name, options, scene) {
             var cylinder = new BABYLON.Mesh(name, scene);
@@ -70135,13 +70163,13 @@ var BABYLON;
          * * The parameter `thickness` sets the diameter size of the tube of the torus (float, default 0.5)
          * * The parameter `tessellation` sets the number of torus sides (postive integer, default 16)
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created.
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the torus mesh
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#torus
+         * @see https://doc.babylonjs.com/how_to/set_shapes#torus
          */
         MeshBuilder.CreateTorus = function (name, options, scene) {
             var torus = new BABYLON.Mesh(name, scene);
@@ -70158,13 +70186,13 @@ var BABYLON;
          * * The parameter `tubularSegments` sets the number of tubes to decompose the knot into (positive integer, default 32)
          * * The parameters `p` and `q` are the number of windings on each axis (positive integers, default 2 and 3)
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created.
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the torus knot mesh
-         * @see  http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#torus-knot
+         * @see  https://doc.babylonjs.com/how_to/set_shapes#torus-knot
          */
         MeshBuilder.CreateTorusKnot = function (name, options, scene) {
             var torusKnot = new BABYLON.Mesh(name, scene);
@@ -70182,10 +70210,10 @@ var BABYLON;
          * * The optional parameter `instance` is an instance of an existing LineSystem object to be updated with the passed `lines` parameter
          * * The optional parameter `colors` is an array of line colors, each line colors being an array of successive Color4, one per line point
          * * The optional parameter `useVertexAlpha` is to be set to `false` (default `true`) when you don't need the alpha blending (faster)
-         * * Updating a simple Line mesh, you just need to update every line in the `lines` array : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#lines-and-dashedlines
+         * * Updating a simple Line mesh, you just need to update every line in the `lines` array : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#lines-and-dashedlines
          * * When updating an instance, remember that only line point positions can change, not the number of points, neither the number of lines
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#line-system
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#line-system
          * @param name defines the name of the new line system
          * @param options defines the options used to create the line system
          * @param scene defines the hosting scene
@@ -70239,12 +70267,12 @@ var BABYLON;
          * A line mesh is considered as a parametric shape since it has no predefined original shape. Its shape is determined by the passed array of points as an input parameter
          * * Like every other parametric shape, it is dynamically updatable by passing an existing instance of LineMesh to this static function
          * * The parameter `points` is an array successive Vector3
-         * * The optional parameter `instance` is an instance of an existing LineMesh object to be updated with the passed `points` parameter : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#lines-and-dashedlines
+         * * The optional parameter `instance` is an instance of an existing LineMesh object to be updated with the passed `points` parameter : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#lines-and-dashedlines
          * * The optional parameter `colors` is an array of successive Color4, one per line point
          * * The optional parameter `useVertexAlpha` is to be set to `false` (default `true`) when you don't need alpha blending (faster)
          * * When updating an instance, remember that only point positions can change, not the number of points
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#lines
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#lines
          * @param name defines the name of the new line system
          * @param options defines the options used to create the line system
          * @param scene defines the hosting scene
@@ -70264,14 +70292,14 @@ var BABYLON;
          * * The parameter `dashNb` is the intended total number of dashes (positive integer, default 200)
          * * The parameter `dashSize` is the size of the dashes relatively the dash number (positive float, default 3)
          * * The parameter `gapSize` is the size of the gap between two successive dashes relatively the dash number (positive float, default 1)
-         * * The optional parameter `instance` is an instance of an existing LineMesh object to be updated with the passed `points` parameter : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#lines-and-dashedlines
+         * * The optional parameter `instance` is an instance of an existing LineMesh object to be updated with the passed `points` parameter : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#lines-and-dashedlines
          * * When updating an instance, remember that only point positions can change, not the number of points
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the dashed line mesh
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#dashed-lines
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#dashed-lines
          */
         MeshBuilder.CreateDashedLines = function (name, options, scene) {
             if (scene === void 0) { scene = null; }
@@ -70342,19 +70370,18 @@ var BABYLON;
          * * The parameter `rotation` (float, default 0 radians) is the angle value to rotate the shape each step (each path point), from the former step (so rotation added each step) along the curve.
          * * The parameter `scale` (float, default 1) is the value to scale the shape.
          * * The parameter `cap` sets the way the extruded shape is capped. Possible values : BABYLON.Mesh.NO_CAP (default), BABYLON.Mesh.CAP_START, BABYLON.Mesh.CAP_END, BABYLON.Mesh.CAP_ALL
-         * * The optional parameter `instance` is an instance of an existing ExtrudedShape object to be updated with the passed `shape`, `path`, `scale` or `rotation` parameters : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#extruded-shape
+         * * The optional parameter `instance` is an instance of an existing ExtrudedShape object to be updated with the passed `shape`, `path`, `scale` or `rotation` parameters : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#extruded-shape
          * * Remember you can only change the shape or path point positions, not their number when updating an extruded shape.
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The optional parameter `invertUV` (boolean, default false) swaps in the geometry the U and V coordinates to apply a texture.
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created.
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the extruded shape mesh
-         * @see http://doc.babylonjs.com/tutorials/Parametric_Shapes
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
          */
         MeshBuilder.ExtrudeShape = function (name, options, scene) {
             if (scene === void 0) { scene = null; }
@@ -70381,19 +70408,19 @@ var BABYLON;
          * * The parameter `ribbonClosePath` (boolean, default false) forces the extrusion underlying ribbon to close all the paths in its `pathArray`
          * * The parameter `ribbonCloseArray` (boolean, default false) forces the extrusion underlying ribbon to close its `pathArray`
          * * The parameter `cap` sets the way the extruded shape is capped. Possible values : BABYLON.Mesh.NO_CAP (default), BABYLON.Mesh.CAP_START, BABYLON.Mesh.CAP_END, BABYLON.Mesh.CAP_ALL
-         * * The optional parameter `instance` is an instance of an existing ExtrudedShape object to be updated with the passed `shape`, `path`, `scale` or `rotation` parameters : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#extruded-shape
+         * * The optional parameter `instance` is an instance of an existing ExtrudedShape object to be updated with the passed `shape`, `path`, `scale` or `rotation` parameters : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#extruded-shape
          * * Remember you can only change the shape or path point positions, not their number when updating an extruded shape
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The optional parameter `invertUV` (boolean, default false) swaps in the geometry the U and V coordinates to apply a texture
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the custom extruded shape mesh
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#custom-extruded-shapes
-         * @see http://doc.babylonjs.com/tutorials/Parametric_Shapes
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#custom-extruded-shapes
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
          */
         MeshBuilder.ExtrudeShapeCustom = function (name, options, scene) {
             var path = options.path;
@@ -70420,14 +70447,14 @@ var BABYLON;
          * * The parameter `closed` (boolean, default true) opens/closes the lathe circumference. This should be set to false when used with the parameter "arc"
          * * The parameter `cap` sets the way the extruded shape is capped. Possible values : BABYLON.Mesh.NO_CAP (default), BABYLON.Mesh.CAP_START, BABYLON.Mesh.CAP_END, BABYLON.Mesh.CAP_ALL
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The optional parameter `invertUV` (boolean, default false) swaps in the geometry the U and V coordinates to apply a texture
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the lathe mesh
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#lathe
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#lathe
          */
         MeshBuilder.CreateLathe = function (name, options, scene) {
             var arc = options.arc ? ((options.arc <= 0 || options.arc > 1) ? 1.0 : options.arc) : 1.0;
@@ -70473,13 +70500,13 @@ var BABYLON;
          * * You can set some different plane dimensions by using the parameters `width` and `height` (both by default have the same value of `size`)
          * * The parameter `sourcePlane` is a Plane instance. It builds a mesh plane from a Math plane
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the plane mesh
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#plane
+         * @see https://doc.babylonjs.com/how_to/set_shapes#plane
          */
         MeshBuilder.CreatePlane = function (name, options, scene) {
             var plane = new BABYLON.Mesh(name, scene);
@@ -70506,7 +70533,7 @@ var BABYLON;
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the ground mesh
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#plane
+         * @see https://doc.babylonjs.com/how_to/set_shapes#ground
          */
         MeshBuilder.CreateGround = function (name, options, scene) {
             var ground = new BABYLON.GroundMesh(name, scene);
@@ -70535,7 +70562,7 @@ var BABYLON;
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the tiled ground mesh
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#tiled-ground
+         * @see https://doc.babylonjs.com/how_to/set_shapes#tiled-ground
          */
         MeshBuilder.CreateTiledGround = function (name, options, scene) {
             var tiledGround = new BABYLON.Mesh(name, scene);
@@ -70559,8 +70586,8 @@ var BABYLON;
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the ground mesh
-         * @see http://doc.babylonjs.com/babylon101/height_map
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#ground-from-a-height-map
+         * @see https://doc.babylonjs.com/babylon101/height_map
+         * @see https://doc.babylonjs.com/how_to/set_shapes#ground-from-a-height-map
          */
         MeshBuilder.CreateGroundFromHeightMap = function (name, url, options, scene) {
             var width = options.width || 10.0;
@@ -70661,7 +70688,7 @@ var BABYLON;
         /**
          * Creates an extruded polygon mesh, with depth in the Y direction.
          * * You can set different colors and different images to the top, bottom and extruded side by using the parameters `faceColors` (an array of 3 Color3 elements) and `faceUV` (an array of 3 Vector4 elements)
-         * @see http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors
+         * @see https://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
@@ -70680,17 +70707,17 @@ var BABYLON;
          * * This function is called on each point of the tube path and is passed the index `i` of the i-th point and the distance of this point from the first point of the path. It must return a radius value (positive float)
          * * The parameter `arc` (positive float, maximum 1, default 1) is the ratio to apply to the tube circumference : 2 x PI x arc
          * * The parameter `cap` sets the way the extruded shape is capped. Possible values : BABYLON.Mesh.NO_CAP (default), BABYLON.Mesh.CAP_START, BABYLON.Mesh.CAP_END, BABYLON.Mesh.CAP_ALL
-         * * The optional parameter `instance` is an instance of an existing Tube object to be updated with the passed `pathArray` parameter : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#tube
+         * * The optional parameter `instance` is an instance of an existing Tube object to be updated with the passed `pathArray` parameter : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#tube
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The optional parameter `invertUV` (boolean, default false) swaps in the geometry the U and V coordinates to apply a texture
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the tube mesh
-         * @see http://doc.babylonjs.com/tutorials/Parametric_Shapes
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#tube
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes
+         * @see https://doc.babylonjs.com/how_to/set_shapes#tube
          */
         MeshBuilder.CreateTube = function (name, options, scene) {
             var path = options.path;
@@ -70805,16 +70832,16 @@ var BABYLON;
          * * You can build other polyhedron types than the 15 embbeded ones by setting the parameter `custom` (`polyhedronObject`, default null). If you set the parameter `custom`, this overwrittes the parameter `type`
          * * A `polyhedronObject` is a formatted javascript object. You'll find a full file with pre-set polyhedra here : https://github.com/BabylonJS/Extensions/tree/master/Polyhedron
          * * You can set the color and the UV of each side of the polyhedron with the parameters `faceColors` (Color4, default `(1, 1, 1, 1)`) and faceUV (Vector4, default `(0, 0, 1, 1)`)
-         * * To understand how to set `faceUV` or `faceColors`, please read this by considering the right number of faces of your polyhedron, instead of only 6 for the box : http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors
+         * * To understand how to set `faceUV` or `faceColors`, please read this by considering the right number of faces of your polyhedron, instead of only 6 for the box : https://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors
          * * The parameter `flat` (boolean, default true). If set to false, it gives the polyhedron a single global face, so less vertices and shared normals. In this case, `faceColors` and `faceUV` are ignored
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the polyhedron mesh
-         * @see http://doc.babylonjs.com/how_to/polyhedra_shapes
+         * @see https://doc.babylonjs.com/how_to/polyhedra_shapes
          */
         MeshBuilder.CreatePolyhedron = function (name, options, scene) {
             var polyhedron = new BABYLON.Mesh(name, scene);
@@ -70836,7 +70863,7 @@ var BABYLON;
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the decal mesh
-         * @see http://doc.babylonjs.com/how_to/decals
+         * @see https://doc.babylonjs.com/how_to/decals
          */
         MeshBuilder.CreateDecal = function (name, sourceMesh, options) {
             var indices = sourceMesh.getIndices();
@@ -76826,7 +76853,7 @@ var BABYLON;
          * Creates a ShadowGenerator object.
          * A ShadowGenerator is the required tool to use the shadows.
          * Each light casting shadows needs to use its own ShadowGenerator.
-         * Documentation : http://doc.babylonjs.com/tutorials/shadows
+         * Documentation : https://doc.babylonjs.com/babylon101/shadows
          * @param mapSize The size of the texture what stores the shadows. Example : 1024.
          * @param light The light object generating the shadows.
          * @param useFullFloatFirst By default the generator will try to use half float textures but if you need precision (for self shadowing for instance), you can use this option to enforce full float texture.
@@ -109893,40 +109920,40 @@ var BABYLON;
             this._onResize = function (evt) {
                 VirtualJoystick.vjCanvasWidth = window.innerWidth;
                 VirtualJoystick.vjCanvasHeight = window.innerHeight;
-                if (VirtualJoystick.vjCanvas) {
-                    VirtualJoystick.vjCanvas.width = VirtualJoystick.vjCanvasWidth;
-                    VirtualJoystick.vjCanvas.height = VirtualJoystick.vjCanvasHeight;
+                if (VirtualJoystick.Canvas) {
+                    VirtualJoystick.Canvas.width = VirtualJoystick.vjCanvasWidth;
+                    VirtualJoystick.Canvas.height = VirtualJoystick.vjCanvasHeight;
                 }
                 VirtualJoystick.halfWidth = VirtualJoystick.vjCanvasWidth / 2;
             };
             // injecting a canvas element on top of the canvas 3D game
-            if (!VirtualJoystick.vjCanvas) {
+            if (!VirtualJoystick.Canvas) {
                 window.addEventListener("resize", this._onResize, false);
-                VirtualJoystick.vjCanvas = document.createElement("canvas");
+                VirtualJoystick.Canvas = document.createElement("canvas");
                 VirtualJoystick.vjCanvasWidth = window.innerWidth;
                 VirtualJoystick.vjCanvasHeight = window.innerHeight;
-                VirtualJoystick.vjCanvas.width = window.innerWidth;
-                VirtualJoystick.vjCanvas.height = window.innerHeight;
-                VirtualJoystick.vjCanvas.style.width = "100%";
-                VirtualJoystick.vjCanvas.style.height = "100%";
-                VirtualJoystick.vjCanvas.style.position = "absolute";
-                VirtualJoystick.vjCanvas.style.backgroundColor = "transparent";
-                VirtualJoystick.vjCanvas.style.top = "0px";
-                VirtualJoystick.vjCanvas.style.left = "0px";
-                VirtualJoystick.vjCanvas.style.zIndex = "5";
-                VirtualJoystick.vjCanvas.style.msTouchAction = "none";
+                VirtualJoystick.Canvas.width = window.innerWidth;
+                VirtualJoystick.Canvas.height = window.innerHeight;
+                VirtualJoystick.Canvas.style.width = "100%";
+                VirtualJoystick.Canvas.style.height = "100%";
+                VirtualJoystick.Canvas.style.position = "absolute";
+                VirtualJoystick.Canvas.style.backgroundColor = "transparent";
+                VirtualJoystick.Canvas.style.top = "0px";
+                VirtualJoystick.Canvas.style.left = "0px";
+                VirtualJoystick.Canvas.style.zIndex = "5";
+                VirtualJoystick.Canvas.style.msTouchAction = "none";
                 // Support for jQuery PEP polyfill
-                VirtualJoystick.vjCanvas.setAttribute("touch-action", "none");
-                var context = VirtualJoystick.vjCanvas.getContext('2d');
+                VirtualJoystick.Canvas.setAttribute("touch-action", "none");
+                var context = VirtualJoystick.Canvas.getContext('2d');
                 if (!context) {
                     throw new Error("Unable to create canvas for virtual joystick");
                 }
                 VirtualJoystick.vjCanvasContext = context;
                 VirtualJoystick.vjCanvasContext.strokeStyle = "#ffffff";
                 VirtualJoystick.vjCanvasContext.lineWidth = 2;
-                document.body.appendChild(VirtualJoystick.vjCanvas);
+                document.body.appendChild(VirtualJoystick.Canvas);
             }
-            VirtualJoystick.halfWidth = VirtualJoystick.vjCanvas.width / 2;
+            VirtualJoystick.halfWidth = VirtualJoystick.Canvas.width / 2;
             this.pressed = false;
             // default joystick color
             this._joystickColor = "cyan";
@@ -109946,11 +109973,11 @@ var BABYLON;
             this._onPointerUpHandlerRef = function (evt) {
                 _this._onPointerUp(evt);
             };
-            VirtualJoystick.vjCanvas.addEventListener('pointerdown', this._onPointerDownHandlerRef, false);
-            VirtualJoystick.vjCanvas.addEventListener('pointermove', this._onPointerMoveHandlerRef, false);
-            VirtualJoystick.vjCanvas.addEventListener('pointerup', this._onPointerUpHandlerRef, false);
-            VirtualJoystick.vjCanvas.addEventListener('pointerout', this._onPointerUpHandlerRef, false);
-            VirtualJoystick.vjCanvas.addEventListener("contextmenu", function (evt) {
+            VirtualJoystick.Canvas.addEventListener('pointerdown', this._onPointerDownHandlerRef, false);
+            VirtualJoystick.Canvas.addEventListener('pointermove', this._onPointerMoveHandlerRef, false);
+            VirtualJoystick.Canvas.addEventListener('pointerup', this._onPointerUpHandlerRef, false);
+            VirtualJoystick.Canvas.addEventListener('pointerout', this._onPointerUpHandlerRef, false);
+            VirtualJoystick.Canvas.addEventListener("contextmenu", function (evt) {
                 evt.preventDefault(); // Disables system menu
             }, false);
             requestAnimationFrame(function () { _this._drawVirtualJoystick(); });
@@ -110144,14 +110171,14 @@ var BABYLON;
          * Release internal HTML canvas
          */
         VirtualJoystick.prototype.releaseCanvas = function () {
-            if (VirtualJoystick.vjCanvas) {
-                VirtualJoystick.vjCanvas.removeEventListener('pointerdown', this._onPointerDownHandlerRef);
-                VirtualJoystick.vjCanvas.removeEventListener('pointermove', this._onPointerMoveHandlerRef);
-                VirtualJoystick.vjCanvas.removeEventListener('pointerup', this._onPointerUpHandlerRef);
-                VirtualJoystick.vjCanvas.removeEventListener('pointerout', this._onPointerUpHandlerRef);
+            if (VirtualJoystick.Canvas) {
+                VirtualJoystick.Canvas.removeEventListener('pointerdown', this._onPointerDownHandlerRef);
+                VirtualJoystick.Canvas.removeEventListener('pointermove', this._onPointerMoveHandlerRef);
+                VirtualJoystick.Canvas.removeEventListener('pointerup', this._onPointerUpHandlerRef);
+                VirtualJoystick.Canvas.removeEventListener('pointerout', this._onPointerUpHandlerRef);
                 window.removeEventListener("resize", this._onResize);
-                document.body.removeChild(VirtualJoystick.vjCanvas);
-                VirtualJoystick.vjCanvas = null;
+                document.body.removeChild(VirtualJoystick.Canvas);
+                VirtualJoystick.Canvas = null;
             }
         };
         // Used to draw the virtual joystick inside a 2D canvas on top of the WebGL rendering canvas

dist/preview release/es6.js

@@ -9823,7 +9823,7 @@ var BABYLON;
         /**
         * new Path3D(path, normal, raw)
         * Creates a Path3D. A Path3D is a logical math object, so not a mesh.
-        * please read the description in the tutorial :  http://doc.babylonjs.com/tutorials/How_to_use_Path3D
+        * please read the description in the tutorial : https://doc.babylonjs.com/how_to/how_to_use_path3d
         * @param path an array of Vector3, the curve axis of the Path3D
         * @param normal (options) Vector3, the first wanted normal to the curve. Ex (0, 1, 0) for a vertical normal.
         * @param raw (optional, default false) : boolean, if true the returned Path3D isn't normalized. Useful to depict path acceleration or speed.
@@ -10016,7 +10016,7 @@ var BABYLON;
         /**
          * A Curve3 object is a logical object, so not a mesh, to handle curves in the 3D geometric space.
          * A Curve3 is designed from a series of successive Vector3.
-         * Tuto : http://doc.babylonjs.com/tutorials/How_to_use_Curve3#curve3-object
+         * Tuto : https://doc.babylonjs.com/how_to/how_to_use_curve3#curve3-object
          * @param points points which make up the curve
          */
         function Curve3(points) {
@@ -10025,7 +10025,7 @@ var BABYLON;
             this._length = this._computeLength(points);
         }
         /**
-         * Returns a Curve3 object along a Quadratic Bezier curve : http://doc.babylonjs.com/tutorials/How_to_use_Curve3#quadratic-bezier-curve
+         * Returns a Curve3 object along a Quadratic Bezier curve : https://doc.babylonjs.com/how_to/how_to_use_curve3#quadratic-bezier-curve
          * @param v0 (Vector3) the origin point of the Quadratic Bezier
          * @param v1 (Vector3) the control point
          * @param v2 (Vector3) the end point of the Quadratic Bezier
@@ -10045,7 +10045,7 @@ var BABYLON;
             return new Curve3(bez);
         };
         /**
-         * Returns a Curve3 object along a Cubic Bezier curve : http://doc.babylonjs.com/tutorials/How_to_use_Curve3#cubic-bezier-curve
+         * Returns a Curve3 object along a Cubic Bezier curve : https://doc.babylonjs.com/how_to/how_to_use_curve3#cubic-bezier-curve
          * @param v0 (Vector3) the origin point of the Cubic Bezier
          * @param v1 (Vector3) the first control point
          * @param v2 (Vector3) the second control point
@@ -10066,7 +10066,7 @@ var BABYLON;
             return new Curve3(bez);
         };
         /**
-         * Returns a Curve3 object along a Hermite Spline curve : http://doc.babylonjs.com/tutorials/How_to_use_Curve3#hermite-spline
+         * Returns a Curve3 object along a Hermite Spline curve : https://doc.babylonjs.com/how_to/how_to_use_curve3#hermite-spline
          * @param p1 (Vector3) the origin point of the Hermite Spline
          * @param t1 (Vector3) the tangent vector at the origin point
          * @param p2 (Vector3) the end point of the Hermite Spline
@@ -20479,6 +20479,34 @@ var BABYLON;
                 this.rotation.y = yaw + yawCor;
                 this.rotation.z = rollCor;
             }
+            // Correct for parent's rotation offset
+            if (space === BABYLON.Space.WORLD && this.parent) {
+                if (this.rotationQuaternion) {
+                    // Get local rotation matrix of the looking object
+                    var rotationMatrix = BABYLON.Tmp.Matrix[0];
+                    this.rotationQuaternion.toRotationMatrix(rotationMatrix);
+                    // Offset rotation by parent's inverted rotation matrix to correct in world space
+                    var parentRotationMatrix = BABYLON.Tmp.Matrix[1];
+                    this.parent.getWorldMatrix().getRotationMatrixToRef(parentRotationMatrix);
+                    parentRotationMatrix.invert();
+                    rotationMatrix.multiplyToRef(parentRotationMatrix, rotationMatrix);
+                    this.rotationQuaternion.fromRotationMatrix(rotationMatrix);
+                }
+                else {
+                    // Get local rotation matrix of the looking object
+                    var quaternionRotation = BABYLON.Tmp.Quaternion[0];
+                    BABYLON.Quaternion.FromEulerVectorToRef(this.rotation, quaternionRotation);
+                    var rotationMatrix = BABYLON.Tmp.Matrix[0];
+                    quaternionRotation.toRotationMatrix(rotationMatrix);
+                    // Offset rotation by parent's inverted rotation matrix to correct in world space
+                    var parentRotationMatrix = BABYLON.Tmp.Matrix[1];
+                    this.parent.getWorldMatrix().getRotationMatrixToRef(parentRotationMatrix);
+                    parentRotationMatrix.invert();
+                    rotationMatrix.multiplyToRef(parentRotationMatrix, rotationMatrix);
+                    quaternionRotation.fromRotationMatrix(rotationMatrix);
+                    quaternionRotation.toEulerAnglesToRef(this.rotation);
+                }
+            }
             return this;
         };
         /**
@@ -22980,7 +23008,7 @@ var BABYLON;
         __extends(Light, _super);
         /**
          * Creates a Light object in the scene.
-         * Documentation : http://doc.babylonjs.com/tutorials/lights
+         * Documentation : https://doc.babylonjs.com/babylon101/lights
          * @param name The firendly name of the light
          * @param scene The scene the light belongs too
          */
@@ -35835,7 +35863,7 @@ var BABYLON;
           * * You can build other polyhedron types than the 15 embbeded ones by setting the parameter `custom` (`polyhedronObject`, default null). If you set the parameter `custom`, this overwrittes the parameter `type`
           * * A `polyhedronObject` is a formatted javascript object. You'll find a full file with pre-set polyhedra here : https://github.com/BabylonJS/Extensions/tree/master/Polyhedron
           * * You can set the color and the UV of each side of the polyhedron with the parameters `faceColors` (Color4, default `(1, 1, 1, 1)`) and faceUV (Vector4, default `(0, 0, 1, 1)`)
-          * * To understand how to set `faceUV` or `faceColors`, please read this by considering the right number of faces of your polyhedron, instead of only 6 for the box : http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors
+          * * To understand how to set `faceUV` or `faceColors`, please read this by considering the right number of faces of your polyhedron, instead of only 6 for the box : https://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors
           * * The parameter `flat` (boolean, default true). If set to false, it gives the polyhedron a single global face, so less vertices and shared normals. In this case, `faceColors` and `faceUV` are ignored
           * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
           * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
@@ -52693,7 +52721,7 @@ var BABYLON;
          * Creates a HemisphericLight object in the scene according to the passed direction (Vector3).
          * The HemisphericLight simulates the ambient environment light, so the passed direction is the light reflection direction, not the incoming direction.
          * The HemisphericLight can't cast shadows.
-         * Documentation : http://doc.babylonjs.com/tutorials/lights
+         * Documentation : https://doc.babylonjs.com/babylon101/lights
          * @param name The friendly name of the light
          * @param direction The direction of the light reflection
          * @param scene The scene the light belongs to
@@ -53084,7 +53112,7 @@ var BABYLON;
          * ```javascript
          * var pointLight = new BABYLON.PointLight("pl", camera.position, scene);
          * ```
-         * Documentation : http://doc.babylonjs.com/tutorials/lights
+         * Documentation : https://doc.babylonjs.com/babylon101/lights
          * @param name The light friendly name
          * @param position The position of the point light in the scene
          * @param scene The scene the lights belongs to
@@ -53267,7 +53295,7 @@ var BABYLON;
          * Creates a DirectionalLight object in the scene, oriented towards the passed direction (Vector3).
          * The directional light is emitted from everywhere in the given direction.
          * It can cast shadows.
-         * Documentation : http://doc.babylonjs.com/tutorials/lights
+         * Documentation : https://doc.babylonjs.com/babylon101/lights
          * @param name The friendly name of the light
          * @param direction The direction of the light
          * @param scene The scene the light belongs to
@@ -53500,7 +53528,7 @@ var BABYLON;
         /**
          * Creates a SpotLight object in the scene. A spot light is a simply light oriented cone.
          * It can cast shadows.
-         * Documentation : http://doc.babylonjs.com/tutorials/lights
+         * Documentation : https://doc.babylonjs.com/babylon101/lights
          * @param name The light friendly name
          * @param position The position of the spot light in the scene
          * @param direction The direction of the light in the scene
@@ -69868,11 +69896,11 @@ var BABYLON;
          * * The parameter `size` sets the size (float) of each box side (default 1)
          * * You can set some different box dimensions by using the parameters `width`, `height` and `depth` (all by default have the same value of `size`)
          * * You can set different colors and different images to each box side by using the parameters `faceColors` (an array of 6 Color3 elements) and `faceUV` (an array of 6 Vector4 elements)
-         * * Please read this tutorial : http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors
+         * * Please read this tutorial : https://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#box
+         * @see https://doc.babylonjs.com/how_to/set_shapes#box
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
@@ -69895,13 +69923,13 @@ var BABYLON;
          * * You can create an unclosed sphere with the parameter `arc` (positive float, default 1), valued between 0 and 1, what is the ratio of the circumference (latitude) : 2 x PI x ratio
          * * You can create an unclosed sphere on its height with the parameter `slice` (positive float, default1), valued between 0 and 1, what is the height ratio (longitude)
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the sphere mesh
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#sphere
+         * @see https://doc.babylonjs.com/how_to/set_shapes#sphere
          */
         MeshBuilder.CreateSphere = function (name, options, scene) {
             var sphere = new BABYLON.Mesh(name, scene);
@@ -69917,13 +69945,13 @@ var BABYLON;
          * * The parameter `tessellation` sets the number of polygon sides (positive integer, default 64). So a tessellation valued to 3 will build a triangle, to 4 a square, etc
          * * You can create an unclosed polygon with the parameter `arc` (positive float, default 1), valued between 0 and 1, what is the ratio of the circumference : 2 x PI x ratio
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the plane polygonal mesh
-         * @see http://doc.babylonjs.com/how_to/set_shapes#disc-or-regular-polygon
+         * @see https://doc.babylonjs.com/how_to/set_shapes#disc-or-regular-polygon
          */
         MeshBuilder.CreateDisc = function (name, options, scene) {
             if (scene === void 0) { scene = null; }
@@ -69941,13 +69969,13 @@ var BABYLON;
          * * The parameter `subdivisions` sets the number of subdivisions (postive integer, default 4). The more subdivisions, the more faces on the icosphere whatever its size
          * * The parameter `flat` (boolean, default true) gives each side its own normals. Set it to false to get a smooth continuous light reflection on the surface
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the icosahedron mesh
-         * @see http://doc.babylonjs.com/how_to/polyhedra_shapes#icosphere
+         * @see https://doc.babylonjs.com/how_to/polyhedra_shapes#icosphere
          */
         MeshBuilder.CreateIcoSphere = function (name, options, scene) {
             var sphere = new BABYLON.Mesh(name, scene);
@@ -69964,9 +69992,9 @@ var BABYLON;
          * * The parameter `closePath` (boolean, default false) creates a seam between the first and the last points of each path of the path array
          * * The parameter `offset` (positive integer, default : rounded half size of the pathArray length), is taken in account only if the `pathArray` is containing a single path
          * * It's the offset to join the points from the same path. Ex : offset = 10 means the point 1 is joined to the point 11
-         * * The optional parameter `instance` is an instance of an existing Ribbon object to be updated with the passed `pathArray` parameter : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#ribbon
+         * * The optional parameter `instance` is an instance of an existing Ribbon object to be updated with the passed `pathArray` parameter : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#ribbon
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The optional parameter `invertUV` (boolean, default false) swaps in the geometry the U and V coordinates to apply a texture
          * * The parameter `uvs` is an optional flat array of `Vector2` to update/set each ribbon vertex with its own custom UV values instead of the computed ones
          * * The parameters `colors` is an optional flat array of `Color4` to set/update each ribbon vertex with its own custom color values
@@ -69977,8 +70005,8 @@ var BABYLON;
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the ribbon mesh
-         * @see http://doc.babylonjs.com/tutorials/Ribbon_Tutorial
-         * @see http://doc.babylonjs.com/tutorials/Parametric_Shapes
+         * @see https://doc.babylonjs.com/how_to/ribbon_tutorial
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes
          */
         MeshBuilder.CreateRibbon = function (name, options, scene) {
             if (scene === void 0) { scene = null; }
@@ -70111,15 +70139,15 @@ var BABYLON;
          * * Each array (color or UVs) is always ordered the same way : the first element is the bottom cap, the last element is the top cap. The other elements are each a ring surface.
          * * If `enclose` is false, a ring surface is one element.
          * * If `enclose` is true, a ring surface is 3 successive elements in the array : the tubular surface, then the two closing faces.
-         * * Example how to set colors and textures on a sliced cylinder : http://www.html5gamedevs.com/topic/17945-creating-a-closed-slice-of-a-cylinder/#comment-106379
+         * * Example how to set colors and textures on a sliced cylinder : https://www.html5gamedevs.com/topic/17945-creating-a-closed-slice-of-a-cylinder/#comment-106379
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created.
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the cylinder mesh
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#cylinder-or-cone
+         * @see https://doc.babylonjs.com/how_to/set_shapes#cylinder-or-cone
          */
         MeshBuilder.CreateCylinder = function (name, options, scene) {
             var cylinder = new BABYLON.Mesh(name, scene);
@@ -70135,13 +70163,13 @@ var BABYLON;
          * * The parameter `thickness` sets the diameter size of the tube of the torus (float, default 0.5)
          * * The parameter `tessellation` sets the number of torus sides (postive integer, default 16)
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created.
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the torus mesh
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#torus
+         * @see https://doc.babylonjs.com/how_to/set_shapes#torus
          */
         MeshBuilder.CreateTorus = function (name, options, scene) {
             var torus = new BABYLON.Mesh(name, scene);
@@ -70158,13 +70186,13 @@ var BABYLON;
          * * The parameter `tubularSegments` sets the number of tubes to decompose the knot into (positive integer, default 32)
          * * The parameters `p` and `q` are the number of windings on each axis (positive integers, default 2 and 3)
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created.
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the torus knot mesh
-         * @see  http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#torus-knot
+         * @see  https://doc.babylonjs.com/how_to/set_shapes#torus-knot
          */
         MeshBuilder.CreateTorusKnot = function (name, options, scene) {
             var torusKnot = new BABYLON.Mesh(name, scene);
@@ -70182,10 +70210,10 @@ var BABYLON;
          * * The optional parameter `instance` is an instance of an existing LineSystem object to be updated with the passed `lines` parameter
          * * The optional parameter `colors` is an array of line colors, each line colors being an array of successive Color4, one per line point
          * * The optional parameter `useVertexAlpha` is to be set to `false` (default `true`) when you don't need the alpha blending (faster)
-         * * Updating a simple Line mesh, you just need to update every line in the `lines` array : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#lines-and-dashedlines
+         * * Updating a simple Line mesh, you just need to update every line in the `lines` array : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#lines-and-dashedlines
          * * When updating an instance, remember that only line point positions can change, not the number of points, neither the number of lines
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#line-system
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#line-system
          * @param name defines the name of the new line system
          * @param options defines the options used to create the line system
          * @param scene defines the hosting scene
@@ -70239,12 +70267,12 @@ var BABYLON;
          * A line mesh is considered as a parametric shape since it has no predefined original shape. Its shape is determined by the passed array of points as an input parameter
          * * Like every other parametric shape, it is dynamically updatable by passing an existing instance of LineMesh to this static function
          * * The parameter `points` is an array successive Vector3
-         * * The optional parameter `instance` is an instance of an existing LineMesh object to be updated with the passed `points` parameter : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#lines-and-dashedlines
+         * * The optional parameter `instance` is an instance of an existing LineMesh object to be updated with the passed `points` parameter : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#lines-and-dashedlines
          * * The optional parameter `colors` is an array of successive Color4, one per line point
          * * The optional parameter `useVertexAlpha` is to be set to `false` (default `true`) when you don't need alpha blending (faster)
          * * When updating an instance, remember that only point positions can change, not the number of points
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#lines
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#lines
          * @param name defines the name of the new line system
          * @param options defines the options used to create the line system
          * @param scene defines the hosting scene
@@ -70264,14 +70292,14 @@ var BABYLON;
          * * The parameter `dashNb` is the intended total number of dashes (positive integer, default 200)
          * * The parameter `dashSize` is the size of the dashes relatively the dash number (positive float, default 3)
          * * The parameter `gapSize` is the size of the gap between two successive dashes relatively the dash number (positive float, default 1)
-         * * The optional parameter `instance` is an instance of an existing LineMesh object to be updated with the passed `points` parameter : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#lines-and-dashedlines
+         * * The optional parameter `instance` is an instance of an existing LineMesh object to be updated with the passed `points` parameter : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#lines-and-dashedlines
          * * When updating an instance, remember that only point positions can change, not the number of points
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the dashed line mesh
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#dashed-lines
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#dashed-lines
          */
         MeshBuilder.CreateDashedLines = function (name, options, scene) {
             if (scene === void 0) { scene = null; }
@@ -70342,19 +70370,18 @@ var BABYLON;
          * * The parameter `rotation` (float, default 0 radians) is the angle value to rotate the shape each step (each path point), from the former step (so rotation added each step) along the curve.
          * * The parameter `scale` (float, default 1) is the value to scale the shape.
          * * The parameter `cap` sets the way the extruded shape is capped. Possible values : BABYLON.Mesh.NO_CAP (default), BABYLON.Mesh.CAP_START, BABYLON.Mesh.CAP_END, BABYLON.Mesh.CAP_ALL
-         * * The optional parameter `instance` is an instance of an existing ExtrudedShape object to be updated with the passed `shape`, `path`, `scale` or `rotation` parameters : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#extruded-shape
+         * * The optional parameter `instance` is an instance of an existing ExtrudedShape object to be updated with the passed `shape`, `path`, `scale` or `rotation` parameters : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#extruded-shape
          * * Remember you can only change the shape or path point positions, not their number when updating an extruded shape.
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The optional parameter `invertUV` (boolean, default false) swaps in the geometry the U and V coordinates to apply a texture.
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created.
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the extruded shape mesh
-         * @see http://doc.babylonjs.com/tutorials/Parametric_Shapes
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
          */
         MeshBuilder.ExtrudeShape = function (name, options, scene) {
             if (scene === void 0) { scene = null; }
@@ -70381,19 +70408,19 @@ var BABYLON;
          * * The parameter `ribbonClosePath` (boolean, default false) forces the extrusion underlying ribbon to close all the paths in its `pathArray`
          * * The parameter `ribbonCloseArray` (boolean, default false) forces the extrusion underlying ribbon to close its `pathArray`
          * * The parameter `cap` sets the way the extruded shape is capped. Possible values : BABYLON.Mesh.NO_CAP (default), BABYLON.Mesh.CAP_START, BABYLON.Mesh.CAP_END, BABYLON.Mesh.CAP_ALL
-         * * The optional parameter `instance` is an instance of an existing ExtrudedShape object to be updated with the passed `shape`, `path`, `scale` or `rotation` parameters : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#extruded-shape
+         * * The optional parameter `instance` is an instance of an existing ExtrudedShape object to be updated with the passed `shape`, `path`, `scale` or `rotation` parameters : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#extruded-shape
          * * Remember you can only change the shape or path point positions, not their number when updating an extruded shape
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The optional parameter `invertUV` (boolean, default false) swaps in the geometry the U and V coordinates to apply a texture
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the custom extruded shape mesh
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#custom-extruded-shapes
-         * @see http://doc.babylonjs.com/tutorials/Parametric_Shapes
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#custom-extruded-shapes
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#extruded-shapes
          */
         MeshBuilder.ExtrudeShapeCustom = function (name, options, scene) {
             var path = options.path;
@@ -70420,14 +70447,14 @@ var BABYLON;
          * * The parameter `closed` (boolean, default true) opens/closes the lathe circumference. This should be set to false when used with the parameter "arc"
          * * The parameter `cap` sets the way the extruded shape is capped. Possible values : BABYLON.Mesh.NO_CAP (default), BABYLON.Mesh.CAP_START, BABYLON.Mesh.CAP_END, BABYLON.Mesh.CAP_ALL
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The optional parameter `invertUV` (boolean, default false) swaps in the geometry the U and V coordinates to apply a texture
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the lathe mesh
-         * @see http://doc.babylonjs.com/how_to/parametric_shapes#lathe
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes#lathe
          */
         MeshBuilder.CreateLathe = function (name, options, scene) {
             var arc = options.arc ? ((options.arc <= 0 || options.arc > 1) ? 1.0 : options.arc) : 1.0;
@@ -70473,13 +70500,13 @@ var BABYLON;
          * * You can set some different plane dimensions by using the parameters `width` and `height` (both by default have the same value of `size`)
          * * The parameter `sourcePlane` is a Plane instance. It builds a mesh plane from a Math plane
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the plane mesh
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#plane
+         * @see https://doc.babylonjs.com/how_to/set_shapes#plane
          */
         MeshBuilder.CreatePlane = function (name, options, scene) {
             var plane = new BABYLON.Mesh(name, scene);
@@ -70506,7 +70533,7 @@ var BABYLON;
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the ground mesh
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#plane
+         * @see https://doc.babylonjs.com/how_to/set_shapes#ground
          */
         MeshBuilder.CreateGround = function (name, options, scene) {
             var ground = new BABYLON.GroundMesh(name, scene);
@@ -70535,7 +70562,7 @@ var BABYLON;
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the tiled ground mesh
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#tiled-ground
+         * @see https://doc.babylonjs.com/how_to/set_shapes#tiled-ground
          */
         MeshBuilder.CreateTiledGround = function (name, options, scene) {
             var tiledGround = new BABYLON.Mesh(name, scene);
@@ -70559,8 +70586,8 @@ var BABYLON;
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the ground mesh
-         * @see http://doc.babylonjs.com/babylon101/height_map
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#ground-from-a-height-map
+         * @see https://doc.babylonjs.com/babylon101/height_map
+         * @see https://doc.babylonjs.com/how_to/set_shapes#ground-from-a-height-map
          */
         MeshBuilder.CreateGroundFromHeightMap = function (name, url, options, scene) {
             var width = options.width || 10.0;
@@ -70661,7 +70688,7 @@ var BABYLON;
         /**
          * Creates an extruded polygon mesh, with depth in the Y direction.
          * * You can set different colors and different images to the top, bottom and extruded side by using the parameters `faceColors` (an array of 3 Color3 elements) and `faceUV` (an array of 3 Vector4 elements)
-         * @see http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors
+         * @see https://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
@@ -70680,17 +70707,17 @@ var BABYLON;
          * * This function is called on each point of the tube path and is passed the index `i` of the i-th point and the distance of this point from the first point of the path. It must return a radius value (positive float)
          * * The parameter `arc` (positive float, maximum 1, default 1) is the ratio to apply to the tube circumference : 2 x PI x arc
          * * The parameter `cap` sets the way the extruded shape is capped. Possible values : BABYLON.Mesh.NO_CAP (default), BABYLON.Mesh.CAP_START, BABYLON.Mesh.CAP_END, BABYLON.Mesh.CAP_ALL
-         * * The optional parameter `instance` is an instance of an existing Tube object to be updated with the passed `pathArray` parameter : http://doc.babylonjs.com/tutorials/How_to_dynamically_morph_a_mesh#tube
+         * * The optional parameter `instance` is an instance of an existing Tube object to be updated with the passed `pathArray` parameter : https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#tube
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The optional parameter `invertUV` (boolean, default false) swaps in the geometry the U and V coordinates to apply a texture
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the tube mesh
-         * @see http://doc.babylonjs.com/tutorials/Parametric_Shapes
-         * @see http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#tube
+         * @see https://doc.babylonjs.com/how_to/parametric_shapes
+         * @see https://doc.babylonjs.com/how_to/set_shapes#tube
          */
         MeshBuilder.CreateTube = function (name, options, scene) {
             var path = options.path;
@@ -70805,16 +70832,16 @@ var BABYLON;
          * * You can build other polyhedron types than the 15 embbeded ones by setting the parameter `custom` (`polyhedronObject`, default null). If you set the parameter `custom`, this overwrittes the parameter `type`
          * * A `polyhedronObject` is a formatted javascript object. You'll find a full file with pre-set polyhedra here : https://github.com/BabylonJS/Extensions/tree/master/Polyhedron
          * * You can set the color and the UV of each side of the polyhedron with the parameters `faceColors` (Color4, default `(1, 1, 1, 1)`) and faceUV (Vector4, default `(0, 0, 1, 1)`)
-         * * To understand how to set `faceUV` or `faceColors`, please read this by considering the right number of faces of your polyhedron, instead of only 6 for the box : http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors
+         * * To understand how to set `faceUV` or `faceColors`, please read this by considering the right number of faces of your polyhedron, instead of only 6 for the box : https://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors
          * * The parameter `flat` (boolean, default true). If set to false, it gives the polyhedron a single global face, so less vertices and shared normals. In this case, `faceColors` and `faceUV` are ignored
          * * You can also set the mesh side orientation with the values : BABYLON.Mesh.FRONTSIDE (default), BABYLON.Mesh.BACKSIDE or BABYLON.Mesh.DOUBLESIDE
-         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : http://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
+         * * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4). Detail here : https://doc.babylonjs.com/babylon101/discover_basic_elements#side-orientation
          * * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created
          * @param name defines the name of the mesh
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the polyhedron mesh
-         * @see http://doc.babylonjs.com/how_to/polyhedra_shapes
+         * @see https://doc.babylonjs.com/how_to/polyhedra_shapes
          */
         MeshBuilder.CreatePolyhedron = function (name, options, scene) {
             var polyhedron = new BABYLON.Mesh(name, scene);
@@ -70836,7 +70863,7 @@ var BABYLON;
          * @param options defines the options used to create the mesh
          * @param scene defines the hosting scene
          * @returns the decal mesh
-         * @see http://doc.babylonjs.com/how_to/decals
+         * @see https://doc.babylonjs.com/how_to/decals
          */
         MeshBuilder.CreateDecal = function (name, sourceMesh, options) {
             var indices = sourceMesh.getIndices();
@@ -76826,7 +76853,7 @@ var BABYLON;
          * Creates a ShadowGenerator object.
          * A ShadowGenerator is the required tool to use the shadows.
          * Each light casting shadows needs to use its own ShadowGenerator.
-         * Documentation : http://doc.babylonjs.com/tutorials/shadows
+         * Documentation : https://doc.babylonjs.com/babylon101/shadows
          * @param mapSize The size of the texture what stores the shadows. Example : 1024.
          * @param light The light object generating the shadows.
          * @param useFullFloatFirst By default the generator will try to use half float textures but if you need precision (for self shadowing for instance), you can use this option to enforce full float texture.
@@ -109893,40 +109920,40 @@ var BABYLON;
             this._onResize = function (evt) {
                 VirtualJoystick.vjCanvasWidth = window.innerWidth;
                 VirtualJoystick.vjCanvasHeight = window.innerHeight;
-                if (VirtualJoystick.vjCanvas) {
-                    VirtualJoystick.vjCanvas.width = VirtualJoystick.vjCanvasWidth;
-                    VirtualJoystick.vjCanvas.height = VirtualJoystick.vjCanvasHeight;
+                if (VirtualJoystick.Canvas) {
+                    VirtualJoystick.Canvas.width = VirtualJoystick.vjCanvasWidth;
+                    VirtualJoystick.Canvas.height = VirtualJoystick.vjCanvasHeight;
                 }
                 VirtualJoystick.halfWidth = VirtualJoystick.vjCanvasWidth / 2;
             };
             // injecting a canvas element on top of the canvas 3D game
-            if (!VirtualJoystick.vjCanvas) {
+            if (!VirtualJoystick.Canvas) {
                 window.addEventListener("resize", this._onResize, false);
-                VirtualJoystick.vjCanvas = document.createElement("canvas");
+                VirtualJoystick.Canvas = document.createElement("canvas");
                 VirtualJoystick.vjCanvasWidth = window.innerWidth;
                 VirtualJoystick.vjCanvasHeight = window.innerHeight;
-                VirtualJoystick.vjCanvas.width = window.innerWidth;
-                VirtualJoystick.vjCanvas.height = window.innerHeight;
-                VirtualJoystick.vjCanvas.style.width = "100%";
-                VirtualJoystick.vjCanvas.style.height = "100%";
-                VirtualJoystick.vjCanvas.style.position = "absolute";
-                VirtualJoystick.vjCanvas.style.backgroundColor = "transparent";
-                VirtualJoystick.vjCanvas.style.top = "0px";
-                VirtualJoystick.vjCanvas.style.left = "0px";
-                VirtualJoystick.vjCanvas.style.zIndex = "5";
-                VirtualJoystick.vjCanvas.style.msTouchAction = "none";
+                VirtualJoystick.Canvas.width = window.innerWidth;
+                VirtualJoystick.Canvas.height = window.innerHeight;
+                VirtualJoystick.Canvas.style.width = "100%";
+                VirtualJoystick.Canvas.style.height = "100%";
+                VirtualJoystick.Canvas.style.position = "absolute";
+                VirtualJoystick.Canvas.style.backgroundColor = "transparent";
+                VirtualJoystick.Canvas.style.top = "0px";
+                VirtualJoystick.Canvas.style.left = "0px";
+                VirtualJoystick.Canvas.style.zIndex = "5";
+                VirtualJoystick.Canvas.style.msTouchAction = "none";
                 // Support for jQuery PEP polyfill
-                VirtualJoystick.vjCanvas.setAttribute("touch-action", "none");
-                var context = VirtualJoystick.vjCanvas.getContext('2d');
+                VirtualJoystick.Canvas.setAttribute("touch-action", "none");
+                var context = VirtualJoystick.Canvas.getContext('2d');
                 if (!context) {
                     throw new Error("Unable to create canvas for virtual joystick");
                 }
                 VirtualJoystick.vjCanvasContext = context;
                 VirtualJoystick.vjCanvasContext.strokeStyle = "#ffffff";
                 VirtualJoystick.vjCanvasContext.lineWidth = 2;
-                document.body.appendChild(VirtualJoystick.vjCanvas);
+                document.body.appendChild(VirtualJoystick.Canvas);
             }
-            VirtualJoystick.halfWidth = VirtualJoystick.vjCanvas.width / 2;
+            VirtualJoystick.halfWidth = VirtualJoystick.Canvas.width / 2;
             this.pressed = false;
             // default joystick color
             this._joystickColor = "cyan";
@@ -109946,11 +109973,11 @@ var BABYLON;
             this._onPointerUpHandlerRef = function (evt) {
                 _this._onPointerUp(evt);
             };
-            VirtualJoystick.vjCanvas.addEventListener('pointerdown', this._onPointerDownHandlerRef, false);
-            VirtualJoystick.vjCanvas.addEventListener('pointermove', this._onPointerMoveHandlerRef, false);
-            VirtualJoystick.vjCanvas.addEventListener('pointerup', this._onPointerUpHandlerRef, false);
-            VirtualJoystick.vjCanvas.addEventListener('pointerout', this._onPointerUpHandlerRef, false);
-            VirtualJoystick.vjCanvas.addEventListener("contextmenu", function (evt) {
+            VirtualJoystick.Canvas.addEventListener('pointerdown', this._onPointerDownHandlerRef, false);
+            VirtualJoystick.Canvas.addEventListener('pointermove', this._onPointerMoveHandlerRef, false);
+            VirtualJoystick.Canvas.addEventListener('pointerup', this._onPointerUpHandlerRef, false);
+            VirtualJoystick.Canvas.addEventListener('pointerout', this._onPointerUpHandlerRef, false);
+            VirtualJoystick.Canvas.addEventListener("contextmenu", function (evt) {
                 evt.preventDefault(); // Disables system menu
             }, false);
             requestAnimationFrame(function () { _this._drawVirtualJoystick(); });
@@ -110144,14 +110171,14 @@ var BABYLON;
          * Release internal HTML canvas
          */
         VirtualJoystick.prototype.releaseCanvas = function () {
-            if (VirtualJoystick.vjCanvas) {
-                VirtualJoystick.vjCanvas.removeEventListener('pointerdown', this._onPointerDownHandlerRef);
-                VirtualJoystick.vjCanvas.removeEventListener('pointermove', this._onPointerMoveHandlerRef);
-                VirtualJoystick.vjCanvas.removeEventListener('pointerup', this._onPointerUpHandlerRef);
-                VirtualJoystick.vjCanvas.removeEventListener('pointerout', this._onPointerUpHandlerRef);
+            if (VirtualJoystick.Canvas) {
+                VirtualJoystick.Canvas.removeEventListener('pointerdown', this._onPointerDownHandlerRef);
+                VirtualJoystick.Canvas.removeEventListener('pointermove', this._onPointerMoveHandlerRef);
+                VirtualJoystick.Canvas.removeEventListener('pointerup', this._onPointerUpHandlerRef);
+                VirtualJoystick.Canvas.removeEventListener('pointerout', this._onPointerUpHandlerRef);
                 window.removeEventListener("resize", this._onResize);
-                document.body.removeChild(VirtualJoystick.vjCanvas);
-                VirtualJoystick.vjCanvas = null;
+                document.body.removeChild(VirtualJoystick.Canvas);
+                VirtualJoystick.Canvas = null;
             }
         };
         // Used to draw the virtual joystick inside a 2D canvas on top of the WebGL rendering canvas

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

@@ -737,6 +737,10 @@ declare module BABYLON.GUI {
             _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number): boolean;
             _onPointerMove(target: Control, coordinates: BABYLON.Vector2): void;
             _onPointerUp(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean): void;
+            /**
+                * This is so cool!
+                */
+            static ShowPickerDialog(advancedTexture: AdvancedDynamicTexture, pickerWidth: string, pickerHeight: string, lastColor: string, swatchLimit: number, swatchSize: number, numSwatchesPerLine: number, savedColors: Array<string>): string;
     }
 }
 declare module BABYLON.GUI {

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

@@ -805,6 +805,7 @@ declare module 'babylonjs-gui/2D/controls/colorpicker' {
     import { Control } from "babylonjs-gui/2D/controls/control";
     import { Color3, Observable, Vector2 } from "babylonjs";
     import { Measure } from "babylonjs-gui/2D/measure";
+    import { AdvancedDynamicTexture } from "babylonjs-gui/2D/advancedDynamicTexture";
     /** Class used to create color pickers */
     export class ColorPicker extends Control {
             name?: string | undefined;
@@ -831,6 +832,10 @@ declare module 'babylonjs-gui/2D/controls/colorpicker' {
             _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number): boolean;
             _onPointerMove(target: Control, coordinates: Vector2): void;
             _onPointerUp(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean): void;
+            /**
+                * This is so cool!
+                */
+            static ShowPickerDialog(advancedTexture: AdvancedDynamicTexture, pickerWidth: string, pickerHeight: string, lastColor: string, swatchLimit: number, swatchSize: number, numSwatchesPerLine: number, savedColors: Array<string>): string;
     }
 }
 
@@ -3728,6 +3733,10 @@ declare module BABYLON.GUI {
             _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number): boolean;
             _onPointerMove(target: Control, coordinates: BABYLON.Vector2): void;
             _onPointerUp(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean): void;
+            /**
+                * This is so cool!
+                */
+            static ShowPickerDialog(advancedTexture: AdvancedDynamicTexture, pickerWidth: string, pickerHeight: string, lastColor: string, swatchLimit: number, swatchSize: number, numSwatchesPerLine: number, savedColors: Array<string>): string;
     }
 }
 declare module BABYLON.GUI {

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

@@ -16,55 +16,53 @@ declare module INSPECTOR {
 declare module INSPECTOR {
 }
 declare module INSPECTOR {
-    export class Tools {
-        static LookForItem(item: any, selectedEntity: any): boolean;
-        static SortAndFilter(items: any[]): any[];
-    }
-}
-declare module INSPECTOR {
-}
-declare module INSPECTOR {
-}
-export declare class Inspector {
-        /** The HTML document relative to this inspector (the window or the popup depending on its mode) */
-        static DOCUMENT: HTMLDocument;
-        /** The HTML window. In popup mode, it's the popup itself. Otherwise, it's the current tab */
-        static WINDOW: Window;
-        onGUILoaded: BABYLON.Observable<any>;
-        static GUIObject: any;
-        /** The inspector is created with the given engine.
-            * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
-            * If the parameter 'popup' is true, the inspector is created in another popup.
-            */
-        constructor(scene: BABYLON.Scene, popup?: boolean, initialTab?: number | string, parentElement?: BABYLON.Nullable<HTMLElement>, newColors?: {
-                backgroundColor?: string;
-                backgroundColorLighter?: string;
-                backgroundColorLighter2?: string;
-                backgroundColorLighter3?: string;
-                color?: string;
-                colorTop?: string;
-                colorBot?: string;
-        });
-        readonly scene: BABYLON.Scene;
-        readonly popupMode: boolean;
-        /**
-            * Filter the list of item present in the tree.
-            * All item returned should have the given filter contained in the item id.
-         */
-        filterItem(filter: string): void;
-        /** Display the mesh tab on the given object */
-        displayObjectDetails(mesh: BABYLON.AbstractMesh): void;
-        /** Clean the whole tree of item and rebuilds it */
-        refresh(): void;
-        /** Remove the inspector panel when it's built as a right panel:
-            * remove the right panel and remove the wrapper
-            */
-        dispose(): void;
-        /** Open the inspector in a new popup
-            * Set 'firstTime' to true if there is no inspector created beforehands
-            */
-        openPopup(firstTime?: boolean): void;
-        getActiveTabIndex(): number;
+}
+declare module INSPECTOR {
+}
+declare module INSPECTOR {
+}
+declare module INSPECTOR {
+    export class Inspector {
+            /** The HTML document relative to this inspector (the window or the popup depending on its mode) */
+            static DOCUMENT: HTMLDocument;
+            /** The HTML window. In popup mode, it's the popup itself. Otherwise, it's the current tab */
+            static WINDOW: Window;
+            onGUILoaded: BABYLON.Observable<any>;
+            static GUIObject: any;
+            /** The inspector is created with the given engine.
+                * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
+                * If the parameter 'popup' is true, the inspector is created in another popup.
+                */
+            constructor(scene: BABYLON.Scene, popup?: boolean, initialTab?: number | string, parentElement?: BABYLON.Nullable<HTMLElement>, newColors?: {
+                    backgroundColor?: string;
+                    backgroundColorLighter?: string;
+                    backgroundColorLighter2?: string;
+                    backgroundColorLighter3?: string;
+                    color?: string;
+                    colorTop?: string;
+                    colorBot?: string;
+            });
+            readonly scene: BABYLON.Scene;
+            readonly popupMode: boolean;
+            /**
+                * Filter the list of item present in the tree.
+                * All item returned should have the given filter contained in the item id.
+             */
+            filterItem(filter: string): void;
+            /** Display the mesh tab on the given object */
+            displayObjectDetails(mesh: BABYLON.AbstractMesh): void;
+            /** Clean the whole tree of item and rebuilds it */
+            refresh(): void;
+            /** Remove the inspector panel when it's built as a right panel:
+                * remove the right panel and remove the wrapper
+                */
+            dispose(): void;
+            /** Open the inspector in a new popup
+                * Set 'firstTime' to true if there is no inspector created beforehands
+                */
+            openPopup(firstTime?: boolean): void;
+            getActiveTabIndex(): number;
+    }
 }
 declare module INSPECTOR {
     export const PROPERTIES: {
@@ -837,6 +835,80 @@ declare module INSPECTOR {
     }
 }
 declare module INSPECTOR {
+    export abstract class AbstractTool {
+            protected _inspector: Inspector;
+            constructor(iconSet: string, icon: string, parent: HTMLElement, inspector: Inspector, tooltip: string);
+            toHtml(): HTMLElement;
+            /**
+                * Returns the total width in pixel of this tool, 0 by default
+             */
+            getPixelWidth(): number;
+            /**
+                * Updates the icon of this tool with the given string
+                */
+            protected _updateIcon(icon: string): void;
+            abstract action(): void;
+    }
+}
+declare module INSPECTOR {
+    /**
+      * Removes the inspector panel
+      */
+    export class DisposeTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        action(): void;
+    }
+}
+declare module INSPECTOR {
+    export class FullscreenTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        action(): void;
+    }
+}
+declare module INSPECTOR {
+    export class LabelTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        dispose(): void;
+        action(): void;
+    }
+}
+declare module INSPECTOR {
+    export class PauseScheduleTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        action(): void;
+    }
+}
+declare module INSPECTOR {
+    export class PickTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        action(): void;
+    }
+}
+declare module INSPECTOR {
+    export class PopupTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        action(): void;
+    }
+}
+declare module INSPECTOR {
+    export class RefreshTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        action(): void;
+    }
+}
+declare module INSPECTOR {
+    export class Toolbar extends BasicElement {
+        constructor(inspector: Inspector);
+        update(): void;
+        protected _build(): void;
+        /**
+          * Returns the total width in pixel of the tabbar,
+          * that corresponds to the sum of the width of each tab + toolbar width
+         */
+        getPixelWidth(): number;
+    }
+}
+declare module INSPECTOR {
     export class TreeItem extends BasicElement {
             children: Array<TreeItem>;
             constructor(tab: Tab, obj: Adapter);

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

@@ -74,10 +74,15 @@ declare module 'babylonjs-inspector/tabs' {
 }
 
 declare module 'babylonjs-inspector/tools' {
-    export class Tools {
-        static LookForItem(item: any, selectedEntity: any): boolean;
-        static SortAndFilter(items: any[]): any[];
-    }
+    export * from 'babylonjs-inspector/tools/AbstractTool';
+    export * from 'babylonjs-inspector/tools/DisposeTool';
+    export * from 'babylonjs-inspector/tools/FullscreenTool';
+    export * from 'babylonjs-inspector/tools/LabelTool';
+    export * from 'babylonjs-inspector/tools/PauseScheduleTool';
+    export * from 'babylonjs-inspector/tools/PickTool';
+    export * from 'babylonjs-inspector/tools/PopupTool';
+    export * from 'babylonjs-inspector/tools/RefreshTool';
+    export * from 'babylonjs-inspector/tools/Toolbar';
 }
 
 declare module 'babylonjs-inspector/tree' {
@@ -94,48 +99,50 @@ declare module 'babylonjs-inspector/treetools' {
     export * from 'babylonjs-inspector/treetools/SoundInteractions';
 }
 
-import { AbstractMesh, Nullable, Scene, Observable } from "babylonjs";
-
-export declare class Inspector {
-        /** The HTML document relative to this inspector (the window or the popup depending on its mode) */
-        static DOCUMENT: HTMLDocument;
-        /** The HTML window. In popup mode, it's the popup itself. Otherwise, it's the current tab */
-        static WINDOW: Window;
-        onGUILoaded: Observable<any>;
-        static GUIObject: any;
-        /** The inspector is created with the given engine.
-            * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
-            * If the parameter 'popup' is true, the inspector is created in another popup.
-            */
-        constructor(scene: Scene, popup?: boolean, initialTab?: number | string, parentElement?: Nullable<HTMLElement>, newColors?: {
-                backgroundColor?: string;
-                backgroundColorLighter?: string;
-                backgroundColorLighter2?: string;
-                backgroundColorLighter3?: string;
-                color?: string;
-                colorTop?: string;
-                colorBot?: string;
-        });
-        readonly scene: Scene;
-        readonly popupMode: boolean;
-        /**
-            * Filter the list of item present in the tree.
-            * All item returned should have the given filter contained in the item id.
-         */
-        filterItem(filter: string): void;
-        /** Display the mesh tab on the given object */
-        displayObjectDetails(mesh: AbstractMesh): void;
-        /** Clean the whole tree of item and rebuilds it */
-        refresh(): void;
-        /** Remove the inspector panel when it's built as a right panel:
-            * remove the right panel and remove the wrapper
-            */
-        dispose(): void;
-        /** Open the inspector in a new popup
-            * Set 'firstTime' to true if there is no inspector created beforehands
-            */
-        openPopup(firstTime?: boolean): void;
-        getActiveTabIndex(): number;
+declare module 'babylonjs-inspector/Inspector' {
+    import { AbstractMesh, Nullable, Scene, Observable } from "babylonjs";
+    
+    export class Inspector {
+            /** The HTML document relative to this inspector (the window or the popup depending on its mode) */
+            static DOCUMENT: HTMLDocument;
+            /** The HTML window. In popup mode, it's the popup itself. Otherwise, it's the current tab */
+            static WINDOW: Window;
+            onGUILoaded: Observable<any>;
+            static GUIObject: any;
+            /** The inspector is created with the given engine.
+                * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
+                * If the parameter 'popup' is true, the inspector is created in another popup.
+                */
+            constructor(scene: Scene, popup?: boolean, initialTab?: number | string, parentElement?: Nullable<HTMLElement>, newColors?: {
+                    backgroundColor?: string;
+                    backgroundColorLighter?: string;
+                    backgroundColorLighter2?: string;
+                    backgroundColorLighter3?: string;
+                    color?: string;
+                    colorTop?: string;
+                    colorBot?: string;
+            });
+            readonly scene: Scene;
+            readonly popupMode: boolean;
+            /**
+                * Filter the list of item present in the tree.
+                * All item returned should have the given filter contained in the item id.
+             */
+            filterItem(filter: string): void;
+            /** Display the mesh tab on the given object */
+            displayObjectDetails(mesh: AbstractMesh): void;
+            /** Clean the whole tree of item and rebuilds it */
+            refresh(): void;
+            /** Remove the inspector panel when it's built as a right panel:
+                * remove the right panel and remove the wrapper
+                */
+            dispose(): void;
+            /** Open the inspector in a new popup
+                * Set 'firstTime' to true if there is no inspector created beforehands
+                */
+            openPopup(firstTime?: boolean): void;
+            getActiveTabIndex(): number;
+    }
 }
 
 declare module 'babylonjs-inspector/properties' {
@@ -1075,6 +1082,106 @@ declare module 'babylonjs-inspector/tabs/ToolsTab' {
     }
 }
 
+declare module 'babylonjs-inspector/tools/AbstractTool' {
+    import { Inspector } from "babylonjs-inspector/Inspector";
+    export abstract class AbstractTool {
+            protected _inspector: Inspector;
+            constructor(iconSet: string, icon: string, parent: HTMLElement, inspector: Inspector, tooltip: string);
+            toHtml(): HTMLElement;
+            /**
+                * Returns the total width in pixel of this tool, 0 by default
+             */
+            getPixelWidth(): number;
+            /**
+                * Updates the icon of this tool with the given string
+                */
+            protected _updateIcon(icon: string): void;
+            abstract action(): void;
+    }
+}
+
+declare module 'babylonjs-inspector/tools/DisposeTool' {
+    import { AbstractTool } from "babylonjs-inspector/tools/AbstractTool";
+    import { Inspector } from "babylonjs-inspector/Inspector";
+    /**
+      * Removes the inspector panel
+      */
+    export class DisposeTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        action(): void;
+    }
+}
+
+declare module 'babylonjs-inspector/tools/FullscreenTool' {
+    import { AbstractTool } from "babylonjs-inspector/tools/AbstractTool";
+    import { Inspector } from "babylonjs-inspector/Inspector";
+    export class FullscreenTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        action(): void;
+    }
+}
+
+declare module 'babylonjs-inspector/tools/LabelTool' {
+    import { Inspector } from "babylonjs-inspector/Inspector";
+    import { AbstractTool } from "babylonjs-inspector/tools/AbstractTool";
+    export class LabelTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        dispose(): void;
+        action(): void;
+    }
+}
+
+declare module 'babylonjs-inspector/tools/PauseScheduleTool' {
+    import { Inspector } from "babylonjs-inspector/Inspector";
+    import { AbstractTool } from "babylonjs-inspector/tools/AbstractTool";
+    export class PauseScheduleTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        action(): void;
+    }
+}
+
+declare module 'babylonjs-inspector/tools/PickTool' {
+    import { Inspector } from "babylonjs-inspector/Inspector";
+    import { AbstractTool } from "babylonjs-inspector/tools/AbstractTool";
+    export class PickTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        action(): void;
+    }
+}
+
+declare module 'babylonjs-inspector/tools/PopupTool' {
+    import { Inspector } from "babylonjs-inspector/Inspector";
+    import { AbstractTool } from "babylonjs-inspector/tools/AbstractTool";
+    export class PopupTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        action(): void;
+    }
+}
+
+declare module 'babylonjs-inspector/tools/RefreshTool' {
+    import { Inspector } from "babylonjs-inspector/Inspector";
+    import { AbstractTool } from "babylonjs-inspector/tools/AbstractTool";
+    export class RefreshTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        action(): void;
+    }
+}
+
+declare module 'babylonjs-inspector/tools/Toolbar' {
+    import { BasicElement } from "babylonjs-inspector/gui/BasicElement";
+    import { Inspector } from "babylonjs-inspector/Inspector";
+    export class Toolbar extends BasicElement {
+        constructor(inspector: Inspector);
+        update(): void;
+        protected _build(): void;
+        /**
+          * Returns the total width in pixel of the tabbar,
+          * that corresponds to the sum of the width of each tab + toolbar width
+         */
+        getPixelWidth(): number;
+    }
+}
+
 declare module 'babylonjs-inspector/tree/TreeItem' {
     import { BasicElement } from "babylonjs-inspector/gui/BasicElement";
     import { Tab } from "babylonjs-inspector/tabs/Tab";
@@ -1252,55 +1359,53 @@ declare module INSPECTOR {
 declare module INSPECTOR {
 }
 declare module INSPECTOR {
-    export class Tools {
-        static LookForItem(item: any, selectedEntity: any): boolean;
-        static SortAndFilter(items: any[]): any[];
-    }
 }
 declare module INSPECTOR {
 }
 declare module INSPECTOR {
 }
-export declare class Inspector {
-        /** The HTML document relative to this inspector (the window or the popup depending on its mode) */
-        static DOCUMENT: HTMLDocument;
-        /** The HTML window. In popup mode, it's the popup itself. Otherwise, it's the current tab */
-        static WINDOW: Window;
-        onGUILoaded: BABYLON.Observable<any>;
-        static GUIObject: any;
-        /** The inspector is created with the given engine.
-            * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
-            * If the parameter 'popup' is true, the inspector is created in another popup.
-            */
-        constructor(scene: BABYLON.Scene, popup?: boolean, initialTab?: number | string, parentElement?: BABYLON.Nullable<HTMLElement>, newColors?: {
-                backgroundColor?: string;
-                backgroundColorLighter?: string;
-                backgroundColorLighter2?: string;
-                backgroundColorLighter3?: string;
-                color?: string;
-                colorTop?: string;
-                colorBot?: string;
-        });
-        readonly scene: BABYLON.Scene;
-        readonly popupMode: boolean;
-        /**
-            * Filter the list of item present in the tree.
-            * All item returned should have the given filter contained in the item id.
-         */
-        filterItem(filter: string): void;
-        /** Display the mesh tab on the given object */
-        displayObjectDetails(mesh: BABYLON.AbstractMesh): void;
-        /** Clean the whole tree of item and rebuilds it */
-        refresh(): void;
-        /** Remove the inspector panel when it's built as a right panel:
-            * remove the right panel and remove the wrapper
-            */
-        dispose(): void;
-        /** Open the inspector in a new popup
-            * Set 'firstTime' to true if there is no inspector created beforehands
-            */
-        openPopup(firstTime?: boolean): void;
-        getActiveTabIndex(): number;
+declare module INSPECTOR {
+    export class Inspector {
+            /** The HTML document relative to this inspector (the window or the popup depending on its mode) */
+            static DOCUMENT: HTMLDocument;
+            /** The HTML window. In popup mode, it's the popup itself. Otherwise, it's the current tab */
+            static WINDOW: Window;
+            onGUILoaded: BABYLON.Observable<any>;
+            static GUIObject: any;
+            /** The inspector is created with the given engine.
+                * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
+                * If the parameter 'popup' is true, the inspector is created in another popup.
+                */
+            constructor(scene: BABYLON.Scene, popup?: boolean, initialTab?: number | string, parentElement?: BABYLON.Nullable<HTMLElement>, newColors?: {
+                    backgroundColor?: string;
+                    backgroundColorLighter?: string;
+                    backgroundColorLighter2?: string;
+                    backgroundColorLighter3?: string;
+                    color?: string;
+                    colorTop?: string;
+                    colorBot?: string;
+            });
+            readonly scene: BABYLON.Scene;
+            readonly popupMode: boolean;
+            /**
+                * Filter the list of item present in the tree.
+                * All item returned should have the given filter contained in the item id.
+             */
+            filterItem(filter: string): void;
+            /** Display the mesh tab on the given object */
+            displayObjectDetails(mesh: BABYLON.AbstractMesh): void;
+            /** Clean the whole tree of item and rebuilds it */
+            refresh(): void;
+            /** Remove the inspector panel when it's built as a right panel:
+                * remove the right panel and remove the wrapper
+                */
+            dispose(): void;
+            /** Open the inspector in a new popup
+                * Set 'firstTime' to true if there is no inspector created beforehands
+                */
+            openPopup(firstTime?: boolean): void;
+            getActiveTabIndex(): number;
+    }
 }
 declare module INSPECTOR {
     export const PROPERTIES: {
@@ -2073,6 +2178,80 @@ declare module INSPECTOR {
     }
 }
 declare module INSPECTOR {
+    export abstract class AbstractTool {
+            protected _inspector: Inspector;
+            constructor(iconSet: string, icon: string, parent: HTMLElement, inspector: Inspector, tooltip: string);
+            toHtml(): HTMLElement;
+            /**
+                * Returns the total width in pixel of this tool, 0 by default
+             */
+            getPixelWidth(): number;
+            /**
+                * Updates the icon of this tool with the given string
+                */
+            protected _updateIcon(icon: string): void;
+            abstract action(): void;
+    }
+}
+declare module INSPECTOR {
+    /**
+      * Removes the inspector panel
+      */
+    export class DisposeTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        action(): void;
+    }
+}
+declare module INSPECTOR {
+    export class FullscreenTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        action(): void;
+    }
+}
+declare module INSPECTOR {
+    export class LabelTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        dispose(): void;
+        action(): void;
+    }
+}
+declare module INSPECTOR {
+    export class PauseScheduleTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        action(): void;
+    }
+}
+declare module INSPECTOR {
+    export class PickTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        action(): void;
+    }
+}
+declare module INSPECTOR {
+    export class PopupTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        action(): void;
+    }
+}
+declare module INSPECTOR {
+    export class RefreshTool extends AbstractTool {
+        constructor(parent: HTMLElement, inspector: Inspector);
+        action(): void;
+    }
+}
+declare module INSPECTOR {
+    export class Toolbar extends BasicElement {
+        constructor(inspector: Inspector);
+        update(): void;
+        protected _build(): void;
+        /**
+          * Returns the total width in pixel of the tabbar,
+          * that corresponds to the sum of the width of each tab + toolbar width
+         */
+        getPixelWidth(): number;
+    }
+}
+declare module INSPECTOR {
     export class TreeItem extends BasicElement {
             children: Array<TreeItem>;
             constructor(tab: Tab, obj: Adapter);

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

@@ -1,6 +1,12 @@
 import { Control } from "./control";
 import { Color3, Observable, Vector2 } from "babylonjs";
 import { Measure } from "../measure";
+import { InputText } from "./inputText";
+import { Rectangle } from "./rectangle";
+import { Button } from "./button";
+import { Grid } from "./grid";
+import { AdvancedDynamicTexture } from "../advancedDynamicTexture";
+import { TextBlock } from ".";
 
 /** Class used to create color pickers */
 export class ColorPicker extends Control {
@@ -427,9 +433,808 @@ export class ColorPicker extends Control {
     }
 
     /**
-     * This is so cool!
+     * 
+     * @param advancedTexture defines the AdvancedDynamicTexture the dialog is assigned to
+     * @param options 
      */
-    public static ShowPickerDialog() {
+
+    public static ShowPickerDialog(advancedTexture: AdvancedDynamicTexture, 
+        options: {
+            pickerWidth?: string, 
+            pickerHeight?: string, 
+            lastColor?: string, 
+            swatchLimit?: number, 
+            swatchSize?: number, 
+            numSwatchesPerLine?: number, 
+            savedColors?:Array<string>}
+        ) {
+
+        // Default options
+        options.pickerWidth = options.pickerWidth || "640px";
+        options.pickerHeight = options.pickerHeight || "400px";
+        options.lastColor = options.lastColor || "#000000";
+        options.swatchLimit = options.swatchLimit || 20;
+        options.swatchSize = options.swatchSize || 40;
+        options.numSwatchesPerLine = options.numSwatchesPerLine || 10;  
+
+        // Button Colors
+        var buttonBackgroundColor = "#535353";
+        var buttonBackgroundHoverColor = "#414141";
+        var buttonBackgroundClickColor = "515151";
+        var buttonDisabledColor = "#555555";
+        var buttonDisabledBackgroundColor = "#454545";
+        var buttonFontSize = 16;
+
+        // Stroke Colors
+        var darkStrokeColor = "#404040";
+        var lightStrokeColor = "#c0c0c0";
+        var inputFieldLabels = ["R", "G", "B"];
+        var inputTextBackgroundColor = "#454545";
+        var inputTextColor = "#f0f0f0";
+
+        // This is the current color as set by either the picker or by entering a value
+        var currentColor;
+
+        // This int is used for naming swatches and serves as the index for calling them from the list
+        var swatchNumber: number;
+
+        // Menu Panel options. We need to know if the swatchDrawer is null so we can create it the first time.
+        var swatchDrawerOpen: boolean = false;
+        var swatchDrawer: Grid;
+        var editSwatchMode = false;
+
+        // Color InputText fields that will be updated upon value change
+        var picker: ColorPicker;
+        var rValInt: InputText;
+        var gValInt: InputText;
+        var bValInt: InputText;
+        var rValDec: InputText;
+        var gValDec: InputText;
+        var bValDec: InputText;
+        var hexVal: InputText;
+        var newSwatch: Rectangle;
+        var lastVal: string;
+        var activeField: string;
+
+        // Drawer height calculations
+        if (options.savedColors) {
+            var rowCount = Math.ceil(options.savedColors.length/options.numSwatchesPerLine);
+        }
+
+        /** 
+        * Will update all values for InputText and ColorPicker controls based on the BABYLON.Color3 passed to this function.
+        * Each InputText control and the ColorPicker control will be tested to see if they are the activeField and if they
+        * are will receive no update. This is to prevent the input from the user being overwritten.
+        */
+        function UpdateValues(value: Color3) {
+            var pickedColor = value.toHexString(); 
+            newSwatch.background = pickedColor;
+            if (rValInt.name != activeField) {
+                rValInt.text = Math.floor(value.r * 255).toString();
+            }
+            if (gValInt.name != activeField) {
+                gValInt.text = Math.floor(value.g * 255).toString();
+            }
+            if (bValInt.name != activeField) {
+                bValInt.text = Math.floor(value.b * 255).toString();
+            }
+            if (rValDec.name != activeField) {
+                rValDec.text = value.r.toString();
+            }
+            if (gValDec.name != activeField) {
+                gValDec.text = value.g.toString();
+            }
+            if (bValDec.name != activeField) {
+                bValDec.text = value.b.toString();
+            }
+            if (hexVal.name != activeField) {
+                var minusPound = pickedColor.split("#");
+                hexVal.text = minusPound[1];  
+            }
+            if (picker.name != activeField) {
+                picker.value = value;
+            }
+        }
+
+        // When the user enters an integer for R, G, or B we check to make sure it is a valid number and replace if not. 
+        function UpdateInt(field: InputText, channel: string) { 
+            var newValue = field.text;
+            var checkVal = /[^0-9]/g.test(newValue);
+            if (checkVal) {
+                field.text = lastVal;
+            }
+            else {
+                if (newValue != "") {
+                    if (Math.floor(parseInt(newValue)) < 0) {
+                        newValue = "0";
+                    }
+                    else if (Math.floor(parseInt(newValue)) > 255) {
+                        newValue = "255";
+                    }
+                    else if (isNaN(parseInt(newValue))) {
+                        newValue = "0";
+                    }
+                    if (activeField == field.name) {
+                        lastVal = newValue;
+                    }
+                }
+            }
+            if (newValue != "") {
+                newValue = parseInt(newValue).toString();
+                field.text = newValue;
+                var newSwatchRGB = BABYLON.Color3.FromHexString(newSwatch.background);
+                if (activeField == field.name) {
+                    if (channel == "r"){
+                        UpdateValues(new BABYLON.Color3((parseInt(newValue)) / 255, newSwatchRGB.g, newSwatchRGB.b));    
+                    }
+                    else if (channel == "g") {
+                        UpdateValues(new BABYLON.Color3(newSwatchRGB.r, (parseInt(newValue)) / 255, newSwatchRGB.b));    
+                    }
+                    else {
+                        UpdateValues(new BABYLON.Color3(newSwatchRGB.r, newSwatchRGB.g, (parseInt(newValue)) / 255));    
+                    }
+                }
+            }
+        }
+
+        // When the user enters a float for R, G, or B we check to make sure it is a valid number and replace if not. 
+        function UpdateFloat(field: InputText, channel: string) { 
+            var newValue = field.text;
+            var checkVal = /[^0-9\.]/g.test(newValue);
+            if (checkVal) {
+                field.text = lastVal;
+            }
+            else {
+                if (newValue != "" && newValue != "." && parseFloat(newValue) != 0) {
+                    if (parseFloat(newValue) < 0.0) {
+                        newValue = "0.0";
+                    }
+                    else if (parseFloat(newValue) > 1.0) {
+                        newValue = "1.0";
+                    }
+                    else if (isNaN(parseFloat(newValue))) {
+                        newValue = "0.0";
+                    }
+                    if (activeField == field.name) {
+                        lastVal = newValue;
+                    }
+                }
+            }
+            if (newValue != "" && newValue != "." && parseFloat(newValue) != 0) {
+                newValue = parseFloat(newValue).toString();
+                field.text = newValue;    
+                var newSwatchRGB = BABYLON.Color3.FromHexString(newSwatch.background);
+                if (activeField == field.name) {
+                    if (channel == "r"){
+                        UpdateValues(new BABYLON.Color3(parseFloat(newValue), newSwatchRGB.g, newSwatchRGB.b));    
+                    }
+                    else if (channel == "g") {
+                        UpdateValues(new BABYLON.Color3(newSwatchRGB.r, parseFloat(newValue), newSwatchRGB.b));    
+                    }
+                    else {
+                        UpdateValues(new BABYLON.Color3(newSwatchRGB.r, newSwatchRGB.g, parseFloat(newValue)));    
+                    }
+                }
+            }
+        }
+
+        // Called when the user hits the limit of saved colors in the drawer. 
+        function DisableButton(button: Button) {
+            button.color = buttonDisabledColor;
+            button.background = buttonDisabledBackgroundColor;
+        }
+
+        // Removes the current index from the savedColors array. Drawer can then be regenerated. 
+        function DeleteSwatch(index: number) {
+            if (options.savedColors) {
+                options.savedColors.splice(index, 1);
+            }
+        }
+
+        // Creates and styles an individual swatch when SaveColor is called. 
+        function CreateSwatch() {
+            if (options.savedColors) {
+                if (editSwatchMode) {
+                    var icon: string = "b";
+                }
+                else {
+                    var icon: string = "";
+                }
+                var swatch: Button = Button.CreateSimpleButton("Swatch_" + swatchNumber, icon);
+                swatch.height = swatch.width = (options.swatchSize!).toString() + "px";
+                swatch.background = options.savedColors[swatchNumber];
+                swatch.thickness = 2;
+                swatch.metadata = swatchNumber;
+                swatch.pointerDownAnimation = () => {
+                    swatch.thickness = 4;
+                };
+                swatch.pointerUpAnimation = () => {
+                    swatch.thickness = 3;
+                };
+                swatch.pointerEnterAnimation = () => {
+                    swatch.thickness = 3;
+                };
+                swatch.pointerOutAnimation = () => {
+                    swatch.thickness = 2;
+                };
+                swatch.onPointerClickObservable.add(() => { 
+                    if (editSwatchMode) {
+                        if (options.savedColors) {
+                            UpdateValues(BABYLON.Color3.FromHexString(options.savedColors[swatch.metadata]));
+                        }
+                    }
+                    else {
+                        DeleteSwatch(swatch.metadata);
+                        SaveColor("", butSave);
+                    } 
+                });
+                console.log("swatch name: " + swatch.name);
+                return swatch;
+            }
+            else {
+                return null;
+            }
+        }
+
+        /** 
+         * When Save Color button is pressed this function will first create a swatch drawer if one is not already 
+         * made. Then all controls are removed from the drawer and we step through the savedColors array and 
+         * creates one swatch per color. It will also set the height of the drawer control based on how many 
+         * saved colors there are and how many can be stored on one row. 
+         */
+        function SaveColor(color: string, button: Button) {
+            if (options.savedColors) {
+                if (!swatchDrawerOpen) {
+                    swatchDrawer = new Grid();
+                    swatchDrawer.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+                    swatchDrawer.background = buttonBackgroundColor;
+                    swatchDrawer.width = options.pickerWidth!;
+                    swatchDrawer.height = (options.swatchSize! + Math.floor(options.swatchSize! / 2)).toString() + "px";
+                    swatchDrawer.top = Math.floor(options.swatchSize! / 4).toString() + "px";
+                    swatchDrawer.addRowDefinition(1.0, false);
+                    for (var i = 0; i < options.numSwatchesPerLine!; i++) {
+                        swatchDrawer.addColumnDefinition(0.125, false);            
+                    }  
+                }
+                if (color != null) {
+                    options.savedColors.push(color);
+                }
+                swatchNumber = 0;
+                swatchDrawer.clearControls();
+                for (var y = 0; y < rowCount; y++) {
+                    if (swatchDrawer.rowCount < rowCount) {
+                        swatchDrawer.addRowDefinition(1 / rowCount, false);
+                    }
+                    for (var i = 0; i < rowCount; i++) {
+                        swatchDrawer.setRowDefinition(i, 1 / rowCount, false);
+                    }
+                    swatchDrawer.height = ((options.swatchSize! + Math.floor(options.swatchSize! / 2)) * rowCount).toString() + "px";
+                    
+                    // Determine number of buttons to create per row based on the button limit per row and number of saved colors
+                    var  adjustedNumberButtons = options.savedColors.length - (y * options.numSwatchesPerLine!);
+                    var buttonIterations = Math.min(Math.max(adjustedNumberButtons, 0), options.numSwatchesPerLine!);
+                    for (var x = 0; x < buttonIterations; x++) {
+                        if (x > options.numSwatchesPerLine!) {
+                            continue;
+                        }
+                        var swatch = CreateSwatch();
+                        if (swatch) {
+                            swatchDrawer.addControl(swatch, y, x);
+                            swatchNumber++;    
+                        }
+                    }   
+                }
+                if (options.savedColors.length >= options.swatchLimit!) {
+                    DisableButton(button);
+                }
+                dialogueContainer.addControl(swatchDrawer, 1, 0);
+            }
+
+        }
+
+        function AddSwatchControl() {
+
+            // Add Edit button to the picker panel
+            var butEdit = Button.CreateSimpleButton("butEdit", "Edit Swatches");
+            butEdit.width = "140px";
+            butEdit.height = "35px";
+            butEdit.top = "-10px";
+            butEdit.left = "10px";
+            butEdit.verticalAlignment = Control.VERTICAL_ALIGNMENT_BOTTOM;
+            butEdit.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+            butEdit.thickness = 2;
+            butEdit.color = lightStrokeColor;
+            butEdit.fontSize = buttonFontSize;
+            butEdit.background = buttonBackgroundColor;
+            butEdit.onPointerEnterObservable.add(() => { 
+                butEdit.background = buttonBackgroundHoverColor; 
+            });
+            butEdit.onPointerOutObservable.add(() => { 
+                butEdit.background = buttonBackgroundColor; 
+            });
+            butEdit.pointerDownAnimation = () => {
+                butEdit.background = buttonBackgroundClickColor;
+            };
+            butEdit.pointerUpAnimation = () => {
+                butEdit.background = buttonBackgroundHoverColor;
+            };
+            butEdit.onPointerClickObservable.add(() => { 
+                ClosePicker(newSwatch.background); 
+            });
+            pickerPanel.addControl(butEdit, 1, 0);
+            
+        }
+
+        // Passes last chosen color back to scene and kills dialog by removing from AdvancedDynamicTexture
+        function ClosePicker(color: string) {
+            options.lastColor = color;
+            advancedTexture.removeControl(dialogueContainer);
+        }
+
+        // Dialogue menu container which will contain both the main dialogue window and the swatch drawer which opens once a color is saved.
+        var dialogueContainer = new Grid();
+        dialogueContainer.name = "Dialogue Container";
+        dialogueContainer.width = options.pickerWidth;
+        if (options.savedColors) {
+            dialogueContainer.height = (parseInt(options.pickerHeight) + options.swatchSize + Math.floor(options.swatchSize / 4) + (rowCount! * Math.floor(options.swatchSize / 2))).toString() + "px";
+            var topRow = parseInt(options.pickerHeight) / parseInt(dialogueContainer.height);
+            dialogueContainer.addRowDefinition(topRow, false);
+            dialogueContainer.addRowDefinition(1.0 - topRow, false);
+           }
+        else {
+            dialogueContainer.height = parseInt(options.pickerHeight);
+            dialogueContainer.addRowDefinition(1.0, false);
+        }
+        advancedTexture.addControl(dialogueContainer);
+
+        // Picker container
+        var pickerPanel = new Grid();
+        pickerPanel.name = "Picker Panel";
+        // pickerPanel.width = pickerWidth;
+        pickerPanel.height = options.pickerHeight;
+        pickerPanel.addRowDefinition(35, true);
+        pickerPanel.addRowDefinition(1.0, false);
+        dialogueContainer.addControl(pickerPanel, 0, 0);
+
+        // Picker container head
+        var header = new Rectangle();
+        header.name = "Dialogue Header Bar";
+        header.background = "#cccccc";
+        header.thickness = 0;
+        pickerPanel.addControl(header, 0, 0);
+
+        // Picker container body
+        var pickerBody = new Grid();
+        pickerBody.name = "Dialogue Body";
+        pickerBody.background = buttonBackgroundColor;
+        pickerBody.addRowDefinition(1.0, false);
+        pickerBody.addColumnDefinition(280, true);
+        pickerBody.addColumnDefinition(1.0, false);
+        pickerPanel.addControl(pickerBody, 1, 0);
+
+        //  Picker control
+        picker = new ColorPicker();
+        picker.name = "GUI Color Picker";
+        picker.height = "250px";
+        picker.width = "250px";
+        picker.top = "45px";
+        picker.left = "8px";
+        picker.value = Color3.FromHexString(options.lastColor);
+        picker.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
+        picker.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+        picker.onPointerDownObservable.add(() => {
+            activeField = picker.name!;
+        });
+        picker.onValueChangedObservable.add(function(value) { // value is a color3
+            if (activeField == picker.name) {
+                UpdateValues(value);
+            }
+        });
+        pickerBody.addControl(picker, 0, 0);
+
+        // Picker body right quarant
+        var pickerBodyRight = new Grid();
+        pickerBodyRight.name = "Dialogue Right Half";
+        pickerBodyRight.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        pickerBodyRight.addRowDefinition(185, true);
+        pickerBodyRight.addRowDefinition(1.0, false);
+        pickerBody.addControl(pickerBodyRight, 1, 1);
+
+        // Picker container swatches and buttons
+        var pickerSwatchesButtons = new Grid();
+        pickerSwatchesButtons.name = "Swatches and Buttons";
+        pickerSwatchesButtons.addRowDefinition(1.0, false);
+        pickerSwatchesButtons.addColumnDefinition(150, true);
+        pickerSwatchesButtons.addColumnDefinition(1.0, false);
+        pickerBodyRight.addControl(pickerSwatchesButtons, 0, 0);
+
+        // Picker Swatches quadrant
+        var pickerSwatches = new Grid();
+        pickerSwatches.name = "New and Current Swatches";
+        pickerSwatches.top = "5px";
+        pickerSwatches.addRowDefinition(0.5, false);
+        pickerSwatches.addRowDefinition(60, true);
+        pickerSwatches.addRowDefinition(60, true);
+        pickerSwatches.addRowDefinition(0.5, false);
+        pickerSwatchesButtons.addControl(pickerSwatches, 0, 0);
+
+        // Picker color values input
+        var pickerColorValues = new Grid();
+        pickerColorValues.addRowDefinition(10, true);
+        pickerColorValues.addRowDefinition(115, true);
+        pickerColorValues.addRowDefinition(35, true);
+        pickerBodyRight.addControl(pickerColorValues, 1, 0);
+
+        // New color swatch and old color swatch
+        var newText = new TextBlock();
+        newText.text = "new";
+        newText.color = lightStrokeColor;
+        newText.fontSize = 16;
+        pickerSwatches.addControl(newText, 0, 0);    
+
+        newSwatch = new Rectangle();
+        newSwatch.background = options.lastColor;
+        newSwatch.width = "100px";
+        newSwatch.height = "60px";
+        newSwatch.thickness = 0;
+        pickerSwatches.addControl(newSwatch, 1, 0);
+
+        var currentSwatch = Button.CreateSimpleButton("currentSwatch", "");
+        currentSwatch.background = options.lastColor;
+        currentSwatch.width = "100px";
+        currentSwatch.height = "60px";
+        currentSwatch.thickness = 0;
+        currentSwatch.onPointerClickObservable.add(() => { 
+            var revertColor = Color3.FromHexString(currentSwatch.background);
+            UpdateValues(revertColor); 
+        });
+        currentSwatch.pointerDownAnimation = () => {};
+        currentSwatch.pointerUpAnimation = () => {};
+        currentSwatch.pointerEnterAnimation = () => {};
+        currentSwatch.pointerOutAnimation = () => {};
+        pickerSwatches.addControl(currentSwatch, 2, 0);
+
+        var swatchOutline = new Rectangle();
+        swatchOutline.width = "100px";
+        swatchOutline.height = "120px";
+        swatchOutline.top = "5px";
+        swatchOutline.thickness = 2;
+        swatchOutline.color = darkStrokeColor;
+        swatchOutline.isHitTestVisible = false;
+        pickerSwatchesButtons.addControl(swatchOutline, 0, 0);
+
+        var currentText = new TextBlock();
+        currentText.text = "current";
+        currentText.color = lightStrokeColor;
+        currentText.fontSize = 16;
+        pickerSwatches.addControl(currentText, 3, 0);   
+        
+        // Panel Buttons
+        var butOK = Button.CreateSimpleButton("butOK", "OK");
+        butOK.width = "140px";
+        butOK.height = "35px";
+        butOK.top = "29px";
+        butOK.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+        butOK.thickness = 2;
+        butOK.color = lightStrokeColor;
+        butOK.fontSize = buttonFontSize;
+        butOK.background = buttonBackgroundColor;
+        butOK.onPointerEnterObservable.add(() => { butOK.background = buttonBackgroundHoverColor; });
+        butOK.onPointerOutObservable.add(() => { butOK.background = buttonBackgroundColor; });
+        butOK.pointerDownAnimation = () => {
+            butOK.background = buttonBackgroundClickColor;
+        };
+        butOK.pointerUpAnimation = () => {
+            butOK.background = buttonBackgroundHoverColor;
+        };
+        butOK.onPointerClickObservable.add(() => { 
+            ClosePicker(newSwatch.background); 
+        });
+        pickerSwatchesButtons.addControl(butOK, 0, 1);     
+    
+        var butCancel = Button.CreateSimpleButton("butCancel", "Cancel");
+        butCancel.width = "140px";
+        butCancel.height = "35px";
+        butCancel.top = "77px";
+        butCancel.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+        butCancel.thickness = 2;
+        butCancel.color = lightStrokeColor;
+        butCancel.fontSize = buttonFontSize;
+        butCancel.background = buttonBackgroundColor;
+        butCancel.onPointerEnterObservable.add(() => { butCancel.background = buttonBackgroundHoverColor; });
+        butCancel.onPointerOutObservable.add(() => { butCancel.background = buttonBackgroundColor; });
+        butCancel.pointerDownAnimation = () => {
+            butCancel.background = buttonBackgroundClickColor;
+        };
+        butCancel.pointerUpAnimation = () => {
+            butCancel.background = buttonBackgroundHoverColor;
+        };
+        butCancel.onPointerClickObservable.add(() => { 
+            ClosePicker(currentSwatch.background); 
+        });
+        pickerSwatchesButtons.addControl(butCancel, 0, 1);     
+    
+        if (options.savedColors) {
+            var butSave = Button.CreateSimpleButton("butSave", "Save Swatch");
+            butSave.width = "140px";
+            butSave.height = "35px";
+            butSave.top = "127px";
+            butSave.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+            butSave.thickness = 2;
+            butSave.fontSize = buttonFontSize;
+            if (options.savedColors.length < options.swatchLimit) {
+                butSave.color = lightStrokeColor;
+                butSave.background = buttonBackgroundColor;
+            }
+            else {
+                DisableButton(butSave);
+            }
+            butSave.onPointerEnterObservable.add(() => {
+                if (options.savedColors) {
+                    if (options.savedColors.length < options.swatchLimit!) {
+                        butSave.background = buttonBackgroundHoverColor; 
+                    }
+                }
+            });
+            butSave.onPointerOutObservable.add(() => {
+                if (options.savedColors) {
+                    if (options.savedColors.length < options.swatchLimit!) {
+                        butSave.background = buttonBackgroundColor; 
+                    }
+                }
+            });
+            butSave.pointerDownAnimation = () => {
+                if (options.savedColors) {
+                    if (options.savedColors.length < options.swatchLimit!) {
+                        butSave.background = buttonBackgroundClickColor;
+                    }
+                }
+            };
+            butSave.pointerUpAnimation = () => {
+                if (options.savedColors) {
+                    if (options.savedColors.length < options.swatchLimit!) {
+                        butSave.background = buttonBackgroundHoverColor;
+                    }
+                }
+            };
+            butSave.onPointerClickObservable.add(() => {
+                if (options.savedColors) {
+                    if (options.savedColors.length == 0) {
+                        AddSwatchControl();
+                    }
+                    if (options.savedColors.length < options.swatchLimit!) {
+                        SaveColor(newSwatch.background, butSave); 
+                    }     
+                } 
+            });
+            if (options.savedColors.length > 0) {
+                AddSwatchControl();
+            }
+            pickerSwatchesButtons.addControl(butSave, 0, 1);         
+        }
+      
+        // RGB values text boxes
+        currentColor = Color3.FromHexString(options.lastColor);
+        var rgbValuesQuadrant = new Grid();
+        rgbValuesQuadrant.width = "300px";
+        rgbValuesQuadrant.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
+        rgbValuesQuadrant.addRowDefinition(1/3, false);
+        rgbValuesQuadrant.addRowDefinition(1/3, false);
+        rgbValuesQuadrant.addRowDefinition(1/3, false);
+        rgbValuesQuadrant.addColumnDefinition(0.1, false);
+        rgbValuesQuadrant.addColumnDefinition(0.2, false);
+        rgbValuesQuadrant.addColumnDefinition(0.7, false);
+        pickerColorValues.addControl(rgbValuesQuadrant, 1, 0);
+
+        for (var i = 0; i < inputFieldLabels.length; i++) {
+            var labelText = new TextBlock();
+            labelText.text = inputFieldLabels[i];
+            labelText.color = lightStrokeColor;
+            labelText.fontSize = 16;
+            rgbValuesQuadrant.addControl(labelText, i, 0);
+        }
+
+        // Input fields for RGB values
+        rValInt = new InputText();
+        rValInt.width = "50px";
+        rValInt.height = "27px";
+        rValInt.name = "rIntField"
+        rValInt.fontSize = buttonFontSize;
+        rValInt.text = (currentColor.r * 255).toString();
+        rValInt.color = inputTextColor;
+        rValInt.background = inputTextBackgroundColor;
+        rValInt.onFocusObservable.add(() => {
+            activeField = rValInt.name!;
+            lastVal = rValInt.text;
+        });
+        rValInt.onBlurObservable.add(() => {
+            activeField = "";
+        });
+        rValInt.onTextChangedObservable.add(() => {
+            UpdateInt(rValInt, "r");
+        });
+        rgbValuesQuadrant.addControl(rValInt, 0, 1);
+
+        gValInt = new InputText();
+        gValInt.width = "50px";
+        gValInt.height = "27px";
+        gValInt.name = "gIntField"
+        gValInt.fontSize = buttonFontSize;
+        gValInt.text = (currentColor.g * 255).toString();
+        gValInt.color = inputTextColor;
+        gValInt.background = inputTextBackgroundColor;
+        gValInt.onFocusObservable.add(() => {
+            activeField = gValInt.name!;
+            lastVal = gValInt.text;
+        });
+        gValInt.onBlurObservable.add(() => {
+            activeField = "";
+        });
+        gValInt.onTextChangedObservable.add(() => {
+            UpdateInt(gValInt, "g");
+        });
+        rgbValuesQuadrant.addControl(gValInt, 1, 1);
+
+        bValInt = new InputText();
+        bValInt.width = "50px";
+        bValInt.height = "27px";
+        bValInt.name = "bIntField"
+        bValInt.fontSize = buttonFontSize;
+        bValInt.text = (currentColor.b * 255).toString();
+        bValInt.color = inputTextColor;
+        bValInt.background = inputTextBackgroundColor;
+        bValInt.onFocusObservable.add(() => {
+            activeField = bValInt.name!;
+            lastVal = bValInt.text;
+        });
+        bValInt.onBlurObservable.add(() => {
+            activeField = "";
+        });
+        bValInt.onTextChangedObservable.add(() => {
+            UpdateInt(bValInt, "b");
+        });
+        rgbValuesQuadrant.addControl(bValInt, 2, 1);
+
+        rValDec = new InputText();
+        rValDec.width = "200px";
+        rValDec.height = "27px";
+        rValDec.name = "rDecField"
+        rValDec.fontSize = buttonFontSize;
+        rValDec.text = currentColor.r.toString();
+        rValDec.color = inputTextColor;
+        rValDec.background = inputTextBackgroundColor;
+        rValDec.onFocusObservable.add(() => {
+            activeField = rValDec.name!;
+            lastVal = rValDec.text;
+        });
+        rValDec.onBlurObservable.add(() => {
+            if (parseFloat(rValDec.text) == 0) {
+                rValDec.text = "0";
+                UpdateFloat(rValDec, "r");
+            }
+            activeField = "";
+        });
+        rValDec.onTextChangedObservable.add(() => {
+            UpdateFloat(rValDec, "r");
+        });
+        rgbValuesQuadrant.addControl(rValDec, 0, 2);
+
+        gValDec = new InputText();
+        gValDec.width = "200px";
+        gValDec.height = "27px";
+        gValDec.name = "gDecField"
+        gValDec.fontSize = buttonFontSize;
+        gValDec.text = currentColor.g.toString();
+        gValDec.color = inputTextColor;
+        gValDec.background = inputTextBackgroundColor;
+        gValDec.onFocusObservable.add(() => {
+            activeField = gValDec.name!;
+            lastVal = gValDec.text;
+        });
+        gValDec.onBlurObservable.add(() => {
+            if (parseFloat(gValDec.text) == 0) {
+                gValDec.text = "0";
+                UpdateFloat(gValDec, "g");
+            }
+            activeField = "";
+        });
+        gValDec.onTextChangedObservable.add(() => {
+            UpdateFloat(gValDec, "g");
+        });
+        rgbValuesQuadrant.addControl(gValDec, 1, 2);
+
+        bValDec = new InputText();
+        bValDec.width = "200px";
+        bValDec.height = "27px";
+        bValDec.name = "bDecField";
+        bValDec.fontSize = buttonFontSize;
+        bValDec.text = currentColor.b.toString();
+        bValDec.color = inputTextColor;
+        bValDec.background = inputTextBackgroundColor;
+        bValDec.onFocusObservable.add(() => {
+            activeField = bValDec.name!;
+            lastVal = bValDec.text;
+        });
+        bValDec.onBlurObservable.add(() => {
+            if (parseFloat(bValDec.text) == 0) {
+                bValDec.text = "0";
+                UpdateFloat(bValDec, "b");
+            }
+            activeField = "";
+        });
+        bValDec.onTextChangedObservable.add(() => {
+            UpdateFloat(bValDec, "b");
+        });
+        rgbValuesQuadrant.addControl(bValDec, 2, 2);
+
+        // Hex value input
+        var hexValueQuadrant = new Grid();
+        hexValueQuadrant.width = "300px";
+        hexValueQuadrant.addRowDefinition(1.0, false);
+        hexValueQuadrant.addColumnDefinition(0.1, false);
+        hexValueQuadrant.addColumnDefinition(0.9, false);
+        pickerColorValues.addControl(hexValueQuadrant, 2, 0);
+
+        var labelText = new TextBlock();
+        labelText.text = "#";
+        labelText.color = lightStrokeColor;
+        labelText.fontSize = buttonFontSize;
+        hexValueQuadrant.addControl(labelText, 0, 0);
+
+        hexVal = new InputText();
+        hexVal.width = "260px";
+        hexVal.height = "27px";
+        hexVal.name = "hexField"
+        hexVal.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        hexVal.left = "5px";
+        hexVal.fontSize = buttonFontSize;
+        var minusPound = options.lastColor.split("#");
+        hexVal.text = minusPound[1];
+        hexVal.color = inputTextColor;
+        hexVal.background = inputTextBackgroundColor;
+        hexVal.onFocusObservable.add(() => {
+            activeField = hexVal.name!;
+            lastVal = hexVal.text;
+        });
+        hexVal.onBlurObservable.add(() => {
+            activeField = "";
+            if (hexVal.text.length == 3) {
+                var val = hexVal.text.split("");
+                hexVal.text = val[0] + val[0] + val[1] + val[1] + val[2] + val[2];
+            }
+        });
+        hexVal.onTextChangedObservable.add(() => {
+            var newHexValue = hexVal.text;
+            var checkHex = /[^0-9A-F]/i.test(newHexValue);
+            if ((hexVal.text.length > 6 || checkHex) && activeField == hexVal.name) {
+                hexVal.text = lastVal;
+            }
+            else {
+                if (hexVal.text.length < 6) {
+                    var leadingZero = 6 - hexVal.text.length;
+                    for (var i = 0; i < leadingZero; i++) {
+                        newHexValue = "0" + newHexValue;
+                    }
+                }
+                if (hexVal.text.length == 3) {
+                    var val = hexVal.text.split("");
+                    newHexValue = val[0] + val[0] + val[1] + val[1] + val[2] + val[2];
+                }
+                lastVal = hexVal.text;
+                newHexValue = "#" + newHexValue;
+                if (activeField == hexVal.name) {
+                    UpdateValues(Color3.FromHexString(newHexValue)); 
+                }
+            }
+        });
+        hexValueQuadrant.addControl(hexVal, 0, 1);
+
+        if (options.savedColors && options.savedColors.length > 0) {
+            SaveColor("", butSave!); 
+        }
+
+        return options.lastColor;
+    
 
     }
 }

localDev/index.html

@@ -55,16 +55,16 @@
         var engine = null;
 
         // Allow querystring to navigate easily in debug in local samples.
-        // var indexjs = 'src/index';
-        // var sampleSearch = /sample=([0-9]+)/i;
-        // var matches = null;
-        // if ((matches = sampleSearch.exec(window.location)) !== null) {
-        //     indexjs += '.';
-        //     indexjs += matches[1];
-        // }
-        // indexjs += '.js';
-
-        var indexjs = "http://localhost:1234/index.js"
+        var indexjs = 'src/index';
+        var sampleSearch = /sample=([0-9]+)/i;
+        var matches = null;
+        if ((matches = sampleSearch.exec(window.location)) !== null) {
+            indexjs += '.';
+            indexjs += matches[1];
+        }
+        indexjs += '.js';
+
+        // var indexjs = "http://localhost:1234/index.js"
 
         // Load the scripts + map file to allow vscode debug.
         BABYLONDEVTOOLS.Loader