Needle Engine 3.32.9-alpha

Files changed (11) hide show

src/engine-components/ui/BaseUIComponent.ts +22 -21
src/engine-components/Component.ts +16 -11
src/engine-components/codegen/components.ts +0 -1
src/engine/engine_input.ts +112 -25
src/engine/engine_physics.ts +5 -3
src/engine-components/ui/EventSystem.ts +50 -49
src/engine/xr/NeedleXRController.ts +12 -8
src/engine/xr/NeedleXRSession.ts +26 -11
src/engine-components/ui/PointerEvents.ts +34 -10
src/engine/codegen/register_types.ts +0 -2
src/engine-components/webxr/controllers/XRControllerMovement.ts +17 -5

src/engine-components/ui/BaseUIComponent.ts CHANGED Viewed

@@ -25,22 +25,38 @@
 export const $shadowDomOwner = Symbol("shadowDomOwner");
+/** Derive from this class if you want to implement your own UI components
+ * It provides utility methods and simplifies managing the underlying three-mesh-ui hierarchy
+*/
 export class BaseUIComponent extends Behaviour {
+    /** Is this object on the root of the UI hierarchy ? */
     isRoot() { return this.Root?.gameObject === this.gameObject; }
+    /** Access the parent canvas component */
     get canvas() {
         const cv = this.Root as any as ICanvas;
         if (cv?.isCanvas) return cv;
         return null;
     }
+    /** @deprecated use `canvas` */
+    protected get Canvas() {
+        return this.canvas;
+    }
+    /** Mark the UI dirty which will trigger an THREE-Mesh-UI update */
     markDirty() {
         EventSystem.markUIDirty(this.context);
     }
-    shadowComponent: Object3D | null = null;
+    /** the underlying three-mesh-ui */
+    get shadowComponent() { return this._shadowComponent }
+    private set shadowComponent(val: Object3D | null) {
+        this._shadowComponent = val;
+    }
+    private _shadowComponent: Object3D | null = null;
     private _controlsChildLayout = true;
     get controlsChildLayout(): boolean { return this._controlsChildLayout; }
     set controlsChildLayout(val: boolean) {
@@ -59,11 +75,6 @@
         return this._root;
     }
-    // TODO: rename to canvas
-    protected get Canvas() {
-        return this.canvas;
-    }
     // private _intermediate?: Object3D;
     protected _parentComponent?: BaseUIComponent | null = undefined;
@@ -78,7 +89,10 @@
         super.onEnable();
     }
-    //@ts-ignore
+    /** Add a three-mesh-ui object to the UI hierarchy
+     * @param container the three-mesh-ui object to add
+     * @param parent the parent component to add the object to
+    */
     protected addShadowComponent(container: any, parent?: BaseUIComponent) {
         this.removeShadowComponent();
@@ -135,20 +149,6 @@
         if(debug) console.log(this.shadowComponent)
     }
-    set(_state: object) {
-        // if (!this.shadowComponent) return;
-        // this.traverseOwnedShadowComponents(this.shadowComponent, this, o => {
-        //     for (const ch of o.children) {
-        //         console.log(this, ch);
-        //         if (ch.isUI && typeof ch.set === "function") {
-        //             // ch.set(state);
-        //             // ch.update(true, true, true);
-        //         }
-        //     }
-        // })
-    }
     protected setShadowComponentOwner(current: ThreeMeshUI.MeshUIBaseElement | Object3D | null | undefined) {
         if (!current) return;
         // TODO: only traverse our own hierarchy, we can stop if we find another owner
@@ -172,6 +172,7 @@
         }
     }
+    /** Remove the underlying UI object from the hierarchy */
     protected removeShadowComponent() {
         if (this.shadowComponent) {
             this.shadowComponent.removeFromParent();

src/engine-components/Component.ts CHANGED Viewed

@@ -1,18 +1,18 @@
 import { Euler, Object3D, Quaternion, Scene, Vector3 } from "three";
-import { isDevEnvironment,showBalloonWarning } from "../engine/debug/index.js";
+import { isDevEnvironment } from "../engine/debug/index.js";
 import { addNewComponent, destroyComponentInstance, findObjectOfType, findObjectsOfType, getComponent, getComponentInChildren, getComponentInParent, getComponents, getComponentsInChildren, getComponentsInParent, getOrAddComponent, moveComponentInstance, removeComponent } from "../engine/engine_components.js";
 import { activeInHierarchyFieldName } from "../engine/engine_constants.js";
-import { destroy, findByGuid, foreachComponent, HideFlags, IInstantiateOptions,instantiate, InstantiateOptions, isActiveInHierarchy, isActiveSelf, isDestroyed, isUsingInstancing, markAsInstancedRendered, setActive } from "../engine/engine_gameobject.js";
+import { destroy, findByGuid, foreachComponent, HideFlags, IInstantiateOptions, instantiate, isActiveInHierarchy, isActiveSelf, isDestroyed, isUsingInstancing, markAsInstancedRendered, setActive } from "../engine/engine_gameobject.js";
 import * as main from "../engine/engine_mainloop_utils.js";
-import { Mathf } from "../engine/engine_math.js";
 import { syncDestroy, syncInstantiate } from "../engine/engine_networking_instantiate.js";
 import { Context, FrameEvent } from "../engine/engine_setup.js";
 import * as threeutils from "../engine/engine_three_utils.js";
-import type { Collision, Constructor, ConstructorConcrete, GuidsMap, ICollider,IComponent, IGameObject, SourceIdentifier } from "../engine/engine_types.js";
-import { ControllerChangedEvt, INeedleXRSessionEventReceiver, NeedleXRControllerEventArgs, NeedleXREventArgs, NeedleXRSession } from "../engine/engine_xr.js";
+import type { Collision, Constructor, ConstructorConcrete, GuidsMap, ICollider, IComponent, IGameObject, SourceIdentifier } from "../engine/engine_types.js";
+import { INeedleXRSessionEventReceiver, NeedleXRControllerEventArgs, NeedleXREventArgs } from "../engine/engine_xr.js";
 import { IPointerEventHandler, PointerEventData } from "./ui/PointerEvents.js";
 // export interface ISerializationCallbackReceiver {
 //     onBeforeSerialize?(): object | void;
 //     onAfterSerialize?();
@@ -125,7 +125,7 @@
                 main.addScriptToArrays(comp, context!);
                 if (comp.__internalDidAwakeAndStart) return;
                 if (context!.new_script_start.includes(comp) === false) {
-                    context!.new_script_start.push(comp as Behaviour);
+                    context!.new_script_start.push(comp as Component);
                 }
             }, true);
         }
