@needle-tools/engine 4.10.1-next.ffb3f90 → 4.10.2-next.298bf98

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

@@ -1,11 +1,9 @@
 import { Camera, Matrix4, PerspectiveCamera, Quaternion, Scene, Vector2, Vector3 } from "three";
 
 import { isDevEnvironment } from "../../engine/debug/debug.js";
-import type { Context } from "../../engine/engine_context.js";
 import { Gizmos } from "../../engine/engine_gizmos.js";
-import { Mathf } from "../../engine/engine_math.js";
 import { serializable } from "../../engine/engine_serialization_decorator.js";
-import { getTempQuaternion, getTempVector } from "../../engine/engine_three_utils.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";
@@ -13,8 +11,7 @@ import { Behaviour } from "../Component.js";
 
 
 const debugParam = getParam("debugviewbox");
-const disabledGizmoColor = new RGBAColor(.5, .5, .5, .3);
-const enabledGizmoColor = new RGBAColor(.5, .5, 0, 1);
+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.  
@@ -40,24 +37,8 @@ const enabledGizmoColor = new RGBAColor(.5, .5, 0, 1);
 @registerType
 export class ViewBox extends Behaviour {
 
-    /** All known viewbox instances */
     static readonly instances: ViewBox[] = [];
 
-    /**
-     * The currently active viewbox (the last one that was set active). If you have multiple viewboxes in your scene, only the active one will be used.  
-     * Note that the last viewbox may be inactive if its component is disabled or disabled in the hierarchy.
-     * @returns The active viewbox or null if none is active
-     */
-    static get activeInstance(): ViewBox | null {
-        if (ViewBox.instances.length === 0) return null;
-        return ViewBox.instances[ViewBox.instances.length - 1];
-    }
-
-    /**
-     * A runner instance is used per context to update the viewbox
-     */
-    private static readonly runners: WeakMap<Context, Runner> = new WeakMap();
-
     /**
      * The reference field of view is used to calculate the box size. This should usually be the same as your camera's fov.
      * @default -1 (meaning it will use the camera fov on the first frame)
@@ -71,20 +52,6 @@ export class ViewBox extends Behaviour {
     @serializable()
     debug: boolean = false;
 
-
-    /**
-     * Set this ViewBox as the active one (if you have multiple in your scene). The last active one will be used.
-     * @returns self for chaining
-     */
-    setActive(): this {
-        this.enabled = true;
-        const idx = ViewBox.instances.indexOf(this);
-        if (idx !== -1) ViewBox.instances.splice(idx, 1);
-        ViewBox.instances.push(this);
-        return this;
-    }
-
-    /** @internal */
     onEnable(): void {
         if (debugParam || this.debug || isDevEnvironment()) console.debug("[ViewBox] Using camera fov:", this.referenceFieldOfView);
         // register instance
@@ -94,12 +61,12 @@ export class ViewBox extends Behaviour {
         this.context.pre_render_callbacks.push(this.internalUpdate);
     }
 
-    /** @internal */
     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();
         this.removeUpdateCallback();
     }
 
@@ -109,6 +76,9 @@ export class ViewBox extends Behaviour {
         if (cbIdx !== -1) this.context.pre_render_callbacks.splice(cbIdx, 1);
     }
 
+    private static readonly _tempProjectionMatrix: Matrix4 = new Matrix4();
+    private static readonly _tempProjectionMatrixInverse: Matrix4 = new Matrix4();
+
     private internalUpdate = () => {
         if (this.context.isInXR) return;
         if (this.destroyed || !this.activeAndEnabled) return;
@@ -119,18 +89,13 @@ export class ViewBox extends Behaviour {
             }
             return;
         }
-        if (debugParam || this.debug) Gizmos.DrawWireBox(this.gameObject.worldPosition, this.gameObject.worldScale, enabledGizmoColor, 0, true, this.gameObject.worldQuaternion);
-
+        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
-            if (!this["__warnedOrthographic"]) {
-                console.warn("[ViewBox] Only perspective cameras are supported.");
-                this["__warnedOrthographic"] = true;
-            }
             return;
         }
 
