@needle-tools/engine 2.50.0-pre → 2.52.0-pre

package/src/engine-components/SpriteRenderer.ts

@@ -1,9 +1,48 @@
 import { Behaviour } from "./Component";
 import * as THREE from "three";
-import { serializable } from "../engine/engine_serialization_decorator";
-import { Color, Material, Texture } from "three";
+import { serializable, serializeable } from "../engine/engine_serialization_decorator";
+import { Color, Material, NearestFilter, Texture, Vector2, TextureFilter } from "three";
 import { RGBAColor } from "./js-extensions/RGBAColor";
+import { getParam } from "../engine/engine_utils";
 
+const debug = getParam("debugspriterenderer")
+
+class SpriteUtils {
+
+    static cache: { [key: string]: THREE.BufferGeometry } = {};
+
+    static getOrCreateGeometry(sprite: Sprite): THREE.BufferGeometry {
+        if (sprite._geometry) return sprite._geometry;
+        if (sprite.guid) {
+            if (SpriteUtils.cache[sprite.guid]) {
+                if (debug) console.log("Take cached geometry for sprite", sprite.guid);
+                return SpriteUtils.cache[sprite.guid];
+            }
+        }
+        const geo = new THREE.BufferGeometry();
+        sprite._geometry = geo;
+        const vertices = new Float32Array(sprite.triangles.length * 3);
+        const uvs = new Float32Array(sprite.triangles.length * 2);
+        for (let i = 0; i < sprite.triangles.length; i += 1) {
+            const index = sprite.triangles[i];
+
+            vertices[i * 3] = -sprite.vertices[index].x;
+            vertices[i * 3 + 1] = sprite.vertices[index].y;
+
+            vertices[i * 3 + 2] = 0;
+            const uv = sprite.uv[index];
+            uvs[i * 2] = uv.x;
+            uvs[i * 2 + 1] = 1 - uv.y;
+        }
+        geo.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
+        geo.setAttribute("uv", new THREE.BufferAttribute(uvs, 2));
+        if (sprite.guid)
+            this.cache[sprite.guid] = geo;
+        if (debug)
+            console.log("Built sprite geometry", sprite, geo);
+        return geo;
+    }
+}
 
 /// <summary>
 ///   <para>SpriteRenderer draw mode.</para>
