@playcanvas/web-components 0.2.2 → 0.2.4

package/src/asset.ts

@@ -1,5 +1,7 @@
 import { Asset } from 'playcanvas';
 
+import { MeshoptDecoder } from '../lib/meshopt_decoder.module.js';
+
 const extToType = new Map([
     ['bin', 'binary'],
     ['css', 'css'],
@@ -20,6 +22,45 @@ const extToType = new Map([
     ['webp', 'texture']
 ]);
 
+
+// provide buffer view callback so we can handle models compressed with MeshOptimizer
+// https://github.com/zeux/meshoptimizer
+const processBufferView = (
+    gltfBuffer: any,
+    buffers: Array<any>,
+    continuation: (err: string, result: any) => void
+) => {
+    if (gltfBuffer.extensions && gltfBuffer.extensions.EXT_meshopt_compression) {
+        const extensionDef = gltfBuffer.extensions.EXT_meshopt_compression;
+
+        Promise.all([MeshoptDecoder.ready, buffers[extensionDef.buffer]]).then((promiseResult) => {
+            const buffer = promiseResult[1];
+
+            const byteOffset = extensionDef.byteOffset || 0;
+            const byteLength = extensionDef.byteLength || 0;
+
+            const count = extensionDef.count;
+            const stride = extensionDef.byteStride;
+
+            const result = new Uint8Array(count * stride);
+            const source = new Uint8Array(buffer.buffer, buffer.byteOffset + byteOffset, byteLength);
+
+            MeshoptDecoder.decodeGltfBuffer(
+                result,
+                count,
+                stride,
+                source,
+                extensionDef.mode,
+                extensionDef.filter
+            );
+
+            continuation(null, result);
+        });
+    } else {
+        continuation(null, null);
+    }
+};
+
 /**
  * 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.
@@ -54,10 +95,21 @@ class AssetElement extends HTMLElement {
             return;
         }
 
-        this.asset = new Asset(id, type, { url: src });
+        if (type === 'container') {
+            this.asset = new Asset(id, type, { url: src }, undefined, {
+                // @ts-ignore TODO no definition in pc
+                bufferView: {
+                    processAsync: processBufferView.bind(this)
+                }
+            });
+        } else {
+            this.asset = new Asset(id, type, { url: src });
+        }
+
         this.asset.preload = !this._lazy;
     }
 
+
     destroyAsset() {
         if (this.asset) {
             this.asset.unload();

package/src/components/particlesystem-component.ts

@@ -0,0 +1,155 @@
+import { ParticleSystemComponent } from 'playcanvas';
+
+import { ComponentElement } from './component';
+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.
+ * The ParticleSystemComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ *
+ * @category Components
+ */
+class ParticleSystemComponentElement extends ComponentElement {
+    private _asset: string = '';
+
+    /** @ignore */
+    constructor() {
+        super('particlesystem');
+    }
+
+    getInitialComponentData() {
+        const asset = AssetElement.get(this._asset);
+        if (!asset) {
+            return {};
+        }
+
+        if ((asset.resource as any).colorMapAsset) {
+            const id = (asset.resource as any).colorMapAsset;
+            const colorMapAsset = AssetElement.get(id)?.id;
+            if (colorMapAsset) {
+                (asset.resource as any).colorMapAsset = colorMapAsset;
+            }
+        }
+
+        return asset.resource;
+    }
+
+    /**
+     * Gets the underlying PlayCanvas particle system component.
+     * @returns The particle system component.
+     */
+    get component(): ParticleSystemComponent | null {
+        return super.component as ParticleSystemComponent | null;
+    }
+
+    private applyConfig(resource: any) {
+        if (!this.component) {
+            return;
+        }
+
+        // Set all the config properties on the component
+        for (const key in resource) {
+            if (resource.hasOwnProperty(key)) {
+                (this.component as any)[key] = resource[key];
+            }
+        }
+    }
+
+    private async _loadAsset() {
+        const appElement = await this.closestApp?.ready();
+        const app = appElement?.app;
+
+        const asset = AssetElement.get(this._asset);
+        if (!asset) {
+            return;
+        }
+
+        if (asset.loaded) {
+            this.applyConfig(asset.resource);
+        } else {
+            asset.once('load', () => {
+                this.applyConfig(asset.resource);
+            });
+            app!.assets.load(asset);
+        }
+    }
+
+    /**
+     * Sets the id of the `pc-asset` to use for the model.
+     * @param value - The asset ID.
+     */
+    set asset(value: string) {
+        this._asset = value;
+        if (this.isConnected) {
+            this._loadAsset();
+        }
+    }
+
+    /**
+     * Gets the id of the `pc-asset` to use for the model.
+     * @returns The asset ID.
+     */
+    get asset(): string {
+        return this._asset;
+    }
+
+    // Control methods
+    /**
+     * Starts playing the particle system
+     */
+    play() {
+        if (this.component) {
+            this.component.play();
+        }
+    }
+
+    /**
+     * Pauses the particle system
+     */
+    pause() {
+        if (this.component) {
+            this.component.pause();
+        }
+    }
+
+    /**
+     * Resets the particle system
+     */
+    reset() {
+        if (this.component) {
+            this.component.reset();
+        }
+    }
+
+    /**
+     * Stops the particle system
+     */
+    stop() {
+        if (this.component) {
+            this.component.stop();
+        }
+    }
+
+    static get observedAttributes() {
+        return [
+            ...super.observedAttributes,
+            'asset'
+        ];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+
+        switch (name) {
+            case 'asset':
+                this.asset = newValue;
+                break;
+        }
+    }
+}
+
+customElements.define('pc-particles', ParticleSystemComponentElement);
+
+export { ParticleSystemComponentElement };

package/src/components/sound-slot.ts

@@ -50,7 +50,6 @@ class SoundSlotElement extends AsyncElement {
 
         this.soundSlot = this.soundElement!.component!.addSlot(this._name, options);
         this.asset = this._asset;
-        this.soundSlot!.play();
 
         this._onReady();
     }
@@ -245,7 +244,7 @@ class SoundSlotElement extends AsyncElement {
     }
 
     static get observedAttributes() {
-        return ['asset', 'autoPlay', 'duration', 'loop', 'name', 'overlap', 'pitch', 'startTime', 'volume'];
+        return ['asset', 'auto-play', 'duration', 'loop', 'name', 'overlap', 'pitch', 'start-time', 'volume'];
     }
 
     attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
@@ -253,6 +252,9 @@ class SoundSlotElement extends AsyncElement {
             case 'asset':
                 this.asset = newValue;
                 break;
+            case 'auto-play':
+                this.autoPlay = this.hasAttribute('auto-play');
+                break;
             case 'duration':
                 this.duration = parseFloat(newValue);
                 break;
@@ -268,7 +270,7 @@ class SoundSlotElement extends AsyncElement {
             case 'pitch':
                 this.pitch = parseFloat(newValue);
                 break;
-            case 'startTime':
+            case 'start-time':
                 this.startTime = parseFloat(newValue);
                 break;
             case 'volume':

package/src/index.ts

@@ -20,8 +20,8 @@ import { CameraComponentElement } from './components/camera-component';
 import { CollisionComponentElement } from './components/collision-component';
 import { ComponentElement } from './components/component';
 import { ElementComponentElement } from './components/element-component';
-import { SplatComponentElement } from './components/splat-component';
 import { LightComponentElement } from './components/light-component';
+import { ParticleSystemComponentElement } from './components/particlesystem-component';
 import { RenderComponentElement } from './components/render-component';
 import { RigidBodyComponentElement } from './components/rigidbody-component';
 import { ScreenComponentElement } from './components/screen-component';
@@ -29,6 +29,7 @@ import { ScriptComponentElement } from './components/script-component';
 import { ScriptElement } from './components/script';
 import { SoundComponentElement } from './components/sound-component';
 import { SoundSlotElement } from './components/sound-slot';
+import { SplatComponentElement } from './components/splat-component';
 import { MaterialElement } from './material';
 import { ModelElement } from './model';
 import { SceneElement } from './scene';
@@ -44,7 +45,7 @@ export {
     CollisionComponentElement,
     ComponentElement,
     ElementComponentElement,
-    SplatComponentElement,
+    ParticleSystemComponentElement,
     LightComponentElement,
     ListenerComponentElement,
     RenderComponentElement,
@@ -54,6 +55,7 @@ export {
     ScriptElement,
     SoundComponentElement,
     SoundSlotElement,
+    SplatComponentElement,
     MaterialElement,
     ModelElement,
     SceneElement,

package/src/sky.ts

@@ -61,6 +61,7 @@ class SkyElement extends AsyncElement {
         this._scene.sky.node.setLocalScale(this._scale);
         this._scene.sky.center = this._center;
         this._scene.skyboxIntensity = this._intensity;
+        this._scene.skyboxMip = this._level;
     }
 
     private async _loadSkybox() {