Needle Engine 3.38.0-alpha

Files changed (8) hide show

plugins/common/license.cjs +11 -1
plugins/vite/index.js +8 -0
src/engine-components/OrbitControls.ts +59 -16
src/engine-components/export/usdz/ThreeUSDZExporter.ts +6 -1
src/engine-components/export/usdz/USDZExporter.ts +17 -18
plugins/types/userconfig.d.ts +6 -0
src/engine-components/webxr/WebXRImageTracking.ts +16 -9
plugins/vite/server.js +65 -0

plugins/common/license.cjs CHANGED Viewed

@@ -58,7 +58,7 @@
         return null;
     }
-    console.log("INFO: Resolve license for " + license.id + "::" + license.key);
+    console.log("INFO: Resolve license for " + obscure(license.id + "::" + license.key));
     const url = await fetch(LICENSE_ENDPOINT, { method: "GET" });
     if (!url.ok) {
         console.warn("WARN: Failed to fetch license URL from endpoint. " + url.statusText);
@@ -84,4 +84,14 @@
     }
     console.warn("WARN: Received invalid license.");
     return null;
+}
+/**
+ * @param {string} str
+ */
+function obscure(str) {
+    const start = str.substring(0, 3);
+    const end = str.substring(str.length - 3);
+    return start + "***" + end;
 }

plugins/vite/index.js CHANGED Viewed

@@ -50,10 +50,17 @@
 export { needleFacebookInstantGames } from "./facebook-instant-games.js";
 import { vite_4_4_hack } from "./vite-4.4-hack.js";
 import { needleImportsLogger } from "./imports-logger.js";
+export { needleImportsLogger } from "./imports-logger.js";
 import { needleBuildInfo } from "./buildinfo.js";
+export { needleBuildInfo } from "./buildinfo.js";
+import { needleServer } from "./server.js";
+export { needleServer } from "./server.js";
 export * from "./gzip.js";
 export * from "./config.js";
@@ -112,6 +119,7 @@
         needleImportsLogger(command, config, userSettings),
         needleBuildPipeline(command, config, userSettings),
         needlePWA(command, config, userSettings),
+        needleServer(command, config, userSettings),
     ];
     array.push(await editorConnection(command, config, userSettings, array));
     return array;

src/engine-components/OrbitControls.ts CHANGED Viewed

@@ -1,15 +1,15 @@
-import { Box3, Box3Helper, GridHelper, Mesh, Object3D, PerspectiveCamera, Ray, ShadowMaterial, Vector2, Vector3 } from "three";
+import { Box3Helper, Object3D, PerspectiveCamera, Ray, Vector2, Vector3 } from "three";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
-import { GroundedSkybox } from "three/examples/jsm/objects/GroundedSkybox.js";
-import { setCameraController, useForAutoFit } from "../engine/engine_camera.js";
+import { setCameraController } from "../engine/engine_camera.js";
 import { Gizmos } from "../engine/engine_gizmos.js";
+import { NEPointerEvent } from "../engine/engine_input.js";
 import { Mathf } from "../engine/engine_math.js";
 import { RaycastOptions } from "../engine/engine_physics.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
 import { getBoundingBox, getWorldDirection, getWorldPosition, getWorldRotation, setWorldRotation } from "../engine/engine_three_utils.js";
 import type { ICameraController } from "../engine/engine_types.js";
-import { delayForFrames, getParam, isMobileDevice } from "../engine/engine_utils.js";
+import { getParam, isMobileDevice } from "../engine/engine_utils.js";
 import { Camera } from "./Camera.js";
 import { Behaviour, GameObject } from "./Component.js";
 import { LookAtConstraint } from "./LookAtConstraint.js";
@@ -168,29 +168,41 @@
      */
     @serializable()
     enablePan: boolean = true;
-    /** Assigning a {@link LookAtConstraint} will make the camera look at the constraint source */
+    /** Assigning a {@link LookAtConstraint} will make the camera look at the constraint source
+     * @default null
+    */
     @serializable(LookAtConstraint)
     lookAtConstraint: LookAtConstraint | null = null;
-    /** The weight of the first lookAtConstraint source */
+    /** The weight of the first lookAtConstraint source
+     * @default 1
+    */
     @serializable()
     lookAtConstraint01: number = 1;
-    /** If true user input interrupts the camera from animating to a target */
+    /** If true user input interrupts the camera from animating to a target
+     * @default true
+    */
     @serializable()
     allowInterrupt: boolean = true;
     /** If true the camera will focus on the target when the middle mouse button is clicked */
     @serializable()
     middleClickToFocus: boolean = true;
-    /** If true the camera will focus on the target when the left mouse button is double clicked */
+    /** If true the camera will focus on the target when the left mouse button is double clicked
+     * @default true
+     */
     @serializable()
     doubleClickToFocus: boolean = true;
