Support for OffscreenCanvas in Web Workers playcanvas#2481

package.json

@@ -43,6 +43,7 @@
       "TWEEN": "readonly",
       "twgsl": "readonly",
       "webkitAudioContext": "readonly",
+      "WorkerGlobalScope": "readonly",
       "XRRay": "readonly",
       "XRWebGLLayer": "readonly"
     },

src/core/platform.js

@@ -53,7 +53,7 @@ if (typeof navigator !== 'undefined') {
 }
 
 // detect browser/node environment
-const environment = (typeof window !== 'undefined') ? 'browser' : 'node';
+const environment = (typeof window !== 'undefined') ? 'browser' : (typeof WorkerGlobalScope !== 'undefined') ? 'webworker' : 'node';
 
 /**
  * Global namespace that stores flags regarding platform environment and features support.
@@ -78,7 +78,7 @@ const platform = {
      *
      * @type {object}
      */
-    global: (environment === 'browser') ? window : global,
+    global: (environment === 'browser') ? window : (environment === 'webworker' ? WorkerGlobalScope : global),
 
     /**
      * Convenience boolean indicating whether we're running in the browser.
@@ -87,6 +87,13 @@ const platform = {
      */
     browser: environment === 'browser',
 
+    /**
+     * Convenience boolean indicating whether we're running in a web worker
+     *
+     * @type {boolean}
+     */
+    webworker: environment === 'webworker',
+
     /**
      * Is it a desktop or laptop device.
      *

src/framework/app-base.js

@@ -2152,7 +2152,10 @@ const makeTick = function (_app) {
         setApplication(application);
 
         if (frameRequest) {
-            window.cancelAnimationFrame(frameRequest);
+            if (platform.browser)
+                window.cancelAnimationFrame(frameRequest);
+            else if (platform.webworker)
+                cancelAnimationFrame(frameRequest);
             frameRequest = null;
         }
 
@@ -2171,7 +2174,12 @@ const makeTick = function (_app) {
         if (application.xr?.session) {
             frameRequest = application.xr.session.requestAnimationFrame(application.tick);
         } else {
-            frameRequest = platform.browser ? window.requestAnimationFrame(application.tick) : null;
+            if (platform.browser)
+                frameRequest = platform.global.requestAnimationFrame(application.tick);
+            else if (platform.webworker)
+                frameRequest = requestAnimationFrame(application.tick);
+            else
+                frameRequest = null;
         }
 
         if (application.graphicsDevice.contextLost)

src/framework/application.js

@@ -92,7 +92,7 @@ class Application extends AppBase {
     /**
      * Create a new Application instance.
      *
-     * @param {HTMLCanvasElement} canvas - The canvas element.
+     * @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

@@ -444,7 +444,7 @@ class GraphicsDevice extends EventHandler {
     }
 
     updateClientRect() {
-        this.clientRect = this.canvas.getBoundingClientRect();
+        this.clientRect = new DOMRect(0, 0, this.canvas.width, this.canvas.height)
     }
 
     /**

src/platform/graphics/webgl/webgl-graphics-device.js

@@ -815,14 +815,14 @@ class WebglGraphicsDevice extends GraphicsDevice {
 
     // #if _DEBUG
     pushMarker(name) {
-        if (window.spector) {
+        if (platform.browser && window.spector) {
             const label = DebugGraphics.toString();
             window.spector.setMarker(`${label} #`);
         }
     }
 
     popMarker() {
-        if (window.spector) {
+        if (platform.browser && window.spector) {
             const label = DebugGraphics.toString();
             if (label.length)
                 window.spector.setMarker(`${label} #`);