Needle Engine 3.11.1-beta

Files changed (60) hide show

src/engine-components/export/usdz/extensions/Animation.ts +3 -3
src/engine-components/AnimationUtils.ts +8 -4
src/engine-components/avatar/Avatar_MustacheShake.ts +1 -1
src/engine-components/ui/BaseUIComponent.ts +1 -1
src/engine-components/BasicIKConstraint.ts +12 -12
src/engine-components/Camera.ts +1 -1
src/engine-components/ui/Canvas.ts +1 -1
src/engine-components/CharacterController.ts +1 -1
src/engine/debug/debug_overlay.ts +1 -1
src/engine-components/Duplicatable.ts +1 -1
src/engine/engine_addressables.ts +1 -1
src/engine/engine_context.ts +8 -4
src/engine/engine_element_loading.ts +9 -3
src/engine/engine_element.ts +38 -14
src/engine/engine_gameobject.ts +1 -2
src/engine/engine_hot_reload.ts +1 -1
src/engine/engine_input_utils.ts +1 -1
src/engine/engine_input.ts +3 -3
src/engine/engine_license.ts +4 -4
src/engine/engine_networking_auto.ts +1 -1
src/engine/engine_networking_peer.ts +1 -1
src/engine/engine_networking.ts +1 -1
src/engine/engine_patcher.ts +1 -1
src/engine/engine_physics_rapier.ts +2 -2
src/engine/engine_scenelighting.ts +1 -1
src/engine/engine_serialization_builtin_serializer.ts +3 -4
src/engine/engine_serialization_core.ts +3 -3
src/engine/engine_utils_screenshot.ts +35 -1
src/engine/engine_utils.ts +1 -1
src/engine/engine_web_api.ts +2 -2
src/engine-components/EventList.ts +1 -1
src/engine-components/js-extensions/ExtensionUtils.ts +1 -1
src/engine-components/ui/Graphic.ts +1 -1
src/engine-components/ui/Layout.ts +2 -2
src/engine-components/LODGroup.ts +1 -1
src/engine/extensions/NEEDLE_components.ts +1 -1
src/engine/extensions/NEEDLE_progressive.ts +2 -2
src/needle-engine.ts +50 -50
src/engine-components/OffsetConstraint.ts +1 -1
src/engine-components/ParticleSystem.ts +1 -1
src/engine-components/ParticleSystemModules.ts +2 -2
src/engine-components-experimental/networking/PlayerSync.ts +1 -1
src/engine-components/ReflectionProbe.ts +2 -2
src/engine/codegen/register_types.ts +2 -2
src/engine-components/Renderer.ts +1 -1
src/engine-components/SceneSwitcher.ts +4 -4
src/engine-components/ScreenCapture.ts +1 -1
src/engine-components/timeline/SignalAsset.ts +1 -1
src/engine-components/Skybox.ts +2 -2
src/engine-components/SpriteRenderer.ts +1 -1
src/engine-components/SyncedCamera.ts +207 -207
src/engine-components/SyncedTransform.ts +336 -336
src/engine-components/ui/Text.ts +4 -4
src/engine-components/export/usdz/ThreeUSDZExporter.ts +3 -3
src/engine-components/timeline/TimelineTracks.ts +1 -1
src/engine-components/export/usdz/extensions/USDZUI.ts +1 -1
src/engine-components/webxr/WebARCameraBackground.ts +1 -1
src/engine-components/webxr/WebXRAvatar.ts +1 -1
src/engine-components/webxr/WebXRController.ts +1 -1
src/engine-components/webxr/WebXRSync.ts +463 -463

src/engine-components/export/usdz/extensions/Animation.ts CHANGED Viewed

@@ -234,9 +234,9 @@
         writer.indent++;
         for (const transformData of arr) {
-            let posTimesArray = transformData.pos?.times;
-            let rotTimesArray = transformData.rot?.times;
-            let scaleTimesArray = transformData.scale?.times;
+            const posTimesArray = transformData.pos?.times;
+            const rotTimesArray = transformData.rot?.times;
+            const scaleTimesArray = transformData.scale?.times;
             // timesArray is the sorted union of all time values
             let timesArray: number[] = [];

src/engine-components/AnimationUtils.ts CHANGED Viewed

@@ -73,10 +73,15 @@
         for (const t in animation.tracks) {
             const track = animation.tracks[t];
             const objectName = track["__objectName"] ?? track.name.substring(0, track.name.indexOf("."));
-            const obj = gltf.scene.getObjectByName(objectName);
+            let obj = gltf.scene.getObjectByName(objectName);
             if (!obj) {
-                // console.warn("could not find " + objectName, animation, gltf.scene);
-                continue;
+                // this finds unnamed objects that still have tracks targeting them
+                obj = gltf.scene.getObjectByProperty('uuid', objectName);
+                if (!obj) {
+                    // console.warn("could not find " + objectName, animation, gltf.scene);
+                    continue;
+                }
             }
             let animationComponent = findAnimationGameObjectInParent(obj);
             if (!animationComponent) {
@@ -84,7 +89,6 @@
             }
             const animations = animationComponent.animations = animationComponent.animations || [];
             animation["name_animator"] = animationComponent.name;
-            // console.log(objectName, obj, animator.name, animations.length);
             if (animations.indexOf(animation) < 0) {
                 animations.push(animation);
             }

src/engine-components/avatar/Avatar_MustacheShake.ts CHANGED Viewed

@@ -23,7 +23,7 @@
         if(!this._startPosition) {
             this._startPosition = this.gameObject.position.clone();
         }
-        let t = freq / 100;
+        const t = freq / 100;
         this.gameObject.position.y = this._startPosition.y + t * 0.07;
     }
 }

src/engine-components/ui/BaseUIComponent.ts CHANGED Viewed

