@needle-tools/engine 4.10.0-next.2abafea → 4.10.0-next.4f9d92a

package/src/engine/engine_utils.ts

@@ -381,14 +381,6 @@ export function resolveUrl(source: SourceIdentifier | undefined, uri: string): s
     }
     return uri;
 }
-
-export function toSourceId(src: string | null): SourceIdentifier | undefined {
-    if (!src) return undefined;
-    src = src.trim();
-    src = src.split("?")[0]?.split("#")[0];
-    return src;
-}
-
 // export function getPath(glbLocation: SourceIdentifier | undefined, path: string) {
 //     if (path && glbLocation && !path.includes("/")) {
 //         // get directory of glb and prepend it to the audio file path
@@ -801,7 +793,6 @@ const mutationObserverMap = new WeakMap<HTMLElement, HtmlElementExtra>();
 /** 
  * Register a callback when an {@link HTMLElement} attribute changes.   
  * This is used, for example, by the Skybox component to watch for changes to the environment-* and skybox-* attributes.
- * @returns A function that can be used to unregister the callback
 */
 export function addAttributeChangeCallback(domElement: HTMLElement, name: string, callback: AttributeChangeCallback) {
     if (!mutationObserverMap.get(domElement)) {
@@ -820,9 +811,6 @@ export function addAttributeChangeCallback(domElement: HTMLElement, name: string
         listeners.set(name, []);
     }
     listeners.get(name)!.push(callback);
-    return () => {
-        removeAttributeChangeCallback(domElement, name, callback);
-    }
 };
 
 /** 

package/src/engine/webcomponents/needle-engine.ts

@@ -570,10 +570,6 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
                 this._context.renderer.setClearColor(rgbaColor, rgbaColor.alpha);
                 this.context.scene.background = null;
             }
-            // HACK: if we set background-color to a color and then back to null we want the background-image attribute to re-apply
-            else if(this.getAttribute("background-image")) {
-                this.setAttribute("background-image", this.getAttribute("background-image")!);
-            }
         }
     }
 

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/web/ScrollFollow.ts

@@ -4,11 +4,10 @@ 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";
@@ -309,17 +308,17 @@ export class ScrollFollow extends Behaviour {
                 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
-                        });
-                    }
+                    // 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
+                    //     });
+                    // }
                 }
                 catch (error) {
                     marker.element = null;
@@ -350,74 +349,57 @@ 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];
-            if (!marker.element) continue;
-            const nextMarker = markersArray[i + 1];
+        for (const marker of markersArray) {
 
-            const nextTime = nextMarker
-                ? (nextMarker.time - oneFrameTime)
-                : duration;
+            if (!marker.element) continue;
 
             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;
-                }
-            }
-            continue;
+            // const timeline = marker.timeline;
+            // if (timeline) {
+            //     const time01 = calculateTimelinePositionNormalized(timeline);
+            //     if (time01 > 0 && time01 <= 1) {
+            //         const overlap = calculateTimelinePositionNormalized(timeline!);
+            //         const weight = overlap;
+            //         // console.log(marker.element.className, time01)
+            //         weightsArray.push({ time: marker.time, weight: weight });
+            //         sum += weight;
+            //     }
+            // }
+            // 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;
+            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
+            // 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 (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);
+            }
 
-            // // if(this.context.time.frame % 20 === 0) console.log(overlap)
+            markerCount += 1;
 
-            // if (overlap > 0) {
-            //     weightsArray.push({ time: marker.time, weight: overlap });
-            //     sum += overlap;
-            // }
+            if (overlap > 0) {
+                weightsArray.push({ time: marker.time, weight: overlap });
+                sum += overlap;
+            }
         }
 
         if (weightsArray.length <= 0 && markerCount <= 0) {
@@ -425,23 +407,19 @@ 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;
-                }
+            let time = 0;
+            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) {
+            // console.log(time.toFixed(2), [...weightsArray])
+            if (this.damping <= 0)
                 director.time = time;
-            }
-            else {
+            else
                 director.time = Mathf.lerp(director.time, time, this.context.time.deltaTime / this.damping);
-            }
         }
     }
 
@@ -528,6 +506,16 @@ function calculateTimelinePositionNormalized(timeline: ViewTimeline) {
     const t01 = currentTime.unit === "seconds" ? (currentTime.value / durationValue) : (currentTime.value / 100);
     return t01;
 }
+function calculateNormalizedOverlap(timeline: ViewTimeline) {
+    if (!timeline.source) return 0;
+    const start = timeline.startOffset;
+    const end = timeline.endOffset;
+    const total = start.value + end.value;
+    if (total <= 0) return 1;
+    const startNorm = start.value / total;
+    const endNorm = end.value / total;
+    return 1 - (startNorm + endNorm);
+}
 
 
 declare global {