VuMark Design Guide

A VuMark is a Vuforia Engine target that can be customized to closely reflect a company’s brand identity while maintaining a discreet size and visual consistency among the targets.

A VuMark is capable of storing encoded data as well as initializing an AR experience. One example of VuMark usage is for enterprises: by affixing VuMarks to their manufactured equipment, enterprises can both identify the piece of equipment and overlay augmentation that indicates how to use it.

This article will help you create your own VuMark.  It provides guidelines to help you design a VuMark that conforms to the requirements for making a functional and well performing VuMark. Once you understand the design elements and rules governing VuMark designs, you can implement your design in Adobe Illustrator to output an SVG file that will be used to generate your VuMark in the Target Manager, see: Designing a VuMark in Adobe Illustrator

The Parts of a VuMark

VuMarks consist of five major parts that you will need to understand when designing your own. 

Figure 2 - VuMark Parts

Contour

The Contour is what the Vuforia Engine computer vision algorithm first detects. After finding the contour, the algorithm looks for the code and “reads” it to identify the “ID” that is encoded within the VuMark.

The Contour is not explicitly drawn or visible in a VuMark design. Rather, the Contour is the line that appears where two other parts of the VuMark meet – the Border and the Clear Space. Essentially the Contour is defined by the contrast between the two different colors of the Border and Clear Space.

Border

The Border is typically the most identifiable and defining shape within the VuMark. In figure 2, the Border is the outermost shape made of six straight lines forming a hexagon.

Clear Space

The Clear Space is the mandatory blank area that appears adjacent to the Border along its entire length. The Clear Space can be either inside or outside of the border and is required in order to guarantee there is enough contrast for the algorithm to detect the Contour.

Code / Elements

Every individual VuMark contains a unique Code, which is a visual representation of the “ID” encoded in the VuMark.

The Code consists of Elements and the type of data and length of the value/ID that is encoded determine the number of Elements. The larger the value length, the larger number of elements are required.

Every Element has 2 states: a Dark and Bright state. A unique code is generated by setting some of the elements in the Dark vs. Bright state (roughly 50% of Elements in each state).

Background / Design Area

The Background or Design Area is a layer where you can put any parts of the VuMark that are not used for detection. There is a lot of freedom in designing and placing the Background. We recommend adding graphically rich background if you plan to use VuMark for tracking as well.

Design Requirements

Border & Clear Space

Code / Elements

Determining the number of Elements that your VuMark design must accommodate is an important detail that may determine the VuMark’s shape and composition. Your choice of the type of data and the length of that data or “ID” will determine how many Elements will be needed in your VuMark.

There are 3 types of data that can be encoded:

The section Setup a VuMark File in Adobe Illustrator describes how to calculate the number of Elements that your design must contain. 

• Every Element must have a Bright and Dark state defined
• An Element’s Bright and Dark state are represented by different colors that have a high contrast to each other. Ideally all Bright Elements have the same color, slight variation is acceptable. Same principle applies for Dark Elements.
• The Bright and Dark states of any Element must be in the exact same position (perfectly overlapping).
• An Element’s size (both the height and width) must be at least 3% of the length of the largest dimension of the overall VuMark.
• Each Element can be a unique size and shape provided the element meets the size requirement. Use filled paths or compound paths only. 
  • Strokes only will not work. 
  • Also, do not use grouped or layered items as Elements. 
  • Do not use Appearance Attributes.
• Elements do not need to be adjacent – they can be scattered anywhere within the VuMark.
• Elements can overlap with the Background/Design Area. They cannot overlap the Border, Clear Space or other Elements.
• Elements can be placed inside or outside of the Border and Clear Space, but the farthest Elementmust be no more than approximately 50% of the VuMark’s width from the border.

Design Tip – Using ‘Fake’ Elements

Sometimes it can be challenging to design your VuMark such that it has the exact number of required Elements, but there is a technique to make this easier to accomplish.

This technique involves creating more than the required number of Elements and designating some of them as “fake” elements. They are “fake” in that they look like real Elements but are actually not included in the Bright or Dark Elements layers – instead they are placed in the Background layer. Since anything in the Background layer is ignored by the Vuforia Engine algorithm, your VuMark design technically has the exact number of required Elements that the algorithm expects.

Example: Your VuMark requires 122 Elements, but from a design perspective it is hard to arrange your Elements in an aesthetically pleasing way such that you have exactly 122 elements, but 128 elements fit nicely into your design. You would select any 6 Elements that you want to be considered “fake” and move them to the Background layer.
In the example below, this particular VuMark only required 122 Elements in its design, but the element layout worked best with 128 Elements. You can see that 6 of the Elements have been set to look like Dark Elementsbut have actually been placed in the VuMark-Background layer where they will not technically be treated as real Elements.

Figure 3 – Adding ‘fake’-Elements to the design

Background / Design Area

Since the Background / Design Area is not used for detection, there aren’t many requirements or limitations for what you can place there. You have a lot of freedom to create a VuMark that expresses your brand or identity. Background can also be empty as it is assumed to be white. Note that the background can influence the size of your VuMark which affects the minimal size of Elements, and Border and Clear Space width requirements.

The companion article to this guide, Designing a VuMark in Adobe Illustrator, will show you how to implement these guidelines in Adobe Illustrator and to output an SVG file that will be used to generate your VuMark in the Target Manager.

Size and Print Considerations

Physical Size

VuMark instances are generated in PNG, PDF, or SVG formats by the Vuforia Engine in the Vuforia Target Manager. Printing PDF documents will create the VuMark printouts in exactly the same size as you have designed them in Illustrator. When creating printout based on PNG or SVG files you should print true to their scale.

In more detail, when you work with printed targets that are made from the same VuMark template, and therefore, one defined size from the Vuforia Target Manager, you should ensure that all instances are in the same sizes. Printing a VuMark instance larger than intended for the purpose to be detectable further away will cause issues when using the Device Tracker for Extended Tracking. 

Detection Range

The detection range of a VuMark is limited by its apparent size in the mobile application’s live camera viewfinder. The VuMark shall cover around 1/4-1/16^th of the live camera view in your application. This means, in a typical user scenario, the user of your app shall be able to hold the mobile device camera so that the VuMark appears to cover 1/4-1/16^th of the screen.

The recommended smallest physical size of a VuMark shall not be smaller than a dime (~1 inch or 25mm). In case of a small VuMark when you move the device closer to the VuMark to fulfill above coverage requirement, at some point the camera will fail to focus on the target.

Printing

VuMarks should be printed on paper and other media that ideally has a matte surface. Avoid glossy and reflective surfaces. The VuMark must be flat to be detected and tracked accurately.

If your use-case require you to use different sized instances from a VuMark template, we recommend using a scale factor at runtime and in some special cases disabling the Device Tracker. For more information, please refer to Working with VuMarks in Unity.

Learn More

Designing a VuMark in Adobe Illustrator

How to Work with VuMark Databases