DEV Community

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

Posted on

16

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

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (2)

Collapse
 
androaddict profile image
androaddict

Nice man

Collapse
 
varshithvhegde profile image
Varshith V Hegde

Thank You🌟

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more