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

Playground/babylon.d.txt

@@ -11124,7 +11124,7 @@ declare module BABYLON {
     /**
      * Strong typing of a pointer move action.
      */
-    export type PointerMoveStageAction = (unTranslatedPointerX: number, unTranslatedPointerY: number, pickResult: Nullable<PickingInfo>, isMeshPicked: boolean, canvas: HTMLCanvasElement) => Nullable<PickingInfo>;
+    export type PointerMoveStageAction = (unTranslatedPointerX: number, unTranslatedPointerY: number, pickResult: Nullable<PickingInfo>, isMeshPicked: boolean, element: HTMLElement) => Nullable<PickingInfo>;
     /**
      * Strong typing of a pointer up/down action.
      */
@@ -30756,6 +30756,11 @@ declare module BABYLON {
         private _onFullscreenChange;
         private _onPointerLockChange;
         /**
+         * Gets the HTML element used to attach event listeners
+         * @returns a HTML element
+         */
+        getInputElement(): Nullable<HTMLElement>;
+        /**
          * Creates a new engine
          * @param canvasOrContext defines the canvas or WebGL context to use for rendering. If you provide a WebGL context, Babylon.js will not hook events on the canvas (like pointers, keyboards, etc...) so no event observables will be available. This is mostly used when Babylon.js is used as a plugin on a system which alreay used the WebGL context
          * @param antialias defines enable antialiasing (default: false)
@@ -30786,6 +30791,11 @@ declare module BABYLON {
          */
         getRenderingCanvasClientRect(): Nullable<ClientRect>;
         /**
+         * Gets the client rect of the HTML element used for events
+         * @returns a client rectanglee
+         */
+        getInputElementClientRect(): Nullable<ClientRect>;
+        /**
          * Gets a boolean indicating that the engine is running in deterministic lock step mode
          * @see http://doc.babylonjs.com/babylon101/animations#deterministic-lockstep
          * @returns true if engine is in deterministic lock step mode
@@ -31104,7 +31114,7 @@ declare module BABYLON {
         /** @hidden */
private _convertRGBtoRGBATextureData(rgbData: any, width: number, height: number, textureType: number): ArrayBufferView;
         protected _rebuildBuffers(): void;
         /** @hidden */
private _renderFrame(): void;
private _renderLoop(): void;
-        /** @hidden */
private _renderViews(): void;
+        /** @hidden */
private _renderViews(): boolean;
         /**
          * Toggle full screen mode
          * @param requestPointerLock defines if a pointer lock should be requested from the user
@@ -40494,7 +40504,7 @@ declare module BABYLON {
         private _webVRpresenting;
         private _hasEnteredVR;
         private _fullscreenVRpresenting;
-        private _canvas;
+        private _inputElement;
         private _webVRCamera;
         private _vrDeviceOrientationCamera;
         private _deviceOrientationCamera;
@@ -43781,6 +43791,10 @@ declare module BABYLON {
     }
         interface Engine {
             /**
+             * Gets or sets the  HTML element to use for attaching events
+             */
+            inputElement: Nullable<HTMLElement>;
+            /**
              * Gets the current engine view
              * @see https://doc.babylonjs.com/how_to/multi_canvases
              */
@@ -64189,7 +64203,7 @@ declare module BABYLON.GUI {
         private _focusedControl;
         private _blockNextFocusCheck;
         private _renderScale;
-        private _rootCanvas;
+        private _rootElement;
         private _cursorChanged;
         /**
         * Define type to string to ensure compatibility across browsers
@@ -69054,7 +69068,7 @@ declare module BABYLON.GLTF2.Loader.Extensions {
 declare module BABYLON.GLTF2.Loader.Extensions {
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1677)
-     * [Playground Sample](https://www.babylonjs-playground.com/#7F7PN6)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#7F7PN6#8)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_clearcoat implements IGLTFLoaderExtension {
@@ -69083,7 +69097,7 @@ declare module BABYLON.GLTF2.Loader.Extensions {
 declare module BABYLON.GLTF2.Loader.Extensions {
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1688)
-     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#1)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#4)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_sheen implements IGLTFLoaderExtension {
@@ -69112,6 +69126,7 @@ declare module BABYLON.GLTF2.Loader.Extensions {
 declare module BABYLON.GLTF2.Loader.Extensions {
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1677)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#4)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_specular implements IGLTFLoaderExtension {

Viewer/src/managers/sceneManager.ts

@@ -666,7 +666,7 @@ export class SceneManager {
             this._engine.renderEvenInBackground = !!sceneConfig.renderInBackground;
         }
 
-        let canvas = this._engine.getRenderingCanvas();
+        let canvas = this._engine.getInputElement();
 
         if (canvas) {
             if (this.camera && sceneConfig.disableCameraControl) {
@@ -921,11 +921,9 @@ export class SceneManager {
                 camera.minZ = radius * 0.01;
                 camera.maxZ = radius * 1000;
                 camera.speed = radius * 0.2;
-                this.scene.activeCamera = camera;
-
-                let canvas = this.scene.getEngine().getRenderingCanvas();
+               this.scene.activeCamera = camera;
             }
-            let canvas = this.scene.getEngine().getRenderingCanvas();
+            let canvas = this.scene.getEngine().getInputElement();
             if (canvas) {
                 this.scene.activeCamera.attachControl(canvas);
             }

dist/preview release/babylon.d.ts

@@ -11243,7 +11243,7 @@ declare module BABYLON {
     /**
      * Strong typing of a pointer move action.
      */
-    export type PointerMoveStageAction = (unTranslatedPointerX: number, unTranslatedPointerY: number, pickResult: Nullable<PickingInfo>, isMeshPicked: boolean, canvas: HTMLCanvasElement) => Nullable<PickingInfo>;
+    export type PointerMoveStageAction = (unTranslatedPointerX: number, unTranslatedPointerY: number, pickResult: Nullable<PickingInfo>, isMeshPicked: boolean, element: HTMLElement) => Nullable<PickingInfo>;
     /**
      * Strong typing of a pointer up/down action.
      */
@@ -31374,6 +31374,11 @@ declare module BABYLON {
         private _onFullscreenChange;
         private _onPointerLockChange;
         /**
+         * Gets the HTML element used to attach event listeners
+         * @returns a HTML element
+         */
+        getInputElement(): Nullable<HTMLElement>;
+        /**
          * Creates a new engine
          * @param canvasOrContext defines the canvas or WebGL context to use for rendering. If you provide a WebGL context, Babylon.js will not hook events on the canvas (like pointers, keyboards, etc...) so no event observables will be available. This is mostly used when Babylon.js is used as a plugin on a system which alreay used the WebGL context
          * @param antialias defines enable antialiasing (default: false)
@@ -31404,6 +31409,11 @@ declare module BABYLON {
          */
         getRenderingCanvasClientRect(): Nullable<ClientRect>;
         /**
+         * Gets the client rect of the HTML element used for events
+         * @returns a client rectanglee
+         */
+        getInputElementClientRect(): Nullable<ClientRect>;
+        /**
          * Gets a boolean indicating that the engine is running in deterministic lock step mode
          * @see http://doc.babylonjs.com/babylon101/animations#deterministic-lockstep
          * @returns true if engine is in deterministic lock step mode
@@ -31731,7 +31741,7 @@ declare module BABYLON {
         _renderFrame(): void;
         _renderLoop(): void;
         /** @hidden */
-        _renderViews(): void;
+        _renderViews(): boolean;
         /**
          * Toggle full screen mode
          * @param requestPointerLock defines if a pointer lock should be requested from the user
@@ -41234,7 +41244,7 @@ declare module BABYLON {
         private _webVRpresenting;
         private _hasEnteredVR;
         private _fullscreenVRpresenting;
-        private _canvas;
+        private _inputElement;
         private _webVRCamera;
         private _vrDeviceOrientationCamera;
         private _deviceOrientationCamera;
@@ -44553,6 +44563,10 @@ declare module BABYLON {
     }
         interface Engine {
             /**
+             * Gets or sets the  HTML element to use for attaching events
+             */
+            inputElement: Nullable<HTMLElement>;
+            /**
              * Gets the current engine view
              * @see https://doc.babylonjs.com/how_to/multi_canvases
              */

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

@@ -11440,7 +11440,7 @@ declare module "babylonjs/sceneComponent" {
     /**
      * Strong typing of a pointer move action.
      */
-    export type PointerMoveStageAction = (unTranslatedPointerX: number, unTranslatedPointerY: number, pickResult: Nullable<PickingInfo>, isMeshPicked: boolean, canvas: HTMLCanvasElement) => Nullable<PickingInfo>;
+    export type PointerMoveStageAction = (unTranslatedPointerX: number, unTranslatedPointerY: number, pickResult: Nullable<PickingInfo>, isMeshPicked: boolean, element: HTMLElement) => Nullable<PickingInfo>;
     /**
      * Strong typing of a pointer up/down action.
      */
@@ -32282,6 +32282,11 @@ declare module "babylonjs/Engines/engine" {
         private _onFullscreenChange;
         private _onPointerLockChange;
         /**
+         * Gets the HTML element used to attach event listeners
+         * @returns a HTML element
+         */
+        getInputElement(): Nullable<HTMLElement>;
+        /**
          * Creates a new engine
          * @param canvasOrContext defines the canvas or WebGL context to use for rendering. If you provide a WebGL context, Babylon.js will not hook events on the canvas (like pointers, keyboards, etc...) so no event observables will be available. This is mostly used when Babylon.js is used as a plugin on a system which alreay used the WebGL context
          * @param antialias defines enable antialiasing (default: false)
@@ -32312,6 +32317,11 @@ declare module "babylonjs/Engines/engine" {
          */
         getRenderingCanvasClientRect(): Nullable<ClientRect>;
         /**
+         * Gets the client rect of the HTML element used for events
+         * @returns a client rectanglee
+         */
+        getInputElementClientRect(): Nullable<ClientRect>;
+        /**
          * Gets a boolean indicating that the engine is running in deterministic lock step mode
          * @see http://doc.babylonjs.com/babylon101/animations#deterministic-lockstep
          * @returns true if engine is in deterministic lock step mode
@@ -32639,7 +32649,7 @@ declare module "babylonjs/Engines/engine" {
         _renderFrame(): void;
         _renderLoop(): void;
         /** @hidden */
-        _renderViews(): void;
+        _renderViews(): boolean;
         /**
          * Toggle full screen mode
          * @param requestPointerLock defines if a pointer lock should be requested from the user
@@ -42699,7 +42709,7 @@ declare module "babylonjs/Cameras/VR/vrExperienceHelper" {
         private _webVRpresenting;
         private _hasEnteredVR;
         private _fullscreenVRpresenting;
-        private _canvas;
+        private _inputElement;
         private _webVRCamera;
         private _vrDeviceOrientationCamera;
         private _deviceOrientationCamera;
@@ -46314,6 +46324,10 @@ declare module "babylonjs/Engines/Extensions/engine.views" {
     module "babylonjs/Engines/engine" {
         interface Engine {
             /**
+             * Gets or sets the  HTML element to use for attaching events
+             */
+            inputElement: Nullable<HTMLElement>;
+            /**
              * Gets the current engine view
              * @see https://doc.babylonjs.com/how_to/multi_canvases
              */
@@ -79026,7 +79040,7 @@ declare module BABYLON {
     /**
      * Strong typing of a pointer move action.
      */
-    export type PointerMoveStageAction = (unTranslatedPointerX: number, unTranslatedPointerY: number, pickResult: Nullable<PickingInfo>, isMeshPicked: boolean, canvas: HTMLCanvasElement) => Nullable<PickingInfo>;
+    export type PointerMoveStageAction = (unTranslatedPointerX: number, unTranslatedPointerY: number, pickResult: Nullable<PickingInfo>, isMeshPicked: boolean, element: HTMLElement) => Nullable<PickingInfo>;
     /**
      * Strong typing of a pointer up/down action.
      */
@@ -99157,6 +99171,11 @@ declare module BABYLON {
         private _onFullscreenChange;
         private _onPointerLockChange;
         /**
+         * Gets the HTML element used to attach event listeners
+         * @returns a HTML element
+         */
+        getInputElement(): Nullable<HTMLElement>;
+        /**
          * Creates a new engine
          * @param canvasOrContext defines the canvas or WebGL context to use for rendering. If you provide a WebGL context, Babylon.js will not hook events on the canvas (like pointers, keyboards, etc...) so no event observables will be available. This is mostly used when Babylon.js is used as a plugin on a system which alreay used the WebGL context
          * @param antialias defines enable antialiasing (default: false)
@@ -99187,6 +99206,11 @@ declare module BABYLON {
          */
         getRenderingCanvasClientRect(): Nullable<ClientRect>;
         /**
+         * Gets the client rect of the HTML element used for events
+         * @returns a client rectanglee
+         */
+        getInputElementClientRect(): Nullable<ClientRect>;
+        /**
          * Gets a boolean indicating that the engine is running in deterministic lock step mode
          * @see http://doc.babylonjs.com/babylon101/animations#deterministic-lockstep
          * @returns true if engine is in deterministic lock step mode
@@ -99514,7 +99538,7 @@ declare module BABYLON {
         _renderFrame(): void;
         _renderLoop(): void;
         /** @hidden */
-        _renderViews(): void;
+        _renderViews(): boolean;
         /**
          * Toggle full screen mode
          * @param requestPointerLock defines if a pointer lock should be requested from the user
@@ -109017,7 +109041,7 @@ declare module BABYLON {
         private _webVRpresenting;
         private _hasEnteredVR;
         private _fullscreenVRpresenting;
-        private _canvas;
+        private _inputElement;
         private _webVRCamera;
         private _vrDeviceOrientationCamera;
         private _deviceOrientationCamera;
@@ -112336,6 +112360,10 @@ declare module BABYLON {
     }
         interface Engine {
             /**
+             * Gets or sets the  HTML element to use for attaching events
+             */
+            inputElement: Nullable<HTMLElement>;
+            /**
              * Gets the current engine view
              * @see https://doc.babylonjs.com/how_to/multi_canvases
              */

dist/preview release/documentation.d.ts

@@ -11243,7 +11243,7 @@ declare module BABYLON {
     /**
      * Strong typing of a pointer move action.
      */
-    export type PointerMoveStageAction = (unTranslatedPointerX: number, unTranslatedPointerY: number, pickResult: Nullable<PickingInfo>, isMeshPicked: boolean, canvas: HTMLCanvasElement) => Nullable<PickingInfo>;
+    export type PointerMoveStageAction = (unTranslatedPointerX: number, unTranslatedPointerY: number, pickResult: Nullable<PickingInfo>, isMeshPicked: boolean, element: HTMLElement) => Nullable<PickingInfo>;
     /**
      * Strong typing of a pointer up/down action.
      */
@@ -31374,6 +31374,11 @@ declare module BABYLON {
         private _onFullscreenChange;
         private _onPointerLockChange;
         /**
+         * Gets the HTML element used to attach event listeners
+         * @returns a HTML element
+         */
+        getInputElement(): Nullable<HTMLElement>;
+        /**
          * Creates a new engine
          * @param canvasOrContext defines the canvas or WebGL context to use for rendering. If you provide a WebGL context, Babylon.js will not hook events on the canvas (like pointers, keyboards, etc...) so no event observables will be available. This is mostly used when Babylon.js is used as a plugin on a system which alreay used the WebGL context
          * @param antialias defines enable antialiasing (default: false)
@@ -31404,6 +31409,11 @@ declare module BABYLON {
          */
         getRenderingCanvasClientRect(): Nullable<ClientRect>;
         /**
+         * Gets the client rect of the HTML element used for events
+         * @returns a client rectanglee
+         */
+        getInputElementClientRect(): Nullable<ClientRect>;
+        /**
          * Gets a boolean indicating that the engine is running in deterministic lock step mode
          * @see http://doc.babylonjs.com/babylon101/animations#deterministic-lockstep
          * @returns true if engine is in deterministic lock step mode
@@ -31731,7 +31741,7 @@ declare module BABYLON {
         _renderFrame(): void;
         _renderLoop(): void;
         /** @hidden */
-        _renderViews(): void;
+        _renderViews(): boolean;
         /**
          * Toggle full screen mode
          * @param requestPointerLock defines if a pointer lock should be requested from the user
@@ -41234,7 +41244,7 @@ declare module BABYLON {
         private _webVRpresenting;
         private _hasEnteredVR;
         private _fullscreenVRpresenting;
-        private _canvas;
+        private _inputElement;
         private _webVRCamera;
         private _vrDeviceOrientationCamera;
         private _deviceOrientationCamera;
@@ -44553,6 +44563,10 @@ declare module BABYLON {
     }
         interface Engine {
             /**
+             * Gets or sets the  HTML element to use for attaching events
+             */
+            inputElement: Nullable<HTMLElement>;
+            /**
              * Gets the current engine view
              * @see https://doc.babylonjs.com/how_to/multi_canvases
              */
@@ -65133,7 +65147,7 @@ declare module BABYLON.GUI {
         private _focusedControl;
         private _blockNextFocusCheck;
         private _renderScale;
-        private _rootCanvas;
+        private _rootElement;
         private _cursorChanged;
         /**
         * Define type to string to ensure compatibility across browsers
@@ -70151,7 +70165,7 @@ declare module BABYLON.GLTF2.Loader.Extensions {
 declare module BABYLON.GLTF2.Loader.Extensions {
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1677)
-     * [Playground Sample](https://www.babylonjs-playground.com/#7F7PN6)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#7F7PN6#8)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_clearcoat implements IGLTFLoaderExtension {
@@ -70180,7 +70194,7 @@ declare module BABYLON.GLTF2.Loader.Extensions {
 declare module BABYLON.GLTF2.Loader.Extensions {
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1688)
-     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#1)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#4)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_sheen implements IGLTFLoaderExtension {
@@ -70209,6 +70223,7 @@ declare module BABYLON.GLTF2.Loader.Extensions {
 declare module BABYLON.GLTF2.Loader.Extensions {
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1677)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#4)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_specular implements IGLTFLoaderExtension {

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

@@ -361,7 +361,7 @@ declare module BABYLON.GUI {
         private _focusedControl;
         private _blockNextFocusCheck;
         private _renderScale;
-        private _rootCanvas;
+        private _rootElement;
         private _cursorChanged;
         /**
         * Define type to string to ensure compatibility across browsers

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

@@ -632,7 +632,7 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         if (!scene || !_this._texture) {
             return _this;
         }
-        _this._rootCanvas = scene.getEngine().getRenderingCanvas();
+        _this._rootElement = scene.getEngine().getInputElement();
         _this._renderObserver = scene.onBeforeCameraRenderObservable.add(function (camera) { return _this._checkUpdate(camera); });
         _this._preKeyboardObserver = scene.onPreKeyboardObservable.add(function (info) {
             if (!_this._focusedControl) {
@@ -959,7 +959,7 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         if (!scene) {
             return;
         }
-        this._rootCanvas = null;
+        this._rootElement = null;
         scene.onBeforeCameraRenderObservable.remove(this._renderObserver);
         if (this._resizeObserver) {
             scene.getEngine().onResizeObservable.remove(this._resizeObserver);
@@ -1118,8 +1118,8 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
     };
     /** @hidden */
     AdvancedDynamicTexture.prototype._changeCursor = function (cursor) {
-        if (this._rootCanvas) {
-            this._rootCanvas.style.cursor = cursor;
+        if (this._rootElement) {
+            this._rootElement.style.cursor = cursor;
             this._cursorChanged = true;
         }
     };

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

@@ -380,7 +380,7 @@ declare module "babylonjs-gui/2D/advancedDynamicTexture" {
         private _focusedControl;
         private _blockNextFocusCheck;
         private _renderScale;
-        private _rootCanvas;
+        private _rootElement;
         private _cursorChanged;
         /**
         * Define type to string to ensure compatibility across browsers
@@ -4296,7 +4296,7 @@ declare module BABYLON.GUI {
         private _focusedControl;
         private _blockNextFocusCheck;
         private _renderScale;
-        private _rootCanvas;
+        private _rootElement;
         private _cursorChanged;
         /**
         * Define type to string to ensure compatibility across browsers

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

@@ -50229,13 +50229,13 @@ var Inspector = /** @class */ (function () {
             scene = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_3__["EngineStore"].LastCreatedScene;
         }
         this._Scene = scene;
-        var canvas = scene ? scene.getEngine().getRenderingCanvas() : babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_3__["EngineStore"].LastCreatedEngine.getRenderingCanvas();
+        var rootElement = scene ? scene.getEngine().getInputElement() : babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_3__["EngineStore"].LastCreatedEngine.getInputElement();
         if (options.embedMode && options.showExplorer && options.showInspector) {
             if (options.popup) {
                 this._CreateEmbedHost(scene, options, this._CreatePopup("INSPECTOR", "_EmbedHostWindow"), Inspector.OnSelectionChangeObservable);
             }
             else {
-                var parentControl = (options.globalRoot ? options.globalRoot : canvas.parentElement);
+                var parentControl = (options.globalRoot ? options.globalRoot : rootElement.parentElement);
                 if (!options.overlay && !this._NewCanvasContainer) {
                     this._CreateCanvasContainer(parentControl);
                 }
@@ -50269,7 +50269,7 @@ var Inspector = /** @class */ (function () {
             }
         }
         else {
-            var parentControl = (options.globalRoot ? options.globalRoot : canvas.parentElement);
+            var parentControl = (options.globalRoot ? options.globalRoot : rootElement.parentElement);
             if (!options.overlay && !this._NewCanvasContainer) {
                 this._CreateCanvasContainer(parentControl);
             }

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

@@ -1211,14 +1211,14 @@ var importNode = function (gltfRuntime, node, id, parent) {
                 var orthoCamera = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["FreeCamera"](node.camera, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Zero(), gltfRuntime.scene, false);
                 orthoCamera.name = node.name || "";
                 orthoCamera.mode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Camera"].ORTHOGRAPHIC_CAMERA;
-                orthoCamera.attachControl(gltfRuntime.scene.getEngine().getRenderingCanvas());
+                orthoCamera.attachControl(gltfRuntime.scene.getEngine().getInputElement());
                 lastNode = orthoCamera;
             }
             else if (camera.type === "perspective") {
                 var perspectiveCamera = camera[camera.type];
                 var persCamera = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["FreeCamera"](node.camera, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Zero(), gltfRuntime.scene, false);
                 persCamera.name = node.name || "";
-                persCamera.attachControl(gltfRuntime.scene.getEngine().getRenderingCanvas());
+                persCamera.attachControl(gltfRuntime.scene.getEngine().getInputElement());
                 if (!perspectiveCamera.aspectRatio) {
                     perspectiveCamera.aspectRatio = gltfRuntime.scene.getEngine().getRenderWidth() / gltfRuntime.scene.getEngine().getRenderHeight();
                 }

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

@@ -530,7 +530,7 @@ __webpack_require__.r(__webpack_exports__);
 var NAME = "KHR_materials_clearcoat";
 /**
  * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1677)
- * [Playground Sample](https://www.babylonjs-playground.com/#7F7PN6)
+ * [Playground Sample](https://www.babylonjs-playground.com/frame.html#7F7PN6#8)
  * !!! Experimental Extension Subject to Changes !!!
  */
 var KHR_materials_clearcoat = /** @class */ (function () {
@@ -720,7 +720,7 @@ __webpack_require__.r(__webpack_exports__);
 var NAME = "KHR_materials_sheen";
 /**
  * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1688)
- * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#1)
+ * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#4)
  * !!! Experimental Extension Subject to Changes !!!
  */
 var KHR_materials_sheen = /** @class */ (function () {
@@ -800,6 +800,7 @@ __webpack_require__.r(__webpack_exports__);
 var NAME = "KHR_materials_specular";
 /**
  * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1677)
+ * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#4)
  * !!! Experimental Extension Subject to Changes !!!
  */
 var KHR_materials_specular = /** @class */ (function () {

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

@@ -1211,14 +1211,14 @@ var importNode = function (gltfRuntime, node, id, parent) {
                 var orthoCamera = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["FreeCamera"](node.camera, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Zero(), gltfRuntime.scene, false);
                 orthoCamera.name = node.name || "";
                 orthoCamera.mode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Camera"].ORTHOGRAPHIC_CAMERA;
-                orthoCamera.attachControl(gltfRuntime.scene.getEngine().getRenderingCanvas());
+                orthoCamera.attachControl(gltfRuntime.scene.getEngine().getInputElement());
                 lastNode = orthoCamera;
             }
             else if (camera.type === "perspective") {
                 var perspectiveCamera = camera[camera.type];
                 var persCamera = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["FreeCamera"](node.camera, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Zero(), gltfRuntime.scene, false);
                 persCamera.name = node.name || "";
-                persCamera.attachControl(gltfRuntime.scene.getEngine().getRenderingCanvas());
+                persCamera.attachControl(gltfRuntime.scene.getEngine().getInputElement());
                 if (!perspectiveCamera.aspectRatio) {
                     perspectiveCamera.aspectRatio = gltfRuntime.scene.getEngine().getRenderWidth() / gltfRuntime.scene.getEngine().getRenderHeight();
                 }
@@ -3090,7 +3090,7 @@ __webpack_require__.r(__webpack_exports__);
 var NAME = "KHR_materials_clearcoat";
 /**
  * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1677)
- * [Playground Sample](https://www.babylonjs-playground.com/#7F7PN6)
+ * [Playground Sample](https://www.babylonjs-playground.com/frame.html#7F7PN6#8)
  * !!! Experimental Extension Subject to Changes !!!
  */
 var KHR_materials_clearcoat = /** @class */ (function () {
@@ -3280,7 +3280,7 @@ __webpack_require__.r(__webpack_exports__);
 var NAME = "KHR_materials_sheen";
 /**
  * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1688)
- * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#1)
+ * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#4)
  * !!! Experimental Extension Subject to Changes !!!
  */
 var KHR_materials_sheen = /** @class */ (function () {
@@ -3360,6 +3360,7 @@ __webpack_require__.r(__webpack_exports__);
 var NAME = "KHR_materials_specular";
 /**
  * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1677)
+ * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#4)
  * !!! Experimental Extension Subject to Changes !!!
  */
 var KHR_materials_specular = /** @class */ (function () {

dist/preview release/loaders/babylonjs.loaders.d.ts

@@ -1714,7 +1714,7 @@ declare module BABYLON.GLTF2.Loader.Extensions {
 declare module BABYLON.GLTF2.Loader.Extensions {
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1677)
-     * [Playground Sample](https://www.babylonjs-playground.com/#7F7PN6)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#7F7PN6#8)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_clearcoat implements IGLTFLoaderExtension {
@@ -1743,7 +1743,7 @@ declare module BABYLON.GLTF2.Loader.Extensions {
 declare module BABYLON.GLTF2.Loader.Extensions {
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1688)
-     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#1)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#4)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_sheen implements IGLTFLoaderExtension {
@@ -1772,6 +1772,7 @@ declare module BABYLON.GLTF2.Loader.Extensions {
 declare module BABYLON.GLTF2.Loader.Extensions {
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1677)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#4)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_specular implements IGLTFLoaderExtension {

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

@@ -2544,14 +2544,14 @@ var importNode = function (gltfRuntime, node, id, parent) {
                 var orthoCamera = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["FreeCamera"](node.camera, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Zero(), gltfRuntime.scene, false);
                 orthoCamera.name = node.name || "";
                 orthoCamera.mode = babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Camera"].ORTHOGRAPHIC_CAMERA;
-                orthoCamera.attachControl(gltfRuntime.scene.getEngine().getRenderingCanvas());
+                orthoCamera.attachControl(gltfRuntime.scene.getEngine().getInputElement());
                 lastNode = orthoCamera;
             }
             else if (camera.type === "perspective") {
                 var perspectiveCamera = camera[camera.type];
                 var persCamera = new babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["FreeCamera"](node.camera, babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__["Vector3"].Zero(), gltfRuntime.scene, false);
                 persCamera.name = node.name || "";
-                persCamera.attachControl(gltfRuntime.scene.getEngine().getRenderingCanvas());
+                persCamera.attachControl(gltfRuntime.scene.getEngine().getInputElement());
                 if (!perspectiveCamera.aspectRatio) {
                     perspectiveCamera.aspectRatio = gltfRuntime.scene.getEngine().getRenderWidth() / gltfRuntime.scene.getEngine().getRenderHeight();
                 }
@@ -4423,7 +4423,7 @@ __webpack_require__.r(__webpack_exports__);
 var NAME = "KHR_materials_clearcoat";
 /**
  * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1677)
- * [Playground Sample](https://www.babylonjs-playground.com/#7F7PN6)
+ * [Playground Sample](https://www.babylonjs-playground.com/frame.html#7F7PN6#8)
  * !!! Experimental Extension Subject to Changes !!!
  */
 var KHR_materials_clearcoat = /** @class */ (function () {
@@ -4613,7 +4613,7 @@ __webpack_require__.r(__webpack_exports__);
 var NAME = "KHR_materials_sheen";
 /**
  * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1688)
- * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#1)
+ * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#4)
  * !!! Experimental Extension Subject to Changes !!!
  */
 var KHR_materials_sheen = /** @class */ (function () {
@@ -4693,6 +4693,7 @@ __webpack_require__.r(__webpack_exports__);
 var NAME = "KHR_materials_specular";
 /**
  * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1677)
+ * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#4)
  * !!! Experimental Extension Subject to Changes !!!
  */
 var KHR_materials_specular = /** @class */ (function () {

dist/preview release/loaders/babylonjs.loaders.module.d.ts

@@ -1836,7 +1836,7 @@ declare module "babylonjs-loaders/glTF/2.0/Extensions/KHR_materials_clearcoat" {
     import { GLTFLoader } from "babylonjs-loaders/glTF/2.0/glTFLoader";
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1677)
-     * [Playground Sample](https://www.babylonjs-playground.com/#7F7PN6)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#7F7PN6#8)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_clearcoat implements IGLTFLoaderExtension {
@@ -1870,7 +1870,7 @@ declare module "babylonjs-loaders/glTF/2.0/Extensions/KHR_materials_sheen" {
     import { GLTFLoader } from "babylonjs-loaders/glTF/2.0/glTFLoader";
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1688)
-     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#1)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#4)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_sheen implements IGLTFLoaderExtension {
@@ -1904,6 +1904,7 @@ declare module "babylonjs-loaders/glTF/2.0/Extensions/KHR_materials_specular" {
     import { GLTFLoader } from "babylonjs-loaders/glTF/2.0/glTFLoader";
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1677)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#4)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_specular implements IGLTFLoaderExtension {
@@ -4232,7 +4233,7 @@ declare module BABYLON.GLTF2.Loader.Extensions {
 declare module BABYLON.GLTF2.Loader.Extensions {
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1677)
-     * [Playground Sample](https://www.babylonjs-playground.com/#7F7PN6)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#7F7PN6#8)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_clearcoat implements IGLTFLoaderExtension {
@@ -4261,7 +4262,7 @@ declare module BABYLON.GLTF2.Loader.Extensions {
 declare module BABYLON.GLTF2.Loader.Extensions {
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1688)
-     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#1)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#4)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_sheen implements IGLTFLoaderExtension {
@@ -4290,6 +4291,7 @@ declare module BABYLON.GLTF2.Loader.Extensions {
 declare module BABYLON.GLTF2.Loader.Extensions {
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1677)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#4)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_specular implements IGLTFLoaderExtension {

dist/preview release/packagesSizeBaseLine.json

@@ -1 +1 @@
-{"thinEngineOnly":115524,"engineOnly":152135,"sceneOnly":495599,"minGridMaterial":625676,"minStandardMaterial":749259}
+{"thinEngineOnly":115577,"engineOnly":152420,"sceneOnly":495997,"minGridMaterial":626046,"minStandardMaterial":749641}

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

@@ -11440,7 +11440,7 @@ declare module "babylonjs/sceneComponent" {
     /**
      * Strong typing of a pointer move action.
      */
-    export type PointerMoveStageAction = (unTranslatedPointerX: number, unTranslatedPointerY: number, pickResult: Nullable<PickingInfo>, isMeshPicked: boolean, canvas: HTMLCanvasElement) => Nullable<PickingInfo>;
+    export type PointerMoveStageAction = (unTranslatedPointerX: number, unTranslatedPointerY: number, pickResult: Nullable<PickingInfo>, isMeshPicked: boolean, element: HTMLElement) => Nullable<PickingInfo>;
     /**
      * Strong typing of a pointer up/down action.
      */
@@ -32282,6 +32282,11 @@ declare module "babylonjs/Engines/engine" {
         private _onFullscreenChange;
         private _onPointerLockChange;
         /**
+         * Gets the HTML element used to attach event listeners
+         * @returns a HTML element
+         */
+        getInputElement(): Nullable<HTMLElement>;
+        /**
          * Creates a new engine
          * @param canvasOrContext defines the canvas or WebGL context to use for rendering. If you provide a WebGL context, Babylon.js will not hook events on the canvas (like pointers, keyboards, etc...) so no event observables will be available. This is mostly used when Babylon.js is used as a plugin on a system which alreay used the WebGL context
          * @param antialias defines enable antialiasing (default: false)
@@ -32312,6 +32317,11 @@ declare module "babylonjs/Engines/engine" {
          */
         getRenderingCanvasClientRect(): Nullable<ClientRect>;
         /**
+         * Gets the client rect of the HTML element used for events
+         * @returns a client rectanglee
+         */
+        getInputElementClientRect(): Nullable<ClientRect>;
+        /**
          * Gets a boolean indicating that the engine is running in deterministic lock step mode
          * @see http://doc.babylonjs.com/babylon101/animations#deterministic-lockstep
          * @returns true if engine is in deterministic lock step mode
@@ -32639,7 +32649,7 @@ declare module "babylonjs/Engines/engine" {
         _renderFrame(): void;
         _renderLoop(): void;
         /** @hidden */
-        _renderViews(): void;
+        _renderViews(): boolean;
         /**
          * Toggle full screen mode
          * @param requestPointerLock defines if a pointer lock should be requested from the user
@@ -42699,7 +42709,7 @@ declare module "babylonjs/Cameras/VR/vrExperienceHelper" {
         private _webVRpresenting;
         private _hasEnteredVR;
         private _fullscreenVRpresenting;
-        private _canvas;
+        private _inputElement;
         private _webVRCamera;
         private _vrDeviceOrientationCamera;
         private _deviceOrientationCamera;
@@ -46314,6 +46324,10 @@ declare module "babylonjs/Engines/Extensions/engine.views" {
     module "babylonjs/Engines/engine" {
         interface Engine {
             /**
+             * Gets or sets the  HTML element to use for attaching events
+             */
+            inputElement: Nullable<HTMLElement>;
+            /**
              * Gets the current engine view
              * @see https://doc.babylonjs.com/how_to/multi_canvases
              */
@@ -79026,7 +79040,7 @@ declare module BABYLON {
     /**
      * Strong typing of a pointer move action.
      */
-    export type PointerMoveStageAction = (unTranslatedPointerX: number, unTranslatedPointerY: number, pickResult: Nullable<PickingInfo>, isMeshPicked: boolean, canvas: HTMLCanvasElement) => Nullable<PickingInfo>;
+    export type PointerMoveStageAction = (unTranslatedPointerX: number, unTranslatedPointerY: number, pickResult: Nullable<PickingInfo>, isMeshPicked: boolean, element: HTMLElement) => Nullable<PickingInfo>;
     /**
      * Strong typing of a pointer up/down action.
      */
@@ -99157,6 +99171,11 @@ declare module BABYLON {
         private _onFullscreenChange;
         private _onPointerLockChange;
         /**
+         * Gets the HTML element used to attach event listeners
+         * @returns a HTML element
+         */
+        getInputElement(): Nullable<HTMLElement>;
+        /**
          * Creates a new engine
          * @param canvasOrContext defines the canvas or WebGL context to use for rendering. If you provide a WebGL context, Babylon.js will not hook events on the canvas (like pointers, keyboards, etc...) so no event observables will be available. This is mostly used when Babylon.js is used as a plugin on a system which alreay used the WebGL context
          * @param antialias defines enable antialiasing (default: false)
@@ -99187,6 +99206,11 @@ declare module BABYLON {
          */
         getRenderingCanvasClientRect(): Nullable<ClientRect>;
         /**
+         * Gets the client rect of the HTML element used for events
+         * @returns a client rectanglee
+         */
+        getInputElementClientRect(): Nullable<ClientRect>;
+        /**
          * Gets a boolean indicating that the engine is running in deterministic lock step mode
          * @see http://doc.babylonjs.com/babylon101/animations#deterministic-lockstep
          * @returns true if engine is in deterministic lock step mode
@@ -99514,7 +99538,7 @@ declare module BABYLON {
         _renderFrame(): void;
         _renderLoop(): void;
         /** @hidden */
-        _renderViews(): void;
+        _renderViews(): boolean;
         /**
          * Toggle full screen mode
          * @param requestPointerLock defines if a pointer lock should be requested from the user
@@ -109017,7 +109041,7 @@ declare module BABYLON {
         private _webVRpresenting;
         private _hasEnteredVR;
         private _fullscreenVRpresenting;
-        private _canvas;
+        private _inputElement;
         private _webVRCamera;
         private _vrDeviceOrientationCamera;
         private _deviceOrientationCamera;
@@ -112336,6 +112360,10 @@ declare module BABYLON {
     }
         interface Engine {
             /**
+             * Gets or sets the  HTML element to use for attaching events
+             */
+            inputElement: Nullable<HTMLElement>;
+            /**
              * Gets the current engine view
              * @see https://doc.babylonjs.com/how_to/multi_canvases
              */

dist/preview release/viewer/babylonjs.loaders.module.d.ts

@@ -1836,7 +1836,7 @@ declare module "babylonjs-loaders/glTF/2.0/Extensions/KHR_materials_clearcoat" {
     import { GLTFLoader } from "babylonjs-loaders/glTF/2.0/glTFLoader";
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1677)
-     * [Playground Sample](https://www.babylonjs-playground.com/#7F7PN6)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#7F7PN6#8)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_clearcoat implements IGLTFLoaderExtension {
@@ -1870,7 +1870,7 @@ declare module "babylonjs-loaders/glTF/2.0/Extensions/KHR_materials_sheen" {
     import { GLTFLoader } from "babylonjs-loaders/glTF/2.0/glTFLoader";
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1688)
-     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#1)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#4)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_sheen implements IGLTFLoaderExtension {
@@ -1904,6 +1904,7 @@ declare module "babylonjs-loaders/glTF/2.0/Extensions/KHR_materials_specular" {
     import { GLTFLoader } from "babylonjs-loaders/glTF/2.0/glTFLoader";
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1677)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#4)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_specular implements IGLTFLoaderExtension {
@@ -4232,7 +4233,7 @@ declare module BABYLON.GLTF2.Loader.Extensions {
 declare module BABYLON.GLTF2.Loader.Extensions {
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1677)
-     * [Playground Sample](https://www.babylonjs-playground.com/#7F7PN6)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#7F7PN6#8)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_clearcoat implements IGLTFLoaderExtension {
@@ -4261,7 +4262,7 @@ declare module BABYLON.GLTF2.Loader.Extensions {
 declare module BABYLON.GLTF2.Loader.Extensions {
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1688)
-     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#1)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#4)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_sheen implements IGLTFLoaderExtension {
@@ -4290,6 +4291,7 @@ declare module BABYLON.GLTF2.Loader.Extensions {
 declare module BABYLON.GLTF2.Loader.Extensions {
     /**
      * [Proposed Specification](https://github.com/KhronosGroup/glTF/pull/1677)
+     * [Playground Sample](https://www.babylonjs-playground.com/frame.html#BNIZX6#4)
      * !!! Experimental Extension Subject to Changes !!!
      */
     export class KHR_materials_specular implements IGLTFLoaderExtension {

gui/src/2D/advancedDynamicTexture.ts

@@ -80,7 +80,7 @@ export class AdvancedDynamicTexture extends DynamicTexture {
     private _focusedControl: Nullable<IFocusableControl>;
     private _blockNextFocusCheck = false;
     private _renderScale = 1;
-    private _rootCanvas: Nullable<HTMLCanvasElement>;
+    private _rootElement: Nullable<HTMLElement>;
     private _cursorChanged = false;
     /**
     * Define type to string to ensure compatibility across browsers
@@ -290,7 +290,7 @@ export class AdvancedDynamicTexture extends DynamicTexture {
         if (!scene || !this._texture) {
             return;
         }
-        this._rootCanvas = scene.getEngine()!.getRenderingCanvas()!;
+        this._rootElement = scene.getEngine()!.getInputElement()!;
         this._renderObserver = scene.onBeforeCameraRenderObservable.add((camera: Camera) => this._checkUpdate(camera));
         this._preKeyboardObserver = scene.onPreKeyboardObservable.add((info) => {
             if (!this._focusedControl) {
@@ -413,7 +413,7 @@ export class AdvancedDynamicTexture extends DynamicTexture {
         if (!scene) {
             return;
         }
-        this._rootCanvas = null;
+        this._rootElement = null;
         scene.onBeforeCameraRenderObservable.remove(this._renderObserver);
         if (this._resizeObserver) {
             scene.getEngine().onResizeObservable.remove(this._resizeObserver);
@@ -576,8 +576,8 @@ export class AdvancedDynamicTexture extends DynamicTexture {
     }
     /** @hidden */
     public _changeCursor(cursor: string) {
-        if (this._rootCanvas) {
-            this._rootCanvas.style.cursor = cursor;
+        if (this._rootElement) {
+            this._rootElement.style.cursor = cursor;
             this._cursorChanged = true;
         }
     }

inspector/src/inspector.ts

@@ -345,14 +345,14 @@ export class Inspector {
 
         this._Scene = scene;
 
-        var canvas = scene ? scene.getEngine().getRenderingCanvas() : EngineStore.LastCreatedEngine!.getRenderingCanvas();
+        var rootElement = scene ? scene.getEngine().getInputElement() : EngineStore.LastCreatedEngine!.getInputElement();
 
         if (options.embedMode && options.showExplorer && options.showInspector) {
             if (options.popup) {
                 this._CreateEmbedHost(scene, options, this._CreatePopup("INSPECTOR", "_EmbedHostWindow"), Inspector.OnSelectionChangeObservable);
             }
             else {
-                let parentControl = (options.globalRoot ? options.globalRoot : canvas!.parentElement) as HTMLElement;
+                let parentControl = (options.globalRoot ? options.globalRoot : rootElement!.parentElement) as HTMLElement;
 
                 if (!options.overlay && !this._NewCanvasContainer) {
                     this._CreateCanvasContainer(parentControl);
@@ -387,7 +387,7 @@ export class Inspector {
                 this._CreateActionTabs(scene, options, this._CreatePopup("INSPECTOR", "_ActionTabsWindow"));
             }
         } else {
-            let parentControl = (options.globalRoot ? options.globalRoot : canvas!.parentElement) as HTMLElement;
+            let parentControl = (options.globalRoot ? options.globalRoot : rootElement!.parentElement) as HTMLElement;
 
             if (!options.overlay && !this._NewCanvasContainer) {
                 this._CreateCanvasContainer(parentControl);

loaders/src/glTF/1.0/glTFLoader.ts

@@ -921,7 +921,7 @@ var importNode = (gltfRuntime: IGLTFRuntime, node: IGLTFNode, id: string, parent
 
                 orthoCamera.name = node.name || "";
                 orthoCamera.mode = Camera.ORTHOGRAPHIC_CAMERA;
-                orthoCamera.attachControl(<HTMLElement>gltfRuntime.scene.getEngine().getRenderingCanvas());
+                orthoCamera.attachControl(<HTMLElement>gltfRuntime.scene.getEngine().getInputElement());
 
                 lastNode = orthoCamera;
             }
@@ -930,7 +930,7 @@ var importNode = (gltfRuntime: IGLTFRuntime, node: IGLTFNode, id: string, parent
                 var persCamera = new FreeCamera(node.camera, Vector3.Zero(), gltfRuntime.scene, false);
 
                 persCamera.name = node.name || "";
-                persCamera.attachControl(<HTMLElement>gltfRuntime.scene.getEngine().getRenderingCanvas());
+                persCamera.attachControl(<HTMLElement>gltfRuntime.scene.getEngine().getInputElement());
 
                 if (!perspectiveCamera.aspectRatio) {
                     perspectiveCamera.aspectRatio = gltfRuntime.scene.getEngine().getRenderWidth() / gltfRuntime.scene.getEngine().getRenderHeight();

localDev/index-views.html

@@ -88,7 +88,7 @@
     </div>
 
     <script>
-        var canvas = document.getElementById("renderCanvas0");
+        var canvas = document.createElement("canvas");
         //	canvas = WebGLDebugUtils.makeLostContextSimulatingCanvas(canvas);
         var divFps = document.getElementById("fps");
 
@@ -126,6 +126,8 @@
 
                     BABYLONDEVTOOLS.Loader.debugShortcut(engine);
 
+                    engine.inputElement = document.getElementById("renderCanvas0");
+
                     // call the scene creation from the js.
                     if (typeof delayCreateScene !== "undefined") {
                         var scene = delayCreateScene();
@@ -167,11 +169,6 @@
                             }
                         }
                     }
-
-                    // Resize
-                    window.addEventListener("resize", function() {
-                        engine.resize();
-                    });
                 }
                 else {
                     alert('BabylonJS is not supported.')

src/Cameras/VR/vrExperienceHelper.ts

@@ -316,7 +316,7 @@ export class VRExperienceHelper {
     // Are we presenting in the fullscreen fallback?
     private _fullscreenVRpresenting = false;
 
-    private _canvas: Nullable<HTMLCanvasElement>;
+    private _inputElement: Nullable<HTMLElement>;
     private _webVRCamera: WebVRFreeCamera;
     private _vrDeviceOrientationCamera: Nullable<VRDeviceOrientationFreeCamera>;
     private _deviceOrientationCamera: Nullable<DeviceOrientationCamera>;
@@ -667,7 +667,7 @@ export class VRExperienceHelper {
         /** Options to modify the vr experience helper's behavior. */
         public webVROptions: VRExperienceHelperOptions = {}) {
         this._scene = scene;
-        this._canvas = scene.getEngine().getRenderingCanvas();
+        this._inputElement = scene.getEngine().getInputElement();
 
         // Parse options
         if (webVROptions.createFallbackVRDeviceOrientationFreeCamera === undefined) {
@@ -728,8 +728,8 @@ export class VRExperienceHelper {
             }
 
             this._scene.activeCamera = this._deviceOrientationCamera;
-            if (this._canvas) {
-                this._scene.activeCamera.attachControl(this._canvas);
+            if (this._inputElement) {
+                this._scene.activeCamera.attachControl(this._inputElement);
             }
         } else {
             this._existingCamera = this._scene.activeCamera;
@@ -914,11 +914,11 @@ export class VRExperienceHelper {
         } else if ((<any>document).msFullscreenElement !== undefined) {
             this._fullscreenVRpresenting = (<any>document).msFullscreenElement;
         }
-        if (!this._fullscreenVRpresenting && this._canvas) {
+        if (!this._fullscreenVRpresenting && this._inputElement) {
             this.exitVR();
             if (!this._useCustomVRButton && this._btnVR) {
-                this._btnVR.style.top = this._canvas.offsetTop + this._canvas.offsetHeight - 70 + "px";
-                this._btnVR.style.left = this._canvas.offsetLeft + this._canvas.offsetWidth - 100 + "px";
+                this._btnVR.style.top = this._inputElement.offsetTop + this._inputElement.offsetHeight - 70 + "px";
+                this._btnVR.style.left = this._inputElement.offsetLeft + this._inputElement.offsetWidth - 100 + "px";
                 // make sure the button is visible after setting its position
                 this.updateButtonVisibility();
             }
@@ -957,8 +957,8 @@ export class VRExperienceHelper {
     }
 
     private moveButtonToBottomRight() {
-        if (this._canvas && !this._useCustomVRButton && this._btnVR) {
-            const rect: ClientRect = this._canvas.getBoundingClientRect();
+        if (this._inputElement && !this._useCustomVRButton && this._btnVR) {
+            const rect: ClientRect = this._inputElement.getBoundingClientRect();
             this._btnVR.style.top = rect.top + rect.height - 70 + "px";
             this._btnVR.style.left = rect.left + rect.width - 100 + "px";
         }
@@ -1060,8 +1060,8 @@ export class VRExperienceHelper {
             });
         }
 
-        if (this._scene.activeCamera && this._canvas) {
-            this._scene.activeCamera.attachControl(this._canvas);
+        if (this._scene.activeCamera && this._inputElement) {
+            this._scene.activeCamera.attachControl(this._inputElement);
         }
 
         if (this._interactionsEnabled) {
@@ -1107,8 +1107,8 @@ export class VRExperienceHelper {
             if (this._deviceOrientationCamera) {
                 this._deviceOrientationCamera.position = this._position;
                 this._scene.activeCamera = this._deviceOrientationCamera;
-                if (this._canvas) {
-                    this._scene.activeCamera.attachControl(this._canvas);
+                if (this._inputElement) {
+                    this._scene.activeCamera.attachControl(this._inputElement);
                 }
 
                 // Restore angular sensibility

src/Cameras/XR/webXREnterExitUI.ts

@@ -115,7 +115,7 @@ export class WebXREnterExitUI implements IDisposable {
             this._updateButtons(null);
         }
 
-        var renderCanvas = scene.getEngine().getRenderingCanvas();
+        var renderCanvas = scene.getEngine().getInputElement();
         if (renderCanvas && renderCanvas.parentNode) {
             renderCanvas.parentNode.appendChild(this._overlay);
             scene.onDisposeObservable.addOnce(() => {
@@ -136,7 +136,7 @@ export class WebXREnterExitUI implements IDisposable {
      * Disposes of the object
      */
     dispose() {
-        var renderCanvas = this.scene.getEngine().getRenderingCanvas();
+        var renderCanvas = this.scene.getEngine().getInputElement();
         if (renderCanvas && renderCanvas.parentNode && renderCanvas.parentNode.contains(this._overlay)) {
             renderCanvas.parentNode.removeChild(this._overlay);
         }

src/Engines/Extensions/engine.views.ts

@@ -18,6 +18,11 @@ declare module "../../Engines/engine" {
     export interface Engine {
 
         /**
+         * Gets or sets the  HTML element to use for attaching events
+         */
+        inputElement: Nullable<HTMLElement>;
+
+        /**
          * Gets the current engine view
          * @see https://doc.babylonjs.com/how_to/multi_canvases
          */
@@ -43,6 +48,10 @@ declare module "../../Engines/engine" {
     }
 }
 
+Engine.prototype.getInputElement = function(): Nullable<HTMLElement> {
+    return this.inputElement || this.getRenderingCanvas();
+};
+
 Engine.prototype.registerView = function(canvas: HTMLCanvasElement, camera?: Camera): EngineView {
     if (!this.views) {
         this.views = [];
@@ -87,13 +96,13 @@ Engine.prototype.unRegisterView = function(canvas: HTMLCanvasElement): Engine {
 
 Engine.prototype._renderViews = function() {
     if (!this.views) {
-        return;
+        return false;
     }
 
     let parent = this.getRenderingCanvas();
 
     if (!parent) {
-        return;
+        return false;
     }
 
     for (var view of this.views) {
@@ -118,14 +127,17 @@ Engine.prototype._renderViews = function() {
             scene.activeCamera = camera;
         }
 
+        // Set sizes
+        canvas.width = canvas.clientWidth;
+        canvas.height = canvas.clientHeight;
+        parent.width = canvas.clientWidth;
+        parent.height = canvas.clientHeight;
+
         // Render the frame
         this._renderFrame();
 
         // Copy to target
-        canvas.width = canvas.clientWidth;
-        canvas.height = canvas.clientHeight;
-
-        context.drawImage(parent, 0, 0, parent.clientWidth, parent.clientHeight, 0, 0, canvas.clientWidth, canvas.clientHeight);
+        context.drawImage(parent, 0, 0);
 
         // Restore
         if (previewCamera && scene) {
@@ -134,4 +146,6 @@ Engine.prototype._renderViews = function() {
     }
 
     this.activeView = null;
+
+    return true;
 };

src/Engines/engine.ts

@@ -463,6 +463,16 @@ export class Engine extends ThinEngine {
     private _onFullscreenChange: () => void;
     private _onPointerLockChange: () => void;
 
+    // Events
+
+    /**
+     * Gets the HTML element used to attach event listeners
+     * @returns a HTML element
+     */
+    public getInputElement(): Nullable<HTMLElement> {
+        return this._renderingCanvas;
+    }
+
     /**
      * Creates a new engine
      * @param canvasOrContext defines the canvas or WebGL context to use for rendering. If you provide a WebGL context, Babylon.js will not hook events on the canvas (like pointers, keyboards, etc...) so no event observables will be available. This is mostly used when Babylon.js is used as a plugin on a system which alreay used the WebGL context
@@ -628,6 +638,17 @@ export class Engine extends ThinEngine {
     }
 
     /**
+     * Gets the client rect of the HTML element used for events
+     * @returns a client rectanglee
+     */
+    public getInputElementClientRect(): Nullable<ClientRect> {
+        if (!this._renderingCanvas) {
+            return null;
+        }
+        return this.getInputElement()!.getBoundingClientRect();
+    }
+
+    /**
      * Gets a boolean indicating that the engine is running in deterministic lock step mode
      * @see http://doc.babylonjs.com/babylon101/animations#deterministic-lockstep
      * @returns true if engine is in deterministic lock step mode
@@ -1361,17 +1382,11 @@ export class Engine extends ThinEngine {
 
     /** @hidden */
     public _renderFrame() {
-        // Start new frame
-        this.beginFrame();
-
         for (var index = 0; index < this._activeRenderLoops.length; index++) {
             var renderFunction = this._activeRenderLoops[index];
 
             renderFunction();
         }
-
-        // Present
-        this.endFrame();
     }
 
     public _renderLoop(): void {
@@ -1382,11 +1397,17 @@ export class Engine extends ThinEngine {
             }
 
             if (shouldRender) {
+                // Start new frame
+                this.beginFrame();
+
                 // Child canvases
-                this._renderViews();
+                if (!this._renderViews()) {
+                    // Main frame
+                    this._renderFrame();
+                }
 
-                // Main frame
-                this._renderFrame();
+                // Present
+                this.endFrame();
             }
         }
 
@@ -1407,7 +1428,7 @@ export class Engine extends ThinEngine {
 
     /** @hidden */
     public _renderViews() {
-        // Do nothing
+        return false;
     }
 
     /**

src/Helpers/sceneHelpers.ts

@@ -142,7 +142,7 @@ Scene.prototype.createDefaultCamera = function(createArcRotateCamera = false, re
         camera.speed = radius * 0.2;
         this.activeCamera = camera;
 
-        let canvas = this.getEngine().getRenderingCanvas();
+        let canvas = this.getEngine().getInputElement();
         if (attachCameraControls && canvas) {
             camera.attachControl(canvas);
         }

src/Inputs/scene.inputManager.ts

@@ -147,7 +147,7 @@ export class InputManager {
     }
 
     private _updatePointerPosition(evt: PointerEvent): void {
-        var canvasRect = this._scene.getEngine().getRenderingCanvasClientRect();
+        var canvasRect = this._scene.getEngine().getInputElementClientRect();
 
         if (!canvasRect) {
             return;
@@ -162,7 +162,7 @@ export class InputManager {
 
     private _processPointerMove(pickResult: Nullable<PickingInfo>, evt: PointerEvent) {
         let scene = this._scene;
-        var canvas = scene.getEngine().getRenderingCanvas();
+        var canvas = scene.getEngine().getInputElement();
 
         if (!canvas) {
             return;
@@ -447,7 +447,7 @@ export class InputManager {
     */
     public attachControl(attachUp = true, attachDown = true, attachMove = true): void {
         let scene = this._scene;
-        var canvas = scene.getEngine().getRenderingCanvas();
+        var canvas = scene.getEngine().getInputElement();
 
         if (!canvas) {
             return;
@@ -819,7 +819,7 @@ export class InputManager {
      */
     public detachControl() {
         const eventPrefix = Tools.GetPointerPrefix();
-        const canvas = this._scene.getEngine().getRenderingCanvas();
+        const canvas = this._scene.getEngine().getInputElement();
         const engine = this._scene.getEngine();
 
         if (!canvas) {

src/Sprites/spriteSceneComponent.ts

@@ -309,7 +309,7 @@ export class SpriteSceneComponent implements ISceneComponent {
         return result;
     }
 
-    private _pointerMove(unTranslatedPointerX: number, unTranslatedPointerY: number, pickResult: Nullable<PickingInfo>, isMeshPicked: boolean, canvas: HTMLCanvasElement): Nullable<PickingInfo> {
+    private _pointerMove(unTranslatedPointerX: number, unTranslatedPointerY: number, pickResult: Nullable<PickingInfo>, isMeshPicked: boolean, element: HTMLElement): Nullable<PickingInfo> {
         var scene = this.scene;
         if (isMeshPicked) {
             scene.setPointerOverSprite(null);
@@ -320,9 +320,9 @@ export class SpriteSceneComponent implements ISceneComponent {
                 scene.setPointerOverSprite(pickResult.pickedSprite);
                 if (!scene.doNotHandleCursors) {
                     if (scene._pointerOverSprite && scene._pointerOverSprite.actionManager && scene._pointerOverSprite.actionManager.hoverCursor) {
-                        canvas.style.cursor = scene._pointerOverSprite.actionManager.hoverCursor;
+                        element.style.cursor = scene._pointerOverSprite.actionManager.hoverCursor;
                     } else {
-                        canvas.style.cursor = scene.hoverCursor;
+                        element.style.cursor = scene.hoverCursor;
                     }
                 }
             } else {

src/scene.ts

@@ -2425,7 +2425,7 @@ export class Scene extends AbstractScene implements IAnimatable {
      * @param attachControl defines if attachControl must be called for the new active camera (default: true)
      */
     public switchActiveCamera(newCamera: Camera, attachControl = true): void {
-        var canvas = this._engine.getRenderingCanvas();
+        var canvas = this._engine.getInputElement();
 
         if (!canvas) {
             return;
@@ -4101,7 +4101,7 @@ export class Scene extends AbstractScene implements IAnimatable {
         this.detachControl();
 
         // Detach cameras
-        var canvas = this._engine.getRenderingCanvas();
+        var canvas = this._engine.getInputElement();
 
         if (canvas) {
             var index;

src/sceneComponent.ts

@@ -195,7 +195,7 @@ export type RenderTargetsStageAction = (renderTargets: SmartArrayNoDuplicate<Ren
 /**
  * Strong typing of a pointer move action.
  */
-export type PointerMoveStageAction = (unTranslatedPointerX: number, unTranslatedPointerY: number, pickResult: Nullable<PickingInfo>, isMeshPicked: boolean, canvas: HTMLCanvasElement) => Nullable<PickingInfo>;
+export type PointerMoveStageAction = (unTranslatedPointerX: number, unTranslatedPointerY: number, pickResult: Nullable<PickingInfo>, isMeshPicked: boolean, element: HTMLElement) => Nullable<PickingInfo>;
 
 /**
  * Strong typing of a pointer up/down action.