AR/VR Development

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 with certain WebXR options enabled on the chrome://flags page:

HTC Vive and Oculus devices work in stable Chrome and Firefox browsers. In addition, the Chrome browser requires certain WebXR options enabled on the chrome://flags page:

WebXR Origin Trial

Instead of enabling WebXR flags in the Chrome browser, you can use the so called origin trial tokens to activate the flags automatically when the user launches your app. You can request these tokens for using on your website domain as described here.

<meta http-equiv="origin-trial" content="Aop1aS3O0LG/MKmDbfhMRdlXGxB1ET...rJJScdLSaYLDCMJI5iOLQ0uwhBObX0=">

The Standard app template offered in the App Manager already includes an origin trial token for Verge3D Network's domain cdn.soft8soft.com.

HTTPS

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.

Chrome Debugging

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.

Chrome Debugging

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.

Additional Links

Got Questions?

Feel free to ask on the forums!