Verge3D allows for creating web-based Augmented Reality (AR) and Virtual Reality (VR) experiences running on top of the in-development browser technology called WebXR (eXtended Reality on the Web). In addition to that you can use an older version of this technology called WebVR (enabled via Legacy VR compatibilty option, see below).
Setting up VR
We recommend to enable the Legacy VR option in app creation settings in the App Manager in order to support a wider range of browsers (such as Mozilla Firefox) and devices.
Cardboard devices should work out of the box in any mobile browser, both on Android and iOS.
Google Daydream works in stable Chrome browser on Android phones while HTC Vive and Oculus devices should work in both Chrome and Firefox browsers.
WebXR requires a secure context. Verge3D apps must be served over HTTPS/SSL, or from the localhost URL.
Creating VR Apps
The VR mode can be set up for any Verge3D app using enter VR mode puzzle.
Interaction with 3D objects is performed by using the gaze-based reticle pointer automatically provided for VR devices without controllers (such as cardboards).
For VR devices with controllers, interaction is performed by the virtual ray casted from the controller (only one ray is supported).
You can use the standard when hovered or when clicked puzzles to capture user events. The when clicked puzzle is triggered after 2 seconds of interaction.
For faster iterations during development of VR applications for mobile devices, you can use Chrome's port forwarding feature. This will save you from re-uploading it to a remote web server each time.
Setting up AR
At the moment the AR part of the WebXR specification is undergoing rapid development, as such AR mode in Verge3D is considered experimental.
To enable augmented reality feature in your app, you need a mobile device capable of running ARCore aka Google Play Services for AR (same backend used by once popular Pokémon Go). The installation of this package is prompted automatically upon entering AR mode for the first time, if not pre-installed.
To activate AR in the Chrome browser type chrome://flags in the address bar and then find and enable these WebXR options:
Creating AR Apps
The AR mode can be set up for any Verge3D app using the enter AR mode puzzle.
Upon entering AR mode you will be able to position your 3D content in the "real" coordinate system, which is aligned with your mobile device. In addition to that, you can detect horizontal surfaces (tables, shelves, floor etc) by using the detect horizontal surface AR puzzle.
For faster iterations during development, you can use Chrome's port forwarding feature to run your AR app in mobile browser. This will save you from re-uploading it to a remote web server each time.
- WebXR Device API Explained
- WebXR Samples
- WebXR Device API specification
- Chrome browser development tracker
Feel free to ask on the forums!