How to get started with WebXR in Unity thanks to Mozilla exporter

An introductory tutorial to teach you how to create your first WebVR project in Unity! Thanks to the recent WebXR Exporter released by Mozilla, it is possible to create virtual reality experiences for the web by using Unity 3D. I'll show you how to create your first simple project and how to overcome some of the difficulties that I've found.
References:
- GitHub page of the plugin: github.com/Moz...
- InputManager.asset file for your project: raw.githubuser...
- File CloseHands.cs: pastebin.com/u...
- File ColorCube.cs (1st version): pastebin.com/8...
- File ColorCube.cs (2nd version): pastebin.com/X...
---
If you like AR and VR like me, let's connect!
- Blog: skarredghost.com
- Twitter: / skarredghost
- Linkedin: / antony-vitillo-vr
- Patreon: / skarredghost (please donate!)
#VirtualReality #Unity3D #WebXR

[@blissweb]

Excellent stuff. Almost no examples of this on KZbin. Just what I needed to get me started. Thanks.

[@Skarredghost]

Glad to have helped you!

[@SaturnsEscape]

Thanks for the tutorial! Quick tip for anyone, if you want to test your build without having to deploy to a SSL protected webpage, just make sure to click 'Build and Run' in Unity. It will then run the app in your default browser. Edit: It seems this technique no longer works for WebXR builds. It used to work for the WebVR SDK so hopefully Mozilla or whoever makes that decision can provide an easier way to test builds in the future.

[@Skarredghost]

Nice comment! Unluckily on my pc this didn't work, I don't know why

[@SaturnsEscape]

Ah, I've been using the older WebVR standard up to this point, I just upgraded my project and tried 'Build and Run' for WebXR and it no longer works for me either. :( It loads the project into the browser, but never asks you for Virtual Reality access like you showed over an http connection. Having to fully deploy just to test the build is kind of bummer, I hope they can make where we can test locally again at some point.

[@Skarredghost]

@@SaturnsEscape I'm totally with you on this, this is very annoying

[@eliserwiedemann5221]

Thank you very much for making this tutorial! Helped me a lot.

[@Skarredghost]

You're welcome!

[@haraldgundersen7303]

Nice project to have ready for when Nreal comes with sdk to support WebXR

[@Skarredghost]

Yesss!

[@ace280671]

Thank you very much for explaining how to do this and overcome the several problems that come up with this current exporter. My Quest and Link aren’t compatible with my gaming laptop so I’m looking forward to publishing to the web. Thanks once again!

[@Skarredghost]

My pleasure to help! BTW the resulting application is compatible with Oculus Quest, especially if you open the website with Firefox Reality

[@ace280671]

Skarredghost Thanks for your suggestion. I just have to decide on a webhost to build a website with to view through Firefox Reality. I’m thinking of using Wix. Unless you have a better recommendation. My technical skills are minimal 🙈

[@Skarredghost]

@@ace280671 If you have few technical skills, Wordpress or Wix are the best for websites. I'm not sure on how you can implement VR there, though. Have they already made some plugins?

[@ace280671]

Skarredghost I’m not sure if they have plugins for VR. I know Firefox has VR capability. But the big obstacle at the moment is trying to find out how to upload the build from Unity to the Web. Which file to upload, I assume it’s the webxr file.. The easiest method seems to be to get a Sketchfab account and upload a model. I really only want viewing and locomotion/teleportation on my Quest. Thanks for your reply

[@Skarredghost]

@@ace280671 You can get a free hosting service and upload the whole build directory there. Or you can try with Glitch

[@kevinjoel3822]

Hi thank for this video I need how to move forward in webxr...

[@AquaTwist_]

Thank you so much for this tutorial! I got the WebGL build working successfully on Itch. Sadly, I can only get it working with Unity Version 2019, 2020 didn't work for me.

[@Skarredghost]

Glad it helped! I have heart there are better WebXR exporters now, you can try with them!

[@machinejockey469]

thank you for the lesson

[@Skarredghost]

My pleasure to inform you, man!

[@tenzenin6301]

thank you so much for helping me out with the inputs with this tool. I was wondering, how would I host my project on node? i already have a self-signed https local dev environment set up in node, But I don't know where to point node or what config or packages might be needed.

[@hitlab]

Does anyone know how to change the default behavior of the finger swiping when opening the WebXR build on an IPhone? Currently, I can successfully build and deploy to my web server and I see the Dessert scene on my IPhone when I go to the URL. But when I try to swipe with my finger across the scene in order to orbit around the scene there is a limitation with the default finger swiping. You can't continuously swipe to get a smooth orbit around the scene. Everytime you touch the IPhone screen to swipe further the scene pops back to where you touch. Not sure if this makes sense?

[@Skarredghost]

Personally I don't know, I hope someone else can help you!

[@francescobrunocia3110]

Gran bel video!!! Stai ancora sviluppando con webXR?

[@Skarredghost]

Ciao! Al momento no perchè ho molte più richieste come sviluppo Unity nativo, ma spero di tornarci in futuro!

[@francescobrunocia3110]

@@Skarredghost hai Mai provato ad utilizzare l’image tracking di AR core con webxr? Funziona?

[@Skarredghost]

@@francescobrunocia3110 Non ho mai provato onestamente. So che ARCore ha delle funzionalità webxr, sennò puoi provare ar.js (che ho provato) o the 8th wall