@@ -256,7 +256,7 @@
         return getComponentsInParent(go, typeName, arr);
     }
-    public static getAllComponents(go: IGameObject | Object3D): Behaviour[] {
+    public static getAllComponents(go: IGameObject | Object3D): Component[] {
         const componentsList = go.userData?.components;
         const newList = [...componentsList];
         return newList;
@@ -307,6 +307,12 @@
+/** Needle Engine component base class. Derive from this component to implement your own using the provided lifecycle methods. Components can be added to threejs objects using `GameObject.addComponent`.
+ *
+ * The most common lifecycle methods are `awake`, `start`, `onEanble`, `onDisable` `update` and `onDestroy`.
+ * XR specific callbacks include `onEnterXR`, `onLeaveXR`, `onUpdateXR`, `onControllerAdded` and `onControllerRemoved`.
+ * To receive pointer events implement `onPointerDown`, `onPointerUp`, `onPointerEnter`, `onPointerExit` and `onPointerMove`.
+ */
 export abstract class Component implements IComponent, EventTarget,
     Partial<INeedleXRSessionEventReceiver>,
     Partial<IPointerEventHandler>
@@ -748,7 +754,6 @@
     }
 }
-export class Behaviour extends Component {
-}
+// For legacy reasons we need to export this as well
+// (and we don't use extend to inherit the component docs)
+export { Component as Behaviour };

src/engine-components/codegen/components.ts CHANGED Viewed

@@ -31,7 +31,6 @@
 export { BasicIKConstraint } from "../BasicIKConstraint.js";
 export { BehaviorExtension } from "../export/usdz/extensions/behavior/Behaviour.js";
 export { BehaviorModel } from "../export/usdz/extensions/behavior/BehavioursBuilder.js";
-export { Behaviour } from "../Component.js";
 export { Bloom } from "../postprocessing/Effects/Bloom.js";
 export { BoxCollider } from "../Collider.js";
 export { BoxGizmo } from "../Gizmos.js";

src/engine/engine_input.ts CHANGED Viewed

@@ -35,6 +35,7 @@
     KeyUp = "keyup",
     KeyPressed = "keypress"
 }
+/** e.g. `pointerdown` */
 export type InputEventNames = EnumToPrimitiveUnion<InputEvents>;
