Support for OffscreenCanvas in Web Workers (#5167)

* Support for OffscreenCanvas in Web Workers #2481

* Update graphics-device.js

* Update platform.js

---------

Co-authored-by: Will Eastcott <willeastcott@gmail.com>

src/core/platform.js

@@ -87,6 +87,14 @@ const platform = {
      */
     browser: environment === 'browser',
 
+    /**
+     * True if running in a Web Worker.
+     *
+     * @type {boolean}
+     * @ignore
+     */
+    worker: environment === 'worker',
+
     /**
      * True if running on a desktop or laptop device.
      *

src/framework/app-base.js

@@ -2142,7 +2142,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)

src/framework/application.js

@@ -92,7 +92,30 @@ class Application extends AppBase {
     /**
      * Create a new Application instance.
      *
-     * @param {HTMLCanvasElement} canvas - The canvas element.
+     * Automatically registers these component systems with the application's component system registry:
+     *
+     * - anim ({@link AnimComponentSystem})
+     * - animation ({@link AnimationComponentSystem})
+     * - audiolistener ({@link AudioListenerComponentSystem})
+     * - button ({@link ButtonComponentSystem})
+     * - camera ({@link CameraComponentSystem})
+     * - collision ({@link CollisionComponentSystem})
+     * - element ({@link ElementComponentSystem})
+     * - layoutchild ({@link LayoutChildComponentSystem})
+     * - layoutgroup ({@link LayoutGroupComponentSystem})
+     * - light ({@link LightComponentSystem})
+     * - model ({@link ModelComponentSystem})
+     * - particlesystem ({@link ParticleSystemComponentSystem})
+     * - rigidbody ({@link RigidBodyComponentSystem})
+     * - render ({@link RenderComponentSystem})
+     * - screen ({@link ScreenComponentSystem})
+     * - script ({@link ScriptComponentSystem})
+     * - scrollbar ({@link ScrollbarComponentSystem})
+     * - scrollview ({@link ScrollViewComponentSystem})
+     * - sound ({@link SoundComponentSystem})
+     * - sprite ({@link SpriteComponentSystem})
+     *
+     * @param {HTMLCanvasElement | OffscreenCanvas} canvas - The canvas element.
      * @param {object} [options] - The options object to configure the Application.
      * @param {import('./input/element-input.js').ElementInput} [options.elementInput] - Input
      * handler for {@link ElementComponent}s.

src/platform/graphics/graphics-device.js

@@ -386,6 +386,17 @@ class GraphicsDevice extends EventHandler {
         flags: CLEARFLAG_COLOR | CLEARFLAG_DEPTH
     };
 
+    /**
+     * The current client rect.
+     *
+     * @type {{ width: number, height: number }}
+     * @ignore
+     */
+    clientRect = {
+        width: 0,
+        height: 0
+    };
+
     static EVENT_RESIZE = 'resizecanvas';
 
     constructor(canvas, options) {
@@ -786,7 +797,15 @@ class GraphicsDevice extends EventHandler {
     }
 
     updateClientRect() {
-        this.clientRect = this.canvas.getBoundingClientRect();
+        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;
+        }
     }
 
     /**