@needle-tools/engine 4.10.0-next.55c0bf9 → 4.10.0-next.f5ce0ae

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

@@ -1,10 +1,12 @@
+// For firefox ViewTimeline support
+import "scroll-timeline-polyfill/dist/scroll-timeline.js";
+
 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 } from "../../engine/engine_three_utils.js";
+import { getBoundingBox, setVisibleInCustomShadowRendering } from "../../engine/engine_three_utils.js";
 import { getParam } from "../../engine/engine_utils.js";
 import { Animation } from "../Animation.js";
 import { Animator } from "../Animator.js";
@@ -150,7 +152,8 @@ export class ScrollFollow extends Behaviour {
             }
         }
 
-        if (this._current_value !== this._appliedValue) {
+        // if (this._current_value !== this._appliedValue) 
+        {
             this._appliedValue = this._current_value;
 
             let defaultPrevented = false;
@@ -172,8 +175,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)) {
@@ -184,7 +187,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}]`);
                 }
             }
         }
@@ -242,7 +245,8 @@ export class ScrollFollow extends Behaviour {
 
         if (target instanceof PlayableDirector) {
             this.handleTimelineTarget(target, value);
-            if (!target.isPlaying) target.evaluate();
+            if (target.isPlaying) target.pause();
+            target.evaluate();
         }
         else if (target instanceof Animator) {
             target.setFloat("scroll", value);
@@ -292,18 +296,37 @@ export class ScrollFollow extends Behaviour {
         let scrollRegionEnd = 0;
         markersArray.length = 0;
 
-        for (const marker of director.foreachMarker<ScrollMarkerModel & { element?: HTMLElement | null, needsUpdate?: boolean }>("ScrollMarker")) {
+        // querySelectorResults.length = 0;
+        let markerIndex = 0;
+
+        // https://scroll-driven-animations.style/tools/view-timeline/ranges
+        for (const marker of director.foreachMarker<ScrollMarkerModel & { element?: HTMLElement | null, needsUpdate?: boolean, timeline?: ViewTimeline }>("ScrollMarker")) {
+
+            const index = markerIndex++;
 
             // Get marker elements from DOM
-            if (marker.selector?.length && (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 {
-                    marker.element = document.querySelector<HTMLElement>(marker.selector) || null;
-                    if (debug) console.debug("ScrollMarker found on page", marker.element, marker.selector);
+                    // 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 #${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 {
+                        /** @ts-ignore */
+                        marker.timeline = new ViewTimeline({
+                            subject: marker.element,
+                            axis: 'block', // https://drafts.csswg.org/scroll-animations/#scroll-notation
+                        });
+                    }
                 }
                 catch (error) {
                     marker.element = null;
-                    console.error("ScrollMarker selector is not valid: " + marker.selector + "\n", error);
+                    console.error("ScrollMarker selector is not valid: " + marker.name + "\n", error);
                 }
             }
 
@@ -330,41 +353,75 @@ export class ScrollFollow extends Behaviour {
 
         weightsArray.length = 0;
         let sum = 0;
+        const oneFrameTime = 1 / 60;
 
+        // We keep a separate count here in case there are some markers that could not be resolved so point to *invalid* elements - the timeline should fallback to 0-1 scroll behaviour then
         let markerCount = 0;
-        for (const marker of markersArray) {
-
+        for (let i = 0; i < markersArray.length; i++) {
+            const marker = markersArray[i];
             if (!marker.element) continue;
+            const nextMarker = markersArray[i + 1];
 
-            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)
-            }
+            const nextTime = nextMarker
+                ? (nextMarker.time - oneFrameTime)
+                : duration;
 
             markerCount += 1;
 
-            if (overlap > 0) {
-                weightsArray.push({ time: marker.time, weight: overlap });
-                sum += overlap;
+            const timeline = marker.timeline;
+            if (timeline) {
+                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({ name, time: lerpTime, weight: weight });
+                    sum += weight;
+                }
+                // Before the first marker is reached
+                else if (i === 0 && time01 <= 0) {
+                    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({ name, time: duration, weight: 1 });
+                    sum += 1;
+                }
             }
+            continue;
+            // if(this.context.time.frame % 10 === 0) console.log(marker.element?.className, timeline, calculateTimelinePositionNormalized(timeline!));
+
+            // const top = marker.element.offsetTop - this._scrollContainerHeight;
+            // const height = marker.element.offsetHeight + this._scrollContainerHeight;
+            // 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);
+            //     const height = Math.max(1, currentBottom - currentTop);
+            //     overlap = Math.max(0, overlapBottom - overlapTop);
+            // }
+
+            // // if(this.context.time.frame % 20 === 0) console.log(overlap)
+
+            // if (overlap > 0) {
+            //     weightsArray.push({ time: marker.time, weight: overlap });
+            //     sum += overlap;
+            // }
         }
 
         if (weightsArray.length <= 0 && markerCount <= 0) {
@@ -372,25 +429,119 @@ export class ScrollFollow extends Behaviour {
         }
         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;
+            let time = weightsArray[0].time; // fallback to first time
+            if (weightsArray.length > 1) {
+                for (const entry of weightsArray) {
+                    const weight = entry.weight / Math.max(0.00001, sum);
+                    // console.log(weight.toFixed(2))
+                    // lerp time based on weight
+                    const diff = Math.abs(entry.time - time);
+                    time += diff * weight;
+                }
+            }
+            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(", "));
             }
-            director.time = time;
         }
     }
 
 }
 
+
+
 const weightsArray: OverlapInfo[] = [];
-const markersArray: (ScrollMarkerModel & { element?: HTMLElement | null })[] = [];
+const markersArray: Array<ScrollMarkerModel & {
+    element?: HTMLElement | null,
+    timeline?: ViewTimeline,
+}> = [];
 
 type OverlapInfo = {
+    name: string,
     /** Marker time */
     time: number,
     /** Overlap in pixels */
     weight: number,
+}
+
+
+// type SelectorCache = {
+//     /** The selector used to query the *elements */
+//     selector: string,
+//     elements: Element[] | null,
+//     usedElementCount: number,
+// }
+// const querySelectorResults: Array<SelectorCache> = [];
+
+const needleScrollMarkerIndexCache = new Map<number, Element | null>();
+const needleScrollMarkerNameCache = new Map<string, Element | null>();
+let needsScrollMarkerRefresh = true;
+
+function tryGetElementsForSelector(index: number, name: string, _cycle: number = 0): Element | null {
+
+    if (!needsScrollMarkerRefresh) {
+        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;
+    needleScrollMarkerIndexCache.clear();
+    const markers = document.querySelectorAll(`[data-timeline-marker]`);
+    markers.forEach((m, i) => {
+        needleScrollMarkerIndexCache.set(i, m);
+        const name = m.getAttribute("data-timeline-marker");
+        if (name?.length) needleScrollMarkerNameCache.set(name, m);
+    });
+    needsScrollMarkerRefresh = false;
+    return tryGetElementsForSelector(index, name);
+}
+
+
+// #region ScrollTimeline
+
+function calculateTimelinePositionNormalized(timeline: ViewTimeline) {
+    if (!timeline.source) return 0;
+    const currentTime = timeline.currentTime;
+    const duration = timeline.duration;
+    let durationValue = 1;
+    if (duration.unit === "seconds") {
+        durationValue = duration.value;
+    }
+    else if (duration.unit === "percent") {
+        durationValue = duration.value;
+    }
+    const t01 = currentTime.unit === "seconds" ? (currentTime.value / durationValue) : (currentTime.value / 100);
+    return t01;
+}
+
+
+declare global {
+    interface ViewTimeline {
+        axis: 'block' | 'inline';
+        currentTime: { unit: 'seconds' | 'percent', value: number };
+        duration: { unit: 'seconds' | 'percent', value: number };
+        source: Element | null;
+        startOffset: { unit: 'px', value: number };
+        endOffset: { unit: 'px', value: number };
+    }
 }

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

@@ -0,0 +1,262 @@
+import { Camera, PerspectiveCamera, Quaternion, Scene, Vector2, Vector3 } from "three";
+
+import { isDevEnvironment } from "../../engine/debug/debug.js";
+import { Gizmos } from "../../engine/engine_gizmos.js";
+import { serializable } from "../../engine/engine_serialization_decorator.js";
+import { getTempVector } from "../../engine/engine_three_utils.js";
+import { registerType } from "../../engine/engine_typestore.js";
+import { getParam } from "../../engine/engine_utils.js";
+import { RGBAColor } from "../../engine/js-extensions/RGBAColor.js";
+import { Behaviour } from "../Component.js";
+
+
+const debugParam = getParam("debugviewbox");
+const disabledGizmoColor = new RGBAColor(.5, .5, .5, .5);
+
+/**
+ * This component can be used to automatically fit a certain box area into the camera view - no matter your screen size or aspect ratio.  
+ * 
+ * Add the ViewBox to an object into your scene
+ */
+@registerType
+export class ViewBox extends Behaviour {
+
+    static readonly instances: ViewBox[] = [];
+
+    /**
+     * The reference field of view is used to calculate the box size. This should usually be the same as your camera's fov.
+     * @default undefined (meaning it will use the camera fov on the first frame)
+     */
+    @serializable()
+    referenceFieldOfView: number | undefined = undefined;
+
+    /**
+     * Enable debug logs and rendering for this component instance
+     */
+    @serializable()
+    debug: boolean = false;
+
+    onEnable(): void {
+        if (debugParam || this.debug || isDevEnvironment()) console.debug("[ViewBox] Using camera fov:", this.referenceFieldOfView);
+        // register instance
+        ViewBox.instances.push(this);
+    }
+
+    onDisable(): void {
+        if (debugParam || this.debug) console.debug("[ViewBox] Disabled");
+        // unregister instance
+        const idx = ViewBox.instances.indexOf(this);
+        if (idx !== -1) ViewBox.instances.splice(idx, 1);
+        this._projectedBoxElement?.remove();
+    }
+
+    onBeforeRender(): void {
+        if (this.context.isInXR) return;
+        if (this.destroyed) return;
+        const isActive = ViewBox.instances[ViewBox.instances.length - 1] === this;
+        if (!isActive) {
+            if (debugParam || this.debug) {
+                Gizmos.DrawWireBox(this.gameObject.worldPosition, this.gameObject.worldScale, disabledGizmoColor);
+            }
+            return;
+        }
+        if (debugParam || this.debug) Gizmos.DrawWireBox(this.gameObject.worldPosition, this.gameObject.worldScale, 0xdddd00, 0, true, this.gameObject.worldQuaternion);
+
+        // calculate box size to fit the camera frustrum size at the current position (just scale)
+        const camera = this.context.mainCamera;
+        if (!camera) return;
+        if (!(camera instanceof PerspectiveCamera)) {
+            // TODO: support orthographic camera
+            return;
+        }
+
+        if (this.referenceFieldOfView === undefined) {
+            this.referenceFieldOfView = camera.fov;
+        }
+
+        if (this.referenceFieldOfView === undefined || this.referenceFieldOfView <= 0) {
+            if (debugParam || this.debug) console.warn("[ViewBox] No valid referenceFieldOfView set, cannot adjust box size:", this.referenceFieldOfView);
+            return;
+        }
+
+        const domWidth = this.context.domWidth;
+        const domHeight = this.context.domHeight;
+
+        let rectPosX = 0;
+        let rectPosY = 0;
+        let rectWidth = domWidth;
+        let rectHeight = domHeight;
+        let diffWidth = 1;
+        let diffHeight = 1;
+        // use focus rect if available
+        const focusRectSize = this.context.focusRectSize;
+        if (focusRectSize) {
+            // console.log(focusRectSize)
+            rectPosX = focusRectSize.x;
+            rectPosY = focusRectSize.y;
+            rectWidth = focusRectSize.width;
+            rectHeight = focusRectSize.height;
+            diffWidth = domWidth / rectWidth;
+            diffHeight = domHeight / rectHeight;
+        }
+
+
+        const view = camera.view;
+        const zoom = camera.zoom;
+        const aspect = camera.aspect;
+        const fov = camera.fov;
+        camera.view = null;
+        camera.zoom = 1;
+        camera.fov = this.referenceFieldOfView;
+        camera.updateProjectionMatrix();
+
+
+        const boxPosition = this.gameObject.worldPosition;
+        const boxScale = this.gameObject.worldScale;
+
+        const cameraPosition = camera.worldPosition;
+        const distance = cameraPosition.distanceTo(boxPosition);
+
+
+        // #region camera fixes
+        // If the camera is inside the box, move it out
+        const boxSizeMax = Math.max(boxScale.x, boxScale.y, boxScale.z);
+        const direction = getTempVector(cameraPosition).sub(boxPosition);
+        if (distance < boxSizeMax) {
+            // move camera out of bounds
+            if (this.debug || debugParam) console.warn("[ViewBox] Moving camera out of bounds", distance, "<", boxSizeMax);
+            const positionDirection = getTempVector(direction);
+            positionDirection.y *= .00000001; // stay on horizontal plane mostly
+            positionDirection.normalize();
+            const lengthToMove = (boxSizeMax - distance); 
+            const newPosition = cameraPosition.add(positionDirection.multiplyScalar(lengthToMove));
+            camera.worldPosition = newPosition.lerp(cameraPosition, 1 - this.context.time.deltaTime);
+        }
+
+        // Ensure the camera looks at the ViewBox
+        // TOOD: smooth lookat over multiple frames if we have multiple viewboxes
+        // const dot = direction.normalize().dot(camera.worldForward);
+        // if (dot < .9) {
+        //     console.log(dot);
+        //     const targetRotation = direction;
+        //     const rotation = getTempQuaternion();
+        //     rotation.setFromUnitVectors(camera.worldForward.multiplyScalar(-1), targetRotation);
+        //     camera.worldQuaternion = rotation;
+        //     camera.updateMatrixWorld();
+        // }
+        const boxPositionInCameraSpace = getTempVector(boxPosition);
+        camera.worldToLocal(boxPositionInCameraSpace);
+        camera.lookAt(boxPosition);
+        camera.updateMatrixWorld();
+
+
+        // #region calculate fit
+        const vFOV = this.referenceFieldOfView * Math.PI / 180; // convert vertical fov to radians
+        const height = 2 * Math.tan(vFOV / 2) * distance; // visible height
+        const width = height * camera.aspect; // visible width
+
+        const projectedBox = this.projectBoxIntoCamera(camera, 1);
+        // return
+        const boxWidth = (projectedBox.maxX - projectedBox.minX);
+        const boxHeight = (projectedBox.maxY - projectedBox.minY);
+
+        const scale = this.fit(
+            boxWidth * camera.aspect,
+            boxHeight,
+            width / diffWidth,
+            height / diffHeight
+        );
+        // console.log({ scale, width, height, boxWidth: boxWidth * camera.aspect, boxHeight, diffWidth, diffHeight, aspect: camera.aspect, distance })
+        // this.context.focusRectSettings.zoom = 1.39;
+        // if (!this.context.focusRect) this.context.setCameraFocusRect(this.context.domElement);
+        // return
+        const vec = getTempVector(boxPosition);
+        vec.project(camera);
+        this.context.focusRectSettings.offsetX = vec.x;
+        this.context.focusRectSettings.offsetY = vec.y;
+        this.context.focusRectSettings.zoom = scale / (height * .5);
+        // if we don't have a focus rect yet, set it to the dom element
+        if (!this.context.focusRect) this.context.setCameraFocusRect(this.context.domElement);
+
+        // Reset values
+        camera.view = view;
+        camera.zoom = zoom;
+        camera.aspect = aspect;
+        camera.fov = fov;
+        // camera.updateProjectionMatrix();
+
+
+        // BACKLOG: some code for box scale of an object (different component)
+        // this.gameObject.worldScale = getTempVector(width, height, worldscale.z);
+        // this.gameObject.scale.multiplyScalar(.98)
+        // const minscale = Math.min(width, height);
+        // console.log(width, height);
+        // this.gameObject.worldScale = getTempVector(scale, scale, scale);
+    }
+
+
+    /**
+     * Cover fit
+     */
+    private fit(width1: number, height1: number, width2: number, height2: number) {
+        const scaleX = width2 / width1;
+        const scaleY = height2 / height1;
+        return Math.min(scaleX, scaleY);
+    }
+
+
+
+    private projectBoxIntoCamera(camera: Camera, _factor: number) {
+        const factor = .5 * _factor;
+
+        const corners = [
+            getTempVector(-factor, -factor, -factor),
+            getTempVector(factor, -factor, -factor),
+            getTempVector(-factor, factor, -factor),
+            getTempVector(factor, factor, -factor),
+            getTempVector(-factor, -factor, factor),
+            getTempVector(factor, -factor, factor),
+            getTempVector(-factor, factor, factor),
+            getTempVector(factor, factor, factor),
+        ];
+        let minX = Number.POSITIVE_INFINITY;
+        let maxX = Number.NEGATIVE_INFINITY;
+        let minY = Number.POSITIVE_INFINITY;
+        let maxY = Number.NEGATIVE_INFINITY;
+        for (let i = 0; i < corners.length; i++) {
+            const c = corners[i];
+            c.applyMatrix4(this.gameObject.matrixWorld);
+            c.project(camera);
+            if (c.x < minX) minX = c.x;
+            if (c.x > maxX) maxX = c.x;
+            if (c.y < minY) minY = c.y;
+            if (c.y > maxY) maxY = c.y;
+        }
+
+        if (debugParam) {
+            if (!this._projectedBoxElement) {
+                this._projectedBoxElement = document.createElement("div");
+            }
+            if (this._projectedBoxElement.parentElement !== this.context.domElement)
+                this.context.domElement.appendChild(this._projectedBoxElement);
+            this._projectedBoxElement.style.position = "fixed";
+            // dotted but with larger gaps
+            this._projectedBoxElement.style.outline = "2px dashed rgba(255,0,0,.5)";
+            this._projectedBoxElement.style.left = ((minX * .5 + .5) * this.context.domWidth) + "px";
+            this._projectedBoxElement.style.top = ((-maxY * .5 + .5) * this.context.domHeight) + "px";
+            this._projectedBoxElement.style.width = ((maxX - minX) * .5 * this.context.domWidth) + "px";
+            this._projectedBoxElement.style.height = ((maxY - minY) * .5 * this.context.domHeight) + "px";
+            this._projectedBoxElement.style.pointerEvents = "none";
+            this._projectedBoxElement.style.zIndex = "1000";
+        }
+
+
+        return { minX, maxX, minY, maxY };
+
+    }
+    private _projectedBoxElement: HTMLElement | null = null;
+
+
+
+
+}

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

@@ -1,4 +1,5 @@
 export * from "./Clickthrough.js";
 export * from "./CursorFollow.js";
 export * from "./HoverAnimation.js";
-export * from "./ScrollFollow.js";
+export * from "./ScrollFollow.js";
+export * from "./ViewBox.js";

package/src/engine-components-experimental/Presentation.ts

@@ -1,6 +1,7 @@
 import type { KeyCode } from "../engine/engine_input.js";
 import { Behaviour } from "../engine-components/Component.js";
 
+/** @internal */
 export class PresentationMode extends Behaviour {
 
     toggleKey: KeyCode = "KeyP";