Tips and Tricks for Augmented Reality With Unity and Vuforia

Hello, Augmented Reality traveller! In this post, I’ll show you some cool features of Vuforia that make it possible to create engaging AR apps. We’ll take a look at Cube and Cylinder Targets, Smart Terrain, VuMarks, and more. We won’t dive deep into any of those subjects, but I’ll try to cover enough to get you started.

If you aren’t familiar with Vuforia’s main concepts, check out some of my earlier posts. They’ll get you started building your first app with Vuforia, right from scratch.

1. Setting Up Vuforia on Unity

This section is just a review for those who have used Vuforia in the past. If you’re already familiar with the process of preparing a Unity project for Vuforia, feel free to skip this section. 

Before using any of Vuforia’s
resources on Unity, you’ll have to get the framework set up. First of all, you’ll
have to download
and import the Vuforia package for Unity.

Then you’ll need
to create a License Key for the project in Vuforia’s License Manager. Once it’s created, you’ll take the
key and insert it on an ARCamera prefab, and that’s it. Now you can start playing around with Vuforia.

I cover this process in depth with my tutorial Create a Pokémon GO Style Augmented Reality Game With Vuforia.

2. Designing an ImageTarget

There are multiple ways to create Augmented Reality experiences on Vuforia, and almost all of them rely on some kind of Target that must be recognized by Vuforia’s algorithm to start the augmentation process. You can design a target yourself and submit it to Vuforia’s Target Manager, making it recognizable by the system. However, this design must conform to some guidelines, otherwise the target won’t be tracked easily, or it might not even be recognized at all.

You especially need to know how to design an ImageTarget. That’s because a lot of other kinds of Vuforia targets are composed of multiple ImageTargets arranged in some specific position and order with a MultiTarget.

There are three main rules that an ImageTarget must comply with:

  1. It must be rich in detail.
  2. It must have a good contrast, with bright and dark regions.
  3. No repetitive patterns can be present.
An example image

In the background, Vuforia creates an arrangement of the image using its features, and then the algorithm can find such patterns and track the targets. Roughly, a feature in an image is a sharpened angle, like a box corner or the tip of a star. The quantity of features in an image is directly connected to its ‘trackability’.

The edges of an image

However, it’s important to understand that even hundreds of features in an image won’t help if those features are arranged in a pattern. The ImageTargets need some grade of randomness and chaos to be properly recognized.

Patterns on ImageTarges

If you keep those rules in mind, you’ll be able to create excellent ImageTargets, but if you need to know a little more, read the documentation.

3. Using MultiTarget

Also known as Cuboid Target, the MultiTarget consists of a series
of ImageTargets in a defined geometric arrangement. This arrangement allows Vuforia’s algorithm to track the targets at the same time, creating a volumetric reference. MultiTarget can be very useful in marketing campaigns to promote consumer interaction with product packages and so on.

3.1 Designing a MultiTarget

Basically, a MultiTarget design must conform to the same rules as an ImageTarget, adding two other concerns: the Depth of the box and its Geometric consistency. 

The box’s Depth should be at least half of its width. This is only a recommendation, and it will work if it’s a little smaller than that, but it’s interesting to keep that in mind.

Also, Vuforia’s algorithm expects consistency on all parts of the MultiTarget. That means that all of the sides of the box are expected to be in place. If this isn’t possible, it would be possible to keep the removable part blank when creating the target in Target Manager. A cereal box lid, for example, could be left blank, otherwise once the lid was open it could generate inconsistencies during the augmentation.

3.2 Creating a MultiTarget

The first step is to add or select a database in Vuforia’s Target Manager. Select the database and click on Add Target,
selecting the Cuboid option and setting its Width, Height, Length, and
Name.

Adding a Cuboid Target

After the MultiTarget has been created, select it and set its ImageTargets. As I mentioned, a MultiTarget is composed of a series of ImageTargets adjusted in a specific position. Each part of the cuboid must contain an image, and each image should
comply with the cuboid’s proportion, defined when the target was
created.

 

