How To Create Your Own Marker For AR Js

Posted By : Pawanpreet Singh | 31-Oct-2018

Here we will discuss how to create your own marker for AR js, As you know AR js is a javascript library use for creating an application with the capability of Augment Reality. But it relies on marker meaning we have to define a pattern on which we want to Augment the things, By default, this library use HIRO marker and there are several other inbuilt markers like kanji, but if you want to use your own pattern you can follow the below steps:

 

Following are the requirement for creating your own marker for AR js


1. AR.js (https://github.com/jeromeetienne/AR.js)
2. marker-generator (https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html)
3. Image of marker preferably square and in black and white colors, In this example, have used the image as shown below.

 

p image

To generate your own marker

 

1. Go to the marker generator website.
2. Upload marker there.
3. click on Downoad Marker and Download Image, save both things in a location.
4. Our generated Marker image is as shown below and you can use my marker from here.

marker image

Use generated marker in our AR js application

1. Upload marker to a location on web and copy its path.
2. To use marker in AR js application you have to define the following line.

 

<a-marker preset="pattern" type="pattern" url="[web location of generated pattern]">

 

3. Your code will looks something like as shown below

 

<html>
<script src="aframe.min.js"></script>
<script src="AR.js/aframe/build/aframe-ar.js"> </script>
<a-scene >
    <a-sky color="#87cefa">
        <a-animation attribute="color" dur="10000" from="#87cefa" to="#1e90ff" repeat="indefinite"></a-animation>
    </a-sky>
    <!-- Basic plane. -->
    <a-marker preset="pattern" type="pattern" url='https://s3.amazonaws.com/oodles-blogs/blog-images/495e139a-0a49-474f-ab3c-476cbcc9bbc8.null'>
        <a-plane color="#c2b280" height="5" width="5" rotation="-90 0 0"></a-plane>
        <a-torus color="green" radius="0.4" position="-1.5 0 -1" rotation="-90 0 0"></a-torus>
        <a-cylinder color="brown" height="2" radius="0.03" position="-1.5 0 0" rotation="-90 0 0"></a-cylinder>
        <a-torus color="green" radius="0.4" position="1.5 0 -1" rotation="-90 0 0"></a-torus>
        <a-cylinder color="brown" height="2" radius="0.03" position="1.5 0 0" rotation="-90 0 0"></a-cylinder>
        <a-text color="red" value="Pawanpreet Singh" width="5" position="-1.3 0 -2" rotation="-90 0 0"></a-text>
        <a-text color="blue" value="Oodles Technologies" width="5" position="-1.2 0 0" rotation="-90 0 0"></a-text>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>

</html>

 

4. Code shown here will generate the following result if shown below marker.

 

output result

 

Hope you enjoyed my post.

 

About Author

Author Image
Pawanpreet Singh

Pawanpreet is an seasoned Project Manager with a wealth of knowledge in software development, specializing in frontend and mobile applications. He possesses a strong command of project management tools, including Jira, Trello, and others. With a proven track record, he has successfully overseen the delivery of multiple software development projects, managing budgets and large teams. Notable projects he has contributed to include TimeForge, Yogyata, Kairos, Veto, Inspirien App, and more. Pawanpreet excels in developing and maintaining project plans, schedules, and budgets, ensuring timely delivery while staying within allocated resources. He collaborates closely with clients to define project scope and requirements, establish timelines and milestones, and effectively manage expectations. Regular project status meetings are conducted by him, providing clients and stakeholders with consistent updates on project progress, risks, and issues. Additionally, he coaches and mentors project leads, offering guidance on project management best practices and supporting their professional development.

Request for Proposal

Name is required

Comment is required

Sending message..