@playcanvas/web-components 0.11.0 → 0.11.1

package/src/sky.ts

@@ -1,6 +1,7 @@
-import { Asset, EnvLighting, LAYERID_SKYBOX, Quat, Scene, Texture, Vec3 } from 'playcanvas';
+import type { Asset, EventHandle, Scene, Texture } from 'playcanvas';
+import { EnvLighting, LAYERID_SKYBOX, Quat, Vec3 } from 'playcanvas';
 
-import { AppElement } from './app';
+import type { AppElement } from './app';
 import { AssetElement } from './asset';
 import { AsyncElement } from './async-element';
 import { parseBool, parseEnum, parseNumber, parseVec3 } from './parse';
@@ -31,14 +32,36 @@ class SkyElement extends AsyncElement {
 
     private _appElement: AppElement | null = null;
 
+    /**
+     * Incremented on every new load and on disconnect, and captured by a load when it starts. A
+     * load that resumes from an await or a load callback abandons itself if the value has moved
+     * on, so a superseded load cannot generate a skybox for a scene it no longer configures.
+     */
+    private _loadGeneration = 0;
+
+    /**
+     * The pending asset-load subscription of the current load, if it is waiting for its asset.
+     * Held so that whatever supersedes the load can detach the handler from the asset, rather
+     * than leave it registered until the asset loads (or forever, if it never does).
+     */
+    private _loadHandle: EventHandle | null = null;
+
     connectedCallback() {
         this._loadSkybox();
         this._onReady();
     }
 
     disconnectedCallback() {
+        this._loadGeneration++;
+        this._detachLoadHandler();
         this._unloadSkybox();
         this._appElement = null;
+        this._resetReady();
+    }
+
+    private _detachLoadHandler() {
+        this._loadHandle?.off();
+        this._loadHandle = null;
     }
 
     private _generateSkybox(asset: Asset) {
@@ -48,11 +71,18 @@ class SkyElement extends AsyncElement {
 
         const skybox = EnvLighting.generateSkyboxCubemap(source);
         skybox.anisotropy = 4;
+        // This element owns what it generated (see _unloadSkybox) - replacing a skybox from an
+        // earlier load must release it, not orphan it on the GPU
+        this._scene.skybox?.destroy();
         this._scene.skybox = skybox;
 
         if (this._lighting) {
             const lighting = EnvLighting.generateLightingSource(source);
             const envAtlas = EnvLighting.generateAtlas(lighting);
+            // The lighting source is an intermediate: the atlas is rendered from it and it is
+            // not needed afterwards
+            lighting.destroy();
+            this._scene.envAtlas?.destroy();
             this._scene.envAtlas = envAtlas;
         }
 
@@ -69,7 +99,17 @@ class SkyElement extends AsyncElement {
     }
 
     private async _loadSkybox() {
+        // Supersede any load already in flight - only the newest load may generate the skybox
+        const generation = ++this._loadGeneration;
+        this._detachLoadHandler();
+
         const appElement = await this.closestApp?.ready();
+
+        // The element may have been removed, or another load started, while we waited
+        if (generation !== this._loadGeneration) {
+            return;
+        }
+
         const app = appElement?.app;
         if (!appElement || !app) {
             return;
@@ -87,7 +127,14 @@ class SkyElement extends AsyncElement {
         if (asset.loaded) {
             this._generateSkybox(asset);
         } else {
-            asset.once('load', () => {
+            // The generation is re-checked even though a superseded handler is detached: the
+            // detach relies on how the engine's event emitter treats removal, while the check
+            // holds on its own.
+            this._loadHandle = asset.once('load', () => {
+                this._loadHandle = null;
+                if (generation !== this._loadGeneration) {
+                    return;
+                }
                 this._generateSkybox(asset);
             });
             app.assets.load(asset);
@@ -303,10 +350,4 @@ class SkyElement extends AsyncElement {
 
 customElements.define('pc-sky', SkyElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-sky': SkyElement;
-    }
-}
-
 export { SkyElement };