@needle-tools/engine 5.1.1 → 5.1.2

package/src/engine/engine_utils_qrcode.ts

@@ -4,7 +4,7 @@ import { Quaternion, Vector2, Vector3, Vector4 } from "three";
 
 import { needleLogoOnlySVG } from "./assets/index.js";
 import { isDevEnvironment } from "./debug/debug.js";
-import { $Mhcqc } from "./engine_license.js";
+import { Jkdun } from "./engine_license.js";
 import { InternalAttributeUtils } from "./engine_utils_attributes.js";
 import type { NeedleEngineWebComponent } from "./webcomponents/needle-engine.js";
 
@@ -135,7 +135,7 @@ async function internalRenderQRCodeOverlays(canvas: HTMLCanvasElement, args: { s
         console.debug("[QR Code] No web component found")
     }
 
-    const canUseCustomLogo = $Mhcqc();
+    const canUseCustomLogo = Jkdun();
 
     // Query logo src from needle-engine attribute.
     // For any supported attribute it's possible to use "falsey" values (e.g. "0" or "false" to disable the logo in the QR code)

package/src/engine/webcomponents/needle menu/needle-menu-spatial.ts

@@ -2,7 +2,7 @@ import { Mesh, Object3D, TextureLoader, Vector4 } from "three";
 import ThreeMeshUI from "three-mesh-ui";
 
 import { addNewComponent } from "../../engine_components.js";
-import { $Mhcqc } from "../../engine_license.js";
+import { Jkdun } from "../../engine_license.js";
 import { OneEuroFilterXYZ } from "../../engine_math.js";
 import type { Context } from "../../engine_setup.js";
 import { lookAtObject } from "../../engine_three_utils.js";
@@ -321,7 +321,7 @@ export class NeedleSpatialMenu {
         }
         if (this.menu) {
             const index = this.menu.children.indexOf(this._poweredByNeedleElement as any);
-            if (!this._showNeedleLogo && $Mhcqc()) {
+            if (!this._showNeedleLogo && Jkdun()) {
                 if (index >= 0) {
                     this._poweredByNeedleElement.removeFromParent();
                     this.markDirty();

package/src/engine/webcomponents/needle menu/needle-menu.ts

@@ -1,6 +1,6 @@
 import { showBalloonMessage } from "../../debug/debug.js";
 import type { Context } from "../../engine_context.js";
-import { $Mhcqc, _ynyIW, Telemetry } from "../../engine_license.js";
+import { Jkdun, qWc, Telemetry } from "../../engine_license.js";
 import { isLocalNetwork } from "../../engine_networking_utils.js";
 import { HTMLElementBase } from "../../engine_ssr.js";
 import { DeviceUtilities, getParam } from "../../engine_utils.js";
@@ -778,8 +778,8 @@ export class NeedleMenuElement extends HTMLElementBase {
         try {
             // if the user has a license then we CAN hide the needle logo
             // calling this method immediately will cause an issue with vite bundling tho
-            window.requestAnimationFrame(() => _ynyIW(res => {
-                if (res == true && $Mhcqc() && !debugNonCommercial) {
+            window.requestAnimationFrame(() => qWc(res => {
+                if (res == true && Jkdun() && !debugNonCommercial) {
                     let visible = this._userRequestedLogoVisible;
                     if (visible === undefined) visible = false;
                     this.___onSetLogoVisible(visible);
@@ -830,7 +830,7 @@ export class NeedleMenuElement extends HTMLElementBase {
                 // ensure the menu is not hidden or removed
                 const requiredParent = this?.parentNode;
                 if (this.style.display != "flex" || this.style.visibility != "visible" || this.style.opacity != "1" || requiredParent != this._domElement?.shadowRoot) {
-                    if (!$Mhcqc()) {
+                    if (!Jkdun()) {
                         const change = changeEventCounter++;
                         // if a user doesn't have a local pro license *but* for development the menu is hidden then we show a warning
                         if (isLocalNetwork() && this._userRequestedMenuVisible === false) {
@@ -918,7 +918,7 @@ export class NeedleMenuElement extends HTMLElementBase {
     showNeedleLogo(visible: boolean) {
         this._userRequestedLogoVisible = visible;
         if (!visible) {
-            if (!$Mhcqc() || debugNonCommercial) {
+            if (!Jkdun() || debugNonCommercial) {
                 console.warn("[Needle Engine] You need a commercial license to hide the Needle Engine logo in production.");
                 const localNetwork = isLocalNetwork()
                 if (!localNetwork) return;

package/src/engine/webcomponents/needle-engine.loading.ts

@@ -1,6 +1,6 @@
 import { needleLogoOnlySVG } from "../assets/index.js"
 import { isDevEnvironment, showBalloonWarning } from "../debug/index.js";
-import { $Mhcqc, __dSkNu, __gpBcwS } from "../engine_license.js";
+import { Jkdun, _hyjgv, xWfUNf } from "../engine_license.js";
 import { Mathf } from "../engine_math.js";
 import { LoadingProgressArgs } from "../engine_setup.js";
 import { getParam } from "../engine_utils.js";
@@ -205,7 +205,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
         }
 
 
-        const hasLicense = __dSkNu();
+        const hasLicense = _hyjgv();
         if (!existing) {
             this._loadingElement.style.position = "absolute";
             this._loadingElement.style.width = "100%";
@@ -373,7 +373,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
 
     // private async handleRuntimeLicense(loadingElement: HTMLElement) {
     //     // First check if we have a commercial license
-    //     let commercialLicense = $Mhcqc();
+    //     let commercialLicense = Jkdun();
     //     // if it's the case then we don't need to perform a runtime check
     //     if (commercialLicense) return;
 
@@ -393,10 +393,10 @@ export class EngineLoadingView implements ILoadingViewHandler {
     //     loadingElement.appendChild(nonCommercialContainer);
 
     //     // Use the runtime license check
-    //     if (!isDevEnvironment() && __gpBcwS) {
+    //     if (!isDevEnvironment() && xWfUNf) {
     //         if (debugLicense) console.log("Waiting for runtime license check");
-    //         await __gpBcwS;
-    //         commercialLicense = $Mhcqc();
+    //         await xWfUNf;
+    //         commercialLicense = Jkdun();
     //     }
     //     if (commercialLicense) return;
     //     nonCommercialContainer.style.transition = "opacity .5s ease-in-out";

package/src/engine/webcomponents/needle-engine.ts

@@ -3,7 +3,7 @@ import type { Texture } from "three";
 import { isDevEnvironment, showBalloonWarning } from "../debug/index.js";
 import { PUBLIC_KEY, VERSION } from "../engine_constants.js";
 import { ContextEvent, ContextRegistry } from "../engine_context_registry.js";
-import { $Mhcqc } from "../engine_license.js";
+import { Jkdun, Telemetry } from "../engine_license.js";
 import { onStart } from "../engine_lifecycle_api.js";
 import { setDracoDecoderPath, setDracoDecoderType, setKtx2TranscoderPath } from "../engine_loaders.gltf.js";
 import { Context, ContextCreateArgs } from "../engine_setup.js";
@@ -579,7 +579,7 @@ export class NeedleEngineWebComponent extends HTMLElementBase implements INeedle
 
 
         // Loading start events
-        const allowOverridingDefaultLoading = $Mhcqc();
+        const allowOverridingDefaultLoading = Jkdun();
         // default loading can be overriden by calling preventDefault in the onload start event
         this.ensureLoadStartIsRegistered();
         let useDefaultLoading = this.dispatchEvent(new CustomEvent("loadstart", {
@@ -676,6 +676,7 @@ export class NeedleEngineWebComponent extends HTMLElementBase implements INeedle
         if (currentHash !== null && currentHash !== undefined)
             context.hash = currentHash;
         context.alias = alias;
+        const loadStartTime = performance.now();
         this._createContextPromise = context.create(args);
         const success = await this._createContextPromise;
         this.applyAttributes();
@@ -694,6 +695,8 @@ export class NeedleEngineWebComponent extends HTMLElementBase implements INeedle
         if (useDefaultLoading && success) {
             this._loadingView?.onLoadingUpdate(1, "creating scene");
         }
+        // capture before mutating _didFullyLoad below: was a scene already loaded (src swap) vs cold start?
+        const isReload = this._didFullyLoad === true;
         this._didFullyLoad = true;
         this.classList.remove("loading");
         this.classList.add("loading-finished");
@@ -704,6 +707,32 @@ export class NeedleEngineWebComponent extends HTMLElementBase implements INeedle
                 loadedFiles: loadedFiles,
             }
         }));
+
+        // Telemetry: report the load outcome. On success we wait for the first rendered frame so we
+        // can include time-to-first-frame (and non-identifying device capabilities, collected there).
+        const loadDurationMs = performance.now() - loadStartTime;
+        if (success) {
+            this.addEventListener("ready", () => {
+                // ignore if a newer load superseded this one before its first frame arrived
+                if (this._loadId !== loadId) return;
+                Telemetry.reportLoad(this._context, {
+                    success: true,
+                    files: loadedFiles.length,
+                    is_reload: isReload,
+                    load_ms: loadDurationMs,
+                    first_frame_ms: performance.now() - loadStartTime,
+                    since_navigation_ms: performance.now(),
+                });
+            }, { once: true });
+        }
+        else {
+            Telemetry.reportLoad(this._context, {
+                success: false,
+                files: loadedFiles.length,
+                is_reload: isReload,
+                load_ms: loadDurationMs,
+            });
+        }
     }
 
     // #region applyAttributes

package/src/engine/xr/NeedleXRSync.ts

@@ -53,6 +53,19 @@ class XRUserState {
         if (!found) {
             this.controllerStates.push(state);
         }
+
+        // When switching input type (e.g. hand -> controller), the new input source gets a new index.
+        // The old controller's state lingers here (we only ever add/update by index), and a stale
+        // non-tracking entry for the same handedness would otherwise mask the new tracked one. Once a
+        // tracking state arrives for a handedness, drop any other (stale) states for that handedness.
+        if (state.isTracking) {
+            for (let i = this.controllerStates.length - 1; i >= 0; i--) {
+                const other = this.controllerStates[i];
+                if (other.index !== state.index && other.handedness === state.handedness) {
+                    this.controllerStates.splice(i, 1);
+                }
+            }
+        }
     }
 
     update(session: NeedleXRSession) {
@@ -89,8 +102,11 @@ class XRUserState {
 
     private sendControllerRemoved(state: XRControllerState) {
         state.isTracking = false;
-        state.guid = "";
+        // broadcast the not-tracking state to currently connected peers so they hide the hand immediately
         this.context.connection.send(this.userStateEvtName, state);
+        // and delete the persisted room state using the *correct* guid so newly joining peers don't
+        // replay a stale (still-tracking) controller state. Must use the real guid - clearing it first
+        // would leave the persisted entry untouched on the server.
         this.context.connection.sendDeleteRemoteState(state.guid);
     }
 
@@ -135,8 +151,10 @@ export class NeedleXRSync {
         if (!userId) return undefined;
         const user = this._states.get(userId);
         if (!user) return undefined;
-        const ctrl = user.controllerStates.find(x => x.handedness === handedness);
-        return ctrl?.isTracking || false;
+        // Consider it tracked if ANY controller state for this handedness is tracking. After switching
+        // input type a stale non-tracking entry can still exist for a frame before it's pruned - this
+        // makes sure it doesn't mask the new tracked controller/hand.
+        return user.controllerStates.some(x => x.handedness === handedness && x.isTracking);
     }
 
     /** Is it hand tracking or a controller */
@@ -144,7 +162,9 @@ export class NeedleXRSync {
         if (!userId) return undefined;
         const user = this._states.get(userId);
         if (!user) return undefined;
-        const ctrl = user.controllerStates.find(x => x.handedness === handedness);
+        // prefer the currently tracking controller for this handedness over any stale entry
+        const ctrl = user.controllerStates.find(x => x.handedness === handedness && x.isTracking)
+            ?? user.controllerStates.find(x => x.handedness === handedness);
         return ctrl?.type || "unknown";
     }
 

package/src/engine/xr/TempXRContext.ts

@@ -3,7 +3,7 @@ import { ArrayCamera, AxesHelper, Camera, Color, DirectionalLight, Fog, GridHelp
 import { needleLogoOnlySVG } from "../assets/index.js";
 import { isDevEnvironment } from "../debug/index.js";
 import { ObjectUtils, PrimitiveType } from "../engine_create_objects.js";
-import { $Mhcqc } from "../engine_license.js";
+import { Jkdun } from "../engine_license.js";
 import { Mathf } from "../engine_math.js";
 import { delay, DeviceUtilities } from "../engine_utils.js";
 
@@ -215,7 +215,7 @@ export class TemporaryXRContext {
         this._scene.background = new Color(0x000000);
 
         let logoSrc = needleLogoOnlySVG;
-        if ($Mhcqc()) {
+        if (Jkdun()) {
             const htmlComponent = document.querySelector("needle-engine");
             if (htmlComponent) {
                 const licenseLogo = htmlComponent.getAttribute("logo-src");

package/src/engine-components/SyncedTransform.ts

@@ -5,7 +5,7 @@ import { InstancingUtil } from "../engine/engine_instancing.js";
 import { onUpdate } from '../engine/engine_lifecycle_api.js';
 import { OwnershipModel, RoomEvents } from "../engine/engine_networking.js"
 import { sendDestroyed } from '../engine/engine_networking_instantiate.js';
-import { setWorldEuler } from '../engine/engine_three_utils.js';
+import { getTempVector, setWorldEuler } from '../engine/engine_three_utils.js';
 import * as utils from "../engine/engine_utils.js"
 import { registerBinaryType } from '../engine-schemes/schemes.js';
 import { SyncedTransformModel } from '../engine-schemes/synced-transform-model.js';
@@ -34,9 +34,11 @@ export function createTransformModel(guid: string, b: Behaviour, fast: boolean =
     SyncedTransformModel.addFast(builder, fast);
     const p = b.worldPosition;
     const r = b.worldEuler;
-    const s = b.gameObject.scale; // todo: world scale
+    const s = b.gameObject.worldScale;
+
     // console.log(p, r, s);
     SyncedTransformModel.addTransform(builder, Transform.createTransform(builder, p.x, p.y, p.z, r.x, r.y, r.z, s.x, s.y, s.z));
+    SyncedTransformModel.addVersion(builder, 1);
     const res = SyncedTransformModel.endSyncedTransformModel(builder);
     // SyncedTransformModel.finishSyncedTransformModelBuffer(builder, res);
     builder.finish(res, SyncedTransformIdentifier);
@@ -111,6 +113,9 @@ export class SyncedTransform extends Behaviour {
     /** Whether to smoothly interpolate rotation changes when receiving updates */
     public interpolateRotation: boolean = true;
 
+    /** Whether to smoothly interpolate scale changes when receiving updates */
+    public interpolateScale: boolean = true;
+
     /** When true, sends updates at a higher frequency, useful for fast-moving objects */
     public fastMode: boolean = false;
 
@@ -120,12 +125,14 @@ export class SyncedTransform extends Behaviour {
     // private _state!: SyncedTransformModel;
     private _model: OwnershipModel | null = null;
     private _needsUpdate: boolean = true;
+    private _hadOwnershipBeforeDisable: boolean = false;
     private rb: Rigidbody | null = null;
     private _wasKinematic: boolean | undefined = false;
     private _receivedDataBefore: boolean = false;
 
     private _targetPosition!: Vector3;
     private _targetRotation!: Quaternion;
+    private _targetScale!: Vector3;
 
     private _receivedFastUpdate: boolean = false;
     private _shouldRequestOwnership: boolean = false;
@@ -193,6 +200,7 @@ export class SyncedTransform extends Behaviour {
         this._receivedDataBefore = false;
         this._targetPosition = new Vector3();
         this._targetRotation = new Quaternion();
+        this._targetScale = new Vector3();
 
         // sync instantiate issue was because they shared the same last pos vector!
         this.lastPosition = new Vector3();
@@ -249,6 +257,7 @@ export class SyncedTransform extends Behaviour {
             this.receivedUpdate = true;
             this._receivedFastUpdate = data.fast();
             const transform = data.transform();
+            const dataVersion = data.version();
             if (transform) {
                 InstancingUtil.markDirty(this.gameObject, true);
                 const position = transform.position();
@@ -271,7 +280,19 @@ export class SyncedTransform extends Behaviour {
 
                 const scale = transform.scale();
                 if (scale) {
-                    this.gameObject.scale.set(scale.x(), scale.y(), scale.z());
+                    // before dataVersion 1, local scale was sent; from version 1 on world scale is
+                    // sent (see createTransformModel) and applied in world space so the receiver's
+                    // local scale is derived relative to its own parent hierarchy
+                    if (dataVersion === 0) {
+                        // legacy: local scale, applied directly (no interpolation)
+                        this.gameObject.scale.set(scale.x(), scale.y(), scale.z());
+                    }
+                    else {
+                        if (this.interpolateScale)
+                            this._targetScale.set(scale.x(), scale.y(), scale.z());
+                        if (!this.interpolateScale || !this._receivedDataBefore)
+                            this.gameObject.worldScale = getTempVector(scale.x(), scale.y(), scale.z());
+                    }
                 }
             }
             this._receivedDataBefore = true;
@@ -284,26 +305,37 @@ export class SyncedTransform extends Behaviour {
 
     /** 
      * @internal 
-     * Initializes tracking of position and rotation when component is enabled
+     * Initializes tracking of position,rotation and scale when component is enabled
      */
     onEnable(): void {
         this.lastPosition.copy(this.worldPosition);
         this.lastRotation.copy(this.worldQuaternion);
-        this.lastScale.copy(this.gameObject.scale);
+        this.lastScale.copy(this.gameObject.worldScale);
         this._needsUpdate = true;
         // console.log("ENABLE", this.guid, this.gameObject.guid, this.lastWorldPos);
         if (this._model) {
             this._model.updateIsOwned();
+            // If we owned this before being (transiently) disabled - e.g. the object or an ancestor such
+            // as an XRRig got deactivated - reclaim ownership so syncing resumes automatically. We use
+            // requestOwnershipIfNotOwned so we only reclaim while it is still free, never stealing it from
+            // someone who took it while we were inactive.
+            if (this._hadOwnershipBeforeDisable) {
+                this._hadOwnershipBeforeDisable = false;
+                this._model.requestOwnershipIfNotOwned();
+            }
         }
     }
 
-    /** 
-     * @internal 
+    /**
+     * @internal
      * Releases ownership when component is disabled
      */
     onDisable(): void {
-        if (this._model)
+        if (this._model) {
+            // remember whether we were the owner so we can reclaim it on re-enable (see onEnable)
+            this._hadOwnershipBeforeDisable = this._model.hasOwnership === true;
             this._model.freeOwnership();
+        }
     }
 
 
@@ -334,7 +366,7 @@ export class SyncedTransform extends Behaviour {
 
         const pos = this.worldPosition;
         const rot = this.worldQuaternion;
-        const scale = this.gameObject.scale;
+        const scale = this.gameObject.worldScale;
         if (this._model.isOwned && !this.receivedUpdate) {
             const threshold = this._model.hasOwnership || this.fastMode ? .0001 : .001;
             if (pos.distanceTo(this.lastPosition) > threshold ||
@@ -352,7 +384,8 @@ export class SyncedTransform extends Behaviour {
                     this.worldQuaternion = this.lastRotation;
                     rot.copy(this.lastRotation);
 
-                    this.gameObject.scale.copy(this.lastScale);
+                    this.gameObject.worldScale = this.lastScale;
+                    scale.copy(this.lastScale);
 
                     InstancingUtil.markDirty(this.gameObject, true);
                     this._needsUpdate = false;
@@ -386,6 +419,12 @@ export class SyncedTransform extends Behaviour {
                     this.worldQuaternion = rot;
                     requireMarkDirty = true;
                 }
+                if (this.interpolateScale && this._targetScale) {
+                    const scale = this.gameObject.worldScale;
+                    scale.lerp(this._targetScale, t);
+                    this.gameObject.worldScale = scale;
+                    requireMarkDirty = true;
+                }
                 if (requireMarkDirty)
                     InstancingUtil.markDirty(this.gameObject, true);
             }

package/src/engine-components/export/usdz/USDZExporter.ts

@@ -3,7 +3,7 @@ import { Euler, Material, Matrix4, Mesh, Object3D, Quaternion, Vector3 } from "t
 
 import { isDevEnvironment, showBalloonMessage, showBalloonWarning } from "../../../engine/debug/index.js";
 import { findObjectOfType } from "../../../engine/engine_components.js";
-import { __dSkNu } from "../../../engine/engine_license.js";
+import { _hyjgv } from "../../../engine/engine_license.js";
 import { serializable } from "../../../engine/engine_serialization.js";
 import { getFormattedDate, Progress } from "../../../engine/engine_time_utils.js";
 import { DeviceUtilities, getParam } from "../../../engine/engine_utils.js";
@@ -277,7 +277,7 @@ export class USDZExporter extends Behaviour {
         let name = this.exportFileName ?? this.objectToExport?.name ?? this.name;
         name += "-" + getFormattedDate(); // seems iOS caches the file in some cases, this ensures we always have a fresh file
 
-        if (!__dSkNu()) {
+        if (!_hyjgv()) {
             if (name !== "") name += "-";
             name += "MadeWithNeedle";
         }
@@ -682,7 +682,7 @@ export class USDZExporter extends Behaviour {
                     if (debug)
                         showBalloonMessage("Quicklook url: " + callToActionURL);
                     if (callToActionURL) {
-                        if (!__dSkNu()) {
+                        if (!_hyjgv()) {
                             console.warn("Quicklook closed: custom redirects require a Needle Engine Pro license: https://needle.tools/pricing", callToActionURL)
                         }
                         else {
@@ -697,7 +697,7 @@ export class USDZExporter extends Behaviour {
     private buildQuicklookOverlay(): CustomBranding {
         const obj: CustomBranding = {};
         if (this.customBranding) Object.assign(obj, this.customBranding);
-        if (!__dSkNu()) {
+        if (!_hyjgv()) {
             console.log("Custom Quicklook banner text requires pro license: https://needle.tools/pricing");
             obj.callToAction = "Close";
             obj.checkoutTitle = "🌵 Made with Needle";

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

@@ -42,6 +42,10 @@ export class Avatar extends Behaviour {
     private _leftHandMeshes?: Mesh[];
     private _rightHandMeshes?: Mesh[];
 
+    // meshes of remote avatar hands - hidden render-only so the hand root stays active and keeps syncing
+    private _remoteLeftHandMeshes?: Mesh[];
+    private _remoteRightHandMeshes?: Mesh[];
+
     private _syncTransforms?: SyncedTransform[];
 
     async onEnterXR(_args: NeedleXREventArgs) {
@@ -120,46 +124,54 @@ export class Avatar extends Behaviour {
         }
 
         // synchronize hands
+        // IMPORTANT: never toggle `.visible` on the hand object itself - it carries the SyncedTransform,
+        // and setting it invisible deactivates the component (onDisable -> freeOwnership), which means the
+        // owner loses ownership and stops sending (the remote hand then stays frozen). The head syncs fine
+        // precisely because its synced root is never deactivated (only a child mesh is hidden). So we keep
+        // the hand object active and hide only the rendered meshes (render-only, via setCustomVisibility).
         const leftCtrl = args.xr.leftController;
         const leftObj = this.leftHand?.asset as Object3D;
-        if (leftCtrl && leftObj) {
-            leftObj.position.copy(leftCtrl.gripPosition);
-            leftObj.quaternion.copy(leftCtrl.gripQuaternion);
-            leftObj.quaternion.multiply(flipForwardQuaternion);
-            leftObj.visible = leftCtrl.isTracking;
+        if (leftObj) {
+            if (leftCtrl) {
+                leftObj.position.copy(leftCtrl.gripPosition);
+                leftObj.quaternion.copy(leftCtrl.gripQuaternion);
+                leftObj.quaternion.multiply(flipForwardQuaternion);
+            }
+            leftObj.visible = true;
             this.updateHandVisibility(leftCtrl, leftObj, this._leftHandMeshes);
         }
-        else if (leftObj && leftObj.visible) {
-            leftObj.visible = false;
-        }
 
         const right = args.xr.rightController;
         const rightObj = this.rightHand?.asset as Object3D;
-        if (right && rightObj) {
-            rightObj.position.copy(right.gripPosition);
-            rightObj.quaternion.copy(right.gripQuaternion);
-            rightObj.quaternion.multiply(flipForwardQuaternion);
-            rightObj.visible = right.isTracking;
+        if (rightObj) {
+            if (right) {
+                rightObj.position.copy(right.gripPosition);
+                rightObj.quaternion.copy(right.gripQuaternion);
+                rightObj.quaternion.multiply(flipForwardQuaternion);
+            }
+            rightObj.visible = true;
             this.updateHandVisibility(right, rightObj, this._rightHandMeshes);
         }
-        else if (rightObj && rightObj.visible) {
-            rightObj.visible = false;
-        }
     }
 
     onBeforeRender(): void {
-        if (this.context.xr) {
-            if (this.context.time.frame % 10 === 0)
-                this.updateRemoteAvatarVisibility();
-        }
+        // Remote avatar visibility depends on the *owner's* tracking state, not on whether THIS client is
+        // in XR: other users' avatars are syncInstantiated onto non-XR clients too (spectators / lobby),
+        // and must hide/show their hands correctly there as well. So this runs regardless of the local XR
+        // state. updateRemoteAvatarVisibility() early-outs for the local player and when not connected.
+        if (this.context.time.frame % 10 === 0)
+            this.updateRemoteAvatarVisibility();
     }
 
-    private updateHandVisibility(controller: NeedleXRController, avatarHand: Object3D, meshes: Mesh[] | undefined) {
+    private updateHandVisibility(controller: NeedleXRController | null | undefined, avatarHand: Object3D, meshes: Mesh[] | undefined) {
         if (meshes) {
-            // Hide the hand meshes for the local user if another model (e.g. the controller model) is being rendered
-            // We don't set the visible flag here because it would also disable SyncedTransforms networking
-            const hasOtherRenderingModel = controller.model && controller.model.visible && controller.model !== avatarHand;
-            meshes.forEach(mesh => { setCustomVisibility(mesh, !hasOtherRenderingModel); });
+            // Hide the hand meshes (render-only) when the hand is not tracked, or when another model
+            // (e.g. the controller/hand model) is being rendered in its place. We hide the meshes rather
+            // than the object's `visible` flag because that would disable SyncedTransform networking.
+            const isTracking = controller?.isTracking === true;
+            const hasOtherRenderingModel = !!controller?.model && controller.model.visible && controller.model !== avatarHand;
+            const render = isTracking && !hasOtherRenderingModel;
+            meshes.forEach(mesh => { setCustomVisibility(mesh, render); });
         }
     }
 
@@ -173,14 +185,13 @@ export class Avatar extends Behaviour {
                     if (sync.hasState(state.owner)) {
                         this.tryFindAvatarObjectsIfMissing();
 
-                        const leftObj = this.leftHand?.asset as Object3D;
-                        if (leftObj) {
-                            leftObj.visible = sync?.isTracking(state.owner, "left") ?? false;
-                        }
-                        const rightObj = this.rightHand?.asset as Object3D;
-                        if (rightObj) {
-                            rightObj.visible = sync?.isTracking(state.owner, "right") ?? false;
-                        }
+                        // Keep the hand object active (don't toggle `.visible`) so its SyncedTransform keeps
+                        // applying updates and a non-owner freeOwnership can't strip the owner's ownership.
+                        // Hide/show the rendered meshes based on the owner's tracking state instead.
+                        const leftRendered = sync.isTracking(state.owner, "left") ?? false;
+                        this._remoteLeftHandMeshes = this.setRemoteHandRendered(this.leftHand?.asset as Object3D, this._remoteLeftHandMeshes, leftRendered);
+                        const rightRendered = sync.isTracking(state.owner, "right") ?? false;
+                        this._remoteRightHandMeshes = this.setRemoteHandRendered(this.rightHand?.asset as Object3D, this._remoteRightHandMeshes, rightRendered);
                     }
                 }
 
@@ -198,6 +209,22 @@ export class Avatar extends Behaviour {
 
 
 
+    /**
+     * Show/hide a remote avatar hand render-only. The hand object stays active so its SyncedTransform keeps
+     * applying networked updates (toggling `.visible` would deactivate it and could free the owner's ownership).
+     * The mesh list is gathered lazily and cached, and returned so the caller can keep it.
+     */
+    private setRemoteHandRendered(obj: Object3D | undefined, meshes: Mesh[] | undefined, rendered: boolean): Mesh[] | undefined {
+        if (!obj) return meshes;
+        obj.visible = true;
+        if (!meshes || meshes.length === 0) {
+            meshes = [];
+            obj.traverse(o => { if ((o as Mesh).isMesh) meshes!.push(o as Mesh); });
+        }
+        for (const mesh of meshes) setCustomVisibility(mesh, rendered);
+        return meshes;
+    }
+
     private tryFindAvatarObjectsIfMissing() {
         // if no avatar objects are set, try to find them
         if (!this.head || !this.leftHand || !this.rightHand) {

package/src/engine-schemes/synced-transform-model.ts

@@ -54,8 +54,13 @@ dontSave():boolean {
   return offset ? !!this.bb!.readInt8(this.bb_pos + offset) : false;
 }
 
+version():number {
+  const offset = this.bb!.__offset(this.bb_pos, 12);
+  return offset ? this.bb!.readInt32(this.bb_pos + offset) : 0;
+}
+
 static startSyncedTransformModel(builder:flatbuffers.Builder) {
-  builder.startObject(4);
+  builder.startObject(5);
 }
 
 static addGuid(builder:flatbuffers.Builder, guidOffset:flatbuffers.Offset) {
@@ -74,6 +79,10 @@ static addDontSave(builder:flatbuffers.Builder, dontSave:boolean) {
   builder.addFieldInt8(3, +dontSave, +false);
 }
 
+static addVersion(builder:flatbuffers.Builder, version:number) {
+  builder.addFieldInt32(4, version, 0);
+}
+
 static endSyncedTransformModel(builder:flatbuffers.Builder):flatbuffers.Offset {
   const offset = builder.endObject();
   return offset;

package/src/engine-schemes/transforms.fbs

@@ -20,6 +20,7 @@ table SyncedTransformModel {
     transform: Transform;
     /// if the server should not save this info
     dont_save:bool;
+    version : int;
 }
 
 // file_identifier "STRS";