Presented to Tretton37

1. @dougsillars
Augmented Reality on the Web:
Building an ARt Gallery
Doug Sillars
March 19, 2019
Stockholm

2. @dougsillars
Contact Me:
@DougSillars
Doug.Sillars@gmail.com
www.dougsillars.com
Doug Sillars
Freelance Developer Relations
Performance Audits: Web/Native
Workshops:
Performance/Images/Video/AR
http://bit.ly/HighPerformanceAndroidApps

3. Virtual Reality

4. Virtual Reality
https://www.flickr.com/photos/68158920@N08/17742136272

5. Virtual Reality

6. Virtual Reality

7. Augmented Reality

8. Augmented Reality

9. Augmented Reality
• Wearing fancy occulus with cameras
• Really $$$

10. Augmented Reality –
Smartphone
https://www.flickr.com/photos/bellemarematt/28124392062
https://www.flickr.com/photos/bagogames/28628142444

11. Augmented Reality –
Smartphone
https://www.flickr.com/photos/bellemarematt/28124392062
https://www.flickr.com/photos/bagogames/28628142444

12. AR/VR- in the Browser
• What we can do today
• What is coming tomorrow

13. AR/VR- in the browser
• What we can do today
• A-Frame
• https://aframe.io

14. VR with A-Frame
https://dougsillars.github.io/ARtGallery/aframeHW.html

15. VR with A-Frame
https://dougsillars.github.io/ARtGallery/aframeHW.html

16. VR with A-Frame
https://dougsillars.github.io/ARtGallery/aframeHW.html

17. VR with A-Frame
https://dougsillars.github.io/ARtGallery/aframeHW.html

18. VR with A-Frame
https://dougsillars.github.io/ARtGallery/aframeHW.html

19. Building a Gallery
https://dougsillars.github.io/ARtGallery/aframeroom.html

20. VR ART
https://dougsillars.github.io/ARtGallery/aframeroomart.html

21. VR More Art
https://dougsillars.github.io/ARtGallery/aframeroomart2.html

22. VR More Art
https://dougsillars.github.io/ARtGallery/aframeroomart2.html

23. VR More Art
https://dougsillars.github.io/ARtGallery/aframeroomart2.html

24. GLTF Models

25. GLTF Models

26. VR Models Are Large
We won’t forget optimization!!

27. AR with A-Frame
We’ll use AR.js to add AR functionality to the page
3D objects are placed with Markers:

28. AR Markers
http://bit.ly/ARHiro

29. AR Markers
Create Your Own Markers
https://jeromeetienne.github.io/AR.js/three.js/examples/mark
er-training/examples/generator.html
Creates an image to print and tape to
the wall.
Creates a .patt pattern file for the
browser

30. AR Markers
Create Your Own Markers

31. AR Markers to Create A Scene
https://dougsillars.github.io/ARtGallery/ARt.html

32. AR with WEBXR

33. AR with WEBXR
• All WebXR Demos require:
• Android 8.0+
• Chrome Canary v70-72 (late 2018)
• Flags enabled:
• WebXR Device API
• WebXR Hit Test
• ARCore installed
Protip:
If using WebXR a lot, prevent Canary
from auto-updating in Play Store

34. WEBXR Hit Test
https://codelabs.developers.google.com/codelabs/ar-with-webxr/#4

35. WEBXR Hit Test
https://dougsillars.github.io/ar-with-
webxr/WebXrARt/

36. Optimisations for AR/VR
• Images are integral to the view – we want them to load quickly

37. Optimisations for AR/VR
• Reduce File Size

38. Optimisations for AR/VR
• Reduce File Size
• Resize images (to power of 2)
https://res.cloudinary.com/dougsillars/image/upload/h_1024/v1552460601/
VanGogh-starry_night_qoohur.jpg

39. Optimisations for AR/VR
• Optimize Quality
https://res.cloudinary.com/dougsillars/image/upload/h_1024,
q_auto,/v1552460601/VanGogh-starry_night_qoohur.jpg

40. Optimisations for AR/VR
• Optimize Format
https://res.cloudinary.com/dougsillars/image/upload/h_1024,
q_auto,f_auto/v1552460601/VanGogh-
starry_night_qoohur.jpg

41. Optimisations for AR/VR
• Optimize Format
https://res.cloudinary.com/dougsillars/image/upload/h_1024,
q_auto,f_auto/v1552460601/VanGogh-
starry_night_qoohur.jpg

42. Optimisations for AR/VR
• Optimize Format
https://res.cloudinary.com/dougsillars/image/upload/h_1024,
q_auto,f_auto/v1552460601/VanGogh-
starry_night_qoohur.jpg
1.8 MB -> 323 KB

43. Optimisations for AR/VR
• Optimize Format
https://res.cloudinary.com/dougsillars/image/upload/h_512,
q_auto,f_auto/v1552460601/VanGogh-
starry_night_qoohur.jpg
1.8 MB -> 93 KB

44. Optimisations for GLTF
Draco Compression optimizes .bin files

45. Optimisations for WebXR
1024X1024 1024X1025

46. https://res.cloudinary.com/dougsillars/image
/upload/x_230,y_128,w_512,h_512,c_crop/
w_256/v1552682248/stabilization_yegbkb.gi
f
850 KB -> 174 KB
Optimisations for aGIF

47. Optimisations for PNG
https://res.cloudinary.com/dougsillars/image/upl
oad/q_auto,w_256/c_crop,w_256,h_256/v15526
82248/Anchor_rzjbco.png
• Optimise quality, shrink to 256
KB wide
• Crop to 256x256
• 36 KB -> 2.2 KB

48. Loading WEbXR Art Gallery (Optimized)

49. Conclusions
• AR on the web is available today with A-Frame
• AR with Hit Points is coming
• AR does not have to be processor intensive, nor utilize huge
amounts of data

50. Links
Code: https://github.com/dougsillars/ARtGallery
https://github.com/dougsillars/ar-with-webxr
WebXR spec: https://www.w3.org/TR/2019/WD-webxr-20190205/
Cloudinary: https://cloudinary.com

51. Love Building with Video and Images?
Media Developer Expert
mde-comm@cloudinary.com
Become a