@needle-tools/engine 4.9.3-next.0facab6 → 4.10.0-beta

package/lib/engine-components/web/ScrollFollow.js

@@ -8,6 +8,7 @@ import { Object3D } from "three";
 import { Mathf } from "../../engine/engine_math.js";
 import { serializable } from "../../engine/engine_serialization.js";
 import { getBoundingBox } from "../../engine/engine_three_utils.js";
+import { getParam } from "../../engine/engine_utils.js";
 import { Animation } from "../Animation.js";
 import { Animator } from "../Animator.js";
 import { AudioSource } from "../AudioSource.js";
@@ -16,6 +17,7 @@ import { EventList } from "../EventList.js";
 import { Light } from "../Light.js";
 import { SplineWalker } from "../splines/SplineWalker.js";
 import { PlayableDirector } from "../timeline/PlayableDirector.js";
+const debug = getParam("debugscroll");
 /**
  * The ScrollFollow component allows you to link the scroll position of the page (or a specific element) to one or more target objects.
  * This can be used to create scroll-based animations, audio playback, or other effects. For example you can link the scroll position to a timeline (PlayableDirector) to create scroll-based storytelling effects or to an Animator component to change the animation state based on scroll.
@@ -67,6 +69,7 @@ export class ScrollFollow extends Behaviour {
      */
     invert = false;
     /**
+     * **Experimental - might change in future updates**
      * If set, the scroll position will be read from the specified element instead of the window.
      * Use a CSS selector to specify the element, e.g. `#my-scrollable-div` or `.scroll-container`.
      * @default null
@@ -81,15 +84,19 @@ export class ScrollFollow extends Behaviour {
      * Current scroll value in "pages" (0 = top of page, 1 = bottom of page)
      */
     get currentValue() {
-        return this.current_value;
+        return this._current_value;
     }
