Merge branch 'master' into WebGPU

Playground/babylon.d.txt

@@ -460,6 +460,16 @@ declare module BABYLON {
          */
         toLinearSpace(): Color3;
         /**
+         * Converts current color in rgb space to HSV values
+         * @returns a new color3 representing the HSV values
+         */
+        toHSV(): Color3;
+        /**
+         * Converts current color in rgb space to HSV values
+         * @param result defines the Color3 where to store the HSV values
+         */
+        toHSVToRef(result: Color3): void;
+        /**
          * Converts the Color3 values to linear space and stores the result in "convertedColor"
          * @param convertedColor defines the Color3 object where to store the linear space version
          * @returns the unmodified Color3
@@ -478,6 +488,14 @@ declare module BABYLON {
         toGammaSpaceToRef(convertedColor: Color3): Color3;
         private static _BlackReadOnly;
         /**
+         * Convert Hue, saturation and value to a Color3 (RGB)
+         * @param hue defines the hue
+         * @param saturation defines the saturation
+         * @param value defines the value
+         * @param result defines the Color3 where to store the RGB values
+         */
+        static HSVtoRGBToRef(hue: number, saturation: number, value: number, result: Color3): void;
+        /**
          * Creates a new Color3 from the string containing valid hexadecimal values
          * @param hex defines a string containing valid hexadecimal values
          * @returns a new Color3 object
@@ -20551,6 +20569,54 @@ declare module BABYLON {
          */
         static readonly CAP_ALL: number;
         /**
+         * Mesh pattern setting : no flip or rotate
+         */
+        static readonly NO_FLIP: number;
+        /**
+         * Mesh pattern setting : flip (reflect in y axis) alternate tiles on each row or column
+         */
+        static readonly FLIP_TILE: number;
+        /**
+         * Mesh pattern setting : rotate (180degs) alternate tiles on each row or column
+         */
+        static readonly ROTATE_TILE: number;
+        /**
+         * Mesh pattern setting : flip (reflect in y axis) all tiles on alternate rows
+         */
+        static readonly FLIP_ROW: number;
+        /**
+         * Mesh pattern setting : rotate (180degs) all tiles on alternate rows
+         */
+        static readonly ROTATE_ROW: number;
+        /**
+         * Mesh pattern setting : flip and rotate alternate tiles on each row or column
+         */
+        static readonly FLIP_N_ROTATE_TILE: number;
+        /**
+         * Mesh pattern setting : rotate pattern and rotate
+         */
+        static readonly FLIP_N_ROTATE_ROW: number;
+        /**
+         * Mesh tile positioning : part tiles same on left/right or top/bottom
+         */
+        static readonly CENTER: number;
+        /**
+         * Mesh tile positioning : part tiles on left
+         */
+        static readonly LEFT: number;
+        /**
+         * Mesh tile positioning : part tiles on right
+         */
+        static readonly RIGHT: number;
+        /**
+         * Mesh tile positioning : part tiles on top
+         */
+        static readonly TOP: number;
+        /**
+         * Mesh tile positioning : part tiles on bottom
+         */
+        static readonly BOTTOM: number;
+        /**
          * Gets the default side orientation.
          * @param orientation the orientation to value to attempt to get
          * @returns the default orientation
@@ -22893,6 +22959,55 @@ declare module BABYLON {
             backUVs?: Vector4;
         }): VertexData;
         /**
+         * Creates the VertexData for a tiled box
+         * @param options an object used to set the following optional parameters for the box, required but can be empty
+          * * faceTiles sets the pattern, tile size and number of tiles for a face
+          * * faceUV an array of 6 Vector4 elements used to set different images to each box side
+          * * faceColors an array of 6 Color3 elements used to set different colors to each box side
+          * * sideOrientation optional and takes the values : Mesh.FRONTSIDE (default), Mesh.BACKSIDE or Mesh.DOUBLESIDE
+         * @returns the VertexData of the box
+         */
+        static CreateTiledBox(options: {
+            pattern?: number;
+            width?: number;
+            height?: number;
+            depth?: number;
+            tileSize?: number;
+            tileWidth?: number;
+            tileHeight?: number;
+            alignHorizontal?: number;
+            alignVertical?: number;
+            faceUV?: Vector4[];
+            faceColors?: Color4[];
+            sideOrientation?: number;
+        }): VertexData;
+        /**
+         * Creates the VertexData for a tiled plane
+         * @param options an object used to set the following optional parameters for the box, required but can be empty
+          * * pattern a limited pattern arrangement depending on the number
+          * * tileSize sets the width, height and depth of the tile to the value of size, optional default 1
+          * * tileWidth sets the width (x direction) of the tile, overwrites the width set by size, optional, default size
+          * * tileHeight sets the height (y direction) of the tile, overwrites the height set by size, optional, default size
+          * * sideOrientation optional and takes the values : Mesh.FRONTSIDE (default), Mesh.BACKSIDE or Mesh.DOUBLESIDE
+          * * frontUvs only usable when you create a double-sided mesh, used to choose what parts of the texture image to crop and apply on the front side, optional, default vector4 (0, 0, 1, 1)
+          * * backUVs only usable when you create a double-sided mesh, used to choose what parts of the texture image to crop and apply on the back side, optional, default vector4 (0, 0, 1, 1)
+         * @returns the VertexData of the tiled plane
+         */
+        static CreateTiledPlane(options: {
+            pattern?: number;
+            tileSize?: number;
+            tileWidth?: number;
+            tileHeight?: number;
+            size?: number;
+            width?: number;
+            height?: number;
+            alignHorizontal?: number;
+            alignVertical?: number;
+            sideOrientation?: number;
+            frontUVs?: Vector4;
+            backUVs?: Vector4;
+        }): VertexData;
+        /**
          * Creates the VertexData for an ellipsoid, defaults to a sphere
          * @param options an object used to set the following optional parameters for the box, required but can be empty
           * * segments sets the number of horizontal strips optional, default 32
@@ -49300,6 +49415,40 @@ declare module BABYLON {
     /**
      * Class containing static functions to help procedurally build meshes
      */
+    export class TiledBoxBuilder {
+        /**
+         * Creates a box mesh
+         * faceTiles sets the pattern, tile size and number of tiles for a face     * * 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 : 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 : 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 box mesh
+         */
+        static CreateTiledBox(name: string, options: {
+            pattern?: number;
+            width?: number;
+            height?: number;
+            depth?: number;
+            tileSize?: number;
+            tileWidth?: number;
+            tileHeight?: number;
+            alignHorizontal?: number;
+            alignVertical?: number;
+            faceUV?: Vector4[];
+            faceColors?: Color4[];
+            sideOrientation?: number;
+            updatable?: boolean;
+        }, scene?: Nullable<Scene>): Mesh;
+    }
+}
+declare module BABYLON {
+    /**
+     * Class containing static functions to help procedurally build meshes
+     */
     export class TorusKnotBuilder {
         /**
          * Creates a torus knot mesh
@@ -49524,6 +49673,49 @@ declare module BABYLON {
     /**
      * Class containing static functions to help procedurally build meshes
      */
+    export class TiledPlaneBuilder {
+        /**
+         * Creates a tiled plane mesh
+         * * The parameter `pattern` will, depending on value, do nothing or
+         * * * flip (reflect about central vertical) alternate tiles across and up
+         * * * flip every tile on alternate rows
+         * * * rotate (180 degs) alternate tiles across and up
+         * * * rotate every tile on alternate rows
+         * * * flip and rotate alternate tiles across and up
+         * * * flip and rotate every tile on alternate rows
+         * * The parameter `tileSize` sets the size (float) of each tile side (default 1)
+         * * You can set some different tile dimensions by using the parameters `tileWidth` and `tileHeight` (both by default have the same value of `tileSize`)
+         * * 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
+         * * sideOrientation optional and takes the values : Mesh.FRONTSIDE (default), Mesh.BACKSIDE or Mesh.DOUBLESIDE
+         * * frontUvs only usable when you create a double-sided mesh, used to choose what parts of the texture image to crop and apply on the front side, optional, default vector4 (0, 0, 1, 1)
+         * * backUVs only usable when you create a double-sided mesh, used to choose what parts of the texture image to crop and apply on the back side, optional, default vector4 (0, 0, 1, 1)
+         * @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
+         * @returns the box mesh
+         */
+        static CreateTiledPlane(name: string, options: {
+            pattern?: number;
+            tileSize?: number;
+            tileWidth?: number;
+            tileHeight?: number;
+            size?: number;
+            width?: number;
+            height?: number;
+            alignHorizontal?: number;
+            alignVertical?: number;
+            sideOrientation?: number;
+            frontUVs?: Vector4;
+            backUVs?: Vector4;
+            updatable?: boolean;
+        }, scene?: Nullable<Scene>): Mesh;
+    }
+}
+declare module BABYLON {
+    /**
+     * Class containing static functions to help procedurally build meshes
+     */
     export class TubeBuilder {
         /**
          * Creates a tube mesh.
@@ -49659,6 +49851,31 @@ declare module BABYLON {
             updatable?: boolean;
         }, scene?: Nullable<Scene>): Mesh;
         /**
+         * Creates a tiled box mesh
+         * * faceTiles sets the pattern, tile size and number of tiles for a face
+         * * 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 tiled box mesh
+         */
+        static CreateTiledBox(name: string, options: {
+            pattern?: number;
+            size?: number;
+            width?: number;
+            height?: number;
+            depth: number;
+            tileSize?: number;
+            tileWidth?: number;
+            tileHeight?: number;
+            faceUV?: Vector4[];
+            faceColors?: Color4[];
+            alignHorizontal?: number;
+            alignVertical?: number;
+            sideOrientation?: number;
+            updatable?: boolean;
+        }, scene?: Nullable<Scene>): Mesh;
+        /**
          * Creates a sphere mesh
          * * The parameter `diameter` sets the diameter size (float) of the sphere (default 1)
          * * You can set some different sphere dimensions, for instance to build an ellipsoid, by using the parameters `diameterX`, `diameterY` and `diameterZ` (all by default have the same value of `diameter`)
@@ -50049,6 +50266,33 @@ declare module BABYLON {
             invertUV?: boolean;
         }, scene?: Nullable<Scene>): Mesh;
         /**
+         * Creates a tiled plane mesh
+         * * You can set a limited pattern arrangement with the tiles
+         * * 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 : 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 https://doc.babylonjs.com/how_to/set_shapes#plane
+         */
+        static CreateTiledPlane(name: string, options: {
+            pattern?: number;
+            tileSize?: number;
+            tileWidth?: number;
+            tileHeight?: number;
+            size?: number;
+            width?: number;
+            height?: number;
+            alignHorizontal?: number;
+            alignVertical?: number;
+            sideOrientation?: number;
+            frontUVs?: Vector4;
+            backUVs?: Vector4;
+            updatable?: boolean;
+        }, scene?: Nullable<Scene>): Mesh;
+        /**
          * Creates a plane mesh
          * * The parameter `size` sets the size (float) of both sides of the plane at once (default 1)
          * * You can set some different plane dimensions by using the parameters `width` and `height` (both by default have the same value of `size`)
@@ -53670,10 +53914,20 @@ declare module BABYLON {
          */
         depthOfFieldBlurWidth: number;
         /**
-         * For motion blur, defines how much the image is blurred by the movement
+         * Gets how much the image is blurred by the movement while using the motion blur post-process
          */
+        /**
+        * Sets how much the image is blurred by the movement while using the motion blur post-process
+        */
         motionStrength: number;
         /**
+         * Gets wether or not the motion blur post-process is object based or screen based.
+         */
+        /**
+        * Sets wether or not the motion blur post-process should be object based or screen based
+        */
+        objectBasedMotionBlur: boolean;
+        /**
          * List of animations for the pipeline (IAnimatable implementation)
          */
         animations: Animation[];
@@ -53687,6 +53941,8 @@ declare module BABYLON {
         private _currentExposure;
         private _hdrAutoExposure;
         private _hdrCurrentLuminance;
+        private _motionStrength;
+        private _isObjectBasedMotionBlur;
         private _floatTextureType;
         private _ratio;
         private _bloomEnabled;
@@ -58372,8 +58628,6 @@ declare module BABYLON.GUI {
         private _drawGradientSquare;
         private _drawCircle;
         private _createColorWheelCanvas;
-        private _RGBtoHSV;
-        private _HSVtoRGB;
         /** @hidden */
private _draw(context: CanvasRenderingContext2D): void;
         private _pointerIsDown;
         private _updateValueFromPointer;

Playground/index-local.html

@@ -100,7 +100,7 @@
                     <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
                         <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" style="height:auto;padding: 20px;" id="qrCodeImage">QR Code Image</div>
+                            <div class="option" style="height:auto;padding: 20px;background: white;" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
                 </div>

Playground/index.html

@@ -118,7 +118,7 @@
                     <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
                         <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" style="height:auto;padding: 20px;" id="qrCodeImage">QR Code Image</div>
+                            <div class="option" style="height:auto;padding: 20px;background: white;" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
                 </div>

Playground/indexStable.html

@@ -210,7 +210,7 @@
                     <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
                         <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" style="height:auto;padding: 20px;" id="qrCodeImage">QR Code Image</div>
+                            <div class="option" style="height:auto;padding: 20px;background: white;" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
                 </div>

Playground/js/index.js

@@ -850,7 +850,9 @@ function showError(errorMessage, errorEvent) {
 
         showQRCode = function() {
             $("#qrCodeImage").empty();
-            $("#qrCodeImage").qrcode({text: window.location.href});
+            var playgroundCode = window.location.href.split("#");
+            playgroundCode.shift();
+            $("#qrCodeImage").qrcode({text: "https://playground.babylonjs.com/frame.html#"+(playgroundCode.join("#"))});
         };
 
         // Fullscreen

Playground/ts.html

@@ -391,7 +391,7 @@
                         <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
                             <i class="fa fa-chevron-right" aria-hidden="true"></i>
                             <div class="toDisplaySub">
-                                <div class="option" style="height:auto;padding: 20px;" id="qrCodeImage">QR Code Image</div>
+                                <div class="option" style="height:auto;padding: 20px;background: white;" id="qrCodeImage">QR Code Image</div>
                             </div>
                         </div>
                     </div>

Tools/Gulp/package.json

@@ -13,4 +13,4 @@
         "build": "gulp --max-old-space-size=8192 --tsLintFix",
         "start": "gulp run --max-old-space-size=8192"
     }
-}
+}

dist/preview release/babylon.d.ts

@@ -460,6 +460,16 @@ declare module BABYLON {
          */
         toLinearSpace(): Color3;
         /**
+         * Converts current color in rgb space to HSV values
+         * @returns a new color3 representing the HSV values
+         */
+        toHSV(): Color3;
+        /**
+         * Converts current color in rgb space to HSV values
+         * @param result defines the Color3 where to store the HSV values
+         */
+        toHSVToRef(result: Color3): void;
+        /**
          * Converts the Color3 values to linear space and stores the result in "convertedColor"
          * @param convertedColor defines the Color3 object where to store the linear space version
          * @returns the unmodified Color3
@@ -478,6 +488,14 @@ declare module BABYLON {
         toGammaSpaceToRef(convertedColor: Color3): Color3;
         private static _BlackReadOnly;
         /**
+         * Convert Hue, saturation and value to a Color3 (RGB)
+         * @param hue defines the hue
+         * @param saturation defines the saturation
+         * @param value defines the value
+         * @param result defines the Color3 where to store the RGB values
+         */
+        static HSVtoRGBToRef(hue: number, saturation: number, value: number, result: Color3): void;
+        /**
          * Creates a new Color3 from the string containing valid hexadecimal values
          * @param hex defines a string containing valid hexadecimal values
          * @returns a new Color3 object
@@ -54711,10 +54729,20 @@ declare module BABYLON {
          */
         depthOfFieldBlurWidth: number;
         /**
-         * For motion blur, defines how much the image is blurred by the movement
+         * Gets how much the image is blurred by the movement while using the motion blur post-process
          */
+        /**
+        * Sets how much the image is blurred by the movement while using the motion blur post-process
+        */
         motionStrength: number;
         /**
+         * Gets wether or not the motion blur post-process is object based or screen based.
+         */
+        /**
+        * Sets wether or not the motion blur post-process should be object based or screen based
+        */
+        objectBasedMotionBlur: boolean;
+        /**
          * List of animations for the pipeline (IAnimatable implementation)
          */
         animations: Animation[];
@@ -54728,6 +54756,8 @@ declare module BABYLON {
         private _currentExposure;
         private _hdrAutoExposure;
         private _hdrCurrentLuminance;
+        private _motionStrength;
+        private _isObjectBasedMotionBlur;
         private _floatTextureType;
         private _ratio;
         private _bloomEnabled;

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

@@ -462,6 +462,16 @@ declare module "babylonjs/Maths/math" {
          */
         toLinearSpace(): Color3;
         /**
+         * Converts current color in rgb space to HSV values
+         * @returns a new color3 representing the HSV values
+         */
+        toHSV(): Color3;
+        /**
+         * Converts current color in rgb space to HSV values
+         * @param result defines the Color3 where to store the HSV values
+         */
+        toHSVToRef(result: Color3): void;
+        /**
          * Converts the Color3 values to linear space and stores the result in "convertedColor"
          * @param convertedColor defines the Color3 object where to store the linear space version
          * @returns the unmodified Color3
@@ -480,6 +490,14 @@ declare module "babylonjs/Maths/math" {
         toGammaSpaceToRef(convertedColor: Color3): Color3;
         private static _BlackReadOnly;
         /**
+         * Convert Hue, saturation and value to a Color3 (RGB)
+         * @param hue defines the hue
+         * @param saturation defines the saturation
+         * @param value defines the value
+         * @param result defines the Color3 where to store the RGB values
+         */
+        static HSVtoRGBToRef(hue: number, saturation: number, value: number, result: Color3): void;
+        /**
          * Creates a new Color3 from the string containing valid hexadecimal values
          * @param hex defines a string containing valid hexadecimal values
          * @returns a new Color3 object
@@ -57337,10 +57355,20 @@ declare module "babylonjs/PostProcesses/RenderPipeline/Pipelines/standardRenderi
          */
         depthOfFieldBlurWidth: number;
         /**
-         * For motion blur, defines how much the image is blurred by the movement
+         * Gets how much the image is blurred by the movement while using the motion blur post-process
          */
+        /**
+        * Sets how much the image is blurred by the movement while using the motion blur post-process
+        */
         motionStrength: number;
         /**
+         * Gets wether or not the motion blur post-process is object based or screen based.
+         */
+        /**
+        * Sets wether or not the motion blur post-process should be object based or screen based
+        */
+        objectBasedMotionBlur: boolean;
+        /**
          * List of animations for the pipeline (IAnimatable implementation)
          */
         animations: Animation[];
@@ -57354,6 +57382,8 @@ declare module "babylonjs/PostProcesses/RenderPipeline/Pipelines/standardRenderi
         private _currentExposure;
         private _hdrAutoExposure;
         private _hdrCurrentLuminance;
+        private _motionStrength;
+        private _isObjectBasedMotionBlur;
         private _floatTextureType;
         private _ratio;
         private _bloomEnabled;
@@ -60799,6 +60829,16 @@ declare module BABYLON {
          */
         toLinearSpace(): Color3;
         /**
+         * Converts current color in rgb space to HSV values
+         * @returns a new color3 representing the HSV values
+         */
+        toHSV(): Color3;
+        /**
+         * Converts current color in rgb space to HSV values
+         * @param result defines the Color3 where to store the HSV values
+         */
+        toHSVToRef(result: Color3): void;
+        /**
          * Converts the Color3 values to linear space and stores the result in "convertedColor"
          * @param convertedColor defines the Color3 object where to store the linear space version
          * @returns the unmodified Color3
@@ -60817,6 +60857,14 @@ declare module BABYLON {
         toGammaSpaceToRef(convertedColor: Color3): Color3;
         private static _BlackReadOnly;
         /**
+         * Convert Hue, saturation and value to a Color3 (RGB)
+         * @param hue defines the hue
+         * @param saturation defines the saturation
+         * @param value defines the value
+         * @param result defines the Color3 where to store the RGB values
+         */
+        static HSVtoRGBToRef(hue: number, saturation: number, value: number, result: Color3): void;
+        /**
          * Creates a new Color3 from the string containing valid hexadecimal values
          * @param hex defines a string containing valid hexadecimal values
          * @returns a new Color3 object
@@ -115050,10 +115098,20 @@ declare module BABYLON {
          */
         depthOfFieldBlurWidth: number;
         /**
-         * For motion blur, defines how much the image is blurred by the movement
+         * Gets how much the image is blurred by the movement while using the motion blur post-process
          */
+        /**
+        * Sets how much the image is blurred by the movement while using the motion blur post-process
+        */
         motionStrength: number;
         /**
+         * Gets wether or not the motion blur post-process is object based or screen based.
+         */
+        /**
+        * Sets wether or not the motion blur post-process should be object based or screen based
+        */
+        objectBasedMotionBlur: boolean;
+        /**
          * List of animations for the pipeline (IAnimatable implementation)
          */
         animations: Animation[];
@@ -115067,6 +115125,8 @@ declare module BABYLON {
         private _currentExposure;
         private _hdrAutoExposure;
         private _hdrCurrentLuminance;
+        private _motionStrength;
+        private _isObjectBasedMotionBlur;
         private _floatTextureType;
         private _ratio;
         private _bloomEnabled;

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

@@ -2103,8 +2103,6 @@ declare module BABYLON.GUI {
         private _drawGradientSquare;
         private _drawCircle;
         private _createColorWheelCanvas;
-        private _RGBtoHSV;
-        private _HSVtoRGB;
         /** @hidden */
         _draw(context: CanvasRenderingContext2D): void;
         private _pointerIsDown;

dist/preview release/gui/babylon.gui.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -1859,7 +1859,7 @@ var ColorPicker = /** @class */ (function (_super) {
                 return;
             }
             this._value.copyFrom(value);
-            this._RGBtoHSV(this._value, this._tmpColor);
+            this._value.toHSVToRef(this._tmpColor);
             this._h = this._tmpColor.r;
             this._s = Math.max(this._tmpColor.g, 0.00001);
             this._v = Math.max(this._tmpColor.b, 0.00001);
@@ -2004,7 +2004,7 @@ var ColorPicker = /** @class */ (function (_super) {
                 }
                 var dist = Math.sqrt(distSq);
                 var ang = Math.atan2(y, x);
-                this._HSVtoRGB(ang * 180 / Math.PI + 180, dist / radius, 1, color);
+                babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].HSVtoRGBToRef(ang * 180 / Math.PI + 180, dist / radius, 1, color);
                 var index = ((x + radius) + ((y + radius) * 2 * radius)) * 4;
                 data[index] = color.r * 255;
                 data[index + 1] = color.g * 255;
@@ -2040,72 +2040,6 @@ var ColorPicker = /** @class */ (function (_super) {
         context.putImageData(image, 0, 0);
         return canvas;
     };
-    ColorPicker.prototype._RGBtoHSV = function (color, result) {
-        var r = color.r;
-        var g = color.g;
-        var b = color.b;
-        var max = Math.max(r, g, b);
-        var min = Math.min(r, g, b);
-        var h = 0;
-        var s = 0;
-        var v = max;
-        var dm = max - min;
-        if (max !== 0) {
-            s = dm / max;
-        }
-        if (max != min) {
-            if (max == r) {
-                h = (g - b) / dm;
-                if (g < b) {
-                    h += 6;
-                }
-            }
-            else if (max == g) {
-                h = (b - r) / dm + 2;
-            }
-            else if (max == b) {
-                h = (r - g) / dm + 4;
-            }
-            h *= 60;
-        }
-        result.r = h;
-        result.g = s;
-        result.b = v;
-    };
-    ColorPicker.prototype._HSVtoRGB = function (hue, saturation, value, result) {
-        var chroma = value * saturation;
-        var h = hue / 60;
-        var x = chroma * (1 - Math.abs((h % 2) - 1));
-        var r = 0;
-        var g = 0;
-        var b = 0;
-        if (h >= 0 && h <= 1) {
-            r = chroma;
-            g = x;
-        }
-        else if (h >= 1 && h <= 2) {
-            r = x;
-            g = chroma;
-        }
-        else if (h >= 2 && h <= 3) {
-            g = chroma;
-            b = x;
-        }
-        else if (h >= 3 && h <= 4) {
-            g = x;
-            b = chroma;
-        }
-        else if (h >= 4 && h <= 5) {
-            r = x;
-            b = chroma;
-        }
-        else if (h >= 5 && h <= 6) {
-            r = chroma;
-            b = x;
-        }
-        var m = value - chroma;
-        result.set((r + m), (g + m), (b + m));
-    };
     /** @hidden */
     ColorPicker.prototype._draw = function (context) {
         context.save();
@@ -2157,7 +2091,7 @@ var ColorPicker = /** @class */ (function (_super) {
             this._v = Math.min(this._v, 1);
             this._v = Math.max(this._v, ColorPicker._Epsilon);
         }
-        this._HSVtoRGB(this._h, this._s, this._v, this._tmpColor);
+        babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"].HSVtoRGBToRef(this._h, this._s, this._v, this._tmpColor);
         this.value = this._tmpColor;
     };
     ColorPicker.prototype._isPointOnSquare = function (x, y) {

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

@@ -2178,8 +2178,6 @@ declare module "babylonjs-gui/2D/controls/colorpicker" {
         private _drawGradientSquare;
         private _drawCircle;
         private _createColorWheelCanvas;
-        private _RGBtoHSV;
-        private _HSVtoRGB;
         /** @hidden */
         _draw(context: CanvasRenderingContext2D): void;
         private _pointerIsDown;
@@ -5960,8 +5958,6 @@ declare module BABYLON.GUI {
         private _drawGradientSquare;
         private _drawCircle;
         private _createColorWheelCanvas;
-        private _RGBtoHSV;
-        private _HSVtoRGB;
         /** @hidden */
         _draw(context: CanvasRenderingContext2D): void;
         private _pointerIsDown;

dist/preview release/gui/package.json

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

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

@@ -1611,6 +1611,9 @@ declare module INSPECTOR {
         private _onPointerObserver;
         private _onSelectionChangeObserver;
         private _selectedEntity;
+        private _posDragEnd;
+        private _scaleDragEnd;
+        private _rotateDragEnd;
         constructor(props: ISceneTreeItemComponentProps);
         shouldComponentUpdate(nextProps: ISceneTreeItemComponentProps, nextState: {
             isSelected: boolean;

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

@@ -2060,6 +2060,9 @@ declare module "babylonjs-inspector/components/sceneExplorer/entities/sceneTreeI
         private _onPointerObserver;
         private _onSelectionChangeObserver;
         private _selectedEntity;
+        private _posDragEnd;
+        private _scaleDragEnd;
+        private _rotateDragEnd;
         constructor(props: ISceneTreeItemComponentProps);
         shouldComponentUpdate(nextProps: ISceneTreeItemComponentProps, nextState: {
             isSelected: boolean;
@@ -3802,6 +3805,9 @@ declare module INSPECTOR {
         private _onPointerObserver;
         private _onSelectionChangeObserver;
         private _selectedEntity;
+        private _posDragEnd;
+        private _scaleDragEnd;
+        private _rotateDragEnd;
         constructor(props: ISceneTreeItemComponentProps);
         shouldComponentUpdate(nextProps: ISceneTreeItemComponentProps, nextState: {
             isSelected: boolean;

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "4.0.3",
+    "version": "4.1.0-alpha.0",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -31,11 +31,11 @@
     "dependencies": {
         "@types/react": "~16.7.3",
         "@types/react-dom": "~16.0.9",
-        "babylonjs": "4.0.3",
-        "babylonjs-gui": "4.0.3",
-        "babylonjs-loaders": "4.0.3",
-        "babylonjs-serializers": "4.0.3",
-        "babylonjs-gltf2interface": "4.0.3"
+        "babylonjs": "4.1.0-alpha.0",
+        "babylonjs-gui": "4.1.0-alpha.0",
+        "babylonjs-loaders": "4.1.0-alpha.0",
+        "babylonjs-serializers": "4.1.0-alpha.0",
+        "babylonjs-gltf2interface": "4.1.0-alpha.0"
     },
     "engines": {
         "node": "*"

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

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

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/loaders/package.json

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

dist/preview release/materialsLibrary/babylon.cellMaterial.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/materialsLibrary/babylon.customMaterial.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/materialsLibrary/babylon.fireMaterial.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/materialsLibrary/babylon.furMaterial.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/materialsLibrary/babylon.gradientMaterial.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/materialsLibrary/babylon.gridMaterial.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/materialsLibrary/babylon.lavaMaterial.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/materialsLibrary/babylon.mixMaterial.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/materialsLibrary/babylon.normalMaterial.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/materialsLibrary/babylon.shadowOnlyMaterial.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/materialsLibrary/babylon.simpleMaterial.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/materialsLibrary/babylon.skyMaterial.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/materialsLibrary/babylon.terrainMaterial.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/materialsLibrary/babylon.triPlanarMaterial.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/materialsLibrary/babylon.waterMaterial.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/materialsLibrary/babylonjs.materials.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/materialsLibrary/package.json

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

dist/preview release/package.json

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

dist/preview release/packagesSizeBaseLine.json

@@ -1 +1 @@
-{"engineOnly":290133,"sceneOnly":499691,"minGridMaterial":626509,"minStandardMaterial":751268}
+{"engineOnly":290697,"sceneOnly":500458,"minGridMaterial":627440,"minStandardMaterial":752199}

dist/preview release/postProcessesLibrary/babylon.asciiArtPostProcess.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/postProcessesLibrary/babylon.digitalRainPostProcess.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/postProcessesLibrary/babylon.oceanPostProcess.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/postProcessesLibrary/babylonjs.postProcess.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/postProcessesLibrary/package.json

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

dist/preview release/proceduralTexturesLibrary/babylon.brickProceduralTexture.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/proceduralTexturesLibrary/babylon.cloudProceduralTexture.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/proceduralTexturesLibrary/babylon.fireProceduralTexture.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/proceduralTexturesLibrary/babylon.grassProceduralTexture.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/proceduralTexturesLibrary/babylon.marbleProceduralTexture.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/proceduralTexturesLibrary/babylon.normalMapProceduralTexture.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/proceduralTexturesLibrary/babylon.perlinNoiseProceduralTexture.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/proceduralTexturesLibrary/babylon.roadProceduralTexture.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/proceduralTexturesLibrary/babylon.starfieldProceduralTexture.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/proceduralTexturesLibrary/babylon.woodProceduralTexture.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/proceduralTexturesLibrary/babylonjs.proceduralTextures.js

@@ -98,7 +98,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
 /*!***********************************************************!*\
-  !*** D:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  !*** E:/Repos/Babylon.js/node_modules/tslib/tslib.es6.js ***!
   \***********************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {

dist/preview release/proceduralTexturesLibrary/package.json

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

dist/preview release/serializers/package.json

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

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

@@ -462,6 +462,16 @@ declare module "babylonjs/Maths/math" {
          */
         toLinearSpace(): Color3;
         /**
+         * Converts current color in rgb space to HSV values
+         * @returns a new color3 representing the HSV values
+         */
+        toHSV(): Color3;
+        /**
+         * Converts current color in rgb space to HSV values
+         * @param result defines the Color3 where to store the HSV values
+         */
+        toHSVToRef(result: Color3): void;
+        /**
          * Converts the Color3 values to linear space and stores the result in "convertedColor"
          * @param convertedColor defines the Color3 object where to store the linear space version
          * @returns the unmodified Color3
@@ -480,6 +490,14 @@ declare module "babylonjs/Maths/math" {
         toGammaSpaceToRef(convertedColor: Color3): Color3;
         private static _BlackReadOnly;
         /**
+         * Convert Hue, saturation and value to a Color3 (RGB)
+         * @param hue defines the hue
+         * @param saturation defines the saturation
+         * @param value defines the value
+         * @param result defines the Color3 where to store the RGB values
+         */
+        static HSVtoRGBToRef(hue: number, saturation: number, value: number, result: Color3): void;
+        /**
          * Creates a new Color3 from the string containing valid hexadecimal values
          * @param hex defines a string containing valid hexadecimal values
          * @returns a new Color3 object
@@ -57337,10 +57355,20 @@ declare module "babylonjs/PostProcesses/RenderPipeline/Pipelines/standardRenderi
          */
         depthOfFieldBlurWidth: number;
         /**
-         * For motion blur, defines how much the image is blurred by the movement
+         * Gets how much the image is blurred by the movement while using the motion blur post-process
          */
+        /**
+        * Sets how much the image is blurred by the movement while using the motion blur post-process
+        */
         motionStrength: number;
         /**
+         * Gets wether or not the motion blur post-process is object based or screen based.
+         */
+        /**
+        * Sets wether or not the motion blur post-process should be object based or screen based
+        */
+        objectBasedMotionBlur: boolean;
+        /**
          * List of animations for the pipeline (IAnimatable implementation)
          */
         animations: Animation[];
@@ -57354,6 +57382,8 @@ declare module "babylonjs/PostProcesses/RenderPipeline/Pipelines/standardRenderi
         private _currentExposure;
         private _hdrAutoExposure;
         private _hdrCurrentLuminance;
+        private _motionStrength;
+        private _isObjectBasedMotionBlur;
         private _floatTextureType;
         private _ratio;
         private _bloomEnabled;
@@ -60799,6 +60829,16 @@ declare module BABYLON {
          */
         toLinearSpace(): Color3;
         /**
+         * Converts current color in rgb space to HSV values
+         * @returns a new color3 representing the HSV values
+         */
+        toHSV(): Color3;
+        /**
+         * Converts current color in rgb space to HSV values
+         * @param result defines the Color3 where to store the HSV values
+         */
+        toHSVToRef(result: Color3): void;
+        /**
          * Converts the Color3 values to linear space and stores the result in "convertedColor"
          * @param convertedColor defines the Color3 object where to store the linear space version
          * @returns the unmodified Color3
@@ -60817,6 +60857,14 @@ declare module BABYLON {
         toGammaSpaceToRef(convertedColor: Color3): Color3;
         private static _BlackReadOnly;
         /**
+         * Convert Hue, saturation and value to a Color3 (RGB)
+         * @param hue defines the hue
+         * @param saturation defines the saturation
+         * @param value defines the value
+         * @param result defines the Color3 where to store the RGB values
+         */
+        static HSVtoRGBToRef(hue: number, saturation: number, value: number, result: Color3): void;
+        /**
          * Creates a new Color3 from the string containing valid hexadecimal values
          * @param hex defines a string containing valid hexadecimal values
          * @returns a new Color3 object
@@ -115050,10 +115098,20 @@ declare module BABYLON {
          */
         depthOfFieldBlurWidth: number;
         /**
-         * For motion blur, defines how much the image is blurred by the movement
+         * Gets how much the image is blurred by the movement while using the motion blur post-process
          */
+        /**
+        * Sets how much the image is blurred by the movement while using the motion blur post-process
+        */
         motionStrength: number;
         /**
+         * Gets wether or not the motion blur post-process is object based or screen based.
+         */
+        /**
+        * Sets wether or not the motion blur post-process should be object based or screen based
+        */
+        objectBasedMotionBlur: boolean;
+        /**
          * List of animations for the pipeline (IAnimatable implementation)
          */
         animations: Animation[];
@@ -115067,6 +115125,8 @@ declare module BABYLON {
         private _currentExposure;
         private _hdrAutoExposure;
         private _hdrCurrentLuminance;
+        private _motionStrength;
+        private _isObjectBasedMotionBlur;
         private _floatTextureType;
         private _ratio;
         private _bloomEnabled;

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

@@ -7,8 +7,8 @@
 //   ../../../../../Tools/Gulp/babylonjs-loaders
 //   ../../../../../Tools/Gulp/babylonjs/Misc/observable
 //   ../../../../../Tools/Gulp/babylonjs/Engines/engine
-//   ../../../../../Tools/Gulp/babylonjs/scene
 //   ../../../../../Tools/Gulp/babylonjs/Loading/sceneLoader
+//   ../../../../../Tools/Gulp/babylonjs/scene
 //   ../../../../../Tools/Gulp/babylonjs/Meshes/abstractMesh
 //   ../../../../../Tools/Gulp/babylonjs/Particles/IParticleSystem
 //   ../../../../../Tools/Gulp/babylonjs/Bones/skeleton
@@ -197,11 +197,11 @@ declare module BabylonViewer {
                 * Mainly used for help and errors
                 * @param subScreen the name of the subScreen. Those can be defined in the configuration object
                 */
-            showOverlayScreen(subScreen: string): Promise<Template> | Promise<string>;
+            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
             /**
                 * Hide the overlay screen.
                 */
-            hideOverlayScreen(): Promise<Template> | Promise<string>;
+            hideOverlayScreen(): Promise<string> | Promise<Template>;
             /**
                 * show the viewer (in case it was hidden)
                 *
@@ -218,17 +218,252 @@ declare module BabylonViewer {
                 * Show the loading screen.
                 * The loading screen can be configured using the configuration object
                 */
-            showLoadingScreen(): Promise<Template> | Promise<string>;
+            showLoadingScreen(): Promise<string> | Promise<Template>;
             /**
                 * Hide the loading screen
                 */
-            hideLoadingScreen(): Promise<Template> | Promise<string>;
+            hideLoadingScreen(): Promise<string> | Promise<Template>;
             dispose(): void;
             protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
     }
 }
 declare module BabylonViewer {
     /**
+        * The AbstractViewer is the center of Babylon's viewer.
+        * It is the basic implementation of the default viewer and is responsible of loading and showing the model and the templates
+        */
+    export abstract class AbstractViewer {
+            containerElement: Element;
+            /**
+                * Babylon BABYLON.Engine corresponding with this viewer
+                */
+            engine: BABYLON.Engine;
+            /**
+                * The ID of this viewer. it will be generated randomly or use the HTML Element's ID.
+                */
+            readonly baseId: string;
+            /**
+                * The last loader used to load a model.
+                * @deprecated
+                */
+            lastUsedLoader: BABYLON.ISceneLoaderPlugin | BABYLON.ISceneLoaderPluginAsync;
+            /**
+                * The ModelLoader instance connected with this viewer.
+                */
+            modelLoader: ModelLoader;
+            /**
+                * A flag that controls whether or not the render loop should be executed
+                */
+            runRenderLoop: boolean;
+            /**
+                * The scene manager connected with this viewer instance
+                */
+            sceneManager: SceneManager;
+            /**
+                * Will notify when the scene was initialized
+                */
+            readonly onSceneInitObservable: BABYLON.Observable<BABYLON.Scene>;
+            /**
+                * will notify when the engine was initialized
+                */
+            readonly onEngineInitObservable: BABYLON.Observable<BABYLON.Engine>;
+            /**
+                * Will notify when a new model was added to the scene.
+                * Note that added does not neccessarily mean loaded!
+                */
+            readonly onModelAddedObservable: BABYLON.Observable<ViewerModel>;
+            /**
+                * will notify after every model load
+                */
+            readonly onModelLoadedObservable: BABYLON.Observable<ViewerModel>;
+            /**
+                * will notify when any model notify of progress
+                */
+            readonly onModelLoadProgressObservable: BABYLON.Observable<BABYLON.SceneLoaderProgressEvent>;
+            /**
+                * will notify when any model load failed.
+                */
+            readonly onModelLoadErrorObservable: BABYLON.Observable<{
+                    message: string;
+                    exception: any;
+            }>;
+            /**
+                * Will notify when a model was removed from the scene;
+                */
+            readonly onModelRemovedObservable: BABYLON.Observable<ViewerModel>;
+            /**
+                * will notify when a new loader was initialized.
+                * Used mainly to know when a model starts loading.
+                */
+            readonly onLoaderInitObservable: BABYLON.Observable<BABYLON.ISceneLoaderPlugin | BABYLON.ISceneLoaderPluginAsync>;
+            /**
+                * Observers registered here will be executed when the entire load process has finished.
+                */
+            readonly onInitDoneObservable: BABYLON.Observable<AbstractViewer>;
+            /**
+                * Functions added to this observable will be executed on each frame rendered.
+                */
+            readonly onFrameRenderedObservable: BABYLON.Observable<AbstractViewer>;
+            /**
+                * Observers registered here will be executed when VR more is entered.
+                */
+            readonly onEnteringVRObservable: BABYLON.Observable<AbstractViewer>;
+            /**
+                * Observers registered here will be executed when VR mode is exited.
+                */
+            readonly onExitingVRObservable: BABYLON.Observable<AbstractViewer>;
+            observablesManager: ObservablesManager;
+            /**
+                * The canvas associated with this viewer
+                */
+            protected _canvas: HTMLCanvasElement;
+            /**
+                * The (single) canvas of this viewer
+                */
+            readonly canvas: HTMLCanvasElement;
+            /**
+                * is this viewer disposed?
+                */
+            protected _isDisposed: boolean;
+            /**
+                * registered onBeforeRender functions.
+                * This functions are also registered at the native scene. The reference can be used to unregister them.
+                */
+            protected _registeredOnBeforeRenderFunctions: Array<() => void>;
+            /**
+                * The configuration loader of this viewer
+                */
+            protected _configurationLoader: RenderOnlyConfigurationLoader;
+            /**
+                * Is the viewer already initialized. for internal use.
+                */
+            protected _isInit: boolean;
+            protected _configurationContainer: ConfigurationContainer;
+            readonly configurationContainer: ConfigurationContainer;
+            protected getConfigurationLoader(): RenderOnlyConfigurationLoader;
+            constructor(containerElement: Element, initialConfiguration?: ViewerConfiguration);
+            /**
+                * get the baseId of this viewer
+                */
+            getBaseId(): string;
+            /**
+                * Do we have a canvas to render on, and is it a part of the scene
+                */
+            isCanvasInDOM(): boolean;
+            /**
+             * Set the viewer's background rendering flag.
+             */
+            renderInBackground: boolean;
+            /**
+                * Get the configuration object. This is a reference only.
+                * The configuration can ONLY be updated using the updateConfiguration function.
+                * changing this object will have no direct effect on the scene.
+                */
+            readonly configuration: ViewerConfiguration;
+            /**
+                * force resizing the engine.
+                */
+            forceResize(): void;
+            protected _hdToggled: boolean;
+            toggleHD(): void;
+            protected _vrToggled: boolean;
+            protected _vrScale: number;
+            protected _vrInit: boolean;
+            toggleVR(): void;
+            protected _initVR(): void;
+            /**
+                * The resize function that will be registered with the window object
+                */
+            protected _resize: () => void;
+            protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
+            /**
+                * Force a single render loop execution.
+                */
+            forceRender(): void;
+            /**
+                * render loop that will be executed by the engine
+                */
+            protected _render: (force?: boolean) => void;
+            /**
+                * Takes a screenshot of the scene and returns it as a base64 encoded png.
+                * @param callback optional callback that will be triggered when screenshot is done.
+                * @param width Optional screenshot width (default to 512).
+                * @param height Optional screenshot height (default to 512).
+                * @returns a promise with the screenshot data
+                */
+            takeScreenshot(callback?: (data: string) => void, width?: number, height?: number): Promise<string>;
+            /**
+                * Update the current viewer configuration with new values.
+                * Only provided information will be updated, old configuration values will be kept.
+                * If this.configuration was manually changed, you can trigger this function with no parameters,
+                * and the entire configuration will be updated.
+                * @param newConfiguration the partial configuration to update or a URL to a JSON holding the updated configuration
+                *
+                */
+            updateConfiguration(newConfiguration?: Partial<ViewerConfiguration> | string): void;
+            /**
+                * this is used to register native functions using the configuration object.
+                * This will configure the observers.
+                * @param observersConfiguration observers configuration
+                */
+            protected _configureObservers(observersConfiguration: IObserversConfiguration): void;
+            /**
+                * Dispose the entire viewer including the scene and the engine
+                */
+            dispose(): void;
+            /**
+                * This will prepare the container element for the viewer
+                */
+            protected abstract _prepareContainerElement(): any;
+            /**
+                * This function will execute when the HTML templates finished initializing.
+                * It should initialize the engine and continue execution.
+                *
+                * @returns {Promise<AbstractViewer>} The viewer object will be returned after the object was loaded.
+                */
+            protected _onTemplatesLoaded(): Promise<AbstractViewer>;
+            /**
+                * This will force the creation of an engine and a scene.
+                * It will also load a model if preconfigured.
+                * But first - it will load the extendible onTemplateLoaded()!
+                */
+            protected _onTemplateLoaded(): Promise<AbstractViewer>;
+            /**
+                * Initialize the engine. Retruns a promise in case async calls are needed.
+                *
+                * @protected
+                * @returns {Promise<BABYLON.Engine>}
+                * @memberof Viewer
+                */
+            protected _initEngine(): Promise<BABYLON.Engine>;
+            /**
+                * Initialize a model loading. The returned object (a ViewerModel object) will be loaded in the background.
+                * The difference between this and loadModel is that loadModel will fulfill the promise when the model finished loading.
+                *
+                * @param modelConfig model configuration to use when loading the model.
+                * @param clearScene should the scene be cleared before loading this model
+                * @returns a ViewerModel object that is not yet fully loaded.
+                */
+            initModel(modelConfig: string | File | IModelConfiguration, clearScene?: boolean): ViewerModel;
+            /**
+                * load a model using the provided configuration.
+                * This function, as opposed to initModel, will return a promise that resolves when the model is loaded, and rejects with error.
+                * If you want to attach to the observables of the model, use initModle instead.
+                *
+                * @param modelConfig the model configuration or URL to load.
+                * @param clearScene Should the scene be cleared before loading the model
+                * @returns a Promise the fulfills when the model finished loading successfully.
+                */
+            loadModel(modelConfig: string | File | IModelConfiguration, clearScene?: boolean): Promise<ViewerModel>;
+            protected _initTelemetryEvents(): void;
+            /**
+                * Injects all the spectre shader in the babylon shader store
+                */
+            protected _injectCustomShaders(): void;
+    }
+}
+declare module BabylonViewer {
+    /**
         * The data structure of a telemetry event.
         */
     export interface TelemetryData {
@@ -716,7 +951,7 @@ declare module BabylonViewer {
       * @param name the name of the custom optimizer configuration
       * @param upgrade set to true if you want to upgrade optimizer and false if you want to degrade
       */
-    export function getCustomOptimizerByName(name: string, upgrade?: boolean): typeof extendedUpgrade;
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): (sceneManager: SceneManager) => boolean;
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 declare module BabylonViewer {
@@ -1011,69 +1246,27 @@ declare module BabylonViewer {
     }
 }
 declare module BabylonViewer {
-    export interface IModelConfiguration {
-            id?: string;
-            url?: string;
-            root?: string;
-            file?: string | File;
-            loader?: string;
-            position?: {
-                    x: number;
-                    y: number;
-                    z: number;
-            };
-            rotation?: {
-                    x: number;
-                    y: number;
-                    z: number;
-                    w?: number;
-            };
-            scaling?: {
-                    x: number;
-                    y: number;
-                    z: number;
-            };
-            parentObjectIndex?: number;
-            castShadow?: boolean;
-            receiveShadows?: boolean;
-            normalize?: boolean | {
-                    center?: boolean;
-                    unitSize?: boolean;
-                    parentIndex?: number;
-            };
-            title?: string;
-            subtitle?: string;
-            thumbnail?: string;
-            animation?: {
-                    autoStart?: boolean | string;
-                    playOnce?: boolean;
-                    autoStartIndex?: number;
-            };
-            entryAnimation?: IModelAnimationConfiguration;
-            exitAnimation?: IModelAnimationConfiguration;
-            material?: {
-                    directEnabled?: boolean;
-                    directIntensity?: number;
-                    emissiveIntensity?: number;
-                    environmentIntensity?: number;
-                    [propName: string]: any;
-            };
+    /**
+        * The configuration loader will load the configuration object from any source and will use the defined mapper to
+        * parse the object and return a conform ViewerConfiguration.
+        * It is a private member of the scene.
+        */
+    export class RenderOnlyConfigurationLoader {
+            constructor(_enableCache?: boolean);
+            protected getExtendedConfig(type: string | undefined): ViewerConfiguration;
             /**
-                * Rotation offset axis definition
+                * load a configuration object that is defined in the initial configuration provided.
+                * The viewer configuration can extend different types of configuration objects and have an extra configuration defined.
+                *
+                * @param initConfig the initial configuration that has the definitions of further configuration to load.
+                * @param callback an optional callback that will be called sync, if noconfiguration needs to be loaded or configuration is payload-only
+                * @returns A promise that delivers the extended viewer configuration, when done.
                 */
-            rotationOffsetAxis?: {
-                    x: number;
-                    y: number;
-                    z: number;
-            };
+            loadConfiguration(initConfig?: ViewerConfiguration, callback?: (config: ViewerConfiguration) => void): Promise<ViewerConfiguration>;
             /**
-                * the offset angle
+                * Dispose the configuration loader. This will cancel file requests, if active.
                 */
-            rotationOffsetAngle?: number;
-            loaderConfiguration?: {
-                    maxLODsToLoad?: number;
-                    progressiveLoading?: boolean;
-            };
+            dispose(): void;
     }
 }
 declare module BabylonViewer {
@@ -1141,33 +1334,6 @@ declare module BabylonViewer {
 }
 declare module BabylonViewer {
     /**
-        * Get a loader plugin according to its name.
-        * The plugin will be cached and will be reused if called for again.
-        *
-        * @param name the name of the plugin
-        */
-    export function getLoaderPluginByName(name: string): ILoaderPlugin;
-    /**
-        *
-        */
-    export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
-}
-declare module BabylonViewer {
-    /**
-        * A custom upgrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedUpgrade(sceneManager: SceneManager): boolean;
-    /**
-        * A custom degrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedDegrade(sceneManager: SceneManager): boolean;
-}
-declare module BabylonViewer {
-    /**
         * This interface describes the structure of the variable sent with the configuration observables of the scene manager.
         * O - the type of object we are dealing with (Light, BABYLON.ArcRotateCamera, BABYLON.Scene, etc')
         * T - the configuration type
@@ -1349,6 +1515,85 @@ declare module BabylonViewer {
     }
 }
 declare module BabylonViewer {
+    export interface IModelConfiguration {
+            id?: string;
+            url?: string;
+            root?: string;
+            file?: string | File;
+            loader?: string;
+            position?: {
+                    x: number;
+                    y: number;
+                    z: number;
+            };
+            rotation?: {
+                    x: number;
+                    y: number;
+                    z: number;
+                    w?: number;
+            };
+            scaling?: {
+                    x: number;
+                    y: number;
+                    z: number;
+            };
+            parentObjectIndex?: number;
+            castShadow?: boolean;
+            receiveShadows?: boolean;
+            normalize?: boolean | {
+                    center?: boolean;
+                    unitSize?: boolean;
+                    parentIndex?: number;
+            };
+            title?: string;
+            subtitle?: string;
+            thumbnail?: string;
+            animation?: {
+                    autoStart?: boolean | string;
+                    playOnce?: boolean;
+                    autoStartIndex?: number;
+            };
+            entryAnimation?: IModelAnimationConfiguration;
+            exitAnimation?: IModelAnimationConfiguration;
+            material?: {
+                    directEnabled?: boolean;
+                    directIntensity?: number;
+                    emissiveIntensity?: number;
+                    environmentIntensity?: number;
+                    [propName: string]: any;
+            };
+            /**
+                * Rotation offset axis definition
+                */
+            rotationOffsetAxis?: {
+                    x: number;
+                    y: number;
+                    z: number;
+            };
+            /**
+                * the offset angle
+                */
+            rotationOffsetAngle?: number;
+            loaderConfiguration?: {
+                    maxLODsToLoad?: number;
+                    progressiveLoading?: boolean;
+            };
+    }
+}
+declare module BabylonViewer {
+    /**
+        * Get a loader plugin according to its name.
+        * The plugin will be cached and will be reused if called for again.
+        *
+        * @param name the name of the plugin
+        */
+    export function getLoaderPluginByName(name: string): ILoaderPlugin;
+    /**
+        *
+        */
+    export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
+}
+declare module BabylonViewer {
     export interface IEnvironmentMapConfiguration {
             /**
                 * Environment map texture path in relative to the asset folder.
@@ -1412,6 +1657,54 @@ declare module BabylonViewer {
 }
 declare module BabylonViewer {
     /**
+        * The ViewerLabs class will hold functions that are not (!) backwards compatible.
+        * The APIs in all labs-related classes and configuration  might change.
+        * Once stable, lab features will be moved to the publis API and configuration object.
+        */
+    export class ViewerLabs {
+            constructor(_scene: BABYLON.Scene);
+            assetsRootURL: string;
+            environment: PBREnvironment;
+            /**
+                        * Loads an environment map from a given URL
+                        * @param url URL of environment map
+                        * @param onSuccess Callback fired after environment successfully applied to the scene
+                        * @param onProgress Callback fired at progress events while loading the environment map
+                        * @param onError Callback fired when the load fails
+                        */
+            loadEnvironment(url: string, onSuccess?: (env: PBREnvironment) => void, onProgress?: (bytesLoaded: number, bytesTotal: number) => void, onError?: (e: any) => void): void;
+            /**
+                * Loads an environment map from a given URL
+                * @param buffer ArrayBuffer containing environment map
+                * @param onSuccess Callback fired after environment successfully applied to the scene
+                * @param onProgress Callback fired at progress events while loading the environment map
+                * @param onError Callback fired when the load fails
+                */
+            loadEnvironment(buffer: ArrayBuffer, onSuccess?: (env: PBREnvironment) => void, onProgress?: (bytesLoaded: number, bytesTotal: number) => void, onError?: (e: any) => void): void;
+            /**
+                * Sets the environment to an already loaded environment
+                * @param env PBREnvironment instance
+                * @param onSuccess Callback fired after environment successfully applied to the scene
+                * @param onProgress Callback fired at progress events while loading the environment map
+                * @param onError Callback fired when the load fails
+                */
+            loadEnvironment(env: PBREnvironment, onSuccess?: (env: PBREnvironment) => void, onProgress?: (bytesLoaded: number, bytesTotal: number) => void, onError?: (e: any) => void): void;
+            /**
+                * Applies an `EnvironmentMapConfiguration` to the scene
+                * @param environmentMapConfiguration Environment map configuration to apply
+                */
+            applyEnvironmentMapConfiguration(rotationY?: number): void;
+            /**
+                * Get an environment asset url by using the configuration if the path is not absolute.
+                * @param url Asset url
+                * @returns The Asset url using the `environmentAssetsRootURL` if the url is not an absolute path.
+                */
+            getAssetUrl(url: string): string;
+            rotateShadowLight(shadowLight: BABYLON.ShadowLight, amount: number, point?: BABYLON.Vector3, axis?: BABYLON.Vector3, target?: BABYLON.Vector3): void;
+    }
+}
+declare module BabylonViewer {
+    /**
         * Defines an animation to be applied to a model (translation, scale or rotation).
         */
     export interface IModelAnimationConfiguration {
@@ -1474,54 +1767,6 @@ declare module BabylonViewer {
     }
 }
 declare module BabylonViewer {
-    /**
-        * The ViewerLabs class will hold functions that are not (!) backwards compatible.
-        * The APIs in all labs-related classes and configuration  might change.
-        * Once stable, lab features will be moved to the publis API and configuration object.
-        */
-    export class ViewerLabs {
-            constructor(_scene: BABYLON.Scene);
-            assetsRootURL: string;
-            environment: PBREnvironment;
-            /**
-                        * Loads an environment map from a given URL
-                        * @param url URL of environment map
-                        * @param onSuccess Callback fired after environment successfully applied to the scene
-                        * @param onProgress Callback fired at progress events while loading the environment map
-                        * @param onError Callback fired when the load fails
-                        */
-            loadEnvironment(url: string, onSuccess?: (env: PBREnvironment) => void, onProgress?: (bytesLoaded: number, bytesTotal: number) => void, onError?: (e: any) => void): void;
-            /**
-                * Loads an environment map from a given URL
-                * @param buffer ArrayBuffer containing environment map
-                * @param onSuccess Callback fired after environment successfully applied to the scene
-                * @param onProgress Callback fired at progress events while loading the environment map
-                * @param onError Callback fired when the load fails
-                */
-            loadEnvironment(buffer: ArrayBuffer, onSuccess?: (env: PBREnvironment) => void, onProgress?: (bytesLoaded: number, bytesTotal: number) => void, onError?: (e: any) => void): void;
-            /**
-                * Sets the environment to an already loaded environment
-                * @param env PBREnvironment instance
-                * @param onSuccess Callback fired after environment successfully applied to the scene
-                * @param onProgress Callback fired at progress events while loading the environment map
-                * @param onError Callback fired when the load fails
-                */
-            loadEnvironment(env: PBREnvironment, onSuccess?: (env: PBREnvironment) => void, onProgress?: (bytesLoaded: number, bytesTotal: number) => void, onError?: (e: any) => void): void;
-            /**
-                * Applies an `EnvironmentMapConfiguration` to the scene
-                * @param environmentMapConfiguration Environment map configuration to apply
-                */
-            applyEnvironmentMapConfiguration(rotationY?: number): void;
-            /**
-                * Get an environment asset url by using the configuration if the path is not absolute.
-                * @param url Asset url
-                * @returns The Asset url using the `environmentAssetsRootURL` if the url is not an absolute path.
-                */
-            getAssetUrl(url: string): string;
-            rotateShadowLight(shadowLight: BABYLON.ShadowLight, amount: number, point?: BABYLON.Vector3, axis?: BABYLON.Vector3, target?: BABYLON.Vector3): void;
-    }
-}
-declare module BabylonViewer {
     export interface ICameraConfiguration {
         position?: {
             x: number;
@@ -1982,30 +2227,6 @@ declare module BabylonViewer {
 }
 declare module BabylonViewer {
     /**
-        * The configuration loader will load the configuration object from any source and will use the defined mapper to
-        * parse the object and return a conform ViewerConfiguration.
-        * It is a private member of the scene.
-        */
-    export class RenderOnlyConfigurationLoader {
-            constructor(_enableCache?: boolean);
-            protected getExtendedConfig(type: string | undefined): ViewerConfiguration;
-            /**
-                * load a configuration object that is defined in the initial configuration provided.
-                * The viewer configuration can extend different types of configuration objects and have an extra configuration defined.
-                *
-                * @param initConfig the initial configuration that has the definitions of further configuration to load.
-                * @param callback an optional callback that will be called sync, if noconfiguration needs to be loaded or configuration is payload-only
-                * @returns A promise that delivers the extended viewer configuration, when done.
-                */
-            loadConfiguration(initConfig?: ViewerConfiguration, callback?: (config: ViewerConfiguration) => void): Promise<ViewerConfiguration>;
-            /**
-                * Dispose the configuration loader. This will cancel file requests, if active.
-                */
-            dispose(): void;
-    }
-}
-declare module BabylonViewer {
-    /**
         * Spherical polynomial coefficients (counter part to spherical harmonic coefficients used in shader irradiance calculation)
         * @ignoreChildren
         */

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

@@ -8,8 +8,8 @@
 //   ../../../../../Tools/Gulp/babylonjs-loaders
 //   ../../../../../Tools/Gulp/babylonjs/Misc/observable
 //   ../../../../../Tools/Gulp/babylonjs/Engines/engine
-//   ../../../../../Tools/Gulp/babylonjs/scene
 //   ../../../../../Tools/Gulp/babylonjs/Loading/sceneLoader
+//   ../../../../../Tools/Gulp/babylonjs/scene
 //   ../../../../../Tools/Gulp/babylonjs/Meshes/abstractMesh
 //   ../../../../../Tools/Gulp/babylonjs/Particles/IParticleSystem
 //   ../../../../../Tools/Gulp/babylonjs/Bones/skeleton
@@ -230,11 +230,11 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * Mainly used for help and errors
                 * @param subScreen the name of the subScreen. Those can be defined in the configuration object
                 */
-            showOverlayScreen(subScreen: string): Promise<Template> | Promise<string>;
+            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
             /**
                 * Hide the overlay screen.
                 */
-            hideOverlayScreen(): Promise<Template> | Promise<string>;
+            hideOverlayScreen(): Promise<string> | Promise<Template>;
             /**
                 * show the viewer (in case it was hidden)
                 *
@@ -251,18 +251,261 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * Show the loading screen.
                 * The loading screen can be configured using the configuration object
                 */
-            showLoadingScreen(): Promise<Template> | Promise<string>;
+            showLoadingScreen(): Promise<string> | Promise<Template>;
             /**
                 * Hide the loading screen
                 */
-            hideLoadingScreen(): Promise<Template> | Promise<string>;
+            hideLoadingScreen(): Promise<string> | Promise<Template>;
             dispose(): void;
             protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
     }
 }
 
 declare module 'babylonjs-viewer/viewer/viewer' {
-    
+    import { Engine } from 'babylonjs/Engines/engine';
+    import { ISceneLoaderPlugin, ISceneLoaderPluginAsync, SceneLoaderProgressEvent } from 'babylonjs/Loading/sceneLoader';
+    import { Observable } from 'babylonjs/Misc/observable';
+    import { Scene } from 'babylonjs/scene';
+    import { IModelConfiguration, IObserversConfiguration, ViewerConfiguration } from 'babylonjs-viewer/configuration';
+    import { ConfigurationContainer } from 'babylonjs-viewer/configuration/configurationContainer';
+    import { RenderOnlyConfigurationLoader } from 'babylonjs-viewer/configuration/renderOnlyLoader';
+    import { ModelLoader } from 'babylonjs-viewer/loader/modelLoader';
+    import { ObservablesManager } from 'babylonjs-viewer/managers/observablesManager';
+    import { SceneManager } from 'babylonjs-viewer/managers/sceneManager';
+    import { ViewerModel } from 'babylonjs-viewer/model/viewerModel';
+    /**
+        * The AbstractViewer is the center of Babylon's viewer.
+        * It is the basic implementation of the default viewer and is responsible of loading and showing the model and the templates
+        */
+    export abstract class AbstractViewer {
+            containerElement: Element;
+            /**
+                * Babylon Engine corresponding with this viewer
+                */
+            engine: Engine;
+            /**
+                * The ID of this viewer. it will be generated randomly or use the HTML Element's ID.
+                */
+            readonly baseId: string;
+            /**
+                * The last loader used to load a model.
+                * @deprecated
+                */
+            lastUsedLoader: ISceneLoaderPlugin | ISceneLoaderPluginAsync;
+            /**
+                * The ModelLoader instance connected with this viewer.
+                */
+            modelLoader: ModelLoader;
+            /**
+                * A flag that controls whether or not the render loop should be executed
+                */
+            runRenderLoop: boolean;
+            /**
+                * The scene manager connected with this viewer instance
+                */
+            sceneManager: SceneManager;
+            /**
+                * Will notify when the scene was initialized
+                */
+            readonly onSceneInitObservable: Observable<Scene>;
+            /**
+                * will notify when the engine was initialized
+                */
+            readonly onEngineInitObservable: Observable<Engine>;
+            /**
+                * Will notify when a new model was added to the scene.
+                * Note that added does not neccessarily mean loaded!
+                */
+            readonly onModelAddedObservable: Observable<ViewerModel>;
+            /**
+                * will notify after every model load
+                */
+            readonly onModelLoadedObservable: Observable<ViewerModel>;
+            /**
+                * will notify when any model notify of progress
+                */
+            readonly onModelLoadProgressObservable: Observable<SceneLoaderProgressEvent>;
+            /**
+                * will notify when any model load failed.
+                */
+            readonly onModelLoadErrorObservable: Observable<{
+                    message: string;
+                    exception: any;
+            }>;
+            /**
+                * Will notify when a model was removed from the scene;
+                */
+            readonly onModelRemovedObservable: Observable<ViewerModel>;
+            /**
+                * will notify when a new loader was initialized.
+                * Used mainly to know when a model starts loading.
+                */
+            readonly onLoaderInitObservable: Observable<ISceneLoaderPlugin | ISceneLoaderPluginAsync>;
+            /**
+                * Observers registered here will be executed when the entire load process has finished.
+                */
+            readonly onInitDoneObservable: Observable<AbstractViewer>;
+            /**
+                * Functions added to this observable will be executed on each frame rendered.
+                */
+            readonly onFrameRenderedObservable: Observable<AbstractViewer>;
+            /**
+                * Observers registered here will be executed when VR more is entered.
+                */
+            readonly onEnteringVRObservable: Observable<AbstractViewer>;
+            /**
+                * Observers registered here will be executed when VR mode is exited.
+                */
+            readonly onExitingVRObservable: Observable<AbstractViewer>;
+            observablesManager: ObservablesManager;
+            /**
+                * The canvas associated with this viewer
+                */
+            protected _canvas: HTMLCanvasElement;
+            /**
+                * The (single) canvas of this viewer
+                */
+            readonly canvas: HTMLCanvasElement;
+            /**
+                * is this viewer disposed?
+                */
+            protected _isDisposed: boolean;
+            /**
+                * registered onBeforeRender functions.
+                * This functions are also registered at the native scene. The reference can be used to unregister them.
+                */
+            protected _registeredOnBeforeRenderFunctions: Array<() => void>;
+            /**
+                * The configuration loader of this viewer
+                */
+            protected _configurationLoader: RenderOnlyConfigurationLoader;
+            /**
+                * Is the viewer already initialized. for internal use.
+                */
+            protected _isInit: boolean;
+            protected _configurationContainer: ConfigurationContainer;
+            readonly configurationContainer: ConfigurationContainer;
+            protected getConfigurationLoader(): RenderOnlyConfigurationLoader;
+            constructor(containerElement: Element, initialConfiguration?: ViewerConfiguration);
+            /**
+                * get the baseId of this viewer
+                */
+            getBaseId(): string;
+            /**
+                * Do we have a canvas to render on, and is it a part of the scene
+                */
+            isCanvasInDOM(): boolean;
+            /**
+             * Set the viewer's background rendering flag.
+             */
+            renderInBackground: boolean;
+            /**
+                * Get the configuration object. This is a reference only.
+                * The configuration can ONLY be updated using the updateConfiguration function.
+                * changing this object will have no direct effect on the scene.
+                */
+            readonly configuration: ViewerConfiguration;
+            /**
+                * force resizing the engine.
+                */
+            forceResize(): void;
+            protected _hdToggled: boolean;
+            toggleHD(): void;
+            protected _vrToggled: boolean;
+            protected _vrScale: number;
+            protected _vrInit: boolean;
+            toggleVR(): void;
+            protected _initVR(): void;
+            /**
+                * The resize function that will be registered with the window object
+                */
+            protected _resize: () => void;
+            protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
+            /**
+                * Force a single render loop execution.
+                */
+            forceRender(): void;
+            /**
+                * render loop that will be executed by the engine
+                */
+            protected _render: (force?: boolean) => void;
+            /**
+                * Takes a screenshot of the scene and returns it as a base64 encoded png.
+                * @param callback optional callback that will be triggered when screenshot is done.
+                * @param width Optional screenshot width (default to 512).
+                * @param height Optional screenshot height (default to 512).
+                * @returns a promise with the screenshot data
+                */
+            takeScreenshot(callback?: (data: string) => void, width?: number, height?: number): Promise<string>;
+            /**
+                * Update the current viewer configuration with new values.
+                * Only provided information will be updated, old configuration values will be kept.
+                * If this.configuration was manually changed, you can trigger this function with no parameters,
+                * and the entire configuration will be updated.
+                * @param newConfiguration the partial configuration to update or a URL to a JSON holding the updated configuration
+                *
+                */
+            updateConfiguration(newConfiguration?: Partial<ViewerConfiguration> | string): void;
+            /**
+                * this is used to register native functions using the configuration object.
+                * This will configure the observers.
+                * @param observersConfiguration observers configuration
+                */
+            protected _configureObservers(observersConfiguration: IObserversConfiguration): void;
+            /**
+                * Dispose the entire viewer including the scene and the engine
+                */
+            dispose(): void;
+            /**
+                * This will prepare the container element for the viewer
+                */
+            protected abstract _prepareContainerElement(): any;
+            /**
+                * This function will execute when the HTML templates finished initializing.
+                * It should initialize the engine and continue execution.
+                *
+                * @returns {Promise<AbstractViewer>} The viewer object will be returned after the object was loaded.
+                */
+            protected _onTemplatesLoaded(): Promise<AbstractViewer>;
+            /**
+                * This will force the creation of an engine and a scene.
+                * It will also load a model if preconfigured.
+                * But first - it will load the extendible onTemplateLoaded()!
+                */
+            protected _onTemplateLoaded(): Promise<AbstractViewer>;
+            /**
+                * Initialize the engine. Retruns a promise in case async calls are needed.
+                *
+                * @protected
+                * @returns {Promise<Engine>}
+                * @memberof Viewer
+                */
+            protected _initEngine(): Promise<Engine>;
+            /**
+                * Initialize a model loading. The returned object (a ViewerModel object) will be loaded in the background.
+                * The difference between this and loadModel is that loadModel will fulfill the promise when the model finished loading.
+                *
+                * @param modelConfig model configuration to use when loading the model.
+                * @param clearScene should the scene be cleared before loading this model
+                * @returns a ViewerModel object that is not yet fully loaded.
+                */
+            initModel(modelConfig: string | File | IModelConfiguration, clearScene?: boolean): ViewerModel;
+            /**
+                * load a model using the provided configuration.
+                * This function, as opposed to initModel, will return a promise that resolves when the model is loaded, and rejects with error.
+                * If you want to attach to the observables of the model, use initModle instead.
+                *
+                * @param modelConfig the model configuration or URL to load.
+                * @param clearScene Should the scene be cleared before loading the model
+                * @returns a Promise the fulfills when the model finished loading successfully.
+                */
+            loadModel(modelConfig: string | File | IModelConfiguration, clearScene?: boolean): Promise<ViewerModel>;
+            protected _initTelemetryEvents(): void;
+            /**
+                * Injects all the spectre shader in the babylon shader store
+                */
+            protected _injectCustomShaders(): void;
+    }
 }
 
 declare module 'babylonjs-viewer/managers/telemetryManager' {
@@ -788,14 +1031,13 @@ declare module 'babylonjs-viewer/templating/viewerTemplatePlugin' {
 }
 
 declare module 'babylonjs-viewer/optimizer/custom' {
-    import { extendedUpgrade } from "babylonjs-viewer/optimizer/custom/extended";
     import { SceneManager } from "babylonjs-viewer/managers/sceneManager";
     /**
       *
       * @param name the name of the custom optimizer configuration
       * @param upgrade set to true if you want to upgrade optimizer and false if you want to degrade
       */
-    export function getCustomOptimizerByName(name: string, upgrade?: boolean): typeof extendedUpgrade;
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): (sceneManager: SceneManager) => boolean;
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 
@@ -1111,71 +1353,29 @@ declare module 'babylonjs-viewer/configuration/configurationContainer' {
     }
 }
 
-declare module 'babylonjs-viewer/configuration/interfaces/modelConfiguration' {
-    import { IModelAnimationConfiguration } from "babylonjs-viewer/configuration/interfaces/modelAnimationConfiguration";
-    export interface IModelConfiguration {
-            id?: string;
-            url?: string;
-            root?: string;
-            file?: string | File;
-            loader?: string;
-            position?: {
-                    x: number;
-                    y: number;
-                    z: number;
-            };
-            rotation?: {
-                    x: number;
-                    y: number;
-                    z: number;
-                    w?: number;
-            };
-            scaling?: {
-                    x: number;
-                    y: number;
-                    z: number;
-            };
-            parentObjectIndex?: number;
-            castShadow?: boolean;
-            receiveShadows?: boolean;
-            normalize?: boolean | {
-                    center?: boolean;
-                    unitSize?: boolean;
-                    parentIndex?: number;
-            };
-            title?: string;
-            subtitle?: string;
-            thumbnail?: string;
-            animation?: {
-                    autoStart?: boolean | string;
-                    playOnce?: boolean;
-                    autoStartIndex?: number;
-            };
-            entryAnimation?: IModelAnimationConfiguration;
-            exitAnimation?: IModelAnimationConfiguration;
-            material?: {
-                    directEnabled?: boolean;
-                    directIntensity?: number;
-                    emissiveIntensity?: number;
-                    environmentIntensity?: number;
-                    [propName: string]: any;
-            };
+declare module 'babylonjs-viewer/configuration/renderOnlyLoader' {
+    import { ViewerConfiguration } from 'babylonjs-viewer/configuration/configuration';
+    /**
+        * The configuration loader will load the configuration object from any source and will use the defined mapper to
+        * parse the object and return a conform ViewerConfiguration.
+        * It is a private member of the scene.
+        */
+    export class RenderOnlyConfigurationLoader {
+            constructor(_enableCache?: boolean);
+            protected getExtendedConfig(type: string | undefined): ViewerConfiguration;
             /**
-                * Rotation offset axis definition
+                * load a configuration object that is defined in the initial configuration provided.
+                * The viewer configuration can extend different types of configuration objects and have an extra configuration defined.
+                *
+                * @param initConfig the initial configuration that has the definitions of further configuration to load.
+                * @param callback an optional callback that will be called sync, if noconfiguration needs to be loaded or configuration is payload-only
+                * @returns A promise that delivers the extended viewer configuration, when done.
                 */
-            rotationOffsetAxis?: {
-                    x: number;
-                    y: number;
-                    z: number;
-            };
+            loadConfiguration(initConfig?: ViewerConfiguration, callback?: (config: ViewerConfiguration) => void): Promise<ViewerConfiguration>;
             /**
-                * the offset angle
+                * Dispose the configuration loader. This will cancel file requests, if active.
                 */
-            rotationOffsetAngle?: number;
-            loaderConfiguration?: {
-                    maxLODsToLoad?: number;
-                    progressiveLoading?: boolean;
-            };
+            dispose(): void;
     }
 }
 
@@ -1248,42 +1448,6 @@ declare module 'babylonjs-viewer/managers/observablesManager' {
     }
 }
 
-declare module 'babylonjs-viewer/loader/plugins' {
-    import { TelemetryLoaderPlugin } from "babylonjs-viewer/loader/plugins/telemetryLoaderPlugin";
-    import { ILoaderPlugin } from "babylonjs-viewer/loader/plugins/loaderPlugin";
-    import { MSFTLodLoaderPlugin } from 'babylonjs-viewer/loader/plugins/msftLodLoaderPlugin';
-    import { ApplyMaterialConfigPlugin } from 'babylonjs-viewer/loader/plugins/applyMaterialConfig';
-    import { ExtendedMaterialLoaderPlugin } from 'babylonjs-viewer/loader/plugins/extendedMaterialLoaderPlugin';
-    export { TelemetryLoaderPlugin, ILoaderPlugin, MSFTLodLoaderPlugin, ApplyMaterialConfigPlugin, ExtendedMaterialLoaderPlugin };
-    /**
-        * Get a loader plugin according to its name.
-        * The plugin will be cached and will be reused if called for again.
-        *
-        * @param name the name of the plugin
-        */
-    export function getLoaderPluginByName(name: string): ILoaderPlugin;
-    /**
-        *
-        */
-    export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
-}
-
-declare module 'babylonjs-viewer/optimizer/custom/extended' {
-    import { SceneManager } from 'babylonjs-viewer/managers/sceneManager';
-    /**
-        * A custom upgrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedUpgrade(sceneManager: SceneManager): boolean;
-    /**
-        * A custom degrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedDegrade(sceneManager: SceneManager): boolean;
-}
-
 declare module 'babylonjs-viewer/managers/sceneManager' {
     import { ILightConfiguration, ISceneConfiguration, ISceneOptimizerConfiguration, ICameraConfiguration, ISkyboxConfiguration, ViewerConfiguration, IGroundConfiguration, IModelConfiguration, IVRConfiguration } from 'babylonjs-viewer/configuration';
     import { ViewerModel } from 'babylonjs-viewer/model/viewerModel';
@@ -1485,6 +1649,94 @@ declare module 'babylonjs-viewer/managers/sceneManager' {
     }
 }
 
+declare module 'babylonjs-viewer/configuration/interfaces/modelConfiguration' {
+    import { IModelAnimationConfiguration } from "babylonjs-viewer/configuration/interfaces/modelAnimationConfiguration";
+    export interface IModelConfiguration {
+            id?: string;
+            url?: string;
+            root?: string;
+            file?: string | File;
+            loader?: string;
+            position?: {
+                    x: number;
+                    y: number;
+                    z: number;
+            };
+            rotation?: {
+                    x: number;
+                    y: number;
+                    z: number;
+                    w?: number;
+            };
+            scaling?: {
+                    x: number;
+                    y: number;
+                    z: number;
+            };
+            parentObjectIndex?: number;
+            castShadow?: boolean;
+            receiveShadows?: boolean;
+            normalize?: boolean | {
+                    center?: boolean;
+                    unitSize?: boolean;
+                    parentIndex?: number;
+            };
+            title?: string;
+            subtitle?: string;
+            thumbnail?: string;
+            animation?: {
+                    autoStart?: boolean | string;
+                    playOnce?: boolean;
+                    autoStartIndex?: number;
+            };
+            entryAnimation?: IModelAnimationConfiguration;
+            exitAnimation?: IModelAnimationConfiguration;
+            material?: {
+                    directEnabled?: boolean;
+                    directIntensity?: number;
+                    emissiveIntensity?: number;
+                    environmentIntensity?: number;
+                    [propName: string]: any;
+            };
+            /**
+                * Rotation offset axis definition
+                */
+            rotationOffsetAxis?: {
+                    x: number;
+                    y: number;
+                    z: number;
+            };
+            /**
+                * the offset angle
+                */
+            rotationOffsetAngle?: number;
+            loaderConfiguration?: {
+                    maxLODsToLoad?: number;
+                    progressiveLoading?: boolean;
+            };
+    }
+}
+
+declare module 'babylonjs-viewer/loader/plugins' {
+    import { TelemetryLoaderPlugin } from "babylonjs-viewer/loader/plugins/telemetryLoaderPlugin";
+    import { ILoaderPlugin } from "babylonjs-viewer/loader/plugins/loaderPlugin";
+    import { MSFTLodLoaderPlugin } from 'babylonjs-viewer/loader/plugins/msftLodLoaderPlugin';
+    import { ApplyMaterialConfigPlugin } from 'babylonjs-viewer/loader/plugins/applyMaterialConfig';
+    import { ExtendedMaterialLoaderPlugin } from 'babylonjs-viewer/loader/plugins/extendedMaterialLoaderPlugin';
+    export { TelemetryLoaderPlugin, ILoaderPlugin, MSFTLodLoaderPlugin, ApplyMaterialConfigPlugin, ExtendedMaterialLoaderPlugin };
+    /**
+        * Get a loader plugin according to its name.
+        * The plugin will be cached and will be reused if called for again.
+        *
+        * @param name the name of the plugin
+        */
+    export function getLoaderPluginByName(name: string): ILoaderPlugin;
+    /**
+        *
+        */
+    export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
+}
+
 declare module 'babylonjs-viewer/configuration/interfaces' {
     export * from 'babylonjs-viewer/configuration/interfaces/cameraConfiguration';
     export * from 'babylonjs-viewer/configuration/interfaces/colorGradingConfiguration';
@@ -1570,6 +1822,59 @@ declare module 'babylonjs-viewer/configuration/loader' {
     }
 }
 
+declare module 'babylonjs-viewer/labs/viewerLabs' {
+    import { PBREnvironment } from "babylonjs-viewer/labs/environmentSerializer";
+    import { Scene } from "babylonjs/scene";
+    import { Vector3 } from "babylonjs/Maths/math";
+    import { ShadowLight } from "babylonjs/Lights/shadowLight";
+    /**
+        * The ViewerLabs class will hold functions that are not (!) backwards compatible.
+        * The APIs in all labs-related classes and configuration  might change.
+        * Once stable, lab features will be moved to the publis API and configuration object.
+        */
+    export class ViewerLabs {
+            constructor(_scene: Scene);
+            assetsRootURL: string;
+            environment: PBREnvironment;
+            /**
+                        * Loads an environment map from a given URL
+                        * @param url URL of environment map
+                        * @param onSuccess Callback fired after environment successfully applied to the scene
+                        * @param onProgress Callback fired at progress events while loading the environment map
+                        * @param onError Callback fired when the load fails
+                        */
+            loadEnvironment(url: string, onSuccess?: (env: PBREnvironment) => void, onProgress?: (bytesLoaded: number, bytesTotal: number) => void, onError?: (e: any) => void): void;
+            /**
+                * Loads an environment map from a given URL
+                * @param buffer ArrayBuffer containing environment map
+                * @param onSuccess Callback fired after environment successfully applied to the scene
+                * @param onProgress Callback fired at progress events while loading the environment map
+                * @param onError Callback fired when the load fails
+                */
+            loadEnvironment(buffer: ArrayBuffer, onSuccess?: (env: PBREnvironment) => void, onProgress?: (bytesLoaded: number, bytesTotal: number) => void, onError?: (e: any) => void): void;
+            /**
+                * Sets the environment to an already loaded environment
+                * @param env PBREnvironment instance
+                * @param onSuccess Callback fired after environment successfully applied to the scene
+                * @param onProgress Callback fired at progress events while loading the environment map
+                * @param onError Callback fired when the load fails
+                */
+            loadEnvironment(env: PBREnvironment, onSuccess?: (env: PBREnvironment) => void, onProgress?: (bytesLoaded: number, bytesTotal: number) => void, onError?: (e: any) => void): void;
+            /**
+                * Applies an `EnvironmentMapConfiguration` to the scene
+                * @param environmentMapConfiguration Environment map configuration to apply
+                */
+            applyEnvironmentMapConfiguration(rotationY?: number): void;
+            /**
+                * Get an environment asset url by using the configuration if the path is not absolute.
+                * @param url Asset url
+                * @returns The Asset url using the `environmentAssetsRootURL` if the url is not an absolute path.
+                */
+            getAssetUrl(url: string): string;
+            rotateShadowLight(shadowLight: ShadowLight, amount: number, point?: Vector3, axis?: Vector3, target?: Vector3): void;
+    }
+}
+
 declare module 'babylonjs-viewer/configuration/interfaces/modelAnimationConfiguration' {
     /**
         * Defines an animation to be applied to a model (translation, scale or rotation).
@@ -1651,59 +1956,6 @@ declare module 'babylonjs-viewer/loader/plugins/extendedMaterialLoaderPlugin' {
     }
 }
 
-declare module 'babylonjs-viewer/labs/viewerLabs' {
-    import { PBREnvironment } from "babylonjs-viewer/labs/environmentSerializer";
-    import { Scene } from "babylonjs/scene";
-    import { Vector3 } from "babylonjs/Maths/math";
-    import { ShadowLight } from "babylonjs/Lights/shadowLight";
-    /**
-        * The ViewerLabs class will hold functions that are not (!) backwards compatible.
-        * The APIs in all labs-related classes and configuration  might change.
-        * Once stable, lab features will be moved to the publis API and configuration object.
-        */
-    export class ViewerLabs {
-            constructor(_scene: Scene);
-            assetsRootURL: string;
-            environment: PBREnvironment;
-            /**
-                        * Loads an environment map from a given URL
-                        * @param url URL of environment map
-                        * @param onSuccess Callback fired after environment successfully applied to the scene
-                        * @param onProgress Callback fired at progress events while loading the environment map
-                        * @param onError Callback fired when the load fails
-                        */
-            loadEnvironment(url: string, onSuccess?: (env: PBREnvironment) => void, onProgress?: (bytesLoaded: number, bytesTotal: number) => void, onError?: (e: any) => void): void;
-            /**
-                * Loads an environment map from a given URL
-                * @param buffer ArrayBuffer containing environment map
-                * @param onSuccess Callback fired after environment successfully applied to the scene
-                * @param onProgress Callback fired at progress events while loading the environment map
-                * @param onError Callback fired when the load fails
-                */
-            loadEnvironment(buffer: ArrayBuffer, onSuccess?: (env: PBREnvironment) => void, onProgress?: (bytesLoaded: number, bytesTotal: number) => void, onError?: (e: any) => void): void;
-            /**
-                * Sets the environment to an already loaded environment
-                * @param env PBREnvironment instance
-                * @param onSuccess Callback fired after environment successfully applied to the scene
-                * @param onProgress Callback fired at progress events while loading the environment map
-                * @param onError Callback fired when the load fails
-                */
-            loadEnvironment(env: PBREnvironment, onSuccess?: (env: PBREnvironment) => void, onProgress?: (bytesLoaded: number, bytesTotal: number) => void, onError?: (e: any) => void): void;
-            /**
-                * Applies an `EnvironmentMapConfiguration` to the scene
-                * @param environmentMapConfiguration Environment map configuration to apply
-                */
-            applyEnvironmentMapConfiguration(rotationY?: number): void;
-            /**
-                * Get an environment asset url by using the configuration if the path is not absolute.
-                * @param url Asset url
-                * @returns The Asset url using the `environmentAssetsRootURL` if the url is not an absolute path.
-                */
-            getAssetUrl(url: string): string;
-            rotateShadowLight(shadowLight: ShadowLight, amount: number, point?: Vector3, axis?: Vector3, target?: Vector3): void;
-    }
-}
-
 declare module 'babylonjs-viewer/configuration/interfaces/cameraConfiguration' {
     export interface ICameraConfiguration {
         position?: {
@@ -2181,32 +2433,6 @@ declare module 'babylonjs-viewer/configuration/interfaces/vrConfiguration' {
     }
 }
 
-declare module 'babylonjs-viewer/configuration/renderOnlyLoader' {
-    import { ViewerConfiguration } from 'babylonjs-viewer/configuration/configuration';
-    /**
-        * The configuration loader will load the configuration object from any source and will use the defined mapper to
-        * parse the object and return a conform ViewerConfiguration.
-        * It is a private member of the scene.
-        */
-    export class RenderOnlyConfigurationLoader {
-            constructor(_enableCache?: boolean);
-            protected getExtendedConfig(type: string | undefined): ViewerConfiguration;
-            /**
-                * load a configuration object that is defined in the initial configuration provided.
-                * The viewer configuration can extend different types of configuration objects and have an extra configuration defined.
-                *
-                * @param initConfig the initial configuration that has the definitions of further configuration to load.
-                * @param callback an optional callback that will be called sync, if noconfiguration needs to be loaded or configuration is payload-only
-                * @returns A promise that delivers the extended viewer configuration, when done.
-                */
-            loadConfiguration(initConfig?: ViewerConfiguration, callback?: (config: ViewerConfiguration) => void): Promise<ViewerConfiguration>;
-            /**
-                * Dispose the configuration loader. This will cancel file requests, if active.
-                */
-            dispose(): void;
-    }
-}
-
 declare module 'babylonjs-viewer/labs/environmentSerializer' {
     import { Vector3 } from 'babylonjs/Maths/math';
     import { TextureCube } from 'babylonjs-viewer/labs/texture';

dist/preview release/what's new.md

@@ -6,8 +6,11 @@
 
 ## Updates
 
+### Tools
+- Added `Color3.toHSV()`, `Color3.toHSVToRef()` and `Color3.HSVtoRGBToRef()` ([Deltakosh](https://github.com/deltakosh/))
+
 ### Meshes
-- Added new CreateTiledPlane and CreateTiledBox ([JohnK](https://github.com/BabylonJSGuide/)
+- Added new CreateTiledPlane and CreateTiledBox ([JohnK](https://github.com/BabylonJSGuide/))
 
 ## Bug fixes
 

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

@@ -48,7 +48,7 @@ export class ColorPicker extends Control {
 
         this._value.copyFrom(value);
 
-        this._RGBtoHSV(this._value, this._tmpColor);
+        this._value.toHSVToRef(this._tmpColor);
 
         this._h = this._tmpColor.r;
         this._s = Math.max(this._tmpColor.g, 0.00001);
@@ -222,7 +222,7 @@ export class ColorPicker extends Control {
                 var dist = Math.sqrt(distSq);
                 var ang = Math.atan2(y, x);
 
-                this._HSVtoRGB(ang * 180 / Math.PI + 180, dist / radius, 1, color);
+                Color3.HSVtoRGBToRef(ang * 180 / Math.PI + 180, dist / radius, 1, color);
 
                 var index = ((x + radius) + ((y + radius) * 2 * radius)) * 4;
 
@@ -264,74 +264,6 @@ export class ColorPicker extends Control {
         return canvas;
     }
 
-    private _RGBtoHSV(color: Color3, result: Color3) {
-        var r = color.r;
-        var g = color.g;
-        var b = color.b;
-
-        var max = Math.max(r, g, b);
-        var min = Math.min(r, g, b);
-        var h = 0;
-        var s = 0;
-        var v = max;
-
-        var dm = max - min;
-
-        if (max !== 0) {
-            s = dm / max;
-        }
-
-        if (max != min) {
-            if (max == r) {
-                h = (g - b) / dm;
-                if (g < b) {
-                    h += 6;
-                }
-            } else if (max == g) {
-                h = (b - r) / dm + 2;
-            } else if (max == b) {
-                h = (r - g) / dm + 4;
-            }
-            h *= 60;
-        }
-
-        result.r = h;
-        result.g = s;
-        result.b = v;
-    }
-
-    private _HSVtoRGB(hue: number, saturation: number, value: number, result: Color3) {
-        var chroma = value * saturation;
-        var h = hue / 60;
-        var x = chroma * (1 - Math.abs((h % 2) - 1));
-        var r = 0;
-        var g = 0;
-        var b = 0;
-
-        if (h >= 0 && h <= 1) {
-            r = chroma;
-            g = x;
-        } else if (h >= 1 && h <= 2) {
-            r = x;
-            g = chroma;
-        } else if (h >= 2 && h <= 3) {
-            g = chroma;
-            b = x;
-        } else if (h >= 3 && h <= 4) {
-            g = x;
-            b = chroma;
-        } else if (h >= 4 && h <= 5) {
-            r = x;
-            b = chroma;
-        } else if (h >= 5 && h <= 6) {
-            r = chroma;
-            b = x;
-        }
-
-        var m = value - chroma;
-        result.set((r + m), (g + m), (b + m));
-    }
-
     /** @hidden */
     public _draw(context: CanvasRenderingContext2D): void {
         context.save();
@@ -406,7 +338,7 @@ export class ColorPicker extends Control {
             this._v = Math.max(this._v, ColorPicker._Epsilon);
         }
 
-        this._HSVtoRGB(this._h, this._s, this._v, this._tmpColor);
+        Color3.HSVtoRGBToRef(this._h, this._s, this._v, this._tmpColor);
 
         this.value = this._tmpColor;
     }

inspector/src/components/sceneExplorer/entities/sceneTreeItemComponent.tsx

@@ -12,6 +12,8 @@ import * as React from "react";
 
 import { GlobalState } from "../../globalState";
 import { UtilityLayerRenderer } from "babylonjs/Rendering/utilityLayerRenderer";
+import { PropertyChangedEvent } from '../../../components/propertyChangedEvent';
+import { LightGizmo } from 'babylonjs/Gizmos/lightGizmo';
 
 interface ISceneTreeItemComponentProps {
     scene: Scene;
@@ -28,6 +30,10 @@ export class SceneTreeItemComponent extends React.Component<ISceneTreeItemCompon
     private _onSelectionChangeObserver: Nullable<Observer<any>>;
     private _selectedEntity: any;
 
+    private _posDragEnd: Nullable<Observer<PropertyChangedEvent>> = null;
+    private _scaleDragEnd: Nullable<Observer<PropertyChangedEvent>> = null;
+    private _rotateDragEnd: Nullable<Observer<PropertyChangedEvent>> = null;
+
     constructor(props: ISceneTreeItemComponentProps) {
         super(props);
 
@@ -203,12 +209,78 @@ export class SceneTreeItemComponent extends React.Component<ISceneTreeItemCompon
             switch (mode) {
                 case 1:
                     manager.positionGizmoEnabled = true;
+                    if(!this._posDragEnd){
+                        // Record movement for generating replay code
+                        this._posDragEnd = manager.gizmos.positionGizmo!.onDragEndObservable.add(()=>{
+                            if (manager.gizmos.positionGizmo && manager.gizmos.positionGizmo.attachedMesh) {
+                                var lightGizmo:Nullable<LightGizmo> =  manager.gizmos.positionGizmo.attachedMesh.reservedDataStore.lightGizmo;
+                                var obj:any = (lightGizmo && lightGizmo.light) ? lightGizmo.light : manager.gizmos.positionGizmo.attachedMesh;
+                                
+                                if (obj.position) {
+                                    var e = new PropertyChangedEvent();
+                                    e.object = obj
+                                    e.property = "position"
+                                    e.value = obj.position;
+                                    this.props.globalState.onPropertyChangedObservable.notifyObservers(e)
+                                }
+                            }                            
+                        })
+                    }
+                    
                     break;
                 case 2:
                     manager.rotationGizmoEnabled = true;
+                    if(!this._rotateDragEnd){
+                        // Record movement for generating replay code
+                        this._rotateDragEnd = manager.gizmos.rotationGizmo!.onDragEndObservable.add(()=>{
+                            if (manager.gizmos.rotationGizmo && manager.gizmos.rotationGizmo.attachedMesh) {
+                                var lightGizmo:Nullable<LightGizmo> =  manager.gizmos.rotationGizmo.attachedMesh.reservedDataStore.lightGizmo;
+                                var obj:any = (lightGizmo && lightGizmo.light) ? lightGizmo.light : manager.gizmos.rotationGizmo.attachedMesh;
+                                
+                                if (obj.rotationQuaternion) {
+                                    var e = new PropertyChangedEvent();
+                                    e.object = obj;
+                                    e.property = "rotationQuaternion";
+                                    e.value = obj.rotationQuaternion;
+                                    this.props.globalState.onPropertyChangedObservable.notifyObservers(e);
+                                } else if(obj.rotation) {
+                                    var e = new PropertyChangedEvent();
+                                    e.object = obj;
+                                    e.property = "rotation";
+                                    e.value = obj.rotation;
+                                    this.props.globalState.onPropertyChangedObservable.notifyObservers(e);
+                                } else if(obj.direction) {
+                                    var e = new PropertyChangedEvent();
+                                    e.object = obj;
+                                    e.property = "direction";
+                                    e.value = obj.direction;
+                                    this.props.globalState.onPropertyChangedObservable.notifyObservers(e);
+                                }
+                            }                            
+                        })
+                    }
+
                     break;
                 case 3:
                     manager.scaleGizmoEnabled = true;
+                    if(!this._scaleDragEnd){
+                        // Record movement for generating replay code
+                        this._scaleDragEnd = manager.gizmos.scaleGizmo!.onDragEndObservable.add(()=>{
+                            if (manager.gizmos.scaleGizmo && manager.gizmos.scaleGizmo.attachedMesh) {
+                                var lightGizmo:Nullable<LightGizmo> =  manager.gizmos.scaleGizmo.attachedMesh.reservedDataStore.lightGizmo;
+                                var obj:any = (lightGizmo && lightGizmo.light) ? lightGizmo.light : manager.gizmos.scaleGizmo.attachedMesh;
+                                
+                                if (obj.scaling) {
+                                    var e = new PropertyChangedEvent();
+                                    e.object = obj;
+                                    e.property = "scaling";
+                                    e.value = obj.scaling;
+                                    this.props.globalState.onPropertyChangedObservable.notifyObservers(e);
+                                }
+                            }                            
+                        })
+                    }
+
                     break;
                 case 4:
                     manager.boundingBoxGizmoEnabled = true;

inspector/src/components/sceneExplorer/sceneExplorerComponent.tsx

@@ -259,7 +259,7 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
         nodeContextMenus.push({
             label: "Add new directional light",
             action: () => {
-                let newDirectionalLight = new DirectionalLight("directional light", new Vector3(1, -1, 1), scene);
+                let newDirectionalLight = new DirectionalLight("directional light", new Vector3(-1, -1, -0.5), scene);
                 this.props.globalState.onSelectionChangedObservable.notifyObservers(newDirectionalLight);
             }
         });

package.json

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

src/Cameras/VR/vrExperienceHelper.ts

@@ -819,6 +819,19 @@ export class VRExperienceHelper {
         this._circleEase = new CircleEase();
         this._circleEase.setEasingMode(EasingFunction.EASINGMODE_EASEINOUT);
 
+        // Allow clicking in the vrDeviceOrientationCamera
+        scene.onPointerObservable.add((e) => {
+            if (this._interactionsEnabled) {
+                if (scene.activeCamera === this.vrDeviceOrientationCamera && (e.event as PointerEvent).pointerType === "mouse") {
+                    if (e.type === PointerEventTypes.POINTERDOWN) {
+                        this._cameraGazer._selectionPointerDown();
+                    }else if (e.type === PointerEventTypes.POINTERUP) {
+                        this._cameraGazer._selectionPointerUp();
+                    }
+                }
+            }
+        });
+
         if (this.webVROptions.floorMeshes) {
             this.enableTeleportation({ floorMeshes: this.webVROptions.floorMeshes });
         }

src/Gizmos/lightGizmo.ts

@@ -67,6 +67,11 @@ export class LightGizmo extends Gizmo {
 
             this._lightMesh.rotationQuaternion = new Quaternion();
 
+            if (!this.attachedMesh!.reservedDataStore) {
+                this.attachedMesh!.reservedDataStore = {};
+            }
+            this.attachedMesh!.reservedDataStore.lightGizmo = this;
+
             // Get update position and direction if the light has it
             if ((light as any).position) {
                 this.attachedMesh!.position.copyFrom((light as any).position);

src/Materials/Textures/Procedurals/proceduralTextureSceneComponent.ts

@@ -3,7 +3,6 @@ import { Scene } from "../../../scene";
 import { SceneComponentConstants, ISceneComponent } from "../../../sceneComponent";
 import { _TimeToken } from "../../../Instrumentation/timeToken";
 import { _DepthCullingState, _StencilState, _AlphaState } from "../../../States/index";
-import { Layer } from "../../../Layers/layer";
 
 import { ProceduralTexture } from "./proceduralTexture";
 
@@ -38,7 +37,6 @@ export class ProceduralTextureSceneComponent implements ISceneComponent {
     constructor(scene: Scene) {
         this.scene = scene;
         this.scene.proceduralTextures = new Array<ProceduralTexture>();
-        scene.layers = new Array<Layer>();
     }
 
     /**

src/Maths/math.ts

@@ -316,6 +316,58 @@ export class Color3 {
     }
 
     /**
+     * Converts current color in rgb space to HSV values
+     * @returns a new color3 representing the HSV values
+     */
+    public toHSV(): Color3 {
+        let result = new Color3();
+
+        this.toHSVToRef(result);
+
+        return result;
+    }
+
+    /**
+     * Converts current color in rgb space to HSV values
+     * @param result defines the Color3 where to store the HSV values
+     */
+    public toHSVToRef(result: Color3) {
+        var r = this.r;
+        var g = this.g;
+        var b = this.b;
+
+        var max = Math.max(r, g, b);
+        var min = Math.min(r, g, b);
+        var h = 0;
+        var s = 0;
+        var v = max;
+
+        var dm = max - min;
+
+        if (max !== 0) {
+            s = dm / max;
+        }
+
+        if (max != min) {
+            if (max == r) {
+                h = (g - b) / dm;
+                if (g < b) {
+                    h += 6;
+                }
+            } else if (max == g) {
+                h = (b - r) / dm + 2;
+            } else if (max == b) {
+                h = (r - g) / dm + 4;
+            }
+            h *= 60;
+        }
+
+        result.r = h;
+        result.g = s;
+        result.b = v;
+    }
+
+    /**
      * Converts the Color3 values to linear space and stores the result in "convertedColor"
      * @param convertedColor defines the Color3 object where to store the linear space version
      * @returns the unmodified Color3
@@ -354,6 +406,45 @@ export class Color3 {
     private static _BlackReadOnly = Color3.Black() as DeepImmutable<Color3>;
 
     /**
+     * Convert Hue, saturation and value to a Color3 (RGB)
+     * @param hue defines the hue
+     * @param saturation defines the saturation
+     * @param value defines the value
+     * @param result defines the Color3 where to store the RGB values
+     */
+    public static HSVtoRGBToRef(hue: number, saturation: number, value: number, result: Color3) {
+        var chroma = value * saturation;
+        var h = hue / 60;
+        var x = chroma * (1 - Math.abs((h % 2) - 1));
+        var r = 0;
+        var g = 0;
+        var b = 0;
+
+        if (h >= 0 && h <= 1) {
+            r = chroma;
+            g = x;
+        } else if (h >= 1 && h <= 2) {
+            r = x;
+            g = chroma;
+        } else if (h >= 2 && h <= 3) {
+            g = chroma;
+            b = x;
+        } else if (h >= 3 && h <= 4) {
+            g = x;
+            b = chroma;
+        } else if (h >= 4 && h <= 5) {
+            r = x;
+            b = chroma;
+        } else if (h >= 5 && h <= 6) {
+            r = chroma;
+            b = x;
+        }
+
+        var m = value - chroma;
+        result.set((r + m), (g + m), (b + m));
+    }
+
+    /**
      * Creates a new Color3 from the string containing valid hexadecimal values
      * @param hex defines a string containing valid hexadecimal values
      * @returns a new Color3 object

src/Meshes/instancedMesh.ts

@@ -283,17 +283,17 @@ export class InstancedMesh extends AbstractMesh {
     public _activate(renderId: number, intermediateRendering: boolean): boolean {
         if (this._currentLOD) {
             this._currentLOD._registerInstanceForRenderId(this, renderId);
-        }
 
-        if (intermediateRendering) {
-            if (!this._currentLOD._internalAbstractMeshDataInfo._isActiveIntermediate) {
-                this._currentLOD._internalAbstractMeshDataInfo._onlyForInstancesIntermediate = true;
-                return true;
-            }
-        } else {
-            if (!this._currentLOD._internalAbstractMeshDataInfo._isActive) {
-                this._currentLOD._internalAbstractMeshDataInfo._onlyForInstances = true;
-                return true;
+            if (intermediateRendering) {
+                if (!this._currentLOD._internalAbstractMeshDataInfo._isActiveIntermediate) {
+                    this._currentLOD._internalAbstractMeshDataInfo._onlyForInstancesIntermediate = true;
+                    return true;
+                }
+            } else {
+                if (!this._currentLOD._internalAbstractMeshDataInfo._isActive) {
+                    this._currentLOD._internalAbstractMeshDataInfo._onlyForInstances = true;
+                    return true;
+                }
             }
         }
         return false;

src/PostProcesses/RenderPipeline/Pipelines/standardRenderingPipeline.ts

@@ -19,6 +19,7 @@ import { GeometryBufferRenderer } from "../../../Rendering/geometryBufferRendere
 import { Scene } from "../../../scene";
 import { Constants } from "../../../Engines/constants";
 import { _TypeStore } from '../../../Misc/typeStore';
+import { MotionBlurPostProcess } from "../../motionBlurPostProcess";
 
 declare type Animation = import("../../../Animations/animation").Animation;
 
@@ -275,10 +276,41 @@ export class StandardRenderingPipeline extends PostProcessRenderPipeline impleme
     public depthOfFieldBlurWidth: number = 64.0;
 
     /**
-     * For motion blur, defines how much the image is blurred by the movement
+     * Gets how much the image is blurred by the movement while using the motion blur post-process
      */
     @serialize()
-    public motionStrength: number = 1.0;
+    public get motionStrength(): number {
+        return this._motionStrength;
+    }
+    /**
+     * Sets how much the image is blurred by the movement while using the motion blur post-process
+     */
+    public set motionStrength(strength: number) {
+        this._motionStrength = strength;
+
+        if (this._isObjectBasedMotionBlur && this.motionBlurPostProcess) {
+            (this.motionBlurPostProcess as MotionBlurPostProcess).motionStrength = strength;
+        }
+    }
+
+    /**
+     * Gets wether or not the motion blur post-process is object based or screen based.
+     */
+    @serialize()
+    public get objectBasedMotionBlur(): boolean {
+        return this._isObjectBasedMotionBlur;
+    }
+    /**
+     * Sets wether or not the motion blur post-process should be object based or screen based
+     */
+    public set objectBasedMotionBlur(value: boolean) {
+        const shouldRebuild = this._isObjectBasedMotionBlur !== value;
+        this._isObjectBasedMotionBlur = value;
+
+        if (shouldRebuild) {
+            this._buildPipeline();
+        }
+    }
 
     /**
      * List of animations for the pipeline (IAnimatable implementation)
@@ -296,6 +328,8 @@ export class StandardRenderingPipeline extends PostProcessRenderPipeline impleme
     private _currentExposure: number = 1.0;
     private _hdrAutoExposure: boolean = false;
     private _hdrCurrentLuminance: number = 1.0;
+    private _motionStrength: number = 1.0;
+    private _isObjectBasedMotionBlur: boolean = false;
 
     private _floatTextureType: number;
 
@@ -476,7 +510,11 @@ export class StandardRenderingPipeline extends PostProcessRenderPipeline impleme
 
     public set motionBlurSamples(samples: number) {
         if (this.motionBlurPostProcess) {
-            this.motionBlurPostProcess.updateEffect("#define MOTION_BLUR\n#define MAX_MOTION_SAMPLES " + samples.toFixed(1));
+            if (this._isObjectBasedMotionBlur) {
+                (this.motionBlurPostProcess as MotionBlurPostProcess).motionBlurSamples = samples;
+            } else {
+                this.motionBlurPostProcess.updateEffect("#define MOTION_BLUR\n#define MAX_MOTION_SAMPLES " + samples.toFixed(1));
+            }
         }
 
         this._motionBlurSamples = samples;
@@ -991,36 +1029,43 @@ export class StandardRenderingPipeline extends PostProcessRenderPipeline impleme
 
     // Create motion blur post-process
     private _createMotionBlurPostProcess(scene: Scene, ratio: number): void {
-        this.motionBlurPostProcess = new PostProcess("HDRMotionBlur", "standard",
-            ["inverseViewProjection", "prevViewProjection", "screenSize", "motionScale", "motionStrength"],
-            ["depthSampler"],
-            ratio, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, "#define MOTION_BLUR\n#define MAX_MOTION_SAMPLES " + this.motionBlurSamples.toFixed(1), Constants.TEXTURETYPE_UNSIGNED_INT);
-
-        var motionScale: number = 0;
-        var prevViewProjection = Matrix.Identity();
-        var invViewProjection = Matrix.Identity();
-        var viewProjection = Matrix.Identity();
-        var screenSize = Vector2.Zero();
-
-        this.motionBlurPostProcess.onApply = (effect: Effect) => {
-            viewProjection = scene.getProjectionMatrix().multiply(scene.getViewMatrix());
-
-            viewProjection.invertToRef(invViewProjection);
-            effect.setMatrix("inverseViewProjection", invViewProjection);
-
-            effect.setMatrix("prevViewProjection", prevViewProjection);
-            prevViewProjection = viewProjection;
-
-            screenSize.x = (<PostProcess>this.motionBlurPostProcess).width;
-            screenSize.y = (<PostProcess>this.motionBlurPostProcess).height;
-            effect.setVector2("screenSize", screenSize);
-
-            motionScale = scene.getEngine().getFps() / 60.0;
-            effect.setFloat("motionScale", motionScale);
-            effect.setFloat("motionStrength", this.motionStrength);
-
-            effect.setTexture("depthSampler", this._getDepthTexture());
-        };
+        if (this._isObjectBasedMotionBlur) {
+            const mb = new MotionBlurPostProcess("HDRMotionBlur", scene, ratio, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, Constants.TEXTURETYPE_UNSIGNED_INT);
+            mb.motionStrength = this.motionStrength;
+            mb.motionBlurSamples = this.motionBlurSamples;
+            this.motionBlurPostProcess = mb;
+        } else {
+            this.motionBlurPostProcess = new PostProcess("HDRMotionBlur", "standard",
+                ["inverseViewProjection", "prevViewProjection", "screenSize", "motionScale", "motionStrength"],
+                ["depthSampler"],
+                ratio, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, "#define MOTION_BLUR\n#define MAX_MOTION_SAMPLES " + this.motionBlurSamples.toFixed(1), Constants.TEXTURETYPE_UNSIGNED_INT);
+
+            var motionScale: number = 0;
+            var prevViewProjection = Matrix.Identity();
+            var invViewProjection = Matrix.Identity();
+            var viewProjection = Matrix.Identity();
+            var screenSize = Vector2.Zero();
+
+            this.motionBlurPostProcess.onApply = (effect: Effect) => {
+                viewProjection = scene.getProjectionMatrix().multiply(scene.getViewMatrix());
+
+                viewProjection.invertToRef(invViewProjection);
+                effect.setMatrix("inverseViewProjection", invViewProjection);
+
+                effect.setMatrix("prevViewProjection", prevViewProjection);
+                prevViewProjection = viewProjection;
+
+                screenSize.x = (<PostProcess>this.motionBlurPostProcess).width;
+                screenSize.y = (<PostProcess>this.motionBlurPostProcess).height;
+                effect.setVector2("screenSize", screenSize);
+
+                motionScale = scene.getEngine().getFps() / 60.0;
+                effect.setFloat("motionScale", motionScale);
+                effect.setFloat("motionStrength", this.motionStrength);
+
+                effect.setTexture("depthSampler", this._getDepthTexture());
+            };
+        }
 
         this.addEffect(new PostProcessRenderEffect(scene.getEngine(), "HDRMotionBlur", () => { return this.motionBlurPostProcess; }, true));
     }

src/assetContainer.ts

@@ -251,7 +251,7 @@ export class AssetContainer extends AbstractScene {
 
         for (let key in this) {
             if (this.hasOwnProperty(key)) {
-                (<any>this)[key] = (<any>this)[key] || [];
+                (<any>this)[key] = (<any>this)[key] || (key === "environmentTexture" ? null : []);
                 this._moveAssets((<any>this.scene)[key], (<any>this)[key], (<any>keepAssets)[key]);
             }
         }