WebXR support in example

[johnwason]

I have been trying to add WebXR support to the example, but have not been successful. The newer version of three.js is requiring the use of JavaScript modules, while the example is using script tags. This appears to be incompatible.

Also, the example currently shows a white screen due to a bunch of 404 errors when running on Android. The Oculus Quest device I am using is Android based, with both the built-in browser and Firefox Reality showing a white screen. Using index.bundle.html seems to work.

The page documenting setting up WebXR support: https://threejs.org/docs/#manual/en/introduction/How-to-create-VR-content

[gkjohnson]

Hey @johnwason!

I've been meaning to update the example to use modules for a bit now but haven't gotten around to it. Regarding the current webcomponent example I never intended for that to be modified for use as another application. I'll put some time into it later this week / weekend to update example to use modules, upgrade three.js, and make a simpler example that's intended to be modified which just loads the URDF file and renders it with a light.

Unfortunately I don't have a VR headset to try out myself but hopefully along with the three.js docs that should be enough to get started.

[johnwason]

Thanks @gkjohnson , looking forward to trying the updated examples.

I was able to reproduce the problems I encountered on an Android phone, so that may be another option for testing instead of a full headset. With babylon.js it was possible to enter VR on a desktop browser, where it would show a view designed for the google cardboard VR lens. I am not sure if this is possible with three.js.

[gkjohnson]

@johnwason I actually found an old daydream headset I have so I was able to use that. I ran into a couple hiccups with VR support (I've never done it in the web before) but other than that it was a pretty quick update. You can see the changes in #170.

Specifically I've you can check out the simplified example code here and check out the new simplified example with VR here. I've also updated the examples to work with three.js r117. Let me know if that's what you're looking for.

[johnwason]

The simple.html example works on the Oculus Quest browser, but not in Firefox Reality.

Unfortunately after researching the docs more VR capabilities of three.js seem pretty limited compared to Babylon.js. I can view the scene, but navigation and head tracking don't appear to work. I think for our uses Babylon.js will be preferable. Do you have any suggestions on how to avoid duplicating efforts if we decide to use Babylon.js?

I highly recommend getting an Oculus Quest. It isn't overly expensive, and it is very easy to view WebVR and WebXR scenes.

[johnwason]

This is a crude example of a (failed) planned trajectory using babylon.js:

https://johnwason.github.io/tesseract_viewer_python_example2/

[gkjohnson]

Unfortunately I can't test with Firefox Reality -- I'm not doing a lot with VR at the moment so I haven't invested in a newer headset. I've considered a Quest but I haven't made the leap, yet. Regarding head movement I don't believe that should be the case. The robot in the scene I sent is at least 6 meters wide and the camera starts 17 meters away so you likely wouldn't see a lot of parallax from head translation.

If you're interested in learning more about VR in three.js I recommend taking a look at some of the examples they've put together which include controller support and interactions. Navigation in VR is usually a complicated topic and likely meant to be implemented by the application so it best suits the context.

I'm not trying to convince you to use three.js, though. If you're looking for something that does everything Babylon does out of the box then use Babylon. I don't think there should be one engine used across all applications -- but it does make sharing code easier. If you'd like to get URDF loading into Babylon maybe a good step is to separate out the xml parsing code of this project so a cleaner, fully filled js object representation is available and use that write model builders for three.js and bablyon.js within the repo.

[gkjohnson]

I'm gonna close this for now let me know if you need anything else!

[johnwason]

Thanks for making the WebXR demo!

Here is an example of babylon.js used for a viewer. This uses the Tesseract C++ parser to generate the scene, then writes out a babylon.js json file that is loaded. Ideally this would all be done in the browser without requiring Tesseract to parse the scene.

https://johnwason.github.io/tesseract_viewer_python_example4/

[gkjohnson]

Of course! Unfortunately I don't have a need for Babylon at the moment but if someone is interested in working together to add Babylon loader into this project I'd be happy to help with #172 to get that started. Just let me know!