ARt Posters
Creating Augmented Reality Posters for mobile browsers
Planning and buying stuff for your home online is awesome, especially for getting hard to find but easily shippable things like art prints. The problem is that it’s really hard to know how if they’re gonna look good in your home, not just visually but also in size.
We made several prototypes around the general idea of being able to easily try out for example art in your home before you buy it online.
The first scenario involved what print houses could do, since many prints come from the same distributor. Having printable symbols on their website that could be turned into any product at home by just putting it on the wall. Free symbol packs, like post it’s could be available for free at reseller locations. It could also be packed with purchases, to inspire easier shopping next time. It could even be used as ads in target group magazines like Wallpaper or Elle Decor. A single page ad could cut out and give you the chance to try any available poster on for example Amazon.
The first scenario involved what print houses could do, since many prints come from the same distributor. Having printable symbols on their website that could be turned into any product at home by just putting it on the wall. Free symbol packs, like post it’s could be available for free at reseller locations. It could also be packed with purchases, to inspire easier shopping next time. It could even be used as ads in target group magazines like Wallpaper or Elle Decor. A single page ad could cut out and give you the chance to try any available poster on for example Amazon.
Let's start with the elephant in the room – Safari. Calm down, Apple fanboys. You know it in your heart that Safari has been letting you down lately. And specially developers.
Safari does not support WebRTC, or access to the camera-module within a browser context. Making it very much impossible to create a web-AR experience that's cross platform.
So we ditched iOS for now. (Specs for Safari iOS WebRTC has been filed. Hopefully we'll see WebRTC implementation in Safari soon)
Enough with the rant. The Tech:
So, as a blessing from above (being atheist and all) we found a project called "Augmented Reality in Three.JS" and it's corresponding github (https://github.com/jeromeetienne/threex.webar)
Needless to say, we dove right in to it. And started creating our own markers.
But we lacked some interactivity in the demo. Btw, we used a Nexus 5 for the tests.
As stated above, for the case of an "art"-poster that it differs in size.
You, as the user, have absolutely no clue on how big 60x50cm is through the lense of your phone. So, we added a "re-size" function to the experience.
It was fairly easy and straight forward. You change the size of your AR-object with swiping left/right. (In hindsight it probably would be better to swiper left/right for different objects and swipe up/down to change size)
We'll leave the code here.