HTML for AR?

Do we have to use DOM overlays for HTML on screen in AR? I haven’t got too far with this yet but wondered if we can use the HTML we already made for the webpage on top of WebXR in AR on a smartphone? It’s a design consideration for a project I’m planning

Original Post on Discord

by user 103054507105067008

Also important to note that DOM overlays don’t work in Mozilla WebXR viewer on IOS

by user 103054507105067008

Yes, we’ll look into this.

The HTML you made for the webpage just needs to be in the right place to be included

If you put it inside and add a class “ar” it will automatically be visible.

See VR & AR (WebXR) | Needle Engine Documentation

Thanks, will give that a try this afternoon too. Is there a reason you use DOM overlay in some samples rather than html?

by user 103054507105067008

Just to clarify:
DOM just means “document object model”
HTML gets turned into DOM elements

So: “DOM Overlay” just means “specify one DOM element (some HTML tag) to be visible in AR as an overlay”

We do that automatically with the element

FYI, I think WebXR broke dom overlays in how WebXR Viewer expects them. Testing non-needle page shows UI on Android/Chrome, but missing from WebXR Viewer.

by user 943936853348855838

@ROBYER1 @EricCraft-MH we found the issue with WebXR Viewer :sparkles:
Will be fixed in the next update. They have really weird edge cases in their implementation…

Oh wow, excited to hear that and put it to the test.

by user 943936853348855838

If you’re interested in the technicalities, turns out that when HTML elements are childs of a canvas, it happily says “I’ll show these as dom-overlays” but ends up showing … nothing. So we now parent some elements out of automatically only for WebXR Viewer. Also updated the docs and added a sample:

There’s a remaining issue that when leaving AR again the page stays white; that’s another bug specific to WebXR Viewer and we hope to take a look over the next days. Issue here in case you want to follow that: Exiting AR session in WebXR Viewer leads to white background · Issue #115 · needle-tools/needle-engine-support · GitHub

This is basically my homepage for Chrome now so I can check if Apple are making any progress at implementing WebXR in WebKit lmao

by user 103054507105067008

Don’t hold your breath
My best guess is they’ll allow WebXR but only from within . We’ll see

I do wonder why they would bother implementing it if it isn’t the full WebXR standard

by user 103054507105067008

WebXR doesn’t equal “WebXR runs on this device in the browser”
It can also mean “it only works from specific scopes”
It can also mean “it only works with specific external devices”

Entirely possible that what they’ll allow is “fancy new Apple glasses work with launching WebXR experiences from iOS”