@playcanvas/web-components 0.2.5 → 0.2.7

package/dist/scene.d.ts

@@ -2,7 +2,7 @@ import { Color, Scene, Vec3 } from 'playcanvas';
 import { AsyncElement } from './async-element';
 /**
  * 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.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playcanvas/web-components",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "author": "PlayCanvas <support@playcanvas.com>",
   "homepage": "https://playcanvas.com",
   "description": "Web Components for the PlayCanvas Engine",
@@ -38,27 +38,27 @@
   },
   "devDependencies": {
     "@mediapipe/tasks-vision": "0.10.21",
-    "@playcanvas/eslint-config": "2.0.9",
-    "@rollup/plugin-commonjs": "28.0.3",
+    "@playcanvas/eslint-config": "2.1.0",
+    "@rollup/plugin-commonjs": "28.0.6",
     "@rollup/plugin-node-resolve": "16.0.1",
     "@rollup/plugin-terser": "0.4.4",
-    "@rollup/plugin-typescript": "12.1.2",
+    "@rollup/plugin-typescript": "12.1.3",
     "@tweenjs/tween.js": "25.0.0",
-    "@typescript-eslint/eslint-plugin": "8.28.0",
-    "@typescript-eslint/parser": "8.28.0",
-    "concurrently": "9.1.2",
+    "@typescript-eslint/eslint-plugin": "8.35.0",
+    "@typescript-eslint/parser": "8.35.0",
+    "concurrently": "9.2.0",
     "earcut": "3.0.1",
-    "eslint": "9.23.0",
-    "eslint-import-resolver-typescript": "4.2.2",
-    "globals": "16.0.0",
-    "mp4-muxer": "5.2.0",
+    "eslint": "9.29.0",
+    "eslint-import-resolver-typescript": "4.4.4",
+    "globals": "16.2.0",
+    "mp4-muxer": "5.2.1",
     "opentype.js": "1.3.4",
-    "playcanvas": "2.6.0",
-    "rollup": "4.37.0",
+    "playcanvas": "2.8.2",
+    "rollup": "4.44.0",
     "serve": "14.2.4",
     "tslib": "2.8.1",
-    "typedoc": "0.28.1",
-    "typedoc-plugin-mdn-links": "5.0.1",
-    "typescript": "5.8.2"
+    "typedoc": "0.28.5",
+    "typedoc-plugin-mdn-links": "5.0.2",
+    "typescript": "5.8.3"
   }
 }

package/src/app.ts

@@ -1,4 +1,67 @@
-import { Application, CameraComponent, FILLMODE_FILL_WINDOW, GraphNode, Keyboard, Mouse, Picker, RESOLUTION_AUTO } from 'playcanvas';
+import {
+    AppBase,
+    AppOptions,
+    CameraComponent,
+    createGraphicsDevice,
+    FILLMODE_FILL_WINDOW,
+    GraphNode,
+    Keyboard,
+    Mouse,
+    Picker,
+    RESOLUTION_AUTO,
+    AnimComponentSystem,
+    AnimationComponentSystem,
+    AudioListenerComponentSystem,
+    ButtonComponentSystem,
+    CameraComponentSystem,
+    CollisionComponentSystem,
+    ElementComponentSystem,
+    GSplatComponentSystem,
+    JointComponentSystem,
+    LayoutChildComponentSystem,
+    LayoutGroupComponentSystem,
+    LightComponentSystem,
+    ModelComponentSystem,
+    ParticleSystemComponentSystem,
+    RenderComponentSystem,
+    RigidBodyComponentSystem,
+    ScriptComponentSystem,
+    ScreenComponentSystem,
+    ScrollbarComponentSystem,
+    ScrollViewComponentSystem,
+    SoundComponentSystem,
+    SpriteComponentSystem,
+    ZoneComponentSystem,
+    RenderHandler,
+    AnimationHandler,
+    AnimClipHandler,
+    AnimStateGraphHandler,
+    AudioHandler,
+    BinaryHandler,
+    ContainerHandler,
+    CssHandler,
+    CubemapHandler,
+    FolderHandler,
+    FontHandler,
+    GSplatHandler,
+    HierarchyHandler,
+    HtmlHandler,
+    JsonHandler,
+    MaterialHandler,
+    ModelHandler,
+    SceneHandler,
+    ScriptHandler,
+    ShaderHandler,
+    SpriteHandler,
+    TemplateHandler,
+    TextHandler,
+    TextureHandler,
+    TextureAtlasHandler,
+    BatchManager,
+    SoundManager,
+    Lightmapper,
+    XrManager
+} from 'playcanvas';
 
 import { AssetElement } from './asset';
 import { AsyncElement } from './async-element';
@@ -8,7 +71,7 @@ import { ModuleElement } from './module';
 
 /**
  * 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.
  */
