Tips + tricks to spice up your AR.js projects
Okay, so you should have some foundations down from my previous article on AR.js. Let’s dive into some more interesting tidbits.
Shrink the size of the black marker border
Personally I think that the default border thickness is a little jarring to see on markers, and I’ve heard the same thing parroted by a few other people using AR.js. However, if you’re using the latest version of the framework, it’s easier than ever to adjust the border size to your preference!
I discussed during the last article about how to generate markers and their images using the AR.js Marker Training tool. If you visit the link, you’ll see that in the top-left corner there’s a little slider for Pattern Ratio (hint: that’s the black border thickness). You can think of it as ‘Percentage of the marker taken up by the actual marker image’. So for instance, if the Pattern Ratio is set to 0.75 (my preferred value), that means that 75% of the marker is your image in the center, and the remaining 25% is taken up by the black border.
Once you’ve nailed down where you want your pattern ratio to be, generate and save both your marker pattern and marker image for your app as detailed in my previous AR.js article. Back in your app, all it takes is one small adjustment to tie this in. On your <a-scene> element, add in
patternRatio=0.75 (or whatever your desired value is) to the arjs prop.
Use your own 3D models
Sure cubes, spheres, planes, and cylinders are cool, but most of the time you’re going to want to utilize and display a custom 3D model in the augmented reality scene you’re creating. Luckily AR.js makes that a pretty simple endeavor!
The easiest way to get started with this, would be to make sure your models are either in obj or glTF formats. These work natively with AR.js and a-frame, requiring zero additional setup or configuration to get started. You can find a huge repository of free and affordable obj models on https://sketchfab.com.
Note: In the following examples you’ll see the
<a-entity> tag, this is a generic replacement for
<a-sphere> and the like, allowing you to specify your own geometries/materials/etc instead of using prefabbed ones.
For obj models:
Inside of our a-entity tag, we’ll be using the
obj-model prop, which will require you to specify paths to both the .obj model file and the accompanying .mtl material file. The end result should look like this:
For glTF models:
This one’s even easier, because it’s just one path! Swap out the obj-model prop for
gtlf-model and supply the path to your model as the value:
Animate an object’s properties
While using the a-frame version of AR.js you can implement and use its associated components. Using a-frame’s Animations API we’re able to rotate, scale, and otherwise manipulate our models and their properties pretty easily.
For this example we’re going to be making our imported model blink slowly, by changing the material’s opacity back and forth from 0 to 1, and back to 0, an infinite amount of times. In order to add this in, we just insert an
<a-animation> tag between the
<a-entity> closing and opening tags. Setting the attribute prop to
material.opacity lets a-frame know that we want to animate the opacity,
to props are the values that we’re animating between.
direction prop to “alternate” means that once we’ve gone from the initial value to the new value, instead of popping directly back to the initial value and starting over again, the animation switches direction and instead animates back to the initial value. Finally, we set the
repeat prop to “indefinite”, meaning that we want this animation to run forever.
Create an event listener for the markers
Just a quick warning, this will require you to dig into the source code of AR.js, and then re-compile the scripts using
make. If you’re comfortable with that, let’s continue!
Thanks to nikolaymihaylov’s pull request, we can see exactly where to add these edits. There’s only one file that needs to be modified, aframe/src/component-anchor.js, but it does so in a couple of different places. If you click on that link, you’ll see in green the lines that should be added to the current component-anchor.js file. Once that’s been changed, navigate to the root aframe directory and run
make build && make minify to produce and overwrite the .js and .min.js scripts for your projects.
Then, back on your actual project, to implement the event listeners you’ll have to register an aframe component and then set the event listeners for markerFound and markerLost. Inside their respective callback functions, write any JS you want that’ll be fired when a marker is found or lost.
That’s all for now! If you have any questions or would like to give me some suggestions for AR.js article #3, feel free to drop me a line on Twitter.