Presented January 6, 2020 in Sarajevo at HUB387

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