Create account

DEV Community

Varshith V Hegde

Posted on Oct 24, 2022

How I Created Augmented Reality(AR) Web App using Only HTML

#webdev #html #javascript #webpack

What is Augmented Reality(AR)?

Augmented Reality(AR) is a technology that superimposes a computer-generated image on a user's view of the real world, thus providing a composite view. It is related to a more general concept called mediated reality, in which a view of reality is modified (possibly even diminished rather than augmented) by a computer. As a result, the technology functions by enhancing one's current perception of reality. AR can be defined as a system that fulfills the following criteria simultaneously:

The system must be able to perceive its environment.
The system must be able to analyze or process the information it perceives.

Why I Created Augmented Reality(AR) Web App?

I working on an AR furniture App called Touch Reno and it was like a startup.

When we pitched our idea to the investors, they were like "It's a great idea but we don't have any idea how it works".

So I decided to create a simple AR Web App to show them how it works.
So that they can view what is AR without actually downloading any app.

How to Create?

After some intensive research, I found that AR.js
It uses A-Frame which is a web framework for building virtual reality experiences.
Main part of this AR.js marker.
Marker is a pattern that is recognized by the AR.js library. It is a pattern that is printed on a paper and then it is used to recognize the object in the real world.

Working

First, we need to create a marker. or just download from here Marker

Step 1

Create a new file and name it index.html
Add the following code to the file



<!doctype HTML>
<html>
<style lang="en" type="text/css" id="night-mode-pro-style">
    body {
        background-color: transparent;
    }
</style>
<link type="text/css" rel="stylesheet" id="night-mode-pro-link">

<head>
    <title>AR</title>
    <link rel="shortcut icon" href="https://img.icons8.com/fluency/344/augmented-reality.png" type="image/x-icon">
    <meta name="viewport" content="width=device-width, user-scalable=yes, minimum-scale=1.0, maximum-scale=1.0">
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <script src="https://raw.githack.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
    <script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
</head>
<!--  https://raw.githubusercontent.com/nicolocarpignoli/nicolocarpignoli.github.io/master/ar-playground/models/CesiumMan.gltf-->
<body>
    <a-scene embedded arjs="detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
        <!-- include assets like 3D models and give them an id to use later -->
        <a-assets>
            <a-assets-item id="dinosaur"
                src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf">
            </a-assets-item>
            <a-assets-item id="robot"
                src="https://raw.githubusercontent.com/nicolocarpignoli/nicolocarpignoli.github.io/master/ar-playground/models/CesiumMan.gltf">
            </a-assets-item>

        </a-assets>
        <!-- recognise different barcode markers ad show digital objects - box/sphere/cylinder/3D-model/image/video/anything -->
        <a-marker type="barcode" value="0">
            <!-- <a-box material="color: red;" scale="0.5 0.5 0.5"></a-box> -->
            <a-entity position="0 0 0" scale="1 1 1" rotation="0 0 0" animation-mixer gltf-model="#robot"></a-entity>
        </a-marker>
        <a-marker type="barcode" value="1">
            <a-entity position="0 0 0" scale="1 1 1" rotation="0 0 0" animation-mixer gltf-model="#robot"></a-entity>
        </a-marker>
        <a-marker type="barcode" value="2">
            <a-cylinder color="#FFC65D" scale="0.5 0.5 0.5"></a-cylinder>
        </a-marker>
        <a-marker type="barcode" value="3">
            <a-entity position="0 0 0" scale="0.06 0.06 0.06" rotation="0 90 0" gltf-model="#dinosaur"></a-entity>
        </a-marker>
        <!-- adding the camera -->
        <a-entity camera></a-entity>
    </a-scene>
</body>

</html>

Here we are using a-scene tag which is a container for all the 3D objects in the scene.
We are using a-marker tag which is used to detect the marker.
We are using a-assets tag which is used to load the 3D models.
We are using a-entity tag which is used to add the 3D models to the scene.
We are using a-camera tag which is used to add the camera to the scene.
We are using a-box tag which is used to add the box to the scene.
We are using a-cylinder tag which is used to add the cylinder to the scene.

Step 2

Just save the file and open it in the browser.
Download the Marker and print it.
Then focus the camera on the marker and you will see the 3D model.

Demo Video

user-images.githubusercontent.com

Conclusion

I hope you enjoyed this tutorial. If you have any questions, feel free to ask in the comments section below.
Comment your thoughts and suggestions below.
Code is available on my Github

Varshithvhegde / Arweb

Arweb

Marker0

Marker2

Marker3

Demo Video

Screenrecording_20220926_212315.mp4

View on GitHub
For Live Demo Click Here