Our experience with WebAR

Updated: May 22

Augmented reality is getting stronger, especially with the performance of mobile cameras, and we have been following the evolution, and used sporadically in a bunch of projects, but there was always a big big big barrier to vault, the necessity of an app.


Enter WebAR, augmented reality in the browser”


We typically linked a print or web to an augmented reality app, that user had to install, authorize, etc… and by the time all was setup, and as long as the user didn't give up before starting, all the spontaneity was lost.


We been searching for a way to keep all in the browser, we really googled it


With the browser capabilities nowadays, like the implementation of webGL on the most popular browsers, projects like three.js and the ability to access the camera of the device,I guess we all have used some web video conference service directly on the browser, specially this last months.


Still there is room for improvement in the field of real time image tracking, all of the products we tested suffered on this aspect, sometimes working better depending of the phone model and light conditions.


So it was about time that some projects would mash both advances together and come with the inevitable, a browser based Augmented Reality service, and indeed there are many projects working in this direction.

There is one that caught our eye after a short testing phase, xr.plus is very robust and offers many tools, it really doesnt require much coding or none, and the free plan allows for some presentations to clients, but not the custom image tracking.


The creation of the 3D content was very familiar for us, we had experience with several modeling tools, we just needed a hassle free tool to embed our 3D models to the augmented reality experience. With xr.plus we were able to upload the models after a simple format conversion, link the models to a picture that will trigger the AR and serve as a base for the model.


For us it was a must using a photo for image tracking instead of a black and white tag was locked for the paid membership, but it is possible to test some demos on the web, this was very convincing.


For the people who wants to follow this road, my advice is:

  1. Use it in projects where photorealistic models are not needed, we used xr.plus in an educational book for kids, so the models were simple to match the style of the book. (mojezeleneja.sk)

  2. If you are making the 3D models, be tidy, use some naming system and hierarchy for the objects and use just the needed materials.

  3. Compose your scenes keeping in mind the angle of the camera related to the image to be tracked, ideally in the range from 90 to 45 degrees.

  4. If you are going to use image tracking, ensure the image has contrast and contains some simple shapes, this will make the tracking more fluent.

  5. Try to keep the model simple, as few triangles as possible and avoid complex movements, make the objects appear or disappear and basic movements, basically animate just basic properties, like position, scale, rotation.

  6. Avoid complex materials or effects like smoke, reflections, or realistic materials, water etc.

  7. And the last but most important, the idea, the AR has to make sense, needs to bring some added value, not just a showoff of technology.


As I mentioned we tested a few other systems, like: 8thwall.com, blippar, ar-link.net among others, and we will keep a close eye on those, but so far xr.plus was our choice for the simplicty not just to view the content but to manipulate it.


Manuel Campagnoli

Creative Director


#purocreative #ar

  • Facebook
  • YouTube
  • Instagram
  • Linkedin

We are ISO 9001:2015 certified

© 2020 Puro Creative, All Rights Reserved.