@needle-tools/engine 4.1.0-beta.1 → 4.1.0-beta.3

package/src/engine/engine_networking_auto.ts

@@ -32,15 +32,12 @@ class ComponentPropertiesSyncer {
     comp: IComponent;
 
     constructor(comp: IComponent) {
-        // console.log("CREATE NEW SYNC", comp.name, comp.guid);
         this.comp = comp;
     }
 
     // private getters: { [key: string]: Function } = {};
     private hasChanges: boolean = false;
     private changedProperties: { [key: string]: any } = {};
-    // private data = {};
-
 
     get networkingKey(): string {
         return this.comp.guid;
@@ -89,27 +86,24 @@ class ComponentPropertiesSyncer {
             return;
         }
         for (const name in this.changedProperties) {
-            const guid = this.comp.guid + "/" + name;
             const value = this.changedProperties[name];
-            if (debug) console.log("SEND", this.comp.name, this.networkingKey);
-            net.send(this.networkingKey, { guid, data: value }, SendQueue.Queued);
+            if (debug) console.log("SEND", this.comp.guid, this.networkingKey);
+            net.send(this.networkingKey, { guid: this.comp.guid, property: name, data: value }, SendQueue.Queued);
+            delete this.changedProperties[name];
         }
     }
 
-    private onHandleReceiving = (val: { guid: string, data: any }) => {
-        if (debug)
-            console.log("RECEIVE", this.comp.name, this.comp.guid, val);
+    private onHandleReceiving = (val: { guid: string, property: string, data: any }) => {
+        if (debug) console.log("SYNCFIELD RECEIVE", this.comp.name, this.comp.guid, val);
         if (!this._isInit) return;
         if (!this.comp) return;
         // check if this change belongs to this component
-        if (val.guid.startsWith(this.comp.guid) === false) {
+        if (val.guid !== this.comp.guid) {
             return;
         }
-        const [_guid, key] = val.guid.split("/");
-        if (debug) console.log("RECEIVED", this.comp.name, this.comp.guid, val);
         try {
             this._isReceiving = true;
-            this.comp[key] = val.data;
+            this.comp[val.property] = val.data;
         }
         catch (err) {
             console.error(err);
@@ -118,15 +112,6 @@ class ComponentPropertiesSyncer {
             this._isReceiving = false;
         }
     }
-
-    // private _seen: Set<any> = new Set();
-    // private uniqBy(a, key) {
-    //     this._seen.clear();
-    //     return a.filter(item => {
-    //         let k = key(item);
-    //         return this._seen.has(k) ? false : this._seen.add(k);
-    //     });
-    // }
 }
 
 function testValueChanged(newValue, previousValue): boolean {

package/src/engine/xr/NeedleXRSession.ts

@@ -712,8 +712,11 @@ export class NeedleXRSession implements INeedleXRSession {
     /** Sets a XRRig to be active which will parent the camera to this rig */
     setRigActive(rig: IXRRig) {
         const i = this._rigs.indexOf(rig);
+        const currentlyActive = this._rigs[0];
         this._rigs.splice(i, 1);
         this._rigs.unshift(rig);
+        // if there's another rig currently active we need to make sure we have at least the same priority
+        rig.priority = currentlyActive?.priority ?? 0;
         this.updateActiveXRRig();
     }
     /**

package/src/engine-components/GroundProjection.ts

@@ -3,7 +3,7 @@ import { GroundedSkybox as GroundProjection } from 'three/examples/jsm/objects/G
 
 import { Gizmos } from "../engine/engine_gizmos.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
-import { getBoundingBox, getTempVector, getWorldScale, Graphics, setVisibleInCustomShadowRendering,setWorldPosition } from "../engine/engine_three_utils.js";
+import { getBoundingBox, getTempVector, getWorldScale, Graphics, setVisibleInCustomShadowRendering, setWorldPosition } from "../engine/engine_three_utils.js";
 import { delayForFrames, getParam, Watch as Watch } from "../engine/engine_utils.js";
 import { Behaviour } from "./Component.js";
 
@@ -37,7 +37,7 @@ export class GroundProjectedEnv extends Behaviour {
     @serializable()
     set radius(val: number) {
         this._radius = val;
-        this.updateProjection();
+        if (this._projection) this.updateProjection();
     }
     get radius(): number { return this._radius; }
     private _radius: number = 50;
@@ -49,7 +49,7 @@ export class GroundProjectedEnv extends Behaviour {
     @serializable()
     set height(val: number) {
         this._height = val;
-        this.updateProjection();
+        if (this._projection) this.updateProjection();
     }
     get height(): number { return this._height; }
     private _height: number = 3;
@@ -68,7 +68,7 @@ export class GroundProjectedEnv extends Behaviour {
     get arBlending(): number { return this._arblending; }
     private _arblending = 0;
 
-    private _lastEnvironment?: Texture;
+    private _lastBackground?: Texture;
     private _lastRadius?: number;
     private _lastHeight?: number;
     private _projection?: GroundProjection;
@@ -88,9 +88,10 @@ export class GroundProjectedEnv extends Behaviour {
                 this.updateAndCreate();
         }
         if (!this._watcher) {
-            this._watcher = new Watch(this.context.scene, "environment");
+            this._watcher = new Watch(this.context.scene, "background");
             this._watcher.subscribeWrite(_ => {
-                this.updateProjection();
+                if (debug) console.log("Background changed", this.context.scene.background);
+                this._needsTextureUpdate = true;
             });
         }
     }
@@ -101,13 +102,13 @@ export class GroundProjectedEnv extends Behaviour {
     }
     /** @internal */
     onEnterXR(): void {
-        if(!this.activeAndEnabled) return;
+        if (!this.activeAndEnabled) return;
         this._needsTextureUpdate = true;
         this.updateProjection();
     }
     /** @internal */
     async onLeaveXR() {
-        if(!this.activeAndEnabled) return;
+        if (!this.activeAndEnabled) return;
         await delayForFrames(1);
         this.updateProjection();
     }
@@ -121,8 +122,8 @@ export class GroundProjectedEnv extends Behaviour {
         if (blurrinessChanged) {
             this.updateProjection();
         }
-        else if (this._needsTextureUpdate) {
-            this.updateBlurriness();
+        else if (this._needsTextureUpdate && this.context.scene.background instanceof Texture) {
+            this.updateBlurriness(this.context.scene.background, this.context.scene.backgroundBlurriness);
         }
     }
 
@@ -138,10 +139,16 @@ export class GroundProjectedEnv extends Behaviour {
      * Updates the ground projection. This is called automatically when the environment or settings change.
      */
     updateProjection() {
-        if (!this.context.scene.environment) {
+        if (!this.context.scene.background) {
+            this._projection?.removeFromParent();
+            return;
+        }
+        const backgroundTexture = this.context.scene.background;
+        if (!(backgroundTexture instanceof Texture)) {
             this._projection?.removeFromParent();
             return;
         }
+
         if (this.context.xr?.isPassThrough || this.context.xr?.isAR) {
             if (this.arBlending === 0) {
                 this._projection?.removeFromParent();
@@ -152,25 +159,25 @@ export class GroundProjectedEnv extends Behaviour {
         if (!this.gameObject || this.destroyed) {
             return;
         }
-        
+
         let needsNewAutoFit = true;
         // offset here must be zero (and not .01) because the plane occlusion (when mesh tracking is active) is otherwise not correct
         const offset = 0;
-        if (!this._projection || this.context.scene.environment !== this._lastEnvironment || this._height !== this._lastHeight || this._radius !== this._lastRadius) {
-            if (debug)
-                console.log("Create/Update Ground Projection", this.context.scene.environment.name);
+
+        const hasChanged = backgroundTexture !== this._lastBackground || this._height !== this._lastHeight || this._radius !== this._lastRadius;
+
+        if (!this._projection || hasChanged) {
+            if (debug) console.log("Create/Update Ground Projection", backgroundTexture.name);
+
             this._projection?.removeFromParent();
-            if (!this._projection || (this.context.scene.environment !== this._lastEnvironment || this._lastHeight !== this._height || this._lastRadius !== this._radius)) {
-                try {
-                    this._projection = new GroundProjection(this.context.scene.environment, this._height, this.radius, 64);
-                }
-                catch (e) {
-                    console.error("Failed to enable GroundProjection for environment", e);
-                    return;
-                }
+
+            try {
+                this._projection = new GroundProjection(backgroundTexture, this._height, this._radius, 64);
+            }
+            catch (e) {
+                console.error("Error creating three GroundProjection", e);
+                return;
             }
-            else
-                needsNewAutoFit = false;
             this._projection.position.y = this._height - offset;
             this._projection.name = "GroundProjection";
             setVisibleInCustomShadowRendering(this._projection, false);
@@ -205,35 +212,35 @@ export class GroundProjectedEnv extends Behaviour {
         this.env.radius = this._radius;
         this.env.height = this._height;
         */
-       
+
         if (this.context.scene.backgroundBlurriness > 0.001 && this._needsTextureUpdate) {
-            this.updateBlurriness();
+            this.updateBlurriness(backgroundTexture, this.context.scene.backgroundBlurriness);
         }
 
-        this._lastEnvironment = this.context.scene.environment;
+        this._lastBackground = backgroundTexture;
         this._lastHeight = this._height;
         this._lastRadius = this._radius;
-
         this._needsTextureUpdate = false;
     }
 
     private _blurrynessShader: ShaderMaterial | null = null;
     private _lastBlurriness: number = -1;
 
-    private updateBlurriness() {
+    private updateBlurriness(texture: Texture, blurriness: number) {
         if (!this._projection) {
             return;
         }
-        else if (!this.context.scene.environment) {
+        else if (!texture) {
             return;
         }
+
         this._needsTextureUpdate = false;
-        if (debug) console.log("Update Blurriness", this.context.scene.backgroundBlurriness);
+        if (debug) console.log("Update Blurriness", blurriness);
         this._blurrynessShader ??= new ShaderMaterial({
             name: "GroundProjectionBlurriness",
             uniforms: {
-                map: { value: this.context.scene.environment },
-                blurriness: { value: this.context.scene.backgroundBlurriness },
+                map: { value: texture },
+                blurriness: { value: blurriness },
                 blending: { value: 0 },
                 alphaFactor: { value: 1 }
             },
@@ -241,9 +248,10 @@ export class GroundProjectedEnv extends Behaviour {
             fragmentShader: blurFragmentShader
         });
         this._blurrynessShader.depthWrite = false;
-        this._blurrynessShader.uniforms.blurriness.value = this.context.scene.backgroundBlurriness;
-        this._lastBlurriness = this.context.scene.backgroundBlurriness;
-        this.context.scene.environment.needsPMREMUpdate = true;
+        this._blurrynessShader.uniforms.map.value = texture;
+        this._blurrynessShader.uniforms.blurriness.value = 1;//blurriness;
+        this._lastBlurriness = blurriness;
+        texture.needsUpdate = true;
 
         const wasTransparent = this._projection.material.transparent;
         this._projection.material.transparent = (this.context.xr?.isAR === true && this.arBlending > 0.000001) ?? false;
@@ -266,7 +274,7 @@ export class GroundProjectedEnv extends Behaviour {
         }
 
         // Update the texture
-        this._projection.material.map = Graphics.copyTexture(this.context.scene.environment, this._blurrynessShader);
+        this._projection.material.map = Graphics.copyTexture(texture, this._blurrynessShader);
         this._projection.material.depthTest = true;
         this._projection.material.depthWrite = false;
     }

package/src/engine-components/SpatialTrigger.ts

@@ -62,23 +62,23 @@ export class SpatialTriggerReceiver extends Behaviour {
 
     }
 
-    currentIntersected: SpatialTrigger[] = [];
-    lastIntersected: SpatialTrigger[] = [];
+    readonly currentIntersected: SpatialTrigger[] = [];
+    readonly lastIntersected: SpatialTrigger[] = [];
 
     onEnterTrigger(trigger: SpatialTrigger): void {
         if(debug) console.log("ENTER TRIGGER", this.name, trigger.name, this, trigger);
         trigger.raiseOnEnterEvent(this);
-        this.onEnter?.invoke(this, trigger);
+        this.onEnter?.invoke();
     }
     onExitTrigger(trigger: SpatialTrigger): void {
-        if(debug) console.log("EXIT TRIGGER", this.name, trigger.name, this, trigger);
+        if(debug) console.log("EXIT TRIGGER", this.name, trigger.name, );
         trigger.raiseOnExitEvent(this);
-        this.onExit?.invoke(this, trigger);
+        this.onExit?.invoke();
     }
 
     onStayTrigger(trigger: SpatialTrigger): void {
         trigger.raiseOnStayEvent(this);
-        this.onStay?.invoke(this, trigger);
+        this.onStay?.invoke();
     }
 }
 

package/src/engine-components/TransformGizmo.ts

@@ -1,4 +1,4 @@
-import { MathUtils,Mesh, MeshBasicMaterial, Object3D } from "three";
+import { MathUtils, Mesh, MeshBasicMaterial, Object3D } from "three";
 import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
 
 import * as params from "../engine/engine_default_parameters.js";
@@ -26,7 +26,15 @@ export class TransformGizmo extends Behaviour {
     @serializable()
     public scaleSnap: number = .25;
 
-    private control?: TransformControls;
+    /**
+     * Get the underlying three.js TransformControls instance.
+     * @returns The TransformControls instance.
+     */
+    get control() {
+        return this._control;
+    }
+
+    private _control?: TransformControls;
     private orbit?: OrbitControls;
 
     /** @internal */
@@ -35,12 +43,12 @@ export class TransformGizmo extends Behaviour {
 
         if (!this.context.mainCamera) return;
 
-        if (!this.control) {
-            this.control = new TransformControls(this.context.mainCamera, this.context.renderer.domElement);
-            this.control.enabled = true;
-            this.control.getRaycaster().layers.set(2);
-            this.control.size = 1;
-            const obj = ("_root" in this.control ? this.control._root : this.control) as Object3D;
+        if (!this._control) {
+            this._control = new TransformControls(this.context.mainCamera, this.context.renderer.domElement);
+            this._control.enabled = true;
+            this._control.getRaycaster().layers.set(2);
+            this._control.size = 1;
+            const obj = ("_root" in this._control ? this._control._root : this._control) as Object3D;
             obj.traverse(x => {
                 const mesh = x as Mesh;
                 mesh.layers.set(2);
@@ -54,12 +62,12 @@ export class TransformGizmo extends Behaviour {
             this.orbit = GameObject.getComponentInParent(this.context.mainCamera, OrbitControls) ?? undefined;
         }
 
-        if (this.control) {
-            const obj = this.control.getHelper();
+        if (this._control) {
+            const obj = this._control.getHelper();
             this.context.scene.add(obj);
-            this.control.attach(this.gameObject);
+            this._control.attach(this.gameObject);
 
-            this.control?.addEventListener('dragging-changed', this.onControlChangedEvent);
+            this._control?.addEventListener('dragging-changed', this.onControlChangedEvent);
             window.addEventListener('keydown', this.windowKeyDownListener);
             window.addEventListener('keyup', this.windowKeyUpListener);
         }
@@ -67,25 +75,25 @@ export class TransformGizmo extends Behaviour {
 
     /** @internal */
     onDisable() {
-        this.control?.getHelper()?.removeFromParent();
-        this.control?.removeEventListener('dragging-changed', this.onControlChangedEvent);
+        this._control?.getHelper()?.removeFromParent();
+        this._control?.removeEventListener('dragging-changed', this.onControlChangedEvent);
         window.removeEventListener('keydown', this.windowKeyDownListener);
         window.removeEventListener('keyup', this.windowKeyUpListener);
     }
 
     enableSnapping() {
-        if (this.control) {
-            this.control.setTranslationSnap(this.translationSnap);
-            this.control.setRotationSnap(MathUtils.degToRad(this.rotationSnapAngle));
-            this.control.setScaleSnap(this.scaleSnap);
+        if (this._control) {
+            this._control.setTranslationSnap(this.translationSnap);
+            this._control.setRotationSnap(MathUtils.degToRad(this.rotationSnapAngle));
+            this._control.setScaleSnap(this.scaleSnap);
         }
     }
 
     disableSnapping() {
-        if (this.control) {
-            this.control.setTranslationSnap(null);
-            this.control.setRotationSnap(null);
-            this.control.setScaleSnap(null);
+        if (this._control) {
+            this._control.setTranslationSnap(null);
+            this._control.setRotationSnap(null);
+            this._control.setScaleSnap(null);
         }
     }
 
@@ -104,11 +112,11 @@ export class TransformGizmo extends Behaviour {
 
     private windowKeyDownListener = (event) => {
         if (!this.enabled) return;
-        if (!this.control) return;
+        if (!this._control) return;
         switch (event.keyCode) {
 
             case 81: // Q
-                this.control.setSpace(this.control.space === 'local' ? 'world' : 'local');
+                this._control.setSpace(this._control.space === 'local' ? 'world' : 'local');
                 break;
 
             case 16: // Shift
@@ -116,40 +124,40 @@ export class TransformGizmo extends Behaviour {
                 break;
 
             case 87: // W
-                this.control.setMode('translate');
+                this._control.setMode('translate');
                 break;
 
             case 69: // E
-                this.control.setMode('rotate');
+                this._control.setMode('rotate');
                 break;
 
             case 82: // R
-                this.control.setMode('scale');
+                this._control.setMode('scale');
                 break;
             case 187:
             case 107: // +, =, num+
-                this.control.setSize(this.control.size + 0.1);
+                this._control.setSize(this._control.size + 0.1);
                 break;
 
             case 189:
             case 109: // -, _, num-
-                this.control.setSize(Math.max(this.control.size - 0.1, 0.1));
+                this._control.setSize(Math.max(this._control.size - 0.1, 0.1));
                 break;
 
             case 88: // X
-                this.control.showX = !this.control.showX;
+                this._control.showX = !this._control.showX;
                 break;
 
             case 89: // Y
-                this.control.showY = !this.control.showY;
+                this._control.showY = !this._control.showY;
                 break;
 
             case 90: // Z
-                this.control.showZ = !this.control.showZ;
+                this._control.showZ = !this._control.showZ;
                 break;
 
             case 32: // Spacebar
-                this.control.enabled = !this.control.enabled;
+                this._control.enabled = !this._control.enabled;
                 break;
         }
     }

package/src/engine-components/VideoPlayer.ts

@@ -1017,7 +1017,6 @@ class ScreenspaceTexture extends ShaderMaterial {
             else
             {
                 vec4 texcolor = texture2D(map, vUv);
-                texcolor = sRGBTransferOETF(texcolor);
                 gl_FragColor = texcolor;
             }
         }

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

@@ -23,11 +23,21 @@ export class XRRig extends Behaviour implements IXRRig {
 
     get isActive() { return this.activeAndEnabled && this.gameObject.visible; }
 
-    /** Sets this rig to be the active XR rig (needs to be called during an active XR session) */
+    /** 
+     * Sets this rig to be the active XR rig (needs to be called during an active XR session) 
+     * Note that this might modify the priority of this rig to be the highest.
+    */
     setAsActiveXRRig() {
         NeedleXRSession.active?.setRigActive(this);
     }
+    /** 
+     * Sets the priority of the rig.
+     */
+    setPriority(value: number) {
+        this.priority = value;
+    }
 
+    /** @internal */
     awake(): void {
         if (debug) {
             const gizmoObj = new Object3D() as IGameObject;
@@ -51,15 +61,18 @@ export class XRRig extends Behaviour implements IXRRig {
 
     private _startScale?: Vector3;
 
+    /** @internal */
     onEnterXR(args: NeedleXREventArgs): void {
         this._startScale = this.gameObject.scale.clone();
         args.xr.addRig(this);
-        if(debug) console.log("WebXR: add Rig", this.name, this.priority);
+        if (debug) console.log("WebXR: add Rig", this.name, this.priority);
     }
+    /** @internal */
     onLeaveXR(args: NeedleXREventArgs): void {
         args.xr.removeRig(this);
         if (this._startScale && this.gameObject)
             this.gameObject.scale.copy(this._startScale);
     }
 
+
 }

package/src/engine-components-experimental/networking/PlayerSync.ts

@@ -20,7 +20,7 @@ declare type PlayerSyncWithAsset = PlayerSync & Required<Pick<PlayerSync, "asset
  * @category Networking
  */
 export class PlayerSync extends Behaviour {
-    
+
     /**
      * This API is experimental and may change or be removed in the future.
      * Create a PlayerSync instance at runtime from a given URL
@@ -103,6 +103,7 @@ export class PlayerSync extends Behaviour {
         const instance = await this._localInstance;
         if (instance) {
             const pl = GameObject.getComponentsInChildren(instance, PlayerState);
+            if (debug) console.log(`PlayerSync.createInstance: found ${pl?.length} PlayerState components. Owner: ${this.context.connection.connectionId}`);
             if (pl?.length) {
                 for (const state of pl)
                     state.owner = this.context.connection.connectionId!;
@@ -226,7 +227,7 @@ export class PlayerState extends Behaviour {
     }
 
     private onOwnerChange(newOwner: string, oldOwner: string) {
-        if (debug) console.log("PlayerSync.onOwnerChange", this, "newOwner", newOwner, "oldOwner", oldOwner);
+        if (debug) console.log(`PlayerSync.onOwnerChange: ${oldOwner} → ${newOwner} (me: ${this.context.connection.connectionId})`);
 
         // Remove from local owner array if it was local before
         const index = PlayerState._local.indexOf(this);
@@ -259,6 +260,7 @@ export class PlayerState extends Behaviour {
         PlayerState.dispatchEvent(PlayerStateEvent.OwnerChanged, evt);
     }
 
+    /** @internal */
     awake(): void {
         PlayerState.all.push(this);
         if (debug) console.log("Registered new PlayerState", this.guid, PlayerState.all.length - 1, PlayerState.all)
@@ -266,31 +268,10 @@ export class PlayerState extends Behaviour {
         this.context.connection.beginListen(RoomEvents.UserLeftRoom, this.onUserLeftRoom);
     }
 
-    private onUserLeftRoom = (model: { userId: string }) => {
-        if (model.userId === this.owner) {
-            if (debug)
-                console.log("PLAYERSYNC LEFT", this.owner)
-            this.doDestroy();
-            return;
-        }
-    }
-
-
+    /** @internal */
     async start() {
         if (debug) console.log("PLAYERSTATE.START, owner: " + this.owner, this.context.connection.usersInRoom([]))
 
-        // generate number from owner
-        // if (this.owner) {
-        //     // string to number
-        //     let num = 0;
-        //     for (let i = 0; i < this.owner.length; i++) {
-        //         num += this.owner.charCodeAt(i);
-        //     }
-        //     console.log(num)
-        //     num = num / 1000
-        //     this.gameObject.position.y = num;
-        // }
-
         // If a player is spawned but not in the room anymore we want to destroy it
         // this might happen in a case where all users get disconnected at once and the server 
         // still has the syncInstantiate messages that are sent to all clients
@@ -314,29 +295,20 @@ export class PlayerState extends Behaviour {
                     }
                     else if (debug) console.warn("PlayerState.start → owner is still undefined but dontDestroy is set to true", this.name);
                 }
-                else if(debug) console.log("PlayerState.start → owner is assigned", this.owner);
+                else if (debug) console.log("PlayerState.start → owner is assigned", this.owner);
             }, 2000);
         }
     }
 
-    // onEnable() {
-    //     if (debug) this.startCoroutine(this.debugRoutine());
-    // }
-
-    // *debugRoutine() {
-    //     while (!this.destroyed && this.activeAndEnabled) {
-    //         Gizmos.DrawLabel(this.gameObject.worldPosition, this.owner ?? "no owner");
-    //         yield;
-    //     }
-    // }
-
     /** this tells the server that this client has been destroyed and the networking message for the instantiate will be removed */
     doDestroy() {
         if (debug) console.log("PlayerSync.doDestroy → syncDestroy", this.name);
         syncDestroy(this.gameObject, this.context.connection, true, { saveInRoom: false });
     }
 
+    /** @internal */
     onDestroy() {
+        if(debug) console.warn("PlayerState.onDestroy", this.owner);
         this.context.connection.stopListen(RoomEvents.UserLeftRoom, this.onUserLeftRoom);
         PlayerState.all.splice(PlayerState.all.indexOf(this), 1);
 
@@ -346,4 +318,13 @@ export class PlayerState extends Behaviour {
                 PlayerState._local.splice(index, 1);
         }
     }
+
+    private onUserLeftRoom = (model: { userId: string }) => {
+        if (model.userId === this.owner) {
+            if (debug)
+                console.log("PLAYERSYNC LEFT", this.owner)
+            this.doDestroy();
+            return;
+        }
+    }
 }