de-panther/unity-webxr-export

Develop and export WebXR experiences using Unity WebGL

WebXR Export

You can check the live demo here.

Or the XR Interaction Toolkit demo here.

Develop and export WebXR experiences using the Unity Engine.

WebXR Export supports both Augmented Reality and Virtual Reality WebXR API immersive sessions.

It integrates the WebXR JavaScript API to Unity WebGL and lets you develop experiences in the familiar editor using C#.

⭐Star to show interest⭐

❤Sponsor to support the development❤

---

💾 Downloads

Better option: Import WebXR Export and WebXR Interactions packages from OpenUPM.

• WebXR Export
• WebXR Interactions

Or import the packages from git, more info at WebXR Export and WebXR Interactions.

📄 Documentation

For more info on getting started and how to use WebXR Export, you can check the Documentation folder.

🧩 Compatibility

Important notice regarding this Git repository - This repository use Symlinks. make sure that Symlinks are enabled when you clone.

git config core.symlinks true

Or just use this as a Unity Package (UPM), more info here

📝 Unity Editor version

• 2020.3.11f1 and up.
• 2021.1.4f1 and up.
• 2022.1 and up.
• 2023.1 and up.

🗺️ Browser Compatibility

This is a list of browsers and platforms that the WebXR Export demo was tested on.

Google Chrome on Windows.

Microsoft Edge on Windows.

Quest Browser on Meta Quests (1, 2, Pro, etc...).

Wolvic on Meta Quests (1, 2, Pro, etc...).

Microsoft Edge on Hololens 2.

Google Chrome on Android (Supports both AR and VR sessions).

Samsung Internet Browser on Android (Supports both AR and VR sessions).

Mozilla WebXR Viewer on iOS.

Firefox Reality on VIVE Focus Plus.

Wolvic on VIVE Focus 3.

Helio on Magic Leap 2.

PICO Browser on PICO 4 and PICO 4E.

Wolvic on PICO 4 and PICO 4E.

🐞 Has bugs/issues

Helio on Magic Leap One (Has a bug related to eye views).

Safari on Apple Vision Pro (Needs to enable flags in system settings. No selected event on hand pinch).

🛤️ Roadmap

WebXR Export version 0.20.0 and up includes Unity XR SDK support. Following that, AR Foundation support is next. Currently there's passthrough/seethrough and Hit-Test support not using AR Foundation. Version 0.20.0 also dropped the support for Built-in Render Pipeline, which needs more investigation if it's possible to add back.

⚙️ WebXR APIs support

WebXR Device API - Supports Unity Display and Input XR Subsystems

WebXR Gamepads Module (Including hapticActuators on supported devices) - Supports Unity New Input System

WebXR Augmented Reality Module

WebXR Hit Test Module (Currently limited to viewer space Hit Test source) - Not using AR Foundation hit test

WebXR Hand Input - Supports Unity XR Hands package

WebXR Input Profiles using WebXR Input Profiles Loader - Supports XR Interaction Toolkit

More features

Spectator Camera

WebXR Mixed Reality Capture

📊 Polyfilled WebXR / WebVR

If the user does not have supported headset, browser or device, the content will still work through the use of the WebXR Polyfill.

📱 Mobile support

This asset works by utilizing Unity's WebGL platform support and therefore shares the same limitations. Because of this, mobile support is limited and may not work. We did made sure to make it light, so mobile devices would be able to handle it, and it is able to run on high end mobile devices with some optimizations. See Unity's WebGL browser compatibility.

📜 Version History and Notes

You can check the changelogs of WebXR Export and WebXR Interactions for version history.

🤝 Contributing

You're encouraged to open an issue, report a problem, contribute with code, open a feature request, share your work or ask a question. But remember that it's an experimental project.

🔗 Useful links and info

Much of the WebXR upgrades and API usage made possible thanks to these resources.

WebVR to WebXR Migration Guide

WebXR Device API Explained

WebXR Input Profile Viewer

WebXR Samples

WebXR Polyfill

The Immersive Web Working Group/Community Group

SimpleWebXR by Rufus31415

WebXR Discord

🎞️ Credits

Special thanks to needle.tools for the help in making this a proper package.

Thanks to Brandon Jones (@toji) who wrote WebVR to WebXR Migration Guide and lots of samples that helped in converting the code from WebVR to WebXR.

