@playcanvas/web-components 0.2.5 → 0.2.7

package/dist/pwc.js

@@ -42,7 +42,7 @@
 
     /**
      * 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.
      */
@@ -54,22 +54,15 @@
         }
         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());
                 });
@@ -83,7 +76,7 @@
 
     /**
      * 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.
      */
@@ -100,6 +93,7 @@
              */
             this._canvas = null;
             this._alpha = true;
+            this._backend = 'webgl2';
             this._antialias = true;
             this._depth = true;
             this._stencil = true;
@@ -134,18 +128,84 @@
             // 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();
@@ -373,6 +433,20 @@
         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.
@@ -428,7 +502,7 @@
             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) {
@@ -438,6 +512,11 @@
                 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;
@@ -667,7 +746,7 @@
 
     /**
      * 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.
      */
@@ -1204,7 +1283,7 @@
     };
     /**
      * 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.
      */
@@ -1243,6 +1322,7 @@
                 });
             }
             else {
+                // @ts-ignore
                 this.asset = new playcanvas.Asset(id, type, { url: src });
             }
             this.asset.preload = !this._lazy;
@@ -1365,7 +1445,7 @@
 
     /**
      * 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.
      *
@@ -1397,7 +1477,7 @@
     ]);
     /**
      * 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.
      *
@@ -1878,7 +1958,7 @@
 
     /**
      * 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.
      *
@@ -2025,7 +2105,7 @@
 
     /**
      * 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.
      *
@@ -2330,7 +2410,7 @@
     ]);
     /**
      * 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.
      *
@@ -2727,7 +2807,7 @@
 
     /**
      * 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.
      *
@@ -2859,7 +2939,7 @@
 
     /**
      * 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.
      */
@@ -2976,7 +3056,7 @@
 
     /**
      * 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.
      *
@@ -3099,7 +3179,7 @@
 
     /**
      * 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.
      *
@@ -3287,7 +3367,7 @@
 
     /**
      * 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.
      *
@@ -3414,7 +3494,7 @@
 
     /**
      * 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.
      *
@@ -3722,7 +3802,7 @@
 
     /**
      * 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.
      *
@@ -3956,6 +4036,9 @@
             }
             this.soundSlot = this.soundElement.component.addSlot(this._name, options);
             this.asset = this._asset;
+            if (this._autoPlay) {
+                this.soundSlot.play();
+            }
             this._onReady();
         }
         disconnectedCallback() {
@@ -4165,7 +4248,7 @@
 
     /**
      * 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.
      *
@@ -4176,10 +4259,12 @@
         constructor() {
             super('gsplat');
             this._asset = '';
+            this._castShadows = false;
         }
         getInitialComponentData() {
             return {
-                asset: AssetElement.get(this._asset)
+                asset: AssetElement.get(this._asset),
+                castShadows: this._castShadows
             };
         }
         /**
@@ -4207,8 +4292,29 @@
         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);
@@ -4216,6 +4322,9 @@
                 case 'asset':
                     this.asset = newValue;
                     break;
+                case 'cast-shadows':
+                    this.castShadows = this.hasAttribute('cast-shadows');
+                    break;
             }
         }
     }
@@ -4223,7 +4332,7 @@
 
     /**
      * 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.
      */
@@ -4319,7 +4428,7 @@
 
     /**
      * 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.
      */