Augmented Reality on Web

Some weeks back, I was looking into a twitter and found about augmented reality implementation and experiences. I was so fascinated about the technology and it is limitless… Just like everyone else, I thought achieving AR is like climbing a Mount Everest (have to know geometry, 3d etc).

Thanks to Jerome Etienne demoing his first AR app with AR.js in twitter which was very impressive.

Awesome!!

Yes, now you can build a marker based (at least) AR app for web using AR.js and A-Frame (A web framework for building virtual reality experiences).

10 Lines of HTML Code

Yes, exactly, 10 lines of code with which we can achieve AR on the web.

<!-- include A-Frame obviously -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script><!-- include ar.js for A-Frame --><script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<!-- create your content here. just a box for now -->
<a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
<!-- define a camera which will move according to the marker position -->
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
</body>

Get the hiro marker here

Build your own AR web app

Lets build an app of our own

What are we building?

An app to show different 3d models based on the Alphabet words. As shown in the image.

What do we need ?

AR.js, A-Frame and 3d models from Skecthfab and Google Poly. Sketchfab has a free and paid 3d models and Google Poly has all free.

A marker, in this case we will use a custom marker of our own. Create your own custom marker from here or use Hiro(by default).

Include Libraries

<!-- Index.html -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script><!-- include ar.js for A-Frame -->
<script src="https://prashant-andani.github.io/AR.js/aframe/build/aframe-ar.js"> <!-- For Custom markers-->
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js" crossorigin="anonymous"></script> <!-- For Hiro Marker -->

Setup Scene and add 3d model as asset

Add as much assets as you want… go through the code here…

<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='trackingMethod: best; sourceType: webcam; debugUIEnabled: false;'>
<a-assets>
<a-asset-item id="whale_asset" src="https://raw.githubusercontent.com/prashant-andani/3d-models/master/whale/scene.gltf"></a-asset-item>
</a-scene>
</body>

Add a custom marker

Here we are using a custom marker G

<a-marker preset="custom" patterUrl="pattern-letterG.patt" url="pattern-letterG.patt" id="aframe-scene">
<a-entity light="type: hemisphere; color: #fefddd; groundColor: #fefddd; intensity: 1.2">
</a-entity>
</a-marker>

Camera Entity

<a-entity camera></a-entity>

Get the whole project on Github

Thanks for reading, and if you like this post, don’t forget to share 😉

Also, please feel free to contact me anytime @prashant_andani