@playcanvas/web-components 0.2.4 → 0.2.6

package/README.md

@@ -5,7 +5,7 @@
 [![License](https://img.shields.io/npm/l/@playcanvas/web-components.svg)](https://github.com/playcanvas/web-components/blob/main/LICENSE)
 [![GitHub Actions Build Status](https://github.com/playcanvas/web-components/actions/workflows/deploy.yml/badge.svg)](https://github.com/playcanvas/web-components/actions/workflows/deploy.yml)
 
-| [User Guide](https://developer.playcanvas.com/user-manual/engine/web-components) | [API Reference](https://api.playcanvas.com/modules/EngineWebComponents.html) | [Examples](https://playcanvas.github.io/web-components/examples) | [Blog](https://blog.playcanvas.com/) | [Forum](https://forum.playcanvas.com/) | [Discord](https://discord.gg/RSaMRzg) |
+| [User Guide](https://developer.playcanvas.com/user-manual/engine/web-components) | [API Reference](https://api.playcanvas.com/web-components/) | [Examples](https://playcanvas.github.io/web-components/examples) | [Blog](https://blog.playcanvas.com/) | [Forum](https://forum.playcanvas.com/) | [Discord](https://discord.gg/RSaMRzg) |
 
 PlayCanvas Web Components are a set of custom HTML elements for building 3D interactive web apps. Using the declarative nature of HTML makes it both easy and fun to incorporate 3D into your website. Check out this simple example:
 

package/dist/components/camera-component.d.ts

@@ -39,7 +39,7 @@ declare class CameraComponentElement extends ComponentElement {
         flipFaces: boolean;
         fov: number;
         frustumCulling: boolean;
-        gammaCorrection: number;
+        gammaCorrection: 0 | 1;
         horizontalFov: boolean;
         nearClip: number;
         orthographic: boolean;
@@ -47,7 +47,7 @@ declare class CameraComponentElement extends ComponentElement {
         priority: number;
         rect: Vec4;
         scissorRect: Vec4;
-        toneMapping: number | undefined;
+        toneMapping: 0 | 2 | 1 | 3 | 4 | 5 | 6 | undefined;
     };
     get xrAvailable(): boolean | null | undefined;
     /**

package/dist/components/light-component.d.ts

@@ -23,6 +23,7 @@ declare class LightComponentElement extends ComponentElement {
     private _shadowType;
     private _type;
     private _vsmBias;
+    private _vsmBlurSize;
     /** @ignore */
     constructor();
     getInitialComponentData(): {
@@ -37,9 +38,10 @@ declare class LightComponentElement extends ComponentElement {
         shadowDistance: number;
         shadowIntensity: number;
         shadowResolution: number;
-        shadowType: number | undefined;
+        shadowType: 0 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | undefined;
         type: string;
         vsmBias: number;
+        vsmBlurSize: number;
     };
     /**
      * Gets the underlying PlayCanvas light component.
@@ -196,6 +198,16 @@ declare class LightComponentElement extends ComponentElement {
      * @returns The VSM bias.
      */
     get vsmBias(): number;
+    /**
+     * Sets the VSM blur size of the light. Minimum is 1, maximum is 25. Default is 11.
+     * @param value - The VSM blur size.
+     */
+    set vsmBlurSize(value: number);
+    /**
+     * Gets the VSM blur size of the light.
+     * @returns The VSM blur size.
+     */
+    get vsmBlurSize(): number;
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
 }

package/dist/components/screen-component.d.ts

@@ -22,7 +22,7 @@ declare class ScreenComponentElement extends ComponentElement {
         referenceResolution: Vec2;
         resolution: Vec2;
         scaleBlend: number;
-        scaleMode: string;
+        scaleMode: "none" | "blend";
         screenSpace: boolean;
     };
     /**

package/dist/components/splat-component.d.ts

@@ -10,10 +10,12 @@ import { ComponentElement } from './component';
  */
 declare class SplatComponentElement extends ComponentElement {
     private _asset;
+    private _castShadows;
     /** @ignore */
     constructor();
     getInitialComponentData(): {
         asset: import("playcanvas").Asset | null | undefined;
+        castShadows: boolean;
     };
     /**
      * Gets the underlying PlayCanvas splat component.
@@ -30,6 +32,16 @@ declare class SplatComponentElement extends ComponentElement {
      * @returns The asset ID.
      */
     get asset(): string;
+    /**
+     * Sets whether the splat casts shadows.
+     * @param value - Whether the splat casts shadows.
+     */
+    set castShadows(value: boolean);
+    /**
+     * Gets whether the splat casts shadows.
+     * @returns Whether the splat casts shadows.
+     */
+    get castShadows(): boolean;
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
 }

package/dist/pwc.cjs

@@ -52,22 +52,15 @@ class ModuleElement extends HTMLElement {
     }
     async loadModule() {
         const name = this.getAttribute('name');
-        const glue = this.getAttribute('glue');
-        const wasm = this.getAttribute('wasm');
-        const fallback = this.getAttribute('fallback');
+        const glueUrl = this.getAttribute('glue');
+        const wasmUrl = this.getAttribute('wasm');
+        const fallbackUrl = this.getAttribute('fallback');
+        const config = { glueUrl, wasmUrl, fallbackUrl };
         if (name === 'Basis') {
-            playcanvas.basisInitialize({
-                glueUrl: glue,
-                wasmUrl: wasm,
-                fallbackUrl: fallback
-            });
+            playcanvas.basisInitialize(config);
         }
         else {
-            playcanvas.WasmModule.setConfig(name, {
-                glueUrl: glue,
-                wasmUrl: wasm,
-                fallbackUrl: fallback
-            });
+            playcanvas.WasmModule.setConfig(name, config);
             await new Promise((resolve) => {
                 playcanvas.WasmModule.getInstance(name, () => resolve());
             });
@@ -1241,6 +1234,7 @@ class AssetElement extends HTMLElement {
             });
         }
         else {
+            // @ts-ignore
             this.asset = new playcanvas.Asset(id, type, { url: src });
         }
         this.asset.preload = !this._lazy;
@@ -2352,6 +2346,7 @@ class LightComponentElement extends ComponentElement {
         this._shadowType = 'pcf3-32f';
         this._type = 'directional';
         this._vsmBias = 0.01;
+        this._vsmBlurSize = 11;
     }
     getInitialComponentData() {
         return {
@@ -2368,7 +2363,8 @@ class LightComponentElement extends ComponentElement {
             shadowResolution: this._shadowResolution,
             shadowType: shadowTypes.get(this._shadowType),
             type: this._type,
-            vsmBias: this._vsmBias
+            vsmBias: this._vsmBias,
+            vsmBlurSize: this._vsmBlurSize
         };
     }
     /**
@@ -2631,6 +2627,23 @@ class LightComponentElement extends ComponentElement {
     get vsmBias() {
         return this._vsmBias;
     }
+    /**
+     * Sets the VSM blur size of the light. Minimum is 1, maximum is 25. Default is 11.
+     * @param value - The VSM blur size.
+     */
+    set vsmBlurSize(value) {
+        this._vsmBlurSize = value;
+        if (this.component) {
+            this.component.vsmBlurSize = value;
+        }
+    }
+    /**
+     * Gets the VSM blur size of the light.
+     * @returns The VSM blur size.
+     */
+    get vsmBlurSize() {
+        return this._vsmBlurSize;
+    }
     static get observedAttributes() {
         return [
             ...super.observedAttributes,
@@ -2647,7 +2660,8 @@ class LightComponentElement extends ComponentElement {
             'shadow-resolution',
             'shadow-type',
             'type',
-            'vsm-bias'
+            'vsm-bias',
+            'vsm-blur-size'
         ];
     }
     attributeChangedCallback(name, _oldValue, newValue) {
@@ -2695,6 +2709,9 @@ class LightComponentElement extends ComponentElement {
             case 'vsm-bias':
                 this.vsmBias = Number(newValue);
                 break;
+            case 'vsm-blur-size':
+                this.vsmBlurSize = Number(newValue);
+                break;
         }
     }
 }
@@ -4151,10 +4168,12 @@ class SplatComponentElement extends ComponentElement {
     constructor() {
         super('gsplat');
         this._asset = '';
+        this._castShadows = false;
     }
     getInitialComponentData() {
         return {
-            asset: AssetElement.get(this._asset)
+            asset: AssetElement.get(this._asset),
+            castShadows: this._castShadows
         };
     }
     /**
@@ -4182,8 +4201,29 @@ class SplatComponentElement extends ComponentElement {
     get asset() {
         return this._asset;
     }
+    /**
+     * Sets whether the splat casts shadows.
+     * @param value - Whether the splat casts shadows.
+     */
+    set castShadows(value) {
+        this._castShadows = value;
+        if (this.component) {
+            this.component.castShadows = value;
+        }
+    }
+    /**
+     * Gets whether the splat casts shadows.
+     * @returns Whether the splat casts shadows.
+     */
+    get castShadows() {
+        return this._castShadows;
+    }
     static get observedAttributes() {
-        return [...super.observedAttributes, 'asset'];
+        return [
+            ...super.observedAttributes,
+            'asset',
+            'cast-shadows'
+        ];
     }
     attributeChangedCallback(name, _oldValue, newValue) {
         super.attributeChangedCallback(name, _oldValue, newValue);
@@ -4191,6 +4231,9 @@ class SplatComponentElement extends ComponentElement {
             case 'asset':
                 this.asset = newValue;
                 break;
+            case 'cast-shadows':
+                this.castShadows = this.hasAttribute('cast-shadows');
+                break;
         }
     }
 }