@needle-tools/engine 3.2.15-alpha → 3.3.0-alpha

package/src/engine-components/utils/LookAt.ts

@@ -0,0 +1,21 @@
+import { serializable } from "../../engine/engine_serialization";
+import { Behaviour } from "../Component";
+import { Object3D } from "three";
+import { getWorldPosition, lookAtInverse } from "../../engine/engine_three_utils";
+
+export class LookAt extends Behaviour {
+
+    @serializable(Object3D)
+    target?: Object3D;
+
+    @serializable()
+    invertForward: boolean = false;
+
+    onBeforeRender(): void {
+        if (!this.target) return;
+        if (!this.invertForward)
+            this.gameObject.lookAt(getWorldPosition(this.target!));
+        else
+            lookAtInverse(this.gameObject, getWorldPosition(this.target!));
+    }
+}

package/src/engine-components/webxr/WebXRImageTracking.ts

@@ -1,21 +1,20 @@
 import { WebXR } from "./WebXR";
 import { serializable } from "../../engine/engine_serialization";
-import { Behaviour } from "../Component";
-import { Matrix4, Object3D, Quaternion, Vector, Vector3 } from "three";
+import { Behaviour, GameObject } from "../Component";
+import { Object3D, Quaternion, Vector3 } from "three";
 import { CircularBuffer, getParam } from "../../engine/engine_utils";
+import { AssetReference } from "../../engine/engine_addressables";
 
 // https://github.com/immersive-web/marker-tracking/blob/main/explainer.md
 
 const debug = getParam("debugimagetracking");
 
-const _scaleTemp = new Vector3();
-
 export class WebXRTrackedImage {
 
-
     get url(): string { return this._trackedImage.image ?? ""; }
     get widthInMeters() { return this._trackedImage.widthInMeters ?? undefined; }
     get bitmap(): ImageBitmap { return this._bitmap; }
+    get model(): WebXRImageTrackingModel { return this._trackedImage; }
     readonly measuredSize: number;
     readonly state: "tracked" | "emulated";
 
@@ -64,7 +63,7 @@ export class WebXRTrackedImage {
         }
     }
 
-    private readonly _trackingComponent: WebXRImageTracking;;
+    private readonly _trackingComponent: WebXRImageTracking;
     private readonly _trackedImage: WebXRImageTrackingModel;
     private readonly _bitmap: ImageBitmap;
     private readonly _pose: any;
