From 02610d3a0639d708fca536e644b37b874d05ff4c Mon Sep 17 00:00:00 2001 From: Michael Franzl Date: Sun, 19 Mar 2023 19:04:49 +0100 Subject: [PATCH 1/3] Support for OffscreenCanvas in Web Workers #2481 --- src/core/platform.js | 7 +++++++ src/framework/app-base.js | 2 +- src/framework/application.js | 2 +- src/platform/graphics/graphics-device.js | 21 ++++++++++++++++++++- 4 files changed, 29 insertions(+), 3 deletions(-) diff --git a/src/core/platform.js b/src/core/platform.js index 9e7d816ee30..4b62073736d 100644 --- a/src/core/platform.js +++ b/src/core/platform.js @@ -87,6 +87,13 @@ const platform = { */ browser: environment === 'browser', + /** + * True if running in a Web Worker. + * + * @type {boolean} + */ + worker: environment === 'worker', + /** * True if running on a desktop or laptop device. * diff --git a/src/framework/app-base.js b/src/framework/app-base.js index 2b6e71817b6..235913dc163 100644 --- a/src/framework/app-base.js +++ b/src/framework/app-base.js @@ -2023,7 +2023,7 @@ const makeTick = function (_app) { if (application.xr?.session) { application.frameRequestId = application.xr.session.requestAnimationFrame(application.tick); } else { - application.frameRequestId = platform.browser ? window.requestAnimationFrame(application.tick) : null; + application.frameRequestId = platform.browser || platform.worker ? requestAnimationFrame(application.tick) : null; } if (application.graphicsDevice.contextLost) diff --git a/src/framework/application.js b/src/framework/application.js index 7f9e1201314..66684f86ecd 100644 --- a/src/framework/application.js +++ b/src/framework/application.js @@ -115,7 +115,7 @@ class Application extends AppBase { * - sound ({@link SoundComponentSystem}) * - sprite ({@link SpriteComponentSystem}) * - * @param {HTMLCanvasElement} canvas - The canvas element. + * @param {HTMLCanvasElement | OffscreenCanvas} canvas - The canvas element. * @param {object} [options] - The options object to configure the Application. * @param {ElementInput} [options.elementInput] - Input handler for {@link ElementComponent}s. * @param {Keyboard} [options.keyboard] - Keyboard handler for input. diff --git a/src/platform/graphics/graphics-device.js b/src/platform/graphics/graphics-device.js index b5104a5d61b..11a0514e957 100644 --- a/src/platform/graphics/graphics-device.js +++ b/src/platform/graphics/graphics-device.js @@ -356,6 +356,16 @@ class GraphicsDevice extends EventHandler { flags: CLEARFLAG_COLOR | CLEARFLAG_DEPTH }; + /** + * The current client rect. + * + * @type {{ width: number, height: number }} + */ + clientRect = { + width: 0, + height: 0 + }; + static EVENT_RESIZE = 'resizecanvas'; constructor(canvas, options) { @@ -752,7 +762,16 @@ class GraphicsDevice extends EventHandler { } updateClientRect() { - this.clientRect = this.canvas.getBoundingClientRect(); + if (platform.browser) { + const rect = this.canvas.getBoundingClientRect(); + this.clientRect.width = rect.width; + this.clientRect.height = rect.height; + + } else if (platform.worker) { + // Web Workers don't do page layout, so getBoundingClientRect is not available + this.clientRect.width = this.canvas.width; + this.clientRect.height = this.canvas.height; + } } /** From 8ce57243bd168a7b637a32adb666f1f51c3ec5c0 Mon Sep 17 00:00:00 2001 From: Will Eastcott Date: Mon, 15 Jul 2024 20:09:32 +0100 Subject: [PATCH 2/3] Update graphics-device.js --- src/platform/graphics/graphics-device.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/platform/graphics/graphics-device.js b/src/platform/graphics/graphics-device.js index 11a0514e957..b01a0160d0d 100644 --- a/src/platform/graphics/graphics-device.js +++ b/src/platform/graphics/graphics-device.js @@ -360,6 +360,7 @@ class GraphicsDevice extends EventHandler { * The current client rect. * * @type {{ width: number, height: number }} + * @ignore */ clientRect = { width: 0, @@ -762,15 +763,14 @@ class GraphicsDevice extends EventHandler { } updateClientRect() { - if (platform.browser) { - const rect = this.canvas.getBoundingClientRect(); - this.clientRect.width = rect.width; - this.clientRect.height = rect.height; - - } else if (platform.worker) { + if (platform.worker) { // Web Workers don't do page layout, so getBoundingClientRect is not available this.clientRect.width = this.canvas.width; this.clientRect.height = this.canvas.height; + } else { + const rect = this.canvas.getBoundingClientRect(); + this.clientRect.width = rect.width; + this.clientRect.height = rect.height; } } From 6e9a87f02019de04bd2e385872a567de1c8ee0a3 Mon Sep 17 00:00:00 2001 From: Will Eastcott Date: Mon, 15 Jul 2024 20:17:56 +0100 Subject: [PATCH 3/3] Update platform.js --- src/core/platform.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/core/platform.js b/src/core/platform.js index 4b62073736d..ffb53900625 100644 --- a/src/core/platform.js +++ b/src/core/platform.js @@ -91,6 +91,7 @@ const platform = { * True if running in a Web Worker. * * @type {boolean} + * @ignore */ worker: environment === 'worker',