@playcanvas/web-components 0.2.1 → 0.2.3

package/src/app.ts

@@ -26,7 +26,7 @@ class AppElement extends AsyncElement {
 
     private _stencil = true;
 
-    private _highResolution = false;
+    private _highResolution = true;
 
     private _hierarchyReady = false;
 
@@ -193,21 +193,33 @@ class AppElement extends AsyncElement {
         };
     }
 
+    // New helper to convert CSS coordinates to canvas (picker) coordinates
+    private _getPickerCoordinates(event: PointerEvent): { x: number, y: number } {
+        // Get the canvas' bounding rectangle in CSS pixels.
+        const canvasRect = this._canvas!.getBoundingClientRect();
+        // Compute scale factors based on canvas actual resolution vs. its CSS display size.
+        const scaleX = this._canvas!.width / canvasRect.width;
+        const scaleY = this._canvas!.height / canvasRect.height;
+        // Convert the client coordinates accordingly.
+        const x = (event.clientX - canvasRect.left) * scaleX;
+        const y = (event.clientY - canvasRect.top) * scaleY;
+        return { x, y };
+    }
+
     _onPointerMove(event: PointerEvent) {
         if (!this._picker || !this.app) return;
 
         const camera = this.app!.root.findComponent('camera') as CameraComponent;
         if (!camera) return;
 
-        const canvasRect = this._canvas!.getBoundingClientRect();
-        const x = event.clientX - canvasRect.left;
-        const y = event.clientY - canvasRect.top;
+        // Use the helper to convert event coordinates into canvas/picker coordinates.
+        const { x, y } = this._getPickerCoordinates(event);
 
         this._picker.prepare(camera, this.app!.scene);
         const selection = this._picker.getSelection(x, y);
 
         // Get the currently hovered entity by walking up the hierarchy
-        let newHoverEntity = null;
+        let newHoverEntity: EntityElement | null = null;
         if (selection.length > 0) {
             let currentNode: GraphNode | null = selection[0].node;
             while (currentNode !== null) {
@@ -245,9 +257,8 @@ class AppElement extends AsyncElement {
         const camera = this.app!.root.findComponent('camera') as CameraComponent;
         if (!camera) return;
 
-        const canvasRect = this._canvas!.getBoundingClientRect();
-        const x = event.clientX - canvasRect.left;
-        const y = event.clientY - canvasRect.top;
+        // Convert the event's pointer coordinates
+        const { x, y } = this._getPickerCoordinates(event);
 
         this._picker.prepare(camera, this.app!.scene);
         const selection = this._picker.getSelection(x, y);
@@ -271,9 +282,8 @@ class AppElement extends AsyncElement {
         const camera = this.app!.root.findComponent('camera') as CameraComponent;
         if (!camera) return;
 
-        const canvasRect = this._canvas!.getBoundingClientRect();
-        const x = event.clientX - canvasRect.left;
-        const y = event.clientY - canvasRect.top;
+        // Convert CSS coordinates to picker coordinates
+        const { x, y } = this._getPickerCoordinates(event);
 
         this._picker.prepare(camera, this.app!.scene);
         const selection = this._picker.getSelection(x, y);

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/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/scene.ts

@@ -1,7 +1,8 @@
-import { Color, Scene } from 'playcanvas';
+import { Color, Scene, Vec3 } from 'playcanvas';
 
+import { AppElement } from './app';
 import { AsyncElement } from './async-element';
-import { parseColor } from './utils';
+import { parseColor, parseVec3 } from './utils';
 
 /**
  * The SceneElement interface provides properties and methods for manipulating
@@ -35,6 +36,11 @@ class SceneElement extends AsyncElement {
      */
     private _fogEnd = 1000;
 
+    /**
+     * The gravity of the scene.
+     */
+    private _gravity = new Vec3(0, -9.81, 0);
+
     /**
      * The PlayCanvas scene instance.
      */
@@ -56,7 +62,9 @@ class SceneElement extends AsyncElement {
             this.scene.fog.density = this._fogDensity;
             this.scene.fog.start = this._fogStart;
             this.scene.fog.end = this._fogEnd;
-            // ... set other properties on the scene as well
+
+            const appElement = this.parentElement as AppElement;
+            appElement.app!.systems.rigidbody!.gravity.copy(this._gravity);
         }
     }
 
@@ -155,8 +163,28 @@ class SceneElement extends AsyncElement {
         return this._fogEnd;
     }
 
+    /**
+     * Sets the gravity of the scene.
+     * @param value - The gravity.
+     */
+    set gravity(value: Vec3) {
+        this._gravity = value;
+        if (this.scene) {
+            const appElement = this.parentElement as AppElement;
+            appElement.app!.systems.rigidbody!.gravity.copy(value);
+        }
+    }
+
+    /**
+     * Gets the gravity of the scene.
+     * @returns The gravity.
+     */
+    get gravity() {
+        return this._gravity;
+    }
+
     static get observedAttributes() {
-        return ['fog', 'fog-color', 'fog-density', 'fog-start', 'fog-end'];
+        return ['fog', 'fog-color', 'fog-density', 'fog-start', 'fog-end', 'gravity'];
     }
 
     attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
@@ -176,6 +204,9 @@ class SceneElement extends AsyncElement {
             case 'fog-end':
                 this.fogEnd = parseFloat(newValue);
                 break;
+            case 'gravity':
+                this.gravity = parseVec3(newValue);
+                break;
             // ... handle other attributes as well
         }
     }