Dump Tools: Use an offscreen canvas

packages/dev/core/src/LibDeclarations/offscreenCanvas.d.ts

@@ -0,0 +1,89 @@
+/**
+ * TODO: remove this file when we upgrade to TypeScript 5.0
+ */
+
+/* eslint-disable no-var */
+/* eslint-disable @typescript-eslint/naming-convention */
+interface OffscreenCanvasEventMap {
+    contextlost: Event;
+    contextrestored: Event;
+}
+
+interface OffscreenCanvas extends EventTarget {
+    /**
+     * These attributes return the dimensions of the OffscreenCanvas object's bitmap.
+     *
+     * They can be set, to replace the bitmap with a new, transparent black bitmap of the specified dimensions (effectively resizing it).
+     */
+    height: number;
+    oncontextlost: ((this: OffscreenCanvas, ev: Event) => any) | null;
+    oncontextrestored: ((this: OffscreenCanvas, ev: Event) => any) | null;
+    /**
+     * These attributes return the dimensions of the OffscreenCanvas object's bitmap.
+     *
+     * They can be set, to replace the bitmap with a new, transparent black bitmap of the specified dimensions (effectively resizing it).
+     */
+    width: number;
+    /**
+     * Returns a promise that will fulfill with a new Blob object representing a file containing the image in the OffscreenCanvas object.
+     *
+     * The argument, if provided, is a dictionary that controls the encoding options of the image file to be created. The type field specifies the file format and has a default value of "image/png"; that type is also used if the requested type isn't supported. If the image format supports variable quality (such as "image/jpeg"), then the quality field is a number in the range 0.0 to 1.0 inclusive indicating the desired quality level for the resulting image.
+     */
+    convertToBlob(options?: ImageEncodeOptions): Promise<Blob>;
+    /**
+     * Returns an object that exposes an API for drawing on the OffscreenCanvas object. contextId specifies the desired API: "2d", "bitmaprenderer", "webgl", or "webgl2". options is handled by that API.
+     *
+     * This specification defines the "2d" context below, which is similar but distinct from the "2d" context that is created from a canvas element. The WebGL specifications define the "webgl" and "webgl2" contexts. [WEBGL]
+     *
+     * Returns null if the canvas has already been initialized with another context type (e.g., trying to get a "2d" context after getting a "webgl" context).
+     */
+    getContext(contextId: "2d", options?: any): OffscreenCanvasRenderingContext2D | null;
+    getContext(contextId: "bitmaprenderer", options?: any): ImageBitmapRenderingContext | null;
+    getContext(contextId: "webgl", options?: any): WebGLRenderingContext | null;
+    getContext(contextId: "webgl2", options?: any): WebGL2RenderingContext | null;
+    getContext(contextId: OffscreenRenderingContextId, options?: any): OffscreenRenderingContext | null;
+    /** Returns a newly created ImageBitmap object with the image in the OffscreenCanvas object. The image in the OffscreenCanvas object is replaced with a new blank image. */
+    transferToImageBitmap(): ImageBitmap;
+    addEventListener<K extends keyof OffscreenCanvasEventMap>(
+        type: K,
+        listener: (this: OffscreenCanvas, ev: OffscreenCanvasEventMap[K]) => any,
+        options?: boolean | AddEventListenerOptions
+    ): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof OffscreenCanvasEventMap>(
+        type: K,
+        listener: (this: OffscreenCanvas, ev: OffscreenCanvasEventMap[K]) => any,
+        options?: boolean | EventListenerOptions
+    ): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+
+declare var OffscreenCanvas: {
+    prototype: OffscreenCanvas;
+    new (width: number, height: number): OffscreenCanvas;
+};
+
+interface OffscreenCanvasRenderingContext2D
+    extends CanvasCompositing,
+        CanvasDrawImage,
+        CanvasDrawPath,
+        CanvasFillStrokeStyles,
+        CanvasFilters,
+        CanvasImageData,
+        CanvasImageSmoothing,
+        CanvasPath,
+        CanvasPathDrawingStyles,
+        CanvasRect,
+        CanvasShadowStyles,
+        CanvasState,
+        CanvasText,
+        CanvasTextDrawingStyles,
+        CanvasTransform {
+    readonly canvas: OffscreenCanvas;
+    commit(): void;
+}
+
+declare var OffscreenCanvasRenderingContext2D: {
+    prototype: OffscreenCanvasRenderingContext2D;
+    new (): OffscreenCanvasRenderingContext2D;
+};

packages/dev/core/src/Misc/dumpTools.ts

@@ -11,7 +11,7 @@ import type { Nullable } from "../types";
 import { passPixelShader } from "../Shaders/pass.fragment";
 
 type DumpToolsEngine = {
-    canvas: HTMLCanvasElement;
+    canvas: HTMLCanvasElement | OffscreenCanvas;
     engine: ThinEngine;
     renderer: EffectRenderer;
     wrapper: EffectWrapper;
@@ -25,7 +25,7 @@ export class DumpTools {
 
     private static _CreateDumpRenderer(): DumpToolsEngine {
         if (!DumpTools._DumpToolsEngine) {
-            const canvas = document.createElement("canvas");
+            const canvas = new OffscreenCanvas(100, 100); // will be resized later
             const engine = new ThinEngine(canvas, false, {
                 preserveDrawingBuffer: true,
                 depth: false,

packages/dev/core/src/Misc/tools.ts

@@ -695,17 +695,21 @@ export class Tools {
         throw _WarnImport("DumpTools");
     }
 
+    private static _IsOffScreenCanvas(canvas: HTMLCanvasElement | OffscreenCanvas): canvas is OffscreenCanvas {
+        return (canvas as OffscreenCanvas).convertToBlob !== undefined;
+    }
+
     /**
      * Converts the canvas data to blob.
      * This acts as a polyfill for browsers not supporting the to blob function.
-     * @param canvas Defines the canvas to extract the data from
+     * @param canvas Defines the canvas to extract the data from (can be an offscreen canvas)
      * @param successCallback Defines the callback triggered once the data are available
      * @param mimeType Defines the mime type of the result
      * @param quality defines the quality of the result
      */
-    static ToBlob(canvas: HTMLCanvasElement, successCallback: (blob: Nullable<Blob>) => void, mimeType: string = "image/png", quality?: number): void {
+    static ToBlob(canvas: HTMLCanvasElement | OffscreenCanvas, successCallback: (blob: Nullable<Blob>) => void, mimeType: string = "image/png", quality?: number): void {
         // We need HTMLCanvasElement.toBlob for HD screenshots
-        if (!canvas.toBlob) {
+        if (!Tools._IsOffScreenCanvas(canvas) && !canvas.toBlob) {
             //  low performance polyfill based on toDataURL (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob)
             canvas.toBlob = function (callback, type, quality) {
                 setTimeout(() => {
@@ -720,13 +724,22 @@ export class Tools {
                 });
             };
         }
-        canvas.toBlob(
-            function (blob) {
-                successCallback(blob);
-            },
-            mimeType,
-            quality
-        );
+        if (Tools._IsOffScreenCanvas(canvas)) {
+            canvas
+                .convertToBlob({
+                    type: mimeType,
+                    quality,
+                })
+                .then((blob) => successCallback(blob));
+        } else {
+            canvas.toBlob(
+                function (blob) {
+                    successCallback(blob);
+                },
+                mimeType,
+                quality
+            );
+        }
     }
 
     /**
@@ -766,20 +779,36 @@ export class Tools {
 
     /**
      * Encodes the canvas data to base 64 or automatically download the result if filename is defined
-     * @param canvas canvas to get the data from.
+     * @param canvas canvas to get the data from (can be an offscreen canvas).
      * @param successCallback defines the callback triggered once the data are available
      * @param mimeType defines the mime type of the result
      * @param fileName defines he filename to download. If present, the result will automatically be downloaded
      * @param quality defines the quality of the result
      */
     static EncodeScreenshotCanvasData(
-        canvas: HTMLCanvasElement,
+        canvas: HTMLCanvasElement | OffscreenCanvas,
         successCallback?: (data: string) => void,
         mimeType: string = "image/png",
         fileName?: string,
         quality?: number
     ): void {
         if (successCallback) {
+            if (Tools._IsOffScreenCanvas(canvas)) {
+                canvas
+                    .convertToBlob({
+                        type: mimeType,
+                        quality,
+                    })
+                    .then((blob) => {
+                        const reader = new FileReader();
+                        reader.readAsDataURL(blob);
+                        reader.onloadend = () => {
+                            const base64data = reader.result;
+                            successCallback(base64data as string);
+                        };
+                    });
+                return;
+            }
             const base64Image = canvas.toDataURL(mimeType, quality);
             successCallback(base64Image);
         } else {