A rt gallery pyconweb

PyconWeb May 26, 2019

1. Augmented Reality on the Web: Building an ARt Gallery Doug Sillars May 26, 2019 Pyconweb

2. Contact Me: @ DougSillars [email protected] 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. GLTF Models

30. GLTF Models

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

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

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

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

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

36. AR Markers Create Your Own Markers

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

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

39. Optimisations for AR/VR Reduce File Size

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

41. Optimisations for AR/VR

42. Optimisations for AR/VR

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

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

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

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

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

48. Optimisations for GLTF Draco Compression optimizes .bin files

49. AR with WEBXR

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

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

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

53. Optimisations for WebXR 1024X1024 1024X1025

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

55. Optimisations for PNG https:// res.cloudinary.com / dougsillars /image/upload/q_auto,w_256/c_crop,w_256,h_256/v1552682248/ Anchor_rzjbco.png Optimise quality, shrink to 256 KB wide Crop to 256x256 36 KB -> 2.2 KB

56. Loading WEbXR Art Gallery (Optimized)

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

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

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

60. Love Building with Video and Images? Media Developer Expert [email protected] Become a

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