@@ -20,6 +83,8 @@ class AppElement extends AsyncElement {
 
     private _alpha = true;
 
+    private _backend: 'webgpu' | 'webgl2' | 'null' = 'webgl2';
+
     private _antialias = true;
 
     private _depth = true;
@@ -51,7 +116,7 @@ class AppElement extends AsyncElement {
     /**
      * The PlayCanvas application instance.
      */
-    app: Application | null = null;
+    app: AppBase | null = null;
 
     /**
      * Creates a new AppElement instance.
@@ -76,18 +141,87 @@ class AppElement extends AsyncElement {
         this._canvas = document.createElement('canvas');
         this.appendChild(this._canvas);
 
-        // Initialize the PlayCanvas application
-        this.app = new Application(this._canvas, {
-            graphicsDeviceOptions: {
-                alpha: this._alpha,
-                antialias: this._antialias,
-                depth: this._depth,
-                stencil: this._stencil
-            },
-            keyboard: new Keyboard(window),
-            mouse: new Mouse(this._canvas)
+        // Configure device types based on backend selection
+        const backendToDeviceTypes: { [key: string]: string[] } = {
+            webgpu: ['webgpu', 'webgl2'], // fallback to webgl2 if webgpu not available
+            webgl2: ['webgl2'],
+            null: ['null']
+        };
+        const deviceTypes = backendToDeviceTypes[this._backend] || [];
+
+        const device = await 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 AppOptions();
+        createOptions.graphicsDevice = device;
+        createOptions.keyboard = new Keyboard(window);
+        createOptions.mouse = new Mouse(this._canvas);
+        createOptions.componentSystems = [
+            AnimComponentSystem,
+            AnimationComponentSystem,
+            AudioListenerComponentSystem,
+            ButtonComponentSystem,
+            CameraComponentSystem,
+            CollisionComponentSystem,
+            ElementComponentSystem,
+            GSplatComponentSystem,
+            JointComponentSystem,
+            LayoutChildComponentSystem,
+            LayoutGroupComponentSystem,
+            LightComponentSystem,
+            ModelComponentSystem,
+            ParticleSystemComponentSystem,
+            RenderComponentSystem,
+            RigidBodyComponentSystem,
+            ScreenComponentSystem,
+            ScriptComponentSystem,
+            ScrollbarComponentSystem,
+            ScrollViewComponentSystem,
+            SoundComponentSystem,
+            SpriteComponentSystem,
+            ZoneComponentSystem
+        ];
+        createOptions.resourceHandlers = [
+            AnimClipHandler,
+            AnimationHandler,
+            AnimStateGraphHandler,
+            AudioHandler,
+            BinaryHandler,
+            CssHandler,
+            ContainerHandler,
+            CubemapHandler,
+            FolderHandler,
+            FontHandler,
+            GSplatHandler,
+            HierarchyHandler,
+            HtmlHandler,
+            JsonHandler,
+            MaterialHandler,
+            ModelHandler,
+            RenderHandler,
+            ScriptHandler,
+            SceneHandler,
+            ShaderHandler,
+            SpriteHandler,
+            TemplateHandler,
+            TextHandler,
+            TextureAtlasHandler,
+            TextureHandler
+        ];
+        createOptions.soundManager = new SoundManager();
+        createOptions.lightmapper = Lightmapper;
+        createOptions.batchManager = BatchManager;
+        createOptions.xr = XrManager;
+
+        this.app = new AppBase(this._canvas);
+        this.app.init(createOptions);
 
         this.app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
         this.app.setCanvasResolution(RESOLUTION_AUTO);
@@ -360,6 +494,22 @@ class AppElement extends AsyncElement {
         return this._antialias;
     }
 
+    /**
+     * Sets the graphics backend.
+     * @param value - The graphics backend ('webgpu', 'webgl2', or 'null').
+     */
+    set backend(value: 'webgpu' | 'webgl2' | 'null') {
+        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.
@@ -422,7 +572,7 @@ class AppElement extends AsyncElement {
     }
 
     static get observedAttributes() {
-        return ['alpha', 'antialias', 'depth', 'stencil', 'high-resolution'];
+        return ['alpha', 'antialias', 'backend', 'depth', 'stencil', 'high-resolution'];
     }
 
     attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
@@ -433,6 +583,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;

package/src/asset.ts

@@ -63,7 +63,7 @@ const processBufferView = (
 
 /**
  * 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.
  */
@@ -103,6 +103,7 @@ class AssetElement extends HTMLElement {
                 }
             });
         } else {
+            // @ts-ignore
             this.asset = new Asset(id, type, { url: src });
         }
 

package/src/components/camera-component.ts

@@ -15,7 +15,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.
  *

package/src/components/collision-component.ts

@@ -5,7 +5,7 @@ import { parseQuat, parseVec3 } from '../utils';
 
 /**
  * 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.
  *

package/src/components/element-component.ts

@@ -6,7 +6,7 @@ import { parseColor, parseVec2, parseVec4 } from '../utils';
 
 /**
  * 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.
  *

package/src/components/light-component.ts

@@ -17,7 +17,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.
  *

package/src/components/listener-component.ts

@@ -4,7 +4,7 @@ import { ComponentElement } from './component';
 
 /**
  * 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.
  *

package/src/components/particlesystem-component.ts

@@ -5,7 +5,7 @@ import { AssetElement } from '../asset';
 
 /**
  * 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.
  *

package/src/components/render-component.ts

@@ -5,7 +5,7 @@ import { MaterialElement } from '../material';
 
 /**
  * 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.
  *

package/src/components/rigidbody-component.ts

@@ -5,7 +5,7 @@ import { parseVec3 } from '../utils';
 
 /**
  * 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.
  *

package/src/components/screen-component.ts

@@ -5,7 +5,7 @@ import { parseVec2 } from '../utils';
 
 /**
  * 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.
  *

package/src/components/script-component.ts

@@ -24,7 +24,7 @@ declare global {
 
 /**
  * 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.
  *

package/src/components/sound-component.ts

@@ -4,7 +4,7 @@ import { ComponentElement } from './component';
 
 /**
  * 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.
  *

package/src/components/sound-slot.ts

@@ -50,6 +50,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();
     }

package/src/components/splat-component.ts

@@ -5,14 +5,16 @@ import { AssetElement } from '../asset';
 
 /**
  * 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.
  *
  * @category Components
  */
 class SplatComponentElement extends ComponentElement {
-    private _asset: string = '';
+    private _asset = '';
+
+    private _castShadows = false;
 
     /** @ignore */
     constructor() {
@@ -21,7 +23,8 @@ class SplatComponentElement extends ComponentElement {
 
     getInitialComponentData() {
         return {
-            asset: AssetElement.get(this._asset)
+            asset: AssetElement.get(this._asset),
+            castShadows: this._castShadows
         };
     }
 
@@ -53,8 +56,31 @@ class SplatComponentElement extends ComponentElement {
         return this._asset;
     }
 
+    /**
+     * Sets whether the splat casts shadows.
+     * @param value - Whether the splat casts shadows.
+     */
+    set castShadows(value: boolean) {
+        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: string, _oldValue: string, newValue: string) {
@@ -64,6 +90,9 @@ class SplatComponentElement extends ComponentElement {
             case 'asset':
                 this.asset = newValue;
                 break;
+            case 'cast-shadows':
+                this.castShadows = this.hasAttribute('cast-shadows');
+                break;
         }
     }
 }

package/src/entity.ts

@@ -1,11 +1,11 @@
-import { Application, Entity, Vec3 } from 'playcanvas';
+import { AppBase, Entity, Vec3 } from 'playcanvas';
 
 import { AsyncElement } from './async-element';
 import { parseVec3 } from './utils';
 
 /**
  * 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.
  */
@@ -50,7 +50,7 @@ class EntityElement extends AsyncElement {
      */
     entity: Entity | null = null;
 
-    createEntity(app: Application) {
+    createEntity(app: AppBase) {
         // Create a new entity
         this.entity = new Entity(this.getAttribute('name') || this._name, app);
 
@@ -105,7 +105,7 @@ class EntityElement extends AsyncElement {
         });
     }
 
-    buildHierarchy(app: Application) {
+    buildHierarchy(app: AppBase) {
         if (!this.entity) return;
 
         const closestEntity = this.closestEntity;

package/src/material.ts

@@ -5,7 +5,7 @@ import { parseColor } from './utils';
 
 /**
  * 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.
  */

package/src/model.ts

@@ -5,7 +5,7 @@ import { AsyncElement } from './async-element';
 
 /**
  * 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.
  */

package/src/module.ts

@@ -2,7 +2,7 @@ import { basisInitialize, WasmModule } from 'playcanvas';
 
 /**
  * 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.
  */
@@ -17,22 +17,15 @@ class ModuleElement extends HTMLElement {
 
     private async loadModule(): Promise<void> {
         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') {
-            basisInitialize({
-                glueUrl: glue,
-                wasmUrl: wasm,
-                fallbackUrl: fallback
-            });
+            basisInitialize(config);
         } else {
-            WasmModule.setConfig(name, {
-                glueUrl: glue,
-                wasmUrl: wasm,
-                fallbackUrl: fallback
-            });
+            WasmModule.setConfig(name, config);
 
             await new Promise<void>((resolve) => {
                 WasmModule.getInstance(name, () => resolve());

package/src/scene.ts

@@ -6,7 +6,7 @@ import { parseColor, parseVec3 } from './utils';
 
 /**
  * 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.
  */