diff --git a/src/core/platform.js b/src/core/platform.js index 9e7d816ee30..ffb53900625 100644 --- a/src/core/platform.js +++ b/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. * diff --git a/src/framework/app-base.js b/src/framework/app-base.js index 58f57ad05b7..6573d95caf3 100644 --- a/src/framework/app-base.js +++ b/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) diff --git a/src/framework/application.js b/src/framework/application.js index 8495789cbb5..93e5074d3ff 100644 --- a/src/framework/application.js +++ b/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. diff --git a/src/platform/graphics/graphics-device.js b/src/platform/graphics/graphics-device.js index c8fb6ddf09d..bb882138418 100644 --- a/src/platform/graphics/graphics-device.js +++ b/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; + } } /**