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

package/src/engine-components/Renderer.ts

@@ -358,11 +358,8 @@ export class Renderer extends Behaviour implements IRenderer {
     //@ts-ignore
     get sharedMaterials(): SharedMaterialArray {
 
-        // @ts-ignore (original materials will be set during deserialization)
-        if(this._originalMaterials === undefined) return null;
-
         // @ts-ignore during deserialization code might access this property *before* the setter and then create an empty array
-        if (this.__isDeserializing === true) return null;
+        if (!this.__didAwake) return null;
 
         if (!this._sharedMaterials || !this._sharedMaterials.is(this)) {
             if (!this._originalMaterials) this._originalMaterials = [];
@@ -728,8 +725,6 @@ export class Renderer extends Behaviour implements IRenderer {
                 // If the material has a envMap and is NOT using a reflection probe we set the envMap to the scene environment
                 if (mat && "envMap" in mat && "envMapIntensity" in mat && !ReflectionProbe.isUsingReflectionProbe(mat)) {
                     mat.envMap = this.context.scene.environment;
-                    mat.envMapIntensity = this.context.scene.environmentIntensity;
-                    mat.envMapRotation = this.context.scene.environmentRotation;
                 }
             }
         }

package/src/engine-components/Skybox.ts

@@ -8,7 +8,7 @@ import { syncField } from "../engine/engine_networking_auto.js";
 import { loadPMREM } from "../engine/engine_pmrem.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
 import { type IContext } from "../engine/engine_types.js";
-import { addAttributeChangeCallback, getParam, PromiseAllWithErrors, removeAttributeChangeCallback, toSourceId } from "../engine/engine_utils.js";
+import { addAttributeChangeCallback, getParam, PromiseAllWithErrors, removeAttributeChangeCallback } from "../engine/engine_utils.js";
 import { registerObservableAttribute } from "../engine/webcomponents/needle-engine.extras.js";
 import { Camera, ClearFlags } from "./Camera.js";
 import { Behaviour, GameObject } from "./Component.js";
@@ -27,34 +27,15 @@ function createRemoteSkyboxComponent(context: IContext, url: string, skybox: boo
     }
 
     const remote = new RemoteSkybox();
-    remote.sourceId = toSourceId(url);
     remote.allowDrop = false;
     remote.allowNetworking = false;
     remote.background = skybox;
     remote.environment = environment;
     GameObject.addComponent(context.scene, remote);
     const urlChanged = newValue => {
-        if (debug) console.log(attribute, "CHANGED TO", newValue);
-        if (newValue) {
-            if (typeof newValue !== "string") {
-                console.warn("Invalid attribute value for " + attribute);
-                return;
-            }
-            remote.setSkybox(newValue);
-        }
-        else {
-            if (remote.sourceId) {
-                if (environment) {
-                    if (!context.sceneLighting.internalEnableReflection(remote.sourceId)) {
-                        context.scene.environment = null;
-                    }
-                }
-                if (skybox) {
-                    const skybox = context.lightmaps.tryGetSkybox(remote.sourceId);
-                    context.scene.background = skybox;
-                }
-            }
-        }
+        if (typeof newValue !== "string") return;
+        if (debug) console.log(attribute, "CHANGED TO", newValue)
+        remote.setSkybox(newValue);
     };
     addAttributeChangeCallback(context.domElement, attribute, urlChanged);
     remote.addEventListener("destroy", () => {
@@ -69,7 +50,7 @@ ContextRegistry.registerCallback(ContextEvent.ContextCreationStart, (args) => {
     const context = args.context;
     const backgroundImage = context.domElement.getAttribute("background-image");
     const environmentImage = context.domElement.getAttribute("environment-image");
-
+    
     if (backgroundImage) {
         if (debug) console.log("Creating RemoteSkybox to load background " + backgroundImage);
         // if the user is loading a GLB without a camera then the CameraUtils (which creates the default camera)
@@ -265,8 +246,8 @@ export class RemoteSkybox extends Behaviour {
             envMap.needsUpdate = true;
         }
 
-        if (this.destroyed) return;
-        if (!this.context) {
+        if(this.destroyed) return;
+        if(!this.context) {
             console.warn("RemoteSkybox: Context is not available - can not apply skybox.");
             return;
         }

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

@@ -208,7 +208,6 @@ 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 { Avatar } from "../webxr/Avatar.js";
 export { XRControllerFollow } from "../webxr/controllers/XRControllerFollow.js";
 export { XRControllerModel } from "../webxr/controllers/XRControllerModel.js";

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

@@ -66,19 +66,10 @@ export class PlayableDirector extends Behaviour {
         this.createTrackFunctions[type] = fn;
     }
 
-    /**
-     * The timeline asset that is played by this director.
-     */
     playableAsset?: Models.TimelineAssetModel;
-
     /** Set to true to start playing the timeline when the scene starts */
     @serializable()
     playOnAwake?: boolean;
-
-    /**
-     * Determines how the timeline behaves when it reaches the end of its duration.
-     * @default DirectorWrapMode.Loop
-     */
     @serializable()
     extrapolationMode: DirectorWrapMode = DirectorWrapMode.Loop;
 

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

@@ -92,12 +92,4 @@ export declare class SignalMarkerModel extends MarkerModel {
     asset: string;
 }
 
-/**
- * Marker with a name, used for scroll-driven timelines. It is used together with elements in your HTML to define what time in the timeline should be active when the element is in the scroll view.
- * 
- * @example Mark html elements to define scroll positions 
- * ```html
- * <div data-timeline-marker>...</div>
- * ```
- */
-export type ScrollMarkerModel = MarkerModel & { name: string };
+export type ScrollMarkerModel = MarkerModel & { selector: string };

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

@@ -175,10 +175,8 @@ export class AnimationTrackHandler extends TrackHandler {
     // which means we want to notify the object that it's not animated anymore
     // and the animator can then take over
     onStateChanged() {
-        if (this._animator) {
-            // We can not check the *isPlaying* state here because the timeline might be paused and evaluated by e.g. ScrollFollow
-            setObjectAnimated(this._animator.gameObject, this, this.director.enabled && this.director.weight > 0);
-        }
+        if (this._animator)
+            setObjectAnimated(this._animator.gameObject, this, this.director.isPlaying);
     }
 
     createHooks(clipModel: Models.AnimationClipModel, clip) {

package/src/engine-components/utils/LookAt.ts

@@ -1,6 +1,5 @@
 import { Matrix4, Object3D, Quaternion, Vector3 } from "three";
 
-import { isDevEnvironment } from "../../engine/debug/index.js";
 import { serializable } from "../../engine/engine_serialization.js";
 import { lookAtObject } from "../../engine/engine_three_utils.js";
 import { type UsdzBehaviour } from "../../engine-components/export/usdz/extensions/behavior/Behaviour.js";
@@ -43,10 +42,7 @@ export class LookAt extends Behaviour implements UsdzBehaviour {
     /** @internal */
     onBeforeRender(): void {
         let target: Object3D | null | undefined = this.target;
-        if (!target) {
-            target = this.context.mainCamera;
-            if (isDevEnvironment()) console.warn(`[LookAt] No target set on ${this.name}, using main camera as target.`);
-        }
+        if (!target) target = this.context.mainCamera;
         if (!target) return;
 
         let copyTargetRotation = this.copyTargetRotation;

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

@@ -1,21 +1,12 @@
 import { NEPointerEvent } from "../../engine/engine_input.js";
 import { onStart } from "../../engine/engine_lifecycle_api.js";
-import { addAttributeChangeCallback } from "../../engine/engine_utils.js";
 import { Behaviour } from "../Component.js";
 
 // Automatically add ClickThrough component if "clickthrough" attribute is present on the needle-engine element
 onStart(ctx => {
     const attribute = ctx.domElement.getAttribute("clickthrough");
-    if (clickthroughEnabled(attribute)) {
-        const comp = ctx.scene.addComponent(ClickThrough);
-        addAttributeChangeCallback(ctx.domElement, "clickthrough", () => {
-            const attribute = ctx.domElement.getAttribute("clickthrough");
-            comp.enabled = clickthroughEnabled(attribute);
-        });
-    }
-
-    function clickthroughEnabled(val: string | null) {
-        return val !== null && val !== "0" && val !== "false";
+    if (attribute !== null && attribute !== "0" && attribute !== "false") {
+        ctx.scene.addComponent(ClickThrough);
     }
 });
 

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

@@ -1,14 +1,13 @@
 import { Box3, Object3D } from "three";
 import { element } from "three/src/nodes/TSL.js";
-
 import { Context } from "../../engine/engine_context.js";
+
 import { Mathf } from "../../engine/engine_math.js";
 import { serializable } from "../../engine/engine_serialization.js";
-import { getBoundingBox, setVisibleInCustomShadowRendering } from "../../engine/engine_three_utils.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 { MarkerTrackHandler } from "../api.js";
 import { AudioSource } from "../AudioSource.js";
 import { Behaviour } from "../Component.js";
 import { EventList } from "../EventList.js";
@@ -151,8 +150,7 @@ 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;
@@ -244,8 +242,7 @@ export class ScrollFollow extends Behaviour {
 
         if (target instanceof PlayableDirector) {
             this.handleTimelineTarget(target, value);
-            if (target.isPlaying) target.pause();
-            target.evaluate();
+            if (!target.isPlaying) target.evaluate();
         }
         else if (target instanceof Animator) {
             target.setFloat("scroll", value);
@@ -295,35 +292,18 @@ export class ScrollFollow extends Behaviour {
         let scrollRegionEnd = 0;
         markersArray.length = 0;
 
-        // 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++;
+        for (const marker of director.foreachMarker<ScrollMarkerModel & { element?: HTMLElement | null, needsUpdate?: boolean }>("ScrollMarker")) {
 
             // Get marker elements from DOM
-            if ((marker.element === undefined || marker.needsUpdate === true || /** element is not in DOM anymore? */ (!marker.element?.parentNode))) {
+            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 = tryGetElementsForSelector(index, marker.name) as HTMLElement | null;
-                    if (debug) console.debug("ScrollMarker found on page", marker.element, marker.name);
-                    if (!marker.element) {
-                        marker.timeline = undefined;
-                        continue;
-                    }
-                    else {
-                        /** @ts-ignore */
-                        marker.timeline = new ViewTimeline({
-                            subject: marker.element,
-                            axis: 'block', // https://drafts.csswg.org/scroll-animations/#scroll-notation
-                        });
-                    }
+                    marker.element = document.querySelector<HTMLElement>(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.name + "\n", error);
+                    console.error("ScrollMarker selector is not valid: " + marker.selector + "\n", error);
                 }
             }
 
@@ -350,74 +330,41 @@ 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 (let i = 0; i < markersArray.length; i++) {
-            const marker = markersArray[i];
+        for (const marker of markersArray) {
+
             if (!marker.element) continue;
-            const nextMarker = markersArray[i + 1];
 
-            const nextTime = nextMarker
-                ? (nextMarker.time - oneFrameTime)
-                : duration;
+            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;
 
-            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;
-                if (time01 > 0 && time01 <= 1) {
-                    const lerpTime = marker.time + (nextTime - marker.time) * time01;
-                    weightsArray.push({ time: lerpTime, weight: weight });
-                    sum += weight;
-                }
-                // Before the first marker is reached
-                else if (i === 0 && time01 <= 0) {
-                    weightsArray.push({ 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 });
-                    sum += 1;
-                }
+            if (overlap > 0) {
+                weightsArray.push({ time: marker.time, weight: overlap });
+                sum += overlap;
             }
-            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) {
@@ -425,118 +372,25 @@ export class ScrollFollow extends Behaviour {
         }
         else if (weightsArray.length > 0) {
             // normalize and calculate weighted time
-            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.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);
+            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;
         }
     }
 
 }
 
-
-
 const weightsArray: OverlapInfo[] = [];
-const markersArray: (ScrollMarkerModel & { element?: HTMLElement | null, timeline?: ViewTimeline })[] = [];
+const markersArray: (ScrollMarkerModel & { element?: HTMLElement | null })[] = [];
 
 type OverlapInfo = {
     /** 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 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 {
-
-    if (!needsScrollMarkerRefresh) {
-        let element = name?.length ? needleScrollMarkerNameCache.get(name) : null;
-        if (element) return element;
-        element = needleScrollMarkerIndexCache.get(index) || null;
-        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);
-    });
-    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;
-}
-
-
-// #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/index.ts

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

package/lib/engine-components/web/ViewBox.d.ts

@@ -1,16 +0,0 @@
-import { Behaviour } from "../Component.js";
-export declare class ViewBox extends Behaviour {
-    static instances: ViewBox[];
-    referenceFieldOfView: number;
-    debug: boolean;
-    awake(): void;
-    onEnable(): void;
-    onDisable(): void;
-    onBeforeRender(): void;
-    /**
-     * Cover fit
-     */
-    private fit;
-    private projectBoxIntoCamera;
-    private _projectedBoxElement;
-}