26
Web AR Build once, run on both Android and iOS GDG devfest 2017 David Ng Oursky

WebAR - "Build once, deploy anywhere"

  • Upload
    oursky

  • View
    91

  • Download
    1

Embed Size (px)

Citation preview

Page 1: WebAR - "Build once, deploy anywhere"

Web AR Build once, run on both Android and iOS

GDG devfest 2017

David Ng Oursky

Page 2: WebAR - "Build once, deploy anywhere"
Page 3: WebAR - "Build once, deploy anywhere"

–Apple, WWDC 2017

“ARKit”

GDG devfest 2017

Page 4: WebAR - "Build once, deploy anywhere"

–Google I/O 2017

“ARCore”

GDG devfest 2017

Page 5: WebAR - "Build once, deploy anywhere"

https://developers.google.com/ar/

ARCore

Page 6: WebAR - "Build once, deploy anywhere"

What can ARCore do?

GDG devfest 2017

Page 7: WebAR - "Build once, deploy anywhere"

https://twitter.com/dansilver82/status/928100475701927936

Page 8: WebAR - "Build once, deploy anywhere"

https://twitter.com/JohnSietsma/status/928314049179172864

Page 9: WebAR - "Build once, deploy anywhere"

https://twitter.com/builtwithARCore/status/907507511259025408

Page 10: WebAR - "Build once, deploy anywhere"

https://twitter.com/builtwithARCore/status/903589260170858496

Page 11: WebAR - "Build once, deploy anywhere"

How does AR work? What are the components behind?

GDG devfest 2017

Page 12: WebAR - "Build once, deploy anywhere"

AR is all about…

GDG devfest 2017

Camera Tracking 3D Objects View

Page 13: WebAR - "Build once, deploy anywhere"

Webcam

GDG devfest 2017

OpenCV OpenGL PC

In 2007

Page 14: WebAR - "Build once, deploy anywhere"

Mobile

GDG devfest 2017

ARKit ARCore

SceneKit Unity/Unreal

Mobile

Now in 2017

Page 15: WebAR - "Build once, deploy anywhere"

Mobile

GDG devfest 2017

three.ar.js three.js WebARonARKit WebARonARCore

WebAR

Page 16: WebAR - "Build once, deploy anywhere"

https://github.com/google-ar/WebARonARKit

Page 17: WebAR - "Build once, deploy anywhere"

AR Markers Surface Tracking Geo Tracking Face Tracking Colour Tracking Object Tracking Ambient Light TrackingGDG devfest 2017

Tracking There are many types of tracking involved

Page 18: WebAR - "Build once, deploy anywhere"

Vuforia AR.js OpenCV Tracking.js Awe

GDG devfest 2017

Tracking Some libraries we can use for tracking

Page 19: WebAR - "Build once, deploy anywhere"

Tracking.js Example: Face Detection

Demo https://trackingjs.com/examples/face_camera.htmlGDG devfest 2017

Page 20: WebAR - "Build once, deploy anywhere"

GDG devfest 2017

Usecase: Face Detection

Page 21: WebAR - "Build once, deploy anywhere"

3D Objects To display the object, you need some coordinates knowledge

GDG devfest 2017

Page 22: WebAR - "Build once, deploy anywhere"

3D Objects Let’s place an object

GDG devfest 2017

Page 23: WebAR - "Build once, deploy anywhere"

3D Objects And put a camera to view it.

GDG devfest 2017

Page 24: WebAR - "Build once, deploy anywhere"

3D Objects In the world of AR, your mobile phone becomes the camera.

GDG devfest 2017

Page 25: WebAR - "Build once, deploy anywhere"

https://poly.google.com/

Poly is a 3D object resource sites for AR/VR developers

Page 26: WebAR - "Build once, deploy anywhere"

Thank you.

GDG devfest 2017