Aframe: Direction for raycaster may broken on A-Frame 1.0

[dala00]

I have been specified direction of raycaster on a game. After upgrade to A-Frame1.0, that direction is no longer effective.

• A-Frame Version: 1.0.0
• Platform / Device: Oculus Quest
• Reproducible Code Snippet or URL: https://glitch.com/~aframe-raycaster-test
  (Working version by A-Frame 0.9.2 https://glitch.com/~aframe-raycaster-test-092)

[felipenmoura]

Here too.
This is critical for me as well!

First, A-frame simply stoped working on the latest version of chrome due to a navigator.xr.requestDevice problem, what forced me to update to 1.0.
Now it works on Chrome, but the raycaster is all completely out of sync with the coordinations! Specially for AR! (using aframe-ar 2.0.8).

Any fix for that?!

[dala00]

Oh, same flow at all

[felipenmoura]

What I have ends up like this:

<a-scene
        id="scene-el"
        inspector="https://cdn.jsdelivr.net/gh/aframevr/aframe-inspector@master/dist/aframe-inspector.min.js"
        arjs="debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;"
        vr-mode-ui="enabled: false"
        cursor="fuse: false; rayOrigin: mouse"
        raycaster="objects: [data-click-on] [data-clickable]"
        loading-screen="dotsColor: blue; backgroundColor: white;"
      >

    <a-entity data-click-on="true">
        <a-entity data-clickable="true" ... ></a-entity>
    </a-entity>
    <a-entity camera id="main-camera" cursor="fuse: false; rayOrigin: mouse"></a-entity>
</a-scene>

But these clickable elements are actually created dynamically and appended to the main entity (in case that might matter).

I had a project running (with clients even), and now it is suddenly useless with no interactions at all :/
Any way I can help fixing this quicker?
Thanks.

[felipenmoura]

I created a pseudo-polyfill that works, @dala00 .
The "official" polyfill didn't work either, then I realised AFrame only uses the requestDevice method to validate two properties, immersive and exclusive.

Try loading A-frame 0.9.2 right after these lines:

navigator.xr.requestDevice = navigator.xr.requestDevice || function () {
  return new Promise((resolve, reject) => {
    resolve({
      supportsSession: new Promise((resolve, reject) => {
        resolve({
          immersive: true,
          exclusive: true
        });
      })
    });
  });
};

Pros
It works!! And quickly solves both problems with Chrome (which was not loading due to the navigator.xr.requestDevice is not a function error) and raycaster (which was triggering clicks and touches in misplaced areas of the scene).

Cons
It might trigger some false positives for devices that do not have support to that.
I'm still looking on ways to validate only those two fields.

[klausw]

Are both of you using Oculus Quest? As far as I know its current WebXR implementation is missing WebXR Gamepads Module support, so you don't get button or axis states, that'll be added in the next Quest browser update. However, poses and WebXR "select" events should still work.

I tried https://aframe-raycaster-test.glitch.me on Daydream, and I do see a ray (pointed about 45 degrees down from the controller forward axis), and the controller model shows button presses, though I don't see any interactions happen as a result.

[dala00]

Oh, thank you for information! Yes, Oculus Quest.

Then I wait browser update and close this.

[klausw]

I think it may be too early to close this, I don't know if the known Quest issue is what's causing this problem. The missing gamepads module means that you can't read button values or axis values, but the controller pose and ray position should still be working. I'm not sure if A-Frame internally uses WebXR "select" events (which work), or if it reads gamepad button values (which doesn't currently work on Quest).

[dala00]

OK, I continue to check and wait other information if exists.

[klausw]

FYI, @Artyom17 just posted this half an hour ago: https://twitter.com/abolgar/status/1207469356461916161

Oculus Browser 7.1 has been released with XR Gamepad Module support and a fix of the bug affected three.js examples.

[dala00]

Oh!? Thanks, I try at night.

[felipenmoura]

I am using cellphones (on chrome and firefox).
The raycaster is misplaced. I touch the icons and nothing happens, but when I touch in an empty area a few centimeters away it triggers the event (yes, I touched all over the screen guessing where it might be).
On desktop it happens as well, but in desktop, the clickable area changes the cursor to pointer, in the misplaced (empty) area, indicating where it actually is.

By the way, I'm working on an AR, not a VR. I'm using aframe-ar 2.0.8.

[dmarcos]

@dala00 Can you provide working and broken versions? From the original glitch I can't tell what result you're expecting

[dala00]

Current Oculus Browser version is 7.0.13186866463

[dmarcos]

I meant a working and broken versions of your glitch example

[dala00]

OK, I created working version (A-Frame 0.9.2)

https://glitch.com/~aframe-raycaster-test-092

[Artyom17]

Current Oculus Browser version is 7.0.13186866463

@dala00 Not anymore, 7.1.2 has been released yesterday (with XR Gamepad module support)

[dala00]

Update is not coming to me yet...

[Artyom17]

@dala00 : have you checked Library -> Updates? Still nothing?

[dmarcos]

@felipenmoura The cursor example works for me on desktop cursor example (click around on the boxes) Maybe something has changed on the ar-js side?

[dmarcos]

There are two separate issues:

@dala00 The problem in your case is a bug where the model: false property in laser-controls is not honored in 1.0.0 (notice that in the 0.9.2 example the model is not visible). The model loads in 1.0.0 despite being disabled and a default orientation for the corresponding controller override yours. The fix will ship in 1.0.1 next week.

@felipenmoura I think your problem is different and I suspect it could be related to the ar.js integration that I don't know much about. I recommend checking with the maintainers. If there's something that points to A-Frame feel free to open a separate issue.

[felipenmoura]

Thanks @dmarcos , I'm in touch with ar.js repository folks. Let's see if they find an update on that!
I keep you guys posted.

[Artyom17]

@dala00 : actually, we are having some issues with the Store right now, that explains why you may still not get the 7.1.2. Hopefully it will be fixed soon!

[dala00]

@Artyom17
Yes, thanks. There's no problem already if fixed. I wait patiently.

[dala00]

7.1.2 came, but not fixed. I wait for A-Frame 1.0.1

[dala00]

Fixed finally! Thanks!!!!
https://glitch.com/~aframe-raycaster-test-101

[Artyom17]

Are you guys sure it is fixed? It seems pretty broken to me, the ray is pointing at the wrong spot. Either the last test case from @dala00 or the built-in example https://aframe.io/aframe/examples/test/laser-controls/. @dmarcos ? Testing on Oculus Browser 7.1.2. Standard WebXR samples work fine.

[dala00]

Direction is worked (ray moved) but I have another issue about angle. Rotation of object in hand controller entity differ for localhost (http) and remote(https). I will create Reproducible Code and post another issue if reproducibled. (This may no what @Artyom17 said)

[Artyom17]

Oh, so the issue was that ray didn't move at all? Ok, then that is fixed. However, yeah, the angle is wrong still.

[felipenmoura]

As for the aiming, @Artyom17 , I created an quick emergencial fix:
https://github.com/aframevr/aframe/issues/4354#issuecomment-567052948
it's not pretty, but fixed the problems for it to work in both Chrome and Firefox, and the aiming is ok.

[MichaelVonB]

@felipenmoura Is this fixed for you? I updated both aframe and ar.js and this still doesnt work.
If I use aframe v.0.9 clicks do work, but unfortunately then chrome doesnt work.

[felipenmoura]

yes, @MichaelVonB , if you polyfill it like this:

      navigator.xr.requestDevice = navigator.xr.requestDevice || function () {
        return new Promise((resolve, reject) => {
          resolve({
            supportsSession: new Promise((resolve, reject) => {
              resolve({
                immersive: true,
                exclusive: true
              });
            })
          });
        });
      };

It is currently working for me, in chrome as well, and also with touch events.

[MichaelVonB]

I got it to work with that, thank you. Nevertheless I would like to upgrade to the current aframe version at some point in time.

[dmarcos]

Not sure I understand the problem. Does the issue manifest in https://aframe.io/aframe/examples/test/laser-controls/ or any other simple example? The problem originally reported in this issue no longer reproduces with the links provided. It could be an issue on the ar.js side and not A-Frame

[MichaelVonB]

I make an example:
https://working-examplegaframev092.glitch.me/
this works. You just show the hiro marker and click the box. Then there will be a log that you clicked it.
https://notworkingaframev104.glitch.me/
This doesnt work using aframe v1.0.4 even tough i didnt change anything else.

[dmarcos]

I meant an example without using ar.js. If it only reproduces with ar.js is likely an integration issue and better to reach the maintainers. In any case your issue doesn’t seem to be related to the original report above.

[MichaelVonB]

I only get an issue using ar.js and I already made an issue on arjs they told me to go here :/

[dmarcos]

I’m not familiar with ar.js code base. It needs an example to reproduce without for me to be able to investigate. it looks like an integration issue based on the information currently available.