Mozilla's Unity WebVR Export credits:

This project was heavily influenced by early explorations in using Unity to build for WebVR by @gtk2k, Chris Miller (@chrmi) and Anthony Palma.

Also, thanks to Arturo Paracuellos (@arturitu) for creating the 3D-hand models used for controllers in these examples.

⚖️ License

As the base project used the Apache License, Version 2.0, we will continue with it.

WebXR Export License:

Copyright 2020 Oren Weizman

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

---

This is a project based on Mozilla's Unity WebXR Exporter (from when it was WebVR exporter).

Unity WebVR Exporter License:

Copyright 2017 - 2018 Mozilla Corporation

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

unity-webxr-export's Issues

Wrong Hit-Test pose on Samsung Internet for Android

When using the Hit-Test feature on Samsung Internet browser, the position is few meters under the expected position.

Support for Unity XR Interaction Toolkit

While Unity XR SDK doesn't support WebGL, which hinders #3 (Use Unity's new XR Management package), it may be possible to inject data to packages that rely on the XR SDK and XR Providers.

https://docs.unity3d.com/Packages/com.unity.xr.interaction.toolkit@latest/index.html
Unity XR Interaction Toolkit is a popular package, with lots of ready made components for AR and VR.
Might be relevant to create a new UPM Package for a layer between XR Interaction Toolkit and WebXR Export.

Oculus Quest Browser - Stuck at loading

When I try this with my Oculus Quest I get an indefinitely loading screen after clicking on the VR-Button.
There's no error message in the console and setting breakpoints etc. works. Therefore it is running, only the rendering does not work.

You have any idea?

Unity 2019.3.6f1
Oculus Quest Firmware 14

Edit: Forgot to thank you for this project!

Basic implementation of WebXR

Basic implementation of WebXR, with all the bugs from the GGJ2020 project

Allow user to start session from inside Unity

This an enhancement idea, would be nice if we can control the VR (or AR) start process from inside Unity (using a UI button), allowing for fullscreen webgl wrapper templates.

Multiplayer?

I made a couple scripts that allow peer-to-peer multiplayer through WebRTC and was wondering if you would find it useful enough for the repo.

BTW: It currently uses the SendMessage command but I think it could be optimized by passing data between JS and Unity similar to how the XR data is passed. Also I have it functional between two players but currently working on an implementation for more.

Page freezes when unloading and reloading Unity instance

It's normally possible to reload Unity on a running webpage by unloading the current instance (using gameInstance.Quit()) and then loading a new one (using UnityLoader.instantiate as usual) in a callback. However, as soon as I include the webxr.js from this project in the page, this reload completely freezes the page. I suppose there's an issue with the XRManager where it doesn't know how to deal with this program state and doesn't correctly switch over to the new instance. And as far as I can tell, XRManager doesn't expose any methods to shut it down (let alone create a new one, since the type and initWebXRManager methods are not exposed by the module).

Is there an easy way to work around this issue? Otherwise it would be great if the project could support instance reloads out of the box.

Unity package link not working anymore

Hello,

exciting to see this project be taken so far ahead, keen to try it out and noticed there might be a unitypackage around, would that still be available?

"Or just use this as a Unity Package (UPM), more info here" <---- that link where "here." points to

Thank you!

Hand model off by about 45 degrees in Oculus Quest

When loading into WebXR on a Quest (either directly in the Oculus Browser, or through Oculus Link from a PC), the hand models seem to point 45 degree upwards from where they should be. I'm not seeing this issue with an HTC Vive. I don't know if this problem is with the plugin, WebXR or Oculus's OpenXR runtime, but is there a way this plugin could take this discrepancy into account? Alternatively, is there a way to determine which headset is actually being used while WebXR is active, so I could apply a rotation manually?

IntelliSense not working in Visual Studio

My VS code Intellisense for Unity works fine for all projects except when working with the scripts that come with this project. If I create my own scripts, it works fine. Anyone else experienced this?

Ex. this is the SceneHitTest.cs file that comes with the project.

"No active WebXR.WebXRSubsystem is available" Error - Can't See Anything in Oculus Quest via Link (Running in Editor)

I recently followed your Getting Started guide. I've set up my project in Unity 2019.4.18f1 under the WebGL platform; but I can't see anything in the HMD.

