Why is raycast direction calculated incorrectly in WebXR?

Question

I'm trying to use regular Three.js raycasting in a web-based augmented reality app (as opposed to AR hit-testing, this question is not about hit-testing on real planes).

The web app uses A-Frame with the aframe-xr component to get WebXR support in the WebXR Viewer for iOS and WebARCore for Android, and augmented reality works fine in general in these two experimental browsers.

However, something in aframe-xr or the three.xr.js and WebXR polyfill libraries it includes results in an incorrect projection of the direction vector of a raycast in the experimental browsers with WebXR support. The origin of the raycast is fine (at the camera's current position), but the direction is always offset below (y coordinate too small) and slightly to the left (x coordinate too small) of where it should be.

Coincidently (or not), the y seems to be offset around the 1.6 meters A-Frame offsets the camera by default. Or used to, since this seems to have been relegated to Three.js in the newest (unreleased) version of A-Frame which aframe-xr is dependent on to work.

This is not a problem with raycasting in general, as proven by this reproduction of the issue in Glitch, where my test results are as follows:

Device/Example run     | Normal 0.7.0   |   WebXR       |   Normal 0.8.0   |
-----------------------|----------------|---------------|------------------|   
Windows Chrome w/mouse |   Correct      |   Correct     |       Correct    |
S8 Chrome              |   Correct      |   Correct     |       Correct    |
S8 WebARCore           |   Correct      |   Incorrect   |       Correct    |
iPad Safari            |   Correct      |   Correct     |       Correct    |
iPad WebXR Viewer      |   Correct      |   Incorrect   |       Correct    |

Where "correct" means that the direction is calculated as expected and the sphere appears right under my finger or mouse cursor, and "incorrect" means the direction vector comes out wrong and the sphere appears in the wrong place.

The code for these examples is here: https://glitch.com/edit/#!/delirious-watch

What happens in the WebXR libraries to offset the calculated raycast direction, and how can it be fixed?

Bonus info: I also tested this with the aframe-ar component in a separate glitch here. Raycasting works correctly in WebARCore on Android (where, I believe the webxr polyfill is not used), but incorrectly, albeit with a different offset in WebXR Viewer on iPad (where, I believe the webxr polyfill is used).

Update: As per Roberto's comment below, changing the SITTING_EYE_HEIGHT constant in the webxr-polyfill to 0 is a step in the right direction, but not the full solution. With that change - can be tried here - if I load the webpage and do the raycasting before moving or rotating the device around, raycast direction is actually calculated correctly, but as soon as I move or rotate the device, raycast direction is incorrect.

Answer 1

I'm not that much into the polyfill code (I'm working on the iOS viewer), but I remember there is an SITTING_EYE_HEIGHT constant somewhere in the polyfill. It's currently set to 1.1 meters. Maybe you should use that value to compensate the height in your code. Here's the exact line: https://github.com/mozilla/webxr-polyfill/blob/e4fa65a9bdb09e8e753014436d2f5b76c949e047/polyfill/XRViewPose.js#L57