[@hitlab]

I've searched the internet exhaustively and can't find anything on how to use this exporter to create Web AR from Unity. So you have any information on how to do this?

[@Skarredghost]

Mozilla told me it can't work with AR yet

[@hitlab]

Thanks!

[@Unreality3D]

Thank you for this great introduction! Is it still necessary to overwrite the Input Manager file?

[@Skarredghost]

For WebXR or for Unity and SteamVR?

[@Unreality3D]

@@Skarredghost I am not sure I understand the distinction, I thought the instructions were to overwrite the Unity Input Manager file with the version from GitHub for WebXR.

[@Skarredghost]

@@Unreality3D I don't remember, honestly, it has passed a lot of time... you should check out the setup page for this. BTW I don't even know if they are still maintaining this, after Mozilla layoffs

[@Unreality3D]

@@Skarredghost that is so sad! Thank you for the reply. I think in-browser XR is a necessity so I seriously hope development will continue!

[@mohammadrazakhan3852]

Hey I have a Oculus Quest 1 and When I hit play button It doesn't play in my Headset. My headset is connected with the pc with oculus link. I am getting some logs like " No active WebXR.WebXRSubsystem is available. Please ensure that a valid loader configuration exiss in the XR Project settings. " please help me with this

[@Skarredghost]

Have you configured your headset properly inside Unity? I mean, with the "Virtual Reality Supported" flag or the "Unity XR Plugin Management"?

[@mohammadrazakhan3852]

@@Skarredghost yes I have

[@mohammadrazakhan3852]

@@Skarredghost even after exporting that webgl project the build dont work in my firefox browser it just shows a never ending firefox fox loading screen in my headset

[@mxz2024]

how to allow mouse interaction in the same app in the browser? so that for example i got a Menu with buttons and can click on them with the mouse or use the hands/controller of the oculus ?:S

[@Skarredghost]

I don't know, you should ask mozilla :|

[@mxz2024]

@@Skarredghost i gotva solution which could work. MRTK with oculus quest in webxr ✌️

[@Skarredghost]

@@mxz2024 cool!

[@mohammadrazakhan3852]

How to make Movement and teleportation with that ?

[@Skarredghost]

Movement is easy once you listen to the input of the controller and you move the prefab with the camera+controllers

[@KangJaeKyun]

Hi, Thank you for your great tutorial for this. It helped a lot. I tried to using Oculus Quest with Link cable to test in Unity editor. However, there are several errors. XR: OpenVR Error! OpenVR failed initialization with error code VRInitError_Init_PathRegistryNotFound: "Installation path could not be located (110)"! and Virtual Reality SDK OpenVR failed to initialize. Will attempt to enable None instead. I am using Unity 2019.3.11. Do you have any idea how to fix this problem? thank you!

[@Skarredghost]

Have you tried launching SteamVR?

[@true_xander]

Watch on x1.5 speed. Otherwise pretty normal tutorial.

[@eliserwiedemann5221]

I successfully built the desert scene, and the preview works fine in the Oculus browser on the Quest. Unfortunately, when entering VR mode, the scene turns black. I have secure ssl-connection to the server. Any idea, what could cause this issue? Thank you for any advice!

[@Skarredghost]

Honestly, I have no idea... have you tried on PC VR with the Link so that to verify if it is a problem that holds only on the Quest? Have you tried the Firefox Reality browser to see if it works there?

[@eliserwiedemann5221]

@@Skarredghost Yes, all works fine within Unity/Link. I did some research and found this article: medium.com/@gamechefio/use-mozilla-webxr-exporter-in-unity-for-webgl-2-vr-games-81380c334070. Problem is, that the Mozilla Exporter in the asset store is too old and needs to be updated. Getting the whole project from github solved my problem: github.com/MozillaReality/unity-webxr-export Thank's again, looking forward to your next videos ;-)

[@pra53t10]

@@eliserwiedemann5221 would you like to share more the setting when you build into webgl in your project after using web XR project from GitHub? Still facing the same issue here :(

[@microgrinder3474]

Do you have a tutorial on making a simple multiplayer webXR experience?

[@Skarredghost]

You can try remixing the code of Mozilla Hubs, that is opensource! Also there was a multiplayer plugin for A-frame, you can also dig into it

[@matteomarucci6035]

what headset are u using? With HTC vive PRO when i click on the vr icon it doesnt shifts to vr...

[@Skarredghost]

I'm using Quest+Link

[@matteomarucci6035]

@@Skarredghost solved, it was the ssl certificate i was lacking on wamp server

[@Skarredghost]

@@matteomarucci6035 Grande!

[@Glitchesftw]

Does this work at all on Google Cardboard?

[@Skarredghost]

If you find a webxr browser that is compatible with cardboards, yes

[@heedoyoon1018]

VR 화면에서 그래픽 품질이 안좋습니다. 어떻게해야 됩니까?

[@Skarredghost]

If you talk about the resolution of your display, you should upgrade your headset. If you talk about the graphics of your application... well, try with better 3D models and better shaders. WebVR is not famous to have fantastic graphics, so experiment a lot with different shaders

[@heedoyoon1018]

@@Skarredghost 답변주셔서 감사합니다. :)

[@Skarredghost]

@@heedoyoon1018 You're welcome :D