34. 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
35. 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
43. Optimisations for AR/VR
• Optimize Quality
https://res.cloudinary.com/dougsillars/image/upload/h_1024,
q_auto,/v1552460601/VanGogh-starry_night_qoohur.jpg
44. 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
45. 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
46. 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
47. 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
50. 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
57. 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
58. 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