This document discusses building augmented reality (AR) experiences on the web. It begins by introducing AR frameworks like A-Frame that allow creating AR scenes directly in the browser. Examples are shown of building an online art gallery in VR and AR using A-Frame and AR.js. The document then covers using the emerging WebXR standard to access device sensors for AR. Key optimizations for AR/VR like image compression and format changes are demonstrated to significantly reduce file sizes. In conclusion, the document outlines that AR can currently be developed for the web and performance optimized without large data usage or processing requirements.

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