Questions on WebAR workflow and best practices

🌵 Needle Engine
1

Attached is my mapped out workflow for my current (nd probably future projects). I have a few specific questions on specific images. Again sorry if these are basic questions, but most of my dev has been all Unity or All HTML, so working with TS and Unity is still new.

Site Loaded:

  • What is the best way to test WebXR compatibility? TS or JS?
  • Best way to add UI for redirecting users and usage guide. This will probably be HTML as it is screen space, but again how to go about this with TS.
  • Control when the AR Button shows, or replace command, with the redirects or open guide.

Acquire Pose:

  • What is the best way to Acquire Pose once the screen is tapped?
  • How to adjust model position after the offsets have been calculated?

Model Placed:

  • How to determine that the model has been placed?
  • Everything after Icons ready is done.

Thanks for any info.

WebXR_-_Site_Loaded.png
WebXR_-_Site_Loaded.png1532Ă—701 36 KB

WebXR_-_Model_Placed.png
WebXR_-_Model_Placed.png1762Ă—970 35.4 KB

WebXR_-_Acquire_Pose.png
WebXR_-_Acquire_Pose.png1854Ă—321 21.9 KB

Original Post on Discord

by user 943936853348855838

2
  • compatibility: the WebXR type has static getters for IsARSupported and IsVRSupported
  • UI with TS: many possible pathways, there are libraries to do this and add databinding etc (e.g. https://lit.dev/)
  • Buttons: You can disable the buttons to be created automatically in WebXR component and then create the buttons yourself (again WebXR component exposes the methods for that) and either add them to the dom where you want or build your own buttons and just invoke the “click” event on the button elements you get from WebXR) WebXR.createVRButton for example
3
  • Pose: you can get that from the XR Session (you get the session via this.context.xrSession)
4

Model Placement:

  • Determine if it has been placed: there’s currently no good api for it. But you can poll if the WebXRSessionRoot is invisible - if yes than it’s still placing, if no the scene has been placed
5

Worth noting that depending on the experience you’re trying to build, there’s another path on iOS for dynamically generating a USDZ right out of Needle Engine. That works on all iOS browsers in AR then but has limited interactive capabilities (but not none, e.g. can still click buttons to play animations and sounds and so on)

6

Also, not sure if you did but it’s worth looking at the overall UX of https://modelviewer.dev which has a good amount of Google research and user testing behind it. It’s not perfect (you’re gonna find me in the Issues there complaining about a number of UX details) but worth taking a look at.
(it does use USDZ auto-conversion by default for iOS)

7

@herbst🌵 As you can see from the images I have specific buttons and actions being called, so don’t think the iOS Quick Look is an option.

Thanks for all the info. I will look into it all and let you know if I have any questions.

by user 943936853348855838

8

Is there documentation on how to export from Needle for Quick Look?

by user 103054507105067008

9

You mostly just create a three USDZExporter (look at their sample) and are ready to go

10

We’re planning to integrate that better soon (so that e.g. it’s just an option on the WebXR component), but for now that’s how you can do it :slightly_smiling_face:

11

Some cool things are already implemented on our end (like animation support and ability to do simple interactions) but not production ready yet