-    current_value = 0;
-    target_value = 0;
-    applied_value = -1;
+    _current_value = 0;
+    _target_value = 0;
+    _appliedValue = -1;
+    _scrollStart = 0;
+    _scrollEnd = 0;
+    _scrollValue = 0;
+    _scrollContainerHeight = 0;
     /** @internal */
     onEnable() {
         window.addEventListener("wheel", this.updateCurrentScrollValue, { passive: true });
-        this.applied_value = -1;
+        this._appliedValue = -1;
     }
     /** @internal */
     onDisable() {
@@ -98,21 +105,25 @@ export class ScrollFollow extends Behaviour {
     /** @internal */
     lateUpdate() {
         this.updateCurrentScrollValue();
-        // apply damping if any
-        if (this.damping > 0) {
-            this.current_value = Mathf.lerp(this.current_value, this.target_value, this.context.time.deltaTime / this.damping);
-        }
-        else {
-            this.current_value = this.target_value;
+        if (this._target_value >= 0) {
+            if (this.damping > 0) { // apply damping
+                this._current_value = Mathf.lerp(this._current_value, this._target_value, this.context.time.deltaTime / this.damping);
+                if (Math.abs(this._current_value - this._target_value) < 0.001) {
+                    this._current_value = this._target_value;
+                }
+            }
+            else {
+                this._current_value = this._target_value;
+            }
         }
-        if (this.current_value !== this.applied_value) {
-            this.applied_value = this.current_value;
+        if (this._current_value !== this._appliedValue) {
+            this._appliedValue = this._current_value;
             let defaultPrevented = false;
             if (this.changed.listenerCount > 0) {
                 // fire change event
                 const event = {
                     type: "change",
-                    value: this.current_value,
+                    value: this._current_value,
                     component: this,
                     preventDefault: () => { event.defaultPrevented = true; },
                     defaultPrevented: false,
@@ -122,19 +133,28 @@ export class ScrollFollow extends Behaviour {
             }
             // if not prevented apply scroll
             if (!defaultPrevented) {
-                const value = this.invert ? 1 - this.current_value : this.current_value;
+                const value = this.invert ? 1 - this._current_value : this._current_value;
+                const height = this._rangeEndValue - this._rangeStartValue;
+                const pixelValue = this._rangeStartValue + value * height;
                 // apply scroll to target(s)
                 if (Array.isArray(this.target)) {
-                    this.target.forEach(t => t && ScrollFollow.applyScroll(t, value));
+                    this.target.forEach(t => t && this.applyScroll(t, value));
                 }
                 else if (this.target) {
-                    ScrollFollow.applyScroll(this.target, value);
+                    this.applyScroll(this.target, value);
+                }
+                if (debug && this.context.time.frame % 30 === 0) {
+                    console.debug(`[ScrollFollow] ${this._current_value.toFixed(5)} — ${(this._target_value * 100).toFixed(0)}%`);
                 }
             }
         }
     }
     _lastSelectorValue = null;
     _lastSelectorElement = null;
+    /** Top y */
+    _rangeStartValue = 0;
+    /** Bottom y */
+    _rangeEndValue = 0;
     updateCurrentScrollValue = () => {
         switch (this.mode) {
             case "window":
@@ -145,25 +165,35 @@ export class ScrollFollow extends Behaviour {
                     }
                     if (this._lastSelectorElement) {
                         const rect = this._lastSelectorElement.getBoundingClientRect();
-                        this.target_value = -rect.top / (rect.height - window.innerHeight);
-                        if (isNaN(this.target_value) || !isFinite(this.target_value))
-                            this.target_value = 0;
+                        this._scrollStart = rect.top + window.scrollY;
+                        this._scrollEnd = rect.height - window.innerHeight;
+                        this._scrollValue = -rect.top;
+                        this._target_value = -rect.top / (rect.height - window.innerHeight);
+                        this._rangeStartValue = rect.top + window.scrollY;
+                        this._rangeEndValue = this._rangeStartValue + rect.height - window.innerHeight;
+                        this._scrollContainerHeight = rect.height;
                         break;
                     }
                 }
                 else {
-                    this.target_value = window.scrollY / (document.body.scrollHeight - window.innerHeight);
+                    this._scrollStart = 0;
+                    this._scrollEnd = window.document.body.scrollHeight - window.innerHeight;
+                    this._scrollValue = window.scrollY;
+                    this._target_value = this._scrollValue / (this._scrollEnd || 1);
+                    this._rangeStartValue = 0;
+                    this._rangeEndValue = document.body.scrollHeight;
+                    this._scrollContainerHeight = window.innerHeight;
                 }
-                if (isNaN(this.target_value) || !isFinite(this.target_value))
-                    this.target_value = 0;
                 break;
         }
+        if (isNaN(this._target_value) || !isFinite(this._target_value))
+            this._target_value = -1;
     };
-    static applyScroll(target, value) {
+    applyScroll(target, value) {
         if (!target)
             return;
         if (target instanceof PlayableDirector) {
-            target.time = value * target.duration;
+            this.handleTimelineTarget(target, value);
             if (!target.isPlaying)
                 target.evaluate();
         }
@@ -204,6 +234,88 @@ export class ScrollFollow extends Behaviour {
             }
         }
     }
+    handleTimelineTarget(director, value) {
+        const duration = director.duration;
+        let scrollRegionStart = Infinity;
+        let scrollRegionEnd = 0;
+        markersArray.length = 0;
+        for (const marker of director.foreachMarker("ScrollMarker")) {
+            // Get marker elements from DOM
+            if (marker.selector?.length && (marker.element === undefined || marker.needsUpdate === true || /** element is not in DOM anymore? */ (!marker.element?.parentNode))) {
+                marker.needsUpdate = false;
+                try {
+                    marker.element = document.querySelector(marker.selector) || null;
+                    if (debug)
+                        console.debug("ScrollMarker found on page", marker.element, marker.selector);
+                }
+                catch (error) {
+                    marker.element = null;
+                    console.error("ScrollMarker selector is not valid: " + marker.selector + "\n", error);
+                }
+            }
+            // skip markers without element (e.g. if the selector didn't return any element)
+            if (!marker.element)
+                continue;
+            markersArray.push(marker);
+            const top = marker.element.offsetTop;
+            const height = marker.element.offsetHeight;
+            const bottom = top + height;
+            if (top < scrollRegionStart) {
+                scrollRegionStart = top;
+            }
+            if (bottom > scrollRegionEnd) {
+                scrollRegionEnd = bottom;
+            }
+        }
+        const currentTop = this._scrollValue;
+        const currentBottom = currentTop + this._scrollContainerHeight;
+        weightsArray.length = 0;
+        let sum = 0;
+        let markerCount = 0;
+        for (const marker of markersArray) {
+            if (!marker.element)
+                continue;
+            const top = marker.element.offsetTop;
+            const height = marker.element.offsetHeight;
+            const bottom = top + height;
+            let overlap = 0;
+            // TODO: if we have two marker sections where no HTML overlaps (vor example because some large section is between them) we probably want to still virtually interpolate between them slowly in that region
+            if (bottom < currentTop) {
+                // marker is above scroll region
+                overlap = 0;
+            }
+            else if (top > currentBottom) {
+                // marker is below scroll region
+                overlap = 0;
+            }
+            else {
+                // calculate overlap in pixels
+                const overlapTop = Math.max(top, currentTop);
+                const overlapBottom = Math.min(bottom, currentBottom);
+                overlap = Math.max(0, overlapBottom - overlapTop);
+                // console.log(marker.element.className, overlap)
+            }
+            markerCount += 1;
+            if (overlap > 0) {
+                weightsArray.push({ time: marker.time, weight: overlap });
+                sum += overlap;
+            }
+        }
+        if (weightsArray.length <= 0 && markerCount <= 0) {
+            director.time = value * duration;
+        }
+        else if (weightsArray.length > 0) {
+            // normalize and calculate weighted time
+            let time = weightsArray[0].time;
+            for (const o of weightsArray) {
+                const weight = o.weight / Math.max(0.00001, sum);
+                // lerp time based on weight
+                const diff = Math.abs(o.time - time);
+                time += diff * weight;
+            }
+            director.time = time;
+        }
+    }
 }
 __decorate([
     serializable([Behaviour, Object3D])
@@ -223,4 +335,6 @@ __decorate([
 __decorate([
     serializable(EventList)
 ], ScrollFollow.prototype, "changed", void 0);
+const weightsArray = [];
+const markersArray = [];
 //# sourceMappingURL=ScrollFollow.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollFollow.js","sourceRoot":"","sources":["../../../src/engine-components/web/ScrollFollow.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAcnE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,OAAO,YAAa,SAAQ,SAAS;IAEvC;;;;;;;;;;;;OAYG;IAEH,MAAM,GAA6B,IAAI,CAAC;IAExC;;;OAGG;IAEH,OAAO,GAAW,CAAC,CAAC;IAEpB;;;OAGG;IAEH,MAAM,GAAY,KAAK,CAAC;IAExB;;;;OAIG;IAEH,YAAY,GAAkB,IAAI,CAAC;IAG3B,IAAI,GAAa,QAAQ,CAAC;IAElC;;OAEG;IAEH,OAAO,GAAiC,IAAI,SAAS,EAAqB,CAAC;IAE3E;;OAEG;IACH,IAAI,YAAY;QACZ,OAAO,IAAI,CAAC,aAAa,CAAC;IAC9B,CAAC;IAEO,aAAa,GAAW,CAAC,CAAC;IAC1B,YAAY,GAAW,CAAC,CAAC;IACzB,aAAa,GAAW,CAAC,CAAC,CAAC;IAEnC,gBAAgB;IAChB,QAAQ;QACJ,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,wBAAwB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACnF,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;IAC5B,CAAC;IAED,gBAAgB;IAChB,SAAS;QACL,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;IACvE,CAAC;IAED,gBAAgB;IAChB,UAAU;QAEN,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAEhC,uBAAuB;QACvB,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;YAClB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;SACtH;aACI;YACD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC;SAC1C;QAED,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,aAAa,EAAE;YAC3C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;YAExC,IAAI,gBAAgB,GAAG,KAAK,CAAC;YAC7B,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,GAAG,CAAC,EAAE;gBAChC,oBAAoB;gBACpB,MAAM,KAAK,GAAsB;oBAC7B,IAAI,EAAE,QAAQ;oBACd,KAAK,EAAE,IAAI,CAAC,aAAa;oBACzB,SAAS,EAAE,IAAI;oBACf,cAAc,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC,CAAC;oBACxD,gBAAgB,EAAE,KAAK;iBAC1B,CAAC;gBACF,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAC3B,gBAAgB,GAAG,KAAK,CAAC,gBAAgB,CAAC;aAC7C;YAED,gCAAgC;YAChC,IAAI,CAAC,gBAAgB,EAAE;gBAEnB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;gBAExE,4BAA4B;gBAC5B,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;oBAC5B,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,YAAY,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;iBACrE;qBACI,IAAI,IAAI,CAAC,MAAM,EAAE;oBAClB,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;iBAChD;aACJ;SACJ;IACL,CAAC;IAEO,kBAAkB,GAAkB,IAAI,CAAC;IACzC,oBAAoB,GAAmB,IAAI,CAAC;IAE5C,wBAAwB,GAAG,GAAG,EAAE;QAEpC,QAAQ,IAAI,CAAC,IAAI,EAAE;YACf,KAAK,QAAQ;gBACT,IAAI,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE;oBAC3B,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,kBAAkB,EAAE;wBAC/C,IAAI,CAAC,oBAAoB,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;wBACtE,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,YAAY,CAAC;qBAC/C;oBACD,IAAI,IAAI,CAAC,oBAAoB,EAAE;wBAC3B,MAAM,IAAI,GAAG,IAAI,CAAC,oBAAoB,CAAC,qBAAqB,EAAE,CAAC;wBAC/D,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;wBACnE,IAAI,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC;4BAAE,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;wBACpF,MAAM;qBACT;iBACJ;qBACI;oBACD,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,OAAO,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;iBAC1F;gBACD,IAAI,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC;oBAAE,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;gBACpF,MAAM;SACb;IAEL,CAAC,CAAA;IAGO,MAAM,CAAC,WAAW,CAAC,MAAc,EAAE,KAAa;QAEpD,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,IAAI,MAAM,YAAY,gBAAgB,EAAE;YACpC,MAAM,CAAC,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC;YACtC,IAAI,CAAC,MAAM,CAAC,SAAS;gBAAE,MAAM,CAAC,QAAQ,EAAE,CAAC;SAC5C;aACI,IAAI,MAAM,YAAY,QAAQ,EAAE;YACjC,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;SACpC;aACI,IAAI,MAAM,YAAY,SAAS,EAAE;YAClC,MAAM,CAAC,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC;SACzC;aACI,IAAI,MAAM,YAAY,WAAW,EAAE;YACpC,IAAI,CAAC,MAAM,CAAC,QAAQ;gBAAE,OAAO;YAC7B,MAAM,CAAC,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC;SACzC;aACI,IAAI,MAAM,YAAY,YAAY,EAAE;YACrC,MAAM,CAAC,UAAU,GAAG,KAAK,CAAC;SAC7B;aACI,IAAI,MAAM,YAAY,KAAK,EAAE;YAC9B,MAAM,CAAC,SAAS,GAAG,KAAK,CAAC;SAC5B;aACI,IAAI,MAAM,YAAY,QAAQ,EAAE;YACjC,gFAAgF;YAChF,IAAI,MAAM,CAAC,qBAAqB,CAAC,KAAK,SAAS,EAAE;gBAC7C,MAAM,CAAC,qBAAqB,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC;aAClE;YACD,MAAM,MAAM,GAAG,MAAM,CAAC,qBAAqB,CAAS,CAAC;YACrD,IAAI,MAAM,EAAE;gBACR,iFAAiF;gBACjF,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;aAC7E;SACJ;aACI,IAAI,QAAQ,IAAI,MAAM,EAAE;YACzB,IAAI,OAAO,MAAM,CAAC,MAAM,KAAK,QAAQ,EAAE;gBACnC,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC;aACzB;iBACI,IAAI,OAAO,MAAM,CAAC,MAAM,KAAK,UAAU,EAAE;gBAC1C,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;aACxB;SACJ;IACL,CAAC;CAEJ;AA/KG;IADC,YAAY,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;4CACI;AAOxC;IADC,YAAY,EAAE;6CACK;AAOpB;IADC,YAAY,EAAE;4CACS;AAQxB;IADC,YAAY,EAAE;kDACoB;AAGnC;IADC,YAAY,EAAE;0CACmB;AAMlC;IADC,YAAY,CAAC,SAAS,CAAC;6CACmD"}
+{"version":3,"file":"ScrollFollow.js","sourceRoot":"","sources":["../../../src/engine-components/web/ScrollFollow.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAGnE,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AActC;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,OAAO,YAAa,SAAQ,SAAS;IAEvC;;;;;;;;;;;;OAYG;IAEH,MAAM,GAA6B,IAAI,CAAC;IAExC;;;OAGG;IAEH,OAAO,GAAW,CAAC,CAAC;IAEpB;;;OAGG;IAEH,MAAM,GAAY,KAAK,CAAC;IAExB;;;;;OAKG;IAEH,YAAY,GAAkB,IAAI,CAAC;IAG3B,IAAI,GAAa,QAAQ,CAAC;IAElC;;OAEG;IAEH,OAAO,GAAiC,IAAI,SAAS,EAAqB,CAAC;IAE3E;;OAEG;IACH,IAAI,YAAY;QACZ,OAAO,IAAI,CAAC,cAAc,CAAC;IAC/B,CAAC;IAEO,cAAc,GAAW,CAAC,CAAC;IAC3B,aAAa,GAAW,CAAC,CAAC;IAC1B,aAAa,GAAW,CAAC,CAAC,CAAC;IAG3B,YAAY,GAAW,CAAC,CAAC;IACzB,UAAU,GAAW,CAAC,CAAC;IACvB,YAAY,GAAW,CAAC,CAAC;IACzB,sBAAsB,GAAW,CAAC,CAAC;IAE3C,gBAAgB;IAChB,QAAQ;QACJ,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,wBAAwB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACnF,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;IAC5B,CAAC;IAED,gBAAgB;IAChB,SAAS;QACL,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;IACvE,CAAC;IAED,gBAAgB;IAChB,UAAU;QAEN,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAEhC,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC,EAAE;YACzB,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE,EAAE,gBAAgB;gBACpC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;gBACtH,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,KAAK,EAAE;oBAC5D,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC;iBAC5C;aACJ;iBACI;gBACD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC;aAC5C;SACJ;QAED,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,CAAC,aAAa,EAAE;YAC5C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC;YAEzC,IAAI,gBAAgB,GAAG,KAAK,CAAC;YAC7B,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,GAAG,CAAC,EAAE;gBAChC,oBAAoB;gBACpB,MAAM,KAAK,GAAsB;oBAC7B,IAAI,EAAE,QAAQ;oBACd,KAAK,EAAE,IAAI,CAAC,cAAc;oBAC1B,SAAS,EAAE,IAAI;oBACf,cAAc,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC,CAAC;oBACxD,gBAAgB,EAAE,KAAK;iBAC1B,CAAC;gBACF,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAC3B,gBAAgB,GAAG,KAAK,CAAC,gBAAgB,CAAC;aAC7C;YAED,gCAAgC;YAChC,IAAI,CAAC,gBAAgB,EAAE;gBAEnB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC;gBAE1E,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,gBAAgB,CAAC;gBAC3D,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,GAAG,KAAK,GAAG,MAAM,CAAC;gBAE1D,4BAA4B;gBAC5B,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;oBAC5B,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;iBAC7D;qBACI,IAAI,IAAI,CAAC,MAAM,EAAE;oBAClB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;iBACxC;gBAED,IAAI,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,CAAC,EAAE;oBAC7C,OAAO,CAAC,KAAK,CAAC,kBAAkB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;iBACjH;aACJ;SACJ;IACL,CAAC;IAEO,kBAAkB,GAAkB,IAAI,CAAC;IACzC,oBAAoB,GAAmB,IAAI,CAAC;IACpD,YAAY;IACJ,gBAAgB,GAAW,CAAC,CAAC;IACrC,eAAe;IACP,cAAc,GAAW,CAAC,CAAC;IAE3B,wBAAwB,GAAG,GAAG,EAAE;QAEpC,QAAQ,IAAI,CAAC,IAAI,EAAE;YACf,KAAK,QAAQ;gBAET,IAAI,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE;oBAC3B,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,kBAAkB,EAAE;wBAC/C,IAAI,CAAC,oBAAoB,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;wBACtE,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,YAAY,CAAC;qBAC/C;oBACD,IAAI,IAAI,CAAC,oBAAoB,EAAE;wBAC3B,MAAM,IAAI,GAAG,IAAI,CAAC,oBAAoB,CAAC,qBAAqB,EAAE,CAAC;wBAE/D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC;wBAC9C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,CAAC;wBACnD,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC;wBAC9B,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;wBACpE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC;wBAClD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,CAAC;wBAC/E,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,MAAM,CAAC;wBAC1C,MAAM;qBACT;iBACJ;qBACI;oBACD,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;oBACtB,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,WAAW,CAAC;oBACzE,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC;oBACnC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC;oBAChE,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;oBAC1B,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC;oBACjD,IAAI,CAAC,sBAAsB,GAAG,MAAM,CAAC,WAAW,CAAC;iBACpD;gBACD,MAAM;SACb;QAED,IAAI,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC;YAAE,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;IAC5F,CAAC,CAAA;IAGO,WAAW,CAAC,MAAc,EAAE,KAAa;QAE7C,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,IAAI,MAAM,YAAY,gBAAgB,EAAE;YACpC,IAAI,CAAC,oBAAoB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;YACzC,IAAI,CAAC,MAAM,CAAC,SAAS;gBAAE,MAAM,CAAC,QAAQ,EAAE,CAAC;SAC5C;aACI,IAAI,MAAM,YAAY,QAAQ,EAAE;YACjC,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;SACpC;aACI,IAAI,MAAM,YAAY,SAAS,EAAE;YAClC,MAAM,CAAC,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC;SACzC;aACI,IAAI,MAAM,YAAY,WAAW,EAAE;YACpC,IAAI,CAAC,MAAM,CAAC,QAAQ;gBAAE,OAAO;YAC7B,MAAM,CAAC,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC;SACzC;aACI,IAAI,MAAM,YAAY,YAAY,EAAE;YACrC,MAAM,CAAC,UAAU,GAAG,KAAK,CAAC;SAC7B;aACI,IAAI,MAAM,YAAY,KAAK,EAAE;YAC9B,MAAM,CAAC,SAAS,GAAG,KAAK,CAAC;SAC5B;aACI,IAAI,MAAM,YAAY,QAAQ,EAAE;YACjC,gFAAgF;YAChF,IAAI,MAAM,CAAC,qBAAqB,CAAC,KAAK,SAAS,EAAE;gBAC7C,MAAM,CAAC,qBAAqB,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC;aAClE;YACD,MAAM,MAAM,GAAG,MAAM,CAAC,qBAAqB,CAAS,CAAC;YACrD,IAAI,MAAM,EAAE;gBACR,iFAAiF;gBACjF,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;aAC7E;SACJ;aACI,IAAI,QAAQ,IAAI,MAAM,EAAE;YACzB,IAAI,OAAO,MAAM,CAAC,MAAM,KAAK,QAAQ,EAAE;gBACnC,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC;aACzB;iBACI,IAAI,OAAO,MAAM,CAAC,MAAM,KAAK,UAAU,EAAE;gBAC1C,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;aACxB;SACJ;IACL,CAAC;IAIO,oBAAoB,CAAC,QAA0B,EAAE,KAAa;QAElE,MAAM,QAAQ,GAAG,QAAQ,CAAC,QAAQ,CAAC;QAGnC,IAAI,iBAAiB,GAAG,QAAQ,CAAC;QACjC,IAAI,eAAe,GAAG,CAAC,CAAC;QACxB,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;QAExB,KAAK,MAAM,MAAM,IAAI,QAAQ,CAAC,aAAa,CAA8E,cAAc,CAAC,EAAE;YAEtI,+BAA+B;YAC/B,IAAI,MAAM,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,OAAO,KAAK,SAAS,IAAI,MAAM,CAAC,WAAW,KAAK,IAAI,IAAI,qCAAqC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,EAAE;gBACjK,MAAM,CAAC,WAAW,GAAG,KAAK,CAAC;gBAC3B,IAAI;oBACA,MAAM,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAc,MAAM,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC;oBAC9E,IAAI,KAAK;wBAAE,OAAO,CAAC,KAAK,CAAC,4BAA4B,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;iBAC3F;gBACD,OAAO,KAAK,EAAE;oBACV,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;oBACtB,OAAO,CAAC,KAAK,CAAC,sCAAsC,GAAG,MAAM,CAAC,QAAQ,GAAG,IAAI,EAAE,KAAK,CAAC,CAAC;iBACzF;aACJ;YAED,gFAAgF;YAChF,IAAI,CAAC,MAAM,CAAC,OAAO;gBAAE,SAAS;YAE9B,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAE1B,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC;YACrC,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC;YAC3C,MAAM,MAAM,GAAG,GAAG,GAAG,MAAM,CAAC;YAC5B,IAAI,GAAG,GAAG,iBAAiB,EAAE;gBACzB,iBAAiB,GAAG,GAAG,CAAC;aAC3B;YACD,IAAI,MAAM,GAAG,eAAe,EAAE;gBAC1B,eAAe,GAAG,MAAM,CAAC;aAC5B;SACJ;QAID,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC;QACrC,MAAM,aAAa,GAAG,UAAU,GAAG,IAAI,CAAC,sBAAsB,CAAC;QAE/D,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;QACxB,IAAI,GAAG,GAAG,CAAC,CAAC;QAEZ,IAAI,WAAW,GAAG,CAAC,CAAC;QACpB,KAAK,MAAM,MAAM,IAAI,YAAY,EAAE;YAE/B,IAAI,CAAC,MAAM,CAAC,OAAO;gBAAE,SAAS;YAE9B,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC;YACrC,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC;YAC3C,MAAM,MAAM,GAAG,GAAG,GAAG,MAAM,CAAC;YAC5B,IAAI,OAAO,GAAG,CAAC,CAAC;YAEhB,0MAA0M;YAE1M,IAAI,MAAM,GAAG,UAAU,EAAE;gBACrB,gCAAgC;gBAChC,OAAO,GAAG,CAAC,CAAC;aACf;iBACI,IAAI,GAAG,GAAG,aAAa,EAAE;gBAC1B,gCAAgC;gBAChC,OAAO,GAAG,CAAC,CAAC;aACf;iBACI;gBACD,8BAA8B;gBAC9B,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;gBAC7C,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;gBACtD,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,aAAa,GAAG,UAAU,CAAC,CAAC;gBAClD,iDAAiD;aACpD;YAED,WAAW,IAAI,CAAC,CAAC;YAEjB,IAAI,OAAO,GAAG,CAAC,EAAE;gBACb,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;gBAC1D,GAAG,IAAI,OAAO,CAAC;aAClB;SACJ;QAED,IAAI,YAAY,CAAC,MAAM,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,EAAE;YAC9C,QAAQ,CAAC,IAAI,GAAG,KAAK,GAAG,QAAQ,CAAC;SACpC;aACI,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;YAC9B,wCAAwC;YACxC,IAAI,IAAI,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAChC,KAAK,MAAM,CAAC,IAAI,YAAY,EAAE;gBAC1B,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;gBACjD,4BAA4B;gBAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;gBACrC,IAAI,IAAI,IAAI,GAAG,MAAM,CAAC;aACzB;YACD,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC;SACxB;IACL,CAAC;CAEJ;AAxTG;IADC,YAAY,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;4CACI;AAOxC;IADC,YAAY,EAAE;6CACK;AAOpB;IADC,YAAY,EAAE;4CACS;AASxB;IADC,YAAY,EAAE;kDACoB;AAGnC;IADC,YAAY,EAAE;0CACmB;AAMlC;IADC,YAAY,CAAC,SAAS,CAAC;6CACmD;AA0R/E,MAAM,YAAY,GAAkB,EAAE,CAAC;AACvC,MAAM,YAAY,GAA6D,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/engine",
-  "version": "4.9.3-next.0facab6",
+  "version": "4.10.0-beta",
   "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": {
@@ -168,4 +168,4 @@
   "module": "lib/needle-engine.js",
   "typings": "lib/needle-engine.d.ts",
   "types": "lib/needle-engine.d.ts"
-}
+}

package/src/engine/codegen/register_types.ts

@@ -108,6 +108,7 @@ import { PlayableDirector } from "../../engine-components/timeline/PlayableDirec
 import { SignalReceiver } from "../../engine-components/timeline/SignalAsset.js";
 import { AnimationTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
 import { AudioTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
+import { MarkerTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
 import { SignalTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
 import { ControlTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
 import { TransformGizmo } from "../../engine-components/TransformGizmo.js";
@@ -265,6 +266,7 @@ TypeStore.add("PlayableDirector", PlayableDirector);
 TypeStore.add("SignalReceiver", SignalReceiver);
 TypeStore.add("AnimationTrackHandler", AnimationTrackHandler);
 TypeStore.add("AudioTrackHandler", AudioTrackHandler);
+TypeStore.add("MarkerTrackHandler", MarkerTrackHandler);
 TypeStore.add("SignalTrackHandler", SignalTrackHandler);
 TypeStore.add("ControlTrackHandler", ControlTrackHandler);
 TypeStore.add("TransformGizmo", TransformGizmo);

package/src/engine-components/Renderer.ts

@@ -304,10 +304,12 @@ export class Renderer extends Behaviour implements IRenderer {
         return this._sharedMeshes;
     }
 
+    // @ts-ignore
     get sharedMaterial(): SharedMaterial {
-        return this.sharedMaterials[0] as SharedMaterial;
+        return (this.sharedMaterials?.[0]) as SharedMaterial;
     }
 
+    // @ts-ignore
     set sharedMaterial(mat: SharedMaterial) {
         const cur = this.sharedMaterials[0];
         if (cur === mat) return;
@@ -315,12 +317,12 @@ export class Renderer extends Behaviour implements IRenderer {
         this.applyLightmapping();
     }
 
-    /**@deprecated please use sharedMaterial */
+    /**@deprecated Use sharedMaterial */
     get material(): SharedMaterial {
-        return this.sharedMaterials[0] as SharedMaterial;
+        return this.sharedMaterials?.[0] as SharedMaterial;
     }
 
-    /**@deprecated please use sharedMaterial */
+    /**@deprecated Use sharedMaterial */
     set material(mat: SharedMaterial) {
         this.sharedMaterial = mat;
     }

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

@@ -169,6 +169,7 @@ export { SignalReceiverEvent } from "../timeline/SignalAsset.js";
 export { SignalReceiver } from "../timeline/SignalAsset.js";
 export { AnimationTrackHandler } from "../timeline/TimelineTracks.js";
 export { AudioTrackHandler } from "../timeline/TimelineTracks.js";
+export { MarkerTrackHandler } from "../timeline/TimelineTracks.js";
 export { SignalTrackHandler } from "../timeline/TimelineTracks.js";
 export { ControlTrackHandler } from "../timeline/TimelineTracks.js";
 export { TransformGizmo } from "../TransformGizmo.js";

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

@@ -293,6 +293,41 @@ export class PlayableDirector extends Behaviour {
         return this._audioTracks;
     }
 
+    /**
+     * @returns all signal tracks of the timeline
+     */
+    get signalTracks(): Tracks.SignalTrackHandler[] {
+        return this._signalTracks;
+    }
+
+    /**
+     * @returns all marker tracks of the timeline
+     */
+    get markerTracks(): Tracks.MarkerTrackHandler[] {
+        return this._markerTracks;
+    }
+
+    /**
+     * Iterates over all markers of the timeline, optionally filtering by type
+     * 
+     * @example
+     * ```ts
+     * // Iterate over all ScrollMarkers in the timeline
+     * for (const marker of director.foreachMarker<{selector:string}>("ScrollMarker")) {
+     *   console.log(marker.time, marker.selector);
+     * }
+     * ```
+     * 
+     */
+    *foreachMarker<T extends Record<string, any>>(type: string | null = null): Generator<(T & Models.MarkerModel)> {
+        for (const track of this._markerTracks) {
+            for (const marker of track.foreachMarker<T>(type)) {
+                yield marker as T & Models.MarkerModel;
+            }
+        }
+    }
+
+
     private _guidsMap?: GuidsMap;
     /** @internal */
     resolveGuids(map: GuidsMap) {
@@ -309,16 +344,18 @@ export class PlayableDirector extends Behaviour {
     private _time: number = 0;
     private _duration: number = 0;
     private _weight: number = 1;
-    private _animationTracks: Array<Tracks.AnimationTrackHandler> = [];
-    private _audioTracks: Array<Tracks.AudioTrackHandler> = [];
-    private _signalTracks: Array<Tracks.SignalTrackHandler> = [];
-    private _controlTracks: Array<Tracks.ControlTrackHandler> = [];
-    private _customTracks: Array<Tracks.TrackHandler> = [];
-
-    private _allTracks: Array<Array<Tracks.TrackHandler>> = [
+    private readonly _animationTracks: Array<Tracks.AnimationTrackHandler> = [];
+    private readonly _audioTracks: Array<Tracks.AudioTrackHandler> = [];
+    private readonly _signalTracks: Array<Tracks.SignalTrackHandler> = [];
+    private readonly _markerTracks: Array<Tracks.MarkerTrackHandler> = [];
+    private readonly _controlTracks: Array<Tracks.ControlTrackHandler> = [];
+    private readonly _customTracks: Array<Tracks.TrackHandler> = [];
+
+    private readonly _allTracks: Array<Array<Tracks.TrackHandler>> = [
         this._animationTracks,
         this._audioTracks,
         this._signalTracks,
+        this._markerTracks,
         this._controlTracks,
         this._customTracks
     ];
@@ -335,7 +372,7 @@ export class PlayableDirector extends Behaviour {
         }
     }
 
-    private *internalUpdate() {
+    private * internalUpdate() {
         while (this._isPlaying && this.activeAndEnabled) {
             if (!this._isPaused && this._isPlaying) {
                 this._time += this.context.time.deltaTime * this.speed;
@@ -415,26 +452,18 @@ export class PlayableDirector extends Behaviour {
             }
         }
 
-        // When timeline reaches the end "stop()" is called which is evaluating with time 0
-        // We don't want to re-evaluate the animation then in case the timeline is blended with the Animator
-        // e.g then the timeline animation at time 0 is 100% applied on top of the animator animation
-        if (!this._isStopping) {
-            for (const handler of this._animationTracks) {
+        for (const track of this._allTracks) {
+            for (const handler of track) {
+                // When timeline reaches the end "stop()" is called which is evaluating with time 0
+                // We don't want to re-evaluate the animation then in case the timeline is blended with the Animator
+                // e.g then the timeline animation at time 0 is 100% applied on top of the animator animation
+
+                if (this._isStopping && handler instanceof Tracks.AnimationTrackHandler) {
+                    continue;
+                }
                 handler.evaluate(time);
             }
         }
-        for (const handler of this._audioTracks) {
-            handler.evaluate(time);
-        }
-        for (const sig of this._signalTracks) {
-            sig.evaluate(time);
-        }
-        for (const ctrl of this._controlTracks) {
-            ctrl.evaluate(time);
-        }
-        for (const cust of this._customTracks) {
-            cust.evaluate(time);
-        }
     }
 
     private resolveBindings() {
@@ -630,26 +659,42 @@ export class PlayableDirector extends Behaviour {
                 }
             }
             else if (track.type === Models.TrackType.Marker) {
-                const signalHandler: Tracks.SignalTrackHandler = new Tracks.SignalTrackHandler();
-                signalHandler.director = this;
-                signalHandler.track = track;
+
                 if (track.markers) {
+                    // For the marker track we create both a signal track handler AND a markertrack handler because a marker track can have signals and markers
+                    const signalHandler: Tracks.SignalTrackHandler = new Tracks.SignalTrackHandler();
+                    signalHandler.director = this;
+                    signalHandler.track = track;
+
+                    const markerHandler: Tracks.MarkerTrackHandler = new Tracks.MarkerTrackHandler();
+                    markerHandler.director = this;
+                    markerHandler.track = track;
+
                     for (const marker of track.markers) {
                         switch (marker.type) {
                             case Models.MarkerType.Signal:
                                 signalHandler.models.push(marker as Models.SignalMarkerModel);
                                 signalHandler.didTrigger.push(false);
                                 break;
+                            default:
+                                markerHandler.models.push(marker);
+                                break;
                         }
                     }
-                }
-                if (signalHandler !== null && signalHandler.models.length > 0) {
-                    const rec = GameObject.getComponent(this.gameObject, SignalReceiver);
-                    if (rec) {
-                        signalHandler.receivers.push(rec);
-                        this._signalTracks.push(signalHandler);
+
+                    if (signalHandler !== null && signalHandler.models.length > 0) {
+                        const rec = GameObject.getComponent(this.gameObject, SignalReceiver);
+                        if (rec) {
+                            signalHandler.receivers.push(rec);
+                            this._signalTracks.push(signalHandler);
+                        }
+                    }
+
+                    if (markerHandler !== null && markerHandler.models.length > 0) {
+                        this._markerTracks.push(markerHandler);
                     }
                 }
+
             }
             else if (track.type === Models.TrackType.Signal) {
                 const handler = new Tracks.SignalTrackHandler();

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

@@ -1,4 +1,5 @@
 import { AnimationClip, Object3D, Quaternion, Vector3 } from "three";
+import { Behavior } from "three-mesh-ui";
 
 export declare type TimelineAssetModel = {
     name: string;
@@ -90,3 +91,5 @@ export declare class SignalMarkerModel extends MarkerModel {
     emitOnce: boolean;
     asset: string;
 }
+
+export type ScrollMarkerModel = MarkerModel & { selector: string };

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

@@ -830,6 +830,28 @@ export class AudioTrackHandler extends TrackHandler {
     }
 }
 
+export class MarkerTrackHandler extends TrackHandler {
+    models: Array<Models.MarkerModel & Record<string, any>> = [];
+    isDirty = true;
+
+    *foreachMarker<T>(type: string | null = null) {
+        for (const model of this.models) {
+            if (model && model.type === type) yield model as T;
+        }
+    }
+
+    onEnable() {
+        this.isDirty = true;
+    }
+
+    evaluate(_time: number) {
+        if (this.isDirty) {
+            this.isDirty = false;
+            this.models.sort((a, b) => a.time - b.time);
+        }
+    }
+}
+
 export class SignalTrackHandler extends TrackHandler {
     models: Models.SignalMarkerModel[] = [];
     didTrigger: boolean[] = [];