AppAR Marker Tracking
Construction of an AR experience using AppAR
This article is a quick start guide providing instructions and guidelines to create an AppAR experience with a printed marker by using Blippbuilder.
This documents helps you build Blipps or AppAR experience with a printed marker using Blippbuilder. It is intended to be used as a quick start guide.
A printed marker is referred to an image which can be uploaded into Blippbuilder. You can use any image of your choice to create and trigger the AR experience. Alternatively, you can also use the 'auto-generate marker' functionality which will provide you a variety of image options that you can use to build and trigger the AR experience.
Follow the steps below to create an App project on a printed marker using Blippbuilder:
- Login to
- You will be re-directed to the Blippar Hub
- Click on 'Create An App Project' as shown in the image below:
HUB
- A pop-up will appear on the screening providing you with options to select the type of AR experience you wish to create.
- Select the option 'Start From Scratch' since the AR experience is being built with a printed marker. Refer below image
HUB
- A pop-up will appear on the screen to 'Browse and upload' or 'Auto-generate marker'
Browse and upload a marker:
Create A Blipp
- Click on 'Browse' as shown in the image above to upload images.
- You can alternatively, 'drag-and-drop' the images into this section
Note: For best results, the marker format should be JPEG or RGB and preferably between 300-800 pixels in width and height respectively
- Enter a desired name for your blipp in the section as shown in the image below:
Create A Blipp
- Click 'Continue'
Note:
- 1.If your marker has been uploaded correctly you will notice a 'blue check-box' next to the image as shown above.
- 2.You can upload upto three markers or images
- The uploaded image will appear on the Blippbuilder 'Design Canvas' as shown in the image below:
Design Canvas
Auto-generate Marker:
- You can try to build a blipp by using our example markers by clicking on the option to 'Autogenerate marker'
Create A Blipp
- Enter a desired name for your blipp in the section as shown in the image below:
Create A Blipp
Note:
- 1.An auto-generated marker is uploaded for you.
- 2.You will notice a 'blue check-box' next to the image as shown above.
- Click 'Continue'
- The auto-generated marker will appear on the Blippbuilder 'Design Canvas' as shown in the image below:
Design Canvas
- 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 Canvas
- 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.
Note: 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.
- Refer image below for more information:
- 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
- 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
- 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 'Motion Effects' section on the bottom right panel as shown in the image below:
Motion Effect
- To test the Blipp created click on the 'Preview' icon from the top right of the screen.
- Select the target apps on which you would like to test your blipp.
- Enter all your target app names in the section and click 'Continue' as shown in the image below:
Note:
- The various apps selected will be seen under 'Now Publishing to' section as shown in the image above.
- You can 'Add All' apps or 'Remove All' apps by clicking on the relevant option as shown in the image above.
- To test the blipp, a pre-populated test code will appear on the screen filled in the section 'Add Test Codes'
- You can also provide your own code in this section
- Click 'Continue'
- Refer the image below for more information:
Add Test Code
Note: Test codes are required when you are testing the blipp or wish to see a preview before publishing the blipp. You can alternatively, publish the blipp without using a test code by clicking 'Publish'
- A pop-up confirming the 'Test Code' and the 'Apps Selected' will appear on the screen
- Verify the details and click 'Publish to Test' as shown in the image below:
Test Blipp
- You will get a pop-up confirming the blipp is in 'Test Mode'
- To unlock the experience use the 'Test code'
- Click 'Close.' You can alternatively click 'Continue Editing' to further edit the blipp created.
- You will see the below pop-up confirming that your blipp is 'In Test'
Project is in TEST
- After reviewing the preview, the Blipp can be published.
- Click the 'Publish' icon from the top right of the screen.
- Select the target apps on which you would like to test your blipp.
- Enter all your target app names in the section and click 'Continue' as shown in the image below:
Publish
Note:
- The various apps selected will be seen under 'Now Publishing to' section as shown in the image above.
- You can 'Add All' apps or 'Remove All' apps by clicking on the relevant option as shown in the image above.
- Choose the desired availability or locations for your blipps to be published.
- You can choose from 'Global' or "Local to Country' options.
- You can also add the desired countries by name.
- Click 'Continue'
Publish
- Depending on your choice of location selection from "Global' or 'Local to Country,' the following pop-ups will appear on the screen:
Publish
- Click 'Publish'
- You will see the image of the 'Hub Generated Marker'
- You can download and share this marker image
- Scan the marker image in any of the 'Selected App' that you provided, such as it using the 'Blippar app.'
- Your App AR experience will load once the marker is successfully scanned.
Blipp is LIVE
Project is LIVE