@@ -108,7 +108,7 @@
             this.gameObject.add(container);
         }
         else {
-            let targetShadowComponent = this._parentComponent.shadowComponent;
+            const targetShadowComponent = this._parentComponent.shadowComponent;
             if (targetShadowComponent) {
                 // console.log("ADD", this.name, "to", this._parentComponent.name, targetShadowComponent);
                 targetShadowComponent?.add(container);

src/engine-components/BasicIKConstraint.ts CHANGED Viewed

@@ -19,35 +19,35 @@
         // console.log(this);
         // find center
-        let toPos = utils.getWorldPosition(this.to).clone();
-        let fromPos = utils.getWorldPosition(this.from).clone();
-        let dist = toPos.distanceTo(fromPos);
+        const toPos = utils.getWorldPosition(this.to).clone();
+        const fromPos = utils.getWorldPosition(this.from).clone();
+        const dist = toPos.distanceTo(fromPos);
-        let dir0 = toPos.clone();
+        const dir0 = toPos.clone();
         dir0.sub(fromPos);
-        let center = fromPos.clone();
+        const center = fromPos.clone();
         center.add(toPos);
         center.multiplyScalar(0.5);
         // find direction we should offset in
-        let hintDir = utils.getWorldPosition(this.hint).clone();
+        const hintDir = utils.getWorldPosition(this.hint).clone();
         hintDir.sub(center);
-        let offsetDir = new Vector3();
+        const offsetDir = new Vector3();
         offsetDir.crossVectors(hintDir, dir0);
         offsetDir.crossVectors(dir0, offsetDir);
         offsetDir.normalize();
-        let halfDist = dist * 0.5;
-        let stretchDistance = Math.max(this.desiredDistance, halfDist);
-        let offsetLength = Math.sqrt(stretchDistance * stretchDistance - halfDist * halfDist);
+        const halfDist = dist * 0.5;
+        const stretchDistance = Math.max(this.desiredDistance, halfDist);
+        const offsetLength = Math.sqrt(stretchDistance * stretchDistance - halfDist * halfDist);
-        let resultPos = offsetDir.clone();
+        const resultPos = offsetDir.clone();
         resultPos.multiplyScalar(offsetLength);
         resultPos.add(center);
         utils.setWorldPosition(this.gameObject, resultPos);
-        let lookPos = center.clone();
+        const lookPos = center.clone();
         lookPos.sub(offsetDir);
         this.gameObject.lookAt(lookPos);
     }

src/engine-components/Camera.ts CHANGED Viewed

@@ -176,7 +176,7 @@
     private static _origin: THREE.Vector3 = new Vector3();
     private static _direction: THREE.Vector3 = new Vector3();
     public screenPointToRay(x: number, y: number, ray?: Ray): Ray {
-        let cam = this.cam;
+        const cam = this.cam;
         const origin = Camera._origin;
         origin.set(x, y, -1);
         this.context.input.convertScreenspaceToRaycastSpace(origin);

src/engine-components/ui/Canvas.ts CHANGED Viewed

@@ -253,7 +253,7 @@
         if (debugLayout && matrixWorldChanged) console.log("Canvas Layout changed", this.context.time.frameCount, this.name);
         // TODO: optimize this, we should only need to update a subhierarchy of the parts where layout has changed
-        let didLog = false;
+        const didLog = false;
         for (const ch of this._rectTransforms) {
             if (matrixWorldChanged) ch.markDirty();
             let layout = this._layoutGroups.get(ch.gameObject);

src/engine-components/CharacterController.ts CHANGED Viewed

@@ -34,7 +34,7 @@
     }
     onEnable() {
-        let rb = this.rigidbody;
+        const rb = this.rigidbody;
         let collider = this.gameObject.getComponent(CapsuleCollider);
         if (!collider)
             collider = this.gameObject.addNewComponent(CapsuleCollider) as CapsuleCollider;

src/engine/debug/debug_overlay.ts CHANGED Viewed

@@ -42,7 +42,7 @@
         };
         window.addEventListener("error", (event) => {
             if (!event) return;
-            let message = event.error;
+            const message = event.error;
             if (message === undefined) {
                 if (isLocalNetwork())
                     console.warn("Received unknown error", event, event.target);

src/engine-components/Duplicatable.ts CHANGED Viewed

@@ -135,7 +135,7 @@
         if (!current) return false;
         if (current === search) return true;
         if (current.children) {
-            for (let child of current.children) {
+            for (const child of current.children) {
                 if (this.isInChildren(child, search)) {
                     return true;
                 }

src/engine/engine_addressables.ts CHANGED Viewed

@@ -44,7 +44,7 @@
     }
     dispose() {
-        for (let key in this._assetReferences) {
+        for (const key in this._assetReferences) {
             const ref = this._assetReferences[key];
             ref?.unload();
         }

src/engine/engine_context.ts CHANGED Viewed

@@ -402,7 +402,7 @@
 			camera.updateProjectionMatrix();
 	}
-	async onCreate(buildScene?: (context: Context, loadingOptions?: LoadingOptions) => Promise<void>, opts?: LoadingOptions) {
+	async onCreate(buildScene?: (context: Context, loadingOptions?: LoadingOptions) => Promise<GLTF[] | null>, opts?: LoadingOptions) {
 		try {
 			this._isCreating = true;
 			const res = await this.internalOnCreate(buildScene, opts);
@@ -610,7 +610,7 @@
 	}
-	private async internalOnCreate(buildScene?: (context: Context, opts?: LoadingOptions) => Promise<GLTF[] | void>, opts?: LoadingOptions) {
+	private async internalOnCreate(buildScene?: (context: Context, opts?: LoadingOptions) => Promise<GLTF[] | null>, opts?: LoadingOptions) {
 		this.clear();
 		// stop the animation loop if its running during creation
@@ -624,11 +624,15 @@
 		// load and create scene
 		let prepare_succeeded = true;
-		let loadedFiles: GLTF[] | undefined | void = undefined;
+		let loadedFiles: GLTF[] | undefined | null = undefined;
 		try {
 			Context.Current = this;
-			if (buildScene)
+			if (buildScene) {
 				loadedFiles = await buildScene(this, opts);
+				// if the files are null the loading was cancelled
+				// this happens when the src attribute changes during loading and we want to load other files
+				if(loadedFiles === null) return false;
+			}
 		}
 		catch (err) {
 			console.error(err);

src/engine/engine_element_loading.ts CHANGED Viewed

@@ -9,7 +9,7 @@
 const debugRendering = getParam("debugloadingrendering");
 const debugLicense = getParam("debuglicense");
-declare type LoadingStyleOption = "dark" | "light";
+declare type LoadingStyleOption = "dark" | "light" | "auto";
 export class LoadingElementOptions {
     className?: string;
@@ -177,8 +177,14 @@
         if (debug && !existing) console.log("Creating loading element");
         this._loadingElement = existing || document.createElement("div");
-        const loadingStyle: LoadingStyleOption = this._element.getAttribute("loading-style") as LoadingStyleOption;
+        let loadingStyle: LoadingStyleOption = this._element.getAttribute("loading-style") as LoadingStyleOption;
+        if (loadingStyle === "auto") {
+            if (window.matchMedia('(prefers-color-scheme: dark)').matches)
+                loadingStyle = "dark";
+            else
+                loadingStyle = "light";
+        }
         const hasLicense = hasProLicense();
         if (!existing) {
             this._loadingElement.style.position = "absolute";

src/engine/engine_element.ts CHANGED Viewed

@@ -87,6 +87,8 @@
     private _loadingProgress01: number = 0;
     private _loadingView?: ILoadingViewHandler;
     private _previousSrc: string | null | string[] = null;
+    /** set to true after <needle-engine> did load completely at least once. Set to false when <needle-engine> is removed from the document */
+    private _didFullyLoad: boolean = false;
     constructor() {
         super();
@@ -101,9 +103,15 @@
     :host {
         position: relative;
         display: block;
-        width: 600px;
-        height: 300px;
+        width: max(600px, 100vw);
+        height: max(300px, 100vh);
     }
+    @media (max-width: 600px) {
+        :host {
+            width: 100vw;
+            height: 100vh;
+        }
+    }
     :host canvas {
         position: absolute;
         user-select: none;
@@ -171,6 +179,7 @@
     }
     disconnectedCallback() {
+        this._didFullyLoad = false;
         const keepAlive = this.getAttribute("keep-alive");
         if (debug) console.warn("<needle-engine> disconnected, keep-alive:", keepAlive);
         if (keepAlive === undefined || keepAlive !== "true") {
@@ -261,25 +270,38 @@
             },
             cancelable: true
         }));
+        // for local development we allow overriding the loading screen - but we notify the user that it won't work in a deployed environment
         if (useDefaultLoading === false && !allowOverridingDefaultLoading) {
             if (!isDevEnvironment())
                 useDefaultLoading = true;
             console.warn("Needle Engine: You need a commercial license to override the default loading view. Visit https://needle.tools/pricing");
             if (isDevEnvironment()) showBalloonWarning("You need a <a target=\"_blank\" href=\"https://needle.tools/pricing\">commercial license</a> to override the default loading view. This will not work in production.");
         }
+        // create the loading view idf necessary
         if (!this._loadingView && useDefaultLoading)
             this._loadingView = new EngineLoadingView(this);
-        if (useDefaultLoading)
-            this._loadingView?.onLoadingBegin("begin load");
-        if (debug)
-            console.warn("--------------", loadId, "Needle Engine: Begin loading", alias ?? "", filesToLoad);
+        if (useDefaultLoading) {
+            // Only show the loading screen immedialty if we haven't loaded anything before
+            if (this._didFullyLoad !== true)
+                this._loadingView?.onLoadingBegin("begin load");
+            else {
+                // If we have loaded a glb previously and are loading a new glb due to e.g. src change
+                // we don't want to show the loading screen immediately to avoid blinking if the glb to be loaded is tiny
+                // so we wait a bit and only show the loading screen if the loading takes longer than a short moment
+                setTimeout(() => {
+                    // If the loading progress is already above ~ 70% we also don't need to show the loading screen anymore
+                    if (this._loadingView && this._loadingProgress01 < 0.3 && this._loadId === loadId)
+                        this._loadingView.onLoadingBegin("begin load");
+                }, 300)
+            }
+        }
+        if (debug) console.warn("--------------", loadId, "Needle Engine: Begin loading", alias ?? "", filesToLoad);
         this.onBeforeBeginLoading();
-        if (debug) console.log(filesToLoad);
+        type LoadFunctionResult = (ctx: Context) => Promise<LoadedGLTF[] | null>;
+        let loadFunction: null | LoadFunctionResult = null;
+        const loadedFiles: Array<LoadedGLTF> = [];
-        let loadFunction: any = null;
-        let loadedFiles: Array<LoadedGLTF> = [];
         if (filesToLoad?.length > 0) {
             loadFunction = async (ctx: Context) => {
                 let hash = 0;
@@ -312,6 +334,7 @@
                         }
                     }
                     const res = await loader.loadSync(ctx, url, url, hash, prog => {
+                        if(this._loadId !== loadId) return;
                         // Calc progress
                         progress.progress = prog;
                         this._loadingProgress01 = calculateProgress01(progress);
@@ -332,13 +355,13 @@
                             // if the loading ID changed but the scene has already been loaded we want to dispose it
                             if (this._loadId !== loadId) {
                                 destroy(obj, true, true)
-                                return loadedFiles;
+                                return null;
                             }
                             GameObject.add(obj, ctx.scene, ctx);
                         }
                     }
                 }
-                if (this._loadId !== loadId) return loadedFiles;
+                if (this._loadId !== loadId) return null;
                 return loadedFiles;
             };
         }
@@ -347,7 +370,7 @@
         if (currentHash !== null && currentHash !== undefined)
             this._context.hash = currentHash;
         this._context.alias = alias;
-        await this._context.onCreate(loadFunction);
+        await this._context.onCreate(loadFunction as any);
         if (this._loadId !== loadId) return;
         if (debug)
             console.warn("--------------", loadId, "Needle Engine: finished loading", alias ?? "", filesToLoad);
@@ -355,6 +378,7 @@
         if (useDefaultLoading) {
             this._loadingView?.onLoadingUpdate(1, "creating scene");
         }
+        this._didFullyLoad = true;
         this.classList.remove("loading");
         this.classList.add("loading-finished");
         this.dispatchEvent(new CustomEvent("loadfinished", {
@@ -554,7 +578,7 @@
     const parts = str.split("/");
     let name = parts[parts.length - 1];
     // Remove params
-    let index = name.indexOf("?")
+    const index = name.indexOf("?")
     if (index > 0)
         name = name.substring(0, index);
     return decodeURIComponent(name);

src/engine/engine_gameobject.ts CHANGED Viewed

@@ -317,8 +317,7 @@
     instance.userData = {};
     const children = instance.children;
     instance.children = [];
-    let clone: Object3D | GameObject;
-    clone = instance.clone(false);
+    const clone: Object3D | GameObject = instance.clone(false);
     apply(clone);
     // if(instance[$originalGuid])
     //     clone[$originalGuid] = instance[$originalGuid];

src/engine/engine_hot_reload.ts CHANGED Viewed

@@ -102,7 +102,7 @@
             const instancesOfType = instances.get(newType.name);
             let hotReloadMessage = "[Needle Engine] Updating type: " + key;
-            let typesCount = instancesOfType?.length ?? -1;
+            const typesCount = instancesOfType?.length ?? -1;
             if (typesCount > 0) hotReloadMessage += " x" + typesCount;
             else hotReloadMessage += " - no instances";
             console.log(hotReloadMessage);

src/engine/engine_input_utils.ts CHANGED Viewed

@@ -9,7 +9,7 @@
             document.removeEventListener('touchstart', fn);
             res();
         };
-        let fn = callback;
+        const fn = callback;
         document.addEventListener('pointerdown', fn);
         document.addEventListener('click', fn);
         document.addEventListener('dragstart', fn);

src/engine/engine_input.ts CHANGED Viewed

@@ -487,20 +487,20 @@
     private onMouseDown = (evt: MouseEvent) => {
         if (evt.defaultPrevented) return;
         if (this.canReceiveInput(evt) === false) return;
-        let i = evt.button;
+        const i = evt.button;
         this.onDown({ button: i, clientX: evt.clientX, clientY: evt.clientY, pointerType: PointerType.Mouse, source: evt });
     }
     private onMouseMove = (evt: MouseEvent) => {
         if (evt.defaultPrevented) return;
-        let i = evt.button;
+        const i = evt.button;
         const args: PointerEventArgs = { button: i, clientX: evt.clientX, clientY: evt.clientY, pointerType: PointerType.Mouse, source: evt, movementX: evt.movementX, movementY: evt.movementY };
         this.onMove(args);
     }
     private onMouseUp = (evt: MouseEvent) => {
         if (evt.defaultPrevented) return;
-        let i = evt.button;
+        const i = evt.button;
         if (!this.isNewEvent(evt.timeStamp, i, this._pointerUpTimestamp)) return;
         this.onUp({ button: i, clientX: evt.clientX, clientY: evt.clientY, pointerType: PointerType.Mouse, source: evt });
     }

src/engine/engine_license.ts CHANGED Viewed

@@ -38,7 +38,7 @@
     sendUsageMessageToAnalyticsBackend();
 });
-export let runtimeLicenseCheckPromise: Promise<void>;
+export let runtimeLicenseCheckPromise: Promise<void> | undefined = undefined;
 async function checkLicense() {
     // Only perform the runtime license check once
     if (runtimeLicenseCheckPromise) return runtimeLicenseCheckPromise;
@@ -107,7 +107,7 @@
         }
     }, 100);
-    let svg = `<img class="logo" src="${logoSVG}" style="width: 40px; height: 40px; margin-right: 2px; vertical-align: middle; margin-bottom: 2px;"/>`;
+    const svg = `<img class="logo" src="${logoSVG}" style="width: 40px; height: 40px; margin-right: 2px; vertical-align: middle; margin-bottom: 2px;"/>`;
     const logoElement = document.createElement("div");
     logoElement.innerHTML = svg;
     logoElement.classList.add("logo");
@@ -158,7 +158,7 @@
         border: 2px solid rgba(160,160,160,.5);
     `;
     // url must contain https for firefox to make it clickable
-    let licenseText = "Needle Engine — No license active, commercial use is not allowed. Visit https://needle.tools/pricing for more information and licensing options.";
+    const licenseText = "Needle Engine — No license active, commercial use is not allowed. Visit https://needle.tools/pricing for more information and licensing options.";
     console.log("%c " + licenseText, style);
 }
@@ -295,7 +295,7 @@
     try {
         const analyticsBackendUrlForward = "https://urls.needle.tools/analytics-endpoint-v2";
         const res = await fetch(analyticsBackendUrlForward);
-        let analyticsUrl = await res.text();
+        const analyticsUrl = await res.text();
         if (analyticsUrl) {
             if (debug) console.log("Analytics backend url", analyticsUrl);

src/engine/engine_networking_auto.ts CHANGED Viewed

@@ -346,7 +346,7 @@
         if (setter) {
             descriptor.set = function (value: T) {
-                let valueChanged = false;
+                const valueChanged = false;
                 const syncer = getSyncer(this);

src/engine/engine_networking_peer.ts CHANGED Viewed

@@ -28,7 +28,7 @@
     }
     private trySetupHost(id: string) {
-        let host = new Peer(id);
+        const host = new Peer(id);
         host.on("error", err => {
             console.error(err);
             this._host = undefined;

src/engine/engine_networking.ts CHANGED Viewed

@@ -467,7 +467,7 @@
             }
             if(serverUrl === undefined){
                 console.log("Fetch default backend url: " + defaultNetworkingBackendUrlProvider);
-                let failed = false;
+                const failed = false;
                 const defaultUrlResponse = await fetch(defaultNetworkingBackendUrlProvider);
                 serverUrl = await defaultUrlResponse.text();
                 if(failed) return;

src/engine/engine_patcher.ts CHANGED Viewed

@@ -154,7 +154,7 @@
 }
 function getPatches(prototype, fieldName: string) {
-    let patchesMap = patches().get(prototype);
+    const patchesMap = patches().get(prototype);
     if (!patchesMap) {
         return null;
     }

src/engine/engine_physics_rapier.ts CHANGED Viewed

@@ -947,8 +947,8 @@
         this.calculateJointRelativeMatrices(body1.gameObject, body2.gameObject, this._tempMatrix);
         this._tempMatrix.decompose(this._tempPosition, this._tempQuaternion, this._tempScale);
-        let params = RAPIER.JointData.revolute(anchor, this._tempPosition, axis);
-        let joint = this.world.createImpulseJoint(params, b1, b2, true);
+        const params = RAPIER.JointData.revolute(anchor, this._tempPosition, axis);
+        const joint = this.world.createImpulseJoint(params, b1, b2, true);
         if (debugPhysics)
             console.log("ADD HINGE JOINT", joint)
     }

src/engine/engine_scenelighting.ts CHANGED Viewed

@@ -233,7 +233,7 @@
         // fallback
         if (this._waitPromise) return this._waitPromise;
         this._waitPromise = new Promise((res, _rej) => {
-            let interval = setInterval(async () => {
+            const interval = setInterval(async () => {
                 const ex = this.internalGetReflection(sourceId);
                 if (ex) {
                     clearInterval(interval);

src/engine/engine_serialization_builtin_serializer.ts CHANGED Viewed

@@ -112,7 +112,7 @@
                 // independent of order of loading
                 let res: GameObject | Behaviour | undefined | null = undefined;
                 // first try to search in the current gltf scene (if any)
-                let gltfScene = context.gltf?.scene;
+                const gltfScene = context.gltf?.scene;
                 if (gltfScene) {
                     res = GameObject.findByGuid(data.guid, gltfScene);
                 }
@@ -273,9 +273,8 @@
                                 printWarningMethodNotFound();
                         }
                     }
-                    let fn: CallInfo | undefined;
                     let args = call.argument;
                     if (args !== undefined) {
                         if (typeof args === "object") {
                             // Try to deserialize the call argument to either a object or a component reference
@@ -287,7 +286,7 @@
                     // This is the final method we pass to the call info (or undefined if the method couldnt be resolved)
                     const eventMethod = hasMethod ? this.createEventMethod(target, call.method, args) : undefined;
-                    fn = new CallInfo(eventMethod, call.enabled);
+                    const fn = new CallInfo(eventMethod, call.enabled);
                     if (!fn.method)

src/engine/engine_serialization_core.ts CHANGED Viewed

@@ -54,7 +54,7 @@
                 console.log("FOUND " + name, type.name, type.constructor.name, res, this.typeMap);
             return res;
         }
-        let parent = Object.getPrototypeOf(type);
+        const parent = Object.getPrototypeOf(type);
         const hasPrototypeOrConstructor = parent.prototype || parent.constructor;
         // console.log(name, type, parent);
         if (!hasPrototypeOrConstructor) {
@@ -221,7 +221,7 @@
     if (types === undefined) return null;
     const res = {};
     for (const key in types) {
-        let val = obj[key];
+        const val = obj[key];
         // if the object bein serialized is some type of object check if we have special handling registered for it
         if (val !== undefined && val !== null && typeof val === "object") {
@@ -609,7 +609,7 @@
     if (source === undefined || source === null) return;
     if (target === undefined || target === null) return;
-    let onlyDeclared = false;
+    const onlyDeclared = false;
     // if (onlyDeclared === true && target.constructor) {
     //     if (target.constructor[ALL_PROPERTIES_MARKER] === true)
     //         onlyDeclared = false;

src/engine/engine_utils_screenshot.ts CHANGED Viewed

@@ -1,10 +1,22 @@
+import { ContextRegistry } from "./engine_context_registry.js";
 import { Context } from "./engine_setup.js";
 import { PerspectiveCamera, Camera } from "three";
 declare type ImageMimeType = "image/webp" | "image/png";
-export function screenshot(context: Context, width: number, height: number, mimeType: ImageMimeType = "image/webp", camera?: Camera | null) {
+/**
+ * Take a screenshot from the current scene
+ */
+export function screenshot(context?: Context, width?: number, height?: number, mimeType: ImageMimeType = "image/webp", camera?: Camera | null): string | null {
+    if (!context) {
+        context = ContextRegistry.Current as Context;
+        if (!context) {
+            console.error("Can not save screenshot: No needle-engine context found or provided.");
+            return null;
+        }
+    }
     if (!camera) {
         camera = context.mainCamera;
         if (!camera) {
@@ -15,6 +27,9 @@
     const prevWidth = context.renderer.domElement.width;
     const prevHeight = context.renderer.domElement.height;
+    if (!width) width = prevWidth;
+    if (!height) height = prevHeight;
     try {
         const canvas = context.renderer.domElement;
@@ -39,4 +54,23 @@
     }
     return null;
+}
+let saveImageElement: HTMLAnchorElement | null = null;
+/** Download a image (must be a data url) */
+export function saveImage(dataUrl: string | null, filename: string) {
+    if (!dataUrl) {
+        return;
+    }
+    if (!dataUrl.startsWith("data:image")) {
+        console.error("Can not save image: Data url is not an image", dataUrl);
+        return;
+    }
+    if (!saveImageElement) {
+        saveImageElement = document.createElement("a");
+    }
+    saveImageElement.href = dataUrl;
+    saveImageElement.download = filename;
+    saveImageElement.click();
 }

src/engine/engine_utils.ts CHANGED Viewed

@@ -252,7 +252,7 @@
         // Take the source uri as the base path
         const basePath = source.substring(0, pathIndex + 1);
         // Append the relative uri
-        let newUri = basePath + uri;
+        const newUri = basePath + uri;
         // newUri = new URL(newUri, globalThis.location.href).href;
         if (debugGetPath) console.log("source:", source, "- changed uri \nfrom", uri, "\n→ ", newUri, "\n" + basePath);
         return newUri;

src/engine/engine_web_api.ts CHANGED Viewed

@@ -97,7 +97,7 @@
     if (!reader) return null;
     let received: number = 0;
-    let chunks: Uint8Array[] = [];
+    const chunks: Uint8Array[] = [];
     while (true) {
         const { done, value } = await reader.read();
         if (value) {
@@ -112,7 +112,7 @@
     }
     const final = new Uint8Array(received);
     let position = 0;
-    for (let chunk of chunks) {
+    for (const chunk of chunks) {
         final.set(chunk, position);
         position += chunk.length;
     }

src/engine-components/EventList.ts CHANGED Viewed

@@ -43,7 +43,7 @@
         if (this.key !== undefined) {
             let temp = "";
             let foundFirstLetter = false;
-            for (let c of this.key) {
+            for (const c of this.key) {
                 if (foundFirstLetter && isUpperCase(c))
                     temp += "-";
                 foundFirstLetter = true;

src/engine-components/js-extensions/ExtensionUtils.ts CHANGED Viewed

@@ -11,7 +11,7 @@
         console.warn("No prototype found", obj, obj.prototype, obj.constructor);
         return;
     }
-    let handler = handlers.get(prototype);
+    const handler = handlers.get(prototype);
     if (handler) {
         // console.log("OK", prototype);
         handler.apply(obj);

src/engine-components/ui/Graphic.ts CHANGED Viewed

@@ -150,7 +150,7 @@
         if (this._currentlyCreatingPanel) return;
         this._currentlyCreatingPanel = true;
-        let offset = .015;
+        const offset = .015;
         // if (this.Root) offset = .02 * (1 / this.Root.gameObject.scale.z);
         const opts = {
             backgroundColor: this.color,

src/engine-components/ui/Layout.ts CHANGED Viewed

@@ -269,13 +269,13 @@
                 }
                 const size = isHorizontal ? rt.width : rt.height;
-                let halfSize = size * .5;
+                const halfSize = size * .5;
                 start += halfSize;
                 // TODO: this isnt correct yet!
                 if (forceExpandSize) {
                     // this is the center of the cell
-                    let preferredStart = sizePerChild * k - sizePerChild * .5;
+                    const preferredStart = sizePerChild * k - sizePerChild * .5;
                     if (preferredStart > start) {
                         start = preferredStart - sizePerChild * .5 + size + this.padding.left;
                         start -= halfSize;

src/engine-components/LODGroup.ts CHANGED Viewed

@@ -67,7 +67,7 @@
         if (this.lodModels && Array.isArray(this.lodModels)) {
             let maxDistance = 0;
-            let renderers: Renderer[] = [];
+            const renderers: Renderer[] = [];
             for (const model of this.lodModels) {
                 maxDistance = Math.max(model.distance, maxDistance);
                 const lod = new LOD(model);

src/engine/extensions/NEEDLE_components.ts CHANGED Viewed

@@ -104,7 +104,7 @@
     }
     writeNode(node: Object3D, nodeDef) {
-        let nodeIndex = this.writer.json.nodes.length;
+        const nodeIndex = this.writer.json.nodes.length;
         console.log(node.name, nodeIndex, node.uuid);
         const context = new ExportData(node, nodeIndex, nodeDef);
         this.exportContext[nodeIndex] = context;

src/engine/extensions/NEEDLE_progressive.ts CHANGED Viewed

@@ -43,7 +43,7 @@
         const promises: Promise<Texture | null>[] = [];
-        for (let slot of Object.keys(material)) {
+        for (const slot of Object.keys(material)) {
             const val = material[slot];
             if (val?.isTexture) {
                 const task = this.assignTextureLODForSlot(context, source, material, level, slot, val);
@@ -53,7 +53,7 @@
         if (material instanceof RawShaderMaterial) {
             // iterate uniforms
-            for (let slot of Object.keys(material.uniforms)) {
+            for (const slot of Object.keys(material.uniforms)) {
                 const val = material.uniforms[slot].value;
                 if (val?.isTexture) {
                     const task = this.assignTextureLODForSlot(context, source, material, level, slot, val);

src/needle-engine.ts CHANGED Viewed

@@ -1,50 +1,50 @@
-import { makeErrorsVisibleForDevelopment } from "./engine/debug/debug_overlay.js";
-makeErrorsVisibleForDevelopment();
-import "./engine/engine_element.js";
-import "./engine/engine_setup.js";
-export * from "./engine/api.js";
-export * from "./engine-components/api.js";
-export * from "./engine-components-experimental/api.js";
-export * from "./engine-schemes/api.js";
-// make accessible for external javascript
-import { Context } from "./engine/engine_setup.js";
-const Needle = { Context: Context };
-if (globalThis["Needle"] !== undefined) {
-    console.warn("Needle Engine is already imported");
-}
-globalThis["Needle"] = Needle;
-function registerGlobal(obj: object) {
-    for (const key in obj) {
-        Needle[key] = obj[key];
-    }
-}
-import * as Component from "./engine-components/Component.js";
-registerGlobal(Component);
-import * as Components from "./engine-components/codegen/components.js";
-registerGlobal(Components);
-import { GameObject } from "./engine-components/Component.js";
-for (const method of Object.getOwnPropertyNames(GameObject)) {
-    switch (method) {
-        case "prototype":
-        case "constructor":
-        case "length":
-        case "name":
-            continue;
-        default:
-            Needle[method] = GameObject[method];
-            break;
-    }
-}
-// make three accessible
-import * as THREE from "three";
-if (!globalThis["THREE"]) {
-    globalThis["THREE"] = THREE;
-}
-else console.warn("Threejs is already imported");
+import { makeErrorsVisibleForDevelopment } from "./engine/debug/debug_overlay.js";
+makeErrorsVisibleForDevelopment();
+import "./engine/engine_element.js";
+import "./engine/engine_setup.js";
+export * from "./engine/api.js";
+export * from "./engine-components/api.js";
+export * from "./engine-components-experimental/api.js";
+export * from "./engine-schemes/api.js";
+// make accessible for external javascript
+import { Context } from "./engine/engine_setup.js";
+const Needle = { Context: Context };
+if (globalThis["Needle"] !== undefined) {
+    console.warn("Needle Engine is already imported");
+}
+globalThis["Needle"] = Needle;
+function registerGlobal(obj: object) {
+    for (const key in obj) {
+        Needle[key] = obj[key];
+    }
+}
+import * as Component from "./engine-components/Component.js";
+registerGlobal(Component);
+import * as Components from "./engine-components/codegen/components.js";
+registerGlobal(Components);
+import { GameObject } from "./engine-components/Component.js";
+for (const method of Object.getOwnPropertyNames(GameObject)) {
+    switch (method) {
+        case "prototype":
+        case "constructor":
+        case "length":
+        case "name":
+            continue;
+        default:
+            Needle[method] = GameObject[method];
+            break;
+    }
+}
+// make three accessible
+import * as THREE from "three";
+if (!globalThis["THREE"]) {
+    globalThis["THREE"] = THREE;
+}
+else console.warn("Threejs is already imported");

src/engine-components/OffsetConstraint.ts CHANGED Viewed

@@ -52,7 +52,7 @@
         const quat = new Quaternion().setFromEuler(euler);
         if(this.affectRotation) utils.setWorldQuaternion(this.gameObject, rot.multiply(quat));
-        let lookDirection = new Vector3();
+        const lookDirection = new Vector3();
         this.from.getWorldDirection(lookDirection).multiplyScalar(50);
         if (this.levelLookDirection) lookDirection.y = 0;
         if (this.alignLookDirection) this.gameObject.lookAt(lookDirection);

src/engine-components/ParticleSystem.ts CHANGED Viewed

@@ -451,7 +451,7 @@
         //////////////////////
         // calculate speed
         const baseVelocity = particle[$startVelocity];
-        let gravityFactor = particle[$gravityFactor];
+        const gravityFactor = particle[$gravityFactor];
         if (gravityFactor !== 0) {
             const factor = gravityFactor * particle[$gravitySpeed];
             temp3.copy(this._gravityDirection).multiplyScalar(factor);

src/engine-components/ParticleSystemModules.ts CHANGED Viewed

@@ -973,7 +973,7 @@
     worldSpace: boolean = false;
     getWidth(size: number, _life01: number, pos01: number, t : number) {
-        let res = this.widthOverTrail.evaluate(pos01, t);
+        const res = this.widthOverTrail.evaluate(pos01, t);
         size *= res;
         return size;
     }
@@ -1346,7 +1346,7 @@
             const speed = baseVelocity.length();
             if (speed > max) {
                 this._temp.copy(baseVelocity).normalize().multiplyScalar(max);
-                let t = this.dampen * .5;
+                const t = this.dampen * .5;
                 // t *= scale;
                 baseVelocity.x = Mathf.lerp(baseVelocity.x, this._temp.x, t);
                 baseVelocity.y = Mathf.lerp(baseVelocity.y, this._temp.y, t);

src/engine-components-experimental/networking/PlayerSync.ts CHANGED Viewed

@@ -35,7 +35,7 @@
         const instance = await this.asset?.instantiateSynced({ parent: this.gameObject }, true);
         if (instance) {
-            let pl = GameObject.getComponent(instance, PlayerState);
+            const pl = GameObject.getComponent(instance, PlayerState);
             if (pl) {
                 pl.owner = this.context.connection.connectionId!;
                 this.onPlayerSpawned?.invoke(instance);

src/engine-components/ReflectionProbe.ts CHANGED Viewed

@@ -140,8 +140,8 @@
             // make sure we have the currently assigned material cached (and an up to date clone of that)
             // TODO: this is causing problems with progressive textures sometimes (depending on the order) when the version changes and we re-create materials over and over. We might want to just set the material envmap instead of making a clone
-            let isCachedInstance = material === cached?.copy;
-            let hasChanged = !cached || cached.material.uuid !== material.uuid || cached.copy.version !== material.version;
+            const isCachedInstance = material === cached?.copy;
+            const hasChanged = !cached || cached.material.uuid !== material.uuid || cached.copy.version !== material.version;
             if (!isCachedInstance && hasChanged) {
                 if (debug) {
                     let reason = "";

src/engine/codegen/register_types.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { TypeStore } from "./../engine_typestore.js"
 // Import types
 import { __Ignore } from "../../engine-components/codegen/components.js";
 import { ActionBuilder } from "../../engine-components/export/usdz/extensions/behavior/BehavioursBuilder.js";
@@ -217,7 +217,7 @@
 import { XRGrabRendering } from "../../engine-components/webxr/WebXRGrabRendering.js";
 import { XRRig } from "../../engine-components/webxr/WebXRRig.js";
 import { XRState } from "../../engine-components/XRFlag.js";
 // Register types
 TypeStore.add("__Ignore", __Ignore);
 TypeStore.add("ActionBuilder", ActionBuilder);

src/engine-components/Renderer.ts CHANGED Viewed

@@ -853,7 +853,7 @@
     private autoUpdateInstanceMatrix(obj: Object3D) {
         const original = obj.matrixWorld["multiplyMatrices"].bind(obj.matrixWorld);
-        let previousMatrix: THREE.Matrix4 = obj.matrixWorld.clone();
+        const previousMatrix: THREE.Matrix4 = obj.matrixWorld.clone();
         const matrixChangeWrapper = (a: Matrix4, b: Matrix4) => {
             const newMatrixWorld = original(a, b);
             if (obj[NEED_UPDATE_INSTANCE_KEY] || previousMatrix.equals(newMatrixWorld) === false) {

src/engine-components/SceneSwitcher.ts CHANGED Viewed

@@ -147,7 +147,7 @@
     private onPopState = async (_state: PopStateEvent) => {
         if (!this.useHistory) return;
-        let wasUsingHistory = this.useHistory;
+        const wasUsingHistory = this.useHistory;
         try {
             this.useHistory = false;
             let didResolve = false;
@@ -366,7 +366,7 @@
 function sceneUriToName(uri: string): string {
     const name = uri.split("/").pop();
-    let value = name?.split(".").shift();
+    const value = name?.split(".").shift();
     if (value?.length) return value;
     return uri;
 }
@@ -398,7 +398,7 @@
         let searchDistance: number;
         let searchCall: number;
         const array = this._switcher.scenes;
-        let interval = setInterval(() => {
+        const interval = setInterval(() => {
             if (this.allLoaded()) {
                 if (debug)
                     console.log("All scenes loaded");
@@ -419,7 +419,7 @@
             searchCall += 1;
             const maxSearchDistance = searchForward ? this.maxLoadAhead : this.maxLoadBehind;
             if (searchDistance > maxSearchDistance) return;
-            let roomIndex = searchForward ? lastRoom + searchDistance : lastRoom - searchDistance;
+            const roomIndex = searchForward ? lastRoom + searchDistance : lastRoom - searchDistance;
             if (roomIndex < 0) return;
             // if (roomIndex < 0) roomIndex = array.length + roomIndex;
             if (roomIndex < 0 || roomIndex >= array.length) return;

src/engine-components/ScreenCapture.ts CHANGED Viewed

@@ -556,7 +556,7 @@
             call.on("stream", () => {
                 // workaround for https://github.com/peers/peerjs/issues/636
                 let intervalCounter = 0;
-                let closeInterval = setInterval(() => {
+                const closeInterval = setInterval(() => {
                     const isFirstInterval = intervalCounter === 0;
                     if (!handle.isOpen && isFirstInterval) {
                         intervalCounter += 1;

src/engine-components/timeline/SignalAsset.ts CHANGED Viewed

@@ -64,7 +64,7 @@
     invoke(sig: SignalAsset | string) {
         if (!this.events || !Array.isArray(this.events)) return;
-        let id = typeof sig === "object" ? sig.guid : sig;
+        const id = typeof sig === "object" ? sig.guid : sig;
         for (const evt of this.events) {
             if (evt.signal.guid === id) {
                 try {

src/engine-components/Skybox.ts CHANGED Viewed

@@ -40,7 +40,7 @@
     const context = args.context;
     const skyboxImage = context.domElement.getAttribute("skybox-image");
     const environmentImage = context.domElement.getAttribute("environment-image");
-    let promises = new Array<Promise<any>>();
+    const promises = new Array<Promise<any>>();
     if (skyboxImage) {
         if (debug) console.log("Creating remote skybox to load " + skyboxImage);
@@ -174,7 +174,7 @@
         const cached = tryGetPreviouslyLoadedTexture(url);
         if (cached) {
             const res = await cached;
-            if (res.source?.data?.length > 0) return res;
+            if (res.source?.data?.length > 0 || res.source?.data?.data?.length) return res;
         }
         const isEXR = url.endsWith(".exr");
         const isHdr = url.endsWith(".hdr");

src/engine-components/SpriteRenderer.ts CHANGED Viewed

@@ -106,7 +106,7 @@
         if (index < 0 || index >= this.spriteSheet.sprites.length)
             return;
         const slice = this.spriteSheet.sprites[index];
-        let tex = slice?.texture;
+        const tex = slice?.texture;
         if (!tex) return;
         tex.colorSpace = THREE.SRGBColorSpace;
         if (tex.minFilter == NearestFilter && tex.magFilter == NearestFilter)

src/engine-components/SyncedCamera.ts CHANGED Viewed

@@ -1,208 +1,208 @@
-import { NetworkConnection } from "../engine/engine_networking.js";
-import { Behaviour, GameObject } from "./Component.js";
-import { Camera } from "./Camera.js";
-import * as utils from "../engine/engine_three_utils.js"
-import { WebXR } from "./webxr/WebXR.js";
-import { Builder } from "flatbuffers";
-import { SyncedCameraModel } from "../engine-schemes/synced-camera-model.js";
-import { Vec3 } from "../engine-schemes/vec3.js";
-import { registerBinaryType } from "../engine-schemes/schemes.js";
-import { InstancingUtil } from "../engine/engine_instancing.js";
-import { serializable } from "../engine/engine_serialization_decorator.js";
-import { Object3D } from "three";
-import { AvatarMarker } from "./webxr/WebXRAvatar.js";
-import { AssetReference } from "../engine/engine_addressables.js";
-import { ViewDevice } from "../engine/engine_playerview.js";
-import { InstantiateOptions } from "../engine/engine_gameobject.js";
-const SyncedCameraModelIdentifier = "SCAM";
-registerBinaryType(SyncedCameraModelIdentifier, SyncedCameraModel.getRootAsSyncedCameraModel);
-const builder = new Builder();
-// enum CameraSyncEvent {
-//     Update = "sync-update-camera",
-// }
-class CameraModel {
-    userId: string;
-    guid: string;
-    // dontSave: boolean = true;
-    // pos: { x: number, y: number, z: number } = { x: 0, y: 0, z: 0 };
-    // rot: { x: number, y: number, z: number } = { x: 0, y: 0, z: 0 };
-    constructor(connectionId: string, guid: string) {
-        this.guid = guid;
-        this.userId = connectionId;
-    }
-    send(cam: THREE.Camera | null | undefined, con: NetworkConnection) {
-        if (cam) {
-            builder.clear();
-            const guid = builder.createString(this.guid);
-            const userId = builder.createString(this.userId);
-            SyncedCameraModel.startSyncedCameraModel(builder);
-            SyncedCameraModel.addGuid(builder, guid);
-            SyncedCameraModel.addUserId(builder, userId);
-            const p = utils.getWorldPosition(cam);
-            const r = utils.getWorldRotation(cam);
-            SyncedCameraModel.addPos(builder, Vec3.createVec3(builder, p.x, p.y, p.z));
-            SyncedCameraModel.addRot(builder, Vec3.createVec3(builder, r.x, r.y, r.z));
-            const offset = SyncedCameraModel.endSyncedCameraModel(builder);
-            builder.finish(offset, SyncedCameraModelIdentifier);
-            con.sendBinary(builder.asUint8Array());
-        }
-    }
-}
-declare type UserCamInfo = {
-    obj: THREE.Object3D,
-    lastUpdate: number;
-    userId: string;
-};
-export class SyncedCamera extends Behaviour {
-    static instances: UserCamInfo[] = [];
-    getCameraObject(userId: string): THREE.Object3D | null {
-        const guid = this.userToCamMap[userId];
-        if (!guid) return null;
-        return this.remoteCams[guid].obj;
-    }
-    @serializable([Object3D, AssetReference])
-    public cameraPrefab: THREE.Object3D | null | AssetReference = null;
-    private _lastWorldPosition!: THREE.Vector3;
-    private _lastWorldQuaternion!: THREE.Quaternion;
-    private _model: CameraModel | null = null;
-    private _needsUpdate: boolean = true;
-    private _lastUpdateTime: number = 0;
-    private remoteCams: { [id: string]: UserCamInfo } = {};
-    private userToCamMap: { [id: string]: string } = {};
-    private _camTimeoutInSeconds = 10;
-    private _receiveCallback: Function | null = null;
-    async awake() {
-        this._lastWorldPosition = this.worldPosition.clone();
-        this._lastWorldQuaternion = this.worldQuaternion.clone();
-        if (this.cameraPrefab) {
-            if ("uri" in this.cameraPrefab) {
-                this.cameraPrefab = await this.cameraPrefab.instantiate(this.gameObject);
-            }
-            if (this.cameraPrefab && "isObject3D" in this.cameraPrefab) {
-                this.cameraPrefab.visible = false;
-            }
-        }
-    }
-    onEnable(): void {
-        this._receiveCallback = this.context.connection.beginListenBinary(SyncedCameraModelIdentifier, this.onReceivedRemoteCameraInfoBin.bind(this));
-    }
-    onDisable(): void {
-        this.context.connection.stopListenBinary(SyncedCameraModelIdentifier, this._receiveCallback);
-    }
-    update(): void {
-        for (const guid in this.remoteCams) {
-            const cam = this.remoteCams[guid];
-            const timeDiff = this.context.time.realtimeSinceStartup - cam.lastUpdate;
-            if (!cam || (timeDiff) > this._camTimeoutInSeconds) {
-                console.log("Remote cam timeout", cam, timeDiff);
-                if (cam?.obj) {
-                    GameObject.destroy(cam.obj);
-                }
-                delete this.remoteCams[guid];
-                if (cam)
-                    delete this.userToCamMap[cam.userId];
-                SyncedCamera.instances.push(cam);
-                this.context.players.removePlayerView(cam.userId, ViewDevice.Browser);
-                continue;
-            }
-        }
-        if (WebXR.IsInWebXR) return;
-        const cam = this.context.mainCamera
-        if (cam === null) {
-            this.enabled = false;
-            return;
-        }
-        if (!this.context.connection.isConnected || this.context.connection.connectionId === null) return;
-        if (this._model === null) {
-            this._model = new CameraModel(this.context.connection.connectionId, this.context.connection.connectionId + "_camera");
-        }
-        const wp = utils.getWorldPosition(cam);
-        const wq = utils.getWorldQuaternion(cam);
-        if (wp.distanceTo(this._lastWorldPosition) > 0.001 || wq.angleTo(this._lastWorldQuaternion) > 0.01) {
-            this._needsUpdate = true;
-        }
-        this._lastWorldPosition.copy(wp);
-        this._lastWorldQuaternion.copy(wq);
-        if (!this._needsUpdate || this.context.time.frameCount % 2 !== 0) {
-            if (this.context.time.realtimeSinceStartup - this._lastUpdateTime > this._camTimeoutInSeconds * .5) {
-                // send update anyways to avoid timeout
-            }
-            else return;
-        }
-        this._lastUpdateTime = this.context.time.realtimeSinceStartup;
-        this._needsUpdate = false;
-        this._model.send(cam, this.context.connection);
-        if (!this.context.isInXR)
-            this.context.players.setPlayerView(this.context.connection.connectionId, cam, ViewDevice.Browser);
-    }
-    private onReceivedRemoteCameraInfoBin(model: SyncedCameraModel) {
-        const guid = model.guid();
-        if (!guid) return;
-        const userId = model.userId();
-        if (!userId) return;
-        if (!this.context.connection.userIsInRoom(userId)) return;
-        if (!this.cameraPrefab) return;
-        let rc = this.remoteCams[guid];
-        if (!rc) {
-            if ("isObject3D" in this.cameraPrefab) {
-                const opt = new InstantiateOptions();
-                opt.context = this.context;
-                const instance = GameObject.instantiate(this.cameraPrefab, opt) as GameObject;
-                rc = this.remoteCams[guid] = { obj: instance, lastUpdate: this.context.time.realtimeSinceStartup, userId: userId };
-                rc.obj.visible = true;
-                this.gameObject.add(instance);
-                this.userToCamMap[userId] = guid;
-                SyncedCamera.instances.push(rc);
-                const marker = GameObject.getOrAddComponent(instance, AvatarMarker);
-                marker.connectionId = userId;
-                marker.avatar = instance;
-            }
-            else {
-                return;
-            }
-            // console.log(this.remoteCams);
-        }
-        const obj = rc.obj;
-        this.context.players.setPlayerView(userId, obj, ViewDevice.Browser);
-        rc.lastUpdate = this.context.time.realtimeSinceStartup;
-        InstancingUtil.markDirty(obj);
-        const pos = model.pos();
-        if (pos)
-            utils.setWorldPositionXYZ(obj, pos.x(), pos.y(), pos.z());
-        const rot = model.rot();
-        if (rot)
-            utils.setWorldRotationXYZ(obj, rot.x(), rot.y(), rot.z());
-    }
+import { NetworkConnection } from "../engine/engine_networking.js";
+import { Behaviour, GameObject } from "./Component.js";
+import { Camera } from "./Camera.js";
+import * as utils from "../engine/engine_three_utils.js"
+import { WebXR } from "./webxr/WebXR.js";
+import { Builder } from "flatbuffers";
+import { SyncedCameraModel } from "../engine-schemes/synced-camera-model.js";
+import { Vec3 } from "../engine-schemes/vec3.js";
+import { registerBinaryType } from "../engine-schemes/schemes.js";
+import { InstancingUtil } from "../engine/engine_instancing.js";
+import { serializable } from "../engine/engine_serialization_decorator.js";
+import { Object3D } from "three";
+import { AvatarMarker } from "./webxr/WebXRAvatar.js";
+import { AssetReference } from "../engine/engine_addressables.js";
+import { ViewDevice } from "../engine/engine_playerview.js";
+import { InstantiateOptions } from "../engine/engine_gameobject.js";
+const SyncedCameraModelIdentifier = "SCAM";
+registerBinaryType(SyncedCameraModelIdentifier, SyncedCameraModel.getRootAsSyncedCameraModel);
+const builder = new Builder();
+// enum CameraSyncEvent {
+//     Update = "sync-update-camera",
+// }
+class CameraModel {
+    userId: string;
+    guid: string;
+    // dontSave: boolean = true;
+    // pos: { x: number, y: number, z: number } = { x: 0, y: 0, z: 0 };
+    // rot: { x: number, y: number, z: number } = { x: 0, y: 0, z: 0 };
+    constructor(connectionId: string, guid: string) {
+        this.guid = guid;
+        this.userId = connectionId;
+    }
+    send(cam: THREE.Camera | null | undefined, con: NetworkConnection) {
+        if (cam) {
+            builder.clear();
+            const guid = builder.createString(this.guid);
+            const userId = builder.createString(this.userId);
+            SyncedCameraModel.startSyncedCameraModel(builder);
+            SyncedCameraModel.addGuid(builder, guid);
+            SyncedCameraModel.addUserId(builder, userId);
+            const p = utils.getWorldPosition(cam);
+            const r = utils.getWorldRotation(cam);
+            SyncedCameraModel.addPos(builder, Vec3.createVec3(builder, p.x, p.y, p.z));
+            SyncedCameraModel.addRot(builder, Vec3.createVec3(builder, r.x, r.y, r.z));
+            const offset = SyncedCameraModel.endSyncedCameraModel(builder);
+            builder.finish(offset, SyncedCameraModelIdentifier);
+            con.sendBinary(builder.asUint8Array());
+        }
+    }
+}
+declare type UserCamInfo = {
+    obj: THREE.Object3D,
+    lastUpdate: number;
+    userId: string;
+};
+export class SyncedCamera extends Behaviour {
+    static instances: UserCamInfo[] = [];
+    getCameraObject(userId: string): THREE.Object3D | null {
+        const guid = this.userToCamMap[userId];
+        if (!guid) return null;
+        return this.remoteCams[guid].obj;
+    }
+    @serializable([Object3D, AssetReference])
+    public cameraPrefab: THREE.Object3D | null | AssetReference = null;
+    private _lastWorldPosition!: THREE.Vector3;
+    private _lastWorldQuaternion!: THREE.Quaternion;
+    private _model: CameraModel | null = null;
+    private _needsUpdate: boolean = true;
+    private _lastUpdateTime: number = 0;
+    private remoteCams: { [id: string]: UserCamInfo } = {};
+    private userToCamMap: { [id: string]: string } = {};
+    private _camTimeoutInSeconds = 10;
+    private _receiveCallback: Function | null = null;
+    async awake() {
+        this._lastWorldPosition = this.worldPosition.clone();
+        this._lastWorldQuaternion = this.worldQuaternion.clone();
+        if (this.cameraPrefab) {
+            if ("uri" in this.cameraPrefab) {
+                this.cameraPrefab = await this.cameraPrefab.instantiate(this.gameObject);
+            }
+            if (this.cameraPrefab && "isObject3D" in this.cameraPrefab) {
+                this.cameraPrefab.visible = false;
+            }
+        }
+    }
+    onEnable(): void {
+        this._receiveCallback = this.context.connection.beginListenBinary(SyncedCameraModelIdentifier, this.onReceivedRemoteCameraInfoBin.bind(this));
+    }
+    onDisable(): void {
+        this.context.connection.stopListenBinary(SyncedCameraModelIdentifier, this._receiveCallback);
+    }
+    update(): void {
+        for (const guid in this.remoteCams) {
+            const cam = this.remoteCams[guid];
+            const timeDiff = this.context.time.realtimeSinceStartup - cam.lastUpdate;
+            if (!cam || (timeDiff) > this._camTimeoutInSeconds) {
+                console.log("Remote cam timeout", cam, timeDiff);
+                if (cam?.obj) {
+                    GameObject.destroy(cam.obj);
+                }
+                delete this.remoteCams[guid];
+                if (cam)
+                    delete this.userToCamMap[cam.userId];
+                SyncedCamera.instances.push(cam);
+                this.context.players.removePlayerView(cam.userId, ViewDevice.Browser);
+                continue;
+            }
+        }
+        if (WebXR.IsInWebXR) return;
+        const cam = this.context.mainCamera
+        if (cam === null) {
+            this.enabled = false;
+            return;
+        }
+        if (!this.context.connection.isConnected || this.context.connection.connectionId === null) return;
+        if (this._model === null) {
+            this._model = new CameraModel(this.context.connection.connectionId, this.context.connection.connectionId + "_camera");
+        }
+        const wp = utils.getWorldPosition(cam);
+        const wq = utils.getWorldQuaternion(cam);
+        if (wp.distanceTo(this._lastWorldPosition) > 0.001 || wq.angleTo(this._lastWorldQuaternion) > 0.01) {
+            this._needsUpdate = true;
+        }
+        this._lastWorldPosition.copy(wp);
+        this._lastWorldQuaternion.copy(wq);
+        if (!this._needsUpdate || this.context.time.frameCount % 2 !== 0) {
+            if (this.context.time.realtimeSinceStartup - this._lastUpdateTime > this._camTimeoutInSeconds * .5) {
+                // send update anyways to avoid timeout
+            }
+            else return;
+        }
+        this._lastUpdateTime = this.context.time.realtimeSinceStartup;
+        this._needsUpdate = false;
+        this._model.send(cam, this.context.connection);
+        if (!this.context.isInXR)
+            this.context.players.setPlayerView(this.context.connection.connectionId, cam, ViewDevice.Browser);
+    }
+    private onReceivedRemoteCameraInfoBin(model: SyncedCameraModel) {
+        const guid = model.guid();
+        if (!guid) return;
+        const userId = model.userId();
+        if (!userId) return;
+        if (!this.context.connection.userIsInRoom(userId)) return;
+        if (!this.cameraPrefab) return;
+        let rc = this.remoteCams[guid];
+        if (!rc) {
+            if ("isObject3D" in this.cameraPrefab) {
+                const opt = new InstantiateOptions();
+                opt.context = this.context;
+                const instance = GameObject.instantiate(this.cameraPrefab, opt) as GameObject;
+                rc = this.remoteCams[guid] = { obj: instance, lastUpdate: this.context.time.realtimeSinceStartup, userId: userId };
+                rc.obj.visible = true;
+                this.gameObject.add(instance);
+                this.userToCamMap[userId] = guid;
+                SyncedCamera.instances.push(rc);
+                const marker = GameObject.getOrAddComponent(instance, AvatarMarker);
+                marker.connectionId = userId;
+                marker.avatar = instance;
+            }
+            else {
+                return;
+            }
+            // console.log(this.remoteCams);
+        }
+        const obj = rc.obj;
+        this.context.players.setPlayerView(userId, obj, ViewDevice.Browser);
+        rc.lastUpdate = this.context.time.realtimeSinceStartup;
+        InstancingUtil.markDirty(obj);
+        const pos = model.pos();
+        if (pos)
+            utils.setWorldPositionXYZ(obj, pos.x(), pos.y(), pos.z());
+        const rot = model.rot();
+        if (rot)
+            utils.setWorldRotationXYZ(obj, rot.x(), rot.y(), rot.z());
+    }
 }

src/engine-components/SyncedTransform.ts CHANGED Viewed

@@ -1,337 +1,337 @@
-import * as THREE from 'three'
-import { OwnershipModel, RoomEvents } from "../engine/engine_networking.js"
-import { Behaviour, GameObject } from "./Component.js";
-import { Rigidbody } from "./RigidBody.js";
-import * as utils from "../engine/engine_utils.js"
-import { sendDestroyed } from '../engine/engine_networking_instantiate.js';
-import { InstancingUtil } from "../engine/engine_instancing.js";
-import { SyncedTransformModel } from '../engine-schemes/synced-transform-model.js';
-import * as flatbuffers from "flatbuffers";
-import { Transform } from '../engine-schemes/transform.js';
-import { registerBinaryType } from '../engine-schemes/schemes.js';
-import { setWorldEuler } from '../engine/engine_three_utils.js';
-const debug = utils.getParam("debugsync");
-export const SyncedTransformIdentifier = "STRS";
-registerBinaryType(SyncedTransformIdentifier, SyncedTransformModel.getRootAsSyncedTransformModel);
-const builder = new flatbuffers.Builder();
-export function createTransformModel(guid: string, b: Behaviour, fast: boolean = true): Uint8Array {
-    builder.clear();
-    const guidObj = builder.createString(guid);
-    SyncedTransformModel.startSyncedTransformModel(builder);
-    SyncedTransformModel.addGuid(builder, guidObj);
-    SyncedTransformModel.addFast(builder, fast);
-    const p = b.worldPosition;
-    const r = b.worldEuler;
-    const s = b.gameObject.scale; // todo: world scale
-    // 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));
-    const res = SyncedTransformModel.endSyncedTransformModel(builder);
-    // SyncedTransformModel.finishSyncedTransformModelBuffer(builder, res);
-    builder.finish(res, SyncedTransformIdentifier);
-    return builder.asUint8Array();
-}
-export class SyncedTransform extends Behaviour {
-    // public autoOwnership: boolean = true;
-    public overridePhysics: boolean = true
-    public interpolatePosition: boolean = true;
-    public interpolateRotation: boolean = true;
-    public fastMode: boolean = false;
-    public syncDestroy: boolean = false;
-    // private _state!: SyncedTransformModel;
-    private _model: OwnershipModel | null = null;
-    private _needsUpdate: boolean = true;
-    private rb: Rigidbody | null = null;
-    private _wasKinematic: boolean | undefined = false;
-    private _receivedDataBefore: boolean = false;
-    private _targetPosition!: THREE.Vector3;
-    private _targetRotation!: THREE.Quaternion;
-    private _receivedFastUpdate: boolean = false;
-    private _shouldRequestOwnership: boolean = false;
-    public requestOwnership() {
-        if (debug)
-            console.log("Request ownership");
-        if (!this._model) {
-            this._shouldRequestOwnership = true;
-            this._needsUpdate = true;
-        }
-        else
-            this._model.requestOwnership();
-    }
-    public hasOwnership(): boolean | undefined {
-        return this._model?.hasOwnership ?? undefined;
-    }
-    public isOwned(): boolean | undefined {
-        return this._model?.isOwned;
-    }
-    private joinedRoomCallback: any = null;
-    private receivedDataCallback: any = null;
-    awake() {
-        if (debug)
-            console.log("new instance", this.guid, this);
-        this._receivedDataBefore = false;
-        this._targetPosition = new THREE.Vector3();
-        this._targetRotation = new THREE.Quaternion();
-        // sync instantiate issue was because they shared the same last pos vector!
-        this.lastWorldPos = new THREE.Vector3();
-        this.lastWorldRotation = new THREE.Quaternion();
-        this.rb = GameObject.getComponentInChildren(this.gameObject, Rigidbody);
-        if (this.rb) {
-            this._wasKinematic = this.rb.isKinematic;
-        }
-        this.receivedUpdate = true;
-        // this._state = new TransformModel(this.guid, this);
-        this._model = new OwnershipModel(this.context.connection, this.guid);
-        if (this.context.connection.isConnected) {
-            this.tryGetLastState();
-        }
-        this.joinedRoomCallback = this.tryGetLastState.bind(this);
-        this.context.connection.beginListen(RoomEvents.JoinedRoom, this.joinedRoomCallback);
-        this.receivedDataCallback = this.onReceivedData.bind(this);
-        this.context.connection.beginListenBinary(SyncedTransformIdentifier, this.receivedDataCallback);
-    }
-    onDestroy(): void {
-        // TODO: can we add a new component for this?! do we really need this?!
-        if (this.syncDestroy)
-            sendDestroyed(this.guid, this.context.connection);
-        this._model = null;
-        this.context.connection.stopListen(RoomEvents.JoinedRoom, this.joinedRoomCallback);
-        this.context.connection.stopListenBinary(SyncedTransformIdentifier, this.receivedDataCallback);
-    }
-    private tryGetLastState() {
-        const model = this.context.connection.tryGetState(this.guid) as unknown as SyncedTransformModel;
-        if (model) this.onReceivedData(model);
-    }
-    private tempEuler: THREE.Euler = new THREE.Euler();
-    private onReceivedData(data: SyncedTransformModel) {
-        if (this.destroyed) return;
-        if (typeof data.guid === "function" && data.guid() === this.guid) {
-            if (debug)
-                console.log("new data", this.context.connection.connectionId, this.context.time.frameCount, this.guid, data);
-            this.receivedUpdate = true;
-            this._receivedFastUpdate = data.fast();
-            const transform = data.transform();
-            if (transform) {
-                InstancingUtil.markDirty(this.gameObject, true);
-                const position = transform.position();
-                if (position) {
-                    if (this.interpolatePosition)
-                        this._targetPosition?.set(position.x(), position.y(), position.z());
-                    if (!this.interpolatePosition || !this._receivedDataBefore)
-                        this.setWorldPosition(position.x(), position.y(), position.z());
-                }
-                const rotation = transform.rotation();
-                if (rotation) {
-                    this.tempEuler.set(rotation.x(), rotation.y(), rotation.z());
-                    if (this.interpolateRotation) {
-                        this._targetRotation.setFromEuler(this.tempEuler);
-                    }
-                    if (!this.interpolateRotation || !this._receivedDataBefore)
-                        setWorldEuler(this.gameObject, this.tempEuler);
-                }
-            }
-            this._receivedDataBefore = true;
-            // if (this.rb && !this._model?.hasOwnership) {
-            //     this.rb.setBodyFromGameObject(data.velocity)
-            // }
-        }
-    }
-    onEnable(): void {
-        this.lastWorldPos.copy(this.worldPosition);
-        this.lastWorldRotation.copy(this.worldQuaternion);
-        this._needsUpdate = true;
-        // console.log("ENABLE", this.guid, this.gameObject.guid, this.lastWorldPos);
-        if (this._model) {
-            this._model.updateIsOwned();
-        }
-    }
-    onDisable(): void {
-        if (this._model)
-            this._model.freeOwnership();
-    }
-    private receivedUpdate = false;
-    private lastWorldPos!: THREE.Vector3;
-    private lastWorldRotation!: THREE.Quaternion;
-    onBeforeRender() {
-        if (!this.activeAndEnabled || !this.context.connection.isConnected) return;
-        // console.log("BEFORE RENDER", this.destroyed, this.guid, this._model?.isOwned, this.name, this.gameObject);
-        if (!this.context.connection.isInRoom || !this._model) {
-            if (debug)
-                console.log("no model or room", this.name, this.guid, this.context.connection.isInRoom);
-            return;
-        }
-        if (this._shouldRequestOwnership) {
-            this._shouldRequestOwnership = false;
-            this._model.requestOwnership();
-        }
-        let wp = this.worldPosition;
-        let wr = this.worldQuaternion;
-        if (this._model.isOwned && !this.receivedUpdate) {
-            const worlddiff = wp.distanceTo(this.lastWorldPos);
-            const worldRot = wr.angleTo(this.lastWorldRotation);
-            const threshold = this._model.hasOwnership || this.fastMode ? .0001 : .001;
-            if (worlddiff > threshold || worldRot > threshold) {
-                // console.log(worlddiff, worldRot);
-                if (!this._model.hasOwnership) {
-                    if (debug)
-                        console.log(this.guid, "reset because not owned but", this.gameObject.name, this.lastWorldPos);
-                    this.worldPosition = this.lastWorldPos;
-                    wp.copy(this.lastWorldPos);
-                    this.worldQuaternion = this.lastWorldRotation;
-                    wr.copy(this.lastWorldRotation);
-                    InstancingUtil.markDirty(this.gameObject, true);
-                    this._needsUpdate = false;
-                }
-                else {
-                    this._needsUpdate = true;
-                }
-            }
-        }
-        // else if (this._model.isOwned === false) {
-        //     if (!this._didRequestOwnershipOnce && this.autoOwnership) {
-        //         this._didRequestOwnershipOnce = true;
-        //         this._model.requestOwnershipIfNotOwned();
-        //     }
-        // }
-        if (this._model && !this._model.hasOwnership && this._model.isOwned) {
-            if (this._receivedDataBefore) {
-                const factor = this._receivedFastUpdate || this.fastMode ? .5 : .3;
-                const t = factor;//Mathf.clamp01(this.context.time.deltaTime * factor);
-                let requireMarkDirty = false;
-                if (this.interpolatePosition && this._targetPosition) {
-                    const pos = this.worldPosition;
-                    pos.lerp(this._targetPosition, t);
-                    this.worldPosition = pos;
-                    requireMarkDirty = true;
-                }
-                if (this.interpolateRotation && this._targetRotation) {
-                    const rot = this.worldQuaternion;
-                    rot.slerp(this._targetRotation, t);
-                    this.worldQuaternion = rot;
-                    requireMarkDirty = true;
-                }
-                if (requireMarkDirty)
-                    InstancingUtil.markDirty(this.gameObject, true);
-            }
-        }
-        this.receivedUpdate = false;
-        this.lastWorldPos.copy(wp);
-        this.lastWorldRotation.copy(wr);
-        // if (this._model.isOwned === false && this.autoOwnership) {
-        //     this.requestOwnership();
-        // }
-        if (!this._model) return;
-        // only run if we are the owner
-        if (!this._model || this._model.hasOwnership === undefined || !this._model.hasOwnership) {
-            if (this.rb) {
-                this.rb.isKinematic = this._model.isOwned ?? false;
-                this.rb.setVelocity(0, 0, 0);
-            }
-            return;
-        }
-        // local user is owner:
-        if (this.rb) {
-            if (this._wasKinematic !== undefined) {
-                if (debug)
-                    console.log("reset kinematic", this.rb.name, this._wasKinematic);
-                this.rb.isKinematic = this._wasKinematic;
-            }
-            // hacky reset if too far off
-            if (this.gameObject.position.distanceTo(new THREE.Vector3(0, 0, 0)) > 1000) {
-                if (debug)
-                    console.log("RESET", this.name)
-                this.gameObject.position.set(0, 1, 0);
-                this.rb.setVelocity(0, 0, 0);
-            }
-        }
-        const updateInterval = 10;
-        const fastUpdate = this.rb || this.fastMode;
-        if (this._needsUpdate && (updateInterval <= 0 || updateInterval > 0 && this.context.time.frameCount % updateInterval === 0 || fastUpdate)) {
-            if (debug)
-                console.log("send update", this.context.connection.connectionId, this.guid, this.gameObject.name, this.gameObject.guid);
-            if (this.overridePhysics && this.rb) {
-                // this.rb.setBodyFromGameObject();
-            }
-            this._needsUpdate = false;
-            const st = createTransformModel(this.guid, this, fastUpdate ? true : false);
-            // this._state.update(this, this.rb);
-            // this._state.fast = fastUpdate ? true : false;
-            this.context.connection.sendBinary(st);
-        }
-    }
-    // private lastPosition: THREE.Vector3 = new THREE.Vector3();
-    // private async setPosition(pt: THREE.Vector3) {
-    //     if (this._model.isConnected && !this._model?.hasOwnership) {
-    //         await this._model?.requestOwnershipAsync();
-    //     }
-    //     if (pt.distanceTo(this.lastPosition) < .001) {
-    //         return;
-    //     }
-    //     this.lastPosition.copy(pt);
-    //     if(this.gameObject.parent) this.gameObject.parent.worldToLocal(pt);
-    //     // this.gameObject.position.copy(pt);
-    //     this.gameObject.position.set(pt.x, pt.y, pt.z);
-    //     this._target.set(pt.x, pt.y, pt.z);
-    //     this._needsUpdate = true;
-    //     if (this.rb) {
-    //         this.gameObject.position.set(pt.x, pt.y + .5, pt.z);
-    //         this.rb.setVelocity(0, 0, 0);
-    //         this.rb.setBodyFromGameObject();
-    //     }
-    // }
+import * as THREE from 'three'
+import { OwnershipModel, RoomEvents } from "../engine/engine_networking.js"
+import { Behaviour, GameObject } from "./Component.js";
+import { Rigidbody } from "./RigidBody.js";
+import * as utils from "../engine/engine_utils.js"
+import { sendDestroyed } from '../engine/engine_networking_instantiate.js';
+import { InstancingUtil } from "../engine/engine_instancing.js";
+import { SyncedTransformModel } from '../engine-schemes/synced-transform-model.js';
+import * as flatbuffers from "flatbuffers";
+import { Transform } from '../engine-schemes/transform.js';
+import { registerBinaryType } from '../engine-schemes/schemes.js';
+import { setWorldEuler } from '../engine/engine_three_utils.js';
+const debug = utils.getParam("debugsync");
+export const SyncedTransformIdentifier = "STRS";
+registerBinaryType(SyncedTransformIdentifier, SyncedTransformModel.getRootAsSyncedTransformModel);
+const builder = new flatbuffers.Builder();
+export function createTransformModel(guid: string, b: Behaviour, fast: boolean = true): Uint8Array {
+    builder.clear();
+    const guidObj = builder.createString(guid);
+    SyncedTransformModel.startSyncedTransformModel(builder);
+    SyncedTransformModel.addGuid(builder, guidObj);
+    SyncedTransformModel.addFast(builder, fast);
+    const p = b.worldPosition;
+    const r = b.worldEuler;
+    const s = b.gameObject.scale; // todo: world scale
+    // 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));
+    const res = SyncedTransformModel.endSyncedTransformModel(builder);
+    // SyncedTransformModel.finishSyncedTransformModelBuffer(builder, res);
+    builder.finish(res, SyncedTransformIdentifier);
+    return builder.asUint8Array();
+}
+export class SyncedTransform extends Behaviour {
+    // public autoOwnership: boolean = true;
+    public overridePhysics: boolean = true
+    public interpolatePosition: boolean = true;
+    public interpolateRotation: boolean = true;
+    public fastMode: boolean = false;
+    public syncDestroy: boolean = false;
+    // private _state!: SyncedTransformModel;
+    private _model: OwnershipModel | null = null;
+    private _needsUpdate: boolean = true;
+    private rb: Rigidbody | null = null;
+    private _wasKinematic: boolean | undefined = false;
+    private _receivedDataBefore: boolean = false;
+    private _targetPosition!: THREE.Vector3;
+    private _targetRotation!: THREE.Quaternion;
+    private _receivedFastUpdate: boolean = false;
+    private _shouldRequestOwnership: boolean = false;
+    public requestOwnership() {
+        if (debug)
+            console.log("Request ownership");
+        if (!this._model) {
+            this._shouldRequestOwnership = true;
+            this._needsUpdate = true;
+        }
+        else
+            this._model.requestOwnership();
+    }
+    public hasOwnership(): boolean | undefined {
+        return this._model?.hasOwnership ?? undefined;
+    }
+    public isOwned(): boolean | undefined {
+        return this._model?.isOwned;
+    }
+    private joinedRoomCallback: any = null;
+    private receivedDataCallback: any = null;
+    awake() {
+        if (debug)
+            console.log("new instance", this.guid, this);
+        this._receivedDataBefore = false;
+        this._targetPosition = new THREE.Vector3();
+        this._targetRotation = new THREE.Quaternion();
+        // sync instantiate issue was because they shared the same last pos vector!
+        this.lastWorldPos = new THREE.Vector3();
+        this.lastWorldRotation = new THREE.Quaternion();
+        this.rb = GameObject.getComponentInChildren(this.gameObject, Rigidbody);
+        if (this.rb) {
+            this._wasKinematic = this.rb.isKinematic;
+        }
+        this.receivedUpdate = true;
+        // this._state = new TransformModel(this.guid, this);
+        this._model = new OwnershipModel(this.context.connection, this.guid);
+        if (this.context.connection.isConnected) {
+            this.tryGetLastState();
+        }
+        this.joinedRoomCallback = this.tryGetLastState.bind(this);
+        this.context.connection.beginListen(RoomEvents.JoinedRoom, this.joinedRoomCallback);
+        this.receivedDataCallback = this.onReceivedData.bind(this);
+        this.context.connection.beginListenBinary(SyncedTransformIdentifier, this.receivedDataCallback);
+    }
+    onDestroy(): void {
+        // TODO: can we add a new component for this?! do we really need this?!
+        if (this.syncDestroy)
+            sendDestroyed(this.guid, this.context.connection);
+        this._model = null;
+        this.context.connection.stopListen(RoomEvents.JoinedRoom, this.joinedRoomCallback);
+        this.context.connection.stopListenBinary(SyncedTransformIdentifier, this.receivedDataCallback);
+    }
+    private tryGetLastState() {
+        const model = this.context.connection.tryGetState(this.guid) as unknown as SyncedTransformModel;
+        if (model) this.onReceivedData(model);
+    }
+    private tempEuler: THREE.Euler = new THREE.Euler();
+    private onReceivedData(data: SyncedTransformModel) {
+        if (this.destroyed) return;
+        if (typeof data.guid === "function" && data.guid() === this.guid) {
+            if (debug)
+                console.log("new data", this.context.connection.connectionId, this.context.time.frameCount, this.guid, data);
+            this.receivedUpdate = true;
+            this._receivedFastUpdate = data.fast();
+            const transform = data.transform();
+            if (transform) {
+                InstancingUtil.markDirty(this.gameObject, true);
+                const position = transform.position();
+                if (position) {
+                    if (this.interpolatePosition)
+                        this._targetPosition?.set(position.x(), position.y(), position.z());
+                    if (!this.interpolatePosition || !this._receivedDataBefore)
+                        this.setWorldPosition(position.x(), position.y(), position.z());
+                }
+                const rotation = transform.rotation();
+                if (rotation) {
+                    this.tempEuler.set(rotation.x(), rotation.y(), rotation.z());
+                    if (this.interpolateRotation) {
+                        this._targetRotation.setFromEuler(this.tempEuler);
+                    }
+                    if (!this.interpolateRotation || !this._receivedDataBefore)
+                        setWorldEuler(this.gameObject, this.tempEuler);
+                }
+            }
+            this._receivedDataBefore = true;
+            // if (this.rb && !this._model?.hasOwnership) {
+            //     this.rb.setBodyFromGameObject(data.velocity)
+            // }
+        }
+    }
+    onEnable(): void {
+        this.lastWorldPos.copy(this.worldPosition);
+        this.lastWorldRotation.copy(this.worldQuaternion);
+        this._needsUpdate = true;
+        // console.log("ENABLE", this.guid, this.gameObject.guid, this.lastWorldPos);
+        if (this._model) {
+            this._model.updateIsOwned();
+        }
+    }
+    onDisable(): void {
+        if (this._model)
+            this._model.freeOwnership();
+    }
+    private receivedUpdate = false;
+    private lastWorldPos!: THREE.Vector3;
+    private lastWorldRotation!: THREE.Quaternion;
+    onBeforeRender() {
+        if (!this.activeAndEnabled || !this.context.connection.isConnected) return;
+        // console.log("BEFORE RENDER", this.destroyed, this.guid, this._model?.isOwned, this.name, this.gameObject);
+        if (!this.context.connection.isInRoom || !this._model) {
+            if (debug)
+                console.log("no model or room", this.name, this.guid, this.context.connection.isInRoom);
+            return;
+        }
+        if (this._shouldRequestOwnership) {
+            this._shouldRequestOwnership = false;
+            this._model.requestOwnership();
+        }
+        const wp = this.worldPosition;
+        const wr = this.worldQuaternion;
+        if (this._model.isOwned && !this.receivedUpdate) {
+            const worlddiff = wp.distanceTo(this.lastWorldPos);
+            const worldRot = wr.angleTo(this.lastWorldRotation);
+            const threshold = this._model.hasOwnership || this.fastMode ? .0001 : .001;
+            if (worlddiff > threshold || worldRot > threshold) {
+                // console.log(worlddiff, worldRot);
+                if (!this._model.hasOwnership) {
+                    if (debug)
+                        console.log(this.guid, "reset because not owned but", this.gameObject.name, this.lastWorldPos);
+                    this.worldPosition = this.lastWorldPos;
+                    wp.copy(this.lastWorldPos);
+                    this.worldQuaternion = this.lastWorldRotation;
+                    wr.copy(this.lastWorldRotation);
+                    InstancingUtil.markDirty(this.gameObject, true);
+                    this._needsUpdate = false;
+                }
+                else {
+                    this._needsUpdate = true;
+                }
+            }
+        }
+        // else if (this._model.isOwned === false) {
+        //     if (!this._didRequestOwnershipOnce && this.autoOwnership) {
+        //         this._didRequestOwnershipOnce = true;
+        //         this._model.requestOwnershipIfNotOwned();
+        //     }
+        // }
+        if (this._model && !this._model.hasOwnership && this._model.isOwned) {
+            if (this._receivedDataBefore) {
+                const factor = this._receivedFastUpdate || this.fastMode ? .5 : .3;
+                const t = factor;//Mathf.clamp01(this.context.time.deltaTime * factor);
+                let requireMarkDirty = false;
+                if (this.interpolatePosition && this._targetPosition) {
+                    const pos = this.worldPosition;
+                    pos.lerp(this._targetPosition, t);
+                    this.worldPosition = pos;
+                    requireMarkDirty = true;
+                }
+                if (this.interpolateRotation && this._targetRotation) {
+                    const rot = this.worldQuaternion;
+                    rot.slerp(this._targetRotation, t);
+                    this.worldQuaternion = rot;
+                    requireMarkDirty = true;
+                }
+                if (requireMarkDirty)
+                    InstancingUtil.markDirty(this.gameObject, true);
+            }
+        }
+        this.receivedUpdate = false;
+        this.lastWorldPos.copy(wp);
+        this.lastWorldRotation.copy(wr);
+        // if (this._model.isOwned === false && this.autoOwnership) {
+        //     this.requestOwnership();
+        // }
+        if (!this._model) return;
+        // only run if we are the owner
+        if (!this._model || this._model.hasOwnership === undefined || !this._model.hasOwnership) {
+            if (this.rb) {
+                this.rb.isKinematic = this._model.isOwned ?? false;
+                this.rb.setVelocity(0, 0, 0);
+            }
+            return;
+        }
+        // local user is owner:
+        if (this.rb) {
+            if (this._wasKinematic !== undefined) {
+                if (debug)
+                    console.log("reset kinematic", this.rb.name, this._wasKinematic);
+                this.rb.isKinematic = this._wasKinematic;
+            }
+            // hacky reset if too far off
+            if (this.gameObject.position.distanceTo(new THREE.Vector3(0, 0, 0)) > 1000) {
+                if (debug)
+                    console.log("RESET", this.name)
+                this.gameObject.position.set(0, 1, 0);
+                this.rb.setVelocity(0, 0, 0);
+            }
+        }
+        const updateInterval = 10;
+        const fastUpdate = this.rb || this.fastMode;
+        if (this._needsUpdate && (updateInterval <= 0 || updateInterval > 0 && this.context.time.frameCount % updateInterval === 0 || fastUpdate)) {
+            if (debug)
+                console.log("send update", this.context.connection.connectionId, this.guid, this.gameObject.name, this.gameObject.guid);
+            if (this.overridePhysics && this.rb) {
+                // this.rb.setBodyFromGameObject();
+            }
+            this._needsUpdate = false;
+            const st = createTransformModel(this.guid, this, fastUpdate ? true : false);
+            // this._state.update(this, this.rb);
+            // this._state.fast = fastUpdate ? true : false;
+            this.context.connection.sendBinary(st);
+        }
+    }
+    // private lastPosition: THREE.Vector3 = new THREE.Vector3();
+    // private async setPosition(pt: THREE.Vector3) {
+    //     if (this._model.isConnected && !this._model?.hasOwnership) {
+    //         await this._model?.requestOwnershipAsync();
+    //     }
+    //     if (pt.distanceTo(this.lastPosition) < .001) {
+    //         return;
+    //     }
+    //     this.lastPosition.copy(pt);
+    //     if(this.gameObject.parent) this.gameObject.parent.worldToLocal(pt);
+    //     // this.gameObject.position.copy(pt);
+    //     this.gameObject.position.set(pt.x, pt.y, pt.z);
+    //     this._target.set(pt.x, pt.y, pt.z);
+    //     this._needsUpdate = true;
+    //     if (this.rb) {
+    //         this.gameObject.position.set(pt.x, pt.y + .5, pt.z);
+    //         this.rb.setVelocity(0, 0, 0);
+    //         this.rb.setBodyFromGameObject();
+    //     }
+    // }
 }

src/engine-components/ui/Text.ts CHANGED Viewed

@@ -182,7 +182,7 @@
     private getTextOpts(): object {
-        let fontSize = this.fontSize;
+        const fontSize = this.fontSize;
         // if (this.canvas) {
         //     fontSize /= this.canvas?.scaleFactor;
         // }
@@ -438,8 +438,8 @@
         //              -   Arial instead of assets/arial
         //              -   Arial should stay Arial instead of arial
         if (!this.font) return;
-        let fontName = this.font;
-        let familyName = this.getFamilyNameWithCorrectSuffix(fontName, fontStyle);
+        const fontName = this.font;
+        const familyName = this.getFamilyNameWithCorrectSuffix(fontName, fontStyle);
         if (debug) console.log("Selected font family:" + familyName);
         // ensure a font family is register under this name
@@ -514,7 +514,7 @@
         if (pathSeparatorIndex >= 0) {
             fontBaseName = fontBaseName.substring(pathSeparatorIndex + 1);
         }
-        let isUpperCase = fontBaseName[0] === fontBaseName[0].toUpperCase();
+        const isUpperCase = fontBaseName[0] === fontBaseName[0].toUpperCase();
         const fontNameWithoutSuffix = familyName.substring(0, styleSeparator);
         if (debug) console.log("Select font: ", familyName, FontStyle[style], fontBaseName, isUpperCase, fontNameWithoutSuffix);

src/engine-components/export/usdz/ThreeUSDZExporter.ts CHANGED Viewed

@@ -654,7 +654,7 @@
 function addResources( object, context: USDZExporterContext ) {
 	const geometry = object.geometry;
-	let material = object.material;
+	const material = object.material;
 	if ( geometry ) {
@@ -1146,8 +1146,8 @@
 		const rotation = texture.rotation;
 		// rotation is around the wrong point. after rotation we need to shift offset again so that we're rotating around the right spot
-		let xRotationOffset = Math.sin(rotation);
-		let yRotationOffset = Math.cos(rotation);
+		const xRotationOffset = Math.sin(rotation);
+		const yRotationOffset = Math.cos(rotation);
 		// texture coordinates start in the opposite corner, need to correct
 		offset.y = 1 - offset.y - repeat.y;

src/engine-components/timeline/TimelineTracks.ts CHANGED Viewed

@@ -61,7 +61,7 @@
         const model = models[index];
         if (isActive || time >= model.start && time <= model.end) {
             let weight = 1;
-            let isBlendingWithNext = false;
+            const isBlendingWithNext = false;
             // this blending with next clips is already baked into easeIn/easeOut
             // if (allowBlendWithNext && index + 1 < models.length) {

src/engine-components/export/usdz/extensions/USDZUI.ts CHANGED Viewed

@@ -111,7 +111,7 @@
     private flipWindingOrder(geometry) {
         const index = geometry.index.array
         for (let i = 0, il = index.length / 3; i < il; i++) {
-          let x = index[i * 3]
+          const x = index[i * 3]
           index[i * 3] = index[i * 3 + 2]
           index[i * 3 + 2] = x
         }

src/engine-components/webxr/WebARCameraBackground.ts CHANGED Viewed

@@ -159,7 +159,7 @@
     }
 }
 // TODO tint could be an uniform
-let backgroundFragment: string = /* glsl */`
+const backgroundFragment: string = /* glsl */`
 uniform sampler2D t2D;
 varying vec2 vUv;

src/engine-components/webxr/WebXRAvatar.ts CHANGED Viewed

@@ -165,7 +165,7 @@
             if (this.head) {
                 const device = this.webxr.IsInAR ? ViewDevice.Handheld : ViewDevice.Headset;
-                let viewObj = this.head;
+                const viewObj = this.head;
                 // if (this.isLocalAvatar) {
                 //     if (this.context.mainCamera && this.context.isInXR) {
                 //         viewObj = this.context.renderer.xr.getCamera(this.context.mainCamera);

src/engine-components/webxr/WebXRController.ts CHANGED Viewed

@@ -538,7 +538,7 @@
                         this.didChangeScale = true;
                         const rig = this.webXR.Rig;
                         if (rig) {
-                            let args = this.switchScale(rig, doTeleport, isInMiniatureMode, newRigScale);
+                            const args = this.switchScale(rig, doTeleport, isInMiniatureMode, newRigScale);
                             doTeleport = args.doTeleport;
                             isInMiniatureMode = args.isInMiniatureMode;
                             newRigScale = args.newRigScale;

src/engine-components/webxr/WebXRSync.ts CHANGED Viewed

@@ -1,463 +1,463 @@
-import { Behaviour, GameObject } from "../Component.js";
-import { RoomEvents, OwnershipModel, NetworkConnection } from "../../engine/engine_networking.js";
-import { WebXR, WebXREvent } from "./WebXR.js";
-import { Group, Quaternion, Vector3, Vector4, WebXRManager } from "three";
-import { getParam } from "../../engine/engine_utils.js";
-import { Voip } from "../Voip.js";
-import { Builder, Long } from "flatbuffers";
-import { VrUserStateBuffer } from "../../engine-schemes/vr-user-state-buffer.js";
-import { Vec3 } from "../../engine-schemes/vec3.js";
-import { registerBinaryType } from "../../engine-schemes/schemes.js";
-import { Vec4 } from "../../engine-schemes/vec4.js";
-import { WebXRAvatar } from "./WebXRAvatar.js";
-// for debug GUI
-// import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";
-// import { HTMLMesh } from 'three/examples/jsm/interactive/HTMLMesh.js';
-// import { InteractiveGroup } from 'three/examples/jsm/interactive/InteractiveGroup.js';
-// import { renderer, sceneData } from "../engine/engine_setup.js";
-const debugLogs = getParam("debugxr");
-const debugAvatar = getParam("debugavatar");
-// const debugAvatarVoip = getParam("debugavatarvoip");
-enum WebXRSyncEvent {
-    WebXR_UserJoined = "webxr-user-joined",
-    WebXR_UserLeft = "webxr-user-left",
-    VRSessionStart = "vr-session-started",
-    VRSessionEnd = "vr-session-ended",
-    VRSessionUpdate = "vr-session-update",
-}
-enum XRMode {
-    VR = "vr",
-    AR = "ar",
-}
-const VRUserStateBufferIdentifier = "VRUS";
-registerBinaryType(VRUserStateBufferIdentifier, VrUserStateBuffer.getRootAsVrUserStateBuffer);
-function getTimeStampNow() {
-    return new Date().getTime(); // avoid sending millis in flatbuffer
-}
-function flatbuffers_long_from_number(num: number): Long {
-    let low = num & 0xffffffff
-    let high = (num / Math.pow(2, 32)) & 0xfffff
-    return Long.create(low, high);
-}
-export class VRUserState {
-    public guid: string;
-    public time!: number;
-    public avatarId!: string;
-    public position: Vector3 = new Vector3();
-    public rotation: Vector4 = new Vector4();
-    public scale: number = 1;
-    public posLeftHand = new Vector3();
-    public posRightHand = new Vector3();
-    public rotLeftHand = new Quaternion();
-    public rotRightHand = new Quaternion();
-    public constructor(guid: string) {
-        this.guid = guid;
-    }
-    private static invertRotation: Quaternion = new Quaternion().setFromAxisAngle(new Vector3(0, 1, 0), Math.PI);
-    public update(rig: Group, pos: DOMPointReadOnly, rot: DOMPointReadOnly, webXR: WebXR, avatarId: string) {
-        this.time = getTimeStampNow();
-        this.avatarId = avatarId;
-        this.position.set(pos.x, pos.y, pos.z);
-        if (rig)
-            this.position.applyMatrix4(rig.matrixWorld);
-        let q0 = VRUserState.quat0;
-        const q1 = VRUserState.quat1;
-        q0.set(rot.x, rot.y, rot.z, rot.w);
-        q0 = q0.multiplyQuaternions(q0, VRUserState.invertRotation);
-        if (rig) {
-            rig.getWorldQuaternion(q1);
-            q0.multiplyQuaternions(q1, q0);
-        }
-        this.rotation.set(q0.x, q0.y, q0.z, q0.w);
-        this.scale = rig.scale.x;
-        // for controllers, it seems we need grip pose
-        const ctrl0 = webXR.LeftController?.controllerGrip;
-        if (ctrl0) {
-            ctrl0.getWorldPosition(this.posLeftHand);
-            ctrl0.getWorldQuaternion(this.rotLeftHand);
-        }
-        const ctrl1 = webXR.RightController?.controllerGrip;
-        if (ctrl1) {
-            ctrl1.getWorldPosition(this.posRightHand);
-            ctrl1.getWorldQuaternion(this.rotRightHand);
-        }
-        // if this is a hand, we need to get the root bone of that / use that for position/rotation
-        if (webXR.LeftController?.hand?.visible) {
-            const wrist = webXR.LeftController.wrist;
-            if (wrist) {
-                wrist.getWorldPosition(this.posLeftHand);
-                wrist.getWorldQuaternion(this.rotLeftHand);
-            }
-        }
-        if (webXR.RightController?.hand?.visible) {
-            const wrist = webXR.RightController.wrist;
-            if (wrist) {
-                wrist.getWorldPosition(this.posRightHand);
-                wrist.getWorldQuaternion(this.rotRightHand);
-            }
-        }
-    }
-    private static quat0: Quaternion = new Quaternion();
-    private static quat1: Quaternion = new Quaternion();
-    public sendAsBuffer(builder: Builder, net: NetworkConnection) {
-        builder.clear();
-        const guid = builder.createString(this.guid);
-        const id = builder.createString(this.avatarId);
-        VrUserStateBuffer.startVrUserStateBuffer(builder);
-        VrUserStateBuffer.addGuid(builder, guid);
-        VrUserStateBuffer.addTime(builder, flatbuffers_long_from_number(this.time));
-        VrUserStateBuffer.addAvatarId(builder, id);
-        VrUserStateBuffer.addPosition(builder, Vec3.createVec3(builder, this.position.x, this.position.y, this.position.z));
-        VrUserStateBuffer.addRotation(builder, Vec4.createVec4(builder, this.rotation.x, this.rotation.y, this.rotation.z, this.rotation.w));
-        VrUserStateBuffer.addScale(builder, this.scale);
-        VrUserStateBuffer.addPosLeftHand(builder, Vec3.createVec3(builder, this.posLeftHand.x, this.posLeftHand.y, this.posLeftHand.z));
-        VrUserStateBuffer.addPosRightHand(builder, Vec3.createVec3(builder, this.posRightHand.x, this.posRightHand.y, this.posRightHand.z));
-        VrUserStateBuffer.addRotLeftHand(builder, Vec4.createVec4(builder, this.rotLeftHand.x, this.rotLeftHand.y, this.rotLeftHand.z, this.rotLeftHand.w));
-        VrUserStateBuffer.addRotRightHand(builder, Vec4.createVec4(builder, this.rotRightHand.x, this.rotRightHand.y, this.rotRightHand.z, this.rotRightHand.w));
-        const res = VrUserStateBuffer.endVrUserStateBuffer(builder);
-        builder.finish(res, VRUserStateBufferIdentifier);
-        const arr = builder.asUint8Array();
-        net.sendBinary(arr);
-    }
-    public setFromBuffer(guid: string, state: VrUserStateBuffer) {
-        if (!guid) return;
-        this.guid = guid;
-        this.time = state.time().toFloat64();
-        const id = state.avatarId();
-        if (id)
-            this.avatarId = id;
-        const pos = state.position();
-        if (pos)
-            this.position.set(pos.x(), pos.y(), pos.z());
-        // TODO: maybe just send one float more instead of converting back and forth
-        const rot = state.rotation();
-        if (rot)
-            this.rotation.set(rot.x(), rot.y(), rot.z(), rot.w());
-        const posLeftHand = state.posLeftHand();
-        if (posLeftHand)
-            this.posLeftHand.set(posLeftHand.x(), posLeftHand.y(), posLeftHand.z());
-        const posRightHand = state.posRightHand();
-        if (posRightHand)
-            this.posRightHand.set(posRightHand.x(), posRightHand.y(), posRightHand.z());
-        const rotLeftHand = state.rotLeftHand();
-        if (rotLeftHand)
-            this.rotLeftHand.set(rotLeftHand.x(), rotLeftHand.y(), rotLeftHand.z(), rotLeftHand.w());
-        const rotRightHand = state.rotRightHand();
-        if (rotRightHand)
-            this.rotRightHand.set(rotRightHand.x(), rotRightHand.y(), rotRightHand.z(), rotRightHand.w());
-        this.scale = state.scale();
-    }
-}
-export class WebXRSync extends Behaviour {
-    webXR: WebXR | null = null;
-    // private allowCustomAvatars: boolean | null = true;
-    private debugAvatarUser: WebXRAvatar | null = null;
-    private voip: Voip | null = null;
-    async awake() {
-        if(!this.webXR) this.webXR = GameObject.getComponent(this.gameObject, WebXR);
-        if(!this.webXR) this.webXR = GameObject.findObjectOfType(WebXR, this.context);
-        if(!this.webXR)
-        {
-            console.log("Missing webxr component");
-            this.webXR = GameObject.findObjectOfType(WebXR, this.context);
-            if(!this.webXR) {
-                console.error("Could not find webxr component");
-                return;
-            }
-        }
-        if (!this.voip) this.voip = GameObject.findObjectOfType(Voip, this.context);
-        if (debugAvatar) {
-            const debugGuid = "debug-avatar-" + debugAvatar;
-            const newUser = new WebXRAvatar(this.context, debugGuid, this.webXR);
-            // newUser.isLocalAvatar = true;
-            this.debugAvatarUser = newUser;
-            if (typeof debugAvatar === "string" && debugAvatar.length > 0) {
-                if (await newUser.setAvatarOverride(debugAvatar)) {
-                    const debugState = new VRUserState(debugGuid);
-                    debugState.position.y += 1;
-                    const off = .5;
-                    debugState.posLeftHand.y += off;
-                    debugState.posLeftHand.x += off;
-                    debugState.posRightHand.y += off;
-                    debugState.posRightHand.x -= off;
-                    newUser.tryUpdate(debugState, 0);
-                }
-                else {
-                    newUser.destroy();
-                }
-            }
-        }
-    }
-    onEnable() {
-        // const debugUser = new WebXRAvatar(this.context, "sorry-no-guid", this.webXR!);
-        if (!this.webXR) {
-            this.webXR = GameObject.getComponent(this.gameObject, WebXR);
-            if (!this.webXR) {
-                console.warn("Missing webxr component on " + this.gameObject.name);
-                return;
-            }
-        }
-        this.eventSub_WebXRStartEvent = this.onXRSessionStart.bind(this);
-        WebXR.addEventListener(WebXREvent.XRStarted, this.eventSub_WebXRStartEvent);
-        this.eventSub_WebXRUpdateEvent = this.onXRSessionUpdate.bind(this);
-        WebXR.addEventListener(WebXREvent.XRUpdate, this.eventSub_WebXRUpdateEvent);
-        this.eventSub_WebXREndEvent = this.onXRSessionEnded.bind(this);
-        WebXR.addEventListener(WebXREvent.XRStopped, this.eventSub_WebXREndEvent);
-        this.eventSub_ConnectionEvent = this.onConnected.bind(this);
-        this.context.connection.beginListen(RoomEvents.JoinedRoom, this.eventSub_ConnectionEvent);
-        this.context.connection.beginListen(WebXRSyncEvent.WebXR_UserJoined, _evt => {
-            console.log("webxr user joined evt");
-        });
-        this.context.connection.beginListen(WebXRSyncEvent.WebXR_UserLeft, evt => {
-            const hasId = evt.id !== null && evt.id !== undefined;
-            if (!hasId) return;
-            console.log("webxr user left evt");
-            if (hasId) {
-                const avatar = this.avatars[evt.id];
-                avatar?.destroy();
-                this.avatars[evt.id] = undefined;
-            }
-        });
-        this.context.connection.beginListenBinary(VRUserStateBufferIdentifier, (state: VrUserStateBuffer) => {
-            // console.log("BUFFER", state);
-            const guid = state.guid();
-            if (!guid) return;
-            const time = state.time().toFloat64();
-            const temp = this.tempState;
-            temp.setFromBuffer(guid, state);
-            // console.log(temp);
-            const user = this.onTryGetAvatar(guid, time);
-            user?.tryUpdate(temp, time);
-        });
-        this.context.connection.beginListen(WebXRSyncEvent.VRSessionUpdate, (state: VRUserState) => {
-            const guid = state.guid;
-            const time = state.time;
-            const user = this.onTryGetAvatar(guid, time);
-            user?.tryUpdate(state, time);
-        });
-    }
-    private tempState: VRUserState = new VRUserState("");
-    private onTryGetAvatar(guid: string, time: number) {
-        if (guid === this.context.connection.connectionId) return null; // ignore self in case we receive that also!
-        const timeDiff = new Date().getTime() - time;
-        if (timeDiff > 5000) {
-            if (debugLogs)
-                console.log("old data", timeDiff, guid)
-            return null;
-        }
-        let user = this.avatars[guid];
-        if (user === undefined) {
-            try {
-                console.log("create new avatar");
-                const newUser = new WebXRAvatar(this.context, guid, this.webXR!);
-                user = newUser;
-                this.avatars[guid] = newUser;
-            } catch (err) {
-                this.avatars[guid] = null;
-                console.error(err);
-            }
-        }
-        return user;
-    }
-    onDisable() {
-        if (this.eventSub_ConnectionEvent)
-            this.context.connection.stopListen(RoomEvents.JoinedRoom, this.eventSub_ConnectionEvent);
-        WebXR.removeEventListener(WebXREvent.XRStarted, this.eventSub_WebXRStartEvent);
-        WebXR.removeEventListener(WebXREvent.XRUpdate, this.eventSub_WebXRUpdateEvent);
-        WebXR.removeEventListener(WebXREvent.XRStopped, this.eventSub_WebXREndEvent);
-    }
-    update(): void {
-        const now = getTimeStampNow();
-        if (this.debugAvatarUser) {
-            this.debugAvatarUser.lastUpdate = now;
-        }
-        this.detectPotentiallyDisconnectedAvatarsAndRemove();
-        for (const key in this.avatars) {
-            const avatar = this.avatars[key];
-            if (!avatar) continue;
-            avatar.update();
-        }
-    }
-    private _removeAvatarsList: string[] = [];
-    private detectPotentiallyDisconnectedAvatarsAndRemove() {
-        const utcnow = getTimeStampNow();
-        for (const key in this.avatars) {
-            const avatar = this.avatars[key];
-            if (!avatar) {
-                this._removeAvatarsList.push(key);
-                continue;
-            }
-            if (utcnow - avatar.lastUpdate > 10_000) {
-                console.log("avatar timed out (didnt receive any updates in  a while) - destroying it now");
-                avatar.destroy();
-                this.avatars[key] = undefined;
-            }
-        }
-        for (const rem of this._removeAvatarsList) {
-            delete this.avatars[rem];
-        }
-        this._removeAvatarsList.length = 0;
-    }
-    private buildLocalAvatar() {
-        if (this.localAvatar) return;
-        const connectionId = this.context.connection?.connectionId ?? this.k_LocalAvatarNoNetworkingGuid;
-        this.localAvatar = new WebXRAvatar(this.context, connectionId, this.webXR!);
-        this.localAvatar.isLocalAvatar = true;
-        this.localAvatar.setAvatarOverride(this.getAvatarId());
-        this.avatars[this.localAvatar.guid] = this.localAvatar;
-    }
-    private eventSub_ConnectionEvent: Function | null = null;
-    private eventSub_WebXRStartEvent: Function | null = null;
-    private eventSub_WebXREndEvent: Function | null = null;
-    private eventSub_WebXRUpdateEvent: Function | null = null;
-    private avatars: { [key: string]: WebXRAvatar | undefined | null } = {}
-    private localAvatar: WebXRAvatar | null = null;
-    private k_LocalAvatarNoNetworkingGuid = "local";
-    private onConnected() {
-        // this event gets fired when we have joined a room and are ready to update
-        if (debugLogs)
-            console.log("Hey you are connected as " + this.context.connection.connectionId);
-        if (this.localAvatar?.guid === this.k_LocalAvatarNoNetworkingGuid) {
-            if (this.localAvatar) {
-                this.localAvatar?.destroy();
-                this.avatars[this.localAvatar.guid] = undefined;
-            }
-            this.localAvatar = null;
-            this.xrState = null;
-            this.ownership?.freeOwnership();
-            this.ownership = null;
-        }
-    }
-    private onXRSessionStart(_evt: { session: XRSession }) {
-        console.log("XR session started");
-        this.context.connection.send(WebXRSyncEvent.WebXR_UserJoined, { id: this.context.connection.connectionId, mode: XRMode.VR });
-        if (this.localAvatar) {
-            this.localAvatar?.destroy();
-            this.avatars[this.localAvatar.guid] = undefined;
-            this.localAvatar = null;
-        }
-        this.xrState = null;
-        this.ownership?.freeOwnership();
-        this.ownership = null;
-        if (this.avatars) {
-            for (const key in this.avatars) {
-                this.avatars[key]?.updateFlags();
-            }
-        }
-    }
-    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;
-    private xrState: VRUserState | null = null;
-    private builder: Builder = new Builder(1024);
-    private onXRSessionUpdate(evt: { rig: Group, frame: XRFrame, xr: WebXRManager, input: XRInputSource[] }) {
-        this.xrState ??= new VRUserState(this.context.connection.connectionId ?? this.k_LocalAvatarNoNetworkingGuid);
-        this.ownership ??= new OwnershipModel(this.context.connection, this.context.connection.connectionId ?? this.k_LocalAvatarNoNetworkingGuid);
-        this.ownership.guid = this.context.connection.connectionId ?? this.k_LocalAvatarNoNetworkingGuid;
-        this.buildLocalAvatar();
-        const { frame, xr, rig } = evt;
-        const pose = frame.getViewerPose(xr.getReferenceSpace()!);
-        if (!pose) return; // e.g. if user is not wearing headset
-        const transform: XRRigidTransform = pose?.transform;
-        const pos = transform.position;
-        const rot = transform.orientation;
-        this.xrState.update(rig, pos, rot, this.webXR!, this.getAvatarId());
-        if (this.localAvatar) {
-            if (this.context.connection.connectionId) {
-                this.localAvatar.guid = this.context.connection.connectionId;
-            }
-            this.localAvatar.tryUpdate(this.xrState, 0);
-        }
-        if (this.ownership && !this.ownership.hasOwnership && this.context.connection.isConnected) {
-            if (this.context.time.frameCount % 120 === 0)
-                this.ownership.requestOwnership();
-            if (!this.ownership.hasOwnership) {
-                // console.log("NO OWNERSHIP", this.ownership.guid);
-                return;
-            }
-        }
-        if (!this.context.connection.isConnected || !this.context.connection.connectionId) {
-            return;
-        }
-        this.xrState.sendAsBuffer(this.builder, this.context.connection);
-        // this.context.connection.send(WebXRSyncEvent.VRSessionUpdate, this.xrState);
-    }
-    private getAvatarId() {
-        const urlAvatar = getParam("avatar") as string;
-        const avatarId = urlAvatar ?? null;
-        return avatarId;
-    }
-}
+import { Behaviour, GameObject } from "../Component.js";
+import { RoomEvents, OwnershipModel, NetworkConnection } from "../../engine/engine_networking.js";
+import { WebXR, WebXREvent } from "./WebXR.js";
+import { Group, Quaternion, Vector3, Vector4, WebXRManager } from "three";
+import { getParam } from "../../engine/engine_utils.js";
+import { Voip } from "../Voip.js";
+import { Builder, Long } from "flatbuffers";
+import { VrUserStateBuffer } from "../../engine-schemes/vr-user-state-buffer.js";
+import { Vec3 } from "../../engine-schemes/vec3.js";
+import { registerBinaryType } from "../../engine-schemes/schemes.js";
+import { Vec4 } from "../../engine-schemes/vec4.js";
+import { WebXRAvatar } from "./WebXRAvatar.js";
+// for debug GUI
+// import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";
+// import { HTMLMesh } from 'three/examples/jsm/interactive/HTMLMesh.js';
+// import { InteractiveGroup } from 'three/examples/jsm/interactive/InteractiveGroup.js';
+// import { renderer, sceneData } from "../engine/engine_setup.js";
+const debugLogs = getParam("debugxr");
+const debugAvatar = getParam("debugavatar");
+// const debugAvatarVoip = getParam("debugavatarvoip");
+enum WebXRSyncEvent {
+    WebXR_UserJoined = "webxr-user-joined",
+    WebXR_UserLeft = "webxr-user-left",
+    VRSessionStart = "vr-session-started",
+    VRSessionEnd = "vr-session-ended",
+    VRSessionUpdate = "vr-session-update",
+}
+enum XRMode {
+    VR = "vr",
+    AR = "ar",
+}
+const VRUserStateBufferIdentifier = "VRUS";
+registerBinaryType(VRUserStateBufferIdentifier, VrUserStateBuffer.getRootAsVrUserStateBuffer);
+function getTimeStampNow() {
+    return new Date().getTime(); // avoid sending millis in flatbuffer
+}
+function flatbuffers_long_from_number(num: number): Long {
+    const low = num & 0xffffffff
+    const high = (num / Math.pow(2, 32)) & 0xfffff
+    return Long.create(low, high);
+}
+export class VRUserState {
+    public guid: string;
+    public time!: number;
+    public avatarId!: string;
+    public position: Vector3 = new Vector3();
+    public rotation: Vector4 = new Vector4();
+    public scale: number = 1;
+    public posLeftHand = new Vector3();
+    public posRightHand = new Vector3();
+    public rotLeftHand = new Quaternion();
+    public rotRightHand = new Quaternion();
+    public constructor(guid: string) {
+        this.guid = guid;
+    }
+    private static invertRotation: Quaternion = new Quaternion().setFromAxisAngle(new Vector3(0, 1, 0), Math.PI);
+    public update(rig: Group, pos: DOMPointReadOnly, rot: DOMPointReadOnly, webXR: WebXR, avatarId: string) {
+        this.time = getTimeStampNow();
+        this.avatarId = avatarId;
+        this.position.set(pos.x, pos.y, pos.z);
+        if (rig)
+            this.position.applyMatrix4(rig.matrixWorld);
+        let q0 = VRUserState.quat0;
+        const q1 = VRUserState.quat1;
+        q0.set(rot.x, rot.y, rot.z, rot.w);
+        q0 = q0.multiplyQuaternions(q0, VRUserState.invertRotation);
+        if (rig) {
+            rig.getWorldQuaternion(q1);
+            q0.multiplyQuaternions(q1, q0);
+        }
+        this.rotation.set(q0.x, q0.y, q0.z, q0.w);
+        this.scale = rig.scale.x;
+        // for controllers, it seems we need grip pose
+        const ctrl0 = webXR.LeftController?.controllerGrip;
+        if (ctrl0) {
+            ctrl0.getWorldPosition(this.posLeftHand);
+            ctrl0.getWorldQuaternion(this.rotLeftHand);
+        }
+        const ctrl1 = webXR.RightController?.controllerGrip;
+        if (ctrl1) {
+            ctrl1.getWorldPosition(this.posRightHand);
+            ctrl1.getWorldQuaternion(this.rotRightHand);
+        }
+        // if this is a hand, we need to get the root bone of that / use that for position/rotation
+        if (webXR.LeftController?.hand?.visible) {
+            const wrist = webXR.LeftController.wrist;
+            if (wrist) {
+                wrist.getWorldPosition(this.posLeftHand);
+                wrist.getWorldQuaternion(this.rotLeftHand);
+            }
+        }
+        if (webXR.RightController?.hand?.visible) {
+            const wrist = webXR.RightController.wrist;
+            if (wrist) {
+                wrist.getWorldPosition(this.posRightHand);
+                wrist.getWorldQuaternion(this.rotRightHand);
+            }
+        }
+    }
+    private static quat0: Quaternion = new Quaternion();
+    private static quat1: Quaternion = new Quaternion();
+    public sendAsBuffer(builder: Builder, net: NetworkConnection) {
+        builder.clear();
+        const guid = builder.createString(this.guid);
+        const id = builder.createString(this.avatarId);
+        VrUserStateBuffer.startVrUserStateBuffer(builder);
+        VrUserStateBuffer.addGuid(builder, guid);
+        VrUserStateBuffer.addTime(builder, flatbuffers_long_from_number(this.time));
+        VrUserStateBuffer.addAvatarId(builder, id);
+        VrUserStateBuffer.addPosition(builder, Vec3.createVec3(builder, this.position.x, this.position.y, this.position.z));
+        VrUserStateBuffer.addRotation(builder, Vec4.createVec4(builder, this.rotation.x, this.rotation.y, this.rotation.z, this.rotation.w));
+        VrUserStateBuffer.addScale(builder, this.scale);
+        VrUserStateBuffer.addPosLeftHand(builder, Vec3.createVec3(builder, this.posLeftHand.x, this.posLeftHand.y, this.posLeftHand.z));
+        VrUserStateBuffer.addPosRightHand(builder, Vec3.createVec3(builder, this.posRightHand.x, this.posRightHand.y, this.posRightHand.z));
+        VrUserStateBuffer.addRotLeftHand(builder, Vec4.createVec4(builder, this.rotLeftHand.x, this.rotLeftHand.y, this.rotLeftHand.z, this.rotLeftHand.w));
+        VrUserStateBuffer.addRotRightHand(builder, Vec4.createVec4(builder, this.rotRightHand.x, this.rotRightHand.y, this.rotRightHand.z, this.rotRightHand.w));
+        const res = VrUserStateBuffer.endVrUserStateBuffer(builder);
+        builder.finish(res, VRUserStateBufferIdentifier);
+        const arr = builder.asUint8Array();
+        net.sendBinary(arr);
+    }
+    public setFromBuffer(guid: string, state: VrUserStateBuffer) {
+        if (!guid) return;
+        this.guid = guid;
+        this.time = state.time().toFloat64();
+        const id = state.avatarId();
+        if (id)
+            this.avatarId = id;
+        const pos = state.position();
+        if (pos)
+            this.position.set(pos.x(), pos.y(), pos.z());
+        // TODO: maybe just send one float more instead of converting back and forth
+        const rot = state.rotation();
+        if (rot)
+            this.rotation.set(rot.x(), rot.y(), rot.z(), rot.w());
+        const posLeftHand = state.posLeftHand();
+        if (posLeftHand)
+            this.posLeftHand.set(posLeftHand.x(), posLeftHand.y(), posLeftHand.z());
+        const posRightHand = state.posRightHand();
+        if (posRightHand)
+            this.posRightHand.set(posRightHand.x(), posRightHand.y(), posRightHand.z());
+        const rotLeftHand = state.rotLeftHand();
+        if (rotLeftHand)
+            this.rotLeftHand.set(rotLeftHand.x(), rotLeftHand.y(), rotLeftHand.z(), rotLeftHand.w());
+        const rotRightHand = state.rotRightHand();
+        if (rotRightHand)
+            this.rotRightHand.set(rotRightHand.x(), rotRightHand.y(), rotRightHand.z(), rotRightHand.w());
+        this.scale = state.scale();
+    }
+}
+export class WebXRSync extends Behaviour {
+    webXR: WebXR | null = null;
+    // private allowCustomAvatars: boolean | null = true;
+    private debugAvatarUser: WebXRAvatar | null = null;
+    private voip: Voip | null = null;
+    async awake() {
+        if(!this.webXR) this.webXR = GameObject.getComponent(this.gameObject, WebXR);
+        if(!this.webXR) this.webXR = GameObject.findObjectOfType(WebXR, this.context);
+        if(!this.webXR)
+        {
+            console.log("Missing webxr component");
+            this.webXR = GameObject.findObjectOfType(WebXR, this.context);
+            if(!this.webXR) {
+                console.error("Could not find webxr component");
+                return;
+            }
+        }
+        if (!this.voip) this.voip = GameObject.findObjectOfType(Voip, this.context);
+        if (debugAvatar) {
+            const debugGuid = "debug-avatar-" + debugAvatar;
+            const newUser = new WebXRAvatar(this.context, debugGuid, this.webXR);
+            // newUser.isLocalAvatar = true;
+            this.debugAvatarUser = newUser;
+            if (typeof debugAvatar === "string" && debugAvatar.length > 0) {
+                if (await newUser.setAvatarOverride(debugAvatar)) {
+                    const debugState = new VRUserState(debugGuid);
+                    debugState.position.y += 1;
+                    const off = .5;
+                    debugState.posLeftHand.y += off;
+                    debugState.posLeftHand.x += off;
+                    debugState.posRightHand.y += off;
+                    debugState.posRightHand.x -= off;
+                    newUser.tryUpdate(debugState, 0);
+                }
+                else {
+                    newUser.destroy();
+                }
+            }
+        }
+    }
+    onEnable() {
+        // const debugUser = new WebXRAvatar(this.context, "sorry-no-guid", this.webXR!);
+        if (!this.webXR) {
+            this.webXR = GameObject.getComponent(this.gameObject, WebXR);
+            if (!this.webXR) {
+                console.warn("Missing webxr component on " + this.gameObject.name);
+                return;
+            }
+        }
+        this.eventSub_WebXRStartEvent = this.onXRSessionStart.bind(this);
+        WebXR.addEventListener(WebXREvent.XRStarted, this.eventSub_WebXRStartEvent);
+        this.eventSub_WebXRUpdateEvent = this.onXRSessionUpdate.bind(this);
+        WebXR.addEventListener(WebXREvent.XRUpdate, this.eventSub_WebXRUpdateEvent);
+        this.eventSub_WebXREndEvent = this.onXRSessionEnded.bind(this);
+        WebXR.addEventListener(WebXREvent.XRStopped, this.eventSub_WebXREndEvent);
+        this.eventSub_ConnectionEvent = this.onConnected.bind(this);
+        this.context.connection.beginListen(RoomEvents.JoinedRoom, this.eventSub_ConnectionEvent);
+        this.context.connection.beginListen(WebXRSyncEvent.WebXR_UserJoined, _evt => {
+            console.log("webxr user joined evt");
+        });
+        this.context.connection.beginListen(WebXRSyncEvent.WebXR_UserLeft, evt => {
+            const hasId = evt.id !== null && evt.id !== undefined;
+            if (!hasId) return;
+            console.log("webxr user left evt");
+            if (hasId) {
+                const avatar = this.avatars[evt.id];
+                avatar?.destroy();
+                this.avatars[evt.id] = undefined;
+            }
+        });
+        this.context.connection.beginListenBinary(VRUserStateBufferIdentifier, (state: VrUserStateBuffer) => {
+            // console.log("BUFFER", state);
+            const guid = state.guid();
+            if (!guid) return;
+            const time = state.time().toFloat64();
+            const temp = this.tempState;
+            temp.setFromBuffer(guid, state);
+            // console.log(temp);
+            const user = this.onTryGetAvatar(guid, time);
+            user?.tryUpdate(temp, time);
+        });
+        this.context.connection.beginListen(WebXRSyncEvent.VRSessionUpdate, (state: VRUserState) => {
+            const guid = state.guid;
+            const time = state.time;
+            const user = this.onTryGetAvatar(guid, time);
+            user?.tryUpdate(state, time);
+        });
+    }
+    private tempState: VRUserState = new VRUserState("");
+    private onTryGetAvatar(guid: string, time: number) {
+        if (guid === this.context.connection.connectionId) return null; // ignore self in case we receive that also!
+        const timeDiff = new Date().getTime() - time;
+        if (timeDiff > 5000) {
+            if (debugLogs)
+                console.log("old data", timeDiff, guid)
+            return null;
+        }
+        let user = this.avatars[guid];
+        if (user === undefined) {
+            try {
+                console.log("create new avatar");
+                const newUser = new WebXRAvatar(this.context, guid, this.webXR!);
+                user = newUser;
+                this.avatars[guid] = newUser;
+            } catch (err) {
+                this.avatars[guid] = null;
+                console.error(err);
+            }
+        }
+        return user;
+    }
+    onDisable() {
+        if (this.eventSub_ConnectionEvent)
+            this.context.connection.stopListen(RoomEvents.JoinedRoom, this.eventSub_ConnectionEvent);
+        WebXR.removeEventListener(WebXREvent.XRStarted, this.eventSub_WebXRStartEvent);
+        WebXR.removeEventListener(WebXREvent.XRUpdate, this.eventSub_WebXRUpdateEvent);
+        WebXR.removeEventListener(WebXREvent.XRStopped, this.eventSub_WebXREndEvent);
+    }
+    update(): void {
+        const now = getTimeStampNow();
+        if (this.debugAvatarUser) {
+            this.debugAvatarUser.lastUpdate = now;
+        }
+        this.detectPotentiallyDisconnectedAvatarsAndRemove();
+        for (const key in this.avatars) {
+            const avatar = this.avatars[key];
+            if (!avatar) continue;
+            avatar.update();
+        }
+    }
+    private _removeAvatarsList: string[] = [];
+    private detectPotentiallyDisconnectedAvatarsAndRemove() {
+        const utcnow = getTimeStampNow();
+        for (const key in this.avatars) {
+            const avatar = this.avatars[key];
+            if (!avatar) {
+                this._removeAvatarsList.push(key);
+                continue;
+            }
+            if (utcnow - avatar.lastUpdate > 10_000) {
+                console.log("avatar timed out (didnt receive any updates in  a while) - destroying it now");
+                avatar.destroy();
+                this.avatars[key] = undefined;
+            }
+        }
+        for (const rem of this._removeAvatarsList) {
+            delete this.avatars[rem];
+        }
+        this._removeAvatarsList.length = 0;
+    }
+    private buildLocalAvatar() {
+        if (this.localAvatar) return;
+        const connectionId = this.context.connection?.connectionId ?? this.k_LocalAvatarNoNetworkingGuid;
+        this.localAvatar = new WebXRAvatar(this.context, connectionId, this.webXR!);
+        this.localAvatar.isLocalAvatar = true;
+        this.localAvatar.setAvatarOverride(this.getAvatarId());
+        this.avatars[this.localAvatar.guid] = this.localAvatar;
+    }
+    private eventSub_ConnectionEvent: Function | null = null;
+    private eventSub_WebXRStartEvent: Function | null = null;
+    private eventSub_WebXREndEvent: Function | null = null;
+    private eventSub_WebXRUpdateEvent: Function | null = null;
+    private avatars: { [key: string]: WebXRAvatar | undefined | null } = {}
+    private localAvatar: WebXRAvatar | null = null;
+    private k_LocalAvatarNoNetworkingGuid = "local";
+    private onConnected() {
+        // this event gets fired when we have joined a room and are ready to update
+        if (debugLogs)
+            console.log("Hey you are connected as " + this.context.connection.connectionId);
+        if (this.localAvatar?.guid === this.k_LocalAvatarNoNetworkingGuid) {
+            if (this.localAvatar) {
+                this.localAvatar?.destroy();
+                this.avatars[this.localAvatar.guid] = undefined;
+            }
+            this.localAvatar = null;
+            this.xrState = null;
+            this.ownership?.freeOwnership();
+            this.ownership = null;
+        }
+    }
+    private onXRSessionStart(_evt: { session: XRSession }) {
+        console.log("XR session started");
+        this.context.connection.send(WebXRSyncEvent.WebXR_UserJoined, { id: this.context.connection.connectionId, mode: XRMode.VR });
+        if (this.localAvatar) {
+            this.localAvatar?.destroy();
+            this.avatars[this.localAvatar.guid] = undefined;
+            this.localAvatar = null;
+        }
+        this.xrState = null;
+        this.ownership?.freeOwnership();
+        this.ownership = null;
+        if (this.avatars) {
+            for (const key in this.avatars) {
+                this.avatars[key]?.updateFlags();
+            }
+        }
+    }
+    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;
+    private xrState: VRUserState | null = null;
+    private builder: Builder = new Builder(1024);
+    private onXRSessionUpdate(evt: { rig: Group, frame: XRFrame, xr: WebXRManager, input: XRInputSource[] }) {
+        this.xrState ??= new VRUserState(this.context.connection.connectionId ?? this.k_LocalAvatarNoNetworkingGuid);
+        this.ownership ??= new OwnershipModel(this.context.connection, this.context.connection.connectionId ?? this.k_LocalAvatarNoNetworkingGuid);
+        this.ownership.guid = this.context.connection.connectionId ?? this.k_LocalAvatarNoNetworkingGuid;
+        this.buildLocalAvatar();
+        const { frame, xr, rig } = evt;
+        const pose = frame.getViewerPose(xr.getReferenceSpace()!);
+        if (!pose) return; // e.g. if user is not wearing headset
+        const transform: XRRigidTransform = pose?.transform;
+        const pos = transform.position;
+        const rot = transform.orientation;
+        this.xrState.update(rig, pos, rot, this.webXR!, this.getAvatarId());
+        if (this.localAvatar) {
+            if (this.context.connection.connectionId) {
+                this.localAvatar.guid = this.context.connection.connectionId;
+            }
+            this.localAvatar.tryUpdate(this.xrState, 0);
+        }
+        if (this.ownership && !this.ownership.hasOwnership && this.context.connection.isConnected) {
+            if (this.context.time.frameCount % 120 === 0)
+                this.ownership.requestOwnership();
+            if (!this.ownership.hasOwnership) {
+                // console.log("NO OWNERSHIP", this.ownership.guid);
+                return;
+            }
+        }
+        if (!this.context.connection.isConnected || !this.context.connection.connectionId) {
+            return;
+        }
+        this.xrState.sendAsBuffer(this.builder, this.context.connection);
+        // this.context.connection.send(WebXRSyncEvent.VRSessionUpdate, this.xrState);
+    }
+    private getAvatarId() {
+        const urlAvatar = getParam("avatar") as string;
+        const avatarId = urlAvatar ?? null;
+        return avatarId;
+    }
+}