Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

A rt gallery webcamp-zg

102 Aufrufe

Veröffentlicht am

Presented at WebCamp ZG October 11, 2019

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

A rt gallery webcamp-zg

  1. 1. @dougsillars Augmented Reality on the Web: Building an ARt Gallery Doug Sillars October 11, 2019 Webcamp Zagreb
  2. 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. 3. Virtual Reality
  4. 4. Virtual Reality https://www.flickr.com/photos/68158920@N08/17742136272
  5. 5. Virtual Reality
  6. 6. Virtual Reality
  7. 7. Augmented Reality
  8. 8. Augmented Reality
  9. 9. Augmented Reality • Wearing fancy occulus with cameras • Really $$$
  10. 10. Augmented Reality – Smartphone https://www.flickr.com/photos/bellemarematt/28124392062 https://www.flickr.com/photos/bagogames/28628142444
  11. 11. Augmented Reality – Smartphone https://www.flickr.com/photos/bellemarematt/28124392062 https://www.flickr.com/photos/bagogames/28628142444
  12. 12. AR/VR- in the Browser • What we can do today • What is coming tomorrow
  13. 13. AR/VR- in the browser • What we can do today • A-Frame • https://aframe.io • https://github.com/dougsillars/ARtGallery
  14. 14. AR/VR- in the browser • What we can do today • A-Frame • https://aframe.io • https://github.com/dougsillars/ARtGallery
  15. 15. VR with A-Frame https://dougsillars.github.io/ARtGallery/aframeHW.html
  16. 16. VR with A-Frame https://dougsillars.github.io/ARtGallery/aframeHW.html
  17. 17. VR with A-Frame https://dougsillars.github.io/ARtGallery/aframeHW.html
  18. 18. VR with A-Frame https://dougsillars.github.io/ARtGallery/aframeHW.html
  19. 19. VR with A-Frame https://dougsillars.github.io/ARtGallery/aframeHW.html
  20. 20. Building a Gallery https://dougsillars.github.io/ARtGallery/aframeroom.html
  21. 21. VR ART https://dougsillars.github.io/ARtGallery/aframeroomart.html
  22. 22. VR ART https://dougsillars.github.io/ARtGallery/justart.html Front Wall
  23. 23. VR ART https://dougsillars.github.io/ARtGallery/justart.html Front Wall 2m up
  24. 24. VR ART https://dougsillars.github.io/ARtGallery/justart.html
  25. 25. VR Art Animation https://dougsillars.github.io/ARtGallery/justart1.html
  26. 26. VR More Art https://dougsillars.github.io/ARtGallery/aframeroomart2.html
  27. 27. VR More Art https://dougsillars.github.io/ARtGallery/aframeroomart2.html
  28. 28. VR More Art https://dougsillars.github.io/ARtGallery/aframeroomart2.html
  29. 29. Add a Ceiling https://dougsillars.github.io/ARtGallery/sistine.html
  30. 30. Add a Ceiling https://dougsillars.github.io/ARtGallery/sistine.html
  31. 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. 32. GLTF Models
  33. 33. GLTF Models
  34. 34. VR Models Are Large We won’t forget optimization!!
  35. 35. AR with A-Frame We’ll use AR.js to add AR functionality to the page 3D objects are placed with Markers:
  36. 36. AR Markers http://bit.ly/ARHiro
  37. 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. 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. 39. AR Markers Create Your Own Markers
  40. 40. AR Markers to Create A Scene https://dougsillars.github.io/ARtGallery/ARt.html
  41. 41. Optimisations for AR/VR • Images are integral to the view – we want them to load quickly
  42. 42. Optimisations for AR/VR • Reduce File Size
  43. 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. 44. Optimisations for AR/VR
  45. 45. Optimisations for AR/VR
  46. 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. 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. 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. 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. 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. 51. Optimisations for GLTF Draco Compression optimizes .bin files
  52. 52. AR with WEBXR
  53. 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. 54. WEBXR Hit Test https://codelabs.developers.google.com/codelabs/ar-with-webxr/#4
  55. 55. WEBXR Hit Test https://dougsillars.github.io/ar-with- webxr/WebXrARt/
  56. 56. Optimisations for WebXR 1024X1024 1024X1025
  57. 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. 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. 59. Loading WEbXR Art Gallery (Optimized)
  60. 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. 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. 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. 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. 64. Love Building with Video and Images? Media Developer Expert mde-comm@cloudinary.com Become a

×