When the Cuboid is set, you’ll be ready to go. Just
download the database and import it to Unity. To use it, drag a
MultiTarget prefab to the stage, and select the downloaded database
and Cuboid Target. To learn more about MultiTarget, take a look at the documentation.

4. Cylinder Targets

According to the Vuforia documentation, “CylinderTargets enable you to detect and track images rolled into cylindrical
and conical shapes.” You
can use this kind of interaction to create engagement with product
packages, like soda cans or any other cylindrical product.

 

4.1 Designing a Cylinder Target

A CylinderTarget is also based on the ImageTarget, hence its design should conform to those rules. The top and bottom of the cylinder must be square images that will be marked by the Target Manager system. As with MultiTarget, you should consider the target’s consistency, meaning that if a part of the object can be removed, it would be helpful to leave it blank on the manager.

4.2 Creating
a Cylinder Target

This kind of target is created in two steps. The
first one is to
Add
or Select a database in Vuforia’s Target Manager, add a new Target, selecting the Cylinder option, and
set its Dimensions and Name.

Adding a Cylinder Target

Next, you’ll need to select the CylinderTarget you created and upload images to it. You can upload one image for the side, one for the bottom, and one for the top. Just click on the desired section and upload the image.

Adding a cylinder target

However,
the image must respect the cylinder’s ratio. It’s possible that your first attempt won’t work. But fear not, the
Vuforia system will give you the correct ratio, and you can adjust
your image proportions accordingly. For example, for a cylinder
with width of 1 and height of 2,
the ratio is 1.571. On
a target side, the image’s height is equal to the width divided by the
ratio. Once the ratio is correct, your upload will succeed.

Cylinder ratio error

Once
the CylinderTarget is defined, you can use it. You’ll only have to
download and import the database to Unity, and then drag a Vuforia
CylinderTarget prefab to your scene, and you’re ready to go.

5. Smart Terrain

The
SmartTerrain is a feature exclusive to Unity that enables you to
reconstruct and augment your physical environment. The feature
reconstructs, recognizes, and tracks physical objects and surfaces.
Those recognized objects can be used as terrain in Unity, opening up interesting possibilities for games and experiences.

The
experience is started when some kind of Vuforia target is
tracked. It could start when the device tracks an ImageTarget , a CylinderTarget, or any other type of target. 

Once started, the system
will recognize objects distributed around the target
and set the game stage considering those objects tracked. The terrain is then
virtually projected over the scanned objects, and the experience
begins.

Smart
Terrain
can recognize simple objects like boxes and cylinders, as
long as they conform to Vuforia standards,
putting those objects directly on the game stage and using them as part of
the scene. 

Those kinds of objects are called Props by the SmartTerrain system, and their size can be as small as a soup can or as
big as a large cereal box. Transparent objects such as glass are
not supported.

SmartTerrain works in three phases:

  • Staging:
    the user distributes the target and the props.
  • Scanning:
    the stage and props used in the setting are captured and
    reconstructed by the Smart Terrain tracker.
  • Tracking:
    the terrain is augmented in real time by the Unity scene
    you’ve developed.

The
creation process of a SmartTerrain experience is straightforward, but it takes a lot of
steps. Since the Vuforia team provides us with an excellent step-by-step guide to creating a Smart Terrain experience in Unity, we
won’t dive into the creation process here. 

If you want to give it a try,
follow the guide, and you shouldn’t have any problems. However, keep in mind that the SmartTerrain has certain limitations, especially
concerning hardware and system requirements. You can find out more about
the system in its documentation.

6. VuMark

A VuMark is a kind
of target that can be fully customized. It can reflect specific
design choices or a brand personality. It’s also extremely
recognizable by the Vuforia tracking system, and it can start AR
experiences or encode data.

VuMark examples

