search

google-ar / WebARonTango

A proposal to provide Augmented Reality (AR) capabilities to the web in the form of a prototype on top of WebVR built in Chromium.
Apache License 2.0
388 stars 48 forks source link

readme

WebARonTango

An experimental browser for Android that lets developers create Augmented Reality (AR) experiences using web technologies. An ARCore Android version and an ARKit iOS version are also available.

PointCloudOcclusion

Note: This is not an official Google product. Nor is it a fully-featured web browser. Nor are the enabling JavaScript APIs standards, or on the standardization path. WebARonARTango is only meant to enable developer experimentation.

Differences between WebARonTango and WebARonARCore/WebARonARKit

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?

What does WebARonARCore/WebARonARKit have that WebARonTango does not?

Getting started

1. Get a Tango enabled device

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.

2. Install the WebARonTango APK

Directly from a Tango enabled device:

...or by using ADB:

Alternatively, the WebARonTango APK can be built and installed from source.

3. Viewing examples

A list of example scenes compatible with WebARonTango and WebARonARKit are available at developers.google.com.

4. Building your own scenes

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.

There are also some Tango specific examples in the three.ar.js project repo that use the specific features exposed in this prototype.

5. Debugging

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.

Building the WebARonTango APK from source

WebARonTango can optionally be built and installed from source. Instructions for cloning and building Chromium are available at chromium.org

Prerequisites:

We recommend the following steps:

  1. Open a terminal window
  2. 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
  3. 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
    • export PATH=$PATH:/path/to/depot_tools
  4. Create a folder to contain chromium and move to it: $ mkdir ~/chromium && cd ~/chromium
  5. Checkout the Chromium repo: ~/chromium$ fetch --nohooks android. Note: This process may take a long time (an hour?)
  6. Enter the src folder: $ cd src.
  7. Create a new branch from a specific tag: $ git checkout -b webarontango_57.0.2987.5 57.0.2987.5
  8. Copy the content from the src folder in the cloned WebARonTango in step 1: $ cp -r PATH/TO/WEBARONTANGO/chromium/src/* .
  9. Synchronize the dependencies with this command: ~/chromium/src$ gclient sync --disable-syntax-validation. Note: This process may take some time too.
  10. Create a folder where to make the final product compilation: ~/chromium/src$ mkdir -p out/build.
  11. Create and edit a new file out/build/args.gn. Copy and paste the following content in the args.gn file: 
    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
  12. 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.gn file just edited a few steps before. Just exit by pressing ESC and typing colon and x.
  13. Install the build dependencies: ~/chromium/src$ build/install-build-deps-android.sh
  14. Synchronize the resources once again: ~/chromium/src$ gclient sync --disable-syntax-validation
  15. 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.

~/chromium/src$ ./build_install_run.sh

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 ~/chromium/src/apk and ~/chromium/src/out/build/apks.

How WebARonTango works

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

Known issues

Future work

License

Apache License Version 2.0 (see the LICENSE file inside this repo).

Supported devices

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: