Canvas Hooks like WebGL

src/Engines/engine.ts

@@ -757,8 +757,8 @@ export class Engine {
     private _activeRenderLoops = new Array<() => void>();
 
     // Deterministic lockstepMaxSteps
-    private _deterministicLockstep: boolean = false;
-    private _lockstepMaxSteps: number = 4;
+    protected _deterministicLockstep: boolean = false;
+    protected _lockstepMaxSteps: number = 4;
 
     // Lost context
     /**
@@ -978,37 +978,34 @@ export class Engine {
         options = options || {};
 
         if ((<HTMLCanvasElement>canvasOrContext).getContext) {
-            canvas = <HTMLCanvasElement>canvasOrContext;
-            this._renderingCanvas = canvas;
+            if (options.premultipliedAlpha === false) {
+                this.premultipliedAlpha = false;
+            }
 
             if (antialias != null) {
                 options.antialias = antialias;
             }
+    
+            if (options.preserveDrawingBuffer === undefined) {
+                options.preserveDrawingBuffer = false;
+            }
+
+            if (options.stencil === undefined) {
+                options.stencil = true;
+            }
 
             if (options.deterministicLockstep === undefined) {
                 options.deterministicLockstep = false;
             }
-
+    
             if (options.lockstepMaxSteps === undefined) {
                 options.lockstepMaxSteps = 4;
             }
-
-            if (options.preserveDrawingBuffer === undefined) {
-                options.preserveDrawingBuffer = false;
-            }
-
+    
             if (options.audioEngine === undefined) {
                 options.audioEngine = true;
             }
 
-            if (options.stencil === undefined) {
-                options.stencil = true;
-            }
-
-            if (options.premultipliedAlpha === false) {
-                this.premultipliedAlpha = false;
-            }
-
             this._deterministicLockstep = options.deterministicLockstep;
             this._lockstepMaxSteps = options.lockstepMaxSteps;
             this._doNotHandleContextLost = options.doNotHandleContextLost ? true : false;
@@ -1052,6 +1049,9 @@ export class Engine {
                 }
             }
 
+            canvas = <HTMLCanvasElement>canvasOrContext;
+            this._sharedInit(canvas, !!options.doNotHandleTouchAction, options.audioEngine);
+
             // GL
             if (!options.disableWebGL2Support) {
                 try {
@@ -1087,42 +1087,6 @@ export class Engine {
             // Ensures a consistent color space unpacking of textures cross browser.
             this._gl.pixelStorei(this._gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, this._gl.NONE);
 
-            this._onCanvasFocus = () => {
-                this.onCanvasFocusObservable.notifyObservers(this);
-            };
-
-            this._onCanvasBlur = () => {
-                this.onCanvasBlurObservable.notifyObservers(this);
-            };
-
-            canvas.addEventListener("focus", this._onCanvasFocus);
-            canvas.addEventListener("blur", this._onCanvasBlur);
-
-            this._onBlur = () => {
-                if (this.disablePerformanceMonitorInBackground) {
-                    this._performanceMonitor.disable();
-                }
-                this._windowIsBackground = true;
-            };
-
-            this._onFocus = () => {
-                if (this.disablePerformanceMonitorInBackground) {
-                    this._performanceMonitor.enable();
-                }
-                this._windowIsBackground = false;
-            };
-
-            this._onCanvasPointerOut = (ev) => {
-                this.onCanvasPointerOutObservable.notifyObservers(ev);
-            };
-
-            if (DomManagement.IsWindowObjectExist()) {
-                window.addEventListener("blur", this._onBlur);
-                window.addEventListener("focus", this._onFocus);
-            }
-
-            canvas.addEventListener("pointerout", this._onCanvasPointerOut);
-
             // Context lost
             if (!this._doNotHandleContextLost) {
                 this._onContextLost = (evt: Event) => {
@@ -1155,10 +1119,6 @@ export class Engine {
                 canvas.addEventListener("webglcontextlost", this._onContextLost, false);
                 canvas.addEventListener("webglcontextrestored", this._onContextRestored, false);
             }
-
-            if (!options.doNotHandleTouchAction) {
-                this._disableTouchAction();
-            }
         } else {
             this._gl = <WebGLRenderingContext>canvasOrContext;
             this._renderingCanvas = this._gl.canvas;
@@ -1238,11 +1198,6 @@ export class Engine {
             this._connectVREvents(canvas, anyDoc);
         }
 
-        // Create Audio Engine if needed.
-        if (!Engine.audioEngine && options.audioEngine && Engine.AudioEngineFactory) {
-            Engine.audioEngine = Engine.AudioEngineFactory(this.getRenderingCanvas());
-        }
-
         // Prepare buffer pointers
         for (var i = 0; i < this._caps.maxVertexAttribs; i++) {
             this._currentBufferPointers[i] = new BufferPointer();
@@ -1265,6 +1220,61 @@ export class Engine {
         this.enableOfflineSupport = Engine.OfflineProviderFactory !== undefined;
     }
 
+    /**
+     * Shared initialization across engines types.
+     * @param canvas The canvas associated with this instance of the engine.
+     * @param doNotHandleTouchAction Defines that engine should ignore modifying touch action attribute and style
+     * @param audioEngine Defines if an audio engine should be created by default
+     */
+    protected _sharedInit(canvas: HTMLCanvasElement, doNotHandleTouchAction: boolean, audioEngine: boolean) {
+        this._renderingCanvas = canvas;
+
+        this._onCanvasFocus = () => {
+            this.onCanvasFocusObservable.notifyObservers(this);
+        };
+
+        this._onCanvasBlur = () => {
+            this.onCanvasBlurObservable.notifyObservers(this);
+        };
+
+        canvas.addEventListener("focus", this._onCanvasFocus);
+        canvas.addEventListener("blur", this._onCanvasBlur);
+
+        this._onBlur = () => {
+            if (this.disablePerformanceMonitorInBackground) {
+                this._performanceMonitor.disable();
+            }
+            this._windowIsBackground = true;
+        };
+
+        this._onFocus = () => {
+            if (this.disablePerformanceMonitorInBackground) {
+                this._performanceMonitor.enable();
+            }
+            this._windowIsBackground = false;
+        };
+
+        this._onCanvasPointerOut = (ev) => {
+            this.onCanvasPointerOutObservable.notifyObservers(ev);
+        };
+
+        if (DomManagement.IsWindowObjectExist()) {
+            window.addEventListener("blur", this._onBlur);
+            window.addEventListener("focus", this._onFocus);
+        }
+
+        canvas.addEventListener("pointerout", this._onCanvasPointerOut);
+
+        if (!doNotHandleTouchAction) {
+            this._disableTouchAction();
+        }
+
+        // Create Audio Engine if needed.
+        if (!Engine.audioEngine && audioEngine && Engine.AudioEngineFactory) {
+            Engine.audioEngine = Engine.AudioEngineFactory(this.getRenderingCanvas());
+        }
+    }
+
     // WebVR
 
     /**

src/Engines/webgpuEngine.ts

@@ -22,35 +22,47 @@ import { BaseTexture } from "../Materials/Textures/baseTexture";
 /**
  * Options to create the WebGPU engine
  */
-export class WebGPUEngineOptions implements GPURequestAdapterOptions {
+export interface WebGPUEngineOptions extends GPURequestAdapterOptions {
 
     /**
      * If delta time between frames should be constant
      * @see https://doc.babylonjs.com/babylon101/animations#deterministic-lockstep
      */
-    public deterministicLockstep = false;
+    deterministicLockstep?: boolean;
 
     /**
      * Maximum about of steps between frames (Default: 4)
      * @see https://doc.babylonjs.com/babylon101/animations#deterministic-lockstep
      */
-    public lockstepMaxSteps = 4;
+    lockstepMaxSteps?: number;
+
+    /**
+     * Defines that engine should ignore modifying touch action attribute and style
+     * If not handle, you might need to set it up on your side for expected touch devices behavior.
+     */
+    doNotHandleTouchAction?: boolean;
+
+    /**
+     * Defines if webaudio should be initialized as well
+     * @see http://doc.babylonjs.com/how_to/playing_sounds_and_music
+     */
+    audioEngine?: boolean;
 
     /**
      * Defines the category of adapter to use.
      * Is it the discrete or integrated device.
      */
-    public powerPreference?: GPUPowerPreference;
+    powerPreference?: GPUPowerPreference;
 
     /**
      * Defines the device descriptor used to create a device.
      */
-    public deviceDescriptor: GPUDeviceDescriptor = {};
+    deviceDescriptor?: GPUDeviceDescriptor;
 
     /** 
      * Defines the requested Swap Chain Format.
      */
-    public swapChainFormat: GPUTextureFormat = WebGPUConstants.GPUTextureFormat_bgra8unorm;
+    swapChainFormat?: GPUTextureFormat;
 }
 
 /**
@@ -101,27 +113,6 @@ export class WebGPUEngine extends Engine {
         alpha: true,
         premultipliedAlpha: false,
     }, false);
-    //private _decodeScene = new Scene(this._decodeEngine);
-
-    /**
-     * @see https://doc.babylonjs.com/babylon101/animations#deterministic-lockstep
-     */
-    public isDeterministicLockStep(): boolean {
-        return this._options.deterministicLockstep;
-    }
-
-    /** @see https://doc.babylonjs.com/babylon101/animations#deterministic-lockstep */
-    public getLockstepMaxSteps(): number {
-        return this._options.lockstepMaxSteps;
-    }
-
-    /**
-     * Sets hardware scaling, used to save performance if needed
-     * @see https://doc.babylonjs.com/how_to/how_to_use_sceneoptimizer
-     */
-    public getHardwareScalingLevel(): number {
-        return 1.0;
-    }
 
     /**
      * Gets a boolean indicating that the engine supports uniform buffers
@@ -136,9 +127,12 @@ export class WebGPUEngine extends Engine {
      * @param canvas Defines the canvas to use to display the result
      * @param options Defines the options passed to the engine to create the GPU context dependencies
      */
-    public constructor(canvas: HTMLCanvasElement, options: WebGPUEngineOptions = new WebGPUEngineOptions()) {
+    public constructor(canvas: HTMLCanvasElement, options: WebGPUEngineOptions = {}) {
         super(null);
 
+        options.deviceDescriptor = options.deviceDescriptor || { };
+        options.swapChainFormat = options.swapChainFormat || WebGPUConstants.GPUTextureFormat_bgra8unorm;
+
         this._decodeEngine.getCaps().textureFloat = false;
         this._decodeEngine.getCaps().textureFloatRender = false;
         this._decodeEngine.getCaps().textureHalfFloat = false;
@@ -161,8 +155,18 @@ export class WebGPUEngine extends Engine {
             options.lockstepMaxSteps = 4;
         }
 
+        if (options.audioEngine === undefined) {
+            options.audioEngine = true;
+        }
+
+        this._deterministicLockstep = options.deterministicLockstep;
+        this._lockstepMaxSteps = options.lockstepMaxSteps;
+        this._doNotHandleContextLost = true;
+
         this._canvas = canvas;
         this._options = options;
+
+        this._sharedInit(canvas, !!options.doNotHandleTouchAction, options.audioEngine);
     }
 
     //------------------------------------------------------------------------------