This is a demo implementation of WebXR Device API. Purpose of this project is to showcase how we can develop XR application for web browsers using WebXR. This project showcases implementation of Hit-test to find out vertical and horizontal plains and initiate 3D geometry.
Extended reality (XR) is an umbrella term to refer to Augmented reality (AR), Virtual reality (VR), and Mixed reality (MR). The technology is intended to combine or mirror the physical world with a "digital twin world" able to interact with it, giving users an immersive experience by being in a virtual or augmented environment.
XR is not limited to just these three categories and can emcompass other technologies and variations as well. The key concept behind XR is the blending of physical and digital experiences to create immersive and interactive environments. XR has applications in various industries, including gaming, education, helathcare, architecture, engineering and entertainment.
WebXR is an API for web content and apps to use to interface with mixed reality hardware such as VR headsets and glasses with integrated augmented reality features. This includes both managing the process of rendering the views needed to simulate the 3D experience and the ability to sense the movement of the headset (or other motion-sensing gear) and provide the needed data to update the imagery shown to the user.
WebXR additionally provides support for accepting inputs from control devices such as handheld VR controllers or specialized mixed reality gamepads.
WebXR is not a rendering technology and does not provide features for managing 3D data or rendering it to the display. This is an important fact to keep in mind. While WebXR manages the timing, scheduling, and the various points of view relevant when drawing the scene, it does not know how to load and manage models, nor how to render and texture them, and so forth. That part is entirely up to you. Fortunately, WebGL and the various WebGL-based frameworks and libraries are available to make it much easier to deal with all of that.
In order to run the WebXR Device API we need https. To the test/debug WebXR applications, the simplest method is to host your local server over https over ngrok. Follow below steps to run this project:
Clone this repo git clone https://github.com/siddheshgunjal/html_surface_tracking.git
Go into the repo cd html_surface_tracking
Run app in local server using any means (I chose python) python -m http.server 4345
Host your local server over https using ngrok
ngrok http 4345
Now visit the https url from your hand-held device
You'll need 3D model in .glb format
-
Put your 3D model into
./assetsfolder. -
line 110: change the name of your 3D model -
line 117-line 127: change the default settings of your model like default animation clips, animation speed, etc. -
line 133: scale of your 3D model. -
line 207-line 211: animations to trigger for respective gestures.
-
line 106: change walking animation clip name. -
line 155&line 185: change default animation clip name.
-
Detect if XR capabilities are available
-
Query the XR device capabilities
-
Scan and detect nearby vertical and horizontal planes
-
Spawn 3D object on the detected surface
-
Control the 3D object with Gestures
-
Relocate 3D model with animation withing same
XRSession
If you get stuck, we’re here to help. The following are the best ways to get assistance working through your issue:
- Use our Github Issue Tracker for reporting bugs or requesting features. Contribution are the best way to keep thos project amazing 💪