@@ -138,65 +103,21 @@ export class ViewBox extends Behaviour {
             this.referenceFieldOfView = camera.fov;
             console.debug("[ViewBox] No referenceFieldOfView set, using camera fov:", this.referenceFieldOfView);
         }
+
         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;
         }
 
-        let runner = ViewBox.runners.get(this.context);
-        if (!runner) {
-            runner = new Runner();
-            ViewBox.runners.set(this.context, runner);
-        }
-        runner.update(this);
-
-        // 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);
-    }
-
-}
-
-
-
-
-const projectionMatrixCopy: Matrix4 = new Matrix4();
-const projectionMatrixInverseCopy: Matrix4 = new Matrix4();
-
-class Runner {
-
-    private lastActiveViewBox: ViewBox | null = null;
-    private lastViewBoxChangeTime: number = -1;
-    private currentX: number = 0;
-    private currentY: number = 0;
-    private currentZoom: number = 1;
-
-    update(viewBox: ViewBox) {
-
-        const context = viewBox.context;
-        const camera = viewBox.context.mainCamera;
-        if (!(camera instanceof PerspectiveCamera)) return;
-
-        if (this.lastActiveViewBox !== viewBox) {
-            if (this.lastActiveViewBox === null)
-                this.lastViewBoxChangeTime = -100; // long ago
-            else
-                this.lastViewBoxChangeTime = context.time.time;
-            this.lastActiveViewBox = viewBox;
-        }
-
-        const domWidth = context.domWidth;
-        const domHeight = context.domHeight;
+        const domWidth = this.context.domWidth;
+        const domHeight = this.context.domHeight;
 
         let rectWidth = domWidth;
         let rectHeight = domHeight;
         let diffWidth = 1;
         let diffHeight = 1;
         // use focus rect if available
-        const focusRectSize = context.focusRectSize;
+        const focusRectSize = this.context.focusRectSize;
         if (focusRectSize) {
             rectWidth = focusRectSize.width;
             rectHeight = focusRectSize.height;
@@ -206,8 +127,8 @@ class Runner {
 
 
         // Copy the projection matrix and restore values so we can reset it later
-        projectionMatrixCopy.copy(camera.projectionMatrix);
-        projectionMatrixInverseCopy.copy(camera.projectionMatrixInverse);
+        ViewBox._tempProjectionMatrix.copy(camera.projectionMatrix);
+        ViewBox._tempProjectionMatrixInverse.copy(camera.projectionMatrixInverse);
         const view = camera.view;
         const zoom = camera.zoom;
         const aspect = camera.aspect;
@@ -215,18 +136,16 @@ class Runner {
         // Set values to default so we can calculate the box size correctly
         camera.view = null;
         camera.zoom = 1;
-        camera.fov = viewBox.referenceFieldOfView;
+        camera.fov = this.referenceFieldOfView;
         camera.updateProjectionMatrix();
 
 
-        const boxPosition = viewBox.gameObject.worldPosition;
-        const boxScale = viewBox.gameObject.worldScale;
+        const boxPosition = this.gameObject.worldPosition;
+        const boxScale = this.gameObject.worldScale;
 
         const cameraPosition = camera.worldPosition;
         const distance = cameraPosition.distanceTo(boxPosition);
 
-        const timeSinceViewBoxChanged = context.time.time - this.lastViewBoxChangeTime;
-        const interpolationDelta = timeSinceViewBoxChanged < 1 ? (context.time.deltaTime / .1) : 1;
 
         // #region camera fixes
         // If the camera is inside the box, move it out
@@ -234,13 +153,13 @@ class Runner {
         const direction = getTempVector(cameraPosition).sub(boxPosition);
         if (distance < boxSizeMax) {
             // move camera out of bounds
-            if (viewBox.debug || debugParam) console.warn("[ViewBox] Moving camera out of bounds", distance, "<", boxSizeMax);
+            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 - context.time.deltaTime);
+            camera.worldPosition = newPosition.lerp(cameraPosition, 1 - this.context.time.deltaTime);
         }
 
         // Ensure the camera looks at the ViewBox
@@ -254,26 +173,18 @@ class Runner {
         //     camera.worldQuaternion = rotation;
         //     camera.updateMatrixWorld();
         // }
-        // const boxPositionInCameraSpace = getTempVector(boxPosition);
-
-        // Ensure the camera looks at the box position
-        // camera.worldToLocal(boxPositionInCameraSpace);
-        // if (interpolationDelta < 1) {
-        //     const startRotation = interpolationDelta < 1 ? getTempQuaternion(camera.quaternion) : null;
-        //     camera.lookAt(boxPosition);
-        //     if (startRotation !== null) {
-        //         camera.quaternion.slerpQuaternions(startRotation, camera.quaternion, interpolationDelta);
-        //     }
-        //     camera.updateMatrixWorld();
-        // }
+        const boxPositionInCameraSpace = getTempVector(boxPosition);
+        camera.worldToLocal(boxPositionInCameraSpace);
+        camera.lookAt(boxPosition);
+        camera.updateMatrixWorld();
 
 
         // #region calculate fit
-        const vFOV = viewBox.referenceFieldOfView * Math.PI / 180; // convert vertical fov to radians
+        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(viewBox, camera, 1);
+        const projectedBox = this.projectBoxIntoCamera(camera, 1);
         // return
         const boxWidth = (projectedBox.maxX - projectedBox.minX);
         const boxHeight = (projectedBox.maxY - projectedBox.minY);
@@ -284,38 +195,33 @@ class Runner {
             width / diffWidth,
             height / diffHeight
         );
-        const rectZoom = scale / (height * .5);
         // 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);
-
-        if (interpolationDelta < 1) {
-            this.currentX = Mathf.lerp(this.currentX, vec.x, interpolationDelta);
-            this.currentY = Mathf.lerp(this.currentY, vec.y, interpolationDelta);
-            this.currentZoom = Mathf.lerp(this.currentZoom, rectZoom, interpolationDelta);
-        }
-        else {
-            this.currentX = vec.x;
-            this.currentY = vec.y;
-            this.currentZoom = rectZoom;
-        }
-
-        // Apply new values
-        context.focusRectSettings.offsetX = this.currentX;
-        context.focusRectSettings.offsetY = this.currentY;
-        context.focusRectSettings.zoom = this.currentZoom;
-        if (!context.focusRect) context.setCameraFocusRect(context.domElement); // if we don't have a focus rect yet, set it to the dom element
+        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.projectionMatrix.copy(projectionMatrixCopy);
-        camera.projectionMatrixInverse.copy(projectionMatrixInverseCopy);
+        camera.projectionMatrix.copy(ViewBox._tempProjectionMatrix);
+        camera.projectionMatrixInverse.copy(ViewBox._tempProjectionMatrixInverse);
+
+
+        // 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);
     }
 
 
@@ -330,7 +236,7 @@ class Runner {
 
 
 
-    private projectBoxIntoCamera(comp: ViewBox, camera: Camera, _factor: number) {
+    private projectBoxIntoCamera(camera: Camera, _factor: number) {
         const factor = .5 * _factor;
 
         const corners = [
@@ -349,7 +255,7 @@ class Runner {
         let maxY = Number.NEGATIVE_INFINITY;
         for (let i = 0; i < corners.length; i++) {
             const c = corners[i];
-            c.applyMatrix4(comp.gameObject.matrixWorld);
+            c.applyMatrix4(this.gameObject.matrixWorld);
             c.project(camera);
             if (c.x < minX) minX = c.x;
             if (c.x > maxX) maxX = c.x;
@@ -361,15 +267,15 @@ class Runner {
             if (!this._projectedBoxElement) {
                 this._projectedBoxElement = document.createElement("div");
             }
-            if (this._projectedBoxElement.parentElement !== comp.context.domElement)
-                comp.context.domElement.appendChild(this._projectedBoxElement);
+            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) * comp.context.domWidth) + "px";
-            this._projectedBoxElement.style.top = ((-maxY * .5 + .5) * comp.context.domHeight) + "px";
-            this._projectedBoxElement.style.width = ((maxX - minX) * .5 * comp.context.domWidth) + "px";
-            this._projectedBoxElement.style.height = ((maxY - minY) * .5 * comp.context.domHeight) + "px";
+            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";
         }
@@ -382,4 +288,5 @@ class Runner {
 
 
 
-}
+
+}