@playcanvas/web-components 0.1.9 → 0.1.10

package/src/components/camera-component.ts

@@ -1,8 +1,18 @@
-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]
+]);
+
 /**
  * The CameraComponentElement interface provides properties and methods for manipulating
  * `<pc-camera>` elements. The CameraComponentElement interface also inherits the properties and
@@ -29,6 +39,8 @@ class CameraComponentElement extends ComponentElement {
 
     private _frustumCulling = true;
 
+    private _gamma: 'none' | 'srgb' = 'srgb';
+
     private _nearClip = 0.1;
 
     private _orthographic = false;
@@ -41,6 +53,8 @@ class CameraComponentElement extends ComponentElement {
 
     private _scissorRect = new Vec4(0, 0, 1, 1);
 
+    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/light-component.ts

@@ -1,8 +1,20 @@
-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]
+]);
+
 /**
  * The LightComponentElement interface provides properties and methods for manipulating
  * `<pc-light>` elements. The LightComponentElement interface also inherits the properties and
@@ -29,10 +41,16 @@ 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';
 
+    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;
         }
     }
 }

package/src/components/script-component.ts

@@ -4,10 +4,6 @@ import { ComponentElement } from './component';
 import { ScriptElement } from './script';
 import { AssetElement } from '../asset';
 
-const tmpV2 = new Vec2();
-const tmpV3 = new Vec3();
-const tmpV4 = new Vec4();
-
 // Add these interfaces at the top of the file, after the imports
 interface ScriptAttributesChangeEvent extends CustomEvent {
     detail: { attributes: any };
@@ -76,23 +72,36 @@ class ScriptComponentElement extends ComponentElement {
                     }
                 }
 
-                // Handle vectors
-                if (Array.isArray(value)) {
-                    if (target[key] instanceof 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 Vec2(value[0], value[1]);
                         return;
                     }
-                    if (target[key] instanceof Vec3) {
-                        target[key] = tmpV3.set(value[0], value[1], value[2]);
+                    if (value.length === 3 && typeof value[0] === 'number') {
+                        target[key] = new Vec3(value[0], value[1], value[2]);
                         return;
                     }
-                    if (target[key] instanceof Vec4) {
-                        target[key] = tmpV4.set(value[0], value[1], value[2], value[3]);
+                    if (value.length === 4 && typeof value[0] === 'number') {
+                        target[key] = new 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] = {};

package/src/entity.ts

@@ -39,6 +39,11 @@ class EntityElement extends AsyncElement {
      */
     private _tags: string[] = [];
 
+    /**
+     * The pointer event listeners for the entity.
+     */
+    private _listeners: { [key: string]: EventListener[] } = {};
+
     /**
      * The PlayCanvas entity instance.
      */
@@ -72,6 +77,31 @@ class EntityElement extends AsyncElement {
         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: 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: Application) {
@@ -240,7 +270,19 @@ class EntityElement extends AsyncElement {
     }
 
     static get observedAttributes() {
-        return ['enabled', 'name', 'position', 'rotation', 'scale', 'tags'];
+        return [
+            'enabled',
+            'name',
+            'position',
+            'rotation',
+            'scale',
+            'tags',
+            'onpointerenter',
+            'onpointerleave',
+            'onpointerdown',
+            'onpointerup',
+            'onpointermove'
+        ];
     }
 
     attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
@@ -263,7 +305,52 @@ class EntityElement extends AsyncElement {
             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: 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: string, listener: EventListener, options?: boolean | AddEventListenerOptions) {
+        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: string, listener: EventListener, options?: boolean | EventListenerOptions) {
+        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: string): boolean {
+        return Boolean(this._listeners[type]?.length);
     }
 }
 

package/src/fog.ts

@@ -0,0 +1,121 @@
+import { Color } from 'playcanvas';
+
+import { parseColor } from './utils';
+
+/**
+ * The FogElement interface provides properties and methods for manipulating
+ * `<pc-fog>` elements. The FogElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
+ */
+class FogElement extends HTMLElement {
+    private _color = new Color(0.5, 0.5, 0.5);
+
+    private _density = 0.001;
+
+    private _end = 100;
+
+    private _start = 0;
+
+    private _type: 'linear' | 'exp' | 'exp2' = 'linear';
+
+    private dispatchFogUpdate() {
+        const event = new CustomEvent('fogupdate', {
+            bubbles: true,
+            detail: {
+                color: this._color,
+                density: this._density,
+                end: this._end,
+                start: this._start,
+                type: this._type
+            }
+        });
+        this.dispatchEvent(event);
+    }
+
+    set color(value: Color) {
+        this._color = value;
+        this.dispatchFogUpdate();
+    }
+
+    get color(): Color {
+        return this._color;
+    }
+
+    set density(value: number) {
+        this._density = value;
+        this.dispatchFogUpdate();
+    }
+
+    get density(): number {
+        return this._density;
+    }
+
+    set end(value: number) {
+        this._end = value;
+        this.dispatchFogUpdate();
+    }
+
+    get end(): number {
+        return this._end;
+    }
+
+    set start(value: number) {
+        this._start = value;
+        this.dispatchFogUpdate();
+    }
+
+    get start(): number {
+        return this._start;
+    }
+
+    set type(value: 'linear' | 'exp' | 'exp2') {
+        this._type = value;
+        this.dispatchFogUpdate();
+    }
+
+    get type(): 'linear' | 'exp' | 'exp2' {
+        return this._type;
+    }
+
+    static get observedAttributes() {
+        return [
+            'color',
+            'density',
+            'end',
+            'start',
+            'type'
+        ];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        switch (name) {
+            case 'color':
+                this.color = parseColor(newValue);
+                break;
+            case 'density':
+                this.density = parseFloat(newValue);
+                break;
+            case 'end':
+                this.end = parseFloat(newValue);
+                break;
+            case 'start':
+                this.start = parseFloat(newValue);
+                break;
+            case 'type':
+                if (newValue === 'linear' || newValue === 'exp' || newValue === 'exp2') {
+                    this.type = newValue;
+                }
+                break;
+        }
+    }
+
+    constructor() {
+        super();
+        // Dispatch initial fog state
+        this.dispatchFogUpdate();
+    }
+}
+
+customElements.define('pc-fog', FogElement);
+
+export { FogElement };

package/src/material.ts

@@ -23,8 +23,8 @@ class MaterialElement extends HTMLElement {
 
     createMaterial() {
         this.material = new 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;