Comment on page

Marker Tracking

Construction of an AR experience using image or marker tracking


This guide provides a walkthrough of how to create a marker tracking experience.


Follow the steps below to create a WebAR experience on a printed marker using Blippbuilder:
  • Login to HUB
  • You will be re-directed to the Blippbuilder page.
Blippbuilder Page
  • Click on 'Create A New Project', provide a name for your project and click 'Continue.'
  • A pop-up will appear on the screening providing you with options to select the type of AR project you wish to create.
Choose the Type of Project
Select the option 'Select Marker' for creating a project using image markers as triggers.
  • You will be re-directed to select the maker image you want to utilise in the project.
  • There are two ways to upload markers:
  1. 1.
    Browse and Upload: Use this option to browse and upload images from your local system.
  2. 2.
    Autogenerate Marker: Use this option to autogenerate a marker and blippbuilder will provide a sample marker for you to test the project.
Autogenerated Marker
You can add upto 3 markers in a single project. Use the autogenerate option to receive a sample marker in case you do not have a marker already.
The Design Canvas functionalities are the same for any kind of project. Refer below section for information on utilising various design canvas elements to create a surface, marker or gyro tracking experience.
  • Click 'Confirm'
  • You will be re-directed to the design canvas and the uploaded marker will appear on the stage. Add various design canvas elements in your projects, preview and publish.
Design Canvas with Marker Image


The following section provides information on how to utilize various design canvas elements to create, preview and publish a project:



Design Canvas Basic Elements

  • The Blippbuilder design canvas comes with a few pre-defined elements and 3D shapes can be used to build the Blipp.
  • From the left panel, click on 'Your Library'
  • Upload your assets by a simple drag and drop action or browse the system to upload assets.
  • Drag and drop the uploaded assets, 3D models from the 3D library, widgets, lighting or animation elements from the left panel to the centre of the screen which is referred to as the 'Stage.'
  • In the below image, For eg: An 'empty sprite' element and a 'cylindrical 3D shape' has been dragged and dropped onto the 'stage' as a part of designing the Blipp. Refer image below for more information:
Design Elements

Layout, Action and Basic Properties


  • Define a desired layout for your object in the stage which includes the position, rotation and scale of the object.
  • Select the object from the stage and click on 'Layout' from the right panel of the design canvas
  • Scale: Resize width and height (click on the padlock icon to maintain the aspect ratio).
  • Position: Use the X and Y controls to move the object into the required position on the stage. Use the Z control to adjust the depth (i.e. height of the marker).
  • Rotation: Rotate on its X, Y, and Z axes.
Ensure Assets are on different Axis to avoid flickering or flashing. This is caused due to assets overlapping on the same 'Z-Axis'


  • The desired action for the object can be defined in this section.
  • The actions 'On Touch' can be audio, video, navigation to website etc.
  • Select the object from the stage and click on 'Action' from the left panel
  • From the drop-down choose the desired action.

Basic Properties

  • Desired basic properties such as object texture, roughness, metalness, bump, opacity, colour etc can be defined in this section
  • Select the object from the stage and click on 'Basic Properties' from the left panel
  • From the drop-down choose the desired action.
  • Refer image below for more information:
Basic Properties

Animation Layer and Effects

Animation Layer

  • Add desired animation for the object from the animation layer in the bottom panel
  • The animation can have multiple layers and objects
  • Refer image for more information
Animation Layer

Animation Effects

  • Add desired motion effect to the objects
  • Select the object from the stage and apply desired motion effects such as move, rotate, scale, fade out, bounce etc.
  • Find the 'Animation Effects' section on the bottom right panel as shown in the image below:
Animation Effects

Preview and Publish


  • To test the Blipp created click on the 'Preview' icon from the top right of the screen.
  • A test Blipp is created which can be accessed by scanning the QR code displayed on the screen
  • The test code expires in 20minutes
  • Refer below image for more information:
Preview Project
  • Close the screen to navigate back to the project.


  • After reviewing the preview, the project can be published.
  • Click the 'Publish' icon from the top right of the screen.
  • The Status of the project will appear as 'Live' if published. Refer image below:m
  • Scan the QR code on the to test the published project.
  • Apply this QR code on all surfaces from which you desire the AR Experience to be triggered.
  • For more information refer image below
Published Project
For Marker tracking the tracking is enabled on the uploaded marker.