How to add a UI to immersive-xr AR view?

Questions
,
1

When I click “START AR” on Android, all my UI vanishes, regardless of the CSS.

How do I have a UI for AR?

2 Likes
2

navigator.xr.requestSession( 'immersive-ar', sessionInit ).then( onSessionStarted );

^^^ this completely takes over the screen so it seems impossible to build a UI. Am I missing something?

3

You can’t use HTML and CSS to build UI for AR / VR, unfortunately. You’ll have to build your own layouts and interactions in 3d. @felixmariotto has been building three-mesh-ui with this in mind which should hopefully make that easier.

4 Likes
4

@gkjohnson thanks for recommending three-mesh-ui.

@fuzzy_wobble have a look at the live examples.

2 Likes
5

Thanks for the response. I totally understand this for VR, but for AR it seems crazy to force a 3D UI and not allow any overlays. Is there any hackish workaround?

6

Fortunately, there is a new (experimental) Web API that enables exactly this feature. It’s called WebXR DOM Overlays Module.

According to the Chrome Status Platform, this feature should be enabled by default since Chrome 83.

One of the live demos works fine on my Pixel:

https://klausw.github.io/three.js/examples/webvr_lorenzattractor.html

3 Likes
7

Here is an example with the latest (r118) version:

The most relevant section is:

document.body.appendChild( ARButton.createButton( renderer, {
	optionalFeatures: [ 'dom-overlay', 'dom-overlay-for-handheld-ar' ],
	domOverlay: { root: document.body } } )
);

As you can see, the button is now created slightly different.

1 Like
8

You’re my hero @Mugen87 <3

2 Likes
9

Hmm. It’s working on some Android devices and not on others. Sometimes the DOM overlay works and other times the immersive-ar takes over the entire screen.

10

Are these devices using a recent Chrome version?

11

i tried to use your suggestion in my application but it crashes after 2 seconds. if i changed the quality and size of the model it crashes after minutes and at the end with a basic model it works fine. do you have any suggestion?

12

The crash can be caused by many things. Do you mind sharing a link to your app?

13

I kept getting very odd crashing on glTF models. Switched to other formats and worked fine. Not sure if that’s helpful or not. I didn’t dig into the glTF bugs yet. Was planning to soon…

14

https://www.ilumiere.it/ilve/M12NARv3.html
the link with the menù (this is only a test)

https://www.ilumiere.it/ilve/M12NAR.html
the original app without menu

if you need example with simple model i will share

15

do you have any suggestions? someone can help me or give me a procedure for debugging? i m not able to debug the page with the Smartphone so find and resolve the probelm is very tricky

16

Can you please share me the code once as i can’t find this file in his three-js folder

17

can You please share me this example

18

On what code are you referring to?

19

https://klausw.github.io/three.js/examples/webvr_lorenzattractor.html

20

its not there in his Github