-    // @serializable()
-    // zoomToCursor: boolean = false;
+    /**
+     * When enabled the camera will fit the scene to the camera view when the background is clicked the specified number of times within a short time
+     * @default 2
+     */
+    @serializable()
+    clickBackgroundToFitScene: number = 2;
-    // remove once slerp works correctly
-    useSlerp: boolean = true;
-    /** @internal If true debug information will be logged to the console */
+    /**
+     * @internal If true debug information will be logged to the console
+     * @default false
+     */
     debugLog: boolean = false;
     /**
@@ -200,7 +212,9 @@
     get targetLerpSpeed() { return 5 }
     set targetLerpSpeed(v) { this.targetLerpDuration = 1 / v; }
-    /** The duration in seconds it takes for the camera look ad and position lerp to reach their destination (when set via `setCameraTargetPosition` and `setLookTargetPosition`) */
+    /** The duration in seconds it takes for the camera look ad and position lerp to reach their destination (when set via `setCameraTargetPosition` and `setLookTargetPosition`)
+     * @default 1
+     */
     @serializable()
     targetLerpDuration = 1;
@@ -315,6 +329,7 @@
         // if (this._didStart) {
         //     if (this.autoFit) this.fitCamera()
         // }
+        this.context.input.addEventListener("pointerup", this._onPointerDown);
     }
     /** @internal */
@@ -328,8 +343,37 @@
             this._controls.removeEventListener("start", this.onControlsChangeStarted);
             // this._controls.reset();
         }
+        this.context.input.removeEventListener("pointerup", this._onPointerDown);
     }
+    private _lastTimeClickOnBackground: number = -1;
+    private _clickOnBackgroundCount: number = 0;
+    private _onPointerDown = (evt: NEPointerEvent) => {
+        if (this.clickBackgroundToFitScene > 0 && evt.isClick) {
+            // it's possible that we didnt raycast in this frame
+            if (!evt.hasRay) {
+                evt.intersections.push(...this.context.physics.raycast());
+            }
+            if (evt.intersections.length <= 0) {
+                const dt = this.context.time.time - this._lastTimeClickOnBackground;
+                this._lastTimeClickOnBackground = this.context.time.time;
+                if (this.clickBackgroundToFitScene <= 1 || dt < this.clickBackgroundToFitScene * .15) {
+                    this._clickOnBackgroundCount += 1;
+                    if (this._clickOnBackgroundCount >= this.clickBackgroundToFitScene - 1)
+                        this.fitCamera(this.context.scene.children, undefined, false);
+                }
+                else {
+                    this._clickOnBackgroundCount = 0;
+                }
+            }
+            if (debug) console.log(this.clickBackgroundToFitScene, evt.intersections.length, this._clickOnBackgroundCount)
+        }
+    };
     private onControlsChangeStarted = () => {
         if (this._syncedTransform) {
             this._syncedTransform.requestOwnership();
@@ -360,7 +404,6 @@
         }
         this._controls.enabled = true;
         this.__handleSetTargetWhenBecomingActiveTheFirstTime();
         if (this.context.input.getPointerDown(1) || this.context.input.getPointerDown(2) || this.context.input.mouseWheelChanged || (this.context.input.getPointerPressed(0) && this.context.input.getPointerPositionDelta(0)?.length() || 0 > .1)) {

src/engine-components/export/usdz/ThreeUSDZExporter.ts CHANGED Viewed

@@ -585,7 +585,12 @@
 		}
 		Progress.report('export-usdz', "Traversing hierarchy");
-		if(scene) traverse( scene, context.document, context, this.keepObject);
+		if (scene) traverse( scene, context.document, context, this.keepObject);
+		// Root object should have identity matrix
+		// so that root transformations don't end up in the resulting file.
+		// if (context.document.children?.length > 0)
+		// 	context.document.children[0]?.matrix.identity(); //.multiply(new Matrix4().makeRotationY(Math.PI));
 		Progress.report('export-usdz', "Invoking onAfterBuildDocument");
 		await invokeAll( context, 'onAfterBuildDocument' );

src/engine-components/export/usdz/USDZExporter.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { NEEDLE_progressive } from "@needle-tools/gltf-progressive";
-import { Matrix4, Mesh, Object3D, Quaternion, Vector3 } from "three";
+import { Euler, Matrix4, Mesh, Object3D, Quaternion, Vector3 } from "three";
 import { showBalloonMessage, showBalloonWarning } from "../../../engine/debug/index.js";
 import { hasProLicense } from "../../../engine/engine_license.js";
@@ -572,24 +572,24 @@
     }
     private static invertForwardMatrix = new Matrix4().makeRotationY(Math.PI);
