@playcanvas/web-components 0.1.2 → 0.1.4

package/dist/pwc.mjs

@@ -1,4 +1,4 @@
-import { WasmModule, Application, Keyboard, Mouse, FILLMODE_FILL_WINDOW, RESOLUTION_AUTO, Color, Vec2, Vec3, Vec4, Entity, Asset, PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, Quat, LAYERID_SKYBOX } from 'playcanvas';
+import { WasmModule, Application, Keyboard, Mouse, FILLMODE_FILL_WINDOW, RESOLUTION_AUTO, Color, Quat, Vec2, Vec3, Vec4, Entity, Asset, PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, StandardMaterial, SCALEMODE_BLEND, SCALEMODE_NONE, LAYERID_SKYBOX } from 'playcanvas';
 
 class ModuleElement extends HTMLElement {
     constructor() {
@@ -76,6 +76,11 @@ class AppElement extends HTMLElement {
                 this.app.assets.add(asset);
             }
         });
+        // Get all pc-material elements that are direct children of the pc-app element
+        const materialElements = this.querySelectorAll(':scope > pc-material');
+        Array.from(materialElements).forEach((materialElement) => {
+            materialElement.createMaterial();
+        });
         // Load assets before starting the application
         this.app.preload(() => {
             // Start the application
@@ -144,6 +149,18 @@ const parseColor = (value) => {
     const components = value.split(',').map(Number);
     return new Color(components);
 };
+/**
+ * Parse an Euler angles string into a Quat object. String can be in the format of 'x,y,z'.
+ *
+ * @param value - The Euler angles string to parse.
+ * @returns The parsed Quat object.
+ */
+const parseQuat = (value) => {
+    const [x, y, z] = value.split(',').map(Number);
+    const q = new Quat();
+    q.setFromEulerAngles(x, y, z);
+    return q;
+};
 /**
  * Parse a Vec2 string into a Vec2 object. String can be in the format of 'x,y'.
  *
@@ -205,6 +222,9 @@ class EntityElement extends HTMLElement {
          * The tags of the entity.
          */
         this._tags = [];
+        this._entityReady = new Promise((resolve) => {
+            this._resolveEntity = resolve;
+        });
         /**
          * The PlayCanvas entity instance.
          */
@@ -220,8 +240,11 @@ class EntityElement extends HTMLElement {
         const app = await appElement.getApplication();
         // Create a new entity
         this.entity = new Entity(this._name, app);
-        if (this.parentElement && this.parentElement.tagName === 'pc-entity' && this.parentElement.entity) {
-            this.parentElement.entity.addChild(this.entity);
+        this._resolveEntity(this.entity);
+        if (this.parentElement &&
+            this.parentElement.tagName.toLowerCase() === 'pc-entity') {
+            const parentEntity = await this.parentElement._entityReady;
+            parentEntity.addChild(this.entity);
         }
         else {
             app.root.addChild(this.entity);
@@ -245,9 +268,18 @@ class EntityElement extends HTMLElement {
     }
     disconnectedCallback() {
         if (this.entity) {
+            // Notify all children that their entities are about to become invalid
+            const children = this.querySelectorAll('pc-entity');
+            children.forEach((child) => {
+                child.entity = null;
+            });
             this.entity.destroy();
             this.entity = null;
         }
+        // Reset the promise for potential reconnection
+        this._entityReady = new Promise((resolve) => {
+            this._resolveEntity = resolve;
+        });
     }
     /**
      * Sets the enabled state of the entity.
@@ -455,6 +487,10 @@ class AssetElement extends HTMLElement {
     get preload() {
         return this._preload;
     }
+    static get(id) {
+        const assetElement = document.querySelector(`pc-asset[id="${id}"]`);
+        return assetElement === null || assetElement === void 0 ? void 0 : assetElement.asset;
+    }
     static get observedAttributes() {
         return ['preload'];
     }
@@ -576,21 +612,39 @@ class CameraComponentElement extends ComponentElement {
      */
     constructor() {
         super('camera');
-        this._clearColor = new Color(1, 1, 1, 1);
+        this._clearColor = new Color(0.75, 0.75, 0.75, 1);
+        this._clearColorBuffer = true;
+        this._clearDepthBuffer = true;
+        this._clearStencilBuffer = false;
+        this._cullFaces = true;
         this._farClip = 1000;
+        this._flipFaces = false;
         this._fov = 45;
+        this._frustumCulling = true;
         this._nearClip = 0.1;
         this._orthographic = false;
         this._orthoHeight = 10;
+        this._priority = 0;
+        this._rect = new Vec4(0, 0, 1, 1);
+        this._scissorRect = new Vec4(0, 0, 1, 1);
     }
     getInitialComponentData() {
         return {
             clearColor: this._clearColor,
+            clearColorBuffer: this._clearColorBuffer,
+            clearDepthBuffer: this._clearDepthBuffer,
+            clearStencilBuffer: this._clearStencilBuffer,
+            cullFaces: this._cullFaces,
             farClip: this._farClip,
+            flipFaces: this._flipFaces,
             fov: this._fov,
+            frustumCulling: this._frustumCulling,
             nearClip: this._nearClip,
-            projection: this._orthographic ? PROJECTION_ORTHOGRAPHIC : PROJECTION_PERSPECTIVE,
-            orthoHeight: this._orthoHeight
+            orthographic: this._orthographic,
+            orthoHeight: this._orthoHeight,
+            priority: this._priority,
+            rect: this._rect,
+            scissorRect: this._scissorRect
         };
     }
     /**
@@ -617,6 +671,74 @@ class CameraComponentElement extends ComponentElement {
     get clearColor() {
         return this._clearColor;
     }
+    /**
+     * Sets the clear color buffer of the camera.
+     * @param value - The clear color buffer.
+     */
+    set clearColorBuffer(value) {
+        this._clearColorBuffer = value;
+        if (this.component) {
+            this.component.clearColorBuffer = value;
+        }
+    }
+    /**
+     * Gets the clear color buffer of the camera.
+     * @returns The clear color buffer.
+     */
+    get clearColorBuffer() {
+        return this._clearColorBuffer;
+    }
+    /**
+     * Sets the clear depth buffer of the camera.
+     * @param value - The clear depth buffer.
+     */
+    set clearDepthBuffer(value) {
+        this._clearDepthBuffer = value;
+        if (this.component) {
+            this.component.clearDepthBuffer = value;
+        }
+    }
+    /**
+     * Gets the clear depth buffer of the camera.
+     * @returns The clear depth buffer.
+     */
+    get clearDepthBuffer() {
+        return this._clearDepthBuffer;
+    }
+    /**
+     * Sets the clear stencil buffer of the camera.
+     * @param value - The clear stencil buffer.
+     */
+    set clearStencilBuffer(value) {
+        this._clearStencilBuffer = value;
+        if (this.component) {
+            this.component.clearStencilBuffer = value;
+        }
+    }
+    /**
+     * Gets the clear stencil buffer of the camera.
+     * @returns The clear stencil buffer.
+     */
+    get clearStencilBuffer() {
+        return this._clearStencilBuffer;
+    }
+    /**
+     * Sets the cull faces of the camera.
+     * @param value - The cull faces.
+     */
+    set cullFaces(value) {
+        this._cullFaces = value;
+        if (this.component) {
+            this.component.cullFaces = value;
+        }
+    }
+    /**
+     * Gets the cull faces of the camera.
+     * @returns The cull faces.
+     */
+    get cullFaces() {
+        return this._cullFaces;
+    }
     /**
      * Sets the far clip distance of the camera.
      * @param value - The far clip distance.
@@ -634,6 +756,23 @@ class CameraComponentElement extends ComponentElement {
     get farClip() {
         return this._farClip;
     }
+    /**
+     * Sets the flip faces of the camera.
+     * @param value - The flip faces.
+     */
+    set flipFaces(value) {
+        this._flipFaces = value;
+        if (this.component) {
+            this.component.flipFaces = value;
+        }
+    }
+    /**
+     * Gets the flip faces of the camera.
+     * @returns The flip faces.
+     */
+    get flipFaces() {
+        return this._flipFaces;
+    }
     /**
      * Sets the field of view of the camera.
      * @param value - The field of view.
@@ -651,6 +790,23 @@ class CameraComponentElement extends ComponentElement {
     get fov() {
         return this._fov;
     }
+    /**
+     * Sets the frustum culling of the camera.
+     * @param value - The frustum culling.
+     */
+    set frustumCulling(value) {
+        this._frustumCulling = value;
+        if (this.component) {
+            this.component.frustumCulling = value;
+        }
+    }
+    /**
+     * Gets the frustum culling of the camera.
+     * @returns The frustum culling.
+     */
+    get frustumCulling() {
+        return this._frustumCulling;
+    }
     /**
      * Sets the near clip distance of the camera.
      * @param value - The near clip distance.
@@ -702,8 +858,76 @@ class CameraComponentElement extends ComponentElement {
     get orthoHeight() {
         return this._orthoHeight;
     }
+    /**
+     * Sets the priority of the camera.
+     * @param value - The priority.
+     */
+    set priority(value) {
+        this._priority = value;
+        if (this.component) {
+            this.component.priority = value;
+        }
+    }
+    /**
+     * Gets the priority of the camera.
+     * @returns The priority.
+     */
+    get priority() {
+        return this._priority;
+    }
+    /**
+     * Sets the rect of the camera.
+     * @param value - The rect.
+     */
+    set rect(value) {
+        this._rect = value;
+        if (this.component) {
+            this.component.rect = value;
+        }
+    }
+    /**
+     * Gets the rect of the camera.
+     * @returns The rect.
+     */
+    get rect() {
+        return this._rect;
+    }
+    /**
+     * Sets the scissor rect of the camera.
+     * @param value - The scissor rect.
+     */
+    set scissorRect(value) {
+        this._scissorRect = value;
+        if (this.component) {
+            this.component.scissorRect = value;
+        }
+    }
+    /**
+     * Gets the scissor rect of the camera.
+     * @returns The scissor rect.
+     */
+    get scissorRect() {
+        return this._scissorRect;
+    }
     static get observedAttributes() {
-        return [...super.observedAttributes, 'clear-color', 'near-clip', 'far-clip', 'fov', 'orthographic', 'ortho-height'];
+        return [
+            ...super.observedAttributes,
+            'clear-color',
+            'clear-color-buffer',
+            'clear-depth-buffer',
+            'clear-stencil-buffer',
+            'cull-faces',
+            'far-clip',
+            'flip-faces',
+            'fov',
+            'frustum-culling',
+            'near-clip',
+            'orthographic',
+            'ortho-height',
+            'priority',
+            'rect',
+            'scissor-rect'
+        ];
     }
     attributeChangedCallback(name, _oldValue, newValue) {
         super.attributeChangedCallback(name, _oldValue, newValue);
@@ -711,12 +935,30 @@ class CameraComponentElement extends ComponentElement {
             case 'clear-color':
                 this.clearColor = parseColor(newValue);
                 break;
+            case 'clear-color-buffer':
+                this.clearColorBuffer = newValue !== 'false';
+                break;
+            case 'clear-depth-buffer':
+                this.clearDepthBuffer = newValue !== 'false';
+                break;
+            case 'clear-stencil-buffer':
+                this.clearStencilBuffer = newValue !== 'false';
+                break;
+            case 'cull-faces':
+                this.cullFaces = newValue !== 'false';
+                break;
             case 'far-clip':
                 this.farClip = parseFloat(newValue);
                 break;
+            case 'flip-faces':
+                this.flipFaces = newValue !== 'true';
+                break;
             case 'fov':
                 this.fov = parseFloat(newValue);
                 break;
+            case 'frustum-culling':
+                this.frustumCulling = newValue !== 'false';
+                break;
             case 'near-clip':
                 this.nearClip = parseFloat(newValue);
                 break;
@@ -726,6 +968,15 @@ class CameraComponentElement extends ComponentElement {
             case 'ortho-height':
                 this.orthoHeight = parseFloat(newValue);
                 break;
+            case 'priority':
+                this.priority = parseFloat(newValue);
+                break;
+            case 'rect':
+                this.rect = parseVec4(newValue);
+                break;
+            case 'scissor-rect':
+                this.scissorRect = parseVec4(newValue);
+                break;
         }
     }
 }
@@ -742,19 +993,23 @@ class CollisionComponentElement extends ComponentElement {
      */
     constructor() {
         super('collision');
+        this._angularOffset = new Quat();
         this._axis = 1;
         this._convexHull = false;
         this._halfExtents = new Vec3(0.5, 0.5, 0.5);
         this._height = 2;
+        this._linearOffset = new Vec3();
         this._radius = 0.5;
         this._type = 'box';
     }
     getInitialComponentData() {
         return {
             axis: this._axis,
+            angularOffset: this._angularOffset,
             convexHull: this._convexHull,
             halfExtents: this._halfExtents,
             height: this._height,
+            linearOffset: this._linearOffset,
             radius: this._radius,
             type: this._type
         };
@@ -766,6 +1021,15 @@ class CollisionComponentElement extends ComponentElement {
     get component() {
         return super.component;
     }
+    set angularOffset(value) {
+        this._angularOffset = value;
+        if (this.component) {
+            this.component.angularOffset = value;
+        }
+    }
+    get angularOffset() {
+        return this._angularOffset;
+    }
     set axis(value) {
         this._axis = value;
         if (this.component) {
@@ -802,6 +1066,15 @@ class CollisionComponentElement extends ComponentElement {
     get height() {
         return this._height;
     }
+    set linearOffset(value) {
+        this._linearOffset = value;
+        if (this.component) {
+            this.component.linearOffset = value;
+        }
+    }
+    get linearOffset() {
+        return this._linearOffset;
+    }
     set radius(value) {
         this._radius = value;
         if (this.component) {
@@ -821,11 +1094,14 @@ class CollisionComponentElement extends ComponentElement {
         return this._type;
     }
     static get observedAttributes() {
-        return [...super.observedAttributes, 'axis', 'convex-hull', 'half-extents', 'height', 'radius', 'type'];
+        return [...super.observedAttributes, 'angular-offset', 'axis', 'convex-hull', 'half-extents', 'height', 'linear-offset', 'radius', 'type'];
     }
     attributeChangedCallback(name, _oldValue, newValue) {
         super.attributeChangedCallback(name, _oldValue, newValue);
         switch (name) {
+            case 'angular-offset':
+                this.angularOffset = parseQuat(newValue);
+                break;
             case 'axis':
                 this.axis = parseInt(newValue, 10);
                 break;
@@ -838,6 +1114,9 @@ class CollisionComponentElement extends ComponentElement {
             case 'height':
                 this.height = parseFloat(newValue);
                 break;
+            case 'linear-offset':
+                this.linearOffset = parseVec3(newValue);
+                break;
             case 'radius':
                 this.radius = parseFloat(newValue);
                 break;
@@ -873,16 +1152,12 @@ class ElementComponentElement extends ComponentElement {
         await super.connectedCallback();
         this.component._text._material.useFog = true;
     }
-    getAsset() {
-        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
-        return assetElement.asset;
-    }
     getInitialComponentData() {
         return {
             anchor: this._anchor,
             autoWidth: this._autoWidth,
             color: this._color,
-            fontAsset: this.getAsset().id,
+            fontAsset: AssetElement.get(this._asset).id,
             fontSize: this._fontSize,
             lineHeight: this._lineHeight,
             pivot: this._pivot,
@@ -910,7 +1185,7 @@ class ElementComponentElement extends ComponentElement {
     }
     set asset(value) {
         this._asset = value;
-        const asset = this.getAsset();
+        const asset = AssetElement.get(value);
         if (this.component && asset) {
             this.component.fontAsset = asset.id;
         }
@@ -1061,13 +1336,9 @@ class GSplatComponentElement extends ComponentElement {
         super('gsplat');
         this._asset = '';
     }
-    getAsset() {
-        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
-        return assetElement.asset;
-    }
     getInitialComponentData() {
         return {
-            asset: this.getAsset()
+            asset: AssetElement.get(this._asset)
         };
     }
     /**
@@ -1079,7 +1350,7 @@ class GSplatComponentElement extends ComponentElement {
     }
     set asset(value) {
         this._asset = value;
-        const asset = this.getAsset();
+        const asset = AssetElement.get(value);
         if (this.component && asset) {
             this.component.asset = asset;
         }
@@ -1371,6 +1642,120 @@ class LightComponentElement extends ComponentElement {
 }
 customElements.define('pc-light', LightComponentElement);
 
+/**
+ * Represents a material in the PlayCanvas engine.
+ */
+class MaterialElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this._diffuse = new Color(1, 1, 1);
+        this._diffuseMap = '';
+        this._metalnessMap = '';
+        this._normalMap = '';
+        this._roughnessMap = '';
+        this.material = null;
+    }
+    createMaterial() {
+        this.material = new StandardMaterial();
+        this.material.glossInvert = true;
+        this.material.useMetalness = true;
+        this.material.diffuse = this._diffuse;
+        this.diffuseMap = this._diffuseMap;
+        this.metalnessMap = this._metalnessMap;
+        this.normalMap = this._normalMap;
+        this.roughnessMap = this._roughnessMap;
+        this.material.update();
+    }
+    disconnectedCallback() {
+        if (this.material) {
+            this.material.destroy();
+            this.material = null;
+        }
+    }
+    setMap(map, property) {
+        if (this.material) {
+            const asset = AssetElement.get(map);
+            if (asset) {
+                if (asset.loaded) {
+                    this.material[property] = asset.resource;
+                    this.material[property].anisotropy = 4;
+                }
+                else {
+                    asset.once('load', () => {
+                        this.material[property] = asset.resource;
+                        this.material[property].anisotropy = 4;
+                        this.material.update();
+                    });
+                }
+            }
+        }
+    }
+    set diffuse(value) {
+        this._diffuse = value;
+        if (this.material) {
+            this.material.diffuse = value;
+        }
+    }
+    get diffuse() {
+        return this._diffuse;
+    }
+    set diffuseMap(value) {
+        this._diffuseMap = value;
+        this.setMap(value, 'diffuseMap');
+    }
+    get diffuseMap() {
+        return this._diffuseMap;
+    }
+    set metalnessMap(value) {
+        this._metalnessMap = value;
+        this.setMap(value, 'metalnessMap');
+    }
+    get metalnessMap() {
+        return this._metalnessMap;
+    }
+    set normalMap(value) {
+        this._normalMap = value;
+        this.setMap(value, 'normalMap');
+    }
+    get normalMap() {
+        return this._normalMap;
+    }
+    set roughnessMap(value) {
+        this._roughnessMap = value;
+        this.setMap(value, 'glossMap');
+    }
+    get roughnessMap() {
+        return this._roughnessMap;
+    }
+    static get(id) {
+        const materialElement = document.querySelector(`pc-material[id="${id}"]`);
+        return materialElement === null || materialElement === void 0 ? void 0 : materialElement.material;
+    }
+    static get observedAttributes() {
+        return ['diffuse', 'diffuse-map', 'metalness-map', 'normal-map', 'roughness-map'];
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        switch (name) {
+            case 'diffuse':
+                this.diffuse = parseColor(newValue);
+                break;
+            case 'diffuse-map':
+                this.diffuseMap = newValue;
+                break;
+            case 'metalness-map':
+                this.metalnessMap = newValue;
+                break;
+            case 'normal-map':
+                this.normalMap = newValue;
+                break;
+            case 'roughness-map':
+                this.roughnessMap = newValue;
+                break;
+        }
+    }
+}
+customElements.define('pc-material', MaterialElement);
+
 /**
  * Represents a render component in the PlayCanvas engine.
  *
@@ -1379,9 +1764,14 @@ customElements.define('pc-light', LightComponentElement);
 class RenderComponentElement extends ComponentElement {
     constructor() {
         super('render');
-        this._type = 'asset';
         this._castShadows = true;
+        this._material = '';
         this._receiveShadows = true;
+        this._type = 'asset';
+    }
+    async connectedCallback() {
+        await super.connectedCallback();
+        this.material = this._material;
     }
     getInitialComponentData() {
         return {
@@ -1431,6 +1821,23 @@ class RenderComponentElement extends ComponentElement {
     get castShadows() {
         return this._castShadows;
     }
+    /**
+     * Sets the material of the render component.
+     * @param value - The id of the material asset to use.
+     */
+    set material(value) {
+        this._material = value;
+        if (this.component) {
+            this.component.material = MaterialElement.get(value);
+        }
+    }
+    /**
+     * Gets the id of the material asset used by the render component.
+     * @returns The id of the material asset.
+     */
+    get material() {
+        return this._material;
+    }
     /**
      * Sets the receive shadows flag of the render component.
      * @param value - The receive shadows flag.
@@ -1449,20 +1856,23 @@ class RenderComponentElement extends ComponentElement {
         return this._receiveShadows;
     }
     static get observedAttributes() {
-        return [...super.observedAttributes, 'cast-shadows', 'receive-shadows', 'type'];
+        return [...super.observedAttributes, 'cast-shadows', 'material', 'receive-shadows', 'type'];
     }
     attributeChangedCallback(name, _oldValue, newValue) {
         super.attributeChangedCallback(name, _oldValue, newValue);
         switch (name) {
-            case 'type':
-                this.type = newValue;
-                break;
             case 'cast-shadows':
                 this.castShadows = newValue !== 'false';
                 break;
+            case 'material':
+                this.material = newValue;
+                break;
             case 'receive-shadows':
                 this.receiveShadows = newValue !== 'false';
                 break;
+            case 'type':
+                this.type = newValue;
+                break;
         }
     }
 }
@@ -1655,6 +2065,129 @@ class RigidBodyComponentElement extends ComponentElement {
 }
 customElements.define('pc-rigidbody', RigidBodyComponentElement);
 
+/**
+ * Represents a screen component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+class ScreenComponentElement extends ComponentElement {
+    constructor() {
+        super('screen');
+        this._screenSpace = false;
+        this._resolution = new Vec2(640, 320);
+        this._referenceResolution = new Vec2(640, 320);
+        this._priority = 0;
+        this._blend = false;
+        this._scaleBlend = 0.5;
+    }
+    getInitialComponentData() {
+        return {
+            priority: this._priority,
+            referenceResolution: this._referenceResolution,
+            resolution: this._resolution,
+            scaleBlend: this._scaleBlend,
+            scaleMode: this._blend ? SCALEMODE_BLEND : SCALEMODE_NONE,
+            screenSpace: this._screenSpace
+        };
+    }
+    /**
+     * Gets the screen component.
+     * @returns The screen component.
+     */
+    get component() {
+        return super.component;
+    }
+    set priority(value) {
+        this._priority = value;
+        if (this.component) {
+            this.component.priority = this._priority;
+        }
+    }
+    get priority() {
+        return this._priority;
+    }
+    set referenceResolution(value) {
+        this._referenceResolution = value;
+        if (this.component) {
+            this.component.referenceResolution = this._referenceResolution;
+        }
+    }
+    get referenceResolution() {
+        return this._referenceResolution;
+    }
+    set resolution(value) {
+        this._resolution = value;
+        if (this.component) {
+            this.component.resolution = this._resolution;
+        }
+    }
+    get resolution() {
+        return this._resolution;
+    }
+    set scaleBlend(value) {
+        this._scaleBlend = value;
+        if (this.component) {
+            this.component.scaleBlend = this._scaleBlend;
+        }
+    }
+    get scaleBlend() {
+        return this._scaleBlend;
+    }
+    set blend(value) {
+        this._blend = value;
+        if (this.component) {
+            this.component.scaleMode = this._blend ? SCALEMODE_BLEND : SCALEMODE_NONE;
+        }
+    }
+    get blend() {
+        return this._blend;
+    }
+    set screenSpace(value) {
+        this._screenSpace = value;
+        if (this.component) {
+            this.component.screenSpace = this._screenSpace;
+        }
+    }
+    get screenSpace() {
+        return this._screenSpace;
+    }
+    static get observedAttributes() {
+        return [
+            ...super.observedAttributes,
+            'blend',
+            'screen-space',
+            'resolution',
+            'reference-resolution',
+            'priority',
+            'scale-blend'
+        ];
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+        switch (name) {
+            case 'priority':
+                this.priority = parseInt(newValue, 10);
+                break;
+            case 'reference-resolution':
+                this.referenceResolution = parseVec2(newValue);
+                break;
+            case 'resolution':
+                this.resolution = parseVec2(newValue);
+                break;
+            case 'scale-blend':
+                this.scaleBlend = parseFloat(newValue);
+                break;
+            case 'blend':
+                this.blend = this.hasAttribute('blend');
+                break;
+            case 'screen-space':
+                this.screenSpace = this.hasAttribute('screen-space');
+                break;
+        }
+    }
+}
+customElements.define('pc-screen', ScreenComponentElement);
+
 /**
  * Represents a script component in the PlayCanvas engine.
  *
@@ -1960,10 +2493,6 @@ class SoundSlotElement extends HTMLElement {
          */
         this.soundSlot = null;
     }
-    getAsset() {
-        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
-        return assetElement.asset;
-    }
     async connectedCallback() {
         const appElement = this.closest('pc-app');
         if (!appElement) {
@@ -2005,7 +2534,7 @@ class SoundSlotElement extends HTMLElement {
         var _a;
         this._asset = value;
         if (this.soundSlot) {
-            const id = (_a = this.getAsset()) === null || _a === void 0 ? void 0 : _a.id;
+            const id = (_a = AssetElement.get(value)) === null || _a === void 0 ? void 0 : _a.id;
             if (id) {
                 this.soundSlot.asset = id;
             }
@@ -2209,12 +2738,8 @@ class ModelElement extends HTMLElement {
             this.asset = asset;
         }
     }
-    getAsset() {
-        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
-        return assetElement.asset;
-    }
     _loadModel() {
-        const asset = this.getAsset();
+        const asset = AssetElement.get(this._asset);
         if (!asset) {
             return;
         }
@@ -2442,10 +2967,6 @@ class SkyElement extends HTMLElement {
         this.asset = this.getAttribute('asset') || '';
         this.solidColor = this.hasAttribute('solid-color');
     }
-    getAsset() {
-        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
-        return assetElement.asset;
-    }
     getScene() {
         const appElement = this.closest('pc-app');
         if (!appElement) {
@@ -2461,7 +2982,7 @@ class SkyElement extends HTMLElement {
         this._asset = value;
         const scene = this.getScene();
         if (scene) {
-            const asset = this.getAsset();
+            const asset = AssetElement.get(value);
             if (asset) {
                 if (asset.resource) {
                     scene.envAtlas = asset.resource;
@@ -2545,5 +3066,5 @@ class SkyElement extends HTMLElement {
 }
 customElements.define('pc-sky', SkyElement);
 
-export { AppElement, AssetElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, EntityElement, GSplatComponentElement, LightComponentElement, ListenerComponentElement, ModelElement, ModuleElement, RenderComponentElement, RigidBodyComponentElement, SceneElement, ScriptComponentElement, ScriptElement, SkyElement, SoundComponentElement, SoundSlotElement };
+export { AppElement, AssetElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, EntityElement, GSplatComponentElement, LightComponentElement, ListenerComponentElement, MaterialElement, ModelElement, ModuleElement, RenderComponentElement, RigidBodyComponentElement, SceneElement, ScreenComponentElement, ScriptComponentElement, ScriptElement, SkyElement, SoundComponentElement, SoundSlotElement };
 //# sourceMappingURL=pwc.mjs.map