About AR. Js

Ar.js is a lightweight augmented reality class JavaScript library that supports tag – and location-based augmented reality. Developers can introduce AR features and functionality to any web site with a few lines of HTML. The project, which is open source and has nearly 14,000 stars on GitHub, is being used by developers across a variety of platforms to create more new digital experiences. The AR.js framework includes cross-browser compatibility and support for WebGL and WebRTC, which means it works on Android and iPhone devices above iOS 11. By wrapping many different AR frameworks, including three.js, A-Frame, and ARToolKit, AR.js makes introducing AR into Web applications much simpler and more efficient. It has the following advantages:

  • Cross-browser compatibility

  • Even on older devices 60FPS performance can be achieved

  • Based on the Web, no installation is required

  • Open source, free access

  • Available on all mobile devices using WebGL and WebRTC

  • No additional or uncommon hardware required

  • It can be done in less than 10 lines of HTML

Create a project

Suppose you’ve set up a development environment (local or otherwise) and secured it with SSL certificates. Why use SSL? Sites that Chrome requires camera access to must be delivered strictly over HTTPS.

We can write an ar.js demo with just 8 lines of HTML.



Edit the above code into the index.html file in your development environment and open it in a compatible browser of your choice. You will receive a request to access the camera. Click Allow. The camera is pointed at the recognition image (below), and if all goes well, you should see a translucent white cube on the mark.



To remove the debugger from the video display simply add the following code:



Use custom tags

Step 1: Identify your tagged image. For the best results, this should be a simple, high-contrast PNG image, pre-cropped to square and at least 512×512 in size. This also has to be rotationally asymmetric, which means that no matter how much it is rotated, it always looks unique. Here are some good examples of tagging images:



Step 2: Convert the image to a.patt file and an ar.js tag. Use this tag trainers (https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html), upload the image to be used as the marker.

  • Download Marker: ar.js uses.patt files to identify markers and display 3D content.

  • Download Image: The actual.PNG Image with the appropriate black border is used as the physical tag.

Step 3: Add the.patt file to your website. Wherever the application can access it, such as /img/patterns/my-marker. Patt

Step 4: Add the tag to the ar.js element. Using the A-frame method, all that needs to be done is to add an A-marker element whose type attribute is ‘pattern’ and take the relative path of the pattern file as the ‘URL’ attribute.

Using this method, we also need to include an A-Entity Camera so that the virtual camera is included in the 3D environment being rendered.



Step 5: Finally, add the 3D model you want to display. To do this, we need to add a model that will be displayed when this tag is found. Fortunately, the framework contains a lot of raw geometry that we can easily insert with a few simple element names:

  • <a-box></a-box>

  • <a-sphere></a-sphere>

  • <a-cylinder></a-cylinder>

  • <a-plane></a-plane>

For this example, I’ll add a red sphere just above the tag.



The test results are as follows:



Reduce the size of the black marker border

Personally, I think the default border thickness is hard to see on the tag. So if you’re using the latest version of the frame, you can resize the borders to your liking!



Which one looks better? Left: 0.5, right: 0.8

You can go to this website to resize:

https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

Once you have determined the desired pattern scale, you can generate and save your application’s tag patterns and tag images, binding them with a few minor adjustments. The following code:



Use your own 3D model

Sure, cubes, spheres, planes, and cylinders are cool, but most of the time, you’ll need to utilize and display custom 3D models in the augmented reality scene you’re creating. The easiest way is to ensure that the model is in OBJ or glTF format.

For the OBj model: In our A-Entity tag, we will use the obj-Model item, which requires you to specify the path to the.obj model file and the accompanying.mtl material file. The final result should be as follows:



For the glTF model



Create event listeners

Why do we have an event listener? I can give you a real-world example: the customer wants to display a simple block of content every time a tag is active on the user’s device. As long as there are no currently active tags, the content should disappear. To do this, we need to add an event listener that will fire when a tag is found/lost, then hook it into the JavaScript bundle at the primary site, and show/hide the content when the event is fired.

To implement an event listener, simply register an Aframe component and set up event listeners for markerFound and markerLost. In their respective callbacks, write whatever JS content you want to be triggered when a tag is found or lost, as shown in the following code example:



Wechat official account: AIRX Community (a leading AI, AR, VR technology learning and communication platform in China)