We understand that many people want to personalize the marker. It is possible to replace the Hiro pattern with your own image, as long as it is inside the black border.
We have provided an easy way to this. It is called the [marker generator](https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html).
...
...
@@ -120,6 +143,15 @@ Simple enough.
# Explain the 2 type of markers
Pattern Marker
Barcode Marker
TODO to complete
- barcode and pattern
- like to the pattern generator
- explain the preset
...
...
@@ -198,9 +230,13 @@ You will need to use ```<a-marker>```, and a simple camera instead.
<a-entitycamera></a-entity>
```
TODO transition ?
# How to handle multiple distinct markers
TODO to complete
- link to measure it example
- video of it
- what's the use
...
...
@@ -234,17 +270,12 @@ TODO transition ?
```
# Conclusion
So we started out with a binary marker, and we created some cool AR content in the web browser, without installing any app, and running freely on your phone's platform! Whichever it is.
In this post we have seen how to do efficient Augmented Reality with AR.js, and how to add it to your A-Frame project. We now know how to customize content in AR to make it more personal. We've also learned that it's possible to create your own AR marker, whether its a barcode or a pattern, with an easy-to-use marker generator. Finally, we've learned how to handle the camera and use multiple distinct markers. This is a lot! Congrats on getting to the end of this post without quitting ;)
In this post we have seen how to do efficient Augmented Reality with AR.js, and how to add it to your A-Frame project.
We now know how to customize content in AR and make it more personal.
We've also learned that it's possible to create your own marker with an easy-to-use marker generator.
Finally, we've learned how to handle the camera and use multiple distinct markers.
This is a lot! Congrats on getting to the end without quitting ;)
I hope you all start creating amazing things with AR.js and A-Frame. Don't forget it's open source, so your imagination is the limit!
There are good reasons to believe that web apps will begin to look more and more like native apps due to these technology trends:
**Progressive Web Apps (PWA)** — PWA are a website building methodology that enables website to be treated by the browser like an app, rather than an old school website. It enables web sites to have live updates, push notifications, launch the web site from the home screen, SEO discoverability, offline usage and more. This circumvents many of the reasons why users prefer apps, which will make it easier for publishers to engage users without the high friction need for app download. Some notable companies who shifted to PWA are AliExpress, The Financial Times and Lyft. Check out the video below to learn more about PWA.
