A rt gallery london-fullstack
Download as PPTX, PDF0 likes253 views
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. Optimizations for images, models, and formats are discussed for improved performance of AR and VR experiences. Future capabilities with WebXR are previewed. Examples are provided of building an art gallery in VR and AR in the browser without native apps or hardware.
A rt gallery london-fullstack
- 1. @dougsillars Augmented Reality on the Web: Building an ARt Gallery Doug Sillars July 11, 2019 FullStack London
- 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
- 9. Augmented Reality • Wearing fancy occulus with cameras • Really $$$
- 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
- 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:
- 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
- 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
- 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
Editor's Notes
- #16: https://dougsillars.github.io/ARtGallery/aframeHW.html
- #17: https://dougsillars.github.io/ARtGallery/aframeHW.html
- #18: https://dougsillars.github.io/ARtGallery/aframeHW.html
- #19: https://dougsillars.github.io/ARtGallery/aframeHW.html
- #20: https://dougsillars.github.io/ARtGallery/aframeHW.html
- #21: https://dougsillars.github.io/ARtGallery/aframeHW.html
- #22: https://dougsillars.github.io/ARtGallery/aframeroomart.html
- #23: https://dougsillars.github.io/ARtGallery/aframeroomart.html
- #24: https://dougsillars.github.io/ARtGallery/aframeroomart.html
- #25: https://dougsillars.github.io/ARtGallery/aframeroomart.html
- #26: https://dougsillars.github.io/ARtGallery/aframeroomart.html
- #27: https://dougsillars.github.io/ARtGallery/aframeroomart.html
- #28: https://dougsillars.github.io/ARtGallery/aframeroomart.html
- #29: https://dougsillars.github.io/ARtGallery/aframeroomart.html
- #30: https://dougsillars.github.io/ARtGallery/sistine.html
- #31: https://dougsillars.github.io/ARtGallery/sistine.html
- #32: https://dougsillars.github.io/ARtGallery/sistine.html
- #33: https://dougsillars.github.io/ARtGallery/aframeroomart.html
- #34: https://dougsillars.github.io/ARtGallery/aframeroomart.html
- #35: https://dougsillars.github.io/ARtGallery/aframeroomart.html