Needle Engine 3.46.0-beta.5

Files changed (8) hide show

src/engine-components/DropListener.ts +1 -1
src/engine/webcomponents/needle menu/needle-menu.ts +24 -4
src/engine/xr/NeedleXRController.ts +27 -23
src/engine/xr/NeedleXRSession.ts +3 -1
src/engine-components/timeline/PlayableDirector.ts +13 -2
src/engine-components/SceneSwitcher.ts +35 -1
src/engine-components/webxr/WebXR.ts +8 -0
src/engine-components/webxr/controllers/XRControllerMovement.ts +51 -11

src/engine-components/DropListener.ts CHANGED Viewed

@@ -215,7 +215,7 @@
             // Ignore dropped images
             const lowercaseUrl = url.toLowerCase();
             if (lowercaseUrl.endsWith(".hdr") || lowercaseUrl.endsWith(".hdri") || lowercaseUrl.endsWith(".exr") || lowercaseUrl.endsWith(".png") || lowercaseUrl.endsWith(".jpg") || lowercaseUrl.endsWith(".jpeg")) {
-                return;
+                return null;
             }
             const res = await files.addFileFromUrl(new URL(url), this.context);

src/engine/webcomponents/needle menu/needle-menu.ts CHANGED Viewed

@@ -29,9 +29,16 @@
     }
 }
