A rt gallery gdgcork
•Download as PPTX, PDF•
0 likes•67 views
This document summarizes Doug Sillars' presentation on building augmented reality experiences in the browser. It discusses using the A-Frame framework to create VR galleries and add AR functionality using AR.js markers. It also covers optimizations needed for AR/VR like reducing image file sizes and using Draco compression for GLTF models. Emerging technologies like WebXR are mentioned for future AR capabilities in the browser. Examples are provided of galleries built with A-Frame and steps shared for setting up an AR art gallery project with recommended art assets.
Report
Share
More Related Content
What's hot
What's hot (18)
Similar to A rt gallery gdgcork
Similar to A rt gallery gdgcork (18)
More from Doug Sillars
More from Doug Sillars (20)
Recently uploaded
Recently uploaded (20)
A rt gallery gdgcork
- 1. @dougsillars Augmented Reality on the Web: Building an ARt Gallery Doug Sillars Aug 15, 2019 GDG Cork
- 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