The document discusses building augmented reality (AR) and virtual reality (VR) experiences in the browser. It begins with an overview of what can currently be done with AR and VR using the A-Frame framework, including examples of building VR art galleries and scenes. It then covers adding AR capabilities using AR.js by placing 3D objects with markers. The document emphasizes optimizations needed for AR and VR like reducing file sizes and optimizing image quality and format. It also discusses the potential for building AR experiences using the emerging WebXR standard. Throughout it provides links to code samples and resources.

1. @dougsillars
Augmented Reality on the Web:
Building an ARt Gallery
Doug Sillars
January 6, 2020
Hub387

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. Virtual Reality
https://futurism.com/the-byte/russian-farmers-vr-
cows?fbclid=IwAR1ZVs1RUZzJy6bX12gUexH5xBwkx1B9Avre__a
9W7L4rUbsM-3JrkLKsZw

8. Augmented Reality

9. Augmented Reality

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

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

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

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

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

15. AR/VR- in the browser

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

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

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

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

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

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

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

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

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

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

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

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

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

33. GLTF Models

34. GLTF Models

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

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

37. AR Markers

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

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

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

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

42. AR Markers
Create Your Own Markers

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

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

45. Optimisations for AR/VR
• Reduce File Size

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

47. Optimisations for AR/VR

48. Optimisations for AR/VR

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

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

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

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

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

54. Optimisations for GLTF
Draco Compression optimizes .bin files

55. AR with WEBXR

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

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

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

59. Optimisations for WebXR
1024X1024 1024X1025

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

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

62. Loading WEbXR Art Gallery (Optimized)

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

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

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

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

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