+    private static invertForwardQuaternion = new Quaternion().setFromEuler(new Euler(0, Math.PI, 0));
     private _rootSessionRootWasAppliedTo: Object3D | null = null;
     private _rootPositionBeforeExport: Vector3 = new Vector3();
     private _rootRotationBeforeExport: Quaternion = new Quaternion();
     private _rootScaleBeforeExport: Vector3 = new Vector3();
-    getARScaleAndTarget(): { scale: number, _invertForward: boolean, target: Object3D } {
-        if (!this.objectToExport) return { scale: 1, _invertForward: false, target: this.gameObject };
+    getARScaleAndTarget(): { scale: number, _invertForward: boolean, target: Object3D, sessionRoot: Object3D | null} {
+        if (!this.objectToExport) return { scale: 1, _invertForward: false, target: this.gameObject, sessionRoot: null};
         let sessionRoot = GameObject.getComponentInParent(this.objectToExport, WebARSessionRoot);
-        const hasSessionRootInParentHierarchy = sessionRoot !== null && sessionRoot !== undefined;
         if(!sessionRoot) sessionRoot = GameObject.getComponentInChildren(this.objectToExport, WebARSessionRoot);
         if (debug) console.log("applyWebARSessionRoot", sessionRoot, sessionRoot?.arScale);
         let arScale = 1;
         let _invertForward = false;
-        const target = hasSessionRootInParentHierarchy || !sessionRoot ? this.objectToExport : sessionRoot.gameObject;
+        const target = this.objectToExport;
         if (!sessionRoot) {
             const xr = GameObject.findObjectOfType(WebXR);
@@ -601,14 +601,16 @@
         }
         const scale = 1 / arScale;
-        return { scale, _invertForward, target };
+        const result = { scale, _invertForward, target, sessionRoot: sessionRoot?.gameObject ?? null };
+        console.log("getARScaleAndTarget", result);
+        return result;
     }
     private applyWebARSessionRoot() {
         if (!this.objectToExport) return;
-        const { scale, _invertForward, target } = this.getARScaleAndTarget();
+        const { scale, _invertForward, target, sessionRoot } = this.getARScaleAndTarget();
+        const sessionRootMatrixWorld = sessionRoot?.matrixWorld.clone().invert();
         this._rootSessionRootWasAppliedTo = target;
         this._rootPositionBeforeExport.copy(target.position);
@@ -616,17 +618,14 @@
         this._rootScaleBeforeExport.copy(target.scale);
         target.scale.multiplyScalar(scale);
-        // legacy, should likely be deleted
-        if (_invertForward) {
-            target.matrix.multiply(USDZExporter.invertForwardMatrix);
-        }
+        if (_invertForward)
+            target.quaternion.multiply(USDZExporter.invertForwardQuaternion);
         // udate childs as well
+        target.updateMatrix();
         target.updateMatrixWorld(true);
-        // TODO we should refactor this and use one common method in WebARSessionRoot to place an object –
-        // basically the inverted effect of WebARSessionRoot.onApplyPose()
-        // TODO why are we not reverting this transformation after the export?
+        if (sessionRoot && sessionRootMatrixWorld)
+            target.matrix.premultiply(sessionRootMatrixWorld);
     }
     private revertWebARSessionRoot() {
@@ -639,11 +638,11 @@
         target.scale.copy(this._rootScaleBeforeExport);
         // udate childs as well
+        target.updateMatrix();
         target.updateMatrixWorld(true);
         this._rootSessionRootWasAppliedTo = null;
     }
     private createQuicklookButton() {
         const buttoncontainer = WebXRButtonFactory.getOrCreate();
         const button = buttoncontainer.createQuicklookButton();

plugins/types/userconfig.d.ts CHANGED Viewed

@@ -62,4 +62,10 @@
      * Use to activate a needle engine license
      */
     license?: License;
+    /**
+     * When set to `true` a plugin will automatically attempt to open the browser using a network ip address when the local server has started
+     * @default undefined
+     */
+    openBrowser?: boolean;
 }

src/engine-components/webxr/WebXRImageTracking.ts CHANGED Viewed

@@ -39,7 +39,6 @@
         return quat;
     }
-    private static y180 = new Quaternion().setFromAxisAngle(new Vector3(0, 1, 0), Math.PI);
     applyToObject(object: Object3D, t01: number | undefined = undefined) {
         this.ensureTransformData();
         // check if position/_position or rotation/_rotation changed more than just a little bit
@@ -55,7 +54,6 @@
             object.quaternion.slerp(this._rotation, t01);
             // InstancingUtil.markDirty(object);
         }
-        object.quaternion.multiply(WebXRTrackedImage.y180);
     }
     private static _positionBuffer: CircularBuffer<Vector3> = new CircularBuffer(() => new Vector3(), 20);