-declare type ButtonInfo = {
+/**
+ * Used by the NeedleMenuElement to create a button at {@link NeedleMenuElement#appendChild}
+ */
+export declare type ButtonInfo = {
     label: string,
     onClick: (evt: Event) => void,
+    /** Material icon name: https://fonts.google.com/icons */
+    icon?: string,
+    /** Low priority is icon is on the left, high priority is icon is on the right. Default is undefined */
+    priority?: number;
 }
 export class NeedleMenu {
@@ -280,7 +287,7 @@
             font-weight: 500;
             font-weight: 200;
             font-variation-settings: "wdth" 100;
-            color: rgb(30,30,30);
+            color: rgb(20,20,20);
         }
         a {
@@ -305,8 +312,17 @@
             cursor: pointer;
             color: black;
             background: rgba(245, 245, 245, .8);
-            outline: rgba(0,0,0,.05) 1px solid;
+            box-shadow: inset 0 0 1rem rgba(0,0,30,.2);
+            outline: rgba(0,0,0,.1) 1px solid;
         }
+        :host .options > *:active, ::slotted(*:active) {
+            background: rgba(255, 255, 255, .8);
+            box-shadow: inset 0px 1px 1px rgba(255,255,255,.5), inset 0 0 2rem rgba(0,0,30,.2), inset 0px 2px 4px rgba(0,0,20,.5);
+            transition: all 0.05s linear;
+        }
+        :host .options > *:focus, ::slotted(*:focus) {
+            outline: rgba(255,255,255,.5) 1px solid;
+        }
         :host .options > *:disabled, ::slotted(*:disabled) {
             background: rgba(0,0,0,.05);
@@ -360,7 +376,7 @@
         }
         .compact .options {
-            max-height: 20ch;
+            max-height: 18ch;
             overflow: auto;
             flex-direction: row;
             flex-wrap: wrap;
@@ -622,6 +638,10 @@
             const button = document.createElement("button");
             button.textContent = node.label;
             button.onclick = node.onClick;
+            button.setAttribute("priority", node.priority?.toString() ?? "0");
+            if (node.icon) {
+                button.prepend(getIconElement(node.icon));
+            }
             node = button as unknown as T;
         }

src/engine/xr/NeedleXRController.ts CHANGED Viewed

@@ -443,7 +443,7 @@
         if (gripPositionRaw && gripQuaternionRaw) {
             this._gripWorldPosition.copy(gripPositionRaw);
             if (parent) this._gripWorldPosition.applyMatrix4(parent.matrixWorld);
             this._gripWorldQuaternion.copy(gripQuaternionRaw);
             // flip forward because we want +Z to be forward
             this._gripWorldQuaternion.multiply(flipForwardQuaternion);
@@ -751,30 +751,34 @@
                 const indexTip = handObject.joints["index-finger-tip"];
                 const thumbTip = handObject.joints["thumb-tip"];
                 if (indexTip && thumbTip) {
-                    const pinchThreshold = .02;
-                    const pinchHysteresis = .01;
                     const distance = indexTip.position.distanceTo(thumbTip.position);
-                    const state = this.states["pinch"] || new InputState();
-                    state.value = distance;
-                    const isPressed = distance < (pinchThreshold - pinchHysteresis);
-                    const isReleased = distance > (pinchThreshold + pinchHysteresis);
-                    if (isPressed && !state.pressed) {
-                        if (debugCustomGesture) console.log("pinch start", distance);
-                        state.isDown = true;
-                        state.isUp = false;
-                        state.pressed = true;
+                    if(distance !== 0) { // ignore exactly 0 which happens when we switch from hands to controllers
+                        const pinchThreshold = .02;
+                        const pinchHysteresis = .01;
+                        const state = this.states["pinch"] || new InputState();
+                        const maxDistance = (pinchThreshold + pinchHysteresis) * 1.5;
+                        if (this.isRight) console.log(distance);
+                        state.value = 1 - ((distance - pinchThreshold) / maxDistance);
+                        const isPressed = distance < (pinchThreshold - pinchHysteresis);
+                        const isReleased = distance > (pinchThreshold + pinchHysteresis);
+                        if (isPressed && !state.pressed) {
+                            if (debugCustomGesture) console.log("pinch start", distance);
+                            state.isDown = true;
+                            state.isUp = false;
+                            state.pressed = true;
+                        }
+                        else if (isReleased && state.pressed) {
+                            state.isDown = false;
+                            state.isUp = true;
+                            state.pressed = false;
+                        }
+                        else {
+                            state.isDown = false;
+                            state.isUp = false;
+                        }
+                        this.states["pinch"] = state;
                     }
-                    else if (isReleased && state.pressed) {
-                        state.isDown = false;
-                        state.isUp = true;
-                        state.pressed = false;
-                    }
-                    else {
-                        state.isDown = false;
-                        state.isUp = false;
-                    }
-                    this.states["pinch"] = state;
                     /** Workaround for visionOS not emitting selectstart. See https://linear.app/needle/issue/NE-4212
                      * If a selectstart event was never received we do a manual check here if the user is pinching

src/engine/xr/NeedleXRSession.ts CHANGED Viewed

@@ -1260,9 +1260,11 @@
         this.onUpdateFade_PostRender();
         // render spectator view if we're in VR using Link
-        if (isDesktop()) {
+        // __rendered_once is for when we are on device, but opening the browser should not show a blank space
+        if (isDesktop() || !this["_renderOnceOnDevice"]) {
             const renderer = this.context.renderer;
             if (renderer.xr.isPresenting && this.context.mainCamera) {
+                this["_renderOnceOnDevice"] = true;
                 const wasXr = renderer.xr.enabled;
                 const previousRenderTarget = renderer.getRenderTarget();
                 const previousBackground = this.context.scene.background;

src/engine-components/timeline/PlayableDirector.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { AnimationMixer, Object3D, Quaternion, Vector3 } from 'three';
+import { isDevEnvironment } from '../../engine/debug/index.js';
 import { FrameEvent } from '../../engine/engine_context.js';
 import { isLocalNetwork } from '../../engine/engine_networking_utils.js';
 import { serializable } from '../../engine/engine_serialization.js';
@@ -107,7 +108,17 @@
         this.rebuildGraph();
-        if (!this.isValid()) console.warn("PlayableDirector is not valid", "Asset?", this.playableAsset, "Tracks:", this.playableAsset?.tracks, "IsArray?", Array.isArray(this.playableAsset?.tracks), this);
+        if (!this.isValid() && (debug || isDevEnvironment())) {
+            if (debug) {
+                console.warn("PlayableDirector is not valid", "Asset?", this.playableAsset, "Tracks:", this.playableAsset?.tracks, "IsArray?", Array.isArray(this.playableAsset?.tracks), this);
+            }
+            else if (!this.playableAsset?.tracks?.length) {
+                console.warn("PlayableDirector has no tracks");
+            }
+            else {
+                console.warn("PlayableDirector is not valid");
+            }
+        }
     }
     /** @internal */
@@ -560,7 +571,7 @@
                             if (typeof clip === "string" || typeof clip === "number") {
                                 clip = animationClips.find(c => c.name === targetObjectId);
                             }
-                            if(debug) console.log(animModel, targetObjectId, "→", clip)
+                            if (debug) console.log(animModel, targetObjectId, "→", clip)
                             if (!clip) {
                                 console.warn("Could not find animationClip for model", clipModel, track.name, this.name, this.playableAsset?.name, animationClips, binding);
                                 continue;

src/engine-components/SceneSwitcher.ts CHANGED Viewed

@@ -2,12 +2,12 @@
 import { Addressables, AssetReference } from "../engine/engine_addressables.js";
 import { registerObservableAttribute } from "../engine/engine_element_extras.js";
+import { destroy } from "../engine/engine_gameobject.js";
 import { InputEvents } from "../engine/engine_input.js";
 import { isLocalNetwork } from "../engine/engine_networking_utils.js";
 import { serializable } from "../engine/engine_serialization.js";
 import { delay, getParam, setParamWithoutReload } from "../engine/engine_utils.js";
 import { Behaviour, GameObject } from "./Component.js";
-import { destroy } from "../engine/engine_gameobject.js";
 const debug = getParam("debugsceneswitcher");
 const experimental_clearSceneOnLoad = getParam("sceneswitcher:clearscene");
@@ -196,7 +196,14 @@
     @serializable()
     preloadConcurrent: number = 2;
+    /**
+     * When enabled will create a button for the Needle menu to switch to the next or previous scene
+     * @default false
+     */
+    @serializable()
+    createMenuButtons: boolean = false;
     /** The index of the currently loaded and active scene */
     get currentIndex(): number { return this._currentIndex; }
@@ -220,6 +227,8 @@
     private _preloadScheduler?: PreLoadScheduler;
+    private _menuButtons?: HTMLElement[];
     /** @internal */
     awake(): void {
         if (this.scenes === undefined) this.scenes = [];
@@ -279,6 +288,23 @@
                 // this.lock = locked;
             }
         }
+        // create the menu buttons
+        if (this.createMenuButtons) {
+            this._menuButtons ??= [];
+            this._menuButtons.push(this.context.menu.appendChild({
+                label: "Previous",
+                icon: "arrow_back_ios",
+                onClick: () => this.selectPrev(),
+                priority: -1005,
+            }));
+            this._menuButtons.push(this.context.menu.appendChild({
+                label: "Next",
+                icon: "arrow_forward_ios",
+                onClick: () => this.selectNext(),
+                priority: -1000,
+            }));
+        }
     }
     /** @internal */
@@ -288,6 +314,14 @@
         this.context.input.removeEventListener(InputEvents.PointerMove, this.onInputPointerMove);
         this.context.input.removeEventListener(InputEvents.PointerUp, this.onInputPointerUp);
         this._preloadScheduler?.stop();
+        // remove the menu buttons
+        if (this._menuButtons) {
+            for (const button of this._menuButtons) {
+                button.remove();
+            }
+            this._menuButtons = undefined;
+        }
     }
     private onPopState = async (_state: PopStateEvent) => {

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

@@ -187,6 +187,7 @@
         NeedleXRSession.stop();
     }
+    private _exitXRMenuButton?: HTMLElement;
     private _previousXRState: number = 0;
     private get isActiveWebXR() {
@@ -250,9 +251,16 @@
         }
         this.createLocalAvatar(args.xr);
+        this._exitXRMenuButton = this.context.menu.appendChild({
+            label: "Quit XR",
+            onClick: () => this.exitXR(),
+        });
     }
     onLeaveXR(_: NeedleXREventArgs): void {
+        this._exitXRMenuButton?.remove();
         if (!this.isActiveWebXR) return;
         // revert XR flags

src/engine-components/webxr/controllers/XRControllerMovement.ts CHANGED Viewed

@@ -12,9 +12,9 @@
 import { getParam } from "../../../engine/engine_utils.js";
 import { NeedleXRController, type NeedleXREventArgs, NeedleXRSession } from "../../../engine/engine_xr.js";
 import { Behaviour, GameObject } from "../../Component.js"
+import { hasPointerEventComponent } from "../../ui/PointerEvents.js";
 import { TeleportTarget } from "../TeleportTarget.js";
 import type { XRMovementBehaviour } from "../types.js";
-import { hasPointerEventComponent } from "../../ui/PointerEvents.js";
 const debug = getParam("debugwebxr");
@@ -41,6 +41,13 @@
     @serializable()
     useTeleport: boolean = true;
+    /**
+     * When enabled you can teleport by pinching the right XR controller's index finger tip in front of the hand
+     * @default true
+     */
+    @serializable()
+    usePinchToTeleport: boolean = true;
     /** Enable to only allow teleporting on objects with a teleport target component
      * @default false
     */
@@ -142,19 +149,36 @@
     }
     protected onHandleTeleport(controller: NeedleXRController, rig: IGameObject) {
-        const teleportInput = controller.getStick("xr-standard-thumbstick")
+        let teleportInput = 0;
+        if (controller.hand && this.usePinchToTeleport) {
+            const pinch = controller.getGesture("pinch");
+            if (pinch) {
+                teleportInput = pinch.value;
+            }
+        }
+        else {
+            teleportInput = controller.getStick("xr-standard-thumbstick")?.y;
+        }
         if (this._didTeleport) {
-            if (teleportInput.y < .2) {
+            if (teleportInput < .4) {
                 this._didTeleport = false;
             }
         }
-        else if (teleportInput.y > .8) {
+        else if (teleportInput > .8) {
             this._didTeleport = true;
             const hit = this.context.physics.raycastFromRay(controller.ray)[0];
+            // Ignore hits on objects with interactive components if teleport target is disabled
+            if (hit && controller.hand && !this.useTeleportTarget) {
+                if (this.isObjectWithInteractiveComponent(hit.object)) return;
+            }
             let point: Vector3 | null = hit?.point;
             // If we didnt hit an object in the scene use the ground plane
-            if (!point) {
+            if (!point && !this.useTeleportTarget) {
                 if (!this._plane) {
                     this._plane = new Plane(new Vector3(0, 1, 0), 0);
                 }
@@ -189,9 +213,9 @@
     private _plane: Plane | null = null;
-    private readonly _lines: Object3D[] = [];
+    private readonly _lines: Line2[] = [];
     private readonly _hitDiscs: Object3D[] = [];
-    private readonly _hitDistances: number[] = [];
+    private readonly _hitDistances: Array<number | null> = [];
     protected renderRays(session: NeedleXRSession) {
@@ -223,11 +247,21 @@
             line.position.copy(pos);
             line.quaternion.copy(rot);
             const scale = session.rigScale;
-            const dist = this._hitDistances[i] ?? scale;
+            const distance = this._hitDistances[i];
+            const hasHit = distance != null;
+            const dist = hasHit ? distance : scale;
             line.scale.set(scale, scale, dist);
             line.visible = true;
             line.layers.disableAll();
             line.layers.enable(2);
+            let targetOpacity = line.material.opacity;
+            if (ctrl.getButton("primary")?.pressed) {
+                targetOpacity = .5;
+            }
+            else {
+                targetOpacity = hasHit ? .2 : .1;
+            }
+            line.material.opacity = Mathf.lerp(line.material.opacity, targetOpacity, this.context.time.deltaTimeUnscaled / .1);
             if (line.parent !== this.context.scene)
                 this.context.scene.add(line);
         }
@@ -261,9 +295,8 @@
             const hits = this.context.physics.raycastFromRay(ctrl.ray, { testObject: this.hitPointRaycastFilter, precise: false });
             const hit = hits.find(h => {
                 // Only render hits on interactable objects
-                return hasPointerEventComponent(h.object)
+                return this.isObjectWithInteractiveComponent(h.object);
             });
-            this._hitDistances[i] = hit?.distance || 0;
             let disc = this._hitDiscs[i];
             if (disc) // save the hit object on the disc
@@ -271,8 +304,10 @@
                 disc["controller"] = ctrl;
                 disc["hit"] = hit;
             }
+            this._hitDistances[i] = hit?.distance || null;
             if (hit) {
                 const rigScale = (session.rigScale ?? 1);
                 if (debug) {
                     Gizmos.DrawWireSphere(hit.point, .025 * rigScale, 0xff0000);
@@ -310,6 +345,11 @@
             }
         }
     }
+    private isObjectWithInteractiveComponent(object: Object3D) {
+        return hasPointerEventComponent(object) || (object["isUI"] === true || object.parent?.["isUI"] === true)
+    }
     private hitPointerSetPosition(ctrl: NeedleXRController, disc: Object3D, distance: number) {
         disc.position.copy(ctrl.rayWorldPosition)
         disc.position.add(getTempVector(0, 0, distance - .01).applyQuaternion(ctrl.rayWorldQuaternion));
@@ -381,7 +421,7 @@
             // TODO: this doesnt work with passthrough
             blending: AdditiveBlending,
             dashed: false,
-            alphaToCoverage: true,
+            // alphaToCoverage: true,
         });
         line.material = mat;