I also get the following error:

No active WebXR.WebXRSubsystem is available. Please ensure that a valid loader configuration exists in the XR project settings.
UnityEngine.Debug:LogWarningFormat(String, Object[])
WebXR.SubsystemLifecycleManager`2:GetActiveSubsystemInstance() (at Library/PackageCache/com.de-panther.webxr@803e390e10/Runtime/XRPlugin/XRSystemLifecycleManager.cs:57)
WebXR.SubsystemLifecycleManager`2:EnsureSubsystem() (at Library/PackageCache/com.de-panther.webxr@803e390e10/Runtime/XRPlugin/XRSystemLifecycleManager.cs:37)
WebXR.SubsystemLifecycleManager`2:Awake() (at Library/PackageCache/com.de-panther.webxr@803e390e10/Runtime/XRPlugin/XRSystemLifecycleManager.cs:26)
WebXR.WebXRManager:Awake() (at Library/PackageCache/com.de-panther.webxr@803e390e10/Runtime/Scripts/WebXRManager.cs:64)

I am not sure what that's all about or how to fix it.

Suggestion: Non XR support controls

The Mozilla repo has the click and drag to look around as well as WASD to move for people without XR devices. I was wondering if you thought it would be a good idea to have that, but instead use Cursor.lockState = CursorLockMode.Locked; and track mouse position for a better experience. This would make the cursor act like any normal first person game.

Pros: This method doesn't make the user move the mouse back and forth to turn the camera in a single direction.

Cons: People who haven't played first person games before may be more confused when using this method of looking around over the click/drag method

I've been using this in a project of mine so if you think this is a good idea I can give you some code

Head tracking stops when switching scenes depending on skybox/lighting

Head tracking can stop when switching between scenes. I have a Vive and I'm using Firefox. If you duplicate the sample scene and switch between the two, it's fine. I have figured out it's something related to the skybox/lighting. Say I duplicate the scene and switch the skybox (ex. to something from https://assetstore.unity.com/packages/2d/textures-materials/sky/skybox-add-on-136594). When I switch from the sample scene to the duplicated one, the head tracking freezes even though the controllers can still move around. I can't pinpoint exactly what the issue is since some skyboxes don't freeze tracking... Any ideas?

About ios device

Hi, i have a question, will webxr will support ios safari future? I see it can run on mazilla xrviewer now

Update documentation and links

Update the old documentation and links, to work with the new API and the current repository

How load new scene?

When i try to load new scene with the headset, don't work. I can't "look around".

2020 support? (what actually doesnt work?)

As in title i've made mistake and didn't read about the lack of support for 2020 edition,
Is that not a big deal or should I migrate assets to 2019 lts?

Can not press ar button

The AR button is disabled all the time no matter what I do.

WebXR AR Hit Test

The current WebXR API doesn't have implementation of plane/surface detection, but it does have Hit Test.
To make the AR option useful, need to implement this hit test, so users would be able to position objects in the world.

Compatible with IOS?

Hi, I tried the demo:
https://de-panther.github.io/unity-webxr-export/Build/
with my android device and it works NICE!
But on both my iPhone 7 and iPhone 10 the AR button is NOT selectable... (ARFoundation works on both device)
This project is not compatible with IOS?

Support touch input on handheld devices

Currently when using handheld devices (e.g. Chrome for Android and Cardboard), while touching the screen, there's no pointer/touch/mouse events in Unity.

The events can be handle by listening to XRSession "select", "selectstart" and "selectend".
It seems that those events can recognize only one finger at a time.

Cardboard (VR):
Don't have finger position on the screen, but we only need to know when the touch starts and ends.

AR:
On Chrome 81, there's no support for DOM Overlay (will be in Chrome 83), so we only have one finger and two axis with values between -1 and 1, using the "select" events and the Gamepad API.
When there'll be DOM Overlay support, we would be able to put invisible div in front of the AR view and listen to the touch events the same way Unity listens to touch events on the canvas.

webXR namespace can't be found

code I write can't access the WebXR functions (for example webXRController.GetButton(WebXRController.ButtonTypes.ButtonA) ), Unity can't find the namespace. Does this have to do something with webXR being inside the Packages 'folder'.

by the way, great asset! 👍

Protect compilation on other platforms

Hello, is it possible to consider adding conditional compilation statements in the code so that there is no error on other platforms than WebGL while keeping the package in place? Such as this one on iOS for example

Library/PackageCache/com.de-panther.webxr-interactions@5beeca6ce5/Runtime/Scripts/SceneHitTest.cs(60,38): error CS0246: The type or namespace name 'WebXRHitPoseData' could not be found (are you missing a using directive or an assembly reference?)

Camera move

Hi guys, I wish I could move around in VR with the controllers. Teleportation or other.
Do you have a script for that?

Image tracking support

I'd like it if there was a module for image tracking. Image tracking are one of the most common types of AR experiences, along with plane detection.

Trigger and Grip select not called on Oculus Link + Firefox

It seems that pressing on Trigger or Grip don't call the select action when running on Oculus Link + Firefox.

WebXRController.Axis2DTypes.Thumbstick Y axis is inversed in webgl build

controller.GetAxis2D(WebXRController.Axis2DTypes.Thumbstick).y > 0.75

Means thumbstick down in webGL, but thumbstick up in Unity Editor.

Web VR button is grey on Oculus Quest, while it works on Cardboard

I've Used webXRfull template for my application, works flawlessly in flat mode in almost all browsers.
There is one issue tho - i cant enable the VR button (always gray even when the loading bar is full and the app actually starts).
Weirdly the it works on Carboard without any issues (both android and ios).

Request Feature: Fullscreen Browser

Currently, I can't use the Unity WebXR Plugin because of performance issue in the Oculus Quest but your tweak plugin is very smooth in the device. Very cool and awesome.

It would be great if there would be a full screen button for browser.
I did some tweaks as I only know the basics, but it seems creating this fullscreen is not simple. What I encounter is that, whenever I change the size of the desktop browser to a fullscreen, the screen size in the Oculus Quest doesn't run properly.

(Not a good tweak as the VR in Oculus Quest is out of place)

The simple tweak I used is to force the browser stretched:
In html.index...
script> unityContainer.onclick = function() { unityContainer.requestPointerLock(); } </script

changed the code in html.index....
div id="unityContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px"></div
into...
div id="unityContainer"></div"

and then add the width and height in style.css
.webgl-content {background-color: #ffffff; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

Use Unity's new XR Management package

Unity 2019.3 introduce new XR system, which removed the VR/XR providers from the built-in editor, now developers implement VR systems using packages.
https://docs.unity3d.com/Packages/[email protected]/manual/Provider.html

Needs to find a way to generate Unity Package from this git repository(probably a separate brunch).
Generate Unity Package.
Make sure to comply with the XR Management Package author documentation.

Multi touch sources in handheld AR session

Instead of one source that sends mouse input events, scan all the XRFrame.inputSources for more touch events.
Sample for reference
https://storage.googleapis.com/chromium-webxr-test/r837792/proposals/phone-ar-hit-test.html?debugSources=true
https://source.chromium.org/chromium/chromium/src/+/master:third_party/webxr_test_pages/webxr-samples/js/debug-sources.js

Separate Hand Input API from WebXRController

Currently one can use the Hand Input API from WebXRController.
But it isn't implemented well.
One option is to separate the Hand Input API to WebXRHand class, other is to re-implement the API in WebXRController in a better way.

mobile ar support

Hello, does it support WebAR on iOS and Android or future?

Update Hands API for better performance

As the Hands API is going to change soon, and there's better performance API, switch to use XRFrame.fillJointRadii and XRFrame.fillJointPoses instead of XRFrame.getJointPose.

MSAA support

would be nice to get anti-aliasing working without the framerate hit. For example 4x MSAA

Allow start height / floor plane to come from VR device

On default scene / settings, the user is started at around 2 units / 2 meters, even when sitting down.

Tested on Oculus Quest.

WebXR2020 and WebXR2020FullView appear to be broken

Hi @De-Panther , I tested all the templates, and while webxr and webxrfullview templates worked well, the other 2 templates webxr2020 and webxr2020 didn't work as expected.

Here are the deployments:
https://webxr-2020-template.netlify.app/
https://webxr-fullview2020-template.netlify.app/

Stabilize WebXR implementation

Bug fixes - Enable closing/opening VR session multiple times.
Wait for page permission.
Don't use SendMessage.

Samples no longer work

Hi,

I tried out the Desert scene sample appr. 2 weeks ago and it was all fine. I could run the AR and VR session on my Android phone on Chrome without any issues, it was working pretty well.
Tried the same thing now and the page mysteriously freezes when I press on either AR or VR buttons in a build. Pressing on AR stretches the view in a weird way and just stays there. Pressing on VR displays two views and does nothing.
I tried to uncheck "Initialize XR on Startup" as suggested from another issue just in case, did not help.
I am running the build through an HTTPS server.

Is it possible that Chrome got updated in the meantime and the samples are no longer compatible? Or is this a known issue that just appeared?

Adding Post-process Layer creates a weird fisheye effect

Not sure if it's a user error, but I'm trying to use anti-aliasing on my left/right cameras, and placing a post-process layer on the camera (without any effects applied to it) will create some crazy zoom in fisheye effect.

To recreate: Apply a post-process layer to the CameraL/CameraR GameObjects in the WebXRCameraSet prefab.

BTW this repo is freaking awesome, thank you so much for making this.

Adding docs and how-to

There are no docs and tutorials about the different components and how to start a project or import the packages.

I think that creating a general docs folder at the root of the repo, and link from docs folders of the packages would be easier to maintain.

Update Readme

Update Readme file to include info about WebXR instead of WebVR

Haptic feedback

Is there any way to add haptic feedback to the basic setup?

Stuck in loading screen

hello,
so ive tried building and run the sample scene from git and run it on chrome , but the proggress bar stuck at 90% in browser .
ive using the webxr2020 and webxr2020fullview, while using the webxr and webxrfullview simply didnt show anything in browser

im using unity 2020.1.17f1

is there anything i missed in the instalation or something just not compatible
thanks!

Spatial movement in AR

I'm not sure if I'm missing something, but in my own test project and with the sample I can't seem to get translational movement, only rotation.
I want to just build AR, not worry about supporting VR, and I'm trying to figure out how to simplify it right down to a scene with an object in it that I can walk around.

Integrate WebXR Input Profiles Loader

Share Input Profiles names between JS and Unity, to enable the use of WebXR Input Profiles Loader
https://github.com/De-Panther/webxr-input-profiles-loader

Create GitHub Page for this repository

Build an example project and set a GitHub page

Foveated rendering support

Would be nice to have if possible, for performance on un-tethered

Screen clicks do not work in AR mode on iOS WebXR Viewer (works on Chrome on Android)

When using the demo scene in AR mode on Chrome on an Android device, the cubes on the table can be dragged just like in the normal mode. On the WebXR Viewer on my iPhone 8, this does not work.

Doing some debugging, I see I am getting bad values returned from Input.mousePosition. The X value is correct, but the Y value is wrong. The following are some values I got from Input.mousePosition when tapping the screen (note: bottom clicks are off a bit in Y due to a UI element at the bottom of the view).

I'm not really sure this is a WebXR plugin bug, but maybe I'm wrong. Either way, I thought it was important to point out to the community, and see if anyone has any suggestions on how to fix/handle this.

Getting Error `Unable to Find UnityLoader.js`

Hi,

Thank you so much for building the webXR unity plugin, For some reason i'm getting the following Error. As it seems to not able to import UnityLoader.js

uncaught exception: abort(-1) at jsStackTrace (webxr4.wasm.framework.unityweb:8:44792)
stackTrace (webxr4.wasm.framework.unityweb:8:44963)
onAbort@file:///Users/ronakchovatiya/Downloads/webxr4/Build/UnityLoader.js:4:11199
abort (webxr4.wasm.framework.unityweb:8:544149)
__ZN15XRInputTracking3GetEv (webxr4.wasm.framework.unityweb:8:86939)
@blob:null/11b4a3ab-92e5-5f41-b3d0-4d04876299b5 line 8 > WebAssembly.instantiate:wasm-function[24588]:0xc03b2a (blob:null/11b4a3ab-92e5-5f41-b3d0-4d04876299b5 line 8 > WebAssembly.instantiate:wasm-function[61202]:0x12e9710)

Here is example of my project on Github - https://github.com/rchovatiya88/unity-webxr

P.S i followed all the steps from FusedVR tutorial as well.

Thanks!

• Roncho