AR/VR Development

Verge3D allows for creating web-based Augmented Reality (AR) and Virtual Reality (VR) experiences running on top of the 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).

Contents

Virtual Reality

Setting Up

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 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 controllers.

You can use the standard when hovered or when clicked puzzles to capture user events as well as VR-specific on session event.

Augmented Reality

Setting Up

You can run your Verge3D-based augmented reality applications on mobile devices with Anroid or iOS/iPadOS operating systems.

WebXR requires a secure context. Verge3D apps must be served over HTTPS/SSL, or from the localhost URL.

Android

To enable augmented reality, you need an Android device which supports ARCore technology and latest Google Chrome browser. You also need to install Google Play Services for AR. The installation of this package is prompted automatically upon entering AR mode for the first time, if not pre-installed.

iOS/iPadOS

Mozilla's WebXR Viewer is a Firefox-based browser application which supports the AR technology on Apple devices (starting from iPhone 6s). Simply install it from the App Store.

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.

Also, to see the the real environment through your 3D canvas, you should enable the transparent background option in the configure application puzzle.

Chrome Debugging

For faster iterations during development, you can use Chrome's port forwarding feature to run your AR or VR app in mobile browser. This will save you from re-uploading it to a remote web server each time.

What's Next

To find out how to script your AR/VR app with Puzzles, read the following section. Also, check out the Physics Guide if you're going to simulate a realistic virtual environment with colliding objects and/or character.

Got Questions?

Feel free to ask on the forums!