@@ -43,6 +44,8 @@
 {
     origin: object;
     pointerId: number;
+    /** the index of the device */
+    deviceIndex: number;
     pointerType: PointerTypeNames;
     mode: XRTargetRayMode,
     ray?: Ray;
@@ -55,6 +58,19 @@
 export class NEPointerEvent extends PointerEvent {
+    /** Unique identifier for this input: a combination of the deviceIndex + button to uniquely identify the exact input (e.g. LeftController:Button0 = 0, RightController:Button1 = 101) */
+    override readonly pointerId!: number;
+    // this is set via the init arguments (we override it here for intellisense to show the string options)
+    override readonly pointerType!: PointerTypeNames;
+    // this is set via the init arguments (we override it here for intellisense to show the string options)
+    /** The input that raised this event like `pointerdown` */
+    override readonly type!: InputEventNames;
+    /** the device index: mouse and touch are always 0, otherwise e.g. index of the connected Gamepad or XRController */
+    readonly deviceIndex: number;
     /** The origin of the event contains a reference to the creator of this event.
      * This can be the Needle Engine input system or e.g. a XR controller
      */
@@ -77,11 +93,10 @@
     /** true if this event is a double click */
     isDoubleClick: boolean = false;
-    // this is set via the init arguments (we override it here for intellisense to show the string options)
-    override readonly pointerType!: PointerTypeNames;
     constructor(type: InputEvents | InputEventNames, source: Event | null, init: NEPointerEventInit) {
         super(type, init)
+        this.deviceIndex = init.deviceIndex;
         this.origin = init.origin;
         this.source = source;
         this.mode = init.mode;
@@ -359,6 +374,38 @@
     /** This is added/updated for pointers. screenspace pointers set this to the camera near plane  */
     private _pointerSpace: IGameObject[] = [];
+    private readonly _pressedStack = new Map<number, number[]>();
+    private onDownButton(pointerId: number, button: number) {
+        let stack = this._pressedStack.get(pointerId);
+        if (!stack) {
+            stack = [];
+            this._pressedStack.set(pointerId, stack);
+        }
+        stack.push(button);
+    }
+    private onReleaseButton(pointerId: number, button: number) {
+        const stack = this._pressedStack.get(pointerId);
+        if (!stack) return;
+        const index = stack.indexOf(button);
+        if (index >= 0) stack.splice(index, 1);
+    }
+    /** the first button that was down and is currently pressed */
+    getFirstPressedButtonForPointer(pointerId: number): number | undefined {
+        const stack = this._pressedStack.get(pointerId);
+        if (!stack) return undefined;
+        return stack[0];
+    }
+    /** the last (most recent) button that was down and is currently pressed */
+    getLatestPressedButtonForPointer(pointerId: number): number | undefined {
+        const stack = this._pressedStack.get(pointerId);
+        if (!stack) return undefined;
+        return stack[stack.length - 1];
+    }
     getKeyDown(): string | null {
         for (const key in this.keysPressed) {
             const k = this.keysPressed[key];
@@ -433,6 +480,7 @@
         switch (args.type) {
             case InputEvents.PointerDown:
                 if (debug) showBalloonMessage("Create Pointer down");
+                this.onDownButton(args.deviceIndex, args.button);
                 this.onDown(args);
                 break;
             case InputEvents.PointerMove:
@@ -442,6 +490,7 @@
             case InputEvents.PointerUp:
                 if (debug) showBalloonMessage("Create Pointer up");
                 this.onUp(args);
+                this.onReleaseButton(args.deviceIndex, args.button);
                 break;
         }
     }
@@ -466,11 +515,13 @@
         // e.g. if we have slotted HTML elements in the needle engine DOM elements we don't want to receive input events for those
         this._htmlEventSource = this.context.renderer.domElement;
+        window.addEventListener('contextmenu', this.onContextMenu);
         this._htmlEventSource.addEventListener('touchstart', this.onTouchStart, false);
         window.addEventListener('touchstart', this.onTouchStartWindow);
         window.addEventListener('touchmove', this.onTouchMove, { passive: true });
         window.addEventListener('touchend', this.onTouchUp, false);
+        window.addEventListener("touchcancel", this.onTouchCancel, false);
         this._htmlEventSource.addEventListener('mousedown', this.onMouseDown);
         window.addEventListener('mousemove', this.onMouseMove, false);
@@ -486,10 +537,13 @@
     }
     unbindEvents() {
+        window.removeEventListener('contextmenu', this.onContextMenu);
         this._htmlEventSource?.removeEventListener('touchstart', this.onTouchStart, false);
         window.removeEventListener('touchstart', this.onTouchStartWindow);
         window.removeEventListener('touchmove', this.onTouchMove, false);
         window.removeEventListener('touchend', this.onTouchUp, false);
+        window.removeEventListener("touchcancel", this.onTouchCancel, false);
         this._htmlEventSource?.removeEventListener('mousedown', this.onMouseDown, false);
         window.removeEventListener('mousemove', this.onMouseMove, false);
@@ -548,6 +602,26 @@
         return false;
     }
+    private onContextMenu = (evt: Event) => {
+        if (this.canReceiveInput(evt) === false)
+            return;
+        if (evt instanceof PointerEvent) {
+            // for longpress on touch there might open a context menu
+            // in which case we set the pointer pressed back to false (resetting the pressed pointer)
+            // we need to emit a pointer up event here as well
+            if (evt.pointerType === "touch") {
+                // for (const index in this._pointerPressed) {
+                //     if (this._pointerTypes[index] === PointerType.Touch) {
+                //         // this._pointerPressed[index] = false;
+                //         // this throws orbit controls?
+                //         // const ne = this.createPointerEventFromTouch("pointerup", parseInt(index), this._pointerPositions[index].x, this._pointerPositions[index].y, 0, evt);
+                //         // this.onUp(ne);
+                //     }
+                // }
+            }
+        }
+    }
     private keysPressed: { [key: KeyCode | string]: { pressed: boolean, frame: number, startFrame: number, key: string, code: KeyCode | string } } = {};
     private onKeyDown = (evt: KeyboardEvent) => {
@@ -604,7 +678,7 @@
             const id = this.getPointerIndex(touch.identifier)
             if (debug) showBalloonMessage(`touch start #${id}, identifier:${touch.identifier}`);
             const space = this.getAndUpdateSpatialObjectForScreenPosition(id, touch.clientX, touch.clientY);
-            const ne = new NEPointerEvent(InputEvents.PointerDown, evt, { origin: this, mode: "screen", pointerId: id, button: 0, clientX: touch.clientX, clientY: touch.clientY, pointerType: PointerType.Touch, buttonName: "unknown", device: space });
+            const ne = new NEPointerEvent(InputEvents.PointerDown, evt, { origin: this, mode: "screen", deviceIndex: 0, pointerId: id, button: 0, clientX: touch.clientX, clientY: touch.clientY, pointerType: PointerType.Touch, buttonName: "unknown", device: space, pressure: touch.force });
             this.onDown(ne);
         }
     }
@@ -613,9 +687,9 @@
         if (evt.changedTouches.length <= 0) return;
         for (let i = 0; i < evt.changedTouches.length; i++) {
             const touch = evt.changedTouches[i];
-            const id = this.getPointerIndex(touch.identifier)
+            const id = this.getPointerIndex(touch.identifier);
             const space = this.getAndUpdateSpatialObjectForScreenPosition(id, touch.clientX, touch.clientY);
-            const ne = new NEPointerEvent(InputEvents.PointerMove, evt, { origin: this, mode: "screen", pointerId: id, button: 0, clientX: touch.clientX, clientY: touch.clientY, pointerType: PointerType.Touch, buttonName: "unknown", device: space });
+            const ne = new NEPointerEvent(InputEvents.PointerMove, evt, { origin: this, mode: "screen", deviceIndex: 0, pointerId: id, button: 0, clientX: touch.clientX, clientY: touch.clientY, pointerType: PointerType.Touch, buttonName: "unknown", device: space, pressure: touch.force });
             this.onMove(ne);
         }
     }
@@ -625,55 +699,69 @@
         for (let i = 0; i < evt.changedTouches.length; i++) {
             const touch = evt.changedTouches[i];
             const id = this.getPointerIndex(touch.identifier);
             if (!this.isNewEvent(evt.timeStamp, id, this._pointerUpTimestamp)) continue;
-            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, { origin: this, mode: "screen", pointerId: id, button: 0, clientX: touch.clientX, clientY: touch.clientY, pointerType: PointerType.Touch, buttonName: "unknown", device: space });
+            const ne = this.createPointerEventFromTouch("pointerup", touch.identifier, touch.clientX, touch.clientY, touch.force, evt);
             this.onUp(ne);
         }
     }
