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

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/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);
+
     }
 }
 

package/src/engine-components/web/ScrollFollow.ts

@@ -1,7 +1,7 @@
 import { Box3, Object3D } from "three";
 import { element } from "three/src/nodes/TSL.js";
 
-import { Context } from "../../engine/engine_context.js";
+import { isDevEnvironment } from "../../engine/debug/debug.js";
 import { Mathf } from "../../engine/engine_math.js";
 import { serializable } from "../../engine/engine_serialization.js";
 import { getBoundingBox, setVisibleInCustomShadowRendering } from "../../engine/engine_three_utils.js";
@@ -174,8 +174,8 @@ export class ScrollFollow extends Behaviour {
 
                 const value = this.invert ? 1 - this._current_value : this._current_value;
 
-                const height = this._rangeEndValue - this._rangeStartValue;
-                const pixelValue = this._rangeStartValue + value * height;
+                // const height = this._rangeEndValue - this._rangeStartValue;
+                // const pixelValue = this._rangeStartValue + value * height;
 
                 // apply scroll to target(s)
                 if (Array.isArray(this.target)) {
@@ -186,7 +186,7 @@ export class ScrollFollow extends Behaviour {
                 }
 
                 if (debug && this.context.time.frame % 30 === 0) {
-                    console.debug(`[ScrollFollow] ${this._current_value.toFixed(5)} — ${(this._target_value * 100).toFixed(0)}%`);
+                    console.debug(`[ScrollFollow] ${this._current_value.toFixed(5)} — ${(this._target_value * 100).toFixed(0)}%, targets [${Array.isArray(this.target) ? this.target.length : 1}]`);
                 }
             }
         }