@@ -186,20 +184,29 @@
         const imageTracking = GameObject.findObjectOfType(WebXRImageTracking);
         if (!imageTracking || !imageTracking.trackedImages) return;
         for (const trackedImage of imageTracking.trackedImages) {
             if (trackedImage.object?.asset === object) {
                 const exporter = GameObject.findObjectOfType(USDZExporter);
                 if (!exporter) continue;
-                const { scale } = exporter.getARScaleAndTarget();
+                const { scale, target } = exporter.getARScaleAndTarget();
                 // We have to reset the image tracking object's position and rotation, because QuickLook applies them.
-                // On Android WebXR they're replaced by the tracked data.
-                model.matrix = object.matrixWorld.clone()
+                // On Android WebXR they're replaced by the tracked data
+                let parent = object;
+                const relativeMatrix = new Matrix4();
+                if (object !== target) {
+                    while (parent.parent && parent.parent !== target) {
+                        parent = parent.parent;
+                        relativeMatrix.premultiply(parent.matrix);
+                    }
+                }
+                const mat = relativeMatrix
+                    .clone()
                     .invert()
-                    .multiply(new Matrix4().makeRotationY(Math.PI))
+                model.matrix = mat
                     // apply session root scale again after undoing the world transformation
-                    // TODO check if we actually do that in WebXR image tracking
                     .scale(new Vector3(scale, scale, scale));
                 // Unfortunately looks like Apple's docs are incomplete:
@@ -207,10 +214,10 @@
                 // In practice, it seems that nesting is not allowed – no image tracking will be applied to nested objects.
                 // Thus, we can't have separate transforms for "regularly placing content" and "placing content with an image marker".
                 // model.extraSchemas.push("Preliminary_AnchoringAPI");
-                model.addEventListener("serialize", (_writer: USDWriter, _context: USDZExporterContext) => {
+                // model.addEventListener("serialize", (_writer: USDWriter, _context: USDZExporterContext) => {
                     // writer.appendLine( `token preliminary:anchoring:type = "image"` );
                     // writer.appendLine( `rel preliminary:imageAnchoring:referenceImage = </${context.document.name}/Scenes/Scene/AnchoringReferenceImage>` );
-                });
+                // });
                 // We can only apply this to the first tracked image, more are not supported by QuickLook.
                 break;

plugins/vite/server.js ADDED Viewed

@@ -0,0 +1,65 @@
+import open from 'open'
+import { resolveConfig } from 'vite';
+/**
+ * Can open the network server in the browser
+ * @param {string} command
+ * @param {import('../types').needleMeta | null} config
+ * @param {import('../types').userSettings} userSettings
+ */
+export const needleServer = (command, config, userSettings) => {
+    const shouldOpenBrowser = userSettings.openBrowser === true;
+    /**
+     * @type {import("vite").UserConfig}
+     */
+    return {
+        name: 'needle:server',
+        config(config) {
+            // if this plugin is used to open the browser we want to make sure "open" in the vite config is set to false
+            if (shouldOpenBrowser) {
+                console.log("[needle:server] Setting 'open: false' in vite server config because 'openBrowser' is enabled in needlePlugins")
+                return {
+                    ...config,
+                    server: {
+                        ...config.server,
+                        open: false
+                    }
+                }
+            }
+        },
+        /**
+         * @param {import("vite").ViteDevServer} server
+         */
+        configureServer(server) {
+            if (shouldOpenBrowser) {
+                console.log('[needle:server] Waiting for server...')
+                const i = setInterval(() => {
+                    // https://github.com/vitejs/vite/blob/e861168f476b8cb278f599a0341076b0511c5264/packages/vite/src/node/preview.ts#L231
+                    const resolvedUrls = server.resolvedUrls;
+                    if (resolvedUrls) {
+                        // stop trying when the urls are resolved
+                        clearInterval(i);
+                        // check if the network urls are available and attempt to open the first one
+                        const networkUrls = resolvedUrls.network;
+                        if (Array.isArray(networkUrls) && networkUrls.length > 0) {
+                            const networkUrl = networkUrls[0];
+                            // perhaps we can just use the vite code here: https://github.com/vitejs/vite/blob/e861168f476b8cb278f599a0341076b0511c5264/packages/vite/src/node/server/openBrowser.ts#L72
+                            console.log('[needle:server] Opening network URL: ' + networkUrl)
+                            open(networkUrl);
+                        }
+                        else {
+                            const local = resolvedUrls.local;
+                            if (local?.length) {
+                                console.log('[needle:server] Opening local URL: ' + local)
+                                open(local);
+                            }
+                        }
+                    }
+                }, 100)
+            }
+        },
+    }
+};