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.
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.
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.
Hope you enjoyed my post.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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.