{"id":15146716,"url":"https://github.com/rufus31415/simple-webxr-unity","last_synced_at":"2025-04-04T11:10:58.635Z","repository":{"id":39696085,"uuid":"271073201","full_name":"Rufus31415/Simple-WebXR-Unity","owner":"Rufus31415","description":"⭐ Bringing WebXR to Unity 3D ! B-)","archived":false,"fork":false,"pushed_at":"2024-04-25T08:34:40.000Z","size":775757,"stargazers_count":590,"open_issues_count":13,"forks_count":85,"subscribers_count":45,"default_branch":"master","last_synced_at":"2025-03-28T10:06:24.932Z","etag":null,"topics":["augmented-reality","csharp","firefox-reality","hololens","javascript","mixed-reality-headsets","mrtk","oculus-browser","oculus-quest","unity","webgl","webxr","xrtk"],"latest_commit_sha":null,"homepage":"https://rufus31415.github.io/webxr/MRTK-HandInteraction/","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Rufus31415.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":"paypal.me/FlorentGIRAUD","github":"Rufus31415"}},"created_at":"2020-06-09T17:56:13.000Z","updated_at":"2025-03-20T05:09:10.000Z","dependencies_parsed_at":"2025-01-15T17:32:21.827Z","dependency_job_id":"d0beaa69-a723-4dbe-a57c-22c7b5d8ffff","html_url":"https://github.com/Rufus31415/Simple-WebXR-Unity","commit_stats":{"total_commits":152,"total_committers":6,"mean_commits":"25.333333333333332","dds":0.493421052631579,"last_synced_commit":"ff24aac941240df1e0b329fc547d9345d2db1d12"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rufus31415%2FSimple-WebXR-Unity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rufus31415%2FSimple-WebXR-Unity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rufus31415%2FSimple-WebXR-Unity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rufus31415%2FSimple-WebXR-Unity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rufus31415","download_url":"https://codeload.github.com/Rufus31415/Simple-WebXR-Unity/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247166168,"owners_count":20894654,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["augmented-reality","csharp","firefox-reality","hololens","javascript","mixed-reality-headsets","mrtk","oculus-browser","oculus-quest","unity","webgl","webxr","xrtk"],"created_at":"2024-09-26T12:04:07.044Z","updated_at":"2025-04-04T11:10:58.619Z","avatar_url":"https://github.com/Rufus31415.png","language":"C#","funding_links":["paypal.me/FlorentGIRAUD","https://github.com/sponsors/Rufus31415","https://github.com/sponsors/Rufus31415/"],"categories":[],"sub_categories":[],"readme":"![SimpleWebXR](/images/banner.png)\n\n\n# What is SimpleWebXR ?\nSimpleWebXR is a lightweight library that exposes the [WebXR](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API) javascript API in your C# [Unity](https://unity.com/) code.\nThus, after a Unity [WebGL build](https://docs.unity3d.com/Manual/webgl-gettingstarted.html), your app can do augmented or virtual reality in the browser.\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://github.com/Rufus31415/Simple-WebXR-Unity/stargazers\"\u003e\u003cb\u003e⭐ Star if you like it !\u003c/b\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://github.com/Rufus31415/Simple-WebXR-Unity/watchers\"\u003e\u003cb\u003e👁️ Watch to be notified of latest updates !\u003c/b\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Star History\n\n[![Star History Chart](https://api.star-history.com/svg?repos=Rufus31415/Simple-WebXR-Unity\u0026type=Date)](https://star-history.com/#Rufus31415/Simple-WebXR-Unity\u0026Date)\n\n\n---\n\n# Compatible browsers\nWorks on :\n- [Google Chrome](https://play.google.com/store/apps/details?id=com.android.chrome) on Android (:warning: a secure https connection is required)\n- [Edge](https://docs.microsoft.com/windows/mixed-reality/new-microsoft-edge) on Windows 10 for Mixed Reality Headsets\n- [Edge](https://docs.microsoft.com/hololens/hololens-insider#introducing-the-new-microsoft-edge) on Hololens 2\n- [Firefox Reality](https://www.microsoft.com/p/firefox-reality/9npq78m7nb0r?activetab=pivot:overviewtab) on Hololens 2\n- [Mozilla WebXR Viewer](https://apps.apple.com/app/webxr-viewer/id1295998056) on iOS  (:warning: WebGL 2.0 should be disabled, it's a Webkit experimental feature)\n- [Oculus Browser](https://developer.oculus.com/webxr/) on Oculus Quest 1 and 2\n- [Firefox emulator](https://addons.mozilla.org/firefox/addon/webxr-api-emulator/) on desktop\n- [Chrome emulator](https://chrome.google.com/webstore/detail/webxr-api-emulator/mjddjgeghkdijejnciaefnkjmkafnnje) on desktop\n\n---\n\n# Integration examples\n\n## MRTK\n\n[Mixed Reality Toolkit](https://github.com/microsoft/MixedRealityToolkit-Unity) is a Microsoft-driven project that provides a set of components and features, used to accelerate cross-platform MR app development in Unity. It supports Hololens, Windows Mixed Reality headset, OpenVR, Ultraleap, Mobile devices and now **WebXR** !\n\nThe files in directory [/SimpleWebXR-Demo/Assets/SimpleWebXR/Scripts/MRTK](https://github.com/Rufus31415/Simple-WebXR-Unity/tree/master/SimpleWebXR-Demo/Assets/SimpleWebXR/Scripts/MRTK) add WebXR capabilities to MRTK with the following functions: controller tracking, **hand** tracking, hand ray, index pointer, grip pointer and spatial pointer. Teleportation could be added.\n\nLIVE DEMO:\n\n- Hand interaction : [▶️ https://rufus31415.github.io/webxr/MRTK-HandInteraction](https://rufus31415.github.io/webxr/MRTK-HandInteraction/)\n- Color picker : [▶️ https://rufus31415.github.io/webxr/MRTK-ColorPicker](https://rufus31415.github.io/webxr/MRTK-ColorPicker/)\n- Elastic menus : [▶️ https://rufus31415.github.io/webxr/MRTK-ElasticSystem](https://rufus31415.github.io/webxr/MRTK-ElasticSystem/)\n- Hand coach : [▶️ https://rufus31415.github.io/webxr/MRTK-HandCoach](https://rufus31415.github.io/webxr/MRTK-HandCoach/)\n- Hand menu : [▶️ https://rufus31415.github.io/webxr/MRTK-HandMenuLayout](https://rufus31415.github.io/webxr/MRTK-HandMenuLayout/)\n- Material gallery : [▶️ https://rufus31415.github.io/webxr/MRTK-MaterialGallery](https://rufus31415.github.io/webxr/MRTK-MaterialGallery/)\n- Scrolling menus : [▶️ https://rufus31415.github.io/webxr/MRTK-ScrollingObjectCollection](https://rufus31415.github.io/webxr/MRTK-ScrollingObjectCollection/)\n- Solvers : [▶️ https://rufus31415.github.io/webxr/MRTK-Solver](https://rufus31415.github.io/webxr/MRTK-Solver/)\n\n| Hololens 2 | Oculus Quest |\n|:-------------------------:|:-------------------------:|\n|\u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/mrtk-hololens.gif\"\u003e|  \u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/mrtk-quest.gif\" height=\"225px\"\u003e|\n\n| iOS | Emulator |\n|:-------------------------:|:-------------------------:|\n|\u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/mrtk-ios.gif\"\u003e|  \u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/mrtk-simulator.gif\" height=\"225px\"\u003e|\n\nFun **simulation** features in browser, you can simulate your Hololens, like in Unity editor :\n\n| Mouse interaction | Hand simulation (MAJ/SPACE and T/Y) | Scene navigation |\n|:-------------------------:|:-------------------------:|:-------------------------:|\n|\u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/mrtk-mouse.gif\"\u003e |  \u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/mrtk-hand-simulation.gif\"\u003e|\u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/mrtk-move.gif\"\u003e|\n\n\nMRTK version : 2.6.1\n\n---\n\n## Simple hand tracking\nSimpleWebXR supports hand tracking. This example displays a sphere on each joint of the detected hands. The radius of this sphere is given by the device. It was tested on Hololens 2 and Oculus Quest.\n\nYou need to set flags to enable hand tracking. In firefox reality, open setting panel and set ```dom.webxr.hands.enabled``` to true. In Oculus Browser, visit chrome://flags/ and enable #webxr-hands.\n\n\nLIVE DEMO : [▶️ https://rufus31415.github.io/webxr/HandDetectionExample/](https://rufus31415.github.io/webxr/HandDetectionExample/)\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/hand-tracking.gif\" height=\"150px\"/\u003e\u003c/p\u003e\n\n\n---\n\n## Spectator view\nWhen wearing a HoloLens, we often forget that a person who does not have it on is unable to experience the wonders that we can. Spectator View allows others to see on a 2D screen what a HoloLens user sees in their world.\n[This Microsoft project](https://github.com/microsoft/MixedReality-SpectatorView) is a native spectator view app for iOS and Android. But here, the spectator view is in your browser. WebXR is optional because you can walk around the Hololens space with the keyboard and mouse.\n\nLIVE DEMO : [▶️ https://rufus31415.github.io/sandbox/simple-webxr-spectator/](https://rufus31415.github.io/webxr/SpectatorViewWebXRClient/)\n\nDOWNLOAD : [⏬ Hololens 2 ARM appx and dependencies](https://github.com/Rufus31415/rufus31415.github.io/tree/master/webxr/SpectatorViewHololens2Server)\n \nScene for Hololens 2 (MRTK) : [/Assets/SimpleWebXR/Scenes](https://github.com/Rufus31415/Simple-WebXR-Unity/tree/master/Assets/SimpleWebXR/Scenes)/\nSpectatorViewHololens2Server.unity. To compile, this scene, do not use UWP SDK 19041, it has socket server issues.\n\nUnity scene for Mobile (WebGL) : [/Assets/SimpleWebXR/Scenes](https://github.com/Rufus31415/Simple-WebXR-Unity/tree/master/Assets/SimpleWebXR/Scenes)/\nSpectatorViewWebXRClient.unity\n\n| Mobile | Move in Hololens space with mouse/keyboard or Follow user head |\n|:-------------------------:|:-------------------------:|\n|\u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/spectator-view-ios.gif\" height=\"150px\"/\u003e|\u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/spectator-view-desktop.gif\" height=\"150px\"/\u003e|\n\nComparison with Microsoft solution :\n\n|| Simple WebXR Spectator view | Microsoft native spectator view |\n|:-------------------------:|:-------------------------:|:-------------------------:|\n| iOS | YES : WebXR Viewer, Safari or Chrome (move in Hololens space with touch screen) | YES (ARKit) |\n| Android | YES (Chrome) | YES (ARCore) |\n| Desktop | YES, you can move in hololens space with mouse and keyboard  | NO |\n|Communication Mobile/Hololens| Websocket | WebRTC |\n|FPS| 10 | 60 |\n|Calibration| Touch the screen | Scan a QR Code |\n|Experimental| YES | NO |\n\n\n## Paint example\nThis is a very basic example on how to use Simple WebXR. It uses Unity Line Renderer to draw lines in space with your hands/controllers.\n\nLIVE DEMO : [▶️ https://rufus31415.github.io/webxr/PaintExample/](https://rufus31415.github.io/webxr/PaintExample/)\n\n| Android | Hololens 2 | iOS | Quest | Emulator |\n|:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:|\n|\u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/paint-android.gif\"\u003e |  \u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/paint-hololens.gif\"\u003e|\u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/paint-ios.gif\"\u003e|\u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/paint-quest.gif\"\u003e  |  \u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/paint-simulator.gif\"\u003e|\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://youtu.be/cUkAdI4lJOA\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/paint-youtube.png\" height=\"150px\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nSources are [here](https://github.com/Rufus31415/Simple-WebXR-Unity/blob/master/Assets/SimpleWebXR/Scripts/PaintExample/PenController.cs)\n\n---\n\n## XR CAD file viewer\nOpens 45+ 3D CAD formats in your browser (FBX, STEP, OBJ, Collada, GLTF, OnShape, ...) and now, view them in VR/AR with WebXR !\n\nLIVE DEMO : [▶️ https://rufus31415.github.io/sandbox/3d-viewer](https://rufus31415.github.io/sandbox/3d-viewer)\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/3d-viewer.gif\" height=\"200px\"/\u003e\u003c/p\u003e\n\n\n[work in progress...](https://github.com/Rufus31415/react-webgl-3d-viewer-demo)\n\n---\n\n\n## XRTK\nThe [Mixed Reality Toolkit](https://github.com/XRTK/XRTK-Core)'s primary focus is to make it extremely easy to get started creating Mixed Reality applications and to accelerate deployment to multiple platforms from the same Unity project.\n\nLIVE DEMO : [▶️ https://rufus31415.github.io/sandbox/simple-webxr-xrtk-solvers/](https://rufus31415.github.io/sandbox/simple-webxr-xrtk-solvers)\n| iOS | Emulator |\n|:-------------------------:|:-------------------------:|\n|\u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/xrtk-solvers-ios.gif\" height=\"225px\"\u003e |  \u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/xrtk-solvers-simulator.gif\" height=\"225px\"\u003e|\n\n[work in progress...](https://github.com/XRTK/WebXR)\n\n---\n\n## HPTK\n\nHand Physics Toolkit (HPTK) is a toolkit to implement hand-driven interactions in a modular and scalable way. Platform-independent. Input-independent. Scale-independent.\n\nI am currently studying the implementation of WebXR in this framework.\n\nOriginal repo : https://github.com/jorgejgnz/HPTK-Sample\n\nMy fork and WebXR implementation : https://github.com/Rufus31415/HPTK-Sample-WebXR\n\nLIVE DEMO : [▶️ https://rufus31415.github.io/webxr/HPTK/](https://rufus31415.github.io/webxr/HPTK/)\n\n(![hptk](https://user-images.githubusercontent.com/22075796/120713557-60b36080-c4c2-11eb-93b3-a09faf711758.jpg))\n\n\n---\n\n# Quick start\n\n## Import and build a sample scene\n\nFirst create a new 3D project\n\n![tuto_NewProject](https://user-images.githubusercontent.com/22075796/117204491-a5c77280-adf0-11eb-8b86-409dfe25424e.JPG)\n\nDownload the latest release of SimpleWebXR : https://github.com/Rufus31415/Simple-WebXR-Unity/releases\n- ```SimpleWebXR.unitypackage```: contains only SimpleWebXR and its demo scenes\n- ```SimpleWebXR+MRTK.unitypackage``` : contains SimpleWebXR addon for MRTK. MRTK should be initialized in your project, see : https://docs.microsoft.com/windows/mixed-reality/mrtk-unity/\n\n\nOpen the unitypackage file and import all resources : in tab ```Project```, right click on ```Assets \u003e Import Package \u003e Custom Package```\n\n![image](https://user-images.githubusercontent.com/22075796/117205332-c93eed00-adf1-11eb-8426-49f5773fa17f.png)\n\nFrom the directory ```Assets/SimpleWebXR/Example/Scenes```, just drag/drop a scene (for example the PaintExample) in the tab \"Hierarchy\"\n. You can play the scene, but it won't do anything (except if you are playing a MRTK sample).\n\nThen, build the scene : ```File \u003e Build Settings...```. Remove all scenes from the list and click ```Add open scenes``` so that you only get the scene we are going to build.\n\nSelect the WebGL plateform and click ```Switch platform```. Then click the ```Build``` button and create and select a ```Build``` directory next to Assets.\n\n![image](https://user-images.githubusercontent.com/22075796/117208767-ca721900-adf5-11eb-831f-14c16804052c.png)\n\n## Run your build locally in your browser\n\nYour browser should be compatible with WebXR. For a first try, you can install the emulator :\n- For Chrome : https://chrome.google.com/webstore/detail/webxr-api-emulator/mjddjgeghkdijejnciaefnkjmkafnnje\n- For Firefox : https://addons.mozilla.org/firefox/addon/webxr-api-emulator\n\nYou now need a http server to serve you files. I recommend this one : https://www.npmjs.com/package/http-server\n- Just download node.js : https://nodejs.org/\n- install the server in your system with the command ```npm install --global http-server```\n\n\nYou can now open a command line in your directory ```Build``` and run ```http-server```. Open your browser to the url : http://120.0.0.1:8080 then open the inspector and you should have a tab \"WebXR\" from where you can select your simulated device. You can move the controllers and the headset from here.\n\nNow click the button \"Start VR\" to enter in immersion. Congrats !\n\n![image](https://user-images.githubusercontent.com/22075796/117209832-32752f00-adf7-11eb-8c80-47a29058c1b4.png)\n\n\n## Run your build on your smartphone or headset\n\nYou can continue to host the page on your PC and serve it to other devices. The difficulty is that most browsers require a secure context for WebXR, i.e. https or localhost.\n\nSo it's a bit more complicated, but not impossible ;) ! First you need a certificate :\n- Download openssl. If you are on windows, download ```binaries``` from : http://gnuwin32.sourceforge.net/packages/openssl.htm\n- Extract and run the command : ```openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem -config **PATH_TO_OPENSSL**\\share\\openssl.cnf```where **PATH_TO_OPENSSL** is the absolute path to the directory you just extracted.\n- This will generate the files ```cert.pem```and ```key.pem```\n- Move these files in your Build directory\n\nTo serve your files, you should now run ```http-server -S -C cert.pem``` in your Build directory. You will see in the console all the URLs where the build is accessible. In your smartphone or headset, type the one with the same subnetwork than your PC. Ensure that your firewall accepts the request. On your device, the browser will say the page is not secure, but anyway, you can continue ;)\n\n\n\n# Installation\nJust add these 3 files in your Unity Asset folder, then add SimpleWebXR MonoBehavior on a game object in your scene.\n- [SimpleWebXR.cs](https://github.com/Rufus31415/Simple-WebXR-Unity/blob/master/com.rufus31415.simplewebxr/Runtime/Scripts/SimpleWebXR.cs): Mono Behaviour that displays the \"Start AR\" button and communicates with javascript. This behavior should be in your scene.\n- [SimpleWebXR.jslib](https://github.com/Rufus31415/Simple-WebXR-Unity/blob/master/com.rufus31415.simplewebxr/Runtime/Plugins/WebGL/SimpleWebXR.jslib): Javascript plugin that is included in the application and that makes the link between the Unity engine and the WebXR session. It displays the rendering and obtains the positions and characteristics of the camera.\n- [SimpleWebXR.jspre](https://github.com/Rufus31415/Simple-WebXR-Unity/blob/master/com.rufus31415.simplewebxr/Runtime/Plugins/WebGL/SimpleWebXR.jslib): Javascript plugin executed before the application that initializes a number of things.\n\n## Download Unity Package\nDownload the latest release of SimpleWebXR from : https://github.com/Rufus31415/Simple-WebXR-Unity/releases\n- ```SimpleWebXR.unitypackage```: contains only SimpleWebXR and its demo scenes\n- ```SimpleWebXR+MRTK.unitypackage``` : contains SimpleWebXR addon for MRTK. MRTK should be initialized in your project, see : https://docs.microsoft.com/windows/mixed-reality/mrtk-unity/\n\n## Add from Package Manager\n\nYou can add the package ```com.rufus31415.simplewebxr```from the Package Manager. Go to ```Window \u003e Package Manager``` Click the button ```+ \u003e add package from git URL``` and enter ```https://github.com/Rufus31415/Simple-WebXR-Unity.git?path=/com.rufus31415.simplewebxr/```, after clicking on ```add``` it can take minutes even if Unity doesn't seem busy.\n\n![image](https://user-images.githubusercontent.com/22075796/117214228-ceee0000-adfc-11eb-994a-0eab9048565d.png)\n\n\n## Edit ```manifest.json``` file\n\nFor the bravest, you can edit the file ```Packages/manifest.json``` so that it contains the line :\n``` json\n{\n  \"dependencies\": {\n    \"com.rufus31415.simplewebxr\": \"https://github.com/Rufus31415/Simple-WebXR-Unity.git?path=/com.rufus31415.simplewebxr/\",\n    ...\n    ...\n  }\n}\n```\n\n# Samples\nYou can use the examples provided in this repository as a starting point.\n\nAll sample builds can be dowloaded as a zip file from here : ⏬ https://github.com/Rufus31415/rufus31415.github.io/tree/master/webxr\n\n# Compilation\nThe project must be compiled in WebGL, otherwise SimpleWebXR will have no effect. You can use the \"Demo\" WebGL template that is provided, but you can also use the Default one. The project has been tested with Unity 2018.4 and Unity 2020.3.\n\n# Runtime\nWhen compiled as a WebGL app, if the browser is WebXR compatible, it will display a \"Start AR\" or \"Start VR\" button on your canvas.\nYou don't need a specific WebGL Template, so you can keep using yours.\n\n# Get started\n## SimpleWebXR MonoBehavior\nTo begin with, **it is recommended to have the SimpleWebXR component active in the scene** at all times. I recommend you to create a root game object \"WebXR\" which contains only the SimpleWebXR component.\n\nThis one will manage two things:\n- It will display the \"Start AR\" or \"Start VR\" button at the bottom of the canvas, and will start the session if the user presses it.\n- It will call to each frame the function ```SimpleWebXR.UpdateWebXR()```.\n\nHowever SimpleWebXR may not be present as a component game object in the scene, but you will have to **call the static function ```SimpleWebXR.UpdateWebXR()``` by yourself at each frame**.\n\nYou can also add this component by code by calling the static method ```SimpleWebXR.EnsureInstance()```. The SimpleWebXR component does not exist, it will create it on a root game object \"WebXR\".\n\n\u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/monobehavior.png\"/\u003e\n\n## Start/Stop immersive session\nIf the SimpleWebXR component is active in the scene, it will automatically display a button that allows the user to start an immersive WebXR session.\n\nYou can hide this button by checking the field ```Hide Start Button```.\n\nIn addition, you can at any time in the main thread start an immersive session from your code via the static method :\n\n``` cs\nSimpleWebXR.StartSession();\n```\n\nYou can also end an immersive session by calling :\n``` cs\nSimpleWebXR.EndSession();\n```\n\nIn addition, the following static events are raised when an immersive session starts or stops :\n``` cs\n⚡️ UnityEvent SimpleWebXR.SessionStart\n⚡️ UnityEvent SimpleWebXR.SessionEnd\n\nSimpleWebXR.SessionStart.AddListener(OnSessionStart); // OnSessionStart() is a method in your code called when a session starts\nSimpleWebXR.SessionEnd.AddListener(OnSessionEnd); // OnSessionEnd() is a method in your code called when a session starts\n```\n\n## Check AR/VR supported\nTo find out if the current browser supports WebXR, you can call these static methods from anywhere in your code:\n``` cs\nbool isARSupported = SimpleWebXR.IsARSupported(); // 'immersive-ar' feature is supported\nbool isVRSupported = SimpleWebXR.IsVRSupported(); // 'immersive-vr' feature is supported\n```\nWarning: the result of the request is asynchronous in javascript. It may be necessary to call these functions several times or to wait to get the result. For example, the SimpleWebXR component requests the capabilities at each frame in the OnGUI() function.\n\n## Check if a WebXR Session is running\nThe static property ```SimpleWebXR.InSession``` indicates whether a WebXR immersive session is in progress.\n``` cs\nbool isInWebXRSession = SimpleWebXR.InSession;\n```\n\n## Eyes\nOn a smartphone and tablets, only one camera is required. But on HMD (head mounted headset), a different rendering is made for each eye, so there are two active cameras.\n\nAt the start of the session, the left eye is equal to ```Camera.Main```. If necessary a camera is created for the left eye. The characteristics of these cameras are modified at startup (clearFlags, background, clip planes, ...).\n\nDuring a session, the pose and the projection matrix are updated when ```SimpleWebXR.UpdateWebXR()``` is called. \n\nThe second camera (right eye) is destroyed at the end of the immersive session.\n\n``` cs\nCamera leftEye = SimpleWebXR.LeftEye; // == Camera.Main\nCamera rightEye = SimpleWebXR.RightEye; // == null on smartphones and tablets\n```\n\n## Input controllers\nThe ```SimpleWebXR.LeftInput``` and ```SimpleWebXR.RightInput``` fields represent left and right controllers. On smartphones either of these input sources can be used (it depends on the browser) and corresponds to the place where the user touched the screen.\n\n``` cs\nWebXRInputSource leftInput = SimpleWebXR.LeftInput;\nWebXRInputSource rightInput = SimpleWebXR.RightInput;\n```\n\n### Members of class ```WebXRInputSource```\n\n``` cs\nclass WebXRInputSource {\n\n  // ⚡️ Event triggered when the browser triggers a XRSession.selectend event, which means the input source has fully completed its primary action.\n  // On Oculus Quest : Back trigger button was pressed\n  // On Hololens 2 : A air tap has been was performed\n  // On smartphones : The screen was touched\n  public readonly UnityEvent Select;\n\n  // ⚡️ Event triggered when the browser triggers a XRSession.selectstart event, which means the input source begins its primary action.\n  public readonly UnityEvent SelectStart;\n\n  // ⚡️ Event triggered when the browser triggers a XRSession.selectend event, which means the input source ends its primary action.\n  public readonly UnityEvent SelectEnd;\n\n  // ⚡️ Event triggered when the browser triggers a XRSession.selectend event, which means the input source has fully completed its primary squeeze action.\n  // On Oculus Quest : Side grip button was pressed\n  public UnityEvent Squeeze;\n\n  // ⚡️ Event triggered when the browser triggers a XRSession.selectstart event, which means the input source begins its primary squeeze action.\n  public UnityEvent SqueezeStart;\n\n  // ⚡️ Event triggered when the browser triggers a XRSession.selectend event, which means the input source ends its primary squeeze action.\n  public UnityEvent SqueezeEnd;\n\n  // Indicates if the input source exists\n  public bool Available;\n\n  // Handedness of the input source\n  // WebXRHandedness.Left : left input source\n  // WebXRHandedness.Right : right input source\n  public WebXRHandedness Handedness;\n\n  // Indicates that the input source is detected and its position is tarcked\n  public bool IsPositionTracked;\n\n  // Current position of the input source if the position is tracked\n  public Vector3 Position;\n\n  // Current rotation of the input source if the position is tracked\n  public Quaternion Rotation;\n\n  // Number of axes available for this input source\n  public int AxesCount;\n\n  // Current value of each axes\n  public float[] Axes;\n\n  // Number of button for this input source\n  public int ButtonsCount = 0;\n\n  // Current state of each buttons\n  public readonly WebXRGamepadButton[] Buttons;\n\n  // Describes the method used to produce the target ray, and indicates how the application should present the target ray to the user if desired.\n  // WebXRTargetRayModes.None : No event has yet identified the target ray mode\n  // WebXRTargetRayModes.TrackedPointer : The target ray originates from either a handheld device or other hand-tracking mechanism and represents that the user is using their hands or the held device for pointing. The orientation of the target ray relative to the tracked object MUST follow platform-specific ergonomics guidelines when available. In the absence of platform-specific guidance, the target ray SHOULD point in the same direction as the user’s index finger if it was outstretched.\n  // WebXRTargetRayModes.Screen : The input source was an interaction with the canvas element associated with an inline session’s output context, such as a mouse click or touch event.\n  // WebXRTargetRayModes.Gaze : The target ray will originate at the viewer and follow the direction it is facing. (This is commonly referred to as a \"gaze input\" device in the context of head-mounted displays.)\n  public WebXRTargetRayModes TargetRayMode;\n\n  //The input source primary action is active\n  // On Oculus Quest : Back trigger button is pressed\n  // On Hololens 2 : A air tap is performed\n  // On smartphones : The screen is touched\n  public bool Selected;\n\n  // The input source primary squeeze action is active\n  // On Oculus Quest : Side grip button is pressed\n  public bool Squeezed;\n\n  // Constains hand joints poses, if hand tracking is enabled\n  public WebXRHand Hand; \n\n  // Applies haptic pulse feedback to a controller \n  // intensity : Feedback strength between 0 and 1\n  // duration : Feedback duration in milliseconds\n  public void HapticPulse(float intensity, float duration)\n}\n```\n\nAlso, the events select, squeeze, ... can be handled at the ```SimpleWebXR``` class level via the following ```WebXRInputEvent``` static events where the first argument is the input source that raised it.\n``` cs\n⚡️ WebXRInputEvent SimpleWebXR.InputSourceSelect\n⚡️ WebXRInputEvent SimpleWebXR.InputSourceSelectStart\n⚡️ WebXRInputEvent SimpleWebXR.InputSourceSelectEnd\n⚡️ WebXRInputEvent SimpleWebXR.InputSourceSqueeze\n⚡️ WebXRInputEvent SimpleWebXR.InputSourceSqueezeStart\n⚡️ WebXRInputEvent SimpleWebXR.InputSourceSqueezeEnd\n\n// Event triggered when a input sources has been added or removed.\n⚡️ UnityEvent SimpleWebXR.InputSourcesChange\n```\n\nSimilarly, haptic feedback on controllers can also be called at the static ```SimpleWebXR``` class level.\n\n``` cs\n  // Applies haptic pulse feedback to a controller \n  // hand : Left or Right\n  // intensity : Feedback strength between 0 and 1\n  // duration : Feedback duration in milliseconds\n  public static void HapticPulse(WebXRHandedness hand, float intensity, float duration)\n```\n\n\n### Members of class ```WebXRGamepadButton```\n```WebXRGamepadButton``` Describes a button, trigger, thumbstick, or touchpad data.\n\nThis class maps the information retrieved in javascript via the WebXR Gamepads Module API : https://www.w3.org/TR/webxr-gamepads-module-1\n\n``` cs\nclass WebXRGamepadButton {\n\n  // The amount which the button has been pressed, between 0.0 and 1.0, for buttons that have an analog sensor\n  public float Value;\n\n  // The touched state of the button\n  public bool Touched;\n  \n  // The pressed state of the button\n  public bool Pressed;   \n}\n```\n\n### Members of class ```WebXRHand```\n```WebXRHand``` describes the poses of hand skeleton joints\n\nThis class maps the information retrieved in javascript via the WebXR Hand Input Module API : https://www.w3.org/TR/webxr-hand-input-1\n\n``` cs\nclass WebXRHand {\n\n  // Indicates if hand tracking is available\n  public bool Available;\n\n  // Poses of hand skeleton joints\n  public WebXRJoint[] Joints;\n  \n  // 25 joints are tracked\n  public const int JOINT_COUNT = 25;\n  \n  // Index of each joint in Joints array :  \n  public const int WRIST = 0;\n\n  public const int THUMB_METACARPAL = 1;\n  public const int THUMB_PHALANX_PROXIMAL = 2;\n  public const int THUMB_PHALANX_DISTAL = 3;\n  public const int THUMB_PHALANX_TIP = 4;\n\n  public const int INDEX_METACARPAL = 5;\n  public const int INDEX_PHALANX_PROXIMAL = 6;\n  public const int INDEX_PHALANX_INTERMEDIATE = 7;\n  public const int INDEX_PHALANX_DISTAL = 8;\n  public const int INDEX_PHALANX_TIP = 9;\n\n  public const int MIDDLE_METACARPAL = 10;\n  public const int MIDDLE_PHALANX_PROXIMAL = 11;\n  public const int MIDDLE_PHALANX_INTERMEDIATE = 12;\n  public const int MIDDLE_PHALANX_DISTAL = 13;\n  public const int MIDDLE_PHALANX_TIP = 14;\n\n  public const int RING_METACARPAL = 15;\n  public const int RING_PHALANX_PROXIMAL = 16;\n  public const int RING_PHALANX_INTERMEDIATE = 17;\n  public const int RING_PHALANX_DISTAL = 18;\n  public const int RING_PHALANX_TIP = 19;\n\n  public const int LITTLE_METACARPAL = 20;\n  public const int LITTLE_PHALANX_PROXIMAL = 21;\n  public const int LITTLE_PHALANX_INTERMEDIATE = 22;\n  public const int LITTLE_PHALANX_DISTAL = 23;\n  public const int LITTLE_PHALANX_TIP = 24;\n}\n```\n\n\u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/hand-layout.svg\"/\u003e\n\n\n### Members of class ```WebXRJoint```\n```WebXRJoint``` describes a joint of a hand. Each hand is made up many bones, connected by joints.\n\n``` cs\nclass WebXRJoint {\n\n  // Position of the joint\n  public Vector3 Position;\n  \n  // Rotatiuon of the joint\n  public Quaternion Rotation;\n\n  // Optional joint radius that can be used to represent the joint has a sphere.\n  // float.NaN if not supported\n  public float Radius;\n}\n```\n\n\u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/bg.jpg\"/\u003e\n\n\n# Useful WebXR content\n- [https://immersive-web.github.io/](https://immersive-web.github.io/) : Many useful examples\n- [https://www.w3.org/TR/webxr](https://www.w3.org/TR/webxr) : technical details of webxr\n- [https://github.com/MozillaReality/unity-webxr-export](https://github.com/MozillaReality/unity-webxr-export) : a WebXR export plugin developed by Mozilla (much more complicated than this one, which is based on a js template and external js resources)\n- [https://github.com/De-Panther/unity-webxr-export](https://github.com/De-Panther/unity-webxr-export) : A fork of Mozilla plugin that works in AR and VR (Btw, thanks to De-Panther for his useful help !).\n\n\n# License: MIT 😘\n[©Rufus31415](https://rufus31415.github.io)\n\nSee the [license file](https://github.com/Rufus31415/Simple-WebXR-Unity/blob/master/LICENSE) for details.\n\n# Sponsor 💛\nYou are more than welcome to sponsor me !\n\n| ![❤️ Sponsor](https://github.com/sponsors/Rufus31415/)  |\n|---|\n\nIn order to maintain SimpleWebXR and ensure its proper functioning on all platforms, I have to acquire a lot of expensive equipment.\n\nI currently have: Microsoft Hololens 2, Oculus Quest 1 \u0026 2, Acer WMR Headset, iPad and iPhone.\n\nWhat I would like to buy soon : Magic Leap, Android tablet and smartphone\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003cth align=\"center\"\u003e\u003cbr\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n      \u003c/th\u003e\n     \u003cth align=\"center\"\u003eSponsors\u003cbr\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n      \u003c/th\u003e\n      \u003cth align=\"center\"\u003e\u003cbr\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n      \u003c/th\u003e\n    \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ca href=\"https://github.com/StephenHodgson\"\u003e\u003cimg align=\"left\" height=\"32\" src=\"https://github.com/StephenHodgson.png?size=40\"/\u003e Stephen Hodgson\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ca href=\"https://github.com/MauriceFrank\"\u003e\u003cimg align=\"left\" height=\"32\" src=\"https://github.com/MauriceFrank.png?size=40\"/\u003e Maurice Frank\u003c/a\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Rufus31415/Simple-WebXR-Unity/master/images/xr-devices.jpg\" width=\"50%\"/\u003e\n\u003c/p\u003e\n\n\n# Any questions ?\nFeel free to contact me :\n- Slack : https://holodevelopers.slack.com/team/U0120CVDUCV\n- Discord : Rufus31415#2440\n- Twitter : https://twitter.com/rufus31415\n- Mail : rufus31415@gmail.com\n- Clubhouse : @fgi\n- Open issue : https://github.com/Rufus31415/Simple-WebXR-Unity/issues\n\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003c/summary\u003e\n\u003cimg src=\"https://ga-beacon.appspot.com/UA-163892314-2/Simple-WebXR-Unity/\"\u003e\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frufus31415%2Fsimple-webxr-unity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frufus31415%2Fsimple-webxr-unity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frufus31415%2Fsimple-webxr-unity/lists"}