Augmented Reality App hosted in a local web server.
What is Augmented Reality?
Augmented reality (AR) is one of the biggest technology trends right now, and it’s only going to get bigger as AR ready smartphones and other devices become more accessible around the world.
According to Wikipedia, Augmented Reality is defined as the interactive experience of a real-world environment where the objects that reside in the real world are enhanced by computer-generated perceptual information, sometimes across multiple sensory modalities, including visual, auditory, haptic, somatosensory, and olfactory.
Readily available and being used in a myriad of ways including snap chat lenses, apps that help you find your car in a crowded parking lot, and in variety of shopping apps that let you try on clothes without even leaving home.
There are five main types of augmented reality types right now.
1. Marker-Based Augmented Reality
This type of augmented reality is made to work when a camera/app is scanned over a visual marker. A prime example of a visual marker is a QR code or a 2D code.
2. Markerless Augmented Reality
Markerless augmented reality, is a type of AR still under intense development from the likes of Google and Apple. The technology uses a wide range of other technologies including GPS and other location-tracking technology, built within devices to work to its full potential.
3. Projection-Based Augmented Reality
This augmented reality type can detect touch and movement, to interact with programs.
4. Superimposition -Based Augmented Reality
Superimposition-based augmented reality is one of the most fun types of AR. Many companies have used this type of AR to help their customers feel more connected to their brand.
So let’s deploy a local web server that will host an AR web app.
Resources used in this application.
So let’s have a quick look into how this works. To built the application, used the visual studio code as the IDE and the below picture shows the structure of the project.
As the 3d object, I have used a pirate ship which is used to give someone as a gift item. So using this gltf model, we can build an Augmented Reality application that is used as a gift item in the shop.
You can download the object using a click here.
How to make this application?
First, we need a secure server to host the app and this application needs to access our mobile. Open the command prompt and type,
npm install -g local-web-server
to install the local web server. After installation of the server, create a folder that include the files used to build this application. Inside this folder, create an index.html file and insert the below code snippet there.
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>Augmented Reality Application</title>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"> </script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js">
</script>
<script src="https://unpkg.com/aframe-text-geometry-component@^0.7.0/dist/aframe-text-geometry-component.min.js"> </script>
</head><body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs> <a-asset-item id="imgOne" src="object/scene.gltf" crossOrigin="anonymous"> </a-asset-item> <a-entity position='0 0.73 0' geometry="primitive: plane; width:0.5; height: auto" material="color: blue" text="value: Pirate Ship : RS. 3000.0"></a-entity> <a-entity position='0 0.7 0' geometry="primitive: plane; width:0.5; height: auto" material="color: red" text="value: Rolls-Royce company (PVT) Ltd"></a-entity> <a-entity scale = ".0003 .0003 .0003" ><a-entity gltf model="#imgOne" scale="-1 1 1" crossOrigin="anonymous"> <a-animation attribute ="rotation" to="0 360 0" dur="9000" repeat="indefinite" easing="linear">
</a-animation>
</a-entity>
</a-entity>
<a-marker-camera preset='hiro'></a-marker-camera></a-scene>
</body></html>
I put the downloaded 3d object file along with the bin file to the folder called object and outside that folder, I have the index.html file as you can see the folder structure in figure 2.
Run and Test the application
This is application which is hosted in the web. So need to type the correct URL and proceed to the application. Then there must be a hiro image which is used to demonstrate the 3D object. Once the application detected the hiro image, the application will display the pirate ship and its details on the image.
Hiro Image can be downloaded from this link.
(note — I used the mobile phone camera to see the resulted augmented reality application as it is more easy to aim the camera on hiro image. You can also run the application on your phone, with connecting to the same internet connection and also the hosted url).
So above figure 3 clearly shows how the 3d object represent the ornament in a gift shop which is used to show to the customers. The object is rotating in its axis, which give a clear picture of the product. But the price and the company name is fixed as it allows to clearly show the price of the object.
I hope you enjoyed learning of how to make an augmented reality app which is hosted in a local web server. Thank you.
