@wonderlandengine/ar-provider-zappar 1.0.0

package/README.md

@@ -0,0 +1,95 @@
+# Wonderland Engine AR Tracking - Zappar Provider
+
+Implementation of a Zappar-based AR tracking provider for the [Wonderland Engine AR framework](https://www.npmjs.com/package/@wonderlandengine/ar-tracking).
+
+Learn more about Wonderland Engine at [https://wonderlandengine.com](https://wonderlandengine.com).
+
+## Usage
+
+Install this provider into your Wonderland Engine project:
+
+```sh
+npm i --save @wonderlandengine/ar-provider-zappar
+```
+
+For instructions on configuring AR sessions, refer to the
+[repository README](https://github.com/WonderlandEngine/wonderland-ar-tracking#readme).
+
+This package depends on `@zappar/zappar`; make sure your bundler is configured
+to serve the `zcv.wasm` asset as described in the
+[Zappar installation guide](https://docs.zap.works/universal-ar/javascript/getting-started/installation/).
+
+## Supported Tracking Modes
+
+The Zappar provider implements SLAM, face tracking, and image tracking. These
+map to the standard Wonderland Engine components supplied by
+`@wonderlandengine/ar-tracking` (`ARSLAMCamera`, `ARFaceTrackingCamera`, and
+`ARImageTrackingCamera`).
+
+-   Face tracking loads Zappar's default model and mesh. Attachment points that
+    have no exact landmark are approximated to the closest available Zappar
+    landmark.
+
+## Recording a Zappar Sequence (Camera + Motion)
+
+If you want accurate offline replay (especially for SLAM), recording **only** an
+MP4 is usually not enough. Zappar can also record a **sequence** that contains
+camera frames **and** device motion data.
+
+Record on a phone/tablet (where the IMU matches the camera movement), then copy
+the saved file to your desktop for replay.
+
+### Quick Record Script (DevTools Console)
+
+This repo already exposes the current pipeline as `window.ZapparPipeline`.
+
+1. Start your AR session normally.
+2. Open DevTools on the capture device (or use remote debugging).
+3. Paste the following:
+
+```js
+// Start recording (pre-alloc ~20 seconds @ 30fps)
+window.ZapparPipeline.sequenceRecordClear();
+window.ZapparPipeline.sequenceRecordStart(30 * 20);
+
+// When you're done recording, run this to stop + download the sequence:
+window.ZapparPipeline.sequenceRecordStop();
+const data = window.ZapparPipeline.sequenceRecordData(); // Uint8Array
+const blob = new Blob([data], {type: 'application/octet-stream'});
+const a = document.createElement('a');
+a.href = URL.createObjectURL(blob);
+a.download = 'zappar-sequence.bin';
+a.click();
+URL.revokeObjectURL(a.href);
+```
+
+Notes:
+
+-   Sequence recording captures camera + IMU, so it’s best done on a mobile device.
+-   You can replay sequences using Zappar’s `SequenceSource` API (preferred over MP4 replay for correct tracking).
+
+### Registering Image Targets
+
+To use image tracking, register each Zappar `.zpt` target file with the
+provider before the session starts:
+
+```ts
+import {
+    ZapparProvider,
+    ZapparImageTargetOptions,
+} from '@wonderlandengine/ar-provider-zappar';
+import {ARSession} from '@wonderlandengine/ar-tracking';
+
+const session = ARSession.getSessionForEngine(engine);
+const provider = ZapparProvider.registerTrackingProviderWithARSession(session);
+
+const posterTarget: ZapparImageTargetOptions = {
+    name: 'poster',
+    physicalWidthInMeters: 0.25,
+};
+
+await provider.registerImageTarget('/static/targets/poster.zpt', posterTarget);
+```
+
+Once registered, the provider emits image scanning and tracking events via
+`ARImageTrackingCamera`.

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference path="../src/types/global.d.ts" />
+export * from './src/zappar-provider.js';
+export * from './src/world-tracking-mode-zappar.js';
+export * from './src/face-tracking-mode-zappar.js';
+export * from './src/image-tracking-mode-zappar.js';
+export * from './src/slam-anchor-zappar.js';

package/dist/index.js

@@ -0,0 +1,6 @@
+/// <reference path="src/types/global.d.ts" />
+export * from './src/zappar-provider.js';
+export * from './src/world-tracking-mode-zappar.js';
+export * from './src/face-tracking-mode-zappar.js';
+export * from './src/image-tracking-mode-zappar.js';
+export * from './src/slam-anchor-zappar.js';

package/dist/src/face-tracking-mode-zappar.d.ts

@@ -0,0 +1,40 @@
+import { Emitter } from '@wonderlandengine/api';
+import { FaceFoundEvent, FaceLoadingEvent, FaceLostEvent, FaceTrackingMode, TrackingMode } from '@wonderlandengine/ar-tracking';
+export declare class FaceTracking_Zappar extends TrackingMode implements FaceTrackingMode {
+    private _zappar;
+    private _view?;
+    private _faceTracker?;
+    private _faceMesh?;
+    private _resourcesReady;
+    private _resourcesPromise;
+    private readonly _landmarks;
+    private readonly _sharedLandmarks;
+    private readonly _anchorNumericIds;
+    private _nextAnchorId;
+    private readonly _cameraMatrix;
+    private readonly _cameraPosition;
+    private readonly _cameraRotation;
+    private readonly _cameraScale;
+    private readonly _scratchMatrix;
+    private readonly _scratchPosition;
+    private readonly _scratchRotation;
+    private readonly _scratchScale;
+    private _loadingEvent;
+    readonly onFaceScanning: Emitter<[event: FaceLoadingEvent]>;
+    readonly onFaceLoading: Emitter<[event: FaceLoadingEvent]>;
+    readonly onFaceFound: Emitter<[event: FaceFoundEvent]>;
+    readonly onFaceUpdate: Emitter<[event: FaceFoundEvent]>;
+    readonly onFaceLost: Emitter<[event: FaceLostEvent]>;
+    init(): void;
+    startSession(): void;
+    endSession(): void;
+    update(): void;
+    private _prepareResources;
+    private _buildLandmarks;
+    private _buildLoadingEvent;
+    private _handleAnchorVisible;
+    private _handleAnchorNotVisible;
+    private _buildFaceEvent;
+    private _applyCameraPose;
+    private _anchorNumericId;
+}

package/dist/src/face-tracking-mode-zappar.js

@@ -0,0 +1,261 @@
+import { Emitter } from '@wonderlandengine/api';
+import { FaceAttachmentPoint, TrackingMode, } from '@wonderlandengine/ar-tracking';
+import { mat4, quat, vec3 } from 'gl-matrix';
+const AttachmentLandmarkKeys = {
+    [FaceAttachmentPoint.Forehead]: 'NOSE_BRIDGE',
+    [FaceAttachmentPoint.EyeOuterCornerLeft]: 'EYE_LEFT',
+    [FaceAttachmentPoint.EyeOuterCornerRight]: 'EYE_RIGHT',
+    [FaceAttachmentPoint.EyeLeft]: 'EYE_LEFT',
+    [FaceAttachmentPoint.EyeRight]: 'EYE_RIGHT',
+    [FaceAttachmentPoint.EyeBrowCenterLeft]: 'EYEBROW_LEFT',
+    [FaceAttachmentPoint.EyeBrowCenterRight]: 'EYEBROW_RIGHT',
+    [FaceAttachmentPoint.EyeBrowInnerLeft]: 'EYEBROW_LEFT',
+    [FaceAttachmentPoint.EyeBrowInnerRight]: 'EYEBROW_RIGHT',
+    [FaceAttachmentPoint.EyeBrowOuterLeft]: 'EYEBROW_LEFT',
+    [FaceAttachmentPoint.EyeBrowOuterRight]: 'EYEBROW_RIGHT',
+    [FaceAttachmentPoint.EarLeft]: 'EAR_LEFT',
+    [FaceAttachmentPoint.EarRight]: 'EAR_RIGHT',
+    [FaceAttachmentPoint.NoseBridge]: 'NOSE_BRIDGE',
+    [FaceAttachmentPoint.NoseTip]: 'NOSE_TIP',
+    [FaceAttachmentPoint.CheekLeft]: 'EAR_LEFT',
+    [FaceAttachmentPoint.CheekRight]: 'EAR_RIGHT',
+    [FaceAttachmentPoint.Mouth]: 'MOUTH_CENTER',
+    [FaceAttachmentPoint.MouthCornerLeft]: 'MOUTH_CENTER',
+    [FaceAttachmentPoint.MouthCornerRight]: 'MOUTH_CENTER',
+    [FaceAttachmentPoint.UpperLip]: 'LIP_TOP',
+    [FaceAttachmentPoint.LowerLip]: 'LIP_BOTTOM',
+    [FaceAttachmentPoint.Chin]: 'CHIN',
+};
+const AttachmentList = Object.values(FaceAttachmentPoint);
+export class FaceTracking_Zappar extends TrackingMode {
+    _zappar = null;
+    _view;
+    _faceTracker;
+    _faceMesh;
+    _resourcesReady = false;
+    _resourcesPromise = null;
+    _landmarks = new Map();
+    _sharedLandmarks = new Map();
+    _anchorNumericIds = new Map();
+    _nextAnchorId = 0;
+    _cameraMatrix = mat4.create();
+    _cameraPosition = vec3.create();
+    _cameraRotation = quat.create();
+    _cameraScale = vec3.create();
+    _scratchMatrix = mat4.create();
+    _scratchPosition = vec3.create();
+    _scratchRotation = quat.create();
+    _scratchScale = vec3.create();
+    _loadingEvent = null;
+    onFaceScanning = new Emitter();
+    onFaceLoading = new Emitter();
+    onFaceFound = new Emitter();
+    onFaceUpdate = new Emitter();
+    onFaceLost = new Emitter();
+    init() {
+        this._view = this.component.object.getComponent('view') ?? undefined;
+        const input = this.component.object.getComponent('input');
+        if (input) {
+            input.active = false;
+        }
+        if (!this._resourcesPromise) {
+            this._resourcesPromise = this._prepareResources();
+        }
+    }
+    startSession() {
+        void this.provider.startSession();
+    }
+    endSession() {
+        this.provider.endSession();
+    }
+    update() {
+        if (!this._resourcesReady || !this._faceTracker || !this._faceMesh) {
+            return;
+        }
+        const Zappar = this._zappar;
+        if (!Zappar)
+            return;
+        const provider = this.provider;
+        const pipeline = provider.getPipeline();
+        const projectionMatrix = Zappar.projectionMatrixFromCameraModel(pipeline.cameraModel(), this.component.engine.canvas.width, this.component.engine.canvas.height);
+        if (this._view) {
+            this._view.projectionMatrix.set(projectionMatrix);
+        }
+        const cameraPose = pipeline.cameraPoseDefault();
+        this._applyCameraPose(cameraPose);
+        for (const anchor of this._faceTracker.visible) {
+            const event = this._buildFaceEvent(anchor);
+            this.onFaceUpdate.notify(event);
+        }
+    }
+    async _prepareResources() {
+        const provider = this.provider;
+        this._zappar = await provider.ensureZapparNamespace();
+        await provider.ensureFaceResources();
+        if (this._resourcesReady) {
+            return;
+        }
+        this._faceTracker = provider.getFaceTracker();
+        this._faceMesh = provider.getFaceMesh();
+        this._buildLandmarks();
+        this._faceTracker.onVisible.bind(this._handleAnchorVisible);
+        this._faceTracker.onNotVisible.bind(this._handleAnchorNotVisible);
+        this._loadingEvent = this._buildLoadingEvent();
+        if (this._loadingEvent) {
+            this.onFaceScanning.notify(this._loadingEvent);
+            this.onFaceLoading.notify(this._loadingEvent);
+        }
+        this._resourcesReady = true;
+    }
+    _buildLandmarks() {
+        const Zappar = this._zappar;
+        if (!Zappar)
+            return;
+        this._landmarks.clear();
+        this._sharedLandmarks.clear();
+        for (const attachment of AttachmentList) {
+            const key = AttachmentLandmarkKeys[attachment];
+            if (!key) {
+                continue;
+            }
+            const landmarkName = Zappar.FaceLandmarkName[key];
+            if (landmarkName === undefined)
+                continue;
+            let landmark = this._sharedLandmarks.get(landmarkName);
+            if (!landmark) {
+                landmark = new Zappar.FaceLandmark(landmarkName);
+                this._sharedLandmarks.set(landmarkName, landmark);
+            }
+            this._landmarks.set(attachment, landmark);
+        }
+    }
+    _buildLoadingEvent() {
+        if (!this._faceTracker || !this._faceMesh) {
+            return null;
+        }
+        const indicesArray = this._faceMesh.indices;
+        const uvsArray = this._faceMesh.uvs;
+        const verticesArray = this._faceMesh.vertices;
+        const indices = [];
+        for (let i = 0; i < indicesArray.length; i += 3) {
+            indices.push({
+                a: indicesArray[i],
+                b: indicesArray[i + 1],
+                c: indicesArray[i + 2],
+            });
+        }
+        const uvs = [];
+        for (let i = 0; i < uvsArray.length; i += 2) {
+            uvs.push({ u: uvsArray[i], v: uvsArray[i + 1] });
+        }
+        return {
+            maxDetections: this._faceTracker.maxFaces,
+            pointsPerDetection: verticesArray.length / 3,
+            indices: indices,
+            uvs: uvs,
+        };
+    }
+    _handleAnchorVisible = (anchor) => {
+        if (!this._resourcesReady) {
+            return;
+        }
+        const event = this._buildFaceEvent(anchor);
+        this.onFaceFound.notify(event);
+    };
+    _handleAnchorNotVisible = (anchor) => {
+        const id = this._anchorNumericId(anchor.id);
+        this.onFaceLost.notify({ id });
+    };
+    _buildFaceEvent(anchor) {
+        const provider = this.provider;
+        const pipeline = provider.getPipeline();
+        const cameraPose = pipeline.cameraPoseDefault();
+        const anchorPose = anchor.pose(cameraPose, false);
+        mat4.copy(this._scratchMatrix, anchorPose);
+        mat4.getTranslation(this._scratchPosition, this._scratchMatrix);
+        mat4.getRotation(this._scratchRotation, this._scratchMatrix);
+        mat4.getScaling(this._scratchScale, this._scratchMatrix);
+        const scale = (this._scratchScale[0] + this._scratchScale[1] + this._scratchScale[2]) / 3;
+        const anchorPosition = {
+            x: this._scratchPosition[0],
+            y: this._scratchPosition[1],
+            z: this._scratchPosition[2],
+        };
+        this._faceMesh.updateFromFaceAnchor(anchor, false);
+        const verticesArray = this._faceMesh.vertices;
+        const normalsArray = this._faceMesh.normals;
+        const vertices = [];
+        for (let i = 0; i < verticesArray.length; i += 3) {
+            vertices.push({
+                x: verticesArray[i],
+                y: verticesArray[i + 1],
+                z: verticesArray[i + 2],
+            });
+        }
+        const normals = [];
+        for (let i = 0; i < normalsArray.length; i += 3) {
+            normals.push({
+                x: normalsArray[i],
+                y: normalsArray[i + 1],
+                z: normalsArray[i + 2],
+            });
+        }
+        const attachmentPoints = {};
+        for (const attachment of AttachmentList) {
+            const landmark = this._landmarks.get(attachment);
+            if (landmark) {
+                landmark.updateFromFaceAnchor(anchor, false);
+                mat4.copy(this._scratchMatrix, landmark.pose);
+                mat4.getTranslation(this._scratchPosition, this._scratchMatrix);
+                attachmentPoints[attachment] = {
+                    position: {
+                        x: this._scratchPosition[0],
+                        y: this._scratchPosition[1],
+                        z: this._scratchPosition[2],
+                    },
+                };
+            }
+            else {
+                attachmentPoints[attachment] = {
+                    position: { ...anchorPosition },
+                };
+            }
+        }
+        const id = this._anchorNumericId(anchor.id);
+        return {
+            id,
+            vertices: vertices,
+            normals: normals,
+            attachmentPoints: attachmentPoints,
+            transform: {
+                position: { ...anchorPosition },
+                rotation: {
+                    x: this._scratchRotation[0],
+                    y: this._scratchRotation[1],
+                    z: this._scratchRotation[2],
+                    w: this._scratchRotation[3],
+                },
+                scale,
+                scaledWidth: this._scratchScale[0],
+                scaledHeight: this._scratchScale[1],
+                scaledDepth: this._scratchScale[2],
+            },
+        };
+    }
+    _applyCameraPose(matrix) {
+        mat4.copy(this._cameraMatrix, matrix);
+        mat4.getTranslation(this._cameraPosition, this._cameraMatrix);
+        mat4.getRotation(this._cameraRotation, this._cameraMatrix);
+        mat4.getScaling(this._cameraScale, this._cameraMatrix);
+        this.component.object.setPositionWorld(this._cameraPosition);
+        this.component.object.setRotationWorld(this._cameraRotation);
+    }
+    _anchorNumericId(anchorId) {
+        let id = this._anchorNumericIds.get(anchorId);
+        if (id === undefined) {
+            id = this._nextAnchorId++;
+            this._anchorNumericIds.set(anchorId, id);
+        }
+        return id;
+    }
+}

package/dist/src/image-tracking-mode-zappar.d.ts

@@ -0,0 +1,35 @@
+import { Emitter } from '@wonderlandengine/api';
+import { ImageScanningEvent, ImageTrackedEvent, ImageTrackingMode, TrackingMode } from '@wonderlandengine/ar-tracking';
+export declare class ImageTracking_Zappar extends TrackingMode implements ImageTrackingMode {
+    private _zappar;
+    private _view?;
+    private _imageTracker?;
+    private _resourcesReady;
+    private _resourcesPromise;
+    private _targetsSubscriptionAdded;
+    private readonly _cameraMatrix;
+    private readonly _cameraPosition;
+    private readonly _cameraRotation;
+    private readonly _cameraScale;
+    private readonly _scratchMatrix;
+    private readonly _scratchPosition;
+    private readonly _scratchRotation;
+    private readonly _scratchScale;
+    private readonly _lastAnchorEvents;
+    readonly onImageScanning: Emitter<[event: ImageScanningEvent]>;
+    readonly onImageFound: Emitter<[event: ImageTrackedEvent]>;
+    readonly onImageUpdate: Emitter<[event: ImageTrackedEvent]>;
+    readonly onImageLost: Emitter<[event: ImageTrackedEvent]>;
+    init(): void;
+    startSession(): void;
+    endSession(): void;
+    update(): void;
+    private _prepareResources;
+    private _handleTargetsChanged;
+    private _emitScanningEvent;
+    private _handleAnchorVisible;
+    private _handleAnchorNotVisible;
+    private _buildImageEvent;
+    private _guessDescriptor;
+    private _applyCameraPose;
+}

package/dist/src/image-tracking-mode-zappar.js

@@ -0,0 +1,173 @@
+import { Emitter } from '@wonderlandengine/api';
+import { TrackingMode, } from '@wonderlandengine/ar-tracking';
+import { mat4, quat, vec3 } from 'gl-matrix';
+export class ImageTracking_Zappar extends TrackingMode {
+    _zappar = null;
+    _view;
+    _imageTracker;
+    _resourcesReady = false;
+    _resourcesPromise = null;
+    _targetsSubscriptionAdded = false;
+    _cameraMatrix = mat4.create();
+    _cameraPosition = vec3.create();
+    _cameraRotation = quat.create();
+    _cameraScale = vec3.create();
+    _scratchMatrix = mat4.create();
+    _scratchPosition = vec3.create();
+    _scratchRotation = quat.create();
+    _scratchScale = vec3.create();
+    _lastAnchorEvents = new Map();
+    onImageScanning = new Emitter();
+    onImageFound = new Emitter();
+    onImageUpdate = new Emitter();
+    onImageLost = new Emitter();
+    init() {
+        this._view = this.component.object.getComponent('view') ?? undefined;
+        const input = this.component.object.getComponent('input');
+        if (input) {
+            input.active = false;
+        }
+        if (!this._resourcesPromise) {
+            this._resourcesPromise = this._prepareResources();
+        }
+    }
+    startSession() {
+        void this.provider.startSession();
+    }
+    endSession() {
+        this.provider.endSession();
+    }
+    update() {
+        if (!this._resourcesReady || !this._imageTracker) {
+            return;
+        }
+        const Zappar = this._zappar;
+        if (!Zappar)
+            return;
+        const provider = this.provider;
+        const pipeline = provider.getPipeline();
+        const projectionMatrix = Zappar.projectionMatrixFromCameraModel(pipeline.cameraModel(), this.component.engine.canvas.width, this.component.engine.canvas.height);
+        if (this._view) {
+            this._view.projectionMatrix.set(projectionMatrix);
+        }
+        const cameraPose = pipeline.cameraPoseDefault();
+        this._applyCameraPose(cameraPose);
+        for (const anchor of this._imageTracker.visible) {
+            const event = this._buildImageEvent(anchor);
+            this.onImageUpdate.notify(event);
+        }
+    }
+    async _prepareResources() {
+        const provider = this.provider;
+        this._zappar = await provider.ensureZapparNamespace();
+        this._imageTracker = provider.ensureImageTracker();
+        if (!this._targetsSubscriptionAdded) {
+            provider.onImageTargetsChanged.add(this._handleTargetsChanged);
+            this._targetsSubscriptionAdded = true;
+        }
+        this._imageTracker.onVisible.bind(this._handleAnchorVisible);
+        this._imageTracker.onNotVisible.bind(this._handleAnchorNotVisible);
+        this._emitScanningEvent();
+        this._resourcesReady = true;
+    }
+    _handleTargetsChanged = () => {
+        if (!this._resourcesReady) {
+            return;
+        }
+        this._emitScanningEvent();
+    };
+    _emitScanningEvent() {
+        const provider = this.provider;
+        const event = provider.getImageScanningEvent();
+        if (event.imageTargets.length > 0) {
+            this.onImageScanning.notify(event);
+        }
+    }
+    _handleAnchorVisible = (anchor) => {
+        if (!this._resourcesReady) {
+            return;
+        }
+        const event = this._buildImageEvent(anchor);
+        this.onImageFound.notify(event);
+    };
+    _handleAnchorNotVisible = (anchor) => {
+        const last = this._lastAnchorEvents.get(anchor.id);
+        if (!last) {
+            this.onImageLost.notify({
+                name: anchor.id,
+                position: { x: 0, y: 0, z: 0 },
+                rotation: { x: 0, y: 0, z: 0, w: 1 },
+                scale: 1,
+                scaleWidth: 1,
+                scaledHeight: 1,
+                type: 'flat',
+            });
+            this._lastAnchorEvents.delete(anchor.id);
+            return;
+        }
+        this.onImageLost.notify(last);
+        this._lastAnchorEvents.delete(anchor.id);
+    };
+    _buildImageEvent(anchor) {
+        const provider = this.provider;
+        const pipeline = provider.getPipeline();
+        const cameraPose = pipeline.cameraPoseDefault();
+        const anchorPose = anchor.pose(cameraPose, false);
+        mat4.copy(this._scratchMatrix, anchorPose);
+        mat4.getTranslation(this._scratchPosition, this._scratchMatrix);
+        mat4.getRotation(this._scratchRotation, this._scratchMatrix);
+        mat4.getScaling(this._scratchScale, this._scratchMatrix);
+        const scale = (this._scratchScale[0] + this._scratchScale[1] + this._scratchScale[2]) / 3;
+        const descriptor = this._guessDescriptor(anchor);
+        const geometry = descriptor?.geometry;
+        const event = {
+            name: descriptor?.name ?? anchor.id,
+            position: {
+                x: this._scratchPosition[0],
+                y: this._scratchPosition[1],
+                z: this._scratchPosition[2],
+            },
+            rotation: {
+                x: this._scratchRotation[0],
+                y: this._scratchRotation[1],
+                z: this._scratchRotation[2],
+                w: this._scratchRotation[3],
+            },
+            scale,
+            scaleWidth: geometry?.scaleWidth ?? scale,
+            scaledHeight: geometry?.scaledHeight ?? scale,
+            type: descriptor?.type ?? 'flat',
+            height: geometry?.height,
+            radiusTop: geometry?.radiusTop,
+            radiusBottom: geometry?.radiusBottom,
+            arcStartRadians: geometry?.arcStartRadians,
+            arcLengthRadians: geometry?.arcLengthRadians,
+        };
+        this._lastAnchorEvents.set(anchor.id, event);
+        return event;
+    }
+    _guessDescriptor(anchor) {
+        const provider = this.provider;
+        const descriptors = provider.getImageTargetDescriptors();
+        if (descriptors.length === 0) {
+            return undefined;
+        }
+        const direct = descriptors.find((descriptor) => descriptor.name === anchor.id);
+        if (direct) {
+            return direct;
+        }
+        const numeric = Number.parseInt(anchor.id, 10);
+        if (!Number.isNaN(numeric) && descriptors[numeric]) {
+            return descriptors[numeric];
+        }
+        return descriptors[0];
+    }
+    _applyCameraPose(matrix) {
+        mat4.copy(this._cameraMatrix, matrix);
+        mat4.getTranslation(this._cameraPosition, this._cameraMatrix);
+        mat4.getRotation(this._cameraRotation, this._cameraMatrix);
+        mat4.getScaling(this._cameraScale, this._cameraMatrix);
+        this.component.object.setPositionWorld(this._cameraPosition);
+        this.component.object.setRotationWorld(this._cameraRotation);
+    }
+}

package/dist/src/slam-anchor-zappar.d.ts

@@ -0,0 +1,16 @@
+import { Component } from '@wonderlandengine/api';
+/**
+ * Applies Zappar Instant World Tracking anchor pose to this object.
+ *
+ * Attach this component to a parent object of your content to verify/visualize
+ * the anchor pose coming from Zappar.
+ */
+export declare class SlamAnchorZappar extends Component {
+    static TypeName: string;
+    private _provider;
+    private readonly _tmpTransform;
+    start(): void;
+    update(): void;
+    private onSessionStart;
+    private onSessionEnd;
+}

package/dist/src/slam-anchor-zappar.js

@@ -0,0 +1,39 @@
+import { Component } from '@wonderlandengine/api';
+import { quat2 } from 'gl-matrix';
+import { ARSession } from '@wonderlandengine/ar-tracking';
+import { ZapparProvider } from './zappar-provider.js';
+/**
+ * Applies Zappar Instant World Tracking anchor pose to this object.
+ *
+ * Attach this component to a parent object of your content to verify/visualize
+ * the anchor pose coming from Zappar.
+ */
+export class SlamAnchorZappar extends Component {
+    static TypeName = 'slam-anchor-zappar';
+    _provider = null;
+    _tmpTransform = quat2.create();
+    start() {
+        const arSession = ARSession.getSessionForEngine(this.engine);
+        arSession.onSessionStart.add(this.onSessionStart);
+        arSession.onSessionEnd.add(this.onSessionEnd);
+        // If a session is already running, RetainEmitter will call immediately.
+    }
+    update() {
+        const provider = this._provider;
+        if (!provider)
+            return;
+        const anchorPose = provider.slamAnchorPoseMatrix;
+        if (!anchorPose)
+            return;
+        // Zappar matrices are column-major; gl-matrix expects column-major.
+        quat2.fromMat4(this._tmpTransform, anchorPose);
+        this.object.setTransformWorld(this._tmpTransform);
+    }
+    onSessionStart = (provider) => {
+        this._provider = provider instanceof ZapparProvider ? provider : null;
+    };
+    onSessionEnd = (provider) => {
+        if (provider === this._provider)
+            this._provider = null;
+    };
+}