Implement Augmented Reality (AR) in 10 lines of HTML code (using three.js)
three.js :
three.js as we all know is expanding its horizon in different verticals of 3D world. It is used by many creative minds in the gaming industry as well as professionals in CAD industry where they use it to render 3D models directly in web browsers.
Augmented Reality :
Augmented reality (AR) is a live indirect view of a physical, real-world environment whose elements are “augmented” by computer processing, means you will be able to visualize interaction of virtual objects in real world. Applications of AR are huge, as it enhances one’s current perception of reality (replacing the real world with a simulated one)
Earlier this technology required various costly equipment’s to work upon, but this article will explain how easily one can implement AR in their web pages, all you need is a mobile or PC with webcam.
Benefits of implementing AR using three.js :
- Optimized: It runs efficiently even on mobile phones
- Web-based: It is a pure web solution, so no installation required, full javascript based on three.js + JSARToolKit5
- Open Source: It is completely open source and free of charge
- Standards: It works on any phone with WebGL and webRTC
How AR works with three.js
AR.js is a revolutionary library which plays a vital role in building web based Augmented Reality. With the advent of three.js and AR.js it opens up the door for many creative people to feel the fun of Augmented Reality in day to day life.
Steps to write code in your HTML file :
- Include AR.js in your html file
<script src=“https://aframe.io/releases/0.5.0/aframe.min.js“></script>
<script src=“https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js“></script> - Define the body
<body style=‘margin : 0px; overflow: hidden;’>
</body> - Create a 3D scene
<a-scene embedded artoolkit=‘sourceType: webcam;’>
</a-scene> - Add the content (example a sphere or a box)
<a-box position=‘0 0 0.5’ material=‘opacity: 1.0;’></a-box>
Add AR camera (this line will set camera and preset its content on hiro marker (as a reference to box geometry))
<a-marker–camera preset=‘hiro’></a-marker-camera>
Full fledged code will look like :
<html>
<script src=”https://aframe.io/releases/0.5.0/aframe.min.js”></script>
<script src=”https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js”></script>
<body style=’margin : 0px; overflow: hidden;’>
<a-scene embedded artoolkit=’sourceType: webcam;’>
<a-box position=’0 0 0.5′ material=’opacity: 0.5;’></a-box>
<a-marker-camera preset=’hiro’></a-marker-camera>
</a-scene>
</body>
</html>
You can create any number of objects and allot different markers to them.
I have used Hiro marker in this demo to project a simple cube. There are many other default markers which can be used easily, whereas you can create your own custom markers too.
Fig 1 : Different available markers which can also be used for referring different models.
You can also handle multiple markers at a time to refer different 3D object in your augmented reality world. Traco, Kaije and Hiro are standard default AR markers available, but if you want to create your own custom marker you can follow the given link:
The link to create your custom marker:
http://flash.tarotaro.org/blog/2008/12/14/artoolkit-marker-generator-online-released/
Fig 2 : Obtaining 3D model on AR marker
Advantages of Augmented Reality can be seen in many fields like
- Interior designing: Suppose you have to install a TV or a hang a photo frame in room but not sure where to place, you can use this idea by simply placing the marker at desired place and visualize your TV/photo frame using your mobile phone.
- Automobile industry: Using computer generated model you can visualize how your bike or car will look after customization.
Fig 3 : Demo representing broad application of Augmented Reality in day to day life
These are just few examples to show the broad application of the combining AR.js with three.js.
My core idea behind this demo was to use the tools that are common on web (three.js) which is simple to use directly in browser and do not need any prerequisites so anyone can start using them right away. So go ahead and explore your ideas and creativities, this whole new world is waiting for you !!!
Author: Vaibhav B.
Contact us:
info@prototechsolutions.com
ProtoTech Solutions and Services Pvt Ltd
