@playcanvas/web-components 0.2.5 → 0.2.7

package/dist/pwc.cjs

@@ -40,7 +40,7 @@ class AsyncElement extends HTMLElement {
 
 /**
  * The ModuleElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-module/ | `<pc-module>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-module/ | `<pc-module>`} elements.
  * The ModuleElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  */
@@ -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());
             });
@@ -81,7 +74,7 @@ customElements.define('pc-module', ModuleElement);
 
 /**
  * The AppElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-app/ | `<pc-app>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-app/ | `<pc-app>`} elements.
  * The AppElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  */
@@ -98,6 +91,7 @@ class AppElement extends AsyncElement {
          */
         this._canvas = null;
         this._alpha = true;
+        this._backend = 'webgl2';
         this._antialias = true;
         this._depth = true;
         this._stencil = true;
@@ -132,18 +126,84 @@ class AppElement extends AsyncElement {
         // Create and append the canvas to the element
         this._canvas = document.createElement('canvas');
         this.appendChild(this._canvas);
-        // Initialize the PlayCanvas application
-        this.app = new playcanvas.Application(this._canvas, {
-            graphicsDeviceOptions: {
-                alpha: this._alpha,
-                antialias: this._antialias,
-                depth: this._depth,
-                stencil: this._stencil
-            },
-            keyboard: new playcanvas.Keyboard(window),
-            mouse: new playcanvas.Mouse(this._canvas)
+        // Configure device types based on backend selection
+        const backendToDeviceTypes = {
+            webgpu: ['webgpu', 'webgl2'], // fallback to webgl2 if webgpu not available
+            webgl2: ['webgl2'],
+            null: ['null']
+        };
+        const deviceTypes = backendToDeviceTypes[this._backend] || [];
+        const device = await playcanvas.createGraphicsDevice(this._canvas, {
+            // @ts-ignore - alpha needs to be documented
+            alpha: this._alpha,
+            antialias: this._antialias,
+            depth: this._depth,
+            deviceTypes: deviceTypes,
+            stencil: this._stencil
         });
-        this.app.graphicsDevice.maxPixelRatio = this._highResolution ? window.devicePixelRatio : 1;
+        device.maxPixelRatio = this._highResolution ? window.devicePixelRatio : 1;
+        const createOptions = new playcanvas.AppOptions();
+        createOptions.graphicsDevice = device;
+        createOptions.keyboard = new playcanvas.Keyboard(window);
+        createOptions.mouse = new playcanvas.Mouse(this._canvas);
+        createOptions.componentSystems = [
+            playcanvas.AnimComponentSystem,
+            playcanvas.AnimationComponentSystem,
+            playcanvas.AudioListenerComponentSystem,
+            playcanvas.ButtonComponentSystem,
+            playcanvas.CameraComponentSystem,
+            playcanvas.CollisionComponentSystem,
+            playcanvas.ElementComponentSystem,
+            playcanvas.GSplatComponentSystem,
+            playcanvas.JointComponentSystem,
+            playcanvas.LayoutChildComponentSystem,
+            playcanvas.LayoutGroupComponentSystem,
+            playcanvas.LightComponentSystem,
+            playcanvas.ModelComponentSystem,
+            playcanvas.ParticleSystemComponentSystem,
+            playcanvas.RenderComponentSystem,
+            playcanvas.RigidBodyComponentSystem,
+            playcanvas.ScreenComponentSystem,
+            playcanvas.ScriptComponentSystem,
+            playcanvas.ScrollbarComponentSystem,
+            playcanvas.ScrollViewComponentSystem,
+            playcanvas.SoundComponentSystem,
+            playcanvas.SpriteComponentSystem,
+            playcanvas.ZoneComponentSystem
+        ];
+        createOptions.resourceHandlers = [
+            playcanvas.AnimClipHandler,
+            playcanvas.AnimationHandler,
+            playcanvas.AnimStateGraphHandler,
+            playcanvas.AudioHandler,
+            playcanvas.BinaryHandler,
+            playcanvas.CssHandler,
+            playcanvas.ContainerHandler,
+            playcanvas.CubemapHandler,
+            playcanvas.FolderHandler,
+            playcanvas.FontHandler,
+            playcanvas.GSplatHandler,
+            playcanvas.HierarchyHandler,
+            playcanvas.HtmlHandler,
+            playcanvas.JsonHandler,
+            playcanvas.MaterialHandler,
+            playcanvas.ModelHandler,
+            playcanvas.RenderHandler,
+            playcanvas.ScriptHandler,
+            playcanvas.SceneHandler,
+            playcanvas.ShaderHandler,
+            playcanvas.SpriteHandler,
+            playcanvas.TemplateHandler,
+            playcanvas.TextHandler,
+            playcanvas.TextureAtlasHandler,
+            playcanvas.TextureHandler
+        ];
+        createOptions.soundManager = new playcanvas.SoundManager();
+        createOptions.lightmapper = playcanvas.Lightmapper;
+        createOptions.batchManager = playcanvas.BatchManager;
+        createOptions.xr = playcanvas.XrManager;
+        this.app = new playcanvas.AppBase(this._canvas);
+        this.app.init(createOptions);
         this.app.setCanvasFillMode(playcanvas.FILLMODE_FILL_WINDOW);
         this.app.setCanvasResolution(playcanvas.RESOLUTION_AUTO);
         this._pickerCreate();
@@ -371,6 +431,20 @@ class AppElement extends AsyncElement {
     get antialias() {
         return this._antialias;
     }
+    /**
+     * Sets the graphics backend.
+     * @param value - The graphics backend ('webgpu', 'webgl2', or 'null').
+     */
+    set backend(value) {
+        this._backend = value;
+    }
+    /**
+     * Gets the graphics backend.
+     * @returns The graphics backend.
+     */
+    get backend() {
+        return this._backend;
+    }
     /**
      * Sets the depth flag.
      * @param value - The depth flag.
@@ -426,7 +500,7 @@ class AppElement extends AsyncElement {
         return this._stencil;
     }
     static get observedAttributes() {
-        return ['alpha', 'antialias', 'depth', 'stencil', 'high-resolution'];
+        return ['alpha', 'antialias', 'backend', 'depth', 'stencil', 'high-resolution'];
     }
     attributeChangedCallback(name, _oldValue, newValue) {
         switch (name) {
@@ -436,6 +510,11 @@ class AppElement extends AsyncElement {
             case 'antialias':
                 this.antialias = newValue !== 'false';
                 break;
+            case 'backend':
+                if (newValue === 'webgpu' || newValue === 'webgl2' || newValue === 'null') {
+                    this.backend = newValue;
+                }
+                break;
             case 'depth':
                 this.depth = newValue !== 'false';
                 break;
@@ -665,7 +744,7 @@ const parseVec4 = (value) => {
 
 /**
  * The EntityElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-entity/ | `<pc-entity>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-entity/ | `<pc-entity>`} elements.
  * The EntityElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  */
@@ -1202,7 +1281,7 @@ const processBufferView = (gltfBuffer, buffers, continuation) => {
 };
 /**
  * The AssetElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-asset/ | `<pc-asset>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-asset/ | `<pc-asset>`} elements.
  * The AssetElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  */
@@ -1241,6 +1320,7 @@ class AssetElement extends HTMLElement {
             });
         }
         else {
+            // @ts-ignore
             this.asset = new playcanvas.Asset(id, type, { url: src });
         }
         this.asset.preload = !this._lazy;
@@ -1363,7 +1443,7 @@ class ComponentElement extends AsyncElement {
 
 /**
  * The ListenerComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-listener/ | `<pc-listener>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-listener/ | `<pc-listener>`} elements.
  * The ListenerComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -1395,7 +1475,7 @@ const tonemaps = new Map([
 ]);
 /**
  * The CameraComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-camera/ | `<pc-camera>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-camera/ | `<pc-camera>`} elements.
  * The CameraComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -1876,7 +1956,7 @@ customElements.define('pc-camera', CameraComponentElement);
 
 /**
  * The CollisionComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-collision/ | `<pc-collision>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-collision/ | `<pc-collision>`} elements.
  * The CollisionComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -2023,7 +2103,7 @@ customElements.define('pc-collision', CollisionComponentElement);
 
 /**
  * The ElementComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-element/ | `<pc-element>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-element/ | `<pc-element>`} elements.
  * The ElementComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -2328,7 +2408,7 @@ const shadowTypes = new Map([
 ]);
 /**
  * The LightComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-light/ | `<pc-light>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-light/ | `<pc-light>`} elements.
  * The LightComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -2725,7 +2805,7 @@ customElements.define('pc-light', LightComponentElement);
 
 /**
  * The ParticleSystemComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-particles/ | `<pc-particles>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-particles/ | `<pc-particles>`} elements.
  * The ParticleSystemComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -2857,7 +2937,7 @@ customElements.define('pc-particles', ParticleSystemComponentElement);
 
 /**
  * The MaterialElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-material/ | `<pc-material>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-material/ | `<pc-material>`} elements.
  * The MaterialElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  */
@@ -2974,7 +3054,7 @@ customElements.define('pc-material', MaterialElement);
 
 /**
  * The RenderComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-render/ | `<pc-render>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-render/ | `<pc-render>`} elements.
  * The RenderComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -3097,7 +3177,7 @@ customElements.define('pc-render', RenderComponentElement);
 
 /**
  * The RigidBodyComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-rigidbody/ | `<pc-rigidbody>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-rigidbody/ | `<pc-rigidbody>`} elements.
  * The RigidBodyComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -3285,7 +3365,7 @@ customElements.define('pc-rigidbody', RigidBodyComponentElement);
 
 /**
  * The ScreenComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-screen/ | `<pc-screen>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-screen/ | `<pc-screen>`} elements.
  * The ScreenComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -3412,7 +3492,7 @@ customElements.define('pc-screen', ScreenComponentElement);
 
 /**
  * The ScriptComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-scripts/ | `<pc-scripts>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scripts/ | `<pc-scripts>`} elements.
  * The ScriptComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -3720,7 +3800,7 @@ customElements.define('pc-script', ScriptElement);
 
 /**
  * The SoundComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-sounds/ | `<pc-sounds>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-sounds/ | `<pc-sounds>`} elements.
  * The SoundComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -3954,6 +4034,9 @@ class SoundSlotElement extends AsyncElement {
         }
         this.soundSlot = this.soundElement.component.addSlot(this._name, options);
         this.asset = this._asset;
+        if (this._autoPlay) {
+            this.soundSlot.play();
+        }
         this._onReady();
     }
     disconnectedCallback() {
@@ -4163,7 +4246,7 @@ customElements.define('pc-sound', SoundSlotElement);
 
 /**
  * The SplatComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-splat/ | `<pc-splat>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-splat/ | `<pc-splat>`} elements.
  * The SplatComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
@@ -4174,10 +4257,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
         };
     }
     /**
@@ -4205,8 +4290,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);
@@ -4214,6 +4320,9 @@ class SplatComponentElement extends ComponentElement {
             case 'asset':
                 this.asset = newValue;
                 break;
+            case 'cast-shadows':
+                this.castShadows = this.hasAttribute('cast-shadows');
+                break;
         }
     }
 }
@@ -4221,7 +4330,7 @@ customElements.define('pc-splat', SplatComponentElement);
 
 /**
  * The ModelElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-model/ | `<pc-model>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-model/ | `<pc-model>`} elements.
  * The ModelElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  */
@@ -4317,7 +4426,7 @@ customElements.define('pc-model', ModelElement);
 
 /**
  * The SceneElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-scene/ | `<pc-scene>`} elements.
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scene/ | `<pc-scene>`} elements.
  * The SceneElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  */