@playcanvas/web-components 0.1.8 → 0.1.10

package/src/app.ts

@@ -1,7 +1,8 @@
-import { Application, FILLMODE_FILL_WINDOW, Keyboard, Mouse, RESOLUTION_AUTO } from 'playcanvas';
+import { Application, CameraComponent, FILLMODE_FILL_WINDOW, Keyboard, Mouse, Picker, RESOLUTION_AUTO } from 'playcanvas';
 
 import { AssetElement } from './asset';
 import { AsyncElement } from './async-element';
+import { EntityElement } from './entity';
 import { MaterialElement } from './material';
 import { ModuleElement } from './module';
 
@@ -24,13 +25,35 @@ class AppElement extends AsyncElement {
 
     private _highResolution = false;
 
+    private _hierarchyReady = false;
+
+    private _picker: Picker | null = null;
+
+    private _hasPointerListeners: { [key: string]: boolean } = {
+        pointerenter: false,
+        pointerleave: false,
+        pointerdown: false,
+        pointerup: false,
+        pointermove: false
+    };
+
+    private _hoveredEntity: EntityElement | null = null;
+
+    private _pointerHandlers: { [key: string]: EventListener | null } = {
+        pointermove: null,
+        pointerdown: null,
+        pointerup: null
+    };
+
     /**
      * The PlayCanvas application instance.
      */
     app: Application | null = null;
 
     /**
-     * Creates a new AppElement.
+     * Creates a new AppElement instance.
+     *
+     * @ignore
      */
     constructor() {
         super();
@@ -66,6 +89,8 @@ class AppElement extends AsyncElement {
         this.app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
         this.app.setCanvasResolution(RESOLUTION_AUTO);
 
+        this._pickerCreate();
+
         // Get all pc-asset elements that are direct children of the pc-app element
         const assetElements = this.querySelectorAll<AssetElement>(':scope > pc-asset');
         Array.from(assetElements).forEach((assetElement) => {
@@ -82,6 +107,19 @@ class AppElement extends AsyncElement {
             materialElement.createMaterial();
         });
 
+        // Create all entities
+        const entityElements = this.querySelectorAll<EntityElement>('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
@@ -95,6 +133,8 @@ class AppElement extends AsyncElement {
     }
 
     disconnectedCallback() {
+        this._pickerDestroy();
+
         // Clean up the application
         if (this.app) {
             this.app.destroy();
@@ -117,6 +157,163 @@ class AppElement extends AsyncElement {
         }
     }
 
+    _pickerCreate() {
+        const { width, height } = this.app!.graphicsDevice;
+        this._picker = new Picker(this.app!, width, height);
+
+        // Create bound handlers but don't attach them yet
+        this._pointerHandlers.pointermove = this._onPointerMove.bind(this) as EventListener;
+        this._pointerHandlers.pointerdown = this._onPointerDown.bind(this) as EventListener;
+        this._pointerHandlers.pointerup = this._onPointerUp.bind(this) as EventListener;
+
+        // 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: PointerEvent) {
+        if (!this._picker || !this.app) return;
+
+        const camera = this.app!.root.findComponent('camera') as CameraComponent;
+        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}"]`) as EntityElement;
+                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: PointerEvent) {
+        if (!this._picker || !this.app) return;
+
+        const camera = this.app!.root.findComponent('camera') as CameraComponent;
+        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}"]`) as EntityElement;
+                if (entityElement && entityElement.hasListeners('pointerdown')) {
+                    entityElement.dispatchEvent(new PointerEvent('pointerdown', event));
+                    break;
+                }
+                node = node.parent;
+            }
+        }
+    }
+
+    _onPointerUp(event: PointerEvent) {
+        if (!this._picker || !this.app) return;
+
+        const camera = this.app!.root.findComponent('camera') as CameraComponent;
+        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}"]`) as EntityElement;
+            if (entityElement && entityElement.hasListeners('pointerup')) {
+                entityElement.dispatchEvent(new PointerEvent('pointerup', event));
+            }
+        }
+    }
+
+    _onPointerListenerAdded(type: string) {
+        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: string) {
+        const hasListeners = Array.from(this.querySelectorAll<EntityElement>('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.
@@ -165,6 +362,15 @@ class AppElement extends AsyncElement {
         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.

package/src/asset.ts

@@ -21,7 +21,9 @@ const extToType = new Map([
 ]);
 
 /**
- * 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 {
     private _preload: boolean = false;

package/src/async-element.ts

@@ -2,13 +2,14 @@ import { AppElement } from './app';
 import { EntityElement } from './entity';
 
 /**
- * Base class for all PlayCanvas web components that initialize asynchronously.
+ * Base class for all PlayCanvas Web Components that initialize asynchronously.
  */
 class AsyncElement extends HTMLElement {
     private _readyPromise: Promise<void>;
 
     private _readyResolve!: () => void;
 
+    /** @ignore */
     constructor() {
         super();
         this._readyPromise = new Promise<void>((resolve) => {

package/src/components/camera-component.ts

@@ -1,10 +1,22 @@
-import { PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, CameraComponent, Color, Vec4, XRTYPE_VR } from 'playcanvas';
+import { CameraComponent, Color, Vec4, GAMMA_NONE, GAMMA_SRGB, PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, TONEMAP_LINEAR, TONEMAP_FILMIC, TONEMAP_NEUTRAL, TONEMAP_ACES2, TONEMAP_ACES, TONEMAP_HEJL, TONEMAP_NONE, XRTYPE_VR } from 'playcanvas';
 
 import { ComponentElement } from './component';
 import { parseColor, parseVec4 } from '../utils';
 
+const tonemaps = new Map([
+    ['none', TONEMAP_NONE],
+    ['linear', TONEMAP_LINEAR],
+    ['filmic', TONEMAP_FILMIC],
+    ['hejl', TONEMAP_HEJL],
+    ['aces', TONEMAP_ACES],
+    ['aces2', TONEMAP_ACES2],
+    ['neutral', 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
  */
@@ -27,6 +39,8 @@ class CameraComponentElement extends ComponentElement {
 
     private _frustumCulling = true;
 
+    private _gamma: 'none' | 'srgb' = 'srgb';
+
     private _nearClip = 0.1;
 
     private _orthographic = false;
@@ -39,9 +53,9 @@ class CameraComponentElement extends ComponentElement {
 
     private _scissorRect = new Vec4(0, 0, 1, 1);
 
-    /**
-     * Creates a new CameraComponentElement.
-     */
+    private _tonemap: 'none' | 'linear' | 'filmic' | 'hejl' | 'aces' | 'aces2' | 'neutral' = 'none';
+
+    /** @ignore */
     constructor() {
         super('camera');
     }
@@ -57,12 +71,14 @@ class CameraComponentElement extends ComponentElement {
             flipFaces: this._flipFaces,
             fov: this._fov,
             frustumCulling: this._frustumCulling,
+            gammaCorrection: this._gamma === 'srgb' ? GAMMA_SRGB : 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)
         };
     }
 
@@ -266,6 +282,25 @@ class CameraComponentElement extends ComponentElement {
         return this._frustumCulling;
     }
 
+    /**
+     * Sets the gamma correction of the camera.
+     * @param value - The gamma correction.
+     */
+    set gamma(value: 'none' | 'srgb') {
+        this._gamma = value;
+        if (this.component) {
+            this.component.gammaCorrection = value === 'srgb' ? GAMMA_SRGB : GAMMA_NONE;
+        }
+    }
+
+    /**
+     * Gets the gamma correction of the camera.
+     * @returns The gamma correction.
+     */
+    get gamma(): 'none' | 'srgb' {
+        return this._gamma;
+    }
+
     /**
      * Sets the near clip distance of the camera.
      * @param value - The near clip distance.
@@ -380,6 +415,25 @@ class CameraComponentElement extends ComponentElement {
         return this._scissorRect;
     }
 
+    /**
+     * Sets the tone mapping of the camera.
+     * @param value - The tone mapping.
+     */
+    set tonemap(value: 'none' | 'linear' | 'filmic' | 'hejl' | 'aces' | 'aces2' | 'neutral') {
+        this._tonemap = value;
+        if (this.component) {
+            this.component.toneMapping = tonemaps.get(value) ?? TONEMAP_NONE;
+        }
+    }
+
+    /**
+     * Gets the tone mapping of the camera.
+     * @returns The tone mapping.
+     */
+    get tonemap(): 'none' | 'linear' | 'filmic' | 'hejl' | 'aces' | 'aces2' | 'neutral' {
+        return this._tonemap;
+    }
+
     static get observedAttributes() {
         return [
             ...super.observedAttributes,
@@ -392,12 +446,14 @@ class CameraComponentElement extends ComponentElement {
             'flip-faces',
             'fov',
             'frustum-culling',
+            'gamma',
             'near-clip',
             'orthographic',
             'ortho-height',
             'priority',
             'rect',
-            'scissor-rect'
+            'scissor-rect',
+            'tonemap'
         ];
     }
 
@@ -432,6 +488,9 @@ class CameraComponentElement extends ComponentElement {
             case 'frustum-culling':
                 this.frustumCulling = newValue !== 'false';
                 break;
+            case 'gamma':
+                this.gamma = newValue as 'none' | 'srgb';
+                break;
             case 'near-clip':
                 this.nearClip = parseFloat(newValue);
                 break;
@@ -450,6 +509,9 @@ class CameraComponentElement extends ComponentElement {
             case 'scissor-rect':
                 this.scissorRect = parseVec4(newValue);
                 break;
+            case 'tonemap':
+                this.tonemap = newValue as 'none' | 'linear' | 'filmic' | 'hejl' | 'aces' | 'aces2' | 'neutral';
+                break;
         }
     }
 }

package/src/components/collision-component.ts

@@ -4,7 +4,9 @@ import { ComponentElement } from './component';
 import { parseQuat, parseVec3 } from '../utils';
 
 /**
- * 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
  */
@@ -25,9 +27,7 @@ class CollisionComponentElement extends ComponentElement {
 
     private _type: string = 'box';
 
-    /**
-     * Creates a new CollisionComponentElement.
-     */
+    /** @ignore */
     constructor() {
         super('collision');
     }

package/src/components/component.ts

@@ -15,8 +15,10 @@ class ComponentElement extends AsyncElement {
     private _component: Component | null = null;
 
     /**
-     * Constructor for the ComponentElement.
+     * Creates a new ComponentElement instance.
+     *
      * @param componentName - The name of the component.
+     * @ignore
      */
     constructor(componentName: string) {
         super();

package/src/components/element-component.ts

@@ -4,9 +4,10 @@ import { AssetElement } from '../asset';
 import { ComponentElement } from './component';
 import { parseColor, parseVec2, parseVec4 } from '../utils';
 
-
 /**
- * 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
  */
@@ -33,6 +34,7 @@ class ElementComponentElement extends ComponentElement {
 
     private _wrapLines: boolean = false;
 
+    /** @ignore */
     constructor() {
         super('element');
     }

package/src/components/gsplat-component.ts

@@ -4,13 +4,16 @@ import { ComponentElement } from './component';
 import { AssetElement } from '../asset';
 
 /**
- * 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 {
     private _asset: string = '';
 
+    /** @ignore */
     constructor() {
         super('gsplat');
     }

package/src/components/light-component.ts

@@ -1,10 +1,24 @@
-import { Color, LightComponent } from 'playcanvas';
+import { Color, LightComponent, SHADOW_PCF1_16F, SHADOW_PCF1_32F, SHADOW_PCF3_16F, SHADOW_PCF3_32F, SHADOW_PCF5_16F, SHADOW_PCF5_32F, SHADOW_PCSS_32F, SHADOW_VSM_16F, SHADOW_VSM_32F } from 'playcanvas';
 
 import { ComponentElement } from './component';
 import { parseColor } from '../utils';
 
+const shadowTypes = new Map([
+    ['pcf1-16f', SHADOW_PCF1_16F],
+    ['pcf1-32f', SHADOW_PCF1_32F],
+    ['pcf3-16f', SHADOW_PCF3_16F],
+    ['pcf3-32f', SHADOW_PCF3_32F],
+    ['pcf5-16f', SHADOW_PCF5_16F],
+    ['pcf5-32f', SHADOW_PCF5_32F],
+    ['vsm-16f', SHADOW_VSM_16F],
+    ['vsm-32f', SHADOW_VSM_32F],
+    ['pcss-32f', 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
  */
@@ -27,13 +41,17 @@ class LightComponentElement extends ComponentElement {
 
     private _shadowDistance = 16;
 
+    private _shadowIntensity = 1;
+
     private _shadowResolution = 1024;
 
+    private _shadowType: 'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f' = 'pcf3-32f';
+
     private _type = 'directional';
 
-    /**
-     * Creates a new LightComponentElement.
-     */
+    private _vsmBias = 0.01;
+
+    /** @ignore */
     constructor() {
         super('light');
     }
@@ -49,8 +67,11 @@ class LightComponentElement extends ComponentElement {
             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
         };
     }
 
@@ -233,6 +254,25 @@ class LightComponentElement extends ComponentElement {
         return this._shadowDistance;
     }
 
+    /**
+     * Sets the shadow intensity of the light.
+     * @param value - The shadow intensity.
+     */
+    set shadowIntensity(value: number) {
+        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.
@@ -252,6 +292,35 @@ class LightComponentElement extends ComponentElement {
         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: 'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f') {
+        this._shadowType = value;
+        if (this.component) {
+            this.component.shadowType = shadowTypes.get(value) ?? 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.
@@ -276,6 +345,25 @@ class LightComponentElement extends ComponentElement {
         return this._type;
     }
 
+    /**
+     * Sets the VSM bias of the light.
+     * @param value - The VSM bias.
+     */
+    set vsmBias(value: number) {
+        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,
@@ -288,8 +376,11 @@ class LightComponentElement extends ComponentElement {
             'range',
             'shadow-bias',
             'shadow-distance',
+            'shadow-intensity',
             'shadow-resolution',
-            'type'
+            'shadow-type',
+            'type',
+            'vsm-bias'
         ];
     }
 
@@ -327,9 +418,18 @@ class LightComponentElement extends ComponentElement {
             case 'shadow-resolution':
                 this.shadowResolution = Number(newValue);
                 break;
+            case 'shadow-intensity':
+                this.shadowIntensity = Number(newValue);
+                break;
+            case 'shadow-type':
+                this.shadowType = newValue as 'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f';
+                break;
             case 'type':
                 this.type = newValue;
                 break;
+            case 'vsm-bias':
+                this.vsmBias = Number(newValue);
+                break;
         }
     }
 }