× Initiating database migration review
× Database migration started
 
 
 

Markers

 
 
A marker is the recognized image that helps the Blippar app know what blipp it should load, and once it has been loaded, where it should position the 3D assets in the augmented space.

Here are some examples:
https://blippar.com/en/showroom/
 
 

Format and size

The marker is the most important part of your blipp. A poor choice of marker will make the blipp not detect, or jitter, or perform poorly as the tracked object is moved around.
A marker should have the following characteristics:
  • • a jpeg (.jpg) image with RGB color space and without any paths or extra channels saved within the file (eg from Photoshop, use Save for Web...without Embedded Profile)
  • • high contrast, with as many sharp crisp edges and corners in the image as possible.
  • • a good spread of features across the whole marker. A marker with all the detail at the bottom and none at the top may not track well.
  • • a size measured in 100s of pixels. A good size should fit in 800 x 800 pixels.

  • Do not create markers of huge resolution as larger sizes will not improve tracking and will slow down server uploads.
    Do not create markers with too small resolution as as it would generate too few tracking points - keep it over 300x300.
    The marker doesn't have to be square but for a banner under 160 pixels on one side the tracking becomes poor and if it is too narrow the tracking points generator doesn't even work - in that case add some empty space around the banner.

 
 

Detecting and Tracking

A blipp is using markers for 2 main purposes: detection (ie to trigger the blipp) and for tracking (ie to continuously detect where is the marker through the camera feed and to stick the AR experience to it).
  • • By default, when you upload a marker to HUB, it will be used for both detection and tracking.This means that the blipp will trigger once the app has confirmed that it has detected the image and can track it.
  • • If you tag a marker as onDetect then the blipp will trigger before it knows it can track, however it will still try to track to this image once the blipp has started.
  • • If you create a onDetect marker which has a __track twin (ie same name with the __track added) then it will trigger before it knows it can track using the detect marker then try and track using the tracking twin marker.
  • • If you create a onDetectForcepeel marker then it will trigger and not attempt to track, going straight to peel mode.


Step-by-step guide:

  • 1. First you need to carefully create your markers.
    If you are creating a marker which is going to be used for detection you need to ensure that all parts of the image which are similar to other markers are excluded so they do not trigger incorrectly. In other words if you wish to differentiate between two types of marker but they contain the same logo or have elements which are the same (such as pack weight, logo, price, etc) then these must be masked from each of those when used as a marker.
For example, if you have these two images to use as markers, you will notice that the Star Wars logo, brand logo and Blippar logo's are the same on each. Therefore to make sure they trigger unique blipp experiences these areas must be masked out like this:

 
 
Original image

Masked out image
 
 

  • 2. This part is the normal track/detect marker pair creation however you should save the ones masked out with no __detect.jpg at the end of the filename (e.g. marker1.jpg).
  • 3. The brand logo's, Blippar logo, etc... can be left in place for the tracking marker, save these out with __track.jpg at the end of the filename (e.g. marker1__track.jpg).
  • 4. Now to ensure that the detect marker is going to trigger the blipp we need to add a JSON data file into your blipp.
    Create a file called .blipp.metadata at the root of the blipp folder structure.
    blipp_root_directory/
       + .blipp.metadata
       + assets/
       + javascript/
    

    Edit this file and enter the following JSON data (replacing marker1 with whatever you saved your marker name as):
    {
        "markers": [
            {
            "filename": "marker1.jpg",
            "detectmode": "onDetect"
            }
        ]
    }
    

    The values for detectmode can be:
    • onDetect
    • onDetectForcepeel
    • onTracking

    However onTracking is the default so you do not need to use this one or list those in the JSON metadata file. If you have more than one detect marker you can add this in the JSON metadata file like this (replacing "marker1" and "marker2" with whatever you saved your marker names as):
    {
        "markers": [
            { 
                "filename": "marker1.jpg",
                "detectmode": "onDetect"
            },
            {
                "filename": "marker2.jpg",
                "detectmode": "onDetect"
            }
        ]
    }
    

  • 5. Compress the blipp folder and publish it as normal.