DEV Community

Cover image for How I Created Augmented Reality(AR) Web App using Only HTML
Varshith V Hegde
Varshith V Hegde

Posted on

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

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>


Enter fullscreen mode Exit fullscreen mode
  • 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

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

    Arweb

    Marker0

    marker0

    Marker2

    marker2

    Marker3

    marker3

    Demo Video

    Screenrecording_20220926_212315.mp4
  • For Live Demo Click Here

Top comments (2)

Collapse
 
androaddict profile image
androaddict

Nice man

Collapse
 
varshithvhegde profile image
Varshith V Hegde

Thank You🌟