A rt gallery pantalks
•Download as PPTX, PDF•
0 likes•48 views
The document discusses building augmented reality (AR) and virtual reality (VR) experiences in the browser. It demonstrates how to create a VR art gallery using A-Frame, optimize images and 3D models for AR/VR, and add AR functionality using AR.js markers. It also covers upcoming AR capabilities using WebXR, such as hit testing. Optimizations like resizing images, format and quality adjustments, cropping, and Draco compression are recommended to reduce file sizes and loading times. The talk concludes with resources for setting up a sample AR art gallery project and suggestions for art assets to include.
More Related Content
What's hot
Similar to A rt gallery pantalks
Similar to A rt gallery pantalks (20)
More from Doug Sillars
More from Doug Sillars (20)
Recently uploaded
Recently uploaded (20)
A rt gallery pantalks
- 1. @dougsillars Augmented Reality on the Web: Building an ARt Gallery Doug Sillars January 21, 2020 Pantalks
- 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
- 10. Augmented Reality • Wearing fancy occulus with cameras • Really $$$
- 13. AR/VR- in the Browser • What we can do today • What is coming tomorrow
- 14. AR/VR- in the browser • What we can do today • A-Frame • https://aframe.io • https://github.com/dougsillars/ARtGallery
- 15. AR/VR- in the browser
- 32. 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>
- 33. GLTF Models
- 34. GLTF Models
- 35. VR Models Are Large We won’t forget optimization!!
- 36. 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
- 40. 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
- 41. 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
- 42. AR Markers Create Your Own Markers
- 43. AR Markers to Create A Scene https://dougsillars.github.io/ARtGallery/ARt.html
- 44. Optimisations for AR/VR • Images are integral to the view – we want them to load quickly
- 45. Optimisations for AR/VR • Reduce File Size
- 46. 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
- 49. Optimisations for AR/VR • Optimize Quality https://res.cloudinary.com/dougsillars/image/upload/h_1024, q_auto,/v1552460601/VanGogh-starry_night_qoohur.jpg
- 50. 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
- 51. 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
- 52. 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
- 53. 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
- 54. Optimisations for GLTF Draco Compression optimizes .bin files
- 55. AR with WEBXR
- 56. 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
- 59. Optimisations for WebXR 1024X1024 1024X1025
- 60. 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
- 61. 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
- 62. Loading WEbXR Art Gallery (Optimized)
- 63. 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
- 64. 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
- 65. 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
- 66. 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
- 67. 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