This demo shows off some of the features available for in browser immersive AR experiences. As we move toward metaverse interactions we will need to be able to intuitively interact with the digital world, and accurately overlay the digital world with the physical one. In this way we can provide a consistant metaverse experience and make digital interaction more "real" and physical.
download the repo to local and install dependencies through npm or yarn.
WebXR is an experimental web standard and therefore requires special set up to run and test locally.
Immersive AR features through WebXR are only available through a secure https server. in VScode live Server can be used to set up an https local server. You can also use mkcert to create a localhost certificates to run https.
In Browser Immersive AR content can be viewed in the browser with the use of WebXR API Emulator for google chrome.
On Android: Android devices can use the latest version of chrome to access a locally hosted instance and view webXR content if the device is on the same network as the hosting device.
On iOS: Safari does not natively support webXR content. One must download WebXR Veiwer browser from amzaon. As well webXR Veiwer does not play well with locally hosted HTTPS instances. However the application can be easily deployed through github pages, or any other hosting service and then accessed. This project is set up to use github pages out of the box.
the hit testing helpers is responsible for detecting real world planes both horizontal and verticle. It then is able to translate the orientation and positioning of that to the reticle object ring. As well as provide that information to allow for the placement of a model at the hit.
The ability to allow users to ituitively interact with digital obkects. We need to understand from the users input on their screen where they are trying to extend their reach into the digital world. The WebXR uses raycasting in combination with some spacial math to understand the relationship between your touch, the camera's view, and the XRcontroller(mobile device) to position the ray and detect intersections with digital objects.