+    private createPointerEventFromTouch(type: InputEventNames, touchIdentifier: number, x: number, y: number, force: number, evt: Event): NEPointerEvent {
+        const id = this.getPointerIndex(touchIdentifier);
+        if (debug) showBalloonMessage(`touch up #${id}, identifier:${touchIdentifier}`);
+        const space = this.getAndUpdateSpatialObjectForScreenPosition(id, x, y);
+        const ne = new NEPointerEvent(type, evt, { origin: this, mode: "screen", deviceIndex: 0, pointerId: id, button: 0, clientX: x, clientY: y, pointerType: PointerType.Touch, buttonName: "unknown", device: space, pressure: force });
+        return ne;
+    }
+    private onTouchCancel = (_evt: Event) => {
+    };
     private onMouseDown = (evt: MouseEvent) => {
+        this.onDownButton(0, evt.button);
         if (this.context.isInVR) return;
         if (evt.defaultPrevented) return;
         if (this.canReceiveInput(evt) === false) return;
         // TODO: if we have multiple mouse devices we need to get the deviceId
-        const id = evt.button;
+        const button = evt.button;
         let buttonName: MouseButtonName | "none" = "none";
-        switch (id) {
+        switch (button) {
             case 0: buttonName = "left"; break;
             case 1: buttonName = "middle"; break;
             case 2: buttonName = "right"; break;
         }
-        const space = this.getAndUpdateSpatialObjectForScreenPosition(id, evt.clientX, evt.clientY);
-        const ne = new NEPointerEvent(InputEvents.PointerDown, evt, { origin: this, mode: "screen", pointerId: 0, button: id, clientX: evt.clientX, clientY: evt.clientY, pointerType: PointerType.Mouse, buttonName: buttonName, device: space });
+        const pointerId = 0 + button;
+        const space = this.getAndUpdateSpatialObjectForScreenPosition(pointerId, evt.clientX, evt.clientY);
+        const ne = new NEPointerEvent(InputEvents.PointerDown, evt, { origin: this, mode: "screen", deviceIndex: 0, pointerId, button: button, clientX: evt.clientX, clientY: evt.clientY, pointerType: PointerType.Mouse, buttonName: buttonName, device: space, pressure: 1 });
         this.onDown(ne);
     }
     private onMouseMove = (evt: MouseEvent) => {
         if (this.context.isInVR) return;
         if (evt.defaultPrevented) return;
-        const id = evt.button;
-        const space = this.getAndUpdateSpatialObjectForScreenPosition(id, evt.clientX, evt.clientY);
-        const ne = new NEPointerEvent(InputEvents.PointerMove, evt, { origin: this, mode: "screen", pointerId: 0, button: id, clientX: evt.clientX, clientY: evt.clientY, pointerType: PointerType.Mouse, buttonName: "none", device: space });
+        // take the last pressed button (or should the first pressed button have priority?)
+        const pressedButton = this.getFirstPressedButtonForPointer(0);
+        const button = pressedButton ?? 0;
+        const pointerId = 0 + button;
+        const space = this.getAndUpdateSpatialObjectForScreenPosition(pointerId, evt.clientX, evt.clientY);
+        const pressure = pressedButton !== undefined ? 1 : 0;
+        const ne = new NEPointerEvent(InputEvents.PointerMove, evt, { origin: this, mode: "screen", deviceIndex: 0, pointerId, button: button, clientX: evt.clientX, clientY: evt.clientY, pointerType: PointerType.Mouse, buttonName: "none", device: space, pressure });
         this.onMove(ne);
     }
     private onMouseUp = (evt: MouseEvent) => {
+        this.onReleaseButton(0, evt.button);
         if (this.context.isInVR) return;
-        if (evt.defaultPrevented) return;
-        const id = evt.button;
-        if (!this.isNewEvent(evt.timeStamp, id, this._pointerUpTimestamp)) return;
+        const button = evt.button;
+        if (!this.isNewEvent(evt.timeStamp, button, this._pointerUpTimestamp)) return;
         let buttonName: MouseButtonName | "none" = "none";
-        switch (id) {
+        switch (button) {
             case 0: buttonName = "left"; break;
             case 1: buttonName = "middle"; break;
             case 2: buttonName = "right"; break;
         }
-        const space = this.getAndUpdateSpatialObjectForScreenPosition(id, evt.clientX, evt.clientY);
-        const ne = new NEPointerEvent(InputEvents.PointerUp, evt, { origin: this, mode: "screen", pointerId: 0, button: id, clientX: evt.clientX, clientY: evt.clientY, pointerType: PointerType.Mouse, buttonName: buttonName, device: space, });
+        const pointerId = 0 + button;
+        if (evt.defaultPrevented) return;
+        const space = this.getAndUpdateSpatialObjectForScreenPosition(pointerId, evt.clientX, evt.clientY);
+        const ne = new NEPointerEvent(InputEvents.PointerUp, evt, { origin: this, mode: "screen", deviceIndex: 0, pointerId, button: button, clientX: evt.clientX, clientY: evt.clientY, pointerType: PointerType.Mouse, buttonName: buttonName, device: space, pressure: 0 });
         this.onUp(ne);
     }
@@ -723,8 +811,7 @@
     private onDown(evt: NEPointerEvent) {
         const index = evt.pointerId;
         if (this.getPointerPressed(index)) {
-            console.error("ERROR: pointerId is already pressed", index);
-            return;
+            console.warn(`pointerId is already pressed: ${index}`, debug ? evt : '');
         }
         if (debug) console.log(evt.pointerType, "DOWN", index);
         if (!this.isInRect(evt)) return;

src/engine/engine_physics.ts CHANGED Viewed

@@ -191,7 +191,7 @@
         }
     }
-    public raycastFromRay(ray: Ray, options: IRaycastOptions | RaycastOptions | null = null): Array<Intersection> {
+    public raycastFromRay(ray: Ray, options: IRaycastOptions | null = null): Array<Intersection> {
         const opts = options ?? this.defaultRaycastOptions;
         opts.ray = ray;
         const res = this.raycast(opts);
@@ -206,7 +206,7 @@
      * Use raycastPhysics for raycasting against physic colliders only. Depending on your scenario this might be faster.
      * @param options raycast options. If null, default options will be used.
      */
-    public raycast(options: IRaycastOptions | RaycastOptions | null = null): Array<Intersection> {
+    public raycast(options: IRaycastOptions | null = null): Array<Intersection> {
         if (!options) options = this.defaultRaycastOptions;
         const mp = options.screenPoint ?? this.context.input.mousePositionRC;
         const rc = options.raycaster ?? this.raycaster;
@@ -274,8 +274,10 @@
     private intersect(raycaster: Raycaster, objects: Object3D[], results: Intersection[], options: IRaycastOptions) {
         for (const obj of objects) {
+            // dont raycast invisible objects
+            if (obj.visible === false) continue;
             if (Gizmos.isGizmo(obj)) continue;
             // dont raycast object if it's a line and the line threshold is < 0
             if (options.lineThreshold !== undefined && options.lineThreshold < 0) {
                 if (obj instanceof Line) {

src/engine-components/ui/EventSystem.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Intersection, Object3D } from "three";
 import { isDevEnvironment, showBalloonMessage } from "../../engine/debug/index.js";
-import { InputEvents, NEPointerEvent, PointerType } from "../../engine/engine_input.js";
+import { Input, InputEventNames, InputEvents, NEPointerEvent, PointerType } from "../../engine/engine_input.js";
 import { Mathf } from "../../engine/engine_math.js";
 import { RaycastOptions, RaycastTestObjectReturnType } from "../../engine/engine_physics.js";
 import { Context } from "../../engine/engine_setup.js";
@@ -10,7 +10,7 @@
 import { Behaviour, GameObject } from "../Component.js";
 import { $shadowDomOwner } from "./BaseUIComponent.js";
 import type { ICanvasGroup } from "./Interfaces.js";
-import { hasPointerEventComponent, type IPointerEventHandler, IPointerUpHandler,PointerEventData } from "./PointerEvents.js";
+import { hasPointerEventComponent, type IPointerEventHandler, IPointerUpHandler, PointerEventData } from "./PointerEvents.js";
 import { ObjectRaycaster, Raycaster } from "./Raycaster.js";
 import { UIRaycastUtils } from "./RaycastUtils.js";
 import { isUIObject } from "./Utils.js";
@@ -92,10 +92,9 @@
             const res = GameObject.findObjectOfType(Raycaster, this.context);
             if (!res) {
                 const rc = GameObject.addNewComponent(this.context.scene, ObjectRaycaster);
-                rc.ignoreSkinnedMeshes = true;
                 this.raycaster.push(rc);
                 if (isDevEnvironment() || debug)
-                    console.warn("Added an ObjectRaycaster to the scene because no raycaster was found. Skinnedmeshes will be ignored for better performance");
+                    console.warn("Added an ObjectRaycaster to the scene because no raycaster was found.");
             }
         }
     }
@@ -153,17 +152,22 @@
         if (pointerEvent.propagationStopped) return;
         // Use the pointerID, this is the touch id or the mouse (always 0, could be index of the mouse DEVICE) or the index of the XRInputSource
-        const id = pointerEvent.pointerId * 100 + pointerEvent.button;
-        const data = new PointerEventData(id, this.context.input, pointerEvent);
+        const data = new PointerEventData(this.context.input, pointerEvent);
+        this._currentPointerEventName = pointerEvent.type;
         data.inputSource = this.context.input;
-        data.isClicked = pointerEvent.isClick;
+        data.isClick = pointerEvent.isClick;
+        data.isDoubleClick = pointerEvent.isDoubleClick;
         // using the input type directly instead of input API -> otherwise onMove events can sometimes be getPointerUp() == true
         data.isDown = pointerEvent.type == InputEvents.PointerDown;
         data.isUp = pointerEvent.type == InputEvents.PointerUp;
         data.isPressed = this.context.input.getPointerPressed(pointerEvent.pointerId);
-        if (debug && data.isClicked) console.log("CLICK", data.pointerId);
+        if (debug) {
+            if (data.isDown) console.log("DOWN", data.pointerId);
+            else if (data.isUp) console.log("UP", data.pointerId);
+            if (data.isClick) console.log("CLICK", data.pointerId);
+        }
         // raycast
         const options = new RaycastOptions();
@@ -171,13 +175,13 @@
             options.ray = pointerEvent.ray;
         }
         else {
-            options.screenPoint = this.context.input.getPointerPositionRC(id)!;
+            options.screenPoint = this.context.input.getPointerPositionRC(pointerEvent.pointerId)!;
         }
         const hits = this.performRaycast(options);
-        if (debug && data.isClicked) {
+        if (debug && data.isClick) {
             showBalloonMessage("EventSystem: " + data.pointerId + " - " + this.context.time.frame + " - Up:" + data.isUp + ", Down:" + data.isDown)
         }
@@ -190,7 +194,7 @@
         this.dispatchEvent(new CustomEvent(EventSystemEvents.BeforeHandleInput, { detail: evt }));
         // then handle the intersections and call the callbacks on the regular objects
-        this.handleIntersections(id, hits, data);
+        this.handleIntersections(hits, data);
         this.dispatchEvent(new CustomEvent<AfterHandleInputEvent>(EventSystemEvents.AfterHandleInput, { detail: evt }));
     }
@@ -203,6 +207,7 @@
     private readonly _testObjectsCache = new Map<Object3D, boolean>();
     /** that's the raycaster that is CURRENTLY being used for raycasting (the shouldRaycastObject method uses this) */
     private _currentlyActiveRaycaster: Raycaster | null = null;
+    private _currentPointerEventName: InputEventNames | null = null;
     /**
      * Checks if an object that we encounter has an event component and if it does, we add it to our objects cache
@@ -239,8 +244,8 @@
             // if (rc?.activeAndEnabled && rc !== this._currentlyActiveRaycaster) return false;
             // the object was not yet seen so we test if it has an event component
-            let hasEventComponent = hasPointerEventComponent(obj);
-            if (!hasEventComponent && uiOwner) hasEventComponent = hasPointerEventComponent(uiOwner);
+            let hasEventComponent = hasPointerEventComponent(obj, this._currentPointerEventName);
+            if (!hasEventComponent && uiOwner) hasEventComponent = hasPointerEventComponent(uiOwner, this._currentPointerEventName);
             if (hasEventComponent) {
                 // it has an event component: we add it and all its children to the cache
@@ -311,13 +316,8 @@
         }
     }
-    private handleIntersections(id: number, hits: Intersection[] | null | undefined, args: PointerEventData): boolean {
+    private handleIntersections(hits: Intersection[] | null | undefined, args: PointerEventData): boolean {
-        // first invoke captured pointers
-        this.assignHitInformation(args, hits?.[0]);
-        this.invokePointerCapture(args);
         if (hits?.length) {
             hits = this.sortCandidates(hits);
             for (const hit of hits) {
@@ -331,20 +331,23 @@
             }
         }
+        // first invoke captured pointers
+        this.assignHitInformation(args, hits?.[0]);
+        this.invokePointerCapture(args);
         // pointer has not hit any object to handle
         // thus is not hovering over anything
-        const hoveredData = this.hoveredByID.get(id);
+        const hoveredData = this.hoveredByID.get(args.pointerId);
         if (hoveredData) {
             this.triggerOnExit(hoveredData.obj, hoveredData.data, null);
         }
-        this.hoveredByID.delete(id);
+        this.hoveredByID.delete(args.pointerId);
         // if it was up, it means it doesn't should notify things that it down on before
         if (args.isUp) {
-            const pressedData = this.pressedByID.get(id);
-            pressedData?.handlers.forEach(h => this.invokeOnPointerUp(args, h));
-            this.pressedByID.delete(id);
+            this.pressedByID.get(args.pointerId)?.handlers.forEach(h => this.invokeOnPointerUp(args, h));
+            this.pressedByID.delete(args.pointerId);
         }
         return false;
@@ -385,7 +388,7 @@
     private handleEventOnObject(object: THREE.Object3D, args: PointerEventData): boolean {
         // ensures that invisible objects are ignored
         if (!this.testIsVisible(object)) {
-            if (args.isClicked && debug)
+            if (args.isClick && debug)
                 console.log("not allowed", object);
             return false;
         }
@@ -401,13 +404,13 @@
         const parent = object.parent as any;
         let isShadow = false;
-        const clicked = args.isClicked ?? false;
+        const clicked = args.isClick ?? false;
         let canvasGroup: ICanvasGroup | null = null;
         // handle potential shadow dom built from three mesh ui
         if (parent && parent.isUI) {
-            const pressedOrClicked = (args.isPressed || args.isClicked) ?? false;
+            const pressedOrClicked = (args.isPressed || args.isClick) ?? false;
             if (parent[$shadowDomOwner]) {
                 const actualGo = parent[$shadowDomOwner].gameObject;
                 if (actualGo) {
@@ -494,7 +497,6 @@
      * Propagate up in hiearchy and call handlers based on the pointer event data
      */
     private handleMainInteraction(object: Object3D, args: PointerEventData, prevHovering: Object3D | null) {
-        if (args.pointerId === undefined) return;
         const pressedEvent = this.pressedByID.get(args.pointerId);
         const hoveredObjectChanged = prevHovering !== object;
@@ -546,7 +548,7 @@
             if (comp.onPointerMove) {
                 if (isMoving)
                     comp.onPointerMove(args);
-                    this.handlePointerCapture(args, comp);
+                this.handlePointerCapture(args, comp);
             }
             if (args.isUp) {
@@ -559,16 +561,9 @@
                     // The original component that received the down event SHOULD also receive the up event
                     pressedEvent?.handlers.delete(comp);
                 }
-                // handle onExit on touchUp
-                // onExit on mouse is handled when we hover over something else / on nothing
-                if (comp.onPointerExit && args.event?.pointerType === PointerType.Touch) {
-                    comp.onPointerExit(args);
-                    this.hoveredByID.delete(args.pointerId!);
-                }
             }
-            if (args.isClicked) {
+            if (args.isClick) {
                 if (comp.onPointerClick) {
                     comp.onPointerClick(args);
                 }
@@ -611,48 +606,54 @@
     /** handles onPointerUp - this will also release the pointerCapture */
     private invokeOnPointerUp(evt: PointerEventData, handler: IPointerUpHandler) {
         handler.onPointerUp?.call(handler, evt);
-        this.releasePointerCapture(evt.pointerId, handler);
+        this.releasePointerCapture(evt, handler);
     }
     /** the list of component handlers that requested pointerCapture for a specific pointerId */
-    private readonly _capturedPointer: { [pointerId: number]: IPointerEventHandler[] } = {};
+    private readonly _capturedPointer: { [id: number]: IPointerEventHandler[] } = {};
     /** check if the event was marked to be captured: if yes add the current component to the captured list */
     private handlePointerCapture(evt: PointerEventData, comp: IPointerEventHandler) {
         if (evt.z__pointer_ctured) {
             evt.z__pointer_ctured = false;
+            const id = evt.pointerId;
             // only the onPointerMove event is called with captured pointers so we don't need to add it to our list if it doesnt implement onPointerMove
             if (comp.onPointerMove) {
-                const list = this._capturedPointer[evt.pointerId] || [];
+                const list = this._capturedPointer[id] || [];
                 list.push(comp);
-                this._capturedPointer[evt.pointerId] = list;
+                this._capturedPointer[id] = list;
             }
             else {
-                if (isDevEnvironment())
+                if (isDevEnvironment() && !comp["z__warned_no_pointermove"]) {
+                    comp["z__warned_no_pointermove"] = true;
                     console.warn("PointerCapture was requested but the component doesn't implement onPointerMove. It will not receive any pointer events");
+                }
             }
         }
         else if (evt.z__pointer_cture_rleased) {
             evt.z__pointer_cture_rleased = false;
-            this.releasePointerCapture(evt.pointerId, comp);
+            this.releasePointerCapture(evt, comp);
         }
     }
     /** removes the component from the pointer capture list */
-    releasePointerCapture(pointerId: number, component: IPointerEventHandler) {
-        if (this._capturedPointer[pointerId]) {
-            const i = this._capturedPointer[pointerId].indexOf(component);
+    releasePointerCapture(evt: PointerEventData, component: IPointerEventHandler) {
+        const id = evt.pointerId;
+        if (this._capturedPointer[id]) {
+            const i = this._capturedPointer[id].indexOf(component);
             if (i !== -1) {
-                this._capturedPointer[pointerId].splice(i, 1);
+                this._capturedPointer[id].splice(i, 1);
+                if (debug) console.log("released pointer capture", id, component, this._capturedPointer)
             }
         }
     }
     /** invoke the pointerMove event on all captured handlers */
     private invokePointerCapture(evt: PointerEventData) {
         if (evt.event.type === InputEvents.PointerMove) {
-            const pointerId = evt.pointerId;
-            const captured = this._capturedPointer[pointerId];
+            const id = evt.pointerId;
+            const captured = this._capturedPointer[id];
             if (captured) {
+                if (debug) console.log("Captured", id, captured)
                 for (let i = 0; i < captured.length; i++) {
                     const handler = captured[i];
                     // check if it was destroyed

src/engine/xr/NeedleXRController.ts CHANGED Viewed

@@ -1,9 +1,9 @@
-import { fetchProfile,MotionController } from "@webxr-input-profiles/motion-controllers";
+import { fetchProfile, MotionController } from "@webxr-input-profiles/motion-controllers";
 import { AxesHelper, Int8BufferAttribute, Object3D, Quaternion, Ray, Vector3 } from "three";
 import { Context } from "../engine_context.js";
 import { Gizmos } from "../engine_gizmos.js";
-import { InputEventNames,InputEvents, NEPointerEvent, NEPointerEventInit, PointerType } from "../engine_input.js";
+import { InputEventNames, InputEvents, NEPointerEvent, NEPointerEventInit, PointerType } from "../engine_input.js";
 import { getTempQuaternion, getTempVector, getWorldQuaternion } from "../engine_three_utils.js";
 import type { ButtonName, IGameObject, Vec3, XRControllerButtonName } from "../engine_types.js";
 import { getParam } from "../engine_utils.js";
@@ -207,6 +207,7 @@
         this.pointerInit = {
             origin: this,
             pointerType: this.hand ? "hand" : "controller",
+            deviceIndex: this.index,
             pointerId: -1, // < this will be updated in the emitPointerEvent method
             mode: this.inputSource.targetRayMode,
             ray: this._ray,
@@ -519,7 +520,7 @@
     // and start with index = 1
     private updateInputEvents() {
         if (!this._layout) return;
         // 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++) {
@@ -553,22 +554,25 @@
                 if (eventName != null && emitEvent) {
                     const name = this._layout?.gamepad[k];
-                    this.emitPointerEvent(eventName, k, name ?? "none", false);
+                    this.emitPointerEvent(eventName, k, name ?? "none", false, null, button.value);
                 }
             }
         }
     }
     private onUpdateMove() {
-        this.emitPointerEvent("pointermove", 0, "none", false);
+        let button = this.xr.context.input.getFirstPressedButtonForPointer(this.index);
+        if (button === undefined) button = 0;
+        const pressure = this.gamepad?.buttons[button]?.value;
+        this.emitPointerEvent("pointermove", button, "none", false, null, pressure);
     }
     /** cached spatial pointer init object. We re-use it to not have */
     private readonly pointerInit: NEPointerEventInit;
-    private emitPointerEvent(type: InputEventNames, 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, pressure?: number) {
         if (!this.emitEvents) {
-            if(debug && type !== InputEvents.PointerMove) console.warn("Pointer events are disabled for this controller", this.index, type, button);
+            if (debug && type !== InputEvents.PointerMove) console.warn("Pointer events are disabled for this controller", this.index, type, button);
             return;
         }
@@ -577,7 +581,6 @@
         // Not sure if *this* is enough to determine if the event is spatial or not
         if (this.xr.mode === "immersive-vr" || this.xr.isPassThrough) {
             this.pointerInit.origin = this;
-            // TODO: this needs to be just the index (pointerId)
             this.pointerInit.pointerId = this.index * 10 + button;
             this.pointerInit.pointerType = this.hand ? "hand" : "controller";
             this.pointerInit.button = button;
@@ -586,6 +589,7 @@
             this.pointerInit.mode = this.inputSource.targetRayMode;
             this.pointerInit.ray = this.ray;
             this.pointerInit.device = this.object;
+            this.pointerInit.pressure = pressure;
             const prevContext = Context.Current;
             Context.Current = this.xr.context;

src/engine/xr/NeedleXRSession.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Camera, DoubleSide,Mesh, MeshBasicMaterial, Object3D, PerspectiveCamera, PlaneGeometry, PlaneHelper, Quaternion, Vector3, WebXRArrayCamera } from "three";
+import { Camera, DoubleSide, Mesh, MeshBasicMaterial, Object3D, PerspectiveCamera, PlaneGeometry, PlaneHelper, Quaternion, Vector3, WebXRArrayCamera } from "three";
 import { isDevEnvironment, showBalloonMessage, showBalloonWarning } from "../debug/index.js";
 import { Context, FrameEvent } from "../engine_context.js";
@@ -10,13 +10,15 @@
 import { getTempQuaternion, getTempVector, getWorldPosition, getWorldQuaternion, getWorldScale, setWorldPosition, setWorldQuaternion, setWorldScale } from "../engine_three_utils.js";
 import { ICamera, IComponent, INeedleXRSession } from "../engine_types.js";
 import { delay, getParam, isDesktop, isQuest } from "../engine_utils.js";
-import { flipForwardMatrix, flipForwardQuaternion,ImplictXRRig } from "./internal.js";
+import { flipForwardMatrix, flipForwardQuaternion, ImplictXRRig } from "./internal.js";
 import { NeedleXRController } from "./NeedleXRController.js";
 import { NeedleXRSync } from "./NeedleXRSync.js";
 import { SceneTransition } from "./SceneTransition.js";
 import { TemporaryXRContext } from "./TempXRContext.js";
 import type { IXRRig } from "./XRRig.js";
+/** NeedleXRSession event argument.
+ * Use `args.xr` to access the NeedleXRSession */
 export type NeedleXREventArgs = { xr: NeedleXRSession }
 export type SessionChangedEvt = (args: NeedleXREventArgs) => void;
 export type SessionRequestedEvent = (args: { mode: XRSessionMode, init: XRSessionInit }) => void;
@@ -46,7 +48,9 @@
 /** Contains a reference to the currently active webxr session and the controller that has changed */
 export type NeedleXRControllerEventArgs = NeedleXREventArgs & { controller: NeedleXRController, change: "added" | "removed" }
-/** Event Arguments when a controller changed event is invoked (added or removed) */
+/** Event Arguments when a controller changed event is invoked (added or removed)
+ * Access the controller via `args.controller`, the `args.change` property indicates if the controller was added or removed
+*/
 export type ControllerChangedEvt = (args: NeedleXRControllerEventArgs) => void;
@@ -128,17 +132,28 @@
 }
 /**
- * This class manages an XRSession to provide helper methods and events
- * It provides easy access to the XRInputSources (controllers and hands)
- * If a XRSession is active you can use all XR-related event methods on your components to receive XR events
+ * This class manages an XRSession to provide helper methods and events. It provides easy access to the XRInputSources (controllers and hands)
  * - Start a XRSession with `NeedleXRSession.start(...)`
  * - Stop a XRSession with `NeedleXRSession.stop()`
- * - Access running XRSession with `NeedleXRSession.active`
- * - Listen to XRSession start events with `NeedleXRSession.onXRStart(...)`
- * - Listen to XRSession end events with `NeedleXRSession.onXREnd(...)`
- * - Listen to XRSession controller added events with `NeedleXRSession.onControllerAdded(...)`
- * - Listen to XRSession controller removed events with `NeedleXRSession.onControllerRemoved(...)`
+ * - Access a running XRSession with `NeedleXRSession.active`
  *
+ * If a XRSession is active you can use all XR-related event methods on your components to receive XR events e.g. `onEnterXR`, `onUpdateXR`, `onLeaveXR`
+ * ```ts
+ * export class MyComponent extends Behaviour {
+ *    // callback invoked whenever the XRSession is started or your component is added to a scene with an active XRSession
+ *    onEnterXR(args: NeedleXREventArgs) {
+ *       console.log("Entered XR");
+ *      // access the NeedleXRSession via args.xr
+ *    }
+ *    // callback invoked whenever a controller is added (or you switch from controller to hand tracking)
+ *    onControllerAdded(args: NeedleXRControllerEventArgs) {  }
+ * }
+ * ```
+ *
+ * ### XRRig
+ * The XRRig can be accessed via the `rig` property
+ * Set a custom XRRig via `NeedleXRSession.addRig(...)` or `NeedleXRSession.removeRig(...)`
+ * By default the active XRRig with the highest priority in the scene is used
  */
 export class NeedleXRSession implements INeedleXRSession {

src/engine-components/ui/PointerEvents.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Face, Object3D, Vector3 } from "three";
-import { Input, NEPointerEvent } from "../../engine/engine_input.js";
+import { Input, InputEventNames, NEPointerEvent } from "../../engine/engine_input.js";
 import { GamepadButtonName, MouseButtonName } from "../../engine/engine_types.js";
 import { GameObject } from "../Component.js";
@@ -19,13 +19,21 @@
     /** the original event */
     readonly event: NEPointerEvent;
-    /** the pointer identifier for this event */
-    readonly pointerId: number;
+    /** the index of the used device
+     * mouse and touch are always 0, controller is the gamepad index or XRController index
+    */
+    get deviceIndex() { return this.event.deviceIndex; }
+    /** a combination of the pointerId + button to uniquely identify the exact input (e.g. LeftController:Button0 = 0, RightController:Button1 = 101) */
+    get pointerId() { return this.event.pointerId; }
     /**
      * mouse button 0 === LEFT, 1 === MIDDLE, 2 === RIGHT
      * */
     readonly button: number;
     readonly buttonName: MouseButtonName | GamepadButtonName | undefined;
+    get pressure(): number { return this.event.pressure; }
     private _used: boolean = false;
     /** true when `use()` has been called */
@@ -98,20 +106,20 @@
     isDown: boolean | undefined;
     isUp: boolean | undefined;
     isPressed: boolean | undefined;
-    isClicked: boolean | undefined;
+    isClick: boolean | undefined;
+    isDoubleClick: boolean | undefined;
     private input: Input;
-    constructor(pointerId: number, input: Input, event: NEPointerEvent) {
-        this.pointerId = pointerId;
+    constructor(input: Input, event: NEPointerEvent) {
         this.event = event;
         this.input = input;
         this.button = event.button;
     }
     clone() {
-        const clone = new PointerEventData(this.pointerId, this.input, this.event);
+        const clone = new PointerEventData(this.input, this.event);
         Object.assign(clone, this);
         return clone;
     }
@@ -167,11 +175,27 @@
  * @internal tests if the object has any PointerEventComponent used by the EventSystem
  * This is used to skip raycasting on objects that have no components that use pointer events
  */
-export function hasPointerEventComponent(obj: Object3D) {
+export function hasPointerEventComponent(obj: Object3D, event?: InputEventNames | null) {
     const res = GameObject.foreachComponent(obj, comp => {
         const handler = comp as IPointerEventHandler;
-        if (handler.onPointerDown || handler.onPointerUp || handler.onPointerEnter || handler.onPointerExit || handler.onPointerClick)
-            return true;
+        // if a specific event is passed in, we only check for that event
+        if (event) {
+            switch (event) {
+                case "pointerdown":
+                    if (handler.onPointerDown) return true;
+                    break;
+                case "pointerup":
+                    if (handler.onPointerUp || handler.onPointerClick) return true;
+                    break;
+                case "pointermove":
+                    if (handler.onPointerEnter || handler.onPointerExit || handler.onPointerMove) return true;
+                    break;
+            }
+        }
+        else {
+            if (handler.onPointerDown || handler.onPointerUp || handler.onPointerEnter || handler.onPointerExit || handler.onPointerClick)
+                return true;
+        }
         // undefined means continue
         return undefined;
     }, false);

src/engine/codegen/register_types.ts CHANGED Viewed

@@ -33,7 +33,6 @@
 import { BasicIKConstraint } from "../../engine-components/BasicIKConstraint.js";
 import { BehaviorExtension } from "../../engine-components/export/usdz/extensions/behavior/Behaviour.js";
 import { BehaviorModel } from "../../engine-components/export/usdz/extensions/behavior/BehavioursBuilder.js";
-import { Behaviour } from "../../engine-components/Component.js";
 import { Bloom } from "../../engine-components/postprocessing/Effects/Bloom.js";
 import { BoxCollider } from "../../engine-components/Collider.js";
 import { BoxGizmo } from "../../engine-components/Gizmos.js";
@@ -248,7 +247,6 @@
 TypeStore.add("BasicIKConstraint", BasicIKConstraint);
 TypeStore.add("BehaviorExtension", BehaviorExtension);
 TypeStore.add("BehaviorModel", BehaviorModel);
-TypeStore.add("Behaviour", Behaviour);
 TypeStore.add("Bloom", Bloom);
 TypeStore.add("BoxCollider", BoxCollider);
 TypeStore.add("BoxGizmo", BoxGizmo);

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

@@ -5,8 +5,9 @@
 import { Gizmos } from "../../../engine/engine_gizmos.js";
 import { Mathf } from "../../../engine/engine_math.js";
+import { RaycastTestObjectCallback } from "../../../engine/engine_physics.js";
 import { serializable } from "../../../engine/engine_serialization.js"
-import { getWorldQuaternion, getWorldScale } from "../../../engine/engine_three_utils.js";
+import { getTempVector, getWorldQuaternion, getWorldScale } from "../../../engine/engine_three_utils.js";
 import { IGameObject } from "../../../engine/engine_types.js";
 import { getParam } from "../../../engine/engine_utils.js";
 import { NeedleXRController, NeedleXREventArgs, NeedleXRSession } from "../../../engine/engine_xr.js";
@@ -160,6 +161,7 @@
     private readonly _lines: Object3D[] = [];
     private readonly _hitDiscs: Object3D[] = [];
+    private readonly _hitDistances: number[] = [];
     protected renderRays(session: NeedleXRSession) {
@@ -188,7 +190,8 @@
             line.position.copy(pos);
             line.quaternion.copy(rot);
             const scale = session.rigScale;
-            line.scale.set(scale, scale, scale);
+            const dist = this._hitDistances[i] ?? 1;
+            line.scale.set(scale, scale, scale * dist);
             line.visible = true;
             line.layers.disableAll();
             line.layers.enable(2);
@@ -203,11 +206,14 @@
         }
         for (let i = 0; i < session.controllers.length; i++) {
             const ctrl = session.controllers[i];
-            const hit = this.context.physics.raycastFromRay(ctrl.ray, {})[0];
+            const hit = this.context.physics.raycastFromRay(ctrl.ray, { testObject: this.hitPointRaycastFilter })[0];
+            this._hitDistances[i] = hit?.distance;
             if (hit) {
                 const rigScale = (session.rigScale ?? 1);
-                if (debug) Gizmos.DrawWireSphere(hit.point, .025 * rigScale, 0xff0000, .2);
+                if (debug) {
+                    Gizmos.DrawWireSphere(hit.point, .025 * rigScale, 0xff0000, .2);
+                    Gizmos.DrawLabel(getTempVector(0, .2, 0).add(hit.point), hit.object.name, .02, 0);
+                }
                 let disc = this._hitDiscs[i];
                 if (!disc) {
@@ -243,6 +249,12 @@
         }
     }
+    protected hitPointRaycastFilter: RaycastTestObjectCallback = (obj: Object3D) => {
+        // by default dont raycast ont skinned meshes using the hit point raycast (because it is a big performance hit and only a visual indicator)
+        if (obj.type === "SkinnedMesh") return "continue in children";
+        return true;
+    }
     /** create an object to visualize hit points in the scene */
     protected createHitPointObject(): Object3D {
         var container = new Object3D();