How to start WebXR? tutorials not working for me

I cant seem to get WebXR working no matter what. Detection always returns that WebXR is not available. However the tutorials show this functionality to be well-supported.

Is there a sample someone can point to, that they can assure me absolutely positively should get me started?

Ideally, one that shows successful camera control with the phone’s motion sensors (yes, Ive tried DeviceOrientationCamera), and replacement of the designated floor mesh with the live camera (yes, Ive tried adding my ground plane to the floorMesh config).

Ive tested everything on WebXR Demos and Examples, and they all run but nothing shows usage of the live camera nor motion sensors. It’s all just touch controls.

My goal is to place a rendered object in live 3-space.

Developing on a Pixel 4 with Android 13, Brave and Chrome browsers at latest.

cc @RaananW

What demos don’t work for you? An android device will be able to show an AR scene, but AR has some limitations, especially when it comes to special features. Hit-testing should work without an issue.

Well for example none of these do anything that I would call AR. No floor removal, no device motion tracking. Leaving me wondering if Im missing something.

But other non-Babylon WebXR demos work fine.

Those are not AR demos. Have you tried those:

WebXR Augmented Reality Features | Babylon.js Documentation (babylonjs.com)

I am also not entirely sure what you mean with floor removal.

Also - what other non-babylon examples are working? VR demos? AR demos? is it possible they include the webxr polyfill (which we don’t include by dfault?)

Returning to this because client really wants it.

Yes, Ive tried all the demos on the link you gave. Trying them again right now. They perform even worse.

Simple Immersive AR Scene just shows me a ball in empty space with touch controls for the camera. No device orientation to control camera rotation. No forward-facing camera view to replace the background. Nothing “AR” about this demo at all.

WebXR Hit Test Using Babylon, doesnt even give me a ball. Absolutely nothing shows in the PG at the top of the page.

WebXR Plane Dedication(sic) Demo - same as Hit Test. No background, no ball, nothing but an empty purple window.

Light Estimation, Full Demo - tiny rotating black object, no device orientation control just touch-drag, empty purple background, really cant even tell what this demo is supposed to prove.

Light Estimation, Light Source - exact same as Full Demo

XR Measurement Tape - Uncaught Syntax Error: Unexpected Token “*”, otherwise same as above but no touch-drag control.

Placing A Mesh in Space - no mesh, no space, just the ol’ empty purple window.

Clearly Im missing something here.
Again, all tests done on a Pixel 4XL w/ latest Android 13, and Chrome also latest.

For the record, other AR demos work fine on this phone.
https://immersive-web.github.io/webxr-samples/immersive-ar-session.html

Works exactly as expected. Camera rotation is controlled by device orientation, and background is swapped with the live camera view.

I did have one example AR seem to work. As in I move my finger around on the Android 12 Galaxy flagship phone screen and a small sphere followed. Is that the intended outcome? I’ve not used AR, yet. https://playground.babylonjs.com/#F41V6N#32.

The third-party example here shows a VR not AR style experience to me (github.io you posted brechindo).

1 Like

Your PG link there, works fine for me. At first I get the same plain ball on a plain mauve/purple background, but now there’s also the goggles icon at bottom-right which then turns on AR mode. Then it becomes a proper AR experience with device motion tracking, and skybox replacement with live camera.

At least now I have a working demo to learn from. Thank you!

1 Like

It works good in that respect from Chrome. I could not get Microsoft Edge (latest updates) to do the same. Perhaps I need to enable or disable some setting. I’m glad this works for you. It’s a start.

I should note for posterity that I also had a silent killer problem. I had webpack Dev Server only configured for http, but the browser on the phone was accessing the server on a separate machine so 192…, which violates an annoying WebXR requirement that all XR pages be served either via https or from localhost.

Wouldnt be a problem, except that the call scene.createDefaultXRExperienceAsync was throwing the error as an exception, which was then being quietly caught and swallowed somewhere.

And I couldnt even see any warning in the Chrome dev tools console, because I cant seem to connect Chrome dev tools on the desktop, to the Chrome instance on the phone.

So I was blind to the error, until I guessed at throwing a try/catch around it and ah-ha.

1 Like

The XR symbol should have stated “error”. There are ways to display the error on mobile, but we have decided to now show an alert but to let the scene continue running while letting the dev the possibility to display the error, if wanted.

Yep, WebXR requires a secure connection. Otherwise it won’t start. that’s a browser limitation