All of the prototypes are build on top of the WebVR 1.1 spec and for the basic AR capabilities (motion tracking, camera feed rendering and hit testing) they all share a common workflow. However, WebARonTango exposes some additional functionalities and lacks others compared to the ARCore and ARKit based projects.
What does WebARonTango have that WebARonARCore/WebARonARKit does not?
Depth point cloud support: WebARonTango provides access to the depth point cloud that the infrared camera in the Tango spec includes.
ADF support: For now, WebARonTango exposes a very simple access to the Area Description capabilities of Tango. Maybe in the future, the other projects may expose this functionality too.
Marker support: For now, WebARonTango exposes QRCode and AR marker support. Maybe in the future, the other projects may expose this functionality too.
What does WebARonARCore/WebARonARKit have that WebARonTango does not?
- Plane support: ARCore and ARKit provide marker detection capabilities. Tango does not for now as it already includes a depth point cloud support to be able to identify real world poses.
In order to test this prototype browser, you will need a Tango enabled device. Tango is a hardware and software specification from Google to enable AR on mobile devices. Tango enabled devices include a wide field of view (FOV) camera and an infrared camera on top of the reguar RGB camera to provide advanced AR and real world understanding capabilities. Check out the Supported Devices section for futher information.
Directly from a Tango enabled device:
- Visit this link from a web browser on your Android device to download and install the WebARonTango APK.
...or by using ADB:
- Download the WebARonTango APK.
- Install the APK to your device:
$ adb install -r /path/to/WebARonTango.apk
Alternatively, the WebARonTango APK can be built and installed from source.
To build AR web experiences that work with WebARonTango (or WebARonARCore for Android or WebARonARKit for iOS), we recommend three.ar.js, a helper library that works with the popular three.js WebGL framework. Three.ar.js provides common AR building blocks, such as a visible reticle that draws on top of real world surfaces, and example scenes.
WebARonTango uses WebViews, which is a similar debugging process to debugging Chrome for Android tabs. Check out the prereqs for your device at Get Started with Remote Debugging Android Devices, and learn more about Remote Debugging WebViews by opening
chrome://inspect in the desktop browser while your device is connected via USB.
- Linux machine
We recommend the following steps:
- Open a terminal window
- Clone this repo in a folder like "WebARonTango" and remember its location as we will use it in step 8 below:
$ git clone https://github.com/google-ar/WebARonTango.git
- Install depot_tools. You can follow this tutorial or simply follow these 2 steps:
git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
- Create a folder to contain
chromiumand move to it:
$ mkdir ~/chromium && cd ~/chromium
- Checkout the Chromium repo:
~/chromium$ fetch --nohooks android. Note: This process may take a long time (an hour?)
- Enter the
$ cd src.
- Create a new branch from a specific tag:
$ git checkout -b webarontango_57.0.2987.5 57.0.2987.5
- Copy the content from the
srcfolder in the cloned WebARonTango in step 1:
$ cp -r PATH/TO/WEBARONTANGO/chromium/src/* .
- Synchronize the dependencies with this command:
~/chromium/src$ gclient sync --disable-syntax-validation. Note: This process may take some time too.
- Create a folder where to make the final product compilation:
~/chromium/src$ mkdir -p out/build.
- Create and edit a new file
out/build/args.gn. Copy and paste the following content in the
target_os = "android" target_cpu = "arm64" is_debug = false is_component_build = true enable_webvr = true proprietary_codecs = false ffmpeg_branding = "Chromium" enable_nacl = false remove_webcore_debug_symbols = true
- Prepare to build:
~/chromium/src$ gn args out/build. Note: once the command is executed, the vi editor will show you the content of the
args.gnfile just edited a few steps before. Just exit by pressing ESC and typing colon and
- Install the build dependencies:
- Synchronize the resources once again:
~/chromium/src$ gclient sync --disable-syntax-validation
- Setup the environment:
~/chromium/src$ . build/android/envsetup.sh
Build, install and run
The line below not only compiles Chromium but also installs the final APK on to a connected device and runs it, so it is convenient that you to connect the device via USB before executing it. The project that will be built by default is the Chromium WebView project, the only one that has been modified to provide AR capabilities.
You can review the content of the script to see what it does (it is a fairly simple script) but if you would like to compile the final APK on your own you could do it by executing the following command:
~/chromium/src$ ninja -C out/build
The final APK will be built in the folders
WebARonTango is built of two essential technologies: Tango and Chromium. We also extend the WebVR 1.1 API, which gives us much of what we need for augmented reality, with a few more essentials, such as motion tracking, rendering of the camera's video feed, and basic understanding of the real world. For details, see WebVR API extension for smartphone AR
- The current implementation of WebAR is built on top of the Chromium WebView flavor. This has some implementation advantages but some performance and use disadvantages. We are working on making the implementation on a full version of Chromium.
- Pausing/resuming/switching away from the app causes screen to turn black. This is a consequence of having built the implementation on top of the WebView flavor of Chromium. A proper implementation on full Chromium or a rebase to a more recent Chromium WebView version (>57.0.2987.5) might solve this problem.
- The Web Speech API is a standard web API for text to speech and speech to text conversion that is available in Chromium. As WebARonTango is built on top of the WebView version of Chromium, does not provide this functionality by default. There is a solution though, using a polyfill we provide, but in order to use it, you need to either a) include the three.ar.js library before making any use of the Web Speech API or b) include the ARSpeechRecognition.js file also before making any reference to the Web Speech API. Only speech recognition is suspported, not speech synthesis for now.
- Add more AR-related features.
- Adapt the implementation to the WebVR 2.0 spec proposal.
- Implement the prototype on full Chromium (not on the WebView flavor) and to a newer tag version (>57.0.2987.5).
- Improve the VRPassThroughCamera rendering pipeline either making it obscure for the developer or by using regular WebGL textures and shader samplers without having to use the external image texture extension.
Apache License Version 2.0 (see the
LICENSE file inside this repo).
The current prototype that provides AR on the web experimental functionalities has been built on top of Tango and has been tested on the following devices:
Tango Development Kit Tablet
- Android version: 4.4.2
- Tango Core version: 1.53:2017.04.28-hopak-release-0-gb1545f34:190015395:stable
- Tango SDK version: Hopak
Lenovo Phab 2 Pro
- Android version: 6.0.1
- Tango Core version: 1.53:2017.04.28-hopak-release-0-gb1545f34:230015395:stable
- Tango SDK version: Hopak
Asus Zenfone AR
- Android version: 7.0
- Tango Core version: 1.55:2017.06.23-release-m20-release-0-gb571120a1:240016802:stable
- Tango SDK version: Hopak