WebXR fix Hit Test providing multiple results

examples/src/examples/xr/ar-hit-test.mjs

@@ -61,7 +61,7 @@ async function example({ canvas }) {
     target.addComponent("render", {
         type: "cylinder"
     });
-    target.setLocalScale(0.5, 0.01, 0.5);
+    target.setLocalScale(0.1, 0.01, 0.1);
     app.root.addChild(target);
 
     if (app.xr.supported) {
@@ -140,6 +140,34 @@ async function example({ canvas }) {
             }
         });
 
+        if (app.xr.hitTest.supported) {
+            app.xr.input.on('add', (inputSource) => {
+                inputSource.hitTestStart({
+                    entityTypes: [pc.XRTRACKABLE_POINT, pc.XRTRACKABLE_PLANE],
+                    callback: (err, hitTestSource) => {
+                        if (err) return;
+
+                        let target = new pc.Entity();
+                        target.addComponent("render", {
+                            type: "cylinder"
+                        });
+                        target.setLocalScale(0.1, 0.01, 0.1);
+                        app.root.addChild(target);
+
+                        hitTestSource.on('result', (position, rotation) => {
+                            target.setPosition(position);
+                            target.setRotation(rotation);
+                        });
+
+                        hitTestSource.once('remove', () => {
+                            target.destroy();
+                            target = null;
+                        });
+                    }
+                });
+            });
+        }
+
         if (!app.xr.isAvailable(pc.XRTYPE_AR)) {
             message("Immersive AR is not available");
         } else if (!app.xr.hitTest.supported) {

src/framework/xr/xr-hit-test-source.js

@@ -132,23 +132,40 @@ class XrHitTestSource extends EventHandler {
      * @private
      */
     updateHitResults(results, inputSource) {
+        if (inputSource && !inputSource.hitTestSourcesSet.has(this))
+            return;
+
+        const origin = poolVec3.pop() ?? new Vec3();
+
+        if (inputSource) {
+            origin.copy(inputSource.getOrigin());
+        } else {
+            origin.copy(this.manager.camera.getPosition());
+        }
+
+        let candidateDistance = Infinity;
+
+        const position = poolVec3.pop() ?? new Vec3();
+        const rotation = poolQuat.pop() ?? new Quat();
+
         for (let i = 0; i < results.length; i++) {
             const pose = results[i].getPose(this.manager._referenceSpace);
 
-            let position = poolVec3.pop();
-            if (!position) position = new Vec3();
-            position.copy(pose.transform.position);
+            const distance = origin.distance(pose.transform.position);
+            if (distance >= candidateDistance)
+                continue;
 
-            let rotation = poolQuat.pop();
-            if (!rotation) rotation = new Quat();
+            candidateDistance = distance;
+            position.copy(pose.transform.position);
             rotation.copy(pose.transform.orientation);
+        }
 
-            this.fire('result', position, rotation, inputSource);
-            this.manager.hitTest.fire('result', this, position, rotation, inputSource);
+        this.fire('result', position, rotation, inputSource);
+        this.manager.hitTest.fire('result', this, position, rotation, inputSource);
 
-            poolVec3.push(position);
-            poolQuat.push(rotation);
-        }
+        poolVec3.push(origin);
+        poolVec3.push(position);
+        poolQuat.push(rotation);
     }
 }
 

src/framework/xr/xr-input-source.js

@@ -139,6 +139,12 @@ class XrInputSource extends EventHandler {
      */
     _hitTestSources = [];
 
+    /**
+     * @type {Set<import('./xr-hit-test-source.js').XrHitTestSource>}
+     * @ignore
+     */
+    hitTestSourcesSet = new Set();
+
     /**
      * Create a new XrInputSource instance.
      *
@@ -610,6 +616,7 @@ class XrInputSource extends EventHandler {
      * @private
      */
     onHitTestSourceAdd(hitTestSource) {
+        this.hitTestSourcesSet.add(hitTestSource);
         this._hitTestSources.push(hitTestSource);
 
         this.fire('hittest:add', hitTestSource);
@@ -632,6 +639,7 @@ class XrInputSource extends EventHandler {
      * @private
      */
     onHitTestSourceRemove(hitTestSource) {
+        this.hitTestSourcesSet.delete(hitTestSource);
         const ind = this._hitTestSources.indexOf(hitTestSource);
         if (ind !== -1) this._hitTestSources.splice(ind, 1);
     }