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

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 } from "../engine/engine_utils.js";
+import { addAttributeChangeCallback, getParam, PromiseAllWithErrors, removeAttributeChangeCallback, toSourceId } 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,15 +27,34 @@ 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 (typeof newValue !== "string") return;
-        if (debug) console.log(attribute, "CHANGED TO", newValue)
-        remote.setSkybox(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;
+                }
+            }
+        }
     };
     addAttributeChangeCallback(context.domElement, attribute, urlChanged);
     remote.addEventListener("destroy", () => {
@@ -50,7 +69,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)
@@ -246,8 +265,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/utils/LookAt.ts

@@ -1,12 +1,12 @@
 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";
 import { ActionBuilder, BehaviorModel, TriggerBuilder, USDVec3 } from "../../engine-components/export/usdz/extensions/behavior/BehavioursBuilder.js";
 import { USDObject } from "../../engine-components/export/usdz/ThreeUSDZExporter.js";
 import { Behaviour } from "../Component.js";
-import { isDevEnvironment } from "../../engine/debug/index.js";
 
 /**
  * LookAt behaviour makes the object look at a target object or the camera.  

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

@@ -4,10 +4,11 @@ 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 } 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";
+import { MarkerTrackHandler } from "../api.js";
 import { AudioSource } from "../AudioSource.js";
 import { Behaviour } from "../Component.js";
 import { EventList } from "../EventList.js";
@@ -308,17 +309,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;
@@ -349,57 +350,74 @@ 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 nextTime = nextMarker
+                ? (nextMarker.time - oneFrameTime)
+                : duration;
 
             markerCount += 1;
 
-            // 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;
+            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;
             // if(this.context.time.frame % 10 === 0) console.log(marker.element?.className, timeline, calculateTimelinePositionNormalized(timeline!));
 
-            const top = marker.element.offsetTop;
-            const height = marker.element.offsetHeight;
-            const bottom = top + height;
-            let overlap = 0;
+            // 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
+            // // 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);
-            }
+            // 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);
+            // }
 
-            markerCount += 1;
+            // // if(this.context.time.frame % 20 === 0) console.log(overlap)
 
-            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) {
@@ -407,19 +425,23 @@ export class ScrollFollow extends Behaviour {
         }
         else if (weightsArray.length > 0) {
             // normalize and calculate weighted time
-            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;
+            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;
+                }
             }
-            // console.log(time.toFixed(2), [...weightsArray])
-            if (this.damping <= 0)
+            if (debug && this.context.time.frame % 20 === 0) console.log(time.toFixed(3), [...weightsArray])
+            if (this.damping <= 0) {
                 director.time = time;
-            else
+            }
+            else {
                 director.time = Mathf.lerp(director.time, time, this.context.time.deltaTime / this.damping);
+            }
         }
     }
 
@@ -506,16 +528,6 @@ 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 {

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

@@ -1,10 +1,12 @@
 import { Camera, PerspectiveCamera, 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 { getTempQuaternion, getTempVector } from "../../engine/engine_three_utils.js";
 import { registerType } from "../../engine/engine_typestore.js";
-import { getTempVector } from "../../engine/engine_three_utils.js";
-import { Behaviour } from "../Component.js";
-import { isDevEnvironment } from "../../engine/debug/debug.js";
 import { getParam } from "../../engine/engine_utils.js";
+import { Behaviour } from "../Component.js";
 
 const debugParam = getParam("debugviewbox");
 
@@ -19,26 +21,34 @@ export class ViewBox extends Behaviour {
     @serializable()
     debug: boolean = false;
 
-    awake() {
-        // this.referenceFieldOfView = (this.context.mainCamera as PerspectiveCamera)?.fov || 60;
-        // setInterval(()=>{
-        //     this.enabled = !this.enabled
-        // }, 1000)
-    }
+    // awake() {
+    //     // this.referenceFieldOfView = (this.context.mainCamera as PerspectiveCamera)?.fov || 60;
+    //     setInterval(()=>{
+    //         if(Math.random() > .5)
+    //         this.enabled = !this.enabled
+    //     }, 1000)
+    // }
+    
     onEnable(): void {
         if (debugParam || this.debug || isDevEnvironment()) console.debug("[ViewBox] Using camera fov:", this.referenceFieldOfView);
         ViewBox.instances.push(this);
     }
 
     onDisable(): void {
+        if (debugParam || this.debug) console.debug("[ViewBox] Disabled");
         const idx = ViewBox.instances.indexOf(this);
         if (idx !== -1) ViewBox.instances.splice(idx, 1);
+        this._projectedBoxElement?.remove();
     }
 
     onBeforeRender() {
         if (this.context.isInXR) return;
         const isActive = ViewBox.instances[ViewBox.instances.length - 1] === this;
-        if (!isActive) return;
+        if (!isActive) {
+            if (debugParam || this.debug) Gizmos.DrawWireBox(this.gameObject.worldPosition, this.gameObject.worldScale, 0x333333);
+            return;
+        }
+        if (debugParam || this.debug) Gizmos.DrawWireBox(this.gameObject.worldPosition, this.gameObject.worldScale, 0xdddd00);
 
         // calculate box size to fit the camera frustrum size at the current position (just scale)
         const camera = this.context.mainCamera;
@@ -53,11 +63,8 @@ export class ViewBox extends Behaviour {
             return;
         }
 
-        const domRect = this.context.domElement.getBoundingClientRect();
-        const domX = domRect.x;
-        const domY = domRect.y;
-        const domWidth = domRect.width;
-        const domHeight = domRect.height;
+        const domWidth = this.context.domWidth;
+        const domHeight = this.context.domHeight;
 
         let rectPosX = 0;
         let rectPosY = 0;
@@ -77,44 +84,80 @@ export class ViewBox extends Behaviour {
             diffHeight = domHeight / rectHeight;
         }
 
-        // const view = camera.view;
+
         const view = camera.view;
         const zoom = camera.zoom;
         const aspect = camera.aspect;
         const fov = camera.fov;
         camera.view = null;
         camera.zoom = 1;
-        // camera.aspect = rectWidth / rectHeight;
         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) * 10; // move a bit more than needed
+            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();
 
 
-        // const fov = this.referenceFieldOfView
-        const distance = camera.worldPosition.distanceTo(boxPosition);
+        // #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(boxPosition, boxScale, camera, height * .5);
+        const projectedBox = this.projectBoxIntoCamera(boxPosition, boxScale, camera, 1);
+        // return
         const boxWidth = (projectedBox.maxX - projectedBox.minX);
         const boxHeight = (projectedBox.maxY - projectedBox.minY);
 
-        // TODO: take the rect size different into account
         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;
+        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);
 
@@ -146,9 +189,8 @@ export class ViewBox extends Behaviour {
 
 
 
-    private projectBoxIntoCamera(position: Vector3, scale: Vector3, camera: Camera, diff: number) {
-
-        const factor = .5 * diff;
+    private projectBoxIntoCamera(position: Vector3, scale: Vector3, camera: Camera, _factor: number) {
+        const factor = .5 * _factor;
 
         const corners = [
             getTempVector(-scale.x * factor, -scale.y * factor, -scale.z * factor),
@@ -174,18 +216,21 @@ export class ViewBox extends Behaviour {
             if (c.y > maxY) maxY = c.y;
         }
 
-        // if(!this._projectedBoxElement) {
-        //     this._projectedBoxElement = document.createElement("div");
-        // this.context.domElement.appendChild(this._projectedBoxElement);
-        // }
-        // this._projectedBoxElement.style.position = "fixed";
-        // this._projectedBoxElement.style.outline = "10px solid red";
-        // 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";
+        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";
+            this._projectedBoxElement.style.outline = "5px dotted red";
+            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 };