@@ -304,13 +304,15 @@ export class ScrollFollow extends Behaviour {
             const index = markerIndex++;
 
             // Get marker elements from DOM
-            if ((marker.element === undefined || marker.needsUpdate === true || /** element is not in DOM anymore? */ (!marker.element?.parentNode))) {
+            if ((marker.element === undefined || marker.needsUpdate === true || /** element is not in DOM anymore? */ (marker.element && !marker.element?.parentNode))) {
                 marker.needsUpdate = false;
                 try {
+                    // TODO: with this it's currently not possible to remap markers from HTML. For example if I have two sections and I want to now use the marker["center"] multiple times to stay at that marker for a longer time
                     marker.element = tryGetElementsForSelector(index, marker.name) as HTMLElement | null;
-                    if (debug) console.debug("ScrollMarker found on page", marker.element, marker.name);
+                    if (debug) console.debug(`ScrollMarker #${index} "${marker.name}" (${marker.time.toFixed(2)}) found`, marker.element);
                     if (!marker.element) {
                         marker.timeline = undefined;
+                        if (debug || isDevEnvironment()) console.warn(`No HTML element found for ScrollMarker: ${marker.name} (index ${index})`);
                         continue;
                     }
                     else {
@@ -370,19 +372,20 @@ export class ScrollFollow extends Behaviour {
                 const time01 = calculateTimelinePositionNormalized(timeline);
                 // remap 0-1 to 0 - 1 - 0 (full weight at center)
                 const weight = 1 - Math.abs(time01 - 0.5) * 2;
+                const name = marker.name || `marker${i}`;
                 if (time01 > 0 && time01 <= 1) {
                     const lerpTime = marker.time + (nextTime - marker.time) * time01;
-                    weightsArray.push({ time: lerpTime, weight: weight });
+                    weightsArray.push({ name, time: lerpTime, weight: weight });
                     sum += weight;
                 }
                 // Before the first marker is reached
                 else if (i === 0 && time01 <= 0) {
-                    weightsArray.push({ time: 0, weight: 1 });
+                    weightsArray.push({ name, time: 0, weight: 1 });
                     sum += 1;
                 }
                 // After the last marker is reached
                 else if (i === markersArray.length - 1 && time01 >= 1) {
-                    weightsArray.push({ time: duration, weight: 1 });
+                    weightsArray.push({ name, time: duration, weight: 1 });
                     sum += 1;
                 }
             }
@@ -435,13 +438,16 @@ export class ScrollFollow extends Behaviour {
                     time += diff * weight;
                 }
             }
-            if (debug && this.context.time.frame % 20 === 0) console.log(time.toFixed(3), [...weightsArray])
             if (this.damping <= 0) {
                 director.time = time;
             }
             else {
                 director.time = Mathf.lerp(director.time, time, this.context.time.deltaTime / this.damping);
             }
+
+            if (debug && this.context.time.frame % 30 === 0) {
+                console.log(`[ScrollFollow ] Timeline ${director.name}: ${time.toFixed(3)}`, weightsArray.map(w => `[${w.name} ${(w.weight * 100).toFixed(0)}%]`).join(", "));
+            }
         }
     }
 
@@ -450,9 +456,13 @@ export class ScrollFollow extends Behaviour {
 
 
 const weightsArray: OverlapInfo[] = [];
-const markersArray: (ScrollMarkerModel & { element?: HTMLElement | null, timeline?: ViewTimeline })[] = [];
+const markersArray: Array<ScrollMarkerModel & {
+    element?: HTMLElement | null,
+    timeline?: ViewTimeline,
+}> = [];
 
 type OverlapInfo = {
+    name: string,
     /** Marker time */
     time: number,
     /** Overlap in pixels */
@@ -468,17 +478,29 @@ type OverlapInfo = {
 // }
 // const querySelectorResults: Array<SelectorCache> = [];
 
-const needleScrollMarkerCacheKey = "data-timeline-marker";
 const needleScrollMarkerIndexCache = new Map<number, Element | null>();
 const needleScrollMarkerNameCache = new Map<string, Element | null>();
 let needsScrollMarkerRefresh = true;
 
-function tryGetElementsForSelector(index: number, name: string): Element | null {
+function tryGetElementsForSelector(index: number, name: string, _cycle: number = 0): Element | null {
 
     if (!needsScrollMarkerRefresh) {
-        let element = name?.length ? needleScrollMarkerNameCache.get(name) : null;
-        if (element) return element;
-        element = needleScrollMarkerIndexCache.get(index) || null;
+        if (name?.length) {
+            const element = needleScrollMarkerNameCache.get(name) || null;
+            if (element) return element;
+            // const isNumber = !isNaN(Number(name));
+            // if (!isNumber) {
+            // }
+        }
+        const element = needleScrollMarkerIndexCache.get(index) || null;
+        const value = element?.getAttribute("data-timeline-marker");
+        // if (value?.length) {
+        //     if (cycle === 0) {
+        //         // if the HTML marker we found by index does define a different marker name we try to find the correct HTML element by name
+        //         return tryGetElementsForSelector(index, value, 1);
+        //     }
+        //     if (isDevEnvironment()) console.warn(`ScrollMarker name mismatch: expected "${name}", got "${value}"`);
+        // }
         return element;
     }
     needsScrollMarkerRefresh = false;
@@ -489,26 +511,8 @@ function tryGetElementsForSelector(index: number, name: string): Element | null
         const name = m.getAttribute("data-timeline-marker");
         if (name?.length) needleScrollMarkerNameCache.set(name, m);
     });
-    const element = needleScrollMarkerIndexCache.get(index) || null;
-    return element;
-
-
-    /* e.g. 
-    <div class="section behind start" data-needle-scroll-marker>
-    */
-    // console.log(index, element)
-    if (element) return element;
-
-    // for (const entry of querySelectorResults) {
-    //     if (entry.selector === selector) {
-    //         const index = entry.usedElementCount++;
-    //         return entry.elements && index < entry.elements.length ? entry.elements[index] : null;
-    //     }
-    // }
-    // const elements = document.querySelectorAll(selector);
-    // querySelectorResults.push({ selector, elements: Array.from(elements), usedElementCount: 1 });
-    // if (elements.length > 0) return elements[0];
-    return null;
+    needsScrollMarkerRefresh = false;
+    return tryGetElementsForSelector(index, name);
 }