Logo Siclo
We shape Technology with Passion

My first steps with the Web AR

time 3 mins
Share

The day I was tasked to build an AR prototype for a client, my initial reaction was “AR what ?”. Augmented Reality (aka AR)  is a technology enabled experience where the user can through his device interact with non-real objects in a real-world. It is not to be  confused with Virtual Reality (aka VR) which is where the user is fully immersed in a non-real world.

After conducting some researches, I discovered that AR is very trendy and (maybe it is a consequence) that many frameworks are available for developers. With so many options available, the first challenge is to choose which one to use depending on your context. In this special case, our objective was to show to potentiel clients how easy it is leverage AR to create great consumer experience  because it can now run directly in your smartphone web browser without the need to download an application. We decided to work with Web AR and in particular with AR.js and 8th Wall because those technologies are cross-browser, so you don’t need to install anything on your phone !

I will introduce you to some technology to get you more familiar with web AR.

 

A-Frame

Before we can play around with 3D scene with our phone, we need to create your 3D scene. AR.js and 8th Wall are both based on A-frame, an open-source Framework that builds 3D scenes for the web with few HTML code. We can create simple 3D scenes with predefined entities like a cube or a sphere. But A-frame also provides components for loading glTF and OBJ files. In my example, I've just created a simple cube where I have added a texture to display a logo company. Then I added some animations and some lighting to make it more “alive”.

 

8th Wall

8th Wall offer two different products: “8th Wall Web” and “8th Wall XR for Unity”. In order to create web AR, we will use the first product. “8th Wall Web” is to create AR for the web and it’s free for the developers who want to learn how to create web AR (local deployment only). This technology not only allows to display 3D scenes without markers but also allows the user to interact with the 3D element. With the help of the few example provided by 8th Wall, I was able to display and to play around with (enlarge or rotate the car).

3D car with 8th Wall

AR.js

AR.js is an open-source and free-to-use library created by Jerome Etienne that allows to experiment AR in the web with HTML tags. This technology is working on most of the browser and is really easy to use. AR.js is a maker based AR, that means you need to use a marker for the camera to recognize it and display the 3D scene. So what you need to do is to create your own marker (you can use AR.js marker generator) and your 3D model (you can use free-to-use 3D model).

Hiro Marker

AR Game

The benefit of using a marker based AR is for the user to interact with the real world. For instance, we created a treasure hunt game with web AR. The rules of the game is pretty simple. The player needs to scan the very first marker to start the game. Each marker displays a 3D model that gives a clue to the location to the next marker. The player end the game when all the marker are scanned in the correct order. There is also a timer that give a score to the player at the end to make him compete against the other player. 

Different steps of the Hunt Game 

 

In conclusion, we can say that AR is a new playground for all web developer. It offers a lot of possibilities for the publicity such as interactive add as we can see in the recent publicity stunt from Burger King where they set rivals’ ads aflame. The bridge between the real world and the virtual world in ready to be crossed !

 


Apr 04 2019