@playcanvas/web-components 0.2.6 → 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.
      */
@@ -76,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.
      */
@@ -93,6 +93,7 @@
              */
             this._canvas = null;
             this._alpha = true;
+            this._backend = 'webgl2';
             this._antialias = true;
             this._depth = true;
             this._stencil = true;
@@ -127,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();
@@ -366,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.
@@ -421,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) {
@@ -431,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;
@@ -660,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.
      */
@@ -1197,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.
      */
@@ -1359,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.
      *
@@ -1391,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.
      *
@@ -1872,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.
      *
@@ -2019,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.
      *
@@ -2324,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.
      *
@@ -2721,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.
      *
@@ -2853,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.
      */
@@ -2970,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.
      *
@@ -3093,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.
      *
@@ -3281,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.
      *
@@ -3408,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.
      *
@@ -3716,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.
      *
@@ -3950,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() {
@@ -4159,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.
      *
@@ -4243,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.
      */
@@ -4339,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.
      */