@@ -90,6 +89,14 @@ export class WebXRImageTrackingModel {
     @serializable()
     widthInMeters!: number;
 
+    @serializable(AssetReference)
+    object?: AssetReference;
+
+    @serializable()
+    createObjectInstance: boolean = false;
+
+    @serializable()
+    imageDoesNotMove: boolean = false;
 }
 
 export class WebXRImageTracking extends Behaviour {
@@ -97,9 +104,6 @@ export class WebXRImageTracking extends Behaviour {
     @serializable(WebXRImageTrackingModel)
     trackedImages!: WebXRImageTrackingModel[];
 
-
-
-
     private readonly trackedImageIndexMap: Map<number, WebXRImageTrackingModel> = new Map();
 
     private static _imageElements: Map<string, ImageBitmap | null> = new Map();
@@ -125,13 +129,16 @@ export class WebXRImageTracking extends Behaviour {
 
     onEnable(): void {
         WebXR.addEventListener("modify-ar-options", this.onModifyAROptions);
+        WebXR.addEventListener("xrStarted", this.onXRStarted);
+        this.addEventListener("image-tracking", this.onImageTrackingUpdate)
     }
 
     onDisable(): void {
         WebXR.removeEventListener("modify-ar-options", this.onModifyAROptions);
+        WebXR.removeEventListener("xrStarted", this.onXRStarted);
+        this.removeEventListener("image-tracking", this.onImageTrackingUpdate)
     }
 
-
     private onModifyAROptions = (event: any) => {
         const options = event.detail;
         const features = options.optionalFeatures || [];
@@ -154,6 +161,74 @@ export class WebXRImageTracking extends Behaviour {
         }
     }
 
+    private imageToObjectMap: Map<WebXRImageTrackingModel, { object: GameObject | null, frames: number }> = new Map();
+
+    private onImageTrackingUpdate = (event: any) => {
+        const images = event.detail as WebXRTrackedImage[];
+
+        // disable any objects that are no longer tracked
+        for (const [model, object] of this.imageToObjectMap) {
+            if (!object.object || !model) continue;
+            let found = false;
+            for (const trackedImage of images) {
+                if (trackedImage.model === model) {
+                    found = true;
+                    break;
+                }
+            }
+            if (!found) {
+                GameObject.setActive(object.object, false);
+            }
+        }
+
+        for (const image of images) {
+            const model = image.model;
+            // don't do anything if we don't have an object to track - can be handled externally through events
+            if (!model.object) continue;
+
+            let trackedData = this.imageToObjectMap.get(model);
+            if (trackedData === undefined) {
+                trackedData = { object: null, frames: 0 };
+                this.imageToObjectMap.set(model, trackedData);
+
+                model.object.loadAssetAsync().then((asset: GameObject | null) => {
+                    if (model.createObjectInstance)
+                        asset = GameObject.instantiate(asset);
+
+                    if (asset) {
+                        trackedData!.object = asset;
+                        if (asset !== this.gameObject)
+                            this.gameObject.add(asset);
+                        image.applyToObject(asset);
+                        if (!asset.activeSelf)
+                            GameObject.setActive(asset, true);
+                    }
+                });
+            }
+            else {
+                trackedData.frames++;
+
+                // TODO we could do a bit more here: e.g. sample for the first 1s or so of getting pose data
+                // to improve the tracking quality a bit.
+                if (model.imageDoesNotMove && trackedData.frames > 10)
+                    continue;
+                
+                if (!trackedData.object) continue;
+                
+                image.applyToObject(trackedData.object);
+                if (!trackedData.object.activeSelf)
+                    GameObject.setActive(trackedData.object, true);
+            }
+        }
+    }
+
+    private onXRStarted = (_: any) => {
+        // clear out all frame counters for tracking
+        for (const trackedData of this.imageToObjectMap.values()) {
+            trackedData.frames = 0;
+        }
+    };
+
     onBeforeRender(frame: XRFrame | null): void {
         //@ts-ignore
         if (frame?.session && typeof frame.getImageTrackingResults === "function") {

package/lib/engine-components/ui/Keyboard.d.ts

@@ -1,31 +0,0 @@
-import { BaseUIComponent } from './BaseUIComponent';
-import { Text } from './Text';
-declare enum KeymapOption {
-    fr = 0,
-    ru = 1,
-    de = 2,
-    es = 3,
-    el = 4,
-    nord = 5,
-    eng = 6
-}
-export declare class Keyboard extends BaseUIComponent {
-    font?: string;
-    text?: Text;
-    keymap?: KeymapOption;
-    padding?: number;
-    margin?: number;
-    fontSize?: number;
-    borderRadius?: number;
-    private colors;
-    awake(): void;
-    onEnable(): void;
-    onDisable(): void;
-    private keyboard;
-    private _lastKeyPressed;
-    private _lastKeyPressedStartTime;
-    private _lastKeyPressedTime;
-    private makeKeyboard;
-    private tryAppend;
-}
-export {};

package/lib/engine-components/ui/Keyboard.js

@@ -1,178 +0,0 @@
-import * as ThreeMeshUI from 'three-mesh-ui';
-import * as THREE from 'three';
-import { BaseUIComponent, includesDir } from './BaseUIComponent';
-import { RectTransform } from './RectTransform';
-import { GameObject } from '../Component';
-var KeymapOption;
-(function (KeymapOption) {
-    KeymapOption[KeymapOption["fr"] = 0] = "fr";
-    KeymapOption[KeymapOption["ru"] = 1] = "ru";
-    KeymapOption[KeymapOption["de"] = 2] = "de";
-    KeymapOption[KeymapOption["es"] = 3] = "es";
-    KeymapOption[KeymapOption["el"] = 4] = "el";
-    KeymapOption[KeymapOption["nord"] = 5] = "nord";
-    KeymapOption[KeymapOption["eng"] = 6] = "eng";
-})(KeymapOption || (KeymapOption = {}));
-// see https://github.com/felixmariotto/three-mesh-ui/blob/master/examples/keyboard.js
-export class Keyboard extends BaseUIComponent {
-    font;
-    text;
-    keymap;
-    padding;
-    margin;
-    fontSize;
-    borderRadius;
-    colors = {
-        keyboardBack: 0x858585,
-        panelBack: 0x262626,
-        button: 0x363636,
-        hovered: 0x1c1c1c,
-        selected: 0x109c5d,
-    };
-    awake() {
-        super.awake();
-        const langKey = KeymapOption[this.keymap || KeymapOption.eng];
-        this.makeKeyboard(langKey);
-    }
-    onEnable() {
-        this.addShadowComponent(this.keyboard);
-    }
-    onDisable() {
-        this.removeShadowComponent();
-    }
-    keyboard = null;
-    _lastKeyPressed;
-    _lastKeyPressedStartTime = 0;
-    _lastKeyPressedTime = 0;
-    makeKeyboard(language) {
-        if (!language && !navigator.language) {
-            language = "en";
-        }
-        const fontName = this.font ? this.font : "arial";
-        const rt = GameObject.getComponent(this.gameObject, RectTransform);
-        if (!rt) {
-            console.error("Missing rect transform, please add this component inside a canvas");
-            return;
-        }
-        const opts = {
-            ...rt.getBasicOptions(),
-            margin: this.margin || 0,
-            padding: this.padding || 0,
-            language: language,
-            fontFamily: includesDir + "/" + fontName + "-msdf.json",
-            fontTexture: includesDir + "/" + fontName + ".png",
-            fontSize: this.fontSize || 6,
-            backgroundColor: new THREE.Color(this.colors.keyboardBack),
-            backspaceTexture: includesDir + '/backspace.png',
-            shiftTexture: includesDir + '/shift.png',
-            enterTexture: includesDir + '/enter.png',
-            borderRadius: this.borderRadius || 0,
-            autoLayout: false,
-        };
-        // const ws = getWorldScale(this.gameObject);
-        const scale = this.gameObject.scale;
-        opts.width *= this.gameObject.scale.x;
-        opts.height *= this.gameObject.scale.y;
-        opts.fontSize *= Math.max(scale.x, scale.y);
-        this.keyboard = new ThreeMeshUI.Keyboard(opts);
-        // const scale = this.gameObject.scale;
-        // const max = Math.max(scale.x, scale.y, scale.z);
-        this.gameObject.scale.set(1, 1, 1);
-        //@ts-ignore
-        this.keyboard.keys.forEach((key) => {
-            key.setupState({
-                state: 'normal',
-                attributes: {
-                    offset: 0.003,
-                    backgroundColor: new THREE.Color(this.colors.button),
-                    backgroundOpacity: 1
-                }
-            });
-            key.setState("normal");
-            key.setupState({
-                state: 'hovered',
-                attributes: {
-                    offset: 0.3,
-                    backgroundColor: new THREE.Color(this.colors.hovered),
-                    backgroundOpacity: 1
-                }
-            });
-            key.setupState({
-                state: 'pressed',
-                attributes: {
-                    offset: 0.1,
-                    backgroundColor: new THREE.Color(this.colors.selected),
-                    backgroundOpacity: 1
-                },
-                // triggered when the user clicked on a keyboard's key
-                onSet: () => {
-                    const input = key.info.input;
-                    const cmd = key.info.command;
-                    if (this._lastKeyPressed !== input) {
-                        this._lastKeyPressedStartTime = this.context.time.time;
-                    }
-                    else if (this.context.time.time - this._lastKeyPressedTime > .05) {
-                        // there was probably a key up inbetween
-                        this._lastKeyPressedStartTime = this.context.time.time;
-                    }
-                    else if (this.context.time.time - this._lastKeyPressedStartTime < .5
-                        || cmd == "switch"
-                        || cmd == "shift"
-                        || cmd == "switch-set") {
-                        this._lastKeyPressedTime = this.context.time.time;
-                        return;
-                    }
-                    this._lastKeyPressedTime = this.context.time.time;
-                    this._lastKeyPressed = input;
-                    // if the key have a command (eg: 'backspace', 'switch', 'enter'...)
-                    // special actions are taken
-                    if (cmd) {
-                        switch (cmd) {
-                            // switch between panels
-                            case 'switch':
-                                //@ts-ignore
-                                this.keyboard.setNextPanel();
-                                break;
-                            // switch between panel charsets (eg: russian/english)
-                            case 'switch-set':
-                                //@ts-ignore
-                                this.keyboard.setNextCharset();
-                                break;
-                            case 'enter':
-                                this.tryAppend('\n');
-                                break;
-                            case 'space':
-                                this.tryAppend(' ');
-                                break;
-                            case 'backspace':
-                                //@ts-ignore
-                                if (!this.text?.text?.length)
-                                    break;
-                                if (this.text?.text)
-                                    this.text.text = this.text.text.substring(0, this.text.text.length - 1) || "";
-                                break;
-                            case 'shift':
-                                //@ts-ignore
-                                this.keyboard.toggleCase();
-                                break;
-                        }
-                        ;
-                        // print a glyph, if any
-                    }
-                    else if (key.info.input !== undefined) {
-                        this.tryAppend(key.info.input);
-                    }
-                    ;
-                }
-            });
-        });
-    }
-    ;
-    tryAppend(char) {
-        if (this.text) {
-            this.text.text += char;
-            this.markDirty();
-        }
-    }
-}
-//# sourceMappingURL=Keyboard.js.map

package/lib/engine-components/ui/Keyboard.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Keyboard.js","sourceRoot":"","sources":["../../../src/engine-components/ui/Keyboard.ts"],"names":[],"mappings":"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"}

package/src/engine-components/ui/Keyboard.ts

@@ -1,204 +0,0 @@
-import * as ThreeMeshUI from 'three-mesh-ui'
-import * as THREE from 'three'
-import { BaseUIComponent, includesDir } from './BaseUIComponent';
-import { Text } from './Text';
-import { getWorldScale } from '../../engine/engine_three_utils';
-import { RectTransform } from './RectTransform';
-import { GameObject } from '../Component';
-
-
-enum KeymapOption {
-    fr,
-    ru,
-    de,
-    es,
-    el,
-    nord,
-    eng
-}
-
-
-// see https://github.com/felixmariotto/three-mesh-ui/blob/master/examples/keyboard.js
-export class Keyboard extends BaseUIComponent {
-
-    font?: string;
-    text?: Text;
-    keymap?: KeymapOption;
-    padding?: number;
-    margin?: number;
-    fontSize?: number;
-    borderRadius?: number;
-
-
-    private colors = {
-        keyboardBack: 0x858585,
-        panelBack: 0x262626,
-        button: 0x363636,
-        hovered: 0x1c1c1c,
-        selected: 0x109c5d,
-    };
-
-
-    awake() {
-        super.awake();
-        const langKey = KeymapOption[this.keymap || KeymapOption.eng];
-        this.makeKeyboard(langKey);
-    }
-    onEnable(): void {
-        this.addShadowComponent(this.keyboard);
-    }
-    onDisable(): void {
-        this.removeShadowComponent();
-    }
-
-    private keyboard: ThreeMeshUI.Keyboard | null = null!;
-    private _lastKeyPressed: any;
-    private _lastKeyPressedStartTime: number = 0;
-    private _lastKeyPressedTime: number = 0;
-
-    private makeKeyboard(language?: string) {
-
-        if (!language && !navigator.language) {
-            language = "en";
-        }
-
-        const fontName = this.font ? this.font : "arial";
-
-        const rt = GameObject.getComponent(this.gameObject, RectTransform);
-        if(!rt){
-            console.error("Missing rect transform, please add this component inside a canvas");
-            return;
-        }
-        const opts = {
-            ...rt.getBasicOptions(),
-            margin: this.margin || 0,
-            padding: this.padding || 0,
-            language: language,
-            fontFamily: includesDir + "/" + fontName + "-msdf.json",
-            fontTexture: includesDir + "/" + fontName + ".png",
-            fontSize: this.fontSize || 6, // fontSize will propagate to the keys blocks
-            backgroundColor: new THREE.Color(this.colors.keyboardBack),
-            backspaceTexture: includesDir + '/backspace.png',
-            shiftTexture: includesDir + '/shift.png',
-            enterTexture: includesDir + '/enter.png',
-            borderRadius: this.borderRadius || 0,
-            autoLayout: false,
-
-        };
-        // const ws = getWorldScale(this.gameObject);
-        const scale = this.gameObject.scale;
-        opts.width *= this.gameObject.scale.x;
-        opts.height *= this.gameObject.scale.y;
-        opts.fontSize *= Math.max(scale.x, scale.y);
-        this.keyboard = new ThreeMeshUI.Keyboard(opts);
-
-        // const scale = this.gameObject.scale;
-        // const max = Math.max(scale.x, scale.y, scale.z);
-        this.gameObject.scale.set(1, 1, 1);
-
-        //@ts-ignore
-        this.keyboard.keys.forEach((key) => {
-
-            key.setupState({
-                state: 'normal',
-                attributes: {
-                    offset: 0.003,
-                    backgroundColor: new THREE.Color(this.colors.button),
-                    backgroundOpacity: 1
-                }
-            });
-            key.setState("normal");
-
-            key.setupState({
-                state: 'hovered',
-                attributes: {
-                    offset: 0.3,
-                    backgroundColor: new THREE.Color(this.colors.hovered),
-                    backgroundOpacity: 1
-                }
-            });
-
-            key.setupState({
-                state: 'pressed',
-                attributes: {
-                    offset: 0.1,
-                    backgroundColor: new THREE.Color(this.colors.selected),
-                    backgroundOpacity: 1
-                },
-                // triggered when the user clicked on a keyboard's key
-                onSet: () => {
-                    const input = key.info.input;
-                    const cmd = key.info.command;
-                    if (this._lastKeyPressed !== input) {
-                        this._lastKeyPressedStartTime = this.context.time.time;
-                    }
-                    else if (this.context.time.time - this._lastKeyPressedTime > .05) {
-                        // there was probably a key up inbetween
-                        this._lastKeyPressedStartTime = this.context.time.time;
-                    }
-                    else if (this.context.time.time - this._lastKeyPressedStartTime < .5
-                        || cmd == "switch"
-                        || cmd == "shift"
-                        || cmd == "switch-set"
-                    ) {
-                        this._lastKeyPressedTime = this.context.time.time;
-                        return;
-                    }
-                    this._lastKeyPressedTime = this.context.time.time;
-                    this._lastKeyPressed = input;
-                    // if the key have a command (eg: 'backspace', 'switch', 'enter'...)
-                    // special actions are taken
-                    if (cmd) {
-                        switch (cmd) {
-                            // switch between panels
-                            case 'switch':
-                                //@ts-ignore
-                                this.keyboard.setNextPanel();
-                                break;
-
-                            // switch between panel charsets (eg: russian/english)
-                            case 'switch-set':
-                                //@ts-ignore
-                                this.keyboard.setNextCharset();
-                                break;
-
-                            case 'enter':
-                                this.tryAppend('\n');
-                                break;
-
-                            case 'space':
-                                this.tryAppend(' ');
-                                break;
-
-                            case 'backspace':
-                                //@ts-ignore
-                                if (!this.text?.text?.length) break
-                                if (this.text?.text)
-                                    this.text.text = this.text.text.substring(0, this.text.text.length - 1) || ""
-                                break;
-
-                            case 'shift':
-                                //@ts-ignore
-                                this.keyboard.toggleCase();
-                                break;
-
-                        };
-
-                        // print a glyph, if any
-                    } else if (key.info.input !== undefined) {
-                        this.tryAppend(key.info.input);
-                    };
-
-                }
-            });
-
-        });
-    };
-
-    private tryAppend(char: string) {
-        if (this.text) {
-            this.text.text += char;
-            this.markDirty();
-        }
-    }
-}