Needle Engine 3.32.2-alpha

Files changed (5) hide show

src/engine/engine_input.ts +14 -9
src/engine/xr/NeedleXRController.ts +27 -18
src/engine/xr/NeedleXRSession.ts +5 -1
src/engine-components/webxr/WebXRButtons.ts +2 -1
src/engine-components/webxr/controllers/XRControllerMovement.ts +85 -65

src/engine/engine_input.ts CHANGED Viewed

@@ -23,15 +23,20 @@
     readonly source: Event | null;
     readonly mode: XRTargetRayMode;
-    /** A ray in worldspace for the event */
+    /** A ray in worldspace for the event.
+     * If the ray is undefined you can also use `space.worldForward` and `space.worldPosition` */
     readonly ray?: Ray;
-    /** The device space (this object is not necessarily rendered in the scene but you can access or copy the matrix) */
+    /** The device space (this object is not necessarily rendered in the scene but you can access or copy the matrix)
+     * E.g. you can access the input world space source position with `space.worldPosition` or world direction with `space.worldForward`
+    */
     readonly space: IGameObject;
+    /** true if this event is a click */
     isClick: boolean = false;
+    /** true if this event is a double click */
     isDoubleClick: boolean = false;
-    constructor(type: InputEvents, source: Event | null, init: NEPointerEventInit) {
+    constructor(type: InputEvents | InputEventNames, source: Event | null, init: NEPointerEventInit) {
         super(type, init)
         this.source = source;
         this.mode = init.mode;
@@ -109,7 +114,7 @@
     KeyUp = "keyup",
     KeyPressed = "keypress"
 }
-type InputEventNames = EnumToPrimitiveUnion<InputEvents>;
+export type InputEventNames = EnumToPrimitiveUnion<InputEvents>;
 declare type PointerEventListener = (evt: NEPointerEvent) => void;
@@ -138,7 +143,7 @@
             if (listeners) {
                 for (const l of listeners) {
                     if (evt.immediatePropagationStopped) {
-                        if(debug) console.log("immediatePropagationStopped", evt.type);
+                        if (debug) console.log("immediatePropagationStopped", evt.type);
                         break;
                     }
                     l(evt);
@@ -571,7 +576,7 @@
     private onTouchStartWindow = (evt: TouchEvent) => {
         // onTouchStart registers on the renderer canvas so that we don't receive events when clicking on UI elements slotted in Needle Engine
         // however in AR we need to handle these events on the window since they're not emitted otherwise (see NE-4098)
-        if(!this.context.isInAR) return;
+        if (!this.context.isInAR) return;
         this.onTouchStart(evt);
     };
     private onTouchStart = (evt: TouchEvent) => {
@@ -608,7 +613,7 @@
             if (debug) showBalloonMessage(`touch up #${id}, identifier:${touch.identifier}`);
             const space = this.getAndUpdateSpatialObjectForScreenPosition(id, touch.clientX, touch.clientY);
-            const ne = new NEPointerEvent(InputEvents.PointerUp, evt, { mode: "screen", pointerId: id, button: 0, clientX: touch.clientX, clientY: touch.clientY, pointerType: PointerType.Touch, buttonName: "unknown", device:space });
+            const ne = new NEPointerEvent(InputEvents.PointerUp, evt, { mode: "screen", pointerId: id, button: 0, clientX: touch.clientX, clientY: touch.clientY, pointerType: PointerType.Touch, buttonName: "unknown", device: space });
             this.onUp(ne);
         }
     }
@@ -660,7 +665,7 @@
     private readonly tempLookMatrix = new Matrix4();
     private getAndUpdateSpatialObjectForScreenPosition(id: number, screenX: number, screenY: number): IGameObject {
         let space = this._pointerSpace[id]
-        if (!space) {
+        if (!space) {
             space = new Object3D() as unknown as IGameObject;
             this._pointerSpace[id] = space;
         }
@@ -785,7 +790,7 @@
         if (Math.abs(dx) < 5 && Math.abs(dy) < 5) {
-            if(debug) console.log("CLICK", index)
+            if (debug) console.log("CLICK", index)
             this.setPointerState(index, this._pointerClick, true);
             evt.isClick = true;

src/engine/xr/NeedleXRController.ts CHANGED Viewed

@@ -3,7 +3,7 @@
 import type { ButtonName, IGameObject, Vec3, XRControllerButtonName } from "../engine_types.js";
 import { Context } from "../engine_context.js";
 import { Gizmos } from "../engine_gizmos.js";
-import { InputEvents, NEPointerEventInit, PointerType, NEPointerEvent } from "../engine_input.js";
+import { InputEvents, NEPointerEventInit, PointerType, NEPointerEvent, InputEventNames } from "../engine_input.js";
 import { getTempVector, getTempQuaternion, getWorldQuaternion } from "../engine_three_utils.js";
 import type { NeedleXRHitTestResult, NeedleXRSession } from "./NeedleXRSession.js";
 import { flipForwardMatrix, flipForwardQuaternion } from "./internal.js";
@@ -15,7 +15,7 @@
 declare type ControllerAxes = "xr-standard-thumbstick";
 declare type StickName = "xr-standard-thumbstick";
 declare type Mapping = "xr-standard";
-declare type ComponentType = "button" | "thumbstick";
+declare type ComponentType = "button" | "thumbstick" | "squeeze";
 declare type GamepadKey = "button" | "xAxis" | "yAxis";
@@ -68,6 +68,11 @@
     /** the input source index */
     readonly index: number = 0;
+    /** When enabled the controller will create input events in the Needle Engine input system (e.g. when a button is pressed or the controller is moved)
+     * You can disable this if you don't want inputs to go through the input system but be aware that this will result in `onPointerDown` component callbacks to not be invoked anymore for this XRController
+    */
+    emitEvents = true;
     // EXPOSE API
     /**
      * Is the controller still connected?
@@ -342,6 +347,7 @@
         if (componentModel?.gamepadIndices) {
             switch (componentModel.type) {
                 case "button":
+                case "squeeze":
                     if (this.inputSource.gamepad) {
                         const index = componentModel.gamepadIndices!.button!;
                         this._buttonMap.set(key, index);
@@ -508,29 +514,23 @@
     // and start with index = 1
     private updateInputEvents() {
         if (!this._layout) return;
-        // index 0 is reserved for the primary button
-        let index = 1;
         // https://immersive-web.github.io/webxr-gamepads-module/#xr-standard-heading
         if (this.gamepad?.buttons) {
             for (let k = 0; k < this.gamepad.buttons.length; k++) {
-                // the selection event is handled in the "selectstart" callback
-                if (this._selectButtonIndex === k) continue;
                 const button = this.gamepad.buttons[k];
-                const i = index++;
-                const state = this.states[index] || new InputState();
-                let inputEvent: InputEvents | null = null;
+                const state = this.states[k] || new InputState();
+                let eventName: InputEventNames | null = null;
                 // is down
                 if (button.pressed && !state.pressed) {
-                    inputEvent = InputEvents.PointerDown;
+                    eventName = "pointerdown";
                     state.isDown = true;
                     state.isUp = false;
                 }
                 // is up
                 else if (!button.pressed && state.pressed) {
-                    inputEvent = InputEvents.PointerUp;
+                    eventName = "pointerup"
                     state.isDown = false;
                     state.isUp = true;
                 }
@@ -541,23 +541,32 @@
                 state.value = button.value;
                 state.pressed = button.pressed;
-                this.states[index] = state;
+                this.states[k] = state;
-                if (inputEvent != null) {
+                // the selection event is handled in the "selectstart" callback
+                const emitEvent = k !== this._selectButtonIndex && k !== this._squeezeButtonIndex;
+                if (eventName != null && emitEvent) {
                     const name = this._layout?.gamepad[k];
-                    this.emitPointerEvent(inputEvent, i, name ?? "none", false);
+                    this.emitPointerEvent(eventName, k, name ?? "none", false);
                 }
             }
         }
     }
     private onUpdateMove() {
-        this.emitPointerEvent(InputEvents.PointerMove, 0, "none", false);
+        this.emitPointerEvent("pointermove", 0, "none", false);
     }
     /** cached spatial pointer init object. We re-use it to not have */
     private readonly pointerInit: NEPointerEventInit;
-    private emitPointerEvent(type: InputEvents, button: number, buttonName: ButtonName | "none", primary: boolean, source: Event | null = null) {
+    private emitPointerEvent(type: InputEventNames, button: number, buttonName: ButtonName | "none", primary: boolean, source: Event | null = null) {
+        if (!this.emitEvents) {
+            if(debug && type !== InputEvents.PointerMove) console.warn("Pointer events are disabled for this controller", this.index, type, button);
+            return;
+        }
         // Currently we do only want to emit pointer events for NON screen based events
         // that means if the input device is spatial (AR touch on a screen should be handled via touchdown etc still)
         // Not sure if *this* is enough to determine if the event is spatial or not

src/engine/xr/NeedleXRSession.ts CHANGED Viewed

@@ -323,7 +323,10 @@
         const scripts = mode == "immersive-ar" ? context.scripts_immersive_ar : context.scripts_immersive_vr
-        console.log("%c" + `Requesting ${mode} session`, "font-weight:bold;", init, scripts);
+        if (debug)
+            console.log("%c" + `Requesting ${mode} session`, "font-weight:bold;", init, scripts);
+        else
+            console.log("%c" + `Requesting ${mode} session`, "font-weight:bold;");
         for (const script of scripts) {
             if (script.onBeforeXR) script.onBeforeXR(mode, init);
         }
@@ -347,6 +350,7 @@
             listener({ mode, init, newSession: newSession || null });
         }
         if (!newSession) {
+            console.warn("XR Session request was rejected");
             return null;
         }
         return this.setSession(mode, newSession, init, context);

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

@@ -23,7 +23,8 @@
         :host {
             position: absolute;
             display: flex;
-            z-index: 100;
+            /** increase z-index (nipplejs has 999 as default) */
+            z-index: 5000;
             bottom: 100px;
             left: 50%;
             transform: translateX(-50%);

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

@@ -26,10 +26,22 @@
     @serializable()
     rotationStep = 60;
-    /** Enable to only oallow teleporting on objects with a teleport target component */
+    /** When enabled you can teleport using the right XR controller's thumbstick by pressing forward */
     @serializable()
+    useTeleport: boolean = true;
+    /** Enable to only allow teleporting on objects with a teleport target component */
+    @serializable()
     useTeleportTarget = false;
+    /** enable to visualize controller rays in the 3D scene */
+    @serializable()
+    showRays: boolean = true;
+    /** enable to visualize pointer targets in the 3D scene */
+    @serializable()
+    showHits: boolean = true;
     readonly isXRMovementHandler: true = true;
     readonly xrSessionMode = "immersive-vr";
@@ -43,8 +55,10 @@
         // in AR pass through mode we dont want to move the rig
         if (args.xr.isPassThrough) {
-            this.renderRays(args.xr);
-            this.renderHits(args.xr);
+            if (this.showRays)
+                this.renderRays(args.xr);
+            if (this.showHits)
+                this.renderHits(args.xr);
             return;
         }
@@ -55,11 +69,14 @@
             this.onHandleMovement(movementController, rig.gameObject);
         if (teleportController) {
             this.onHandleRotation(teleportController, rig.gameObject);
-            this.onHandleTeleport(teleportController, rig.gameObject);
+            if (this.useTeleport)
+                this.onHandleTeleport(teleportController, rig.gameObject);
         }
-        this.renderRays(args.xr);
-        this.renderHits(args.xr);
+        if (this.showRays)
+            this.renderRays(args.xr);
+        if (this.showHits)
+            this.renderHits(args.xr);
     }
     onLeaveXR(_: NeedleXREventArgs): void {
         for (const line of this._lines) {
@@ -149,7 +166,7 @@
             const ctrl = session.controllers[i];
             let line = this._lines[i];
             if (!line) {
-                line = createGradientLine();
+                line = this.createRayLineObject();
                 line.scale.z = .5;
                 this._lines[i] = line;
             }
@@ -180,7 +197,7 @@
                 let disc = this._hitDiscs[i];
                 if (!disc) {
-                    disc = createHitDisc();
+                    disc = this.createHitPointObject();
                     this._hitDiscs[i] = disc;
                 }
                 disc.visible = true;
@@ -211,72 +228,75 @@
             }
         }
     }
-}
+    /** create an object to visualize hit points in the scene */
+    protected createHitPointObject(): Object3D {
+        var container = new Object3D();
+        const disc = new Mesh(
+            new RingGeometry(.3, 0.5, 32).rotateX(- Math.PI / 2),
+            new MeshBasicMaterial({
+                color: 0xeeeeee,
+                opacity: .7,
+                transparent: true,
+                side: DoubleSide,
+            })
+        );
+        disc.layers.disableAll();
+        disc.layers.enable(2);
+        container.add(disc);
-const up = new Vector3(0, 1, 0);
-function createHitDisc(): Object3D {
-    var container = new Object3D();
-    const disc = new Mesh(
-        new RingGeometry(.3, 0.5, 32).rotateX(- Math.PI / 2),
-        new MeshBasicMaterial({
-            color: 0xeeeeee,
-            opacity: .7,
-            transparent: true,
-            side: DoubleSide,
-        })
-    );
-    disc.layers.disableAll();
-    disc.layers.enable(2);
-    container.add(disc);
+        const disc2 = new Mesh(
+            new RingGeometry(.43, 0.5, 32).rotateX(- Math.PI / 2),
+            new MeshBasicMaterial({
+                color: 0x000000,
+                opacity: .2,
+                transparent: true,
+                side: DoubleSide,
+            })
+        );
+        disc2.layers.disableAll();
+        disc2.layers.enable(2);
+        disc2.position.z -= .01;
+        container.add(disc2);
+        return container;
+    }
-    const disc2 = new Mesh(
-        new RingGeometry(.43, 0.5, 32).rotateX(- Math.PI / 2),
-        new MeshBasicMaterial({
-            color: 0x000000,
-            opacity: .2,
-            transparent: true,
-            side: DoubleSide,
-        })
-    );
-    disc2.layers.disableAll();
-    disc2.layers.enable(2);
-    disc2.position.z -= .01;
-    container.add(disc2);
+    /** create an object to visualize controller rays */
+    protected createRayLineObject() {
+        const line = new Line2();
+        line.layers.disableAll();
+        line.layers.enable(2);
-    return container;
-}
+        const geometry = new LineGeometry();
+        line.geometry = geometry;
-function createGradientLine() {
-    const line = new Line2();
-    line.layers.disableAll();
-    line.layers.enable(2);
+        const positions = new Float32Array(9);
+        positions.set([0, 0, .02, 0, 0, .4, 0, 0, 1]);
+        geometry.setPositions(positions)
-    const geometry = new LineGeometry();
-    line.geometry = geometry;
+        const colors = new Float32Array(9);
+        colors.set([1, 1, 1, .1, .1, .1, 0, 0, 0]);
+        geometry.setColors(colors);
-    const positions = new Float32Array(9);
-    positions.set([0, 0, .02, 0, 0, .4, 0, 0, 1]);
-    geometry.setPositions(positions)
+        const mat = new LineMaterial({
+            color: 0xffffff,
+            vertexColors: true,
+            worldUnits: true,
+            linewidth: .004,
-    const colors = new Float32Array(9);
-    colors.set([1, 1, 1, .1, .1, .1, 0, 0, 0]);
-    geometry.setColors(colors);
+            transparent: true,
+            // TODO: this doesnt work with passthrough
+            blending: AdditiveBlending,
+            dashed: false,
+            alphaToCoverage: true,
-    const mat = new LineMaterial({
-        color: 0xffffff,
-        vertexColors: true,
-        worldUnits: true,
-        linewidth: .004,
+        });
+        line.material = mat;
-        transparent: true,
-        // TODO: this doesnt work with passthrough
-        blending: AdditiveBlending,
-        dashed: false,
-        alphaToCoverage: true,
+        return line;
+    }
+}
-    });
-    line.material = mat;
-    return line;
-}
+const up = new Vector3(0, 1, 0);