Merge branch 'master' of https://github.com/BabylonJS/Babylon.js into ThinSprites

Playground/src/tools/monacoManager.ts

@@ -136,7 +136,7 @@ var createScene = function() {
     camera.setTarget(BABYLON.Vector3.Zero());
 
     // This attaches the camera to the canvas
-    camera.attachControl(true);
+    camera.attachControl(canvas, true);
 
     return scene;
 };`);
@@ -155,7 +155,7 @@ class Playground {
         camera.setTarget(BABYLON.Vector3.Zero());
 
         // This attaches the camera to the canvas
-        camera.attachControl(true);
+        camera.attachControl(canvas, true);
 
         return scene;
     }
@@ -287,7 +287,7 @@ class Playground {
     camera.setTarget(BABYLON.Vector3.Zero());
 
     // This attaches the camera to the canvas
-    camera.attachControl(true);
+    camera.attachControl(canvas, true);
 
     // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
     var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
@@ -305,7 +305,6 @@ class Playground {
     var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
 
     return scene;
-
 };`);
         } else {
             this._editor.setValue(`class Playground {
@@ -320,7 +319,7 @@ class Playground {
         camera.setTarget(BABYLON.Vector3.Zero());
 
         // This attaches the camera to the canvas
-        camera.attachControl(true);
+        camera.attachControl(canvas, true);
 
         // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
         var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

dist/preview release/babylon.d.ts

@@ -7779,6 +7779,21 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
+     * Class used to host copy specific utilities
+     */
+    export class CopyTools {
+        /**
+         * Reads the pixels stored in the webgl texture and returns them as a base64 string
+         * @param texture defines the texture to read pixels from
+         * @param faceIndex defines the face of the texture to read (in case of cube texture)
+         * @param level defines the LOD level of the texture to read (in case of Mip Maps)
+         * @returns The base64 encoded string or null
+         */
+        static GenerateBase64StringFromTexture(texture: BaseTexture, faceIndex?: number, level?: number): Nullable<string>;
+    }
+}
+declare module BABYLON {
+    /**
      * Define options used to create a depth texture
      */
     export class DepthTextureCreationOptions {
@@ -19315,7 +19330,6 @@ declare module BABYLON {
         attachControl(noPreventDefault?: boolean): void;
         /**
          * Detach the current controls from the specified dom element.
-         * @param element Defines the element to stop listening the inputs from
          */
         detachControl(): void;
         /**
@@ -19488,13 +19502,12 @@ declare module BABYLON {
          */
         constructor(name: string, position: Vector3, scene: Scene, setActiveOnSceneIfNoneActive?: boolean);
         /**
-         * Attached controls to the current camera.
+         * Attach the input controls to a specific dom element to get the input from.
          * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
-         * Detach the current controls from the camera.
-         * The camera will stop reacting to inputs.
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         private _collisionMask;
@@ -20535,7 +20548,7 @@ declare module BABYLON {
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
-         * Detaches the camera from the html element and disables VR
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         /**
@@ -21014,6 +21027,13 @@ declare module BABYLON {
      * Defines a connection point for a block
      */
     export class NodeMaterialConnectionPoint {
+        /**
+         * Checks if two types are equivalent
+         * @param type1 type 1 to check
+         * @param type2 type 2 to check
+         * @returns true if both types are equivalent, else false
+         */
+        static AreEquivalentTypes(type1: number, type2: number): boolean;
         /** @hidden */
         _ownerBlock: NodeMaterialBlock;
         /** @hidden */
@@ -21025,6 +21045,8 @@ declare module BABYLON {
         _typeConnectionSource: Nullable<NodeMaterialConnectionPoint>;
         /** @hidden */
         _linkedConnectionSource: Nullable<NodeMaterialConnectionPoint>;
+        /** @hidden */
+        _acceptedConnectionPointType: Nullable<NodeMaterialConnectionPoint>;
         private _type;
         /** @hidden */
         _enforceAssociatedVariableName: boolean;
@@ -22167,7 +22189,7 @@ declare module BABYLON {
          * @returns true if the block is ready
          */
         isReady(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines, useInstances?: boolean): boolean;
-        protected _linkConnectionTypes(inputIndex0: number, inputIndex1: number): void;
+        protected _linkConnectionTypes(inputIndex0: number, inputIndex1: number, looseCoupling?: boolean): void;
         private _processBuild;
         /**
         * Validates the new name for the block node.
@@ -28291,6 +28313,11 @@ declare module BABYLON {
          * Gets or sets a general boolean used to indicate that textures containing direct data (buffers) must be saved as part of the serialization process
          */
         static SerializeBuffers: boolean;
+        /**
+         * Gets or sets a general boolean used to indicate that texture buffers must be saved as part of the serialization process.
+         * If no buffer exists, one will be created as base64 string from the internal webgl data.
+         */
+        static ForceSerializeBuffers: boolean;
         /** @hidden */
         static _CubeTextureParser: (jsonTexture: any, scene: Scene, rootUrl: string) => CubeTexture;
         /** @hidden */
@@ -37789,6 +37816,8 @@ declare module BABYLON {
         private _vertexSourceCodeOverride;
         private _fragmentSourceCodeOverride;
         private _transformFeedbackVaryings;
+        private _rawVertexSourceCode;
+        private _rawFragmentSourceCode;
         /**
          * Compiled shader to webGL program.
          * @hidden
@@ -37912,6 +37941,14 @@ declare module BABYLON {
          */
         get fragmentSourceCode(): string;
         /**
+         * Gets the vertex shader source code before it has been processed by the preprocessor
+         */
+        get rawVertexSourceCode(): string;
+        /**
+         * Gets the fragment shader source code before it has been processed by the preprocessor
+         */
+        get rawFragmentSourceCode(): string;
+        /**
          * Recompiles the webGL program
          * @param vertexSourceCode The source code for the vertex shader.
          * @param fragmentSourceCode The source code for the fragment shader.
@@ -38977,7 +39014,7 @@ declare module BABYLON {
          * @param options defines further options to be sent to the getContext() function
          * @param adaptToDeviceRatio defines whether to adapt to the device's viewport characteristics (default: false)
          */
-        constructor(canvasOrContext: Nullable<HTMLCanvasElement | WebGLRenderingContext | WebGL2RenderingContext>, antialias?: boolean, options?: EngineOptions, adaptToDeviceRatio?: boolean);
+        constructor(canvasOrContext: Nullable<HTMLCanvasElement | OffscreenCanvas | WebGLRenderingContext | WebGL2RenderingContext>, antialias?: boolean, options?: EngineOptions, adaptToDeviceRatio?: boolean);
         private _rebuildInternalTextures;
         private _rebuildEffects;
         /**
@@ -46499,15 +46536,38 @@ declare module BABYLON {
         /** @hidden */
         _isSynchronizedViewMatrix(): boolean;
         /**
+         * Attach the input controls to a specific dom element to get the input from.
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         */
+        attachControl(noPreventDefault?: boolean): void;
+        /**
+         * Attach the input controls to a specific dom element to get the input from.
+         * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         */
+        attachControl(ignored: any, noPreventDefault?: boolean): void;
+        /**
+         * Attached controls to the current camera.
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
+         */
+        attachControl(noPreventDefault: boolean, useCtrlForPanning: boolean): void;
+        /**
+         * Attached controls to the current camera.
+         * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
+         */
+        attachControl(ignored: any, noPreventDefault: boolean, useCtrlForPanning: boolean): void;
+        /**
          * Attached controls to the current camera.
          * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
          * @param panningMouseButton Defines whether panning is allowed through mouse click button
          */
-        attachControl(noPreventDefault?: boolean, useCtrlForPanning?: boolean, panningMouseButton?: number): void;
+        attachControl(noPreventDefault: boolean, useCtrlForPanning: boolean, panningMouseButton: number): void;
         /**
-         * Detach the current controls from the camera.
-         * The camera will stop reacting to inputs.
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         /** @hidden */
@@ -46932,7 +46992,7 @@ declare module BABYLON {
         private _alternatePickedPoint;
         private _worldDragAxis;
         private _targetPosition;
-        private _attachedElement;
+        private _attachedToElement;
         /**
          * Attaches the drag behavior the passed in mesh
          * @param ownerNode The mesh that will be dragged around once attached
@@ -47018,7 +47078,7 @@ declare module BABYLON {
         private _pointerObserver;
         private _moving;
         private _startingOrientation;
-        private _attachedElement;
+        private _attachedToElement;
         /**
          * How much faster the object should move when the controller is moving towards it. This is useful to bring objects that are far away from the user to them faster. Set this to 0 to avoid any speed increase. (Default: 3)
          */
@@ -47325,7 +47385,6 @@ declare module BABYLON {
         attachControl(): void;
         /**
          * Detach the current controls from the specified dom element.
-         * @param element Defines the element to stop listening the inputs from
          */
         detachControl(): void;
         /**
@@ -47652,8 +47711,8 @@ declare module BABYLON {
         */
         constructor(name: string, position: Vector3, scene: Scene, setActiveOnSceneIfNoneActive?: boolean);
         /**
-         * Attach a control to the HTML DOM element.
-         * @param noPreventDefault Defines whether events caught by the controls should call preventdefault(). https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
+         * Attach the input controls to a specific dom element to get the input from.
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
@@ -48017,13 +48076,12 @@ declare module BABYLON {
         constructor(name: string, position: Vector3, scene: Scene, lockedTarget?: Nullable<AbstractMesh>);
         private _follow;
         /**
-         * Attached controls to the current camera.
+         * Attach the input controls to a specific dom element to get the input from.
          * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
-         * Detach the current controls from the camera.
-         * The camera will stop reacting to inputs.
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         /** @hidden */
@@ -57510,6 +57568,8 @@ declare module BABYLON {
         * Sets the projection texture of the light.
         */
         set projectionTexture(value: Nullable<BaseTexture>);
+        private static _IsProceduralTexture;
+        private static _IsTexture;
         private _projectionTextureViewLightDirty;
         private _projectionTextureProjectionLightDirty;
         private _projectionTextureDirty;
@@ -71361,6 +71421,10 @@ declare module BABYLON {
         private _grainEnabled;
         private _buildAllowed;
         /**
+         * This is triggered each time the pipeline has been built.
+         */
+        onBuildObservable: Observable<DefaultRenderingPipeline>;
+        /**
          * Gets active scene
          */
         get scene(): Scene;

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

@@ -7863,6 +7863,23 @@ declare module "babylonjs/Misc/instantiationTools" {
         static Instantiate(className: string): any;
     }
 }
+declare module "babylonjs/Misc/copyTools" {
+    import { Nullable } from "babylonjs/types";
+    import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
+    /**
+     * Class used to host copy specific utilities
+     */
+    export class CopyTools {
+        /**
+         * Reads the pixels stored in the webgl texture and returns them as a base64 string
+         * @param texture defines the texture to read pixels from
+         * @param faceIndex defines the face of the texture to read (in case of cube texture)
+         * @param level defines the LOD level of the texture to read (in case of Mip Maps)
+         * @returns The base64 encoded string or null
+         */
+        static GenerateBase64StringFromTexture(texture: BaseTexture, faceIndex?: number, level?: number): Nullable<string>;
+    }
+}
 declare module "babylonjs/Engines/depthTextureCreationOptions" {
     /**
      * Define options used to create a depth texture
@@ -19878,7 +19895,6 @@ declare module "babylonjs/Cameras/Inputs/freeCameraTouchInput" {
         attachControl(noPreventDefault?: boolean): void;
         /**
          * Detach the current controls from the specified dom element.
-         * @param element Defines the element to stop listening the inputs from
          */
         detachControl(): void;
         /**
@@ -20061,13 +20077,12 @@ declare module "babylonjs/Cameras/freeCamera" {
          */
         constructor(name: string, position: Vector3, scene: Scene, setActiveOnSceneIfNoneActive?: boolean);
         /**
-         * Attached controls to the current camera.
+         * Attach the input controls to a specific dom element to get the input from.
          * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
-         * Detach the current controls from the camera.
-         * The camera will stop reacting to inputs.
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         private _collisionMask;
@@ -21166,7 +21181,7 @@ declare module "babylonjs/Cameras/VR/webVRCamera" {
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
-         * Detaches the camera from the html element and disables VR
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         /**
@@ -21674,6 +21689,13 @@ declare module "babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint" {
      * Defines a connection point for a block
      */
     export class NodeMaterialConnectionPoint {
+        /**
+         * Checks if two types are equivalent
+         * @param type1 type 1 to check
+         * @param type2 type 2 to check
+         * @returns true if both types are equivalent, else false
+         */
+        static AreEquivalentTypes(type1: number, type2: number): boolean;
         /** @hidden */
         _ownerBlock: NodeMaterialBlock;
         /** @hidden */
@@ -21685,6 +21707,8 @@ declare module "babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint" {
         _typeConnectionSource: Nullable<NodeMaterialConnectionPoint>;
         /** @hidden */
         _linkedConnectionSource: Nullable<NodeMaterialConnectionPoint>;
+        /** @hidden */
+        _acceptedConnectionPointType: Nullable<NodeMaterialConnectionPoint>;
         private _type;
         /** @hidden */
         _enforceAssociatedVariableName: boolean;
@@ -22907,7 +22931,7 @@ declare module "babylonjs/Materials/Node/nodeMaterialBlock" {
          * @returns true if the block is ready
          */
         isReady(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines, useInstances?: boolean): boolean;
-        protected _linkConnectionTypes(inputIndex0: number, inputIndex1: number): void;
+        protected _linkConnectionTypes(inputIndex0: number, inputIndex1: number, looseCoupling?: boolean): void;
         private _processBuild;
         /**
         * Validates the new name for the block node.
@@ -29439,6 +29463,11 @@ declare module "babylonjs/Materials/Textures/texture" {
          * Gets or sets a general boolean used to indicate that textures containing direct data (buffers) must be saved as part of the serialization process
          */
         static SerializeBuffers: boolean;
+        /**
+         * Gets or sets a general boolean used to indicate that texture buffers must be saved as part of the serialization process.
+         * If no buffer exists, one will be created as base64 string from the internal webgl data.
+         */
+        static ForceSerializeBuffers: boolean;
         /** @hidden */
         static _CubeTextureParser: (jsonTexture: any, scene: Scene, rootUrl: string) => CubeTexture;
         /** @hidden */
@@ -39212,6 +39241,8 @@ declare module "babylonjs/Materials/effect" {
         private _vertexSourceCodeOverride;
         private _fragmentSourceCodeOverride;
         private _transformFeedbackVaryings;
+        private _rawVertexSourceCode;
+        private _rawFragmentSourceCode;
         /**
          * Compiled shader to webGL program.
          * @hidden
@@ -39335,6 +39366,14 @@ declare module "babylonjs/Materials/effect" {
          */
         get fragmentSourceCode(): string;
         /**
+         * Gets the vertex shader source code before it has been processed by the preprocessor
+         */
+        get rawVertexSourceCode(): string;
+        /**
+         * Gets the fragment shader source code before it has been processed by the preprocessor
+         */
+        get rawFragmentSourceCode(): string;
+        /**
          * Recompiles the webGL program
          * @param vertexSourceCode The source code for the vertex shader.
          * @param fragmentSourceCode The source code for the fragment shader.
@@ -40442,7 +40481,7 @@ declare module "babylonjs/Engines/thinEngine" {
          * @param options defines further options to be sent to the getContext() function
          * @param adaptToDeviceRatio defines whether to adapt to the device's viewport characteristics (default: false)
          */
-        constructor(canvasOrContext: Nullable<HTMLCanvasElement | WebGLRenderingContext | WebGL2RenderingContext>, antialias?: boolean, options?: EngineOptions, adaptToDeviceRatio?: boolean);
+        constructor(canvasOrContext: Nullable<HTMLCanvasElement | OffscreenCanvas | WebGLRenderingContext | WebGL2RenderingContext>, antialias?: boolean, options?: EngineOptions, adaptToDeviceRatio?: boolean);
         private _rebuildInternalTextures;
         private _rebuildEffects;
         /**
@@ -48207,15 +48246,38 @@ declare module "babylonjs/Cameras/arcRotateCamera" {
         /** @hidden */
         _isSynchronizedViewMatrix(): boolean;
         /**
+         * Attach the input controls to a specific dom element to get the input from.
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         */
+        attachControl(noPreventDefault?: boolean): void;
+        /**
+         * Attach the input controls to a specific dom element to get the input from.
+         * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         */
+        attachControl(ignored: any, noPreventDefault?: boolean): void;
+        /**
+         * Attached controls to the current camera.
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
+         */
+        attachControl(noPreventDefault: boolean, useCtrlForPanning: boolean): void;
+        /**
+         * Attached controls to the current camera.
+         * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
+         */
+        attachControl(ignored: any, noPreventDefault: boolean, useCtrlForPanning: boolean): void;
+        /**
          * Attached controls to the current camera.
          * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
          * @param panningMouseButton Defines whether panning is allowed through mouse click button
          */
-        attachControl(noPreventDefault?: boolean, useCtrlForPanning?: boolean, panningMouseButton?: number): void;
+        attachControl(noPreventDefault: boolean, useCtrlForPanning: boolean, panningMouseButton: number): void;
         /**
-         * Detach the current controls from the camera.
-         * The camera will stop reacting to inputs.
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         /** @hidden */
@@ -48664,7 +48726,7 @@ declare module "babylonjs/Behaviors/Meshes/pointerDragBehavior" {
         private _alternatePickedPoint;
         private _worldDragAxis;
         private _targetPosition;
-        private _attachedElement;
+        private _attachedToElement;
         /**
          * Attaches the drag behavior the passed in mesh
          * @param ownerNode The mesh that will be dragged around once attached
@@ -48755,7 +48817,7 @@ declare module "babylonjs/Behaviors/Meshes/sixDofDragBehavior" {
         private _pointerObserver;
         private _moving;
         private _startingOrientation;
-        private _attachedElement;
+        private _attachedToElement;
         /**
          * How much faster the object should move when the controller is moving towards it. This is useful to bring objects that are far away from the user to them faster. Set this to 0 to avoid any speed increase. (Default: 3)
          */
@@ -49092,7 +49154,6 @@ declare module "babylonjs/Cameras/Inputs/arcRotateCameraGamepadInput" {
         attachControl(): void;
         /**
          * Detach the current controls from the specified dom element.
-         * @param element Defines the element to stop listening the inputs from
          */
         detachControl(): void;
         /**
@@ -49432,8 +49493,8 @@ declare module "babylonjs/Cameras/flyCamera" {
         */
         constructor(name: string, position: Vector3, scene: Scene, setActiveOnSceneIfNoneActive?: boolean);
         /**
-         * Attach a control to the HTML DOM element.
-         * @param noPreventDefault Defines whether events caught by the controls should call preventdefault(). https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
+         * Attach the input controls to a specific dom element to get the input from.
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
@@ -49813,13 +49874,12 @@ declare module "babylonjs/Cameras/followCamera" {
         constructor(name: string, position: Vector3, scene: Scene, lockedTarget?: Nullable<AbstractMesh>);
         private _follow;
         /**
-         * Attached controls to the current camera.
+         * Attach the input controls to a specific dom element to get the input from.
          * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
-         * Detach the current controls from the camera.
-         * The camera will stop reacting to inputs.
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         /** @hidden */
@@ -60027,6 +60087,8 @@ declare module "babylonjs/Lights/spotLight" {
         * Sets the projection texture of the light.
         */
         set projectionTexture(value: Nullable<BaseTexture>);
+        private static _IsProceduralTexture;
+        private static _IsTexture;
         private _projectionTextureViewLightDirty;
         private _projectionTextureProjectionLightDirty;
         private _projectionTextureDirty;
@@ -75138,6 +75200,7 @@ declare module "babylonjs/PostProcesses/RenderPipeline/postProcessRenderPipeline
 }
 declare module "babylonjs/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline" {
     import { Nullable } from "babylonjs/types";
+    import { Observable } from "babylonjs/Misc/observable";
     import { IAnimatable } from "babylonjs/Animations/animatable.interface";
     import { Camera } from "babylonjs/Cameras/camera";
     import { IDisposable } from "babylonjs/scene";
@@ -75230,6 +75293,10 @@ declare module "babylonjs/PostProcesses/RenderPipeline/Pipelines/defaultRenderin
         private _grainEnabled;
         private _buildAllowed;
         /**
+         * This is triggered each time the pipeline has been built.
+         */
+        onBuildObservable: Observable<DefaultRenderingPipeline>;
+        /**
          * Gets active scene
          */
         get scene(): Scene;
@@ -79758,6 +79825,7 @@ declare module "babylonjs/Misc/index" {
     export * from "babylonjs/Misc/khronosTextureContainer2";
     export * from "babylonjs/Misc/trajectoryClassifier";
     export * from "babylonjs/Misc/timer";
+    export * from "babylonjs/Misc/copyTools";
 }
 declare module "babylonjs/XR/features/WebXRHitTestLegacy" {
     import { IWebXRFeature } from "babylonjs/XR/webXRFeaturesManager";
@@ -88939,6 +89007,21 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
+     * Class used to host copy specific utilities
+     */
+    export class CopyTools {
+        /**
+         * Reads the pixels stored in the webgl texture and returns them as a base64 string
+         * @param texture defines the texture to read pixels from
+         * @param faceIndex defines the face of the texture to read (in case of cube texture)
+         * @param level defines the LOD level of the texture to read (in case of Mip Maps)
+         * @returns The base64 encoded string or null
+         */
+        static GenerateBase64StringFromTexture(texture: BaseTexture, faceIndex?: number, level?: number): Nullable<string>;
+    }
+}
+declare module BABYLON {
+    /**
      * Define options used to create a depth texture
      */
     export class DepthTextureCreationOptions {
@@ -100475,7 +100558,6 @@ declare module BABYLON {
         attachControl(noPreventDefault?: boolean): void;
         /**
          * Detach the current controls from the specified dom element.
-         * @param element Defines the element to stop listening the inputs from
          */
         detachControl(): void;
         /**
@@ -100648,13 +100730,12 @@ declare module BABYLON {
          */
         constructor(name: string, position: Vector3, scene: Scene, setActiveOnSceneIfNoneActive?: boolean);
         /**
-         * Attached controls to the current camera.
+         * Attach the input controls to a specific dom element to get the input from.
          * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
-         * Detach the current controls from the camera.
-         * The camera will stop reacting to inputs.
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         private _collisionMask;
@@ -101695,7 +101776,7 @@ declare module BABYLON {
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
-         * Detaches the camera from the html element and disables VR
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         /**
@@ -102174,6 +102255,13 @@ declare module BABYLON {
      * Defines a connection point for a block
      */
     export class NodeMaterialConnectionPoint {
+        /**
+         * Checks if two types are equivalent
+         * @param type1 type 1 to check
+         * @param type2 type 2 to check
+         * @returns true if both types are equivalent, else false
+         */
+        static AreEquivalentTypes(type1: number, type2: number): boolean;
         /** @hidden */
         _ownerBlock: NodeMaterialBlock;
         /** @hidden */
@@ -102185,6 +102273,8 @@ declare module BABYLON {
         _typeConnectionSource: Nullable<NodeMaterialConnectionPoint>;
         /** @hidden */
         _linkedConnectionSource: Nullable<NodeMaterialConnectionPoint>;
+        /** @hidden */
+        _acceptedConnectionPointType: Nullable<NodeMaterialConnectionPoint>;
         private _type;
         /** @hidden */
         _enforceAssociatedVariableName: boolean;
@@ -103327,7 +103417,7 @@ declare module BABYLON {
          * @returns true if the block is ready
          */
         isReady(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines, useInstances?: boolean): boolean;
-        protected _linkConnectionTypes(inputIndex0: number, inputIndex1: number): void;
+        protected _linkConnectionTypes(inputIndex0: number, inputIndex1: number, looseCoupling?: boolean): void;
         private _processBuild;
         /**
         * Validates the new name for the block node.
@@ -109451,6 +109541,11 @@ declare module BABYLON {
          * Gets or sets a general boolean used to indicate that textures containing direct data (buffers) must be saved as part of the serialization process
          */
         static SerializeBuffers: boolean;
+        /**
+         * Gets or sets a general boolean used to indicate that texture buffers must be saved as part of the serialization process.
+         * If no buffer exists, one will be created as base64 string from the internal webgl data.
+         */
+        static ForceSerializeBuffers: boolean;
         /** @hidden */
         static _CubeTextureParser: (jsonTexture: any, scene: Scene, rootUrl: string) => CubeTexture;
         /** @hidden */
@@ -118949,6 +119044,8 @@ declare module BABYLON {
         private _vertexSourceCodeOverride;
         private _fragmentSourceCodeOverride;
         private _transformFeedbackVaryings;
+        private _rawVertexSourceCode;
+        private _rawFragmentSourceCode;
         /**
          * Compiled shader to webGL program.
          * @hidden
@@ -119072,6 +119169,14 @@ declare module BABYLON {
          */
         get fragmentSourceCode(): string;
         /**
+         * Gets the vertex shader source code before it has been processed by the preprocessor
+         */
+        get rawVertexSourceCode(): string;
+        /**
+         * Gets the fragment shader source code before it has been processed by the preprocessor
+         */
+        get rawFragmentSourceCode(): string;
+        /**
          * Recompiles the webGL program
          * @param vertexSourceCode The source code for the vertex shader.
          * @param fragmentSourceCode The source code for the fragment shader.
@@ -120137,7 +120242,7 @@ declare module BABYLON {
          * @param options defines further options to be sent to the getContext() function
          * @param adaptToDeviceRatio defines whether to adapt to the device's viewport characteristics (default: false)
          */
-        constructor(canvasOrContext: Nullable<HTMLCanvasElement | WebGLRenderingContext | WebGL2RenderingContext>, antialias?: boolean, options?: EngineOptions, adaptToDeviceRatio?: boolean);
+        constructor(canvasOrContext: Nullable<HTMLCanvasElement | OffscreenCanvas | WebGLRenderingContext | WebGL2RenderingContext>, antialias?: boolean, options?: EngineOptions, adaptToDeviceRatio?: boolean);
         private _rebuildInternalTextures;
         private _rebuildEffects;
         /**
@@ -127659,15 +127764,38 @@ declare module BABYLON {
         /** @hidden */
         _isSynchronizedViewMatrix(): boolean;
         /**
+         * Attach the input controls to a specific dom element to get the input from.
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         */
+        attachControl(noPreventDefault?: boolean): void;
+        /**
+         * Attach the input controls to a specific dom element to get the input from.
+         * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         */
+        attachControl(ignored: any, noPreventDefault?: boolean): void;
+        /**
+         * Attached controls to the current camera.
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
+         */
+        attachControl(noPreventDefault: boolean, useCtrlForPanning: boolean): void;
+        /**
+         * Attached controls to the current camera.
+         * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
+         */
+        attachControl(ignored: any, noPreventDefault: boolean, useCtrlForPanning: boolean): void;
+        /**
          * Attached controls to the current camera.
          * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
          * @param panningMouseButton Defines whether panning is allowed through mouse click button
          */
-        attachControl(noPreventDefault?: boolean, useCtrlForPanning?: boolean, panningMouseButton?: number): void;
+        attachControl(noPreventDefault: boolean, useCtrlForPanning: boolean, panningMouseButton: number): void;
         /**
-         * Detach the current controls from the camera.
-         * The camera will stop reacting to inputs.
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         /** @hidden */
@@ -128092,7 +128220,7 @@ declare module BABYLON {
         private _alternatePickedPoint;
         private _worldDragAxis;
         private _targetPosition;
-        private _attachedElement;
+        private _attachedToElement;
         /**
          * Attaches the drag behavior the passed in mesh
          * @param ownerNode The mesh that will be dragged around once attached
@@ -128178,7 +128306,7 @@ declare module BABYLON {
         private _pointerObserver;
         private _moving;
         private _startingOrientation;
-        private _attachedElement;
+        private _attachedToElement;
         /**
          * How much faster the object should move when the controller is moving towards it. This is useful to bring objects that are far away from the user to them faster. Set this to 0 to avoid any speed increase. (Default: 3)
          */
@@ -128485,7 +128613,6 @@ declare module BABYLON {
         attachControl(): void;
         /**
          * Detach the current controls from the specified dom element.
-         * @param element Defines the element to stop listening the inputs from
          */
         detachControl(): void;
         /**
@@ -128812,8 +128939,8 @@ declare module BABYLON {
         */
         constructor(name: string, position: Vector3, scene: Scene, setActiveOnSceneIfNoneActive?: boolean);
         /**
-         * Attach a control to the HTML DOM element.
-         * @param noPreventDefault Defines whether events caught by the controls should call preventdefault(). https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
+         * Attach the input controls to a specific dom element to get the input from.
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
@@ -129177,13 +129304,12 @@ declare module BABYLON {
         constructor(name: string, position: Vector3, scene: Scene, lockedTarget?: Nullable<AbstractMesh>);
         private _follow;
         /**
-         * Attached controls to the current camera.
+         * Attach the input controls to a specific dom element to get the input from.
          * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
-         * Detach the current controls from the camera.
-         * The camera will stop reacting to inputs.
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         /** @hidden */
@@ -138670,6 +138796,8 @@ declare module BABYLON {
         * Sets the projection texture of the light.
         */
         set projectionTexture(value: Nullable<BaseTexture>);
+        private static _IsProceduralTexture;
+        private static _IsTexture;
         private _projectionTextureViewLightDirty;
         private _projectionTextureProjectionLightDirty;
         private _projectionTextureDirty;
@@ -152521,6 +152649,10 @@ declare module BABYLON {
         private _grainEnabled;
         private _buildAllowed;
         /**
+         * This is triggered each time the pipeline has been built.
+         */
+        onBuildObservable: Observable<DefaultRenderingPipeline>;
+        /**
          * Gets active scene
          */
         get scene(): Scene;

dist/preview release/documentation.d.ts

@@ -7779,6 +7779,21 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
+     * Class used to host copy specific utilities
+     */
+    export class CopyTools {
+        /**
+         * Reads the pixels stored in the webgl texture and returns them as a base64 string
+         * @param texture defines the texture to read pixels from
+         * @param faceIndex defines the face of the texture to read (in case of cube texture)
+         * @param level defines the LOD level of the texture to read (in case of Mip Maps)
+         * @returns The base64 encoded string or null
+         */
+        static GenerateBase64StringFromTexture(texture: BaseTexture, faceIndex?: number, level?: number): Nullable<string>;
+    }
+}
+declare module BABYLON {
+    /**
      * Define options used to create a depth texture
      */
     export class DepthTextureCreationOptions {
@@ -19315,7 +19330,6 @@ declare module BABYLON {
         attachControl(noPreventDefault?: boolean): void;
         /**
          * Detach the current controls from the specified dom element.
-         * @param element Defines the element to stop listening the inputs from
          */
         detachControl(): void;
         /**
@@ -19488,13 +19502,12 @@ declare module BABYLON {
          */
         constructor(name: string, position: Vector3, scene: Scene, setActiveOnSceneIfNoneActive?: boolean);
         /**
-         * Attached controls to the current camera.
+         * Attach the input controls to a specific dom element to get the input from.
          * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
-         * Detach the current controls from the camera.
-         * The camera will stop reacting to inputs.
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         private _collisionMask;
@@ -20535,7 +20548,7 @@ declare module BABYLON {
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
-         * Detaches the camera from the html element and disables VR
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         /**
@@ -21014,6 +21027,13 @@ declare module BABYLON {
      * Defines a connection point for a block
      */
     export class NodeMaterialConnectionPoint {
+        /**
+         * Checks if two types are equivalent
+         * @param type1 type 1 to check
+         * @param type2 type 2 to check
+         * @returns true if both types are equivalent, else false
+         */
+        static AreEquivalentTypes(type1: number, type2: number): boolean;
         /** @hidden */
         _ownerBlock: NodeMaterialBlock;
         /** @hidden */
@@ -21025,6 +21045,8 @@ declare module BABYLON {
         _typeConnectionSource: Nullable<NodeMaterialConnectionPoint>;
         /** @hidden */
         _linkedConnectionSource: Nullable<NodeMaterialConnectionPoint>;
+        /** @hidden */
+        _acceptedConnectionPointType: Nullable<NodeMaterialConnectionPoint>;
         private _type;
         /** @hidden */
         _enforceAssociatedVariableName: boolean;
@@ -22167,7 +22189,7 @@ declare module BABYLON {
          * @returns true if the block is ready
          */
         isReady(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines, useInstances?: boolean): boolean;
-        protected _linkConnectionTypes(inputIndex0: number, inputIndex1: number): void;
+        protected _linkConnectionTypes(inputIndex0: number, inputIndex1: number, looseCoupling?: boolean): void;
         private _processBuild;
         /**
         * Validates the new name for the block node.
@@ -28291,6 +28313,11 @@ declare module BABYLON {
          * Gets or sets a general boolean used to indicate that textures containing direct data (buffers) must be saved as part of the serialization process
          */
         static SerializeBuffers: boolean;
+        /**
+         * Gets or sets a general boolean used to indicate that texture buffers must be saved as part of the serialization process.
+         * If no buffer exists, one will be created as base64 string from the internal webgl data.
+         */
+        static ForceSerializeBuffers: boolean;
         /** @hidden */
         static _CubeTextureParser: (jsonTexture: any, scene: Scene, rootUrl: string) => CubeTexture;
         /** @hidden */
@@ -37789,6 +37816,8 @@ declare module BABYLON {
         private _vertexSourceCodeOverride;
         private _fragmentSourceCodeOverride;
         private _transformFeedbackVaryings;
+        private _rawVertexSourceCode;
+        private _rawFragmentSourceCode;
         /**
          * Compiled shader to webGL program.
          * @hidden
@@ -37912,6 +37941,14 @@ declare module BABYLON {
          */
         get fragmentSourceCode(): string;
         /**
+         * Gets the vertex shader source code before it has been processed by the preprocessor
+         */
+        get rawVertexSourceCode(): string;
+        /**
+         * Gets the fragment shader source code before it has been processed by the preprocessor
+         */
+        get rawFragmentSourceCode(): string;
+        /**
          * Recompiles the webGL program
          * @param vertexSourceCode The source code for the vertex shader.
          * @param fragmentSourceCode The source code for the fragment shader.
@@ -38977,7 +39014,7 @@ declare module BABYLON {
          * @param options defines further options to be sent to the getContext() function
          * @param adaptToDeviceRatio defines whether to adapt to the device's viewport characteristics (default: false)
          */
-        constructor(canvasOrContext: Nullable<HTMLCanvasElement | WebGLRenderingContext | WebGL2RenderingContext>, antialias?: boolean, options?: EngineOptions, adaptToDeviceRatio?: boolean);
+        constructor(canvasOrContext: Nullable<HTMLCanvasElement | OffscreenCanvas | WebGLRenderingContext | WebGL2RenderingContext>, antialias?: boolean, options?: EngineOptions, adaptToDeviceRatio?: boolean);
         private _rebuildInternalTextures;
         private _rebuildEffects;
         /**
@@ -46499,15 +46536,38 @@ declare module BABYLON {
         /** @hidden */
         _isSynchronizedViewMatrix(): boolean;
         /**
+         * Attach the input controls to a specific dom element to get the input from.
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         */
+        attachControl(noPreventDefault?: boolean): void;
+        /**
+         * Attach the input controls to a specific dom element to get the input from.
+         * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         */
+        attachControl(ignored: any, noPreventDefault?: boolean): void;
+        /**
+         * Attached controls to the current camera.
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
+         */
+        attachControl(noPreventDefault: boolean, useCtrlForPanning: boolean): void;
+        /**
+         * Attached controls to the current camera.
+         * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
+         */
+        attachControl(ignored: any, noPreventDefault: boolean, useCtrlForPanning: boolean): void;
+        /**
          * Attached controls to the current camera.
          * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
          * @param panningMouseButton Defines whether panning is allowed through mouse click button
          */
-        attachControl(noPreventDefault?: boolean, useCtrlForPanning?: boolean, panningMouseButton?: number): void;
+        attachControl(noPreventDefault: boolean, useCtrlForPanning: boolean, panningMouseButton: number): void;
         /**
-         * Detach the current controls from the camera.
-         * The camera will stop reacting to inputs.
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         /** @hidden */
@@ -46932,7 +46992,7 @@ declare module BABYLON {
         private _alternatePickedPoint;
         private _worldDragAxis;
         private _targetPosition;
-        private _attachedElement;
+        private _attachedToElement;
         /**
          * Attaches the drag behavior the passed in mesh
          * @param ownerNode The mesh that will be dragged around once attached
@@ -47018,7 +47078,7 @@ declare module BABYLON {
         private _pointerObserver;
         private _moving;
         private _startingOrientation;
-        private _attachedElement;
+        private _attachedToElement;
         /**
          * How much faster the object should move when the controller is moving towards it. This is useful to bring objects that are far away from the user to them faster. Set this to 0 to avoid any speed increase. (Default: 3)
          */
@@ -47325,7 +47385,6 @@ declare module BABYLON {
         attachControl(): void;
         /**
          * Detach the current controls from the specified dom element.
-         * @param element Defines the element to stop listening the inputs from
          */
         detachControl(): void;
         /**
@@ -47652,8 +47711,8 @@ declare module BABYLON {
         */
         constructor(name: string, position: Vector3, scene: Scene, setActiveOnSceneIfNoneActive?: boolean);
         /**
-         * Attach a control to the HTML DOM element.
-         * @param noPreventDefault Defines whether events caught by the controls should call preventdefault(). https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
+         * Attach the input controls to a specific dom element to get the input from.
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
@@ -48017,13 +48076,12 @@ declare module BABYLON {
         constructor(name: string, position: Vector3, scene: Scene, lockedTarget?: Nullable<AbstractMesh>);
         private _follow;
         /**
-         * Attached controls to the current camera.
+         * Attach the input controls to a specific dom element to get the input from.
          * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
-         * Detach the current controls from the camera.
-         * The camera will stop reacting to inputs.
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         /** @hidden */
@@ -57510,6 +57568,8 @@ declare module BABYLON {
         * Sets the projection texture of the light.
         */
         set projectionTexture(value: Nullable<BaseTexture>);
+        private static _IsProceduralTexture;
+        private static _IsTexture;
         private _projectionTextureViewLightDirty;
         private _projectionTextureProjectionLightDirty;
         private _projectionTextureDirty;
@@ -71361,6 +71421,10 @@ declare module BABYLON {
         private _grainEnabled;
         private _buildAllowed;
         /**
+         * This is triggered each time the pipeline has been built.
+         */
+        onBuildObservable: Observable<DefaultRenderingPipeline>;
+        /**
          * Gets active scene
          */
         get scene(): Scene;

dist/preview release/glTF2Interface/package.json

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

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.2.0-beta.12",
+    "version": "4.2.0-beta.13",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-beta.12"
+        "babylonjs": "4.2.0-beta.13"
     },
     "engines": {
         "node": "*"

dist/preview release/inspector/babylon.inspector.bundle.max.js

@@ -79628,7 +79628,6 @@ var Inspector = /** @class */ (function () {
                 }
             }
             catch (e) {
-                console.log(e);
             }
         }
     };

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "4.2.0-beta.12",
+    "version": "4.2.0-beta.13",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -29,12 +29,12 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-beta.12",
-        "babylonjs-gui": "4.2.0-beta.12",
-        "babylonjs-loaders": "4.2.0-beta.12",
-        "babylonjs-materials": "4.2.0-beta.12",
-        "babylonjs-serializers": "4.2.0-beta.12",
-        "babylonjs-gltf2interface": "4.2.0-beta.12"
+        "babylonjs": "4.2.0-beta.13",
+        "babylonjs-gui": "4.2.0-beta.13",
+        "babylonjs-loaders": "4.2.0-beta.13",
+        "babylonjs-materials": "4.2.0-beta.13",
+        "babylonjs-serializers": "4.2.0-beta.13",
+        "babylonjs-gltf2interface": "4.2.0-beta.13"
     },
     "peerDependencies": {
         "@types/react": ">=16.7.3",

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.2.0-beta.12",
+    "version": "4.2.0-beta.13",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,8 +28,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "4.2.0-beta.12",
-        "babylonjs": "4.2.0-beta.12"
+        "babylonjs-gltf2interface": "4.2.0-beta.13",
+        "babylonjs": "4.2.0-beta.13"
     },
     "engines": {
         "node": "*"

dist/preview release/materialsLibrary/package.json

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

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

@@ -184,7 +184,7 @@ declare module NODEEDITOR {
         private removePortFromExposedWithLink;
         private createInputPorts;
         private createOutputPorts;
-        private _redrawFramePorts;
+        redrawFramePorts(): void;
         set isCollapsed(value: boolean);
         get nodes(): GraphNode[];
         get ports(): FrameNodePort[];

dist/preview release/nodeEditor/babylon.nodeEditor.max.js

@@ -67731,7 +67731,7 @@ var GraphFrame = /** @class */ (function () {
             if (_this_1.nodes.indexOf(node) === -1) {
                 return;
             }
-            _this_1._redrawFramePorts();
+            _this_1.redrawFramePorts();
         });
         this._commentsElement = document.createElement('div');
         this._commentsElement.className = 'frame-comments';
@@ -67933,15 +67933,20 @@ var GraphFrame = /** @class */ (function () {
         var aPort = exposedPorts.findIndex(function (nodePort) { return nodePort === nodeLink.portA; });
         var bPort = exposedPorts.findIndex(function (nodePort) { return nodePort === nodeLink.portB; });
         if (aPort >= 0) {
-            exposedPorts.splice(aPort, 1);
-            nodeLink.portA.exposedPortPosition = -1;
+            if (!nodeLink.portA.exposedOnFrame) {
+                exposedPorts.splice(aPort, 1);
+                nodeLink.portA.exposedPortPosition = -1;
+                return true;
+            }
         }
         else if (bPort >= 0) {
-            exposedPorts.splice(bPort, 1);
-            if (nodeLink.portB) {
+            if (nodeLink.portB && !nodeLink.portB.exposedOnFrame) {
+                exposedPorts.splice(bPort, 1);
                 nodeLink.portB.exposedPortPosition = -1;
+                return true;
             }
         }
+        return false;
     };
     GraphFrame.prototype.createInputPorts = function (port, node) {
         var _this_1 = this;
@@ -67954,8 +67959,9 @@ var GraphFrame = /** @class */ (function () {
                     link.isVisible = true;
                     portAdded = true;
                     var onLinkDisposedObserver = link.onDisposedObservable.add(function (nodeLink) {
-                        _this_1.removePortFromExposedWithLink(nodeLink, _this_1._exposedInPorts);
-                        _this_1._redrawFramePorts();
+                        if (_this_1.removePortFromExposedWithLink(nodeLink, _this_1._exposedInPorts)) {
+                            _this_1.redrawFramePorts();
+                        }
                     });
                     this._onNodeLinkDisposedObservers.push(onLinkDisposedObserver);
                 }
@@ -67983,8 +67989,9 @@ var GraphFrame = /** @class */ (function () {
                         this._frameOutPorts.push(localPort);
                         link.isVisible = true;
                         var onLinkDisposedObserver = link.onDisposedObservable.add(function (nodeLink) {
-                            _this_1.removePortFromExposedWithLink(nodeLink, _this_1._exposedOutPorts);
-                            _this_1._redrawFramePorts();
+                            if (_this_1.removePortFromExposedWithLink(nodeLink, _this_1._exposedOutPorts)) {
+                                _this_1.redrawFramePorts();
+                            }
                         });
                         this._onNodeLinkDisposedObservers.push(onLinkDisposedObserver);
                     }
@@ -68018,7 +68025,7 @@ var GraphFrame = /** @class */ (function () {
         }
         return false;
     };
-    GraphFrame.prototype._redrawFramePorts = function () {
+    GraphFrame.prototype.redrawFramePorts = function () {
         if (!this.isCollapsed) {
             return;
         }
@@ -68035,6 +68042,7 @@ var GraphFrame = /** @class */ (function () {
         this._frameOutPorts = [];
         this._controlledPorts = [];
         this._createFramePorts();
+        this._markFramePortPositions();
         this.ports.forEach(function (framePort) { return framePort.node._refreshLinks(); });
     };
     Object.defineProperty(GraphFrame.prototype, "nodes", {
@@ -68403,17 +68411,6 @@ var GraphFrame = /** @class */ (function () {
     };
     GraphFrame.prototype.dispose = function () {
         var _a;
-        if (this.isCollapsed) {
-            while (this._nodes.length > 0) {
-                this._nodes[0].dispose();
-            }
-            this.isCollapsed = false;
-        }
-        else {
-            this._nodes.forEach(function (node) {
-                node.enclosingFrameId = -1;
-            });
-        }
         if (this._onSelectionChangedObserver) {
             this._ownerCanvas.globalState.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);
         }
@@ -68812,6 +68809,7 @@ var GraphNode = /** @class */ (function () {
         }
     };
     GraphNode.prototype.refresh = function () {
+        var _this = this;
         if (this._displayManager) {
             this._header.innerHTML = this._displayManager.getHeaderText(this.block);
             this._displayManager.updatePreviewContent(this.block, this._content);
@@ -68833,6 +68831,12 @@ var GraphNode = /** @class */ (function () {
             var port = _c[_b];
             port.refresh();
         }
+        if (this.enclosingFrameId !== -1) {
+            var index = this._ownerCanvas.frames.findIndex(function (frame) { return frame.id === _this.enclosingFrameId; });
+            if (index >= 0 && this._ownerCanvas.frames[index].isCollapsed) {
+                this._ownerCanvas.frames[index].redrawFramePorts();
+            }
+        }
         this._comments.innerHTML = this.block.comments || "";
         this._comments.title = this.block.comments || "";
     };
@@ -71059,6 +71063,24 @@ var GraphEditor = /** @class */ (function (_super) {
                     _this._graphCanvas.selectedLink.dispose();
                 }
                 if (_this._graphCanvas.selectedFrame) {
+                    var frame = _this._graphCanvas.selectedFrame;
+                    if (frame.isCollapsed) {
+                        while (frame.nodes.length > 0) {
+                            var targetBlock = frame.nodes[0].block;
+                            _this.props.globalState.nodeMaterial.removeBlock(targetBlock);
+                            var blockIndex = _this._blocks.indexOf(targetBlock);
+                            if (blockIndex > -1) {
+                                _this._blocks.splice(blockIndex, 1);
+                            }
+                            frame.nodes[0].dispose();
+                        }
+                        frame.isCollapsed = false;
+                    }
+                    else {
+                        frame.nodes.forEach(function (node) {
+                            node.enclosingFrameId = -1;
+                        });
+                    }
                     _this._graphCanvas.selectedFrame.dispose();
                 }
                 _this.props.globalState.onSelectionChangedObservable.notifyObservers(null);

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

@@ -285,7 +285,7 @@ declare module "babylonjs-node-editor/diagram/graphFrame" {
         private removePortFromExposedWithLink;
         private createInputPorts;
         private createOutputPorts;
-        private _redrawFramePorts;
+        redrawFramePorts(): void;
         set isCollapsed(value: boolean);
         get nodes(): GraphNode[];
         get ports(): FrameNodePort[];
@@ -2110,7 +2110,7 @@ declare module NODEEDITOR {
         private removePortFromExposedWithLink;
         private createInputPorts;
         private createOutputPorts;
-        private _redrawFramePorts;
+        redrawFramePorts(): void;
         set isCollapsed(value: boolean);
         get nodes(): GraphNode[];
         get ports(): FrameNodePort[];

dist/preview release/nodeEditor/package.json

@@ -4,14 +4,14 @@
     },
     "name": "babylonjs-node-editor",
     "description": "The Babylon.js node material editor.",
-    "version": "4.2.0-beta.12",
+    "version": "4.2.0-beta.13",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
     },
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-beta.12"
+        "babylonjs": "4.2.0-beta.13"
     },
     "files": [
         "babylon.nodeEditor.max.js.map",

dist/preview release/package.json

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

dist/preview release/packagesSizeBaseLine.json

@@ -1 +1 @@
-{"thinEngineOnly":118763,"engineOnly":155203,"sceneOnly":522649,"minGridMaterial":671882,"minStandardMaterial":828088}
+{"thinEngineOnly":119155,"engineOnly":155595,"sceneOnly":522958,"minGridMaterial":672170,"minStandardMaterial":829302}

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.2.0-beta.12",
+    "version": "4.2.0-beta.13",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-beta.12"
+        "babylonjs": "4.2.0-beta.13"
     },
     "engines": {
         "node": "*"

dist/preview release/proceduralTexturesLibrary/package.json

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

dist/preview release/serializers/babylonjs.serializers.js

@@ -5818,19 +5818,19 @@ var STLExport = /** @class */ (function () {
     STLExport.CreateSTL = function (meshes, download, fileName, binary, isLittleEndian) {
         //Binary support adapted from https://gist.github.com/paulkaplan/6d5f0ab2c7e8fdc68a61
         if (download === void 0) { download = true; }
-        if (fileName === void 0) { fileName = 'STL_Mesh'; }
+        if (fileName === void 0) { fileName = 'stlmesh'; }
         if (binary === void 0) { binary = false; }
         if (isLittleEndian === void 0) { isLittleEndian = true; }
         var getFaceData = function (indices, vertices, i) {
             var id = [indices[i] * 3, indices[i + 1] * 3, indices[i + 2] * 3];
             var v = [
-                new babylonjs_Meshes_buffer__WEBPACK_IMPORTED_MODULE_0__["Vector3"](vertices[id[0]], vertices[id[0] + 1], vertices[id[0] + 2]),
-                new babylonjs_Meshes_buffer__WEBPACK_IMPORTED_MODULE_0__["Vector3"](vertices[id[1]], vertices[id[1] + 1], vertices[id[1] + 2]),
-                new babylonjs_Meshes_buffer__WEBPACK_IMPORTED_MODULE_0__["Vector3"](vertices[id[2]], vertices[id[2] + 1], vertices[id[2] + 2])
+                new babylonjs_Meshes_buffer__WEBPACK_IMPORTED_MODULE_0__["Vector3"](vertices[id[0]], vertices[id[0] + 2], vertices[id[0] + 1]),
+                new babylonjs_Meshes_buffer__WEBPACK_IMPORTED_MODULE_0__["Vector3"](vertices[id[1]], vertices[id[1] + 2], vertices[id[1] + 1]),
+                new babylonjs_Meshes_buffer__WEBPACK_IMPORTED_MODULE_0__["Vector3"](vertices[id[2]], vertices[id[2] + 2], vertices[id[2] + 1])
             ];
             var p1p2 = v[0].subtract(v[1]);
             var p3p2 = v[2].subtract(v[1]);
-            var n = (babylonjs_Meshes_buffer__WEBPACK_IMPORTED_MODULE_0__["Vector3"].Cross(p1p2, p3p2)).normalize();
+            var n = (babylonjs_Meshes_buffer__WEBPACK_IMPORTED_MODULE_0__["Vector3"].Cross(p3p2, p1p2)).normalize();
             return { v: v, n: n };
         };
         var writeVector = function (dataview, offset, vector, isLittleEndian) {
@@ -5849,7 +5849,7 @@ var STLExport = /** @class */ (function () {
             for (var i = 0; i < meshes.length; i++) {
                 var mesh = meshes[i];
                 var indices = mesh.getIndices();
-                faceCount += indices ? indices.length : 0;
+                faceCount += indices ? indices.length / 3 : 0;
             }
             var bufferSize = 84 + (50 * faceCount);
             var buffer = new ArrayBuffer(bufferSize);
@@ -5859,7 +5859,7 @@ var STLExport = /** @class */ (function () {
             offset += 4;
         }
         else {
-            data = 'solid exportedMesh\r\n';
+            data = 'solid stlmesh\r\n';
         }
         for (var i = 0; i < meshes.length; i++) {
             var mesh = meshes[i];
@@ -5887,15 +5887,12 @@ var STLExport = /** @class */ (function () {
             }
         }
         if (!binary) {
-            data += 'endsolid exportedMesh';
+            data += 'endsolid stlmesh';
         }
         if (download) {
             var a = document.createElement('a');
             var blob = new Blob([data], { 'type': 'application/octet-stream' });
             a.href = window.URL.createObjectURL(blob);
-            if (!fileName) {
-                fileName = "STL_Mesh";
-            }
             a.download = fileName + ".stl";
             a.click();
         }

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.2.0-beta.12",
+    "version": "4.2.0-beta.13",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,8 +28,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.2.0-beta.12",
-        "babylonjs-gltf2interface": "4.2.0-beta.12"
+        "babylonjs": "4.2.0-beta.13",
+        "babylonjs-gltf2interface": "4.2.0-beta.13"
     },
     "engines": {
         "node": "*"

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

@@ -7863,6 +7863,23 @@ declare module "babylonjs/Misc/instantiationTools" {
         static Instantiate(className: string): any;
     }
 }
+declare module "babylonjs/Misc/copyTools" {
+    import { Nullable } from "babylonjs/types";
+    import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
+    /**
+     * Class used to host copy specific utilities
+     */
+    export class CopyTools {
+        /**
+         * Reads the pixels stored in the webgl texture and returns them as a base64 string
+         * @param texture defines the texture to read pixels from
+         * @param faceIndex defines the face of the texture to read (in case of cube texture)
+         * @param level defines the LOD level of the texture to read (in case of Mip Maps)
+         * @returns The base64 encoded string or null
+         */
+        static GenerateBase64StringFromTexture(texture: BaseTexture, faceIndex?: number, level?: number): Nullable<string>;
+    }
+}
 declare module "babylonjs/Engines/depthTextureCreationOptions" {
     /**
      * Define options used to create a depth texture
@@ -19878,7 +19895,6 @@ declare module "babylonjs/Cameras/Inputs/freeCameraTouchInput" {
         attachControl(noPreventDefault?: boolean): void;
         /**
          * Detach the current controls from the specified dom element.
-         * @param element Defines the element to stop listening the inputs from
          */
         detachControl(): void;
         /**
@@ -20061,13 +20077,12 @@ declare module "babylonjs/Cameras/freeCamera" {
          */
         constructor(name: string, position: Vector3, scene: Scene, setActiveOnSceneIfNoneActive?: boolean);
         /**
-         * Attached controls to the current camera.
+         * Attach the input controls to a specific dom element to get the input from.
          * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
-         * Detach the current controls from the camera.
-         * The camera will stop reacting to inputs.
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         private _collisionMask;
@@ -21166,7 +21181,7 @@ declare module "babylonjs/Cameras/VR/webVRCamera" {
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
-         * Detaches the camera from the html element and disables VR
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         /**
@@ -21674,6 +21689,13 @@ declare module "babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint" {
      * Defines a connection point for a block
      */
     export class NodeMaterialConnectionPoint {
+        /**
+         * Checks if two types are equivalent
+         * @param type1 type 1 to check
+         * @param type2 type 2 to check
+         * @returns true if both types are equivalent, else false
+         */
+        static AreEquivalentTypes(type1: number, type2: number): boolean;
         /** @hidden */
         _ownerBlock: NodeMaterialBlock;
         /** @hidden */
@@ -21685,6 +21707,8 @@ declare module "babylonjs/Materials/Node/nodeMaterialBlockConnectionPoint" {
         _typeConnectionSource: Nullable<NodeMaterialConnectionPoint>;
         /** @hidden */
         _linkedConnectionSource: Nullable<NodeMaterialConnectionPoint>;
+        /** @hidden */
+        _acceptedConnectionPointType: Nullable<NodeMaterialConnectionPoint>;
         private _type;
         /** @hidden */
         _enforceAssociatedVariableName: boolean;
@@ -22907,7 +22931,7 @@ declare module "babylonjs/Materials/Node/nodeMaterialBlock" {
          * @returns true if the block is ready
          */
         isReady(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines, useInstances?: boolean): boolean;
-        protected _linkConnectionTypes(inputIndex0: number, inputIndex1: number): void;
+        protected _linkConnectionTypes(inputIndex0: number, inputIndex1: number, looseCoupling?: boolean): void;
         private _processBuild;
         /**
         * Validates the new name for the block node.
@@ -29439,6 +29463,11 @@ declare module "babylonjs/Materials/Textures/texture" {
          * Gets or sets a general boolean used to indicate that textures containing direct data (buffers) must be saved as part of the serialization process
          */
         static SerializeBuffers: boolean;
+        /**
+         * Gets or sets a general boolean used to indicate that texture buffers must be saved as part of the serialization process.
+         * If no buffer exists, one will be created as base64 string from the internal webgl data.
+         */
+        static ForceSerializeBuffers: boolean;
         /** @hidden */
         static _CubeTextureParser: (jsonTexture: any, scene: Scene, rootUrl: string) => CubeTexture;
         /** @hidden */
@@ -39212,6 +39241,8 @@ declare module "babylonjs/Materials/effect" {
         private _vertexSourceCodeOverride;
         private _fragmentSourceCodeOverride;
         private _transformFeedbackVaryings;
+        private _rawVertexSourceCode;
+        private _rawFragmentSourceCode;
         /**
          * Compiled shader to webGL program.
          * @hidden
@@ -39335,6 +39366,14 @@ declare module "babylonjs/Materials/effect" {
          */
         get fragmentSourceCode(): string;
         /**
+         * Gets the vertex shader source code before it has been processed by the preprocessor
+         */
+        get rawVertexSourceCode(): string;
+        /**
+         * Gets the fragment shader source code before it has been processed by the preprocessor
+         */
+        get rawFragmentSourceCode(): string;
+        /**
          * Recompiles the webGL program
          * @param vertexSourceCode The source code for the vertex shader.
          * @param fragmentSourceCode The source code for the fragment shader.
@@ -40442,7 +40481,7 @@ declare module "babylonjs/Engines/thinEngine" {
          * @param options defines further options to be sent to the getContext() function
          * @param adaptToDeviceRatio defines whether to adapt to the device's viewport characteristics (default: false)
          */
-        constructor(canvasOrContext: Nullable<HTMLCanvasElement | WebGLRenderingContext | WebGL2RenderingContext>, antialias?: boolean, options?: EngineOptions, adaptToDeviceRatio?: boolean);
+        constructor(canvasOrContext: Nullable<HTMLCanvasElement | OffscreenCanvas | WebGLRenderingContext | WebGL2RenderingContext>, antialias?: boolean, options?: EngineOptions, adaptToDeviceRatio?: boolean);
         private _rebuildInternalTextures;
         private _rebuildEffects;
         /**
@@ -48207,15 +48246,38 @@ declare module "babylonjs/Cameras/arcRotateCamera" {
         /** @hidden */
         _isSynchronizedViewMatrix(): boolean;
         /**
+         * Attach the input controls to a specific dom element to get the input from.
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         */
+        attachControl(noPreventDefault?: boolean): void;
+        /**
+         * Attach the input controls to a specific dom element to get the input from.
+         * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         */
+        attachControl(ignored: any, noPreventDefault?: boolean): void;
+        /**
+         * Attached controls to the current camera.
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
+         */
+        attachControl(noPreventDefault: boolean, useCtrlForPanning: boolean): void;
+        /**
+         * Attached controls to the current camera.
+         * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
+         */
+        attachControl(ignored: any, noPreventDefault: boolean, useCtrlForPanning: boolean): void;
+        /**
          * Attached controls to the current camera.
          * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
          * @param panningMouseButton Defines whether panning is allowed through mouse click button
          */
-        attachControl(noPreventDefault?: boolean, useCtrlForPanning?: boolean, panningMouseButton?: number): void;
+        attachControl(noPreventDefault: boolean, useCtrlForPanning: boolean, panningMouseButton: number): void;
         /**
-         * Detach the current controls from the camera.
-         * The camera will stop reacting to inputs.
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         /** @hidden */
@@ -48664,7 +48726,7 @@ declare module "babylonjs/Behaviors/Meshes/pointerDragBehavior" {
         private _alternatePickedPoint;
         private _worldDragAxis;
         private _targetPosition;
-        private _attachedElement;
+        private _attachedToElement;
         /**
          * Attaches the drag behavior the passed in mesh
          * @param ownerNode The mesh that will be dragged around once attached
@@ -48755,7 +48817,7 @@ declare module "babylonjs/Behaviors/Meshes/sixDofDragBehavior" {
         private _pointerObserver;
         private _moving;
         private _startingOrientation;
-        private _attachedElement;
+        private _attachedToElement;
         /**
          * How much faster the object should move when the controller is moving towards it. This is useful to bring objects that are far away from the user to them faster. Set this to 0 to avoid any speed increase. (Default: 3)
          */
@@ -49092,7 +49154,6 @@ declare module "babylonjs/Cameras/Inputs/arcRotateCameraGamepadInput" {
         attachControl(): void;
         /**
          * Detach the current controls from the specified dom element.
-         * @param element Defines the element to stop listening the inputs from
          */
         detachControl(): void;
         /**
@@ -49432,8 +49493,8 @@ declare module "babylonjs/Cameras/flyCamera" {
         */
         constructor(name: string, position: Vector3, scene: Scene, setActiveOnSceneIfNoneActive?: boolean);
         /**
-         * Attach a control to the HTML DOM element.
-         * @param noPreventDefault Defines whether events caught by the controls should call preventdefault(). https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
+         * Attach the input controls to a specific dom element to get the input from.
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
@@ -49813,13 +49874,12 @@ declare module "babylonjs/Cameras/followCamera" {
         constructor(name: string, position: Vector3, scene: Scene, lockedTarget?: Nullable<AbstractMesh>);
         private _follow;
         /**
-         * Attached controls to the current camera.
+         * Attach the input controls to a specific dom element to get the input from.
          * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
-         * Detach the current controls from the camera.
-         * The camera will stop reacting to inputs.
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         /** @hidden */
@@ -60027,6 +60087,8 @@ declare module "babylonjs/Lights/spotLight" {
         * Sets the projection texture of the light.
         */
         set projectionTexture(value: Nullable<BaseTexture>);
+        private static _IsProceduralTexture;
+        private static _IsTexture;
         private _projectionTextureViewLightDirty;
         private _projectionTextureProjectionLightDirty;
         private _projectionTextureDirty;
@@ -75138,6 +75200,7 @@ declare module "babylonjs/PostProcesses/RenderPipeline/postProcessRenderPipeline
 }
 declare module "babylonjs/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline" {
     import { Nullable } from "babylonjs/types";
+    import { Observable } from "babylonjs/Misc/observable";
     import { IAnimatable } from "babylonjs/Animations/animatable.interface";
     import { Camera } from "babylonjs/Cameras/camera";
     import { IDisposable } from "babylonjs/scene";
@@ -75230,6 +75293,10 @@ declare module "babylonjs/PostProcesses/RenderPipeline/Pipelines/defaultRenderin
         private _grainEnabled;
         private _buildAllowed;
         /**
+         * This is triggered each time the pipeline has been built.
+         */
+        onBuildObservable: Observable<DefaultRenderingPipeline>;
+        /**
          * Gets active scene
          */
         get scene(): Scene;
@@ -79758,6 +79825,7 @@ declare module "babylonjs/Misc/index" {
     export * from "babylonjs/Misc/khronosTextureContainer2";
     export * from "babylonjs/Misc/trajectoryClassifier";
     export * from "babylonjs/Misc/timer";
+    export * from "babylonjs/Misc/copyTools";
 }
 declare module "babylonjs/XR/features/WebXRHitTestLegacy" {
     import { IWebXRFeature } from "babylonjs/XR/webXRFeaturesManager";
@@ -88939,6 +89007,21 @@ declare module BABYLON {
 }
 declare module BABYLON {
     /**
+     * Class used to host copy specific utilities
+     */
+    export class CopyTools {
+        /**
+         * Reads the pixels stored in the webgl texture and returns them as a base64 string
+         * @param texture defines the texture to read pixels from
+         * @param faceIndex defines the face of the texture to read (in case of cube texture)
+         * @param level defines the LOD level of the texture to read (in case of Mip Maps)
+         * @returns The base64 encoded string or null
+         */
+        static GenerateBase64StringFromTexture(texture: BaseTexture, faceIndex?: number, level?: number): Nullable<string>;
+    }
+}
+declare module BABYLON {
+    /**
      * Define options used to create a depth texture
      */
     export class DepthTextureCreationOptions {
@@ -100475,7 +100558,6 @@ declare module BABYLON {
         attachControl(noPreventDefault?: boolean): void;
         /**
          * Detach the current controls from the specified dom element.
-         * @param element Defines the element to stop listening the inputs from
          */
         detachControl(): void;
         /**
@@ -100648,13 +100730,12 @@ declare module BABYLON {
          */
         constructor(name: string, position: Vector3, scene: Scene, setActiveOnSceneIfNoneActive?: boolean);
         /**
-         * Attached controls to the current camera.
+         * Attach the input controls to a specific dom element to get the input from.
          * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
-         * Detach the current controls from the camera.
-         * The camera will stop reacting to inputs.
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         private _collisionMask;
@@ -101695,7 +101776,7 @@ declare module BABYLON {
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
-         * Detaches the camera from the html element and disables VR
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         /**
@@ -102174,6 +102255,13 @@ declare module BABYLON {
      * Defines a connection point for a block
      */
     export class NodeMaterialConnectionPoint {
+        /**
+         * Checks if two types are equivalent
+         * @param type1 type 1 to check
+         * @param type2 type 2 to check
+         * @returns true if both types are equivalent, else false
+         */
+        static AreEquivalentTypes(type1: number, type2: number): boolean;
         /** @hidden */
         _ownerBlock: NodeMaterialBlock;
         /** @hidden */
@@ -102185,6 +102273,8 @@ declare module BABYLON {
         _typeConnectionSource: Nullable<NodeMaterialConnectionPoint>;
         /** @hidden */
         _linkedConnectionSource: Nullable<NodeMaterialConnectionPoint>;
+        /** @hidden */
+        _acceptedConnectionPointType: Nullable<NodeMaterialConnectionPoint>;
         private _type;
         /** @hidden */
         _enforceAssociatedVariableName: boolean;
@@ -103327,7 +103417,7 @@ declare module BABYLON {
          * @returns true if the block is ready
          */
         isReady(mesh: AbstractMesh, nodeMaterial: NodeMaterial, defines: NodeMaterialDefines, useInstances?: boolean): boolean;
-        protected _linkConnectionTypes(inputIndex0: number, inputIndex1: number): void;
+        protected _linkConnectionTypes(inputIndex0: number, inputIndex1: number, looseCoupling?: boolean): void;
         private _processBuild;
         /**
         * Validates the new name for the block node.
@@ -109451,6 +109541,11 @@ declare module BABYLON {
          * Gets or sets a general boolean used to indicate that textures containing direct data (buffers) must be saved as part of the serialization process
          */
         static SerializeBuffers: boolean;
+        /**
+         * Gets or sets a general boolean used to indicate that texture buffers must be saved as part of the serialization process.
+         * If no buffer exists, one will be created as base64 string from the internal webgl data.
+         */
+        static ForceSerializeBuffers: boolean;
         /** @hidden */
         static _CubeTextureParser: (jsonTexture: any, scene: Scene, rootUrl: string) => CubeTexture;
         /** @hidden */
@@ -118949,6 +119044,8 @@ declare module BABYLON {
         private _vertexSourceCodeOverride;
         private _fragmentSourceCodeOverride;
         private _transformFeedbackVaryings;
+        private _rawVertexSourceCode;
+        private _rawFragmentSourceCode;
         /**
          * Compiled shader to webGL program.
          * @hidden
@@ -119072,6 +119169,14 @@ declare module BABYLON {
          */
         get fragmentSourceCode(): string;
         /**
+         * Gets the vertex shader source code before it has been processed by the preprocessor
+         */
+        get rawVertexSourceCode(): string;
+        /**
+         * Gets the fragment shader source code before it has been processed by the preprocessor
+         */
+        get rawFragmentSourceCode(): string;
+        /**
          * Recompiles the webGL program
          * @param vertexSourceCode The source code for the vertex shader.
          * @param fragmentSourceCode The source code for the fragment shader.
@@ -120137,7 +120242,7 @@ declare module BABYLON {
          * @param options defines further options to be sent to the getContext() function
          * @param adaptToDeviceRatio defines whether to adapt to the device's viewport characteristics (default: false)
          */
-        constructor(canvasOrContext: Nullable<HTMLCanvasElement | WebGLRenderingContext | WebGL2RenderingContext>, antialias?: boolean, options?: EngineOptions, adaptToDeviceRatio?: boolean);
+        constructor(canvasOrContext: Nullable<HTMLCanvasElement | OffscreenCanvas | WebGLRenderingContext | WebGL2RenderingContext>, antialias?: boolean, options?: EngineOptions, adaptToDeviceRatio?: boolean);
         private _rebuildInternalTextures;
         private _rebuildEffects;
         /**
@@ -127659,15 +127764,38 @@ declare module BABYLON {
         /** @hidden */
         _isSynchronizedViewMatrix(): boolean;
         /**
+         * Attach the input controls to a specific dom element to get the input from.
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         */
+        attachControl(noPreventDefault?: boolean): void;
+        /**
+         * Attach the input controls to a specific dom element to get the input from.
+         * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         */
+        attachControl(ignored: any, noPreventDefault?: boolean): void;
+        /**
+         * Attached controls to the current camera.
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
+         */
+        attachControl(noPreventDefault: boolean, useCtrlForPanning: boolean): void;
+        /**
+         * Attached controls to the current camera.
+         * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+         * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
+         */
+        attachControl(ignored: any, noPreventDefault: boolean, useCtrlForPanning: boolean): void;
+        /**
          * Attached controls to the current camera.
          * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
          * @param panningMouseButton Defines whether panning is allowed through mouse click button
          */
-        attachControl(noPreventDefault?: boolean, useCtrlForPanning?: boolean, panningMouseButton?: number): void;
+        attachControl(noPreventDefault: boolean, useCtrlForPanning: boolean, panningMouseButton: number): void;
         /**
-         * Detach the current controls from the camera.
-         * The camera will stop reacting to inputs.
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         /** @hidden */
@@ -128092,7 +128220,7 @@ declare module BABYLON {
         private _alternatePickedPoint;
         private _worldDragAxis;
         private _targetPosition;
-        private _attachedElement;
+        private _attachedToElement;
         /**
          * Attaches the drag behavior the passed in mesh
          * @param ownerNode The mesh that will be dragged around once attached
@@ -128178,7 +128306,7 @@ declare module BABYLON {
         private _pointerObserver;
         private _moving;
         private _startingOrientation;
-        private _attachedElement;
+        private _attachedToElement;
         /**
          * How much faster the object should move when the controller is moving towards it. This is useful to bring objects that are far away from the user to them faster. Set this to 0 to avoid any speed increase. (Default: 3)
          */
@@ -128485,7 +128613,6 @@ declare module BABYLON {
         attachControl(): void;
         /**
          * Detach the current controls from the specified dom element.
-         * @param element Defines the element to stop listening the inputs from
          */
         detachControl(): void;
         /**
@@ -128812,8 +128939,8 @@ declare module BABYLON {
         */
         constructor(name: string, position: Vector3, scene: Scene, setActiveOnSceneIfNoneActive?: boolean);
         /**
-         * Attach a control to the HTML DOM element.
-         * @param noPreventDefault Defines whether events caught by the controls should call preventdefault(). https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
+         * Attach the input controls to a specific dom element to get the input from.
+         * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
@@ -129177,13 +129304,12 @@ declare module BABYLON {
         constructor(name: string, position: Vector3, scene: Scene, lockedTarget?: Nullable<AbstractMesh>);
         private _follow;
         /**
-         * Attached controls to the current camera.
+         * Attach the input controls to a specific dom element to get the input from.
          * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
          */
         attachControl(noPreventDefault?: boolean): void;
         /**
-         * Detach the current controls from the camera.
-         * The camera will stop reacting to inputs.
+         * Detach the current controls from the specified dom element.
          */
         detachControl(): void;
         /** @hidden */
@@ -138670,6 +138796,8 @@ declare module BABYLON {
         * Sets the projection texture of the light.
         */
         set projectionTexture(value: Nullable<BaseTexture>);
+        private static _IsProceduralTexture;
+        private static _IsTexture;
         private _projectionTextureViewLightDirty;
         private _projectionTextureProjectionLightDirty;
         private _projectionTextureDirty;
@@ -152521,6 +152649,10 @@ declare module BABYLON {
         private _grainEnabled;
         private _buildAllowed;
         /**
+         * This is triggered each time the pipeline has been built.
+         */
+        onBuildObservable: Observable<DefaultRenderingPipeline>;
+        /**
          * Gets active scene
          */
         get scene(): Scene;

dist/preview release/what's new.md

@@ -354,6 +354,7 @@
 - Fix same sub mesh being rendered multiple times in the shadow map ([Popov72](https://github.com/Popov72))
 - Fix incorrect shadows on the master mesh when using a lod mesh ([Popov72](https://github.com/Popov72))
 - Take first gamepad connected when attaching camera (and not only XBOX gamepads) ([#9136](https://github.com/BabylonJS/Babylon.js/issues/9136)) ([RaananW](https://github.com/RaananW))
+- Fixed bug in `Mesh.IncreaseVertices` assuming null value if a property didn't exist. ([aWeirdo](https://github.com/aWeirdo))
 
 ## Breaking changes
 

nodeEditor/src/diagram/graphFrame.ts

@@ -205,14 +205,19 @@ export class GraphFrame {
         let aPort = exposedPorts.findIndex(nodePort => nodePort === nodeLink.portA);
         let bPort = exposedPorts.findIndex(nodePort => nodePort === nodeLink.portB);
         if(aPort >= 0) {
-            exposedPorts.splice(aPort,1);
-            nodeLink.portA.exposedPortPosition = -1;
-        } else if(bPort >= 0) {
-            exposedPorts.splice(bPort,1);
-            if(nodeLink.portB){ 
+            if(!nodeLink.portA.exposedOnFrame) {
+                exposedPorts.splice(aPort,1);
+                nodeLink.portA.exposedPortPosition = -1;
+                return true;
+            }
+        } else if(bPort >= 0) {         
+            if(nodeLink.portB && !nodeLink.portB.exposedOnFrame) { 
+                exposedPorts.splice(bPort,1);
                 nodeLink.portB.exposedPortPosition = -1
+                return true;
             }
         }
+        return false;
     }
     
     private createInputPorts(port: NodePort, node: GraphNode){
@@ -224,8 +229,9 @@ export class GraphFrame {
                     link.isVisible = true;
                     portAdded = true;
                     const onLinkDisposedObserver = link.onDisposedObservable.add((nodeLink: NodeLink) => {
-                        this.removePortFromExposedWithLink(nodeLink, this._exposedInPorts);
-                        this._redrawFramePorts();
+                        if(this.removePortFromExposedWithLink(nodeLink, this._exposedInPorts)) {
+                            this.redrawFramePorts();
+                        }
                     });
                     this._onNodeLinkDisposedObservers.push(onLinkDisposedObserver);
                 }
@@ -254,8 +260,9 @@ export class GraphFrame {
                         link.isVisible = true;
 
                         const onLinkDisposedObserver = link.onDisposedObservable.add((nodeLink: NodeLink) => {
-                            this.removePortFromExposedWithLink(nodeLink, this._exposedOutPorts);
-                            this._redrawFramePorts();
+                            if(this.removePortFromExposedWithLink(nodeLink, this._exposedOutPorts)) {
+                                this.redrawFramePorts();
+                            }
                         });
 
                         this._onNodeLinkDisposedObservers.push(onLinkDisposedObserver); 
@@ -291,7 +298,7 @@ export class GraphFrame {
         return false;
     }
 
-    private _redrawFramePorts() {
+    public redrawFramePorts() {
         if(!this.isCollapsed) {
             return;
         }
@@ -312,6 +319,7 @@ export class GraphFrame {
         this._controlledPorts = [];
 
         this._createFramePorts();
+        this._markFramePortPositions();
         this.ports.forEach((framePort: FrameNodePort) => framePort.node._refreshLinks());
     }
 
@@ -643,7 +651,7 @@ export class GraphFrame {
             if (this.nodes.indexOf(node) === -1) {
                 return;
             }
-            this._redrawFramePorts();
+            this.redrawFramePorts();
         });
 
         this._commentsElement = document.createElement('div');

nodeEditor/src/diagram/graphNode.ts

@@ -297,6 +297,12 @@ export class GraphNode {
             port.refresh();
         }
 
+        if(this.enclosingFrameId !== -1) {   
+            let index = this._ownerCanvas.frames.findIndex(frame => frame.id === this.enclosingFrameId);
+            if(index >= 0 && this._ownerCanvas.frames[index].isCollapsed) {
+                this._ownerCanvas.frames[index].redrawFramePorts();
+            }
+        }   
         this._comments.innerHTML = this.block.comments || "";
         this._comments.title = this.block.comments || "";
 

package.json

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

src/Audio/audioEngine.ts

@@ -103,7 +103,8 @@ export class AudioEngine implements IAudioEngine {
         this._hostElement = hostElement;
 
         try {
-            if (audioElem && !!audioElem.canPlayType && audioElem.canPlayType('audio/mpeg; codecs="mp3"').replace(/^no$/, '')) {
+            if (audioElem && !!audioElem.canPlayType && (audioElem.canPlayType('audio/mpeg; codecs="mp3"').replace(/^no$/, '') ||
+                audioElem.canPlayType('audio/mp3').replace(/^no$/, ''))) {
                 this.isMP3supported = true;
             }
         }

src/Cameras/Inputs/BaseCameraMouseWheelInput.ts

@@ -99,7 +99,13 @@ export abstract class BaseCameraMouseWheelInput implements ICameraInput<Camera>
     /**
      * Detach the current controls from the specified dom element.
      */
-    public detachControl(): void {
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     */
+    public detachControl(ignored?: any): void {
         if (this._observer) {
             this.camera.getScene().onPointerObservable.remove(this._observer);
             this._observer = null;

src/Cameras/Inputs/BaseCameraPointersInput.ts

@@ -242,7 +242,13 @@ export abstract class BaseCameraPointersInput implements ICameraInput<Camera> {
     /**
      * Detach the current controls from the specified dom element.
      */
-    public detachControl(): void {
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     */
+    public detachControl(ignored?: any): void {
         if (this._onLostFocus) {
             let hostWindow = this.camera.getScene().getEngine().getHostWindow();
             if (hostWindow) {

src/Cameras/Inputs/arcRotateCameraGamepadInput.ts

@@ -74,9 +74,14 @@ export class ArcRotateCameraGamepadInput implements ICameraInput<ArcRotateCamera
 
     /**
      * Detach the current controls from the specified dom element.
-     * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(): void {
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     */
+    public detachControl(ignored?: any): void {
         this.camera.getScene().gamepadManager.onGamepadConnectedObservable.remove(this._onGamepadConnectedObserver);
         this.camera.getScene().gamepadManager.onGamepadDisconnectedObservable.remove(this._onGamepadDisconnectedObserver);
         this.gamepad = null;

src/Cameras/Inputs/arcRotateCameraKeyboardMoveInput.ts

@@ -145,7 +145,13 @@ export class ArcRotateCameraKeyboardMoveInput implements ICameraInput<ArcRotateC
     /**
      * Detach the current controls from the specified dom element.
      */
-    public detachControl() {
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     */
+    public detachControl(ignored?: any): void {
         if (this._scene) {
             if (this._onKeyboardObserver) {
                 this._scene.onKeyboardObservable.remove(this._onKeyboardObserver);

src/Cameras/Inputs/arcRotateCameraMouseWheelInput.ts

@@ -101,7 +101,13 @@ export class ArcRotateCameraMouseWheelInput implements ICameraInput<ArcRotateCam
     /**
      * Detach the current controls from the specified dom element.
      */
-    public detachControl(): void {
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     */
+    public detachControl(ignored?: any): void {
         if (this._observer) {
             this.camera.getScene().onPointerObservable.remove(this._observer);
             this._observer = null;

src/Cameras/Inputs/arcRotateCameraVRDeviceOrientationInput.ts

@@ -119,7 +119,13 @@ export class ArcRotateCameraVRDeviceOrientationInput implements ICameraInput<Arc
     /**
      * Detach the current controls from the specified dom element.
      */
-    public detachControl(): void {
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     */
+    public detachControl(ignored?: any): void {
         window.removeEventListener("deviceorientation", this._deviceOrientationHandler);
     }
 

src/Cameras/Inputs/flyCameraKeyboardInput.ts

@@ -120,7 +120,13 @@ export class FlyCameraKeyboardInput implements ICameraInput<FlyCamera> {
     /**
      * Detach the current controls from the specified dom element.
      */
-    public detachControl(): void {
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     */
+    public detachControl(ignored?: any): void {
         if (this._scene) {
             if (this._onKeyboardObserver) {
                 this._scene.onKeyboardObservable.remove(this._onKeyboardObserver);

src/Cameras/Inputs/flyCameraMouseInput.ts

@@ -102,7 +102,13 @@ export class FlyCameraMouseInput implements ICameraInput<FlyCamera> {
     /**
      * Detach the current controls from the specified dom element.
      */
-    public detachControl(): void {
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     */
+    public detachControl(ignored?: any): void {
         if (this._observer) {
             this.camera.getScene().onPointerObservable.remove(this._observer);
 

src/Cameras/Inputs/followCameraKeyboardMoveInput.ts

@@ -205,7 +205,13 @@ export class FollowCameraKeyboardMoveInput implements ICameraInput<FollowCamera>
     /**
      * Detach the current controls from the specified dom element.
      */
-    public detachControl() {
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     */
+    public detachControl(ignored?: any): void {
         if (this._scene) {
             if (this._onKeyboardObserver) {
                 this._scene.onKeyboardObservable.remove(this._onKeyboardObserver);

src/Cameras/Inputs/followCameraMouseWheelInput.ts

@@ -119,7 +119,13 @@ export class FollowCameraMouseWheelInput implements ICameraInput<FollowCamera> {
     /**
      * Detach the current controls from the specified dom element.
      */
-    public detachControl(): void {
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     */
+    public detachControl(ignored?: any): void {
         if (this._observer) {
             this.camera.getScene().onPointerObservable.remove(this._observer);
             this._observer = null;

src/Cameras/Inputs/freeCameraDeviceOrientationInput.ts

@@ -4,7 +4,7 @@ import { FreeCamera } from "../../Cameras/freeCamera";
 import { Quaternion } from "../../Maths/math.vector";
 import { Tools } from "../../Misc/tools";
 import { FreeCameraInputsManager } from "../../Cameras/freeCameraInputsManager";
-import { Observable } from '../../Misc/observable';
+import { Observable } from "../../Misc/observable";
 
 // Module augmentation to abstract orientation inputs from camera.
 declare module "../../Cameras/freeCameraInputsManager" {
@@ -25,7 +25,7 @@ declare module "../../Cameras/freeCameraInputsManager" {
  * Add orientation input support to the input manager.
  * @returns the current input manager
  */
-FreeCameraInputsManager.prototype.addDeviceOrientation = function(): FreeCameraInputsManager {
+FreeCameraInputsManager.prototype.addDeviceOrientation = function (): FreeCameraInputsManager {
     if (!this._deviceOrientationInput) {
         this._deviceOrientationInput = new FreeCameraDeviceOrientationInput();
         this.add(this._deviceOrientationInput);
@@ -75,10 +75,11 @@ export class FreeCameraDeviceOrientationInput implements ICameraInput<FreeCamera
                 }, timeout);
             }
 
-            if (typeof(DeviceOrientationEvent) !== "undefined" && typeof (<any>DeviceOrientationEvent).requestPermission === 'function') {
-                (<any>DeviceOrientationEvent).requestPermission()
+            if (typeof DeviceOrientationEvent !== "undefined" && typeof (<any>DeviceOrientationEvent).requestPermission === "function") {
+                (<any>DeviceOrientationEvent)
+                    .requestPermission()
                     .then((response: string) => {
-                        if (response == 'granted') {
+                        if (response == "granted") {
                             window.addEventListener("deviceorientation", eventHandler);
                         } else {
                             Tools.Warn("Permission not granted.");
@@ -102,7 +103,7 @@ export class FreeCameraDeviceOrientationInput implements ICameraInput<FreeCamera
      * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
      */
     constructor() {
-        this._constantTranform = new Quaternion(- Math.sqrt(0.5), 0, 0, Math.sqrt(0.5));
+        this._constantTranform = new Quaternion(-Math.sqrt(0.5), 0, 0, Math.sqrt(0.5));
         this._orientationChanged();
     }
 
@@ -129,11 +130,9 @@ export class FreeCameraDeviceOrientationInput implements ICameraInput<FreeCamera
      * Attach the input controls to a specific dom element to get the input from.
      */
     public attachControl(): void {
-
         let hostWindow = this.camera.getScene().getEngine().getHostWindow();
 
         if (hostWindow) {
-
             const eventHandler = () => {
                 hostWindow!.addEventListener("orientationchange", this._orientationChanged);
                 hostWindow!.addEventListener("deviceorientation", this._deviceOrientation);
@@ -141,10 +140,11 @@ export class FreeCameraDeviceOrientationInput implements ICameraInput<FreeCamera
                 //So this is needed.
                 this._orientationChanged();
             };
-            if (typeof(DeviceOrientationEvent) !== "undefined" && typeof (<any>DeviceOrientationEvent).requestPermission === 'function') {
-                (<any>DeviceOrientationEvent).requestPermission()
+            if (typeof DeviceOrientationEvent !== "undefined" && typeof (<any>DeviceOrientationEvent).requestPermission === "function") {
+                (<any>DeviceOrientationEvent)
+                    .requestPermission()
                     .then((response: string) => {
-                        if (response === 'granted') {
+                        if (response === "granted") {
                             eventHandler();
                         } else {
                             Tools.Warn("Permission not granted.");
@@ -160,10 +160,10 @@ export class FreeCameraDeviceOrientationInput implements ICameraInput<FreeCamera
     }
 
     private _orientationChanged = () => {
-        this._screenOrientationAngle = (<any>window.orientation !== undefined ? +<any>window.orientation : ((<any>window.screen).orientation && ((<any>window.screen).orientation)['angle'] ? ((<any>window.screen).orientation).angle : 0));
+        this._screenOrientationAngle = <any>window.orientation !== undefined ? +(<any>window.orientation) : (<any>window.screen).orientation && (<any>window.screen).orientation["angle"] ? (<any>window.screen).orientation.angle : 0;
         this._screenOrientationAngle = -Tools.ToRadians(this._screenOrientationAngle / 2);
         this._screenQuaternion.copyFromFloats(0, Math.sin(this._screenOrientationAngle), 0, Math.cos(this._screenOrientationAngle));
-    }
+    };
 
     private _deviceOrientation = (evt: DeviceOrientationEvent) => {
         this._alpha = evt.alpha !== null ? evt.alpha : 0;
@@ -172,12 +172,18 @@ export class FreeCameraDeviceOrientationInput implements ICameraInput<FreeCamera
         if (evt.alpha !== null) {
             this._onDeviceOrientationChangedObservable.notifyObservers();
         }
-    }
+    };
 
     /**
      * Detach the current controls from the specified dom element.
      */
-    public detachControl(): void {
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     */
+    public detachControl(ignored?: any): void {
         window.removeEventListener("orientationchange", this._orientationChanged);
         window.removeEventListener("deviceorientation", this._deviceOrientation);
         this._alpha = 0;
@@ -190,7 +196,9 @@ export class FreeCameraDeviceOrientationInput implements ICameraInput<FreeCamera
     public checkInputs(): void {
         //if no device orientation provided, don't update the rotation.
         //Only testing against alpha under the assumption thatnorientation will never be so exact when set.
-        if (!this._alpha) { return; }
+        if (!this._alpha) {
+            return;
+        }
         Quaternion.RotationYawPitchRollToRef(Tools.ToRadians(this._alpha), Tools.ToRadians(this._beta), -Tools.ToRadians(this._gamma), this.camera.rotationQuaternion);
         this._camera.rotationQuaternion.multiplyInPlace(this._screenQuaternion);
         this._camera.rotationQuaternion.multiplyInPlace(this._constantTranform);

src/Cameras/Inputs/freeCameraGamepadInput.ts

@@ -87,7 +87,13 @@ export class FreeCameraGamepadInput implements ICameraInput<FreeCamera> {
     /**
      * Detach the current controls from the specified dom element.
      */
-    public detachControl(): void {
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     */
+    public detachControl(ignored?: any): void {
         this.camera.getScene().gamepadManager.onGamepadConnectedObservable.remove(this._onGamepadConnectedObserver);
         this.camera.getScene().gamepadManager.onGamepadDisconnectedObservable.remove(this._onGamepadDisconnectedObserver);
         this.gamepad = null;

src/Cameras/Inputs/freeCameraKeyboardMoveInput.ts

@@ -7,7 +7,7 @@ import { KeyboardInfo, KeyboardEventTypes } from "../../Events/keyboardEvents";
 import { Scene } from "../../scene";
 import { Vector3 } from "../../Maths/math.vector";
 import { Engine } from "../../Engines/engine";
-import { Tools } from '../../Misc/tools';
+import { Tools } from "../../Misc/tools";
 /**
  * Manage the keyboard inputs to control the movement of a free camera.
  * @see https://doc.babylonjs.com/how_to/customizing_camera_inputs
@@ -81,12 +81,7 @@ export class FreeCameraKeyboardMoveInput implements ICameraInput<FreeCamera> {
             let evt = info.event;
             if (!evt.metaKey) {
                 if (info.type === KeyboardEventTypes.KEYDOWN) {
-                    if (this.keysUp.indexOf(evt.keyCode) !== -1 ||
-                        this.keysDown.indexOf(evt.keyCode) !== -1 ||
-                        this.keysLeft.indexOf(evt.keyCode) !== -1 ||
-                        this.keysRight.indexOf(evt.keyCode) !== -1 ||
-                        this.keysUpward.indexOf(evt.keyCode) !== -1 ||
-                        this.keysDownward.indexOf(evt.keyCode) !== -1) {
+                    if (this.keysUp.indexOf(evt.keyCode) !== -1 || this.keysDown.indexOf(evt.keyCode) !== -1 || this.keysLeft.indexOf(evt.keyCode) !== -1 || this.keysRight.indexOf(evt.keyCode) !== -1 || this.keysUpward.indexOf(evt.keyCode) !== -1 || this.keysDownward.indexOf(evt.keyCode) !== -1) {
                         var index = this._keys.indexOf(evt.keyCode);
 
                         if (index === -1) {
@@ -97,12 +92,7 @@ export class FreeCameraKeyboardMoveInput implements ICameraInput<FreeCamera> {
                         }
                     }
                 } else {
-                    if (this.keysUp.indexOf(evt.keyCode) !== -1 ||
-                        this.keysDown.indexOf(evt.keyCode) !== -1 ||
-                        this.keysLeft.indexOf(evt.keyCode) !== -1 ||
-                        this.keysRight.indexOf(evt.keyCode) !== -1 ||
-                        this.keysUpward.indexOf(evt.keyCode) !== -1 ||
-                        this.keysDownward.indexOf(evt.keyCode) !== -1) {
+                    if (this.keysUp.indexOf(evt.keyCode) !== -1 || this.keysDown.indexOf(evt.keyCode) !== -1 || this.keysLeft.indexOf(evt.keyCode) !== -1 || this.keysRight.indexOf(evt.keyCode) !== -1 || this.keysUpward.indexOf(evt.keyCode) !== -1 || this.keysDownward.indexOf(evt.keyCode) !== -1) {
                         var index = this._keys.indexOf(evt.keyCode);
 
                         if (index >= 0) {
@@ -120,7 +110,13 @@ export class FreeCameraKeyboardMoveInput implements ICameraInput<FreeCamera> {
     /**
      * Detach the current controls from the specified dom element.
      */
-    public detachControl(): void {
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     */
+    public detachControl(ignored?: any): void {
         if (this._scene) {
             if (this._onKeyboardObserver) {
                 this._scene.onKeyboardObservable.remove(this._onKeyboardObserver);

src/Cameras/Inputs/freeCameraMouseInput.ts

@@ -192,7 +192,13 @@ export class FreeCameraMouseInput implements ICameraInput<FreeCamera> {
     /**
      * Detach the current controls from the specified dom element.
      */
-    public detachControl(): void {
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     */
+    public detachControl(ignored?: any): void {
         if (this._observer) {
             this.camera.getScene().onPointerObservable.remove(this._observer);
 

src/Cameras/Inputs/freeCameraTouchInput.ts

@@ -137,9 +137,14 @@ export class FreeCameraTouchInput implements ICameraInput<FreeCamera> {
 
     /**
      * Detach the current controls from the specified dom element.
-     * @param element Defines the element to stop listening the inputs from
      */
-    public detachControl(): void {
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     */
+    public detachControl(ignored?: any): void {
         if (this._pointerInput) {
             if (this._observer) {
                 this.camera.getScene().onPointerObservable.remove(this._observer);

src/Cameras/Inputs/freeCameraVirtualJoystickInput.ts

@@ -94,7 +94,13 @@ export class FreeCameraVirtualJoystickInput implements ICameraInput<FreeCamera>
     /**
      * Detach the current controls from the specified dom element.
      */
-    public detachControl(): void {
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     */
+    public detachControl(ignored?: any): void {
         this._leftjoystick.releaseCanvas();
         this._rightjoystick.releaseCanvas();
     }

src/Cameras/VR/webVRCamera.ts

@@ -516,9 +516,15 @@ export class WebVRFreeCamera extends FreeCamera implements PoseControlled {
     }
 
     /**
-     * Detaches the camera from the html element and disables VR
+     * Detach the current controls from the specified dom element.
      */
-    public detachControl(): void {
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     */
+    public detachControl(ignored?: any): void {
         this.getScene().gamepadManager.onGamepadConnectedObservable.remove(this._onGamepadConnectedObserver);
         this.getScene().gamepadManager.onGamepadDisconnectedObservable.remove(this._onGamepadDisconnectedObserver);
 

src/Cameras/arcRotateCamera.ts

@@ -762,15 +762,56 @@ export class ArcRotateCamera extends TargetCamera {
     }
 
     /**
+     * Attach the input controls to a specific dom element to get the input from.
+     * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+     */
+    public attachControl(noPreventDefault?: boolean): void;
+    /**
+     * Attach the input controls to a specific dom element to get the input from.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+     */
+    public attachControl(ignored: any, noPreventDefault?: boolean): void;
+    /**
+     * Attached controls to the current camera.
+     * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+     * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
+     */
+    public attachControl(noPreventDefault: boolean, useCtrlForPanning: boolean): void;
+    /**
+     * Attached controls to the current camera.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+     * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
+     */
+    public attachControl(ignored: any, noPreventDefault: boolean, useCtrlForPanning: boolean): void;
+    /**
+     * Attached controls to the current camera.
+     * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+     * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
+     * @param panningMouseButton Defines whether panning is allowed through mouse click button
+     */
+    public attachControl(noPreventDefault: boolean, useCtrlForPanning: boolean, panningMouseButton: number): void;
+    /**
      * Attached controls to the current camera.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      * @param useCtrlForPanning  Defines whether ctrl is used for paning within the controls
      * @param panningMouseButton Defines whether panning is allowed through mouse click button
      */
-    public attachControl(noPreventDefault?: boolean, useCtrlForPanning: boolean = true, panningMouseButton: number = 2): void {
+    public attachControl(ignored: any, noPreventDefault?: boolean, useCtrlForPanning: boolean | number = true, panningMouseButton: number = 2): void {
         noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
-        this._useCtrlForPanning = useCtrlForPanning;
+        this._useCtrlForPanning = useCtrlForPanning as boolean;
         this._panningMouseButton = panningMouseButton;
+        // backwards compatibility
+        if (typeof arguments[0] === "boolean") {
+            if (arguments.length > 1) {
+                this._useCtrlForPanning = arguments[1];
+            }
+            if (arguments.length > 2) {
+                this._panningMouseButton = arguments[2];
+            }
+        }
 
         this.inputs.attachElement(noPreventDefault);
 
@@ -784,10 +825,15 @@ export class ArcRotateCamera extends TargetCamera {
     }
 
     /**
-     * Detach the current controls from the camera.
-     * The camera will stop reacting to inputs.
+     * Detach the current controls from the specified dom element.
+     */
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
      */
-    public detachControl(): void {
+    public detachControl(ignored?: any): void {
         this.inputs.detachElement();
 
         if (this._reset) {

src/Cameras/camera.ts

@@ -525,13 +525,25 @@ export class Camera extends Node {
      * Attach the input controls to a specific dom element to get the input from.
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(noPreventDefault?: boolean): void {
+    public attachControl(noPreventDefault?: boolean): void;
+    /**
+     * Attach the input controls to a specific dom element to get the input from.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+     */
+    public attachControl(ignored: any, noPreventDefault?: boolean): void {
     }
 
     /**
      * Detach the current controls from the specified dom element.
      */
-    public detachControl(): void {
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     */
+    public detachControl(ignored?: any): void {
     }
 
     /**

src/Cameras/flyCamera.ts

@@ -273,10 +273,16 @@ export class FlyCamera extends TargetCamera {
     }
 
     /**
-     * Attach a control to the HTML DOM element.
-     * @param noPreventDefault Defines whether events caught by the controls should call preventdefault(). https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
+     * Attach the input controls to a specific dom element to get the input from.
+     * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(noPreventDefault?: boolean): void {
+    public attachControl(noPreventDefault?: boolean): void;
+    /**
+     * Attached controls to the current camera.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
+     * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+     */
+    public attachControl(ignored: any, noPreventDefault?: boolean): void {
         noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
         this.inputs.attachElement(noPreventDefault);
     }

src/Cameras/followCamera.ts

@@ -167,10 +167,16 @@ export class FollowCamera extends TargetCamera {
     }
 
     /**
+     * Attach the input controls to a specific dom element to get the input from.
+     * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+     */
+    public attachControl(noPreventDefault?: boolean): void;
+    /**
      * Attached controls to the current camera.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(noPreventDefault?: boolean): void {
+    public attachControl(ignored: any, noPreventDefault?: boolean): void {
         noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
         this.inputs.attachElement(noPreventDefault);
 
@@ -179,10 +185,15 @@ export class FollowCamera extends TargetCamera {
     }
 
     /**
-     * Detach the current controls from the camera.
-     * The camera will stop reacting to inputs.
+     * Detach the current controls from the specified dom element.
+     */
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
      */
-    public detachControl(): void {
+    public detachControl(ignored?: any): void {
         this.inputs.detachElement();
 
         if (this._reset) {

src/Cameras/freeCamera.ts

@@ -222,19 +222,30 @@ export class FreeCamera extends TargetCamera {
     }
 
     /**
+     * Attach the input controls to a specific dom element to get the input from.
+     * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+     */
+    public attachControl(noPreventDefault?: boolean): void;
+    /**
      * Attached controls to the current camera.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
      * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
      */
-    public attachControl(noPreventDefault?: boolean): void {
+    public attachControl(ignored: any, noPreventDefault?: boolean): void {
         noPreventDefault = Tools.BackCompatCameraNoPreventDefault(arguments);
         this.inputs.attachElement(noPreventDefault);
     }
 
     /**
-     * Detach the current controls from the camera.
-     * The camera will stop reacting to inputs.
+     * Detach the current controls from the specified dom element.
+     */
+    public detachControl(): void;
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param ignored defines an ignored parameter kept for backward compatibility. If you want to define the source input element, you can set engine.inputElement before calling camera.attachControl
      */
-    public detachControl(): void {
+    public detachControl(ignored?: any): void {
         this.inputs.detachElement();
 
         this.cameraDirection = new Vector3(0, 0, 0);

src/Engines/thinEngine.ts

@@ -158,14 +158,14 @@ export class ThinEngine {
      */
     // Not mixed with Version for tooling purpose.
     public static get NpmPackage(): string {
-        return "babylonjs@4.2.0-beta.12";
+        return "babylonjs@4.2.0-beta.13";
     }
 
     /**
      * Returns the current version of the framework
      */
     public static get Version(): string {
-        return "4.2.0-beta.12";
+        return "4.2.0-beta.13";
     }
 
     /**

src/Materials/Node/Blocks/lerpBlock.ts

@@ -22,7 +22,7 @@ export class LerpBlock extends NodeMaterialBlock {
 
         this._outputs[0]._typeConnectionSource = this._inputs[0];
         this._linkConnectionTypes(0, 1);
-        this._linkConnectionTypes(1, 2);
+        this._linkConnectionTypes(1, 2, true);
 
         this._inputs[2].acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Float);
     }

src/Materials/Node/Blocks/nLerpBlock.ts

@@ -17,11 +17,14 @@ export class NLerpBlock extends NodeMaterialBlock {
 
         this.registerInput("left", NodeMaterialBlockConnectionPointTypes.AutoDetect);
         this.registerInput("right", NodeMaterialBlockConnectionPointTypes.AutoDetect);
-        this.registerInput("gradient", NodeMaterialBlockConnectionPointTypes.Float);
+        this.registerInput("gradient", NodeMaterialBlockConnectionPointTypes.AutoDetect);
         this.registerOutput("output", NodeMaterialBlockConnectionPointTypes.BasedOnInput);
 
         this._outputs[0]._typeConnectionSource = this._inputs[0];
         this._linkConnectionTypes(0, 1);
+        this._linkConnectionTypes(1, 2, true);
+
+        this._inputs[2].acceptedConnectionPointTypes.push(NodeMaterialBlockConnectionPointTypes.Float);
     }
 
     /**

src/Materials/Node/nodeMaterialBlock.ts

@@ -425,8 +425,12 @@ export class NodeMaterialBlock {
         return true;
     }
 
-    protected _linkConnectionTypes(inputIndex0: number, inputIndex1: number) {
-        this._inputs[inputIndex0]._linkedConnectionSource = this._inputs[inputIndex1];
+    protected _linkConnectionTypes(inputIndex0: number, inputIndex1: number, looseCoupling = false) {
+        if (looseCoupling) {
+            this._inputs[inputIndex1]._acceptedConnectionPointType = this._inputs[inputIndex0];
+        } else {
+            this._inputs[inputIndex0]._linkedConnectionSource = this._inputs[inputIndex1];
+        }
         this._inputs[inputIndex1]._linkedConnectionSource = this._inputs[inputIndex0];
     }
 

src/Materials/Node/nodeMaterialBlockConnectionPoint.ts

@@ -32,6 +32,44 @@ export enum NodeMaterialConnectionPointDirection {
  * Defines a connection point for a block
  */
 export class NodeMaterialConnectionPoint {
+
+    /**
+     * Checks if two types are equivalent
+     * @param type1 type 1 to check
+     * @param type2 type 2 to check
+     * @returns true if both types are equivalent, else false
+     */
+    public static AreEquivalentTypes(type1: number, type2: number): boolean {
+        switch (type1) {
+            case NodeMaterialBlockConnectionPointTypes.Vector3: {
+                if (type2 === NodeMaterialBlockConnectionPointTypes.Color3) {
+                    return true;
+                }
+                break;
+            }
+            case NodeMaterialBlockConnectionPointTypes.Vector4: {
+                if (type2 === NodeMaterialBlockConnectionPointTypes.Color4) {
+                    return true;
+                }
+                break;
+            }
+            case NodeMaterialBlockConnectionPointTypes.Color3: {
+                if (type2 === NodeMaterialBlockConnectionPointTypes.Vector3) {
+                    return true;
+                }
+                break;
+            }
+            case NodeMaterialBlockConnectionPointTypes.Color4: {
+                if (type2 === NodeMaterialBlockConnectionPointTypes.Vector4) {
+                    return true;
+                }
+                break;
+            }
+        }
+
+        return false;
+    }
+
     /** @hidden */
     public _ownerBlock: NodeMaterialBlock;
     /** @hidden */
@@ -47,6 +85,9 @@ export class NodeMaterialConnectionPoint {
     /** @hidden */
     public _linkedConnectionSource: Nullable<NodeMaterialConnectionPoint> = null;
 
+    /** @hidden */
+    public _acceptedConnectionPointType: Nullable<NodeMaterialConnectionPoint> = null;
+
     private _type = NodeMaterialBlockConnectionPointTypes.Float;
 
     /** @hidden */
@@ -367,35 +408,14 @@ export class NodeMaterialConnectionPoint {
 
         if (this.type !== connectionPoint.type && connectionPoint.innerType !== NodeMaterialBlockConnectionPointTypes.AutoDetect) {
             // Equivalents
-            switch (this.type) {
-                case NodeMaterialBlockConnectionPointTypes.Vector3: {
-                    if (connectionPoint.type === NodeMaterialBlockConnectionPointTypes.Color3) {
-                        return NodeMaterialConnectionPointCompatibilityStates.Compatible;
-                    }
-                    break;
-                }
-                case NodeMaterialBlockConnectionPointTypes.Vector4: {
-                    if (connectionPoint.type === NodeMaterialBlockConnectionPointTypes.Color4) {
-                        return NodeMaterialConnectionPointCompatibilityStates.Compatible;
-                    }
-                    break;
-                }
-                case NodeMaterialBlockConnectionPointTypes.Color3: {
-                    if (connectionPoint.type === NodeMaterialBlockConnectionPointTypes.Vector3) {
-                        return NodeMaterialConnectionPointCompatibilityStates.Compatible;
-                    }
-                    break;
-                }
-                case NodeMaterialBlockConnectionPointTypes.Color4: {
-                    if (connectionPoint.type === NodeMaterialBlockConnectionPointTypes.Vector4) {
-                        return NodeMaterialConnectionPointCompatibilityStates.Compatible;
-                    }
-                    break;
-                }
+            if (NodeMaterialConnectionPoint.AreEquivalentTypes(this.type, connectionPoint.type)) {
+                return NodeMaterialConnectionPointCompatibilityStates.Compatible;
             }
 
             // Accepted types
-            if (connectionPoint.acceptedConnectionPointTypes && connectionPoint.acceptedConnectionPointTypes.indexOf(this.type) !== -1) {
+            if (connectionPoint.acceptedConnectionPointTypes && connectionPoint.acceptedConnectionPointTypes.indexOf(this.type) !== -1 ||
+                connectionPoint._acceptedConnectionPointType && NodeMaterialConnectionPoint.AreEquivalentTypes(connectionPoint._acceptedConnectionPointType.type, this.type))
+            {
                 return NodeMaterialConnectionPointCompatibilityStates.Compatible;
             } else {
                 return NodeMaterialConnectionPointCompatibilityStates.TypeIncompatible;

src/Meshes/mesh.ts

@@ -2713,7 +2713,7 @@ export class Mesh extends AbstractMesh implements IGetSetVerticesData {
         var positions = vertex_data.positions;
         var normals = vertex_data.normals;
 
-        if (currentIndices === null || positions === null || normals === null || uvs === null) {
+        if (!currentIndices || !positions || !normals || !uvs) {
             Logger.Warn("VertexData contains null entries");
         }
         else {
@@ -4418,4 +4418,4 @@ export class Mesh extends AbstractMesh implements IGetSetVerticesData {
     }
 }
 
-_TypeStore.RegisteredTypes["BABYLON.Mesh"] = Mesh;
+_TypeStore.RegisteredTypes["BABYLON.Mesh"] = Mesh;

src/Misc/tools.ts

@@ -754,7 +754,6 @@ export class Tools {
         if (typeof args[0] === "boolean") {
             return args[0];
         } else if (typeof args[1] === "boolean") {
-            Tools.Warn("Don't pass HTML element to attachControl. Set engine.inputElement instead");
             return args[1];
         }