Before you start to play
around with VuMark, it’s good to understand that the creation process
isn’t the simplest. The Vuforia team has put
together a pretty good guide and some helpful tools, but I
would recommend this solution only for specific situations where
the design of the marker is of utmost importance.

I won’t go into all the VuMark requirements and design processes. Instead, I’ll just give you a general idea of the process and, if you decide to design
your own VuMarker, you’ll probably need to read Vuforia’s
guides first.

6.1 VuMark Design

It’s vital to understand some
architecture and design rules for VuMark, otherwise the target
won’t work properly.

A VuMark is composed of five parts:

  1. Contour: The contour isn’t actually drawn on the VuMark; it’s defined by the
    contrast between the border and the clear space. It’s the part that
    the Vuforia’s algorithm first detects.

  2. Border: The
    most identifiable and defining shape of the VuMark. It’s made
    of straight lines, with at least four angles located at the
    outermost edge of the design.

  3. Clear Space: A mandatory blank area that appears adjacent to the border. It
    guarantees there is enough contrast for the algorithm to detect the contour.

  4. Code /
    Elements    : The visual representation of the target’s ID. This is composed of elements with high contrast, which represent two
    states, dark and light. The number of elements present is defined
    when creating the VuMark Template in Illustrator using the tools provided by Vuforia. (More on this in the next section.)

  5. Background /
    Design Area    : This area is a blank canvas that will be ignored by the
    algorithm. You can design freely on this space.

VuMark parts

To find out more about
the design requirements, read the VuMarkDesign Guide.

6.2 Creating a VuMark

A VuMark is created using Adobe Illustrator and the VuMark Design Tools that are available for
download
on Vuforia’s site. The tools are comprised of three Illustrator
scripts, which come with some examples and a detailed PDF guide.

Before starting a VuMark, you should design its concept, considering all the guidelines proposed by Vuforia. Once the
design is complete, you’ll start to break it down into parts, obeying VuMark’s architecture.

The first step is to create a new VuMark template, using the VuMark-Setup.jsx illustrated script. In the VuMark Template
Setup window, you can choose the mark’s name, ID type, and length. The number of characters encoded in the mark will define how many elements it must contain.

VuMark Template Design Window

Once the template is created, you must copy your design concept and break it down using the layers created by the script. Each layer represents an
architectural part and has its own rule. You’ll use the VuMark-Verify.jsx script to check if your design is correct. The
script will give you advice on how to fix the design to conform to VuMark
standards.

VuMark Verify Window

After breaking down your design and verifying that it conforms to VuMark standards, it’s time to export the target. To
export the design, you must run the VuMark-Export.jsx script. It will create a new file in Illustrator and move the contents from your VuMark template. It will then prompt you to save
your VuMark template as an SVG file. 

Finally, your marker will be ready, and you can upload the
target file to a new database in Vuforia’s Target Manager. Then
you just need to download the database and use it like any other
target.

7. Exploring Other Cool Features

It’s been a long journey into the Vuforia system and the possibilities for Augmented Reality. As
you can see, the Vuforia system has a lot of cool features. This
was my fifth post on Vuforia, and yet I still couldn’t cover all its features.
However,
I’m confident that you have enough knowledge to explore those resources by yourself now.

Here are some pointers to other features
that are worth exploring:

  • User Defined Targets: works
    like ImageTarget, but the user can define the targets on the go
    using the device’s camera.
  • Cloud Recognition: exclusive to enterprise accounts. It’s a kind of target database
    that lives in the cloud, allowing you to upload and synchronize
    new
    ImageTargets with
    the app on the fly.
  • Object Recognition: This is an experimental feature that allows the recognition of an object, after it’s been scanned using a special tool provided by Vuforia.

While you’re here, check out some of our other posts on AR and mobile development!

Or to learn more about Augmented Reality with Vuforia and Unity, check out our video course here on Envato Tuts+!

{excerpt}
Read More

Leave a Reply

Your email address will not be published. Required fields are marked *