webar - "build once, deploy anywhere"
TRANSCRIPT
![Page 1: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/1.jpg)
Web AR Build once, run on both Android and iOS
GDG devfest 2017
David Ng Oursky
![Page 2: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/2.jpg)
![Page 3: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/3.jpg)
–Apple, WWDC 2017
“ARKit”
GDG devfest 2017
![Page 4: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/4.jpg)
–Google I/O 2017
“ARCore”
GDG devfest 2017
![Page 5: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/5.jpg)
https://developers.google.com/ar/
ARCore
![Page 6: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/6.jpg)
What can ARCore do?
GDG devfest 2017
![Page 7: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/7.jpg)
https://twitter.com/dansilver82/status/928100475701927936
![Page 8: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/8.jpg)
https://twitter.com/JohnSietsma/status/928314049179172864
![Page 9: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/9.jpg)
https://twitter.com/builtwithARCore/status/907507511259025408
![Page 10: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/10.jpg)
https://twitter.com/builtwithARCore/status/903589260170858496
![Page 11: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/11.jpg)
How does AR work? What are the components behind?
GDG devfest 2017
![Page 12: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/12.jpg)
AR is all about…
GDG devfest 2017
Camera Tracking 3D Objects View
![Page 13: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/13.jpg)
Webcam
GDG devfest 2017
OpenCV OpenGL PC
In 2007
![Page 14: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/14.jpg)
Mobile
GDG devfest 2017
ARKit ARCore
SceneKit Unity/Unreal
Mobile
Now in 2017
![Page 15: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/15.jpg)
Mobile
GDG devfest 2017
three.ar.js three.js WebARonARKit WebARonARCore
WebAR
![Page 17: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/17.jpg)
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"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/18.jpg)
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"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/19.jpg)
Tracking.js Example: Face Detection
Demo https://trackingjs.com/examples/face_camera.htmlGDG devfest 2017
![Page 20: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/20.jpg)
GDG devfest 2017
Usecase: Face Detection
![Page 21: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/21.jpg)
3D Objects To display the object, you need some coordinates knowledge
GDG devfest 2017
![Page 22: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/22.jpg)
3D Objects Let’s place an object
GDG devfest 2017
![Page 23: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/23.jpg)
3D Objects And put a camera to view it.
GDG devfest 2017
![Page 24: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/24.jpg)
3D Objects In the world of AR, your mobile phone becomes the camera.
GDG devfest 2017
![Page 25: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/25.jpg)
https://poly.google.com/
Poly is a 3D object resource sites for AR/VR developers
![Page 26: WebAR - "Build once, deploy anywhere"](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a66f5357f8b9acd178b47f5/html5/thumbnails/26.jpg)
Thank you.
GDG devfest 2017