@playcanvas/web-components 0.1.8 → 0.1.10

package/dist/pwc.js

@@ -5,9 +5,10 @@
 })(this, (function (exports, playcanvas) { 'use strict';
 
     /**
-     * Base class for all PlayCanvas web components that initialize asynchronously.
+     * Base class for all PlayCanvas Web Components that initialize asynchronously.
      */
     class AsyncElement extends HTMLElement {
+        /** @ignore */
         constructor() {
             super();
             this._readyPromise = new Promise((resolve) => {
@@ -39,7 +40,13 @@
         }
     }
 
+    /**
+     * The ModuleElement interface provides properties and methods for manipulating
+     * `<pc-module>` elements. The ModuleElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
+     */
     class ModuleElement extends HTMLElement {
+        /** @ignore */
         constructor() {
             super();
             this.loadPromise = this.loadModule();
@@ -78,7 +85,9 @@
      */
     class AppElement extends AsyncElement {
         /**
-         * Creates a new AppElement.
+         * Creates a new AppElement instance.
+         *
+         * @ignore
          */
         constructor() {
             super();
@@ -91,6 +100,21 @@
             this._depth = true;
             this._stencil = true;
             this._highResolution = false;
+            this._hierarchyReady = false;
+            this._picker = null;
+            this._hasPointerListeners = {
+                pointerenter: false,
+                pointerleave: false,
+                pointerdown: false,
+                pointerup: false,
+                pointermove: false
+            };
+            this._hoveredEntity = null;
+            this._pointerHandlers = {
+                pointermove: null,
+                pointerdown: null,
+                pointerup: null
+            };
             /**
              * The PlayCanvas application instance.
              */
@@ -120,6 +144,7 @@
             this.app.graphicsDevice.maxPixelRatio = this._highResolution ? window.devicePixelRatio : 1;
             this.app.setCanvasFillMode(playcanvas.FILLMODE_FILL_WINDOW);
             this.app.setCanvasResolution(playcanvas.RESOLUTION_AUTO);
+            this._pickerCreate();
             // Get all pc-asset elements that are direct children of the pc-app element
             const assetElements = this.querySelectorAll(':scope > pc-asset');
             Array.from(assetElements).forEach((assetElement) => {
@@ -134,6 +159,16 @@
             Array.from(materialElements).forEach((materialElement) => {
                 materialElement.createMaterial();
             });
+            // Create all entities
+            const entityElements = this.querySelectorAll('pc-entity');
+            Array.from(entityElements).forEach((entityElement) => {
+                entityElement.createEntity(this.app);
+            });
+            // Build hierarchy
+            entityElements.forEach((entityElement) => {
+                entityElement.buildHierarchy(this.app);
+            });
+            this._hierarchyReady = true;
             // Load assets before starting the application
             this.app.preload(() => {
                 // Start the application
@@ -144,6 +179,7 @@
             });
         }
         disconnectedCallback() {
+            this._pickerDestroy();
             // Clean up the application
             if (this.app) {
                 this.app.destroy();
@@ -162,6 +198,139 @@
                 this.app.resizeCanvas();
             }
         }
+        _pickerCreate() {
+            const { width, height } = this.app.graphicsDevice;
+            this._picker = new playcanvas.Picker(this.app, width, height);
+            // Create bound handlers but don't attach them yet
+            this._pointerHandlers.pointermove = this._onPointerMove.bind(this);
+            this._pointerHandlers.pointerdown = this._onPointerDown.bind(this);
+            this._pointerHandlers.pointerup = this._onPointerUp.bind(this);
+            // Listen for pointer listeners being added/removed
+            ['pointermove', 'pointerdown', 'pointerup', 'pointerenter', 'pointerleave'].forEach((type) => {
+                this.addEventListener(`${type}:connect`, () => this._onPointerListenerAdded(type));
+                this.addEventListener(`${type}:disconnect`, () => this._onPointerListenerRemoved(type));
+            });
+        }
+        _pickerDestroy() {
+            if (this._canvas) {
+                Object.entries(this._pointerHandlers).forEach(([type, handler]) => {
+                    if (handler) {
+                        this._canvas.removeEventListener(type, handler);
+                    }
+                });
+            }
+            this._picker = null;
+            this._pointerHandlers = {
+                pointermove: null,
+                pointerdown: null,
+                pointerup: null
+            };
+        }
+        _onPointerMove(event) {
+            if (!this._picker || !this.app)
+                return;
+            const camera = this.app.root.findComponent('camera');
+            if (!camera)
+                return;
+            const canvasRect = this._canvas.getBoundingClientRect();
+            const x = event.clientX - canvasRect.left;
+            const y = event.clientY - canvasRect.top;
+            this._picker.prepare(camera, this.app.scene);
+            const selection = this._picker.getSelection(x, y);
+            // Get the currently hovered entity by walking up the hierarchy
+            let newHoverEntity = null;
+            if (selection.length > 0) {
+                let node = selection[0].node;
+                while (node && !newHoverEntity) {
+                    const entityElement = this.querySelector(`pc-entity[name="${node.name}"]`);
+                    if (entityElement) {
+                        newHoverEntity = entityElement;
+                    }
+                    node = node.parent;
+                }
+            }
+            // Handle enter/leave events
+            if (this._hoveredEntity !== newHoverEntity) {
+                if (this._hoveredEntity && this._hoveredEntity.hasListeners('pointerleave')) {
+                    this._hoveredEntity.dispatchEvent(new PointerEvent('pointerleave', event));
+                }
+                if (newHoverEntity && newHoverEntity.hasListeners('pointerenter')) {
+                    newHoverEntity.dispatchEvent(new PointerEvent('pointerenter', event));
+                }
+            }
+            // Update hover state
+            this._hoveredEntity = newHoverEntity;
+            // Handle pointermove event
+            if (newHoverEntity && newHoverEntity.hasListeners('pointermove')) {
+                newHoverEntity.dispatchEvent(new PointerEvent('pointermove', event));
+            }
+        }
+        _onPointerDown(event) {
+            if (!this._picker || !this.app)
+                return;
+            const camera = this.app.root.findComponent('camera');
+            if (!camera)
+                return;
+            const canvasRect = this._canvas.getBoundingClientRect();
+            const x = event.clientX - canvasRect.left;
+            const y = event.clientY - canvasRect.top;
+            this._picker.prepare(camera, this.app.scene);
+            const selection = this._picker.getSelection(x, y);
+            if (selection.length > 0) {
+                let node = selection[0].node;
+                while (node) {
+                    const entityElement = this.querySelector(`pc-entity[name="${node.name}"]`);
+                    if (entityElement && entityElement.hasListeners('pointerdown')) {
+                        entityElement.dispatchEvent(new PointerEvent('pointerdown', event));
+                        break;
+                    }
+                    node = node.parent;
+                }
+            }
+        }
+        _onPointerUp(event) {
+            if (!this._picker || !this.app)
+                return;
+            const camera = this.app.root.findComponent('camera');
+            if (!camera)
+                return;
+            const canvasRect = this._canvas.getBoundingClientRect();
+            const x = event.clientX - canvasRect.left;
+            const y = event.clientY - canvasRect.top;
+            this._picker.prepare(camera, this.app.scene);
+            const selection = this._picker.getSelection(x, y);
+            if (selection.length > 0) {
+                const entityElement = this.querySelector(`pc-entity[name="${selection[0].node.name}"]`);
+                if (entityElement && entityElement.hasListeners('pointerup')) {
+                    entityElement.dispatchEvent(new PointerEvent('pointerup', event));
+                }
+            }
+        }
+        _onPointerListenerAdded(type) {
+            if (!this._hasPointerListeners[type] && this._canvas) {
+                this._hasPointerListeners[type] = true;
+                // For enter/leave events, we need the move handler
+                const handler = (type === 'pointerenter' || type === 'pointerleave') ?
+                    this._pointerHandlers.pointermove :
+                    this._pointerHandlers[type];
+                if (handler) {
+                    this._canvas.addEventListener(type === 'pointerenter' || type === 'pointerleave' ? 'pointermove' : type, handler);
+                }
+            }
+        }
+        _onPointerListenerRemoved(type) {
+            const hasListeners = Array.from(this.querySelectorAll('pc-entity'))
+                .some(entity => entity.hasListeners(type));
+            if (!hasListeners && this._canvas) {
+                this._hasPointerListeners[type] = false;
+                const handler = (type === 'pointerenter' || type === 'pointerleave') ?
+                    this._pointerHandlers.pointermove :
+                    this._pointerHandlers[type];
+                if (handler) {
+                    this._canvas.removeEventListener(type === 'pointerenter' || type === 'pointerleave' ? 'pointermove' : type, handler);
+                }
+            }
+        }
         /**
          * Sets the alpha flag.
          * @param value - The alpha flag.
@@ -204,6 +373,14 @@
         get depth() {
             return this._depth;
         }
+        /**
+         * Gets the hierarchy ready flag.
+         * @returns The hierarchy ready flag.
+         * @ignore
+         */
+        get hierarchyReady() {
+            return this._hierarchyReady;
+        }
         /**
          * Sets the high resolution flag. When true, the application will render at the device's
          * physical resolution. When false, the application will render at CSS resolution.
@@ -475,7 +652,9 @@
     };
 
     /**
-     * Represents an entity in the PlayCanvas engine.
+     * The EntityElement interface provides properties and methods for manipulating
+     * `<pc-entity>` elements. The EntityElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      */
     class EntityElement extends AsyncElement {
         constructor() {
@@ -504,49 +683,93 @@
              * The tags of the entity.
              */
             this._tags = [];
+            /**
+             * The pointer event listeners for the entity.
+             */
+            this._listeners = {};
             /**
              * The PlayCanvas entity instance.
              */
             this.entity = null;
         }
-        async connectedCallback() {
-            const closestApp = this.closestApp;
-            if (!closestApp)
-                return;
-            // Wait for the app to complete initialization
-            await closestApp.ready();
-            const app = closestApp.app;
+        createEntity(app) {
             // Create a new entity
-            this.entity = new playcanvas.Entity(this._name, app);
-            // Initialize from attributes
-            const enabledAttr = this.getAttribute('enabled');
-            const nameAttr = this.getAttribute('name');
-            const positionAttr = this.getAttribute('position');
-            const rotationAttr = this.getAttribute('rotation');
-            const scaleAttr = this.getAttribute('scale');
-            const tagsAttr = this.getAttribute('tags');
-            if (enabledAttr)
-                this.enabled = enabledAttr !== 'false';
-            if (nameAttr)
-                this.name = nameAttr;
-            if (positionAttr)
-                this.position = parseVec3(positionAttr);
-            if (rotationAttr)
-                this.rotation = parseVec3(rotationAttr);
-            if (scaleAttr)
-                this.scale = parseVec3(scaleAttr);
-            if (tagsAttr)
-                this.tags = tagsAttr.split(',').map(tag => tag.trim());
+            this.entity = new playcanvas.Entity(this.getAttribute('name') || this._name, app);
+            const enabled = this.getAttribute('enabled');
+            if (enabled) {
+                this.entity.enabled = enabled !== 'false';
+            }
+            const position = this.getAttribute('position');
+            if (position) {
+                this.entity.setLocalPosition(parseVec3(position));
+            }
+            const rotation = this.getAttribute('rotation');
+            if (rotation) {
+                this.entity.setLocalEulerAngles(parseVec3(rotation));
+            }
+            const scale = this.getAttribute('scale');
+            if (scale) {
+                this.entity.setLocalScale(parseVec3(scale));
+            }
+            const tags = this.getAttribute('tags');
+            if (tags) {
+                this.entity.tags.add(tags.split(',').map(tag => tag.trim()));
+            }
+            // Handle pointer events
+            const pointerEvents = [
+                'onpointerenter',
+                'onpointerleave',
+                'onpointerdown',
+                'onpointerup',
+                'onpointermove'
+            ];
+            pointerEvents.forEach((eventName) => {
+                const handler = this.getAttribute(eventName);
+                if (handler) {
+                    const eventType = eventName.substring(2); // remove 'on' prefix
+                    const eventHandler = (event) => {
+                        try {
+                            /* eslint-disable-next-line no-new-func */
+                            new Function('event', handler).call(this, event);
+                        }
+                        catch (e) {
+                            console.error('Error in event handler:', e);
+                        }
+                    };
+                    this.addEventListener(eventType, eventHandler);
+                }
+            });
+        }
+        buildHierarchy(app) {
+            if (!this.entity)
+                return;
             const closestEntity = this.closestEntity;
-            if (closestEntity) {
-                closestEntity.ready().then(() => {
-                    closestEntity.entity.addChild(this.entity);
-                    this._onReady();
-                });
+            if (closestEntity === null || closestEntity === void 0 ? void 0 : closestEntity.entity) {
+                closestEntity.entity.addChild(this.entity);
             }
             else {
                 app.root.addChild(this.entity);
-                this._onReady();
+            }
+            this._onReady();
+        }
+        connectedCallback() {
+            // Wait for app to be ready
+            const closestApp = this.closestApp;
+            if (!closestApp)
+                return;
+            // If app is already running, create entity immediately
+            if (closestApp.hierarchyReady) {
+                const app = closestApp.app;
+                this.createEntity(app);
+                this.buildHierarchy(app);
+                // Handle any child entities that might exist
+                const childEntities = this.querySelectorAll('pc-entity');
+                childEntities.forEach((child) => {
+                    child.createEntity(app);
+                });
+                childEntities.forEach((child) => {
+                    child.buildHierarchy(app);
+                });
             }
         }
         disconnectedCallback() {
@@ -556,6 +779,7 @@
                 children.forEach((child) => {
                     child.entity = null;
                 });
+                // Destroy the entity
                 this.entity.destroy();
                 this.entity = null;
             }
@@ -664,7 +888,19 @@
             return this._tags;
         }
         static get observedAttributes() {
-            return ['enabled', 'name', 'position', 'rotation', 'scale', 'tags'];
+            return [
+                'enabled',
+                'name',
+                'position',
+                'rotation',
+                'scale',
+                'tags',
+                'onpointerenter',
+                'onpointerleave',
+                'onpointerdown',
+                'onpointerup',
+                'onpointermove'
+            ];
         }
         attributeChangedCallback(name, _oldValue, newValue) {
             switch (name) {
@@ -686,7 +922,51 @@
                 case 'tags':
                     this.tags = newValue.split(',').map(tag => tag.trim());
                     break;
+                case 'onpointerenter':
+                case 'onpointerleave':
+                case 'onpointerdown':
+                case 'onpointerup':
+                case 'onpointermove':
+                    if (newValue) {
+                        const eventName = name.substring(2);
+                        // Use Function.prototype.bind to avoid new Function
+                        const handler = (event) => {
+                            try {
+                                const handlerStr = this.getAttribute(eventName) || '';
+                                /* eslint-disable-next-line no-new-func */
+                                new Function('event', handlerStr).call(this, event);
+                            }
+                            catch (e) {
+                                console.error('Error in event handler:', e);
+                            }
+                        };
+                        this.addEventListener(eventName, handler);
+                    }
+                    break;
+            }
+        }
+        addEventListener(type, listener, options) {
+            if (!this._listeners[type]) {
+                this._listeners[type] = [];
             }
+            this._listeners[type].push(listener);
+            super.addEventListener(type, listener, options);
+            if (type.startsWith('pointer')) {
+                this.dispatchEvent(new CustomEvent(`${type}:connect`, { bubbles: true }));
+            }
+        }
+        removeEventListener(type, listener, options) {
+            if (this._listeners[type]) {
+                this._listeners[type] = this._listeners[type].filter(l => l !== listener);
+            }
+            super.removeEventListener(type, listener, options);
+            if (type.startsWith('pointer')) {
+                this.dispatchEvent(new CustomEvent(`${type}:disconnect`, { bubbles: true }));
+            }
+        }
+        hasListeners(type) {
+            var _a;
+            return Boolean((_a = this._listeners[type]) === null || _a === void 0 ? void 0 : _a.length);
         }
     }
     customElements.define('pc-entity', EntityElement);
@@ -711,7 +991,9 @@
         ['webp', 'texture']
     ]);
     /**
-     * Loads an asset into the PlayCanvas engine.
+     * The AssetElement interface provides properties and methods for manipulating
+     * `<pc-asset>` elements. The AssetElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      */
     class AssetElement extends HTMLElement {
         constructor() {
@@ -787,8 +1069,10 @@
      */
     class ComponentElement extends AsyncElement {
         /**
-         * Constructor for the ComponentElement.
+         * Creates a new ComponentElement instance.
+         *
          * @param componentName - The name of the component.
+         * @ignore
          */
         constructor(componentName) {
             super();
@@ -857,11 +1141,14 @@
     }
 
     /**
-     * Represents a audio listener component in the PlayCanvas engine.
+     * The ListenerComponentElement interface provides properties and methods for manipulating
+     * `<pc-listener>` elements. The ListenerComponentElement interface also inherits the properties
+     * and methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class ListenerComponentElement extends ComponentElement {
+        /** @ignore */
         constructor() {
             super('audiolistener');
         }
@@ -875,15 +1162,24 @@
     }
     customElements.define('pc-listener', ListenerComponentElement);
 
+    const tonemaps = new Map([
+        ['none', playcanvas.TONEMAP_NONE],
+        ['linear', playcanvas.TONEMAP_LINEAR],
+        ['filmic', playcanvas.TONEMAP_FILMIC],
+        ['hejl', playcanvas.TONEMAP_HEJL],
+        ['aces', playcanvas.TONEMAP_ACES],
+        ['aces2', playcanvas.TONEMAP_ACES2],
+        ['neutral', playcanvas.TONEMAP_NEUTRAL]
+    ]);
     /**
-     * Represents a camera component in the PlayCanvas engine.
+     * The CameraComponentElement interface provides properties and methods for manipulating
+     * `<pc-camera>` elements. The CameraComponentElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class CameraComponentElement extends ComponentElement {
-        /**
-         * Creates a new CameraComponentElement.
-         */
+        /** @ignore */
         constructor() {
             super('camera');
             this._clearColor = new playcanvas.Color(0.75, 0.75, 0.75, 1);
@@ -895,12 +1191,14 @@
             this._flipFaces = false;
             this._fov = 45;
             this._frustumCulling = true;
+            this._gamma = 'srgb';
             this._nearClip = 0.1;
             this._orthographic = false;
             this._orthoHeight = 10;
             this._priority = 0;
             this._rect = new playcanvas.Vec4(0, 0, 1, 1);
             this._scissorRect = new playcanvas.Vec4(0, 0, 1, 1);
+            this._tonemap = 'none';
         }
         getInitialComponentData() {
             return {
@@ -913,12 +1211,14 @@
                 flipFaces: this._flipFaces,
                 fov: this._fov,
                 frustumCulling: this._frustumCulling,
+                gammaCorrection: this._gamma === 'srgb' ? playcanvas.GAMMA_SRGB : playcanvas.GAMMA_NONE,
                 nearClip: this._nearClip,
                 orthographic: this._orthographic,
                 orthoHeight: this._orthoHeight,
                 priority: this._priority,
                 rect: this._rect,
-                scissorRect: this._scissorRect
+                scissorRect: this._scissorRect,
+                toneMapping: tonemaps.get(this._tonemap)
             };
         }
         get xrAvailable() {
@@ -1101,6 +1401,23 @@
         get frustumCulling() {
             return this._frustumCulling;
         }
+        /**
+         * Sets the gamma correction of the camera.
+         * @param value - The gamma correction.
+         */
+        set gamma(value) {
+            this._gamma = value;
+            if (this.component) {
+                this.component.gammaCorrection = value === 'srgb' ? playcanvas.GAMMA_SRGB : playcanvas.GAMMA_NONE;
+            }
+        }
+        /**
+         * Gets the gamma correction of the camera.
+         * @returns The gamma correction.
+         */
+        get gamma() {
+            return this._gamma;
+        }
         /**
          * Sets the near clip distance of the camera.
          * @param value - The near clip distance.
@@ -1203,6 +1520,24 @@
         get scissorRect() {
             return this._scissorRect;
         }
+        /**
+         * Sets the tone mapping of the camera.
+         * @param value - The tone mapping.
+         */
+        set tonemap(value) {
+            var _a;
+            this._tonemap = value;
+            if (this.component) {
+                this.component.toneMapping = (_a = tonemaps.get(value)) !== null && _a !== void 0 ? _a : playcanvas.TONEMAP_NONE;
+            }
+        }
+        /**
+         * Gets the tone mapping of the camera.
+         * @returns The tone mapping.
+         */
+        get tonemap() {
+            return this._tonemap;
+        }
         static get observedAttributes() {
             return [
                 ...super.observedAttributes,
@@ -1215,12 +1550,14 @@
                 'flip-faces',
                 'fov',
                 'frustum-culling',
+                'gamma',
                 'near-clip',
                 'orthographic',
                 'ortho-height',
                 'priority',
                 'rect',
-                'scissor-rect'
+                'scissor-rect',
+                'tonemap'
             ];
         }
         attributeChangedCallback(name, _oldValue, newValue) {
@@ -1253,6 +1590,9 @@
                 case 'frustum-culling':
                     this.frustumCulling = newValue !== 'false';
                     break;
+                case 'gamma':
+                    this.gamma = newValue;
+                    break;
                 case 'near-clip':
                     this.nearClip = parseFloat(newValue);
                     break;
@@ -1271,20 +1611,23 @@
                 case 'scissor-rect':
                     this.scissorRect = parseVec4(newValue);
                     break;
+                case 'tonemap':
+                    this.tonemap = newValue;
+                    break;
             }
         }
     }
     customElements.define('pc-camera', CameraComponentElement);
 
     /**
-     * Represents a collision component in the PlayCanvas engine.
+     * The CollisionComponentElement interface provides properties and methods for manipulating
+     * `<pc-collision>` elements. The CollisionComponentElement interface also inherits the properties
+     * and methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class CollisionComponentElement extends ComponentElement {
-        /**
-         * Creates a new CollisionComponentElement.
-         */
+        /** @ignore */
         constructor() {
             super('collision');
             this._angularOffset = new playcanvas.Quat();
@@ -1423,11 +1766,14 @@
     customElements.define('pc-collision', CollisionComponentElement);
 
     /**
-     * Represents an element component in the PlayCanvas engine.
+     * The ElementComponentElement interface provides properties and methods for manipulating
+     * `<pc-element>` elements. The ElementComponentElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class ElementComponentElement extends ComponentElement {
+        /** @ignore */
         constructor() {
             super('element');
             this._anchor = new playcanvas.Vec4(0.5, 0.5, 0.5, 0.5);
@@ -1633,11 +1979,14 @@
     customElements.define('pc-element', ElementComponentElement);
 
     /**
-     * Represents a gsplat component in the PlayCanvas engine.
+     * The GSplatComponentElement interface provides properties and methods for manipulating
+     * `<pc-splat>` elements. The GSplatComponentElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class GSplatComponentElement extends ComponentElement {
+        /** @ignore */
         constructor() {
             super('gsplat');
             this._asset = '';
@@ -1678,15 +2027,26 @@
     }
     customElements.define('pc-splat', GSplatComponentElement);
 
+    const shadowTypes = new Map([
+        ['pcf1-16f', playcanvas.SHADOW_PCF1_16F],
+        ['pcf1-32f', playcanvas.SHADOW_PCF1_32F],
+        ['pcf3-16f', playcanvas.SHADOW_PCF3_16F],
+        ['pcf3-32f', playcanvas.SHADOW_PCF3_32F],
+        ['pcf5-16f', playcanvas.SHADOW_PCF5_16F],
+        ['pcf5-32f', playcanvas.SHADOW_PCF5_32F],
+        ['vsm-16f', playcanvas.SHADOW_VSM_16F],
+        ['vsm-32f', playcanvas.SHADOW_VSM_32F],
+        ['pcss-32f', playcanvas.SHADOW_PCSS_32F]
+    ]);
     /**
-     * Represents a light component in the PlayCanvas engine.
+     * The LightComponentElement interface provides properties and methods for manipulating
+     * `<pc-light>` elements. The LightComponentElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class LightComponentElement extends ComponentElement {
-        /**
-         * Creates a new LightComponentElement.
-         */
+        /** @ignore */
         constructor() {
             super('light');
             this._castShadows = false;
@@ -1698,8 +2058,11 @@
             this._range = 10;
             this._shadowBias = 0.2;
             this._shadowDistance = 16;
+            this._shadowIntensity = 1;
             this._shadowResolution = 1024;
+            this._shadowType = 'pcf3-32f';
             this._type = 'directional';
+            this._vsmBias = 0.01;
         }
         getInitialComponentData() {
             return {
@@ -1712,8 +2075,11 @@
                 range: this._range,
                 shadowBias: this._shadowBias,
                 shadowDistance: this._shadowDistance,
+                shadowIntensity: this._shadowIntensity,
                 shadowResolution: this._shadowResolution,
-                type: this._type
+                shadowType: shadowTypes.get(this._shadowType),
+                type: this._type,
+                vsmBias: this._vsmBias
             };
         }
         /**
@@ -1876,6 +2242,23 @@
         get shadowDistance() {
             return this._shadowDistance;
         }
+        /**
+         * Sets the shadow intensity of the light.
+         * @param value - The shadow intensity.
+         */
+        set shadowIntensity(value) {
+            this._shadowIntensity = value;
+            if (this.component) {
+                this.component.shadowIntensity = value;
+            }
+        }
+        /**
+         * Gets the shadow intensity of the light.
+         * @returns The shadow intensity.
+         */
+        get shadowIntensity() {
+            return this._shadowIntensity;
+        }
         /**
          * Sets the shadow resolution of the light.
          * @param value - The shadow resolution.
@@ -1893,6 +2276,34 @@
         get shadowResolution() {
             return this._shadowResolution;
         }
+        /**
+         * Sets the shadow type of the light.
+         * @param value - The shadow type. Can be:
+         *
+         * - `pcf1-16f` - 1-tap percentage-closer filtered shadow map with 16-bit depth.
+         * - `pcf1-32f` - 1-tap percentage-closer filtered shadow map with 32-bit depth.
+         * - `pcf3-16f` - 3-tap percentage-closer filtered shadow map with 16-bit depth.
+         * - `pcf3-32f` - 3-tap percentage-closer filtered shadow map with 32-bit depth.
+         * - `pcf5-16f` - 5-tap percentage-closer filtered shadow map with 16-bit depth.
+         * - `pcf5-32f` - 5-tap percentage-closer filtered shadow map with 32-bit depth.
+         * - `vsm-16f` - Variance shadow map with 16-bit depth.
+         * - `vsm-32f` - Variance shadow map with 32-bit depth.
+         * - `pcss-32f` - Percentage-closer soft shadow with 32-bit depth.
+         */
+        set shadowType(value) {
+            var _a;
+            this._shadowType = value;
+            if (this.component) {
+                this.component.shadowType = (_a = shadowTypes.get(value)) !== null && _a !== void 0 ? _a : playcanvas.SHADOW_PCF3_32F;
+            }
+        }
+        /**
+         * Gets the shadow type of the light.
+         * @returns The shadow type.
+         */
+        get shadowType() {
+            return this._shadowType;
+        }
         /**
          * Sets the type of the light.
          * @param value - The type.
@@ -1914,6 +2325,23 @@
         get type() {
             return this._type;
         }
+        /**
+         * Sets the VSM bias of the light.
+         * @param value - The VSM bias.
+         */
+        set vsmBias(value) {
+            this._vsmBias = value;
+            if (this.component) {
+                this.component.vsmBias = value;
+            }
+        }
+        /**
+         * Gets the VSM bias of the light.
+         * @returns The VSM bias.
+         */
+        get vsmBias() {
+            return this._vsmBias;
+        }
         static get observedAttributes() {
             return [
                 ...super.observedAttributes,
@@ -1926,8 +2354,11 @@
                 'range',
                 'shadow-bias',
                 'shadow-distance',
+                'shadow-intensity',
                 'shadow-resolution',
-                'type'
+                'shadow-type',
+                'type',
+                'vsm-bias'
             ];
         }
         attributeChangedCallback(name, _oldValue, newValue) {
@@ -1963,16 +2394,27 @@
                 case 'shadow-resolution':
                     this.shadowResolution = Number(newValue);
                     break;
+                case 'shadow-intensity':
+                    this.shadowIntensity = Number(newValue);
+                    break;
+                case 'shadow-type':
+                    this.shadowType = newValue;
+                    break;
                 case 'type':
                     this.type = newValue;
                     break;
+                case 'vsm-bias':
+                    this.vsmBias = Number(newValue);
+                    break;
             }
         }
     }
     customElements.define('pc-light', LightComponentElement);
 
     /**
-     * Represents a material in the PlayCanvas engine.
+     * The MaterialElement interface provides properties and methods for manipulating
+     * `<pc-material>` elements. The MaterialElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      */
     class MaterialElement extends HTMLElement {
         constructor() {
@@ -1986,8 +2428,8 @@
         }
         createMaterial() {
             this.material = new playcanvas.StandardMaterial();
-            this.material.glossInvert = true;
-            this.material.useMetalness = true;
+            this.material.glossInvert = false;
+            this.material.useMetalness = false;
             this.material.diffuse = this._diffuse;
             this.diffuseMap = this._diffuseMap;
             this.metalnessMap = this._metalnessMap;
@@ -2086,11 +2528,14 @@
     customElements.define('pc-material', MaterialElement);
 
     /**
-     * Represents a render component in the PlayCanvas engine.
+     * The RenderComponentElement interface provides properties and methods for manipulating
+     * `<pc-render>` elements. The RenderComponentElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class RenderComponentElement extends ComponentElement {
+        /** @ignore */
         constructor() {
             super('render');
             this._castShadows = true;
@@ -2205,14 +2650,14 @@
     customElements.define('pc-render', RenderComponentElement);
 
     /**
-     * Represents a rigidbody component in the PlayCanvas engine.
+     * The RigidBodyComponentElement interface provides properties and methods for manipulating
+     * `<pc-rigidbody>` elements. The RigidBodyComponentElement interface also inherits the properties
+     * and methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class RigidBodyComponentElement extends ComponentElement {
-        /**
-         * Creates a new RigidBodyComponentElement.
-         */
+        /** @ignore */
         constructor() {
             super('rigidbody');
             /**
@@ -2392,11 +2837,14 @@
     customElements.define('pc-rigidbody', RigidBodyComponentElement);
 
     /**
-     * Represents a screen component in the PlayCanvas engine.
+     * The ScreenComponentElement interface provides properties and methods for manipulating
+     * `<pc-screen>` elements. The ScreenComponentElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class ScreenComponentElement extends ComponentElement {
+        /** @ignore */
         constructor() {
             super('screen');
             this._screenSpace = false;
@@ -2514,15 +2962,15 @@
     }
     customElements.define('pc-screen', ScreenComponentElement);
 
-    const tmpV2 = new playcanvas.Vec2();
-    const tmpV3 = new playcanvas.Vec3();
-    const tmpV4 = new playcanvas.Vec4();
     /**
-     * Represents a script component in the PlayCanvas engine.
+     * The ScriptComponentElement interface provides properties and methods for manipulating
+     * `<pc-scripts>` elements. The ScriptComponentElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class ScriptComponentElement extends ComponentElement {
+        /** @ignore */
         constructor() {
             super('script');
             // Create mutation observer to watch for child script elements
@@ -2557,22 +3005,34 @@
                             return;
                         }
                     }
-                    // Handle vectors
-                    if (Array.isArray(value)) {
-                        if (target[key] instanceof playcanvas.Vec2) {
-                            target[key] = tmpV2.set(value[0], value[1]);
+                    // Handle arrays
+                    if (value && typeof value === 'object' && Array.isArray(value)) {
+                        // If it's an array of objects, recursively apply to each object
+                        if (value.length > 0 && typeof value[0] === 'object') {
+                            target[key] = value.map((item) => {
+                                const obj = {};
+                                for (const itemKey in item) {
+                                    applyValue(obj, itemKey, item[itemKey]);
+                                }
+                                return obj;
+                            });
+                            return;
+                        }
+                        // Handle vectors
+                        if (value.length === 2 && typeof value[0] === 'number') {
+                            target[key] = new playcanvas.Vec2(value[0], value[1]);
                             return;
                         }
-                        if (target[key] instanceof playcanvas.Vec3) {
-                            target[key] = tmpV3.set(value[0], value[1], value[2]);
+                        if (value.length === 3 && typeof value[0] === 'number') {
+                            target[key] = new playcanvas.Vec3(value[0], value[1], value[2]);
                             return;
                         }
-                        if (target[key] instanceof playcanvas.Vec4) {
-                            target[key] = tmpV4.set(value[0], value[1], value[2], value[3]);
+                        if (value.length === 4 && typeof value[0] === 'number') {
+                            target[key] = new playcanvas.Vec4(value[0], value[1], value[2], value[3]);
                             return;
                         }
                     }
-                    // Handle nested objects
+                    // Handle nested objects (non-array)
                     if (value && typeof value === 'object' && !Array.isArray(value)) {
                         if (!target[key] || typeof target[key] !== 'object') {
                             target[key] = {};
@@ -2665,7 +3125,9 @@
     customElements.define('pc-scripts', ScriptComponentElement);
 
     /**
-     * Represents a script in the PlayCanvas engine.
+     * The ScriptElement interface provides properties and methods for manipulating
+     * `<pc-script>` elements. The ScriptElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      */
     class ScriptElement extends HTMLElement {
         constructor() {
@@ -2744,11 +3206,14 @@
     customElements.define('pc-script', ScriptElement);
 
     /**
-     * Represents a sound component in the PlayCanvas engine.
+     * The SoundComponentElement interface provides properties and methods for manipulating
+     * `<pc-sounds>` elements. The SoundComponentElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class SoundComponentElement extends ComponentElement {
+        /** @ignore */
         constructor() {
             super('sound');
             this._distanceModel = 'linear';
@@ -2938,7 +3403,9 @@
     customElements.define('pc-sounds', SoundComponentElement);
 
     /**
-     * Represents a sound slot in the PlayCanvas engine.
+     * The SoundSlotElement interface provides properties and methods for manipulating
+     * `<pc-sound>` elements. The SoundSlotElement interface also inherits the properties and
+     * methods of the {@link AsyncElement} interface.
      */
     class SoundSlotElement extends AsyncElement {
         constructor() {
@@ -3179,7 +3646,9 @@
     customElements.define('pc-sound', SoundSlotElement);
 
     /**
-     * Represents a model in the PlayCanvas engine.
+     * The ModelElement interface provides properties and methods for manipulating
+     * `<pc-model>` elements. The ModelElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      */
     class ModelElement extends AsyncElement {
         constructor() {
@@ -3272,7 +3741,9 @@
     customElements.define('pc-model', ModelElement);
 
     /**
-     * Represents a scene in the PlayCanvas engine.
+     * The SceneElement interface provides properties and methods for manipulating
+     * `<pc-scene>` elements. The SceneElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      */
     class SceneElement extends AsyncElement {
         constructor() {
@@ -3311,11 +3782,11 @@
         }
         updateSceneSettings() {
             if (this.scene) {
-                this.scene.rendering.fog = this._fog;
-                this.scene.rendering.fogColor = this._fogColor;
-                this.scene.rendering.fogDensity = this._fogDensity;
-                this.scene.rendering.fogStart = this._fogStart;
-                this.scene.rendering.fogEnd = this._fogEnd;
+                this.scene.fog.type = this._fog;
+                this.scene.fog.color = this._fogColor;
+                this.scene.fog.density = this._fogDensity;
+                this.scene.fog.start = this._fogStart;
+                this.scene.fog.end = this._fogEnd;
                 // ... set other properties on the scene as well
             }
         }
@@ -3326,7 +3797,7 @@
         set fog(value) {
             this._fog = value;
             if (this.scene) {
-                this.scene.rendering.fog = value;
+                this.scene.fog.type = value;
             }
         }
         /**
@@ -3343,7 +3814,7 @@
         set fogColor(value) {
             this._fogColor = value;
             if (this.scene) {
-                this.scene.rendering.fogColor = value;
+                this.scene.fog.color = value;
             }
         }
         /**
@@ -3360,7 +3831,7 @@
         set fogDensity(value) {
             this._fogDensity = value;
             if (this.scene) {
-                this.scene.rendering.fogDensity = value;
+                this.scene.fog.density = value;
             }
         }
         /**
@@ -3377,7 +3848,7 @@
         set fogStart(value) {
             this._fogStart = value;
             if (this.scene) {
-                this.scene.rendering.fogStart = value;
+                this.scene.fog.start = value;
             }
         }
         /**
@@ -3394,7 +3865,7 @@
         set fogEnd(value) {
             this._fogEnd = value;
             if (this.scene) {
-                this.scene.rendering.fogEnd = value;
+                this.scene.fog.end = value;
             }
         }
         /**
@@ -3431,7 +3902,9 @@
     customElements.define('pc-scene', SceneElement);
 
     /**
-     * Represents a sky in the PlayCanvas engine.
+     * The SkyElement interface provides properties and methods for manipulating
+     * `<pc-sky>` elements. The SkyElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      */
     class SkyElement extends AsyncElement {
         constructor() {