about me:

Trần Trọng Thanh

Front End & JavaScript Specialist

Co-founder & CTO Nau Studio
Lecturer at NordicCoder.com
Website: int3ractive.com
Github, Twitter, Facebook: @trongthanh

Augmented Reality in

WebXR

How did we get here?

2005

HTML5 and Canvas 2D

2007

first iPhone and
smartphone revolution

2010

Three.js

2011

WebGL and Canvas 3D

2012

DeviceOrientation Event and other device API

2014

Google cardboard and VR on the phone

2016

WebVR API

2017

ARKit on iOS 11+ and ARCore on Android 7+

Next generation augmented reality

Can the Web do that?

AR.js

How AR.js work?

Marker detection by emscripten ARtoolkit. 3D rendering by three.js

AR.js is good but not ideal!

• Require markers
• Markers must be fully visible
• Not making use of ARCore and ARKit*
• No hardware and chipset support*

2018

WebXR

Mixed Reality / Cross Reality

• WebXR is the successor of WebVR API
• WebXR cater for both AR & VR experience
• Official name: WebXR Device API

Why is WebAR awesome?

• No external viewer device
• No app installation required
• Just the Web and a smartphone
• Progressive enhancement

Getting started with WebAR
in WebXR Device API

Prerequisites

• Android Chrome Canary >=70
• Android 8 Oreo
• ARCore (from Google Play)
• Supported devices*
• Enable webxr-... flags in Chrome

Sample code: detect and init

class App {
  ...
  async init() {
    if (navigator.xr && XRSession.prototype.requestHitTest) {
      try {
        this.device = await navigator.xr.requestDevice();
      } catch (e) {
        this.onNoXRDevice();
        return;
      }
    } else {
      this.onNoXRDevice();
      return;
    }
	...
  }
}

Sample code: start XRSession

class App {
  ...
  async onEnterAR() {
    const outputCanvas = document.createElement('canvas');
    const ctx = outputCanvas.getContext('xrpresent');

    const session = await this.device.requestSession({
      outputContext: ctx,
      environmentIntegration: true,
    });
    document.body.appendChild(outputCanvas);
    this.onSessionStarted(session);
  }
}

Placing object in real world: WebXR Hit Test

DEMO

Exciting upcoming features:

• Measuring real world light
• Understand surface and mesh
• Depth information
• Point clouds

"Always bet on the Web"
- Thanh Tran

Thank You

Questions?

The End!

Learn more:

• Welcome to Immersive Web
• AR for the Web
• WebXR bringing Mixed Reality Web
• WebAR Codelab