How to use WebXR with Unity - January 2024 Edition

Getting started guide for WebXR Export and XR Interaction Toolkit in Unity, January 2024 Edition.
Base project uses:
Unity OpenXR package, Unity XR Hands package, XR Interaction Toolkit package and URP.
The base scene is from XR Interaction Toolkit Starter Assets sample.
Links from the video:
WebXR Export - github.com/De-Panther/unity-w...
Sponsor WebXR Export - github.com/sponsors/De-Panther
WebXR Input Profiles Loader - github.com/De-Panther/webxr-i...
glTFast project setup - docs.unity3d.com/Packages/com...
Chapters:
0:00 Intro
0:45 Base project
1:39 Importing WebXR Export
4:20 Configuring WebXR Export
8:05 1st build
10:05 Make it work
11:54 2nd build - Minimal working project
13:23 Add good stuff
16:16 3rd build - Good stuff and regression
17:52 Fix regression
19:06 Add WebXR Input Profiles
21:40 4th build - It works!
23:30 Add Spectator Mode and more
26:40 5th build - Done!
#WebXR #Unity #WebGL #VirtualReality #AugmentedReality #SpatialComputing

[@De-Panther]

Unity 6 has issues on web with URP and XR Display Submodule. Use the BiRP samples instead and disable the XR Display Submodule in the WebXR Settings.

[@abadlibadreddine1960]

Thank you for helping me make my school project i really appreciate your help man

[@mudsp1ash]

you're a hero my man

[@vrfordev]

Thanks you!)

[@De-Panther]

Forgot to mention, build needs to run on a secured context - URL localhost or HTTPS server

[@ASDESIGN_RT3D]

Thanks for the video but despite following the setup the AR and VR buttons always greyed out? Is there anything I can do to fix this?

[@De-Panther]

@@ASDESIGN_RT3D use secured context. HTTPS server. you can also follow the Using-XR-Interaction-Toolkit doc in the repository.

[@ASDESIGN_RT3D]

Thanks but I’m doing this! And I’ve followed the documentation. I am using 2022.3.12, does it only work in version 2022.3.10?@@De-Panther

[@De-Panther]

@@ASDESIGN_RT3D it should work in all 2022.3, also tested it today with 2022.3.16. You are welcome to join the WebXR Discord and ask in the Unity channel there. Can't share links in comments here

[@ASDESIGN_RT3D]

Will do@@De-Panther

[@jakeaquilina505]

can you please explain how to use AR with mobile devices?

[@salziert]

Can I build a native app with capacitor and put my Unity game in their ? And then for example have a leaderboard with js which communicates with the Unity game that got embedded?

[@zoltar3172]

Thank you for all the hard work to make this happen! Will this also run with WebGPU that Unity has in the beta with 2023.3 and will release in April? Because WebGPU will give a lot of extra performance then WebGL

[@De-Panther]

There's no general support for WebXR with WebGPU in browsers yet. Once there'll be such support, we'll see how and if it can work with Unity.

[@victorhugoka4378]

I love it. But after i enter in vr mode in browser of quest3 i don't know how i back to navegator, finishing the vr mode.

[@how-to-make-a-game]

it doesnt work on headset because of the poly fill liberary is missed in the device

[@caiocabral7355]

When I test with Android, dont sync the rotation of the device with the camera... When I solve then? In you live demo works perfectly, but in my build, It can get Google AR/XR correctly :(

[@caiocabral7355]

Forgot to mention, build needs to run on a secured context - URL localhost or HTTPS serve

[@Ant_-yg4pn]

Would you have to change anything with regard to the materials being used or the type of object. Doesn't web use gltf? Is this converted automatically upon export? Thanks so much for the video! :)

[@De-Panther]

If you see pink materials in your project, use URP and convert Built-in RP materials to URP. Web doesn't use glTF by default. The only glTF models in this tutorial are the headset controllers

[@Ant_-yg4pn]

Hey thanks! @@De-Panther. I love your project! Do you know if MRTK also works with this? Apologies for the abundance of questions

[@De-Panther]

@@Ant_-yg4pn Should work, I didn't test. I guess you'll have to do some adaptations. And I'm not sure about the performance. But you can try and tell if it worked

[@gtk2k]

I want to implement a stereoscopic video player using WebXR Export. 1. Is it possible to set the GameObject to be displayed only in the left eye or only in the right eye, like mesh.layers.set(1) / mesh.layers.set(2) in Three.js? or 2. Is it possible to use unity_stereoEyeIndex in Unity's Shader to render a different texture for each eye?

[@De-Panther]

When using the XR SDK display module, you should be able to use Unity's solutions like unity_stereoEyeIndex. But in the latest WebXR Export there's an option to disable XR SDK display, and use list of cameras instead. try the Built-in RP samples that were added

[@gtk2k]

@@De-Panther Thank you! I try it.

[@linhmaituan5158]

Can you please create a tutorial to create a marker-based AR-app with Unity using WebXR export and how to test it with the app running on localhost?

[@De-Panther]

WebXR doesn't support marker tracking. There are some JavaScript based AR libs for web that support markers (like AR.JS), but the WebXR Export packages doesn't support them.

[@EliasIoannou]

It works for me when i use Air link to connect to the place i hosted it and click VR from there. However when i go through the meta quest browser in VR to test it i just see the number and a weird empty skybox with no lighting like its a default unity scene and u deleted the lighting. This tells me that none of the textures load. Any idea why? Please help :( I use gzip and decompression fallback idk if that plays a role.

[@De-Panther]

I suggest to open an issue using the bug template in the WebXR Export repo. Thanks

[@ianfontesnicacio6666]

Hello, i use the asset HurricaneVR to be my player, but i really dont understand why my buttons dont work. Can you help me? The build works fine, but no hand

[@De-Panther]

I don't know this asset. It seems to be paid asset, I don't know how the interactions in the asset works. You can ask the creator of the asset for support.

[@katariya608]

as a beginner on unity im still abit confused on the AR part of the WebXR I have used the xr toolkit and ar foundation before but Im not sure how to integrate it with webxr

[@De-Panther]

The XR Interaction Toolkit stuff works with WebXR Export, as those are Interactions. The AR Foundation is not implemented yet. Currently WebXR Export supports rendering in AR, and Hit-Test.

[@imagoFX]

Thanks for the video and the awesome exporter. For me, it work on chrome on PC but not on the oculus browser - the loader under the unity logo gets stuck on 90%. Any idea why? תודה :)

[@imagoFX]

Found the problem - In player settings -> publishing settings disabling compression settings solves it. It was mentioned in the video but I skipped it for some reason.

Hey Oren, is it possible to test from unity?

[@De-Panther]

WebXR works only on browser, but you can use the WebXR Export provider package in the same project with OpenXR provider, and test the interactions/locomotion and other mechanics in the editor using the OpenXR runtime.

[@m.shahrulnizam4655]

Hi, i have question, why when i play VR in chrome using HTC Vive headset, the scene only display in HMD but in chrome it is blank, how to make it display to both screen?

[@De-Panther]

As explained in this video, you need to use spectator camera for that. It's an extra view.

[@m.shahrulnizam4655]

@@De-Panther Okay thanks, does this support in BRP?

[@atqamz]

how to deploy and use an AR instead VR?

[@De-Panther]

The samples already works on AR mode. Just try it on a supported device

[@atqamz]

@@De-Panther I see, what I want to implement is image tracking which is unsupported yet, that's why it won't work.

[@StarCrew91]

Is this compatible with URP ?

[@De-Panther]

As mentioned in the video, currently URP is required. Working on adding back support for BiRP

[@StarCrew91]

@@De-Panther That's insane ! Thank you for this !

[@m.shahrulnizam4655]

@@De-Panther Hi, can i use on 3D Core template, just in case you have done the back support..thanks