@needle-tools/engine 4.10.0-beta.2 → 4.10.0-beta.4

package/lib/engine-components/web/ViewBox.js.map

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

package/lib/engine-components-experimental/Presentation.d.ts

@@ -1,5 +1,6 @@
 import type { KeyCode } from "../engine/engine_input.js";
 import { Behaviour } from "../engine-components/Component.js";
+/** @internal */
 export declare class PresentationMode extends Behaviour {
     toggleKey: KeyCode;
     update(): void;

package/lib/engine-components-experimental/Presentation.js

@@ -1,4 +1,5 @@
 import { Behaviour } from "../engine-components/Component.js";
+/** @internal */
 export class PresentationMode extends Behaviour {
     toggleKey = "KeyP";
     update() {

package/lib/engine-components-experimental/Presentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Presentation.js","sourceRoot":"","sources":["../../src/engine-components-experimental/Presentation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAE9D,MAAM,OAAO,gBAAiB,SAAQ,SAAS;IAE3C,SAAS,GAAY,MAAM,CAAC;IAE5B,MAAM;QACF,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;YAC9C,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;SACjE;IACL,CAAC;CACJ"}
+{"version":3,"file":"Presentation.js","sourceRoot":"","sources":["../../src/engine-components-experimental/Presentation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAE9D,gBAAgB;AAChB,MAAM,OAAO,gBAAiB,SAAQ,SAAS;IAE3C,SAAS,GAAY,MAAM,CAAC;IAE5B,MAAM;QACF,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;YAC9C,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;SACjE;IACL,CAAC;CACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/engine",
-  "version": "4.10.0-beta.2",
+  "version": "4.10.0-beta.4",
   "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.",
   "main": "dist/needle-engine.min.js",
   "exports": {

package/src/engine/codegen/register_types.ts

@@ -142,7 +142,7 @@ import { ClickThrough } from "../../engine-components/web/Clickthrough.js";
 import { CursorFollow } from "../../engine-components/web/CursorFollow.js";
 import { HoverAnimation } from "../../engine-components/web/HoverAnimation.js";
 import { ScrollFollow } from "../../engine-components/web/ScrollFollow.js";
-import { ViewBox } from "../../engine-components/web/ViewBox.js";
+import { ResponsiveBox } from "../../engine-components/web/ViewBox.js";
 import { Avatar } from "../../engine-components/webxr/Avatar.js";
 import { XRControllerFollow } from "../../engine-components/webxr/controllers/XRControllerFollow.js";
 import { XRControllerModel } from "../../engine-components/webxr/controllers/XRControllerModel.js";
@@ -301,7 +301,7 @@ TypeStore.add("ClickThrough", ClickThrough);
 TypeStore.add("CursorFollow", CursorFollow);
 TypeStore.add("HoverAnimation", HoverAnimation);
 TypeStore.add("ScrollFollow", ScrollFollow);
-TypeStore.add("ViewBox", ViewBox);
+TypeStore.add("ResponsiveBox", ResponsiveBox);
 TypeStore.add("Avatar", Avatar);
 TypeStore.add("XRControllerFollow", XRControllerFollow);
 TypeStore.add("XRControllerModel", XRControllerModel);

package/src/engine/engine_camera.ts

@@ -2,6 +2,7 @@ import { Camera, HemisphereLightHelper, Object3D, PerspectiveCamera, Vector2, We
 
 import { Mathf } from "./engine_math.js";
 import type { ICameraController } from "./engine_types.js";
+import { getParam } from "./engine_utils.js";
 
 
 const $cameraController = "needle:cameraController";
@@ -66,11 +67,15 @@ export type FocusRect = DOMRect | Element | { x: number, y: number, width: numbe
 let rendererRect: DOMRect | undefined = undefined;
 const overlapRect = { x: 0, y: 0, width: 0, height: 0 };
 const _testTime = 1;
+const debug = getParam("debugfocusrect");
 
 /** Used internally by the Needle Engine context via 'setFocusRect(<rect>)'  */
 export function updateCameraFocusRect(focusRect: FocusRect, settings: FocusRectSettings, dt: number, camera: PerspectiveCamera, renderer: WebGLRenderer) {
 
     if (focusRect instanceof Element) {
+        if(debug && focusRect instanceof HTMLElement) {
+            focusRect.style.outline = "2px dashed rgba(255, 150, 0, .8)";
+        }
         focusRect = focusRect.getBoundingClientRect();
     }
     rendererRect = renderer.domElement.getBoundingClientRect();
@@ -136,10 +141,3 @@ export function updateCameraFocusRect(focusRect: FocusRect, settings: FocusRectS
         settings.damping = Math.max(0, settings.damping);
     }
 }
-
-
-function fit(width1: number, height1: number, width2: number, height2: number) {
-    const scaleX = width2 / width1;
-    const scaleY = height2 / height1;
-    return Math.max(scaleX, scaleY);
-}

package/src/engine/engine_gizmos.ts

@@ -1,4 +1,4 @@
-import { AxesHelper, Box3, BoxGeometry, BufferAttribute, BufferGeometry, Color, type ColorRepresentation, CylinderGeometry, EdgesGeometry, Line, LineBasicMaterial, LineSegments, Matrix4, Mesh, MeshBasicMaterial, Object3D, Quaternion, SphereGeometry, Vector3 } from 'three';
+import { AxesHelper, Box3, BoxGeometry, BufferAttribute, BufferGeometry, Color, type ColorRepresentation, CylinderGeometry, EdgesGeometry, Line, LineBasicMaterial, LineSegments, Material,Matrix4, Mesh, MeshBasicMaterial, Object3D, Quaternion, SphereGeometry, Vector3 } from 'three';
 import ThreeMeshUI, { Inline, Text } from "three-mesh-ui"
 import { type Options } from 'three-mesh-ui/build/types/core/elements/MeshUIBaseElement.js';
 
@@ -8,6 +8,7 @@ import { getTempVector, getWorldPosition, lookAtObject, setWorldPositionXYZ } fr
 import type { Vec3, Vec4 } from './engine_types.js';
 import { getParam } from './engine_utils.js';
 import { NeedleXRSession } from './engine_xr.js';
+import { RGBAColor } from './js-extensions/RGBAColor.js';
 
 const _tmp = new Vector3();
 const _tmp2 = new Vector3();
@@ -21,7 +22,7 @@ const circleSegments: number = 32;
 export type LabelHandle = {
     setText(str: string);
 }
-declare type ColorWithAlpha = Color & { a: number };
+type GizmoColor = ColorRepresentation | (Color & { a: number }) | RGBAColor;
 
 /** Gizmos are temporary objects that are drawn in the scene for debugging or visualization purposes  
  * They are automatically removed after a given duration and cached internally to reduce overhead.  
@@ -62,7 +63,7 @@ export class Gizmos {
      * @param parent the parent object to attach the label to. If no parent is provided the label will be attached to the scene
      * @returns a handle to the label that can be used to update the text
      */
-    static DrawLabel(position: Vec3, text: string, size: number = .05, duration: number = 0, color?: ColorRepresentation, backgroundColor?: ColorRepresentation | ColorWithAlpha, parent?: Object3D,) {
+    static DrawLabel(position: Vec3, text: string, size: number = .05, duration: number = 0, color?: ColorRepresentation, backgroundColor?: ColorRepresentation | GizmoColor, parent?: Object3D,) {
         if (!Gizmos.enabled) return null;
         if (!color) color = defaultColor;
         const rigScale = NeedleXRSession.active?.rigScale ?? 1;
@@ -82,7 +83,7 @@ export class Gizmos {
      * @param duration the duration in seconds the ray will be rendered. If 0 it will be rendered for one frame
      * @param depthTest if true the ray will be rendered with depth test
      */
-    static DrawRay(origin: Vec3, dir: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+    static DrawRay(origin: Vec3, dir: Vec3, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getLine(duration);
         const positions = obj.geometry.getAttribute("position");
@@ -90,9 +91,10 @@ export class Gizmos {
         _tmp.set(dir.x, dir.y, dir.z).multiplyScalar(999999999);
         positions.setXYZ(1, origin.x + _tmp.x, origin.y + _tmp.y, origin.z + _tmp.z);
         positions.needsUpdate = true;
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["depthWrite"] = false;
+        obj.material["fog"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -104,7 +106,7 @@ export class Gizmos {
      * @param depthTest if true the line will be rendered with depth test
      * @param lengthFactor the length of the line. Default is 1
      */
-    static DrawDirection(pt: Vec3, direction: Vec3 | Vec4, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true, lengthFactor: number = 1) {
+    static DrawDirection(pt: Vec3, direction: Vec3 | Vec4, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true, lengthFactor: number = 1) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getLine(duration);
         const positions = obj.geometry.getAttribute("position");
@@ -120,10 +122,9 @@ export class Gizmos {
         }
         positions.setXYZ(1, pt.x + _tmp.x, pt.y + _tmp.y, pt.z + _tmp.z);
         positions.needsUpdate = true;
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["depthWrite"] = false;
-
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -134,17 +135,17 @@ export class Gizmos {
      * @param duration the duration in seconds the line will be rendered. If 0 it will be rendered for one frame
      * @param depthTest if true the line will be rendered with depth test
      */
-    static DrawLine(pt0: Vec3, pt1: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+    static DrawLine(pt0: Vec3, pt1: Vec3, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getLine(duration);
         const positions = obj.geometry.getAttribute("position");
         positions.setXYZ(0, pt0.x, pt0.y, pt0.z);
         positions.setXYZ(1, pt1.x, pt1.y, pt1.z);
         positions.needsUpdate = true;
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["depthWrite"] = false;
         obj.material["fog"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -162,10 +163,10 @@ export class Gizmos {
         obj.position.set(pt0.x, pt0.y, pt0.z);
         obj.scale.set(radius, radius, radius);
         obj.quaternion.setFromUnitVectors(this._up, _tmp.set(normal.x, normal.y, normal.z).normalize());
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["depthWrite"] = false;
         obj.material["fog"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -176,14 +177,14 @@ export class Gizmos {
      * @param duration the duration in seconds the sphere will be rendered. If 0 it will be rendered for one frame
      * @param depthTest if true the sphere will be rendered with depth test
      */
-    static DrawWireSphere(center: Vec3, radius: number, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+    static DrawWireSphere(center: Vec3, radius: number, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getSphere(radius, duration, true);
         setWorldPositionXYZ(obj, center.x, center.y, center.z);
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["depthWrite"] = false;
         obj.material["fog"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -194,13 +195,13 @@ export class Gizmos {
      * @param duration the duration in seconds the sphere will be rendered. If 0 it will be rendered for one frame
      * @param depthTest if true the sphere will be rendered with depth test
      */
-    static DrawSphere(center: Vec3, radius: number, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+    static DrawSphere(center: Vec3, radius: number, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getSphere(radius, duration, false);
         setWorldPositionXYZ(obj, center.x, center.y, center.z);
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["depthWrite"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -212,18 +213,18 @@ export class Gizmos {
      * @param duration the duration in seconds the box will be rendered. If 0 it will be rendered for one frame
      * @param depthTest if true the box will be rendered with depth test
      */
-    static DrawWireBox(center: Vec3, size: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true, rotation: Quaternion|undefined = undefined) {
+    static DrawWireBox(center: Vec3, size: Vec3, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true, rotation: Quaternion | undefined = undefined) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getBox(duration);
         obj.position.set(center.x, center.y, center.z);
         obj.scale.set(size.x, size.y, size.z);
-        if(rotation) obj.quaternion.copy(rotation);
+        if (rotation) obj.quaternion.copy(rotation);
         else obj.quaternion.identity();
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["wireframe"] = true;
         obj.material["depthWrite"] = false;
         obj.material["fog"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -233,16 +234,16 @@ export class Gizmos {
      * @param duration the duration in seconds the box will be rendered. If 0 it will be rendered for one frame. Default: 0
      * @param depthTest if true the box will be rendered with depth test. Default: true
      */
-    static DrawWireBox3(box: Box3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+    static DrawWireBox3(box: Box3, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getBox(duration);
         obj.position.copy(box.getCenter(_tmp));
         obj.scale.copy(box.getSize(_tmp));
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["wireframe"] = true;
         obj.material["depthWrite"] = false;
         obj.material["fog"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     private static _up = new Vector3(0, 1, 0);
@@ -263,9 +264,9 @@ export class Gizmos {
         const dist = _tmp.set(pt1.x, pt1.y, pt1.z).sub(_tmp2.set(pt0.x, pt0.y, pt0.z)).length();
         const scale = dist * 0.1;
         obj.scale.set(scale, scale, scale);
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["wireframe"] = wireframe;
+        applyGizmoColor(obj.material, color);
         this.DrawLine(pt0, pt1, color, duration, depthTest);
     }
 
@@ -296,9 +297,9 @@ export class Gizmos {
         }
         mesh.matrixAutoUpdate = false;
         mesh.matrixWorldAutoUpdate = false;
-        mesh.material["color"].set(options.color ?? defaultColor);
         mesh.material["depthTest"] = options.depthTest ?? true;
         mesh.material["wireframe"] = true;
+        applyGizmoColor(mesh.material, options.color ?? defaultColor);
     }
 }
 
@@ -316,6 +317,19 @@ export function CreateWireCube(col: ColorRepresentation | null = null): LineSegm
 }
 
 
+function applyGizmoColor(material: Material | Material[], color: GizmoColor) {
+    if (Array.isArray(material)) {
+        for (const mat of material) {
+            applyGizmoColor(mat, color);
+        }
+        return;
+    }
+    const alpha = (color instanceof RGBAColor) ? color.a : 1.0;
+    material["color"].set(color);
+    material["opacity"] = alpha;
+    material["transparent"] = alpha < 1.0;
+}
+
 
 const $cacheSymbol = Symbol("GizmoCache");
 class Internal {
@@ -335,7 +349,7 @@ class Internal {
         }
     }
 
-    static getTextLabel(duration: number, text: string, size: number, color: ColorRepresentation, backgroundColor?: ColorRepresentation | ColorWithAlpha): Text & LabelHandle {
+    static getTextLabel(duration: number, text: string, size: number, color: ColorRepresentation, backgroundColor?: ColorRepresentation | GizmoColor): Text & LabelHandle {
         this.ensureFont();
         let element = this.textLabelCache.pop();
 

package/src/engine/extensions/extension_utils.ts

@@ -89,7 +89,7 @@ function internalResolve(paths: DependencyInfo[], parser: GLTFParserWithCache, o
                 for (let i = 0; i < val.length; i++) {
                     const entry = val[i];
                     const ext = resolveExtension(parser, entry);
-                    if (ext !== null) {
+                    if (ext !== null && ext !== undefined) {
                         if (typeof ext.then === "function")
                             promises.push(ext.then(res => val[i] = res));
                         else val[i] = ext;

package/src/engine/xr/NeedleXRController.ts

@@ -23,10 +23,10 @@ const debugCustomGesture = getParam("debugcustomgesture");
 // let _didReceiveSelectStartEvent = false;
 
 // https://github.com/immersive-web/webxr-input-profiles/blob/4484a05e30bcd43fe86bb4e06b7a707861a26796/packages/registry/profiles/meta/meta-quest-touch-plus.json
-declare type ControllerAxes = "xr-standard-thumbstick";
-declare type StickName = "xr-standard-thumbstick";
+declare type ControllerAxes = "xr-standard-thumbstick" | "xr-standard-touchpad";
+declare type StickName = "xr-standard-thumbstick" | "xr-standard-touchpad";
 declare type Mapping = "xr-standard";
-declare type ComponentType = "button" | "thumbstick" | "squeeze";
+declare type ComponentType = "button" | "thumbstick" | "squeeze" | "touchpad";
 declare type GamepadKey = "button" | "xAxis" | "yAxis";
 
 declare type NeedleXRControllerButtonName = ButtonName | "primary-button" | "primary";
@@ -407,6 +407,16 @@ C:${this.connected ? "x" : "-"} T:${this.isTracking ? "x" : "-"} Hand:${this.inp
             gamepadStr += "\n[axes " + gp.axes.length + "]: " + gp.axes.map(a => a.toPrecision(1)).join(",");
             debugStr += "\n" + gamepadStr;
         }
+        if (this._layout) {
+            debugStr += "\nLayout: ";
+            for (const component of Object.keys(this._layout.components || {})) {
+                const val = this.getStick(component as StickName);
+                const indices = this._layout.components[component]?.gamepadIndices;
+                const indicesAsString = indices ? Object.entries(indices).map(e => e[0][0].toUpperCase() + e[0].slice(1) + "=" + e[1]).join(",") : "";
+                debugStr += `\n  ${component}: ${this._layout.components[component]?.type} [${indicesAsString}] (${val.x.toPrecision(2)},${val.y.toPrecision(2)})`;
+            }
+        }
+        
         Gizmos.DrawLabel(debugLabelPosition, debugStr, .006);
     }
 
@@ -730,6 +740,7 @@ C:${this.connected ? "x" : "-"} T:${this.isTracking ? "x" : "-"} Hand:${this.inp
         if (componentModel?.gamepadIndices) {
             switch (componentModel.type) {
                 case "thumbstick":
+                case "touchpad":
                     if (this.inputSource.gamepad) {
                         const xIndex = componentModel.gamepadIndices!.xAxis!;
                         const yIndex = componentModel.gamepadIndices!.yAxis!;
@@ -760,7 +771,11 @@ C:${this.connected ? "x" : "-"} T:${this.isTracking ? "x" : "-"} Hand:${this.inp
         this._isMetaQuestTouchController = this.profiles.includes("meta-quest-touch-plus") || this.profiles.includes("oculus-touch-v3");
 
         // Proper profile starting with v69 and browser 35.1
-        this._isMxInk = this.profiles.includes("logitech-mx-ink")
+        this._isMxInk = this.profiles.includes("logitech-mx-ink");
+
+        // For debugging to see ALL available profiles
+        /** @ts-ignore */
+        // fetchProfilesList(DEFAULT_PROFILES_PATH).then(list => console.log("Available controller profiles", list));
 
         if (!this._layout) {
             // Ignore transient-pointer since we likely don't want to spawn a controller visual just for a temporary pointer.
@@ -780,6 +795,8 @@ C:${this.connected ? "x" : "-"} T:${this.isTracking ? "x" : "-"} Hand:${this.inp
                     res.assetPath || ""
                 );
 
+                // const overrideProfile = await fetch(DEFAULT_PROFILES_PATH + "/htc-vive-focus-3/profile.json").then(r => r.json());
+
                 const profile = res.profile as InputDeviceProfile;
                 const layout = profile.layouts[this.inputSource.handedness];
                 this._layout = layout;
@@ -791,6 +808,21 @@ C:${this.connected ? "x" : "-"} T:${this.isTracking ? "x" : "-"} Hand:${this.inp
                             this._layout.gamepad[component.gamepadIndices!.button!] = key as XRControllerButtonName;
                         }
                     }
+
+                    // If we have 4 axes and no thumbstick defined, we define thumbstick for axis 3+4
+                    // This is a workaround for HTC Vive Focus 3 controllers, which have the profile for Vive Focus Plus...
+                    // This workaround fixes it for HTC Vive Focus 3 but does not change anything for Vive Focus Plus controllers
+                    if (this.profiles.length >= 1 && this.profiles[0] === "htc-vive-focus-plus") {
+                        if (this.inputSource.gamepad && this.inputSource.gamepad.axes.length === 4 && !this._layout.components["xr-standard-thumbstick"]) {
+                            this._layout.components["xr-standard-thumbstick"] = {
+                                type: "thumbstick",
+                                gamepadIndices: {
+                                    xAxis: 2,
+                                    yAxis: 3,
+                                }
+                            }
+                        }
+                    }
                 }
                 // if (debug) console.log(this._layout, this.inputSource);
                 // debugger;

package/src/engine-components/CameraUtils.ts

@@ -122,7 +122,7 @@ function createDefaultCameraControls(context: IContext, cam?: ICamera) {
         orbit.autoRotate = autoRotate != "0" && autoRotate?.toLowerCase() != "false";
         const autoRotateSpeed = Number.parseFloat(autoRotate || ".5");
         orbit.autoRotateSpeed = !isNaN(autoRotateSpeed) ? autoRotateSpeed : .5;
-        console.log("Auto-rotate", orbit.autoRotate, "speed:", orbit.autoRotateSpeed);
+        if(debug) console.log("Auto-rotate", orbit.autoRotate, "speed:", orbit.autoRotateSpeed);
         const autoFit = context.domElement.getAttribute("auto-fit");
         orbit.autoFit = autoFit !== "0" && autoFit?.toLowerCase() != "false";
         orbit.autoTarget = true;

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

@@ -208,7 +208,7 @@ export { ClickThrough } from "../web/Clickthrough.js";
 export { CursorFollow } from "../web/CursorFollow.js";
 export { HoverAnimation } from "../web/HoverAnimation.js";
 export { ScrollFollow } from "../web/ScrollFollow.js";
-export { ViewBox } from "../web/ViewBox.js";
+export { ResponsiveBox } from "../web/ViewBox.js";
 export { Avatar } from "../webxr/Avatar.js";
 export { XRControllerFollow } from "../webxr/controllers/XRControllerFollow.js";
 export { XRControllerModel } from "../webxr/controllers/XRControllerModel.js";

package/src/engine-components/debug/LogStats.ts

@@ -4,6 +4,7 @@ import { Behaviour } from "../../engine-components/Component.js";
 
 const debug = getParam("logstats");
 
+/** @internal */
 export class LogStats extends Behaviour {
 
     onEnable(): void {

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

@@ -115,7 +115,7 @@ export class PlayableDirector extends Behaviour {
     /** @internal */
     awake(): void {
         if (debug)
-            console.log(this, this.playableAsset?.tracks);
+            console.log(this, this.playableAsset);
 
         this.rebuildGraph();
 

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

@@ -187,21 +187,22 @@ export class AnimationTrackHandler extends TrackHandler {
             return;
         }
         // we only want to hook into the binding of the root object
-        // TODO: test with a clip with multiple roots
-        const parts = clip.tracks[0].name.split(".");
-        const rootName = parts[parts.length - 2];
-        const positionTrackName = rootName + ".position";
-        const rotationTrackName = rootName + ".quaternion";
         let foundPositionTrack: boolean = false;
         let foundRotationTrack: boolean = false;
-        for (const t of clip.tracks) {
-            if (t.name.endsWith(positionTrackName)) {
-                foundPositionTrack = true;
-                this.createPositionInterpolant(clip, clipModel, t);
-            }
-            else if (t.name.endsWith(rotationTrackName)) {
-                foundRotationTrack = true;
-                this.createRotationInterpolant(clip, clipModel, t);
+        const parts = clip.tracks.find(t => t.name.includes(".position") || t.name.includes(".quaternion"))?.name.split(".");
+        if (parts) {
+            const rootName = parts[parts.length - 2];
+            const positionTrackName = rootName + ".position";
+            const rotationTrackName = rootName + ".quaternion";
+            for (const t of clip.tracks) {
+                if (!foundPositionTrack && t.name.endsWith(positionTrackName)) {
+                    foundPositionTrack = true;
+                    this.createPositionInterpolant(clip, clipModel, t);
+                }
+                else if (!foundRotationTrack && t.name.endsWith(rotationTrackName)) {
+                    foundRotationTrack = true;
+                    this.createRotationInterpolant(clip, clipModel, t);
+                }
             }
         }
 
@@ -834,23 +835,27 @@ export class AudioTrackHandler extends TrackHandler {
 
 export class MarkerTrackHandler extends TrackHandler {
     models: Array<Models.MarkerModel & Record<string, any>> = [];
-    isDirty = true;
+    needsSorting = true;
 
     *foreachMarker<T>(type: string | null = null) {
+        if(this.needsSorting) this.sort();
         for (const model of this.models) {
             if (model && model.type === type) yield model as T;
         }
     }
 
     onEnable() {
-        this.isDirty = true;
+        this.needsSorting = true;
     }
 
     evaluate(_time: number) {
-        if (this.isDirty) {
-            this.isDirty = false;
-            this.models.sort((a, b) => a.time - b.time);
-        }
+        if (this.needsSorting) this.sort();
+    }
+
+    private sort() {
+        this.needsSorting = false;
+        this.models.sort((a, b) => a.time - b.time);
+
     }
 }