A rt gallery limerick-galway
•Download as PPTX, PDF•
0 likes•81 views
This document summarizes a presentation about building augmented reality (AR) and virtual reality (VR) experiences in the browser. It discusses using the A-Frame framework to create VR galleries and art displays. It also covers adding AR capabilities using AR.js markers and the WebXR Device API. The presentation emphasizes optimization techniques for images, 3D models, and animations to ensure good performance for AR and VR experiences in the browser. Code examples and links are provided to demonstrate different AR and VR concepts discussed.
More Related Content
What's hot
What's hot (16)
Similar to A rt gallery limerick-galway
Similar to A rt gallery limerick-galway (18)
More from Doug Sillars
More from Doug Sillars (20)
Recently uploaded
Recently uploaded (20)
A rt gallery limerick-galway
- 1. @dougsillars Augmented Reality on the Web: Building an ARt Gallery Doug Sillars Aug 21, 2019 GDG Galway
- 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
- https://dougsillars.github.io/ARtGallery/aframeHW.html
- https://dougsillars.github.io/ARtGallery/aframeHW.html
- https://dougsillars.github.io/ARtGallery/aframeHW.html
- https://dougsillars.github.io/ARtGallery/aframeHW.html
- https://dougsillars.github.io/ARtGallery/aframeHW.html
- https://dougsillars.github.io/ARtGallery/aframeHW.html
- https://dougsillars.github.io/ARtGallery/aframeroomart.html
- https://dougsillars.github.io/ARtGallery/aframeroomart.html
- https://dougsillars.github.io/ARtGallery/aframeroomart.html
- https://dougsillars.github.io/ARtGallery/aframeroomart.html
- https://dougsillars.github.io/ARtGallery/aframeroomart.html
- https://dougsillars.github.io/ARtGallery/aframeroomart.html
- https://dougsillars.github.io/ARtGallery/aframeroomart.html
- https://dougsillars.github.io/ARtGallery/aframeroomart.html
- https://dougsillars.github.io/ARtGallery/sistine.html
- https://dougsillars.github.io/ARtGallery/sistine.html
- https://dougsillars.github.io/ARtGallery/sistine.html
- https://dougsillars.github.io/ARtGallery/aframeroomart.html
- https://dougsillars.github.io/ARtGallery/aframeroomart.html
- https://dougsillars.github.io/ARtGallery/aframeroomart.html