This document discusses building augmented reality (AR) and virtual reality (VR) experiences in the browser. It begins with an overview of VR using the A-Frame framework to build 3D scenes and galleries. It then covers adding AR functionality using AR.js markers to place 3D objects. The document outlines various optimizations needed for media in AR/VR like reducing file sizes and formats. It also introduces using the WebXR API for AR hit testing. Throughout examples of building an AR art gallery are provided. The document concludes that AR on the web is available today and continues to improve with new APIs and optimizations.

1. @dougsillars
Augmented Reality on the Web:
Building an ARt Gallery
Doug Sillars
October 11, 2019
Webcamp Zagreb

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
• https://github.com/dougsillars/ARtGallery

14. AR/VR- in the browser
• What we can do today
• A-Frame
• https://aframe.io
• https://github.com/dougsillars/ARtGallery

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. VR with A-Frame
https://dougsillars.github.io/ARtGallery/aframeHW.html

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

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

22. VR ART
https://dougsillars.github.io/ARtGallery/justart.html
Front Wall

23. VR ART
https://dougsillars.github.io/ARtGallery/justart.html
Front Wall
2m up

24. VR ART
https://dougsillars.github.io/ARtGallery/justart.html

25. VR Art Animation
https://dougsillars.github.io/ARtGallery/justart1.html

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

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

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

29. Add a Ceiling
https://dougsillars.github.io/ARtGallery/sistine.html

30. Add a Ceiling
https://dougsillars.github.io/ARtGallery/sistine.html

31. Add a Ceiling
https://dougsillars.github.io/ARtGallery/sistine.html
<a-cylinder position="0 4 4"
rotation="0 90 90"
radius="4"
height="16"
theta-start="0"
theta-length="180"
src="#sistine"
side="double">
</a-cylinder>

32. GLTF Models

33. GLTF Models

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

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

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

37. 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

38. 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

39. AR Markers
Create Your Own Markers

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

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

42. Optimisations for AR/VR
• Reduce File Size

43. 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

44. Optimisations for AR/VR

45. Optimisations for AR/VR

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

47. 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

48. 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

49. 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

50. 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

51. Optimisations for GLTF
Draco Compression optimizes .bin files

52. AR with WEBXR

53. 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

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

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

56. Optimisations for WebXR
1024X1024 1024X1025

57. 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

58. 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

59. Loading WEbXR Art Gallery (Optimized)

60. 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

61. Setup
• https://github.com/dougsillars/ARtGallery
git clone https://github.com/<username>/ARtGallery
Seeing your Code
GitHub Account No GitHub Account
Details:
https://gist.github.com/jgravois/5e73b56fa7756fd00b89
Seeing your Code
Local Webserver
python -m SimpleHTTPServer 1337
In Browser: Localhost:1337

62. Let’s build!
• Art Files you can use:
• https://res.cloudinary.com/dougsillars/image/upload/w_1000/v1551634938/scream_qbwybi.jpg
• https://res.cloudinary.com/dougsillars/image/upload/w_1000/v1551634946/monalisa_nlcskz.jpg
• https://res.cloudinary.com/dougsillars/image/upload/w_1000/v1551634942/Mural_del_Gernika_s9ld
ah.jpg
• https://res.cloudinary.com/dougsillars/image/upload/v1552460601/VanGogh-
starry_night_qoohur.jpg
• https://res.cloudinary.com/dougsillars/image/upload/v1553694737/CAPPELLA_SISTINA_Ceiling_oosz
7w.jpg
• https://res.cloudinary.com/dougsillars/image/upload/v1553694758/last_supper_hykuux.jpg
• https://res.cloudinary.com/dougsillars/image/upload/v1553694762/The_Nightwatch_kkzvus.jpg
• Try: Sketchfab.com for 3D Models

63. 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

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