@@ -30,42 +69,59 @@ class Vec2 {
 
 export class Sprite {
 
+    @serializable()
+    guid?: string;
     @serializable(Texture)
     texture?: THREE.Texture;
-
+    @serializeable()
     triangles!: Array<number>;
+    @serializeable()
     uv!: Array<Vec2>;
+    @serializeable()
     vertices!: Array<Vec2>;
 
     _geometry?: THREE.BufferGeometry;
 }
 
-class SpriteUtils {
 
-    static getOrCreateGeometry(sprite: Sprite): THREE.BufferGeometry {
-        if (sprite._geometry) return sprite._geometry;
-        const geo = new THREE.BufferGeometry();
-        sprite._geometry = geo;
-        const vertices = new Float32Array(sprite.triangles.length * 3);
-        const uvs = new Float32Array(sprite.triangles.length * 2);
-        for (let i = 0; i < sprite.triangles.length; i += 1) {
-            const index = sprite.triangles[i];
+class Slice {
+    @serializable()
+    name!: string;
+    @serializable(Vector2)
+    offset!: Vector2;
+    @serializable(Vector2)
+    size!: Vector2;
+}
 
-            vertices[i * 3] = -sprite.vertices[index].x;
-            vertices[i * 3 + 1] = sprite.vertices[index].y;
+const $spriteTexOwner = Symbol("spriteOwner");
 
-            vertices[i * 3 + 2] = 0;
-            const uv = sprite.uv[index];
-            uvs[i * 2] = uv.x;
-            uvs[i * 2 + 1] = 1 - uv.y;
-        }
-        // console.log(vertices);
-        geo.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
-        geo.setAttribute("uv", new THREE.BufferAttribute(uvs, 2));
-        return geo;
+export class SpriteSheet {
+
+    @serializable(Sprite)
+    sprite?: Sprite;
+    @serializable()
+    index: number = 0;
+    @serializable(Slice)
+    slices!: Slice[];
+
+    update() {
+        const index = this.index;
+        if (index < 0 || index >= this.slices.length)
+            return;
+        const slice = this.slices[index];
+        let tex = this.sprite?.texture;
+        if (!tex) return;
+        tex.encoding = THREE.sRGBEncoding;
+        tex.offset.set(slice.offset.x, slice.offset.y);
+        // aniso > 1 makes the texture blurry
+        if (tex.minFilter == NearestFilter && tex.magFilter == NearestFilter)
+            tex.anisotropy = 1;
+        // tex.repeat.set(slice.size.x, -slice.size.y);
+        tex.needsUpdate = true;
     }
 }
 
+
 export class SpriteRenderer extends Behaviour {
 
     @serializable()
@@ -79,37 +135,69 @@ export class SpriteRenderer extends Behaviour {
     @serializable(Material)
     sharedMaterial?: THREE.Material;
 
-    get sprite(): Sprite | undefined {
-        return this._sprite;
+    @serializable(SpriteSheet)
+    get sprite(): SpriteSheet | undefined {
+        return this._spriteSheet;
     }
-    set sprite(value: Sprite | undefined) {
-        if(value === this._sprite) return;
-        this._sprite = value;
-        this.updateSprite();
+    set sprite(value: SpriteSheet | undefined | number) {
+        if (value === this._spriteSheet) return;
+        if (typeof value === "number") {
+            const index = Math.floor(value);;
+            if (index === value)
+                this.spriteIndex = index;
+            return;
+        }
+        else {
+            this._spriteSheet = value;
+            this.updateSprite();
+        }
     }
 
-    private _sprite?: Sprite;
+    set spriteIndex(value: number) {
+        if (!this._spriteSheet) return;
+        this._spriteSheet.index = value;
+        this._spriteSheet.update();
+    }
+    get spriteIndex(): number {
+        return this._spriteSheet?.index ?? 0;
+    }
+    get spriteFrames(): number {
+        return this._spriteSheet?.slices.length ?? 0;
+    }
+
+    private _spriteSheet?: SpriteSheet;
     private _currentSprite?: THREE.Mesh;
 
     awake(): void {
         this._currentSprite = undefined;
+        if(debug) {
+            console.log("Awake", this.name, this, this.sprite?.sprite?.texture);
+            if(this.sprite?.sprite?.texture)
+                console.log(this.sprite.sprite.texture.minFilter.toString(), this.sprite.sprite.texture.magFilter.toString());
+        }
     }
 
     start() {
-        if (this.drawMode === SpriteDrawMode.Tiled) {
-            console.warn("Tiled draw mode is not supported yet", this);
-        }
         if (!this._currentSprite)
             this.updateSprite();
         else if (this.gameObject)
             this.gameObject.add(this._currentSprite);
     }
 
+    // frame : number = 0;
+    // update(){
+    //     // const frameRate = 12;
+    //     // this.frame += frameRate * this.context.time.deltaTime;
+    //     // if(this.frame >= this.spriteFrames)
+    //     //     this.frame = 0;
+    //     // this.spriteIndex = Math.floor(this.frame);
+    //     // console.log(this.spriteIndex);
+    // }
+
     private updateSprite() {
         if (!this.__didAwake) return;
-        if (!this.sprite) return;
-        if (!this.sharedMaterial) return;
-
+        if (!this.sprite?.sprite) return;
+        const sprite = this.sprite.sprite;
         if (!this._currentSprite) {
             const mat = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide });
             if (!mat) return;
@@ -120,17 +208,23 @@ export class SpriteRenderer extends Behaviour {
             }
             mat.alphaTest = 0.5;
 
-            if (this.sprite.texture && !mat.wireframe) {
-                const t = this.sprite.texture;
-                // t.wrapS = THREE.RepeatWrapping;
-                mat["map"] = t;
+            if (sprite.texture && !mat.wireframe) {
+                let tex = sprite.texture;
+                // the sprite renderer modifies the textue offset 
+                // so we need to clone the texture 
+                // if the same texture is used multiple times
+                if (tex[$spriteTexOwner] !== undefined && tex[$spriteTexOwner] !== this && this.spriteFrames > 1) {
+                    tex = sprite!.texture = tex.clone();
+                }
+                tex[$spriteTexOwner] = this;
+                mat["map"] = tex;
             }
-
-            this._currentSprite = new THREE.Mesh(SpriteUtils.getOrCreateGeometry(this.sprite), mat);
+            this.sharedMaterial = mat;
+            this._currentSprite = new THREE.Mesh(SpriteUtils.getOrCreateGeometry(sprite), mat);
         }
         else {
-            this._currentSprite.geometry = SpriteUtils.getOrCreateGeometry(this.sprite);
-            this._currentSprite.material["map"] = this.sprite.texture;
+            this._currentSprite.geometry = SpriteUtils.getOrCreateGeometry(sprite);
+            this._currentSprite.material["map"] = sprite.texture;
         }
 
         if (this._currentSprite.parent !== this.gameObject) {
@@ -139,5 +233,7 @@ export class SpriteRenderer extends Behaviour {
             if (this.gameObject)
                 this.gameObject.add(this._currentSprite);
         }
+
+        this._spriteSheet?.update();
     }
 }

package/src/engine-components/VideoPlayer.ts

@@ -290,7 +290,8 @@ export class VideoPlayer extends Behaviour {
         this._videoTexture.flipY = false;
         this._videoTexture.encoding = THREE.sRGBEncoding;
         this.handleBeginPlaying(playAutomatically);
-        console.log(this);
+        if(debug)
+            console.log(this);
     }
 
     updateAspect() {

package/src/engine-components/WebARSessionRoot.ts

@@ -1,6 +1,5 @@
 import { Behaviour, GameObject } from "./Component";
-import { XRSession } from 'three'
-import { Matrix4, Object3D, XRPose } from "three";
+import { Matrix4, Object3D } from "three";
 import { WebAR, WebXR } from "./WebXR";
 import { InstancingUtil } from "../engine/engine_instancing";
 import { serializable } from "../engine/engine_serialization_decorator";

package/src/engine-components/WebXR.ts

@@ -1,4 +1,4 @@
-import { ArrayCamera, Color, Euler, EventDispatcher, Group, Matrix4, Mesh, MeshBasicMaterial, Object3D, Quaternion, RingGeometry, Texture, Vector3, XRFrame, XRHitTestSource, XRRigidTransform, XRSession, XRViewerPose } from 'three';
+import { ArrayCamera, Color, Euler, EventDispatcher, Group, Matrix4, Mesh, MeshBasicMaterial, Object3D, Quaternion, RingGeometry, Texture, Vector3 } from 'three';
 import { ARButton } from '../include/three/ARButton.js';
 import { VRButton } from '../include/three/VRButton.js';
 
@@ -7,7 +7,7 @@ import { serializable } from "../engine/engine_serialization_decorator";
 import { XRSessionMode } from "../engine/engine_setup";
 import { getWorldPosition, getWorldQuaternion, setWorldPosition, setWorldQuaternion } from "../engine/engine_three_utils";
 import { INeedleEngineComponent } from "../engine/engine_types";
-import { getParam, setOrAddParamsToUrl } from "../engine/engine_utils";
+import { getParam, isMozillaXR, setOrAddParamsToUrl } from "../engine/engine_utils";
 
 import { Behaviour, GameObject } from "./Component";
 import { noVoip } from "./Voip";
@@ -19,6 +19,7 @@ import { XRFlag, XRState, XRStateFlag } from "./XRFlag";
 
 
 export async function detectARSupport() {
+    if(isMozillaXR()) return true;
     if ("xr" in navigator) {
         //@ts-ignore
         return (await navigator["xr"].isSessionSupported('immersive-ar')) === true;
@@ -372,6 +373,7 @@ export class WebXR extends Behaviour {
         // we set layers to sync raycasting and have a similar behaviour to unity
         const xr = this.context.renderer.xr;
         if (this.context.mainCamera) {
+            //@ts-ignore
             const cam = xr.getCamera(this.context.mainCamera) as ArrayCamera;
             for (const c of cam.cameras) {
                 c.layers.enableAll();
@@ -553,7 +555,7 @@ export class WebAR {
         context.scene.background = null;
 
         session.requestReferenceSpace('viewer').then((referenceSpace) => {
-            session.requestHitTestSource({ space: referenceSpace }).then((source) => {
+            session.requestHitTestSource?.call(session, { space: referenceSpace })?.then((source) => {
                 this.hitTestSource = source;
             }).catch((err) => {
                 this.noHitTestAvailable = true;

package/src/engine-components/WebXRAvatar.ts

@@ -125,7 +125,12 @@ export class WebXRAvatar {
         if (!this.flags)
             return;
         let mask = this.isLocalAvatar ? XRStateFlag.FirstPerson : XRStateFlag.ThirdPerson;
-        // mask |= XRStateFlag.VR;
+        if (this.context.isInVR)
+            mask |= XRStateFlag.VR;
+        else if (this.context.isInAR)
+            mask |= XRStateFlag.AR;
+        else
+            mask |= XRStateFlag.Browser;
         for (const f of this.flags) {
             f.gameObject.visible = true;
             f.UpdateVisible(mask);

package/src/engine-components/WebXRController.ts

@@ -1,4 +1,4 @@
-import { BoxHelper, BufferGeometry, Color, Euler, Group, Intersection, Layers, Line, LineBasicMaterial, Material, Mesh, MeshBasicMaterial, Object3D, PerspectiveCamera, Quaternion, Ray, SphereGeometry, Vector2, Vector3, XRInputSource, XRSession } from "three";
+import { BoxHelper, BufferGeometry, Color, Euler, Group, Intersection, Layers, Line, LineBasicMaterial, Material, Mesh, MeshBasicMaterial, Object3D, PerspectiveCamera, Quaternion, Ray, SphereGeometry, Vector2, Vector3 } from "three";
 import { OculusHandModel } from 'three/examples/jsm/webxr/OculusHandModel.js';
 import { OculusHandPointerModel } from 'three/examples/jsm/webxr/OculusHandPointerModel.js';
 import { XRControllerModel, XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js';
@@ -381,11 +381,12 @@ export class WebXRController extends Behaviour {
         }
 
         if (this.raycastLine) {
+            const allowRaycastLineVisible = this.showRaycastLine && this.context.isInVR;
             if (this.type === ControllerType.Touch) {
                 this.raycastLine.visible = false;
             }
             else if (this.isUsingHands) {
-                this.raycastLine.visible = !this.grabbed && this.showRaycastLine;
+                this.raycastLine.visible = !this.grabbed && allowRaycastLineVisible;
                 setWorldPosition(this.raycastLine, wp);
                 const jnts = this.hand!['joints'];
                 if (jnts) {
@@ -400,7 +401,7 @@ export class WebXRController extends Behaviour {
                 setWorldQuaternion(this.raycastLine, this.rayRotation);
             }
             else {
-                this.raycastLine.visible = this.showRaycastLine;
+                this.raycastLine.visible = allowRaycastLineVisible;
                 setWorldQuaternion(this.raycastLine, this.rayRotation);
                 setWorldPosition(this.raycastLine, wp);
             }

package/src/engine-components/WebXRRig.ts

@@ -1,9 +1,22 @@
-import { Behaviour } from "./Component";
+import { Object3D } from "three";
+import { IGameObject } from "../engine/engine_types";
+import { getParam } from "../engine/engine_utils";
+import { Behaviour, GameObject } from "./Component";
+import { BoxGizmo } from "./Gizmos";
 
+const debug = getParam("debugrig");
 
 export class XRRig extends Behaviour {
     awake(): void {
         // const helper = new AxesHelper(.1);
         // this.gameObject.add(helper);
+        if (debug) {
+            const gizmoObj = new Object3D() as IGameObject;
+            gizmoObj.position.y += .5;
+            this.gameObject.add(gizmoObj);
+            const gizmo = gizmoObj.addNewComponent(BoxGizmo);
+            if (gizmo)
+                gizmo.isGizmo = false;
+        }
     }
 }

package/src/engine-components/WebXRSync.ts

@@ -1,7 +1,7 @@
 import { Behaviour, GameObject } from "./Component";
 import { RoomEvents, OwnershipModel, NetworkConnection } from "../engine/engine_networking";
 import { WebXR, WebXREvent } from "./WebXR";
-import { Group, Quaternion, Vector3, Vector4, WebXRManager, XRFrame, XRInputSource, XRRigidTransform, XRSession } from "three";
+import { Group, Quaternion, Vector3, Vector4, WebXRManager } from "three";
 import { getParam } from "../engine/engine_utils";
 import { Voip } from "./Voip";
 import { Builder, Long } from "flatbuffers";
@@ -402,6 +402,11 @@ export class WebXRSync extends Behaviour {
     private onXRSessionEnded(_evt: { session: XRSession }) {
         console.log("XR session ended");
         this.context.connection.send(WebXRSyncEvent.WebXR_UserLeft, { id: this.context.connection.connectionId, mode: XRMode.VR });
+        if(this.localAvatar){
+            this.localAvatar?.destroy();
+            this.avatars[this.localAvatar.guid] = undefined;
+            this.localAvatar = null;
+        }
     }
 
     private ownership: OwnershipModel | null = null;

package/src/engine-components/XRFlag.ts

@@ -1,5 +1,7 @@
 import { Behaviour, GameObject } from "./Component";
 import * as utils from "../engine/engine_utils";
+
+
 const debug = utils.getParam("debugflags");
 
 export enum XRStateFlag {
@@ -21,13 +23,12 @@ export class XRState {
     public Mask: XRStateFlag = XRStateFlag.Browser | XRStateFlag.ThirdPerson;
 
     public Has(state: XRStateFlag) {
-
         const res = (this.Mask & state);
-        if (debug) console.log("HAS", state, this.Mask, "Result=" + res);
         return res !== 0;
     }
 
     public Set(state: number) {
+        if(debug) console.warn("Set XR flag state to", state)
         this.Mask = state as number;
         XRFlag.Apply();
     }
@@ -108,23 +109,23 @@ export class XRFlag extends Behaviour {
         const st = state as XRState;
         if (st) {
             if (debug)
-                console.log("use passed in mask")
+                console.warn(this.name, "use passed in mask", st.Mask, this.visibleIn)
             res = st.Has(this.visibleIn);
         }
         else {
             if (debug)
-                console.log("use global mask")
+                console.log(this.name, "use global mask")
             XRState.Global.Has(this.visibleIn);
         }
         if (res === undefined) return;
         if (res) {
             if (debug)
-                console.trace("is visible", this.name, this.gameObject.uuid)
+                console.log(this.name, "is visible", this.gameObject.uuid)
             // this.gameObject.visible = true;
             GameObject.setActive(this.gameObject, true);
         } else {
             if (debug)
-                console.trace("is not visible", this.name, this.gameObject.uuid);
+                console.log(this.name, "is not visible", this.gameObject.uuid);
             const isVisible = this.gameObject.visible;
             if(!isVisible) return;
             this.gameObject.visible = false;

package/src/engine-components/codegen/components.ts

@@ -85,6 +85,7 @@ export { SpatialTriggerReceiver } from "../SpatialTrigger";
 export { SpatialTrigger } from "../SpatialTrigger";
 export { SpectatorCamera } from "../SpectatorCamera";
 export { Sprite } from "../SpriteRenderer";
+export { SpriteSheet } from "../SpriteRenderer";
 export { SpriteRenderer } from "../SpriteRenderer";
 export { SyncedCamera } from "../SyncedCamera";
 export { SyncedRoom } from "../SyncedRoom";

package/src/engine-components/js-extensions/Vector.ts

@@ -1,6 +1,6 @@
 import { applyPrototypeExtensions, registerPrototypeExtensions } from "./ExtensionUtils";
-import { Mathf } from "../../engine/engine_math";
 import { Vector3 } from "three";
+import { slerp } from "../../engine/engine_three_utils";
 
 export function apply(object: Vector3) {
     if (object && object.isVector3 === true) {
@@ -10,10 +10,7 @@ export function apply(object: Vector3) {
 
 
 Vector3.prototype["slerp"] = function (end: Vector3, t: number) {
-    const len1 = this.length();
-    const len2 = end.length();
-    const targetLen = Mathf.lerp(len1, len2, t);
-    return this.lerp(end, t).normalize().multiplyScalar(targetLen);
+    return slerp(this, end, t);
 }
 
 registerPrototypeExtensions(Vector3);

package/src/engine-components/timeline/PlayableDirector.ts

@@ -85,9 +85,6 @@ export class PlayableDirector extends Behaviour {
             console.log(this, this.playableAsset?.tracks);
 
         this.rebuildGraph();
-        if (this.playOnAwake)
-            this.play();
-        else this.evaluate();
 
         if (!this.isValid()) console.warn("PlayableDirector is not valid", this.playableAsset, this.playableAsset?.tracks, Array.isArray(this.playableAsset?.tracks), this);
     }
@@ -230,7 +227,7 @@ export class PlayableDirector extends Behaviour {
     ];
 
     private *internalUpdate() {
-        while (this._isPlaying) {
+        while (this._isPlaying && this.activeAndEnabled) {
             if (!this._isPaused && this._isPlaying) {
                 this._time += this.context.time.deltaTime;
                 this.evaluate();
@@ -312,6 +309,11 @@ export class PlayableDirector extends Behaviour {
                         if (debug)
                             console.log("Resolved binding", binding, "to", obj);
                         track.outputs[i] = obj;
+                        if(obj instanceof Animator) {
+                            // TODO: should disable? animator but this is not the animator that is currently on the object? needs investigation
+                            // console.log("DISABLE ANIMATOR", obj, obj.name, binding, this._guidsMap);
+                            // obj.enabled = false;
+                        }
                     }
                 }
                 else if (binding === null) {

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

@@ -18,6 +18,9 @@ const debug = getParam("debugeventsystem");
 
 export class EventSystem extends Behaviour {
 
+
+    private static _eventSystemMap = new Map<Context, EventSystem[]>();
+
     static didSearchEventSystem: boolean = false;
     static createIfNoneExists(context: Context) {
         if (!this.didSearchEventSystem) {
@@ -33,7 +36,15 @@ export class EventSystem extends Behaviour {
         GameObject.addNewComponent(go, EventSystem);
         context.scene.add(go);
     }
-    static systems: EventSystem[] = [];
+    
+    static get systems(): EventSystem[] 
+    {
+        const context = Context.Current;
+        if (!this._eventSystemMap.has(context)) {
+            this._eventSystemMap.set(context, []);
+        }  
+        return this._eventSystemMap.get(context)!;
+    }
 
     //@ts-ignore
     static ensureUpdateMeshUI(instance, context: Context) {