Build a Marker Tracking Experience

Construction of an AR experience using image or marker tracking

Blippar Documentation Centre

Introduction

This guide walks you through the process of building a basic scene using marker tracking or image tracking feature of WebAR SDK. The marker images can be tracked using the mobile app developed using WebAR SDK.

New attribute webar-marker="id: 123-xyz" can be added to an Aframe <a-entity> to display a 3D model on a marker/image surface.

Procedure

Follow the below steps to build a basic scene using marker tracking:

Add marker

• Login to the HUB.

• Click ‘Add Marker’ from ‘Your Licenses’ tab as shown in the image below

Add Marker

• You will be redirected to a page where you can browse or upload the marker. You can also auto-generate a marker which will provide a sample marker for testing the tracking.

Browse and Upload Markers

• Click ‘Browse and Upload’ markers

• Choose the desired marker you wish to upload

• You can alternatively ‘Drag and Drop’ the marker as shown in the image above, or you can autogenerate a marker.

• Up to 10 marker images can be tracked one at a time

Autogenerated Marker

• Click Confirm

• The marker is added to the project.

Manage Markers

The markers can be managed from the ‘Manage markers’ section once the user adds 1 or more markers. Manage markers section will include the following options:

• Browse and upload up to 10 markers

• Delete the uploaded markers

• Download the uploaded markers

• Autogenerate markers

Procedure to Manage Markers

• Login to the HUB.
• Select the specific license for which a marker has been added.

• Click on 'Manage Markers' as shown below:

Manage Markers

Browse and Upload Markers

Click ‘Browse and upload’ markers or alternatively ‘drag and drop’ desired marker in the section as shown in below image:

Delete Uploaded Markers

• The uploaded markers can be seen in the ‘Manage Marker’ section

• Click on the bin icon to delete an uploaded marker as shown in the image below:

Bin Icon to Delete Marker

• You will get a pop-up to confirm the delete action.

Delete Marker

• Click 'Yes' to confirm the delete action.

• The uploaded marker will get deleted.

Download Markers

• Login to the HUB.
• Select the specific license for which a marker has been added.

• Click on 'Manage Markers' as shown below:

Manage Markers

• Click on the 'Download icon' next to the 'Bin' icon as shown below:

Download Marker

• The specific marker is downloaded.

Build A Basic Marker Tracking Experience

New attribute webar-marker="id: 123-xyz" can be added to an Aframe <a-entity> to display a 3D model on a marker/image surface.

To track the uploaded markers using WebAR SDK follow the below steps:

• While loading WebAR SDK script and integrating it, add this new attribute:

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>

<!-- Step 1: Include WebAR SDK script -->
<script src="../webar-sdk-v2.0.3.min.js"
  webar-mode="marker-tracking"></script>

• When webar-mode="marker-tracking" attribute is added to the script tag, WebAR SDK will run in marker tracking mode instead of surface tracking.

• SDK will run in marker tracking mode instead of surface tracking

• From Webar SDK v1.1.0-beta and above, A-frame script has to be included separately

• Supports A-frame version 1.3.0

To map a marker image to the <a-scene webar-scene> follow the below steps:

• Click the copy icon next to the 'License Key' information to copy the marker ID from the ‘Manage Marker’ section as shown in the image below:

Copy License Key

• Create a parent <a-entity webar-marker> under <a-scene webar-scene>

• Paste the Marker ID as shown in the below attribute

<a-entity webar-marker="id: b3ed7e4c-7423-44c0-8af1-63567b27a1e9">

• To add more markers IDs replicate the above steps.

Mapping Marker ID with a 3D model:

• To display a 3D model on an image surface, create a child <a-entity> under <a-entity webar-marker>

• For example, we use gltf-model in the child <a-entity> element.

<a-entity gltf-model="#testmodel1" id="testmodel_1" rotation="90 0 0" position="0 0 0" scale="5 5 5" 
webar-loadmonitor="elType: glb"></a-entity>

Full Source Attributes

<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="#" />
<title>STAGE DEV: Blippar WebAR SDK</title>

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>

<!-- Step 1: Include WebAR SDK script -->
<script src="../webar-sdk-v2.0.3.min.js"
webar-mode="marker-tracking"
auto-init="false"
auto-start="true"
logo-src="images/test_logo_here.png"
logo-width="116px"
logo-height="116px"
progress-dot-ring-scale="0.30"
progress-dot-ring-color="#00AAFF"
progress-ring-scale="0.36"
progress-ring-color="#00FFFF"
progress-ring-line-width="5"

alert-border-color="#00FFFF"
alert-border-width="5px"
alert-background-color="#283747"
alert-message-text-color="#00AAFF"
alert-button-color="#00FFFF"
alert-button-text-color="#283747"
alert-button-height="50px"
alert-camera-permission-text="We need to ask for access to the camera so this experience can work!!!"
alert-camera-permission-button-text="No Problem"
alert-motion-permission-text="Now we need access to motion sensors!!!"
alert-motion-permission-button-text="No Problem"
alert-box-width="290px"
alert-box-height="182px"
alert-box-font-size="24px"

ui-background-color="#283747"
ui-text-color="#00FFFF"
desktop-logo-src="images/test_desktop_logo.png"
desktop-logo-width="108px"
desktop-logo-height="30px"
issue-img-src="images/test_issue_img.png"
issue-img-width="116px"
issue-img-height="116px"
show-guide-view="true"

auto-marker-detection="true"
auto-scan-instruction="Look for a marker to scan..."
auto-scan-instruction-detect="Detecting..."
auto-scan-instruction-idle="Move around to look for a marker"
auto-scan-instruction-text-style="color: orange"
auto-scan-style="display: none; position: absolute; top: 90%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; width: auto; height: auto; text-align: center;"
auto-scan-style-display="block"
scan-btn-width="100"
scan-btn-height="100"
scan-btn-display="block"
scan-btn-instruction="Tap to scan"
scan-btn-instruction-style="color: white"
scan-btn-img-src="images/user_scan-btn-image_here.png"
scan-btn-img-width="50"
scan-btn-img-height="50"
scan-btn-img-x-coordinate="50%"
scan-btn-img-y-coordinate="50%"
scan-btn-img-transform="translate(-25, -25)"
scan-btn-progress-circle-cx-coordinate="50"
scan-btn-progress-circle-cy-coordinate="50"
scan-btn-progress-circle-radius="35"
scan-btn-progress-circle-style="fill: none; stroke: cyan; stroke-width: 6;"
scan-btn-progress-bar-cx-coordinate="50"
scan-btn-progress-bar-cy-coordinate="50"
scan-btn-progress-bar-radius="35"
scan-btn-progress-bar-transform="rotate(-90 50 50)"
scan-btn-progress-bar-color="blue"></script>
</head>​ 
<body>

<!-- Step 2: Add webar-scene attribute to AFrame's <a-scene> tag -->
<!-- Provide a valid Blippar license-key value in the key: property -->
<a-scene
webar-scene="key: 5439e9a1-c035-4eb0-a1a6-ebfb98273b33"
vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false"
loading-screen="enabled: false"
renderer="colorManagement: true;">

<!-- Step 3: Add webar-camera attribute to AFrame's <a-entity camera> tag -->
<a-camera webar-camera></a-camera>

<a-assets timeout="60000">
<a-asset-item id="testmodel1" src="models/MaterialsVariantsShoe.glb"></a-asset-item>
<a-asset-item id="testmodel2" src="models/astronaut.glb"></a-asset-item>
</a-assets>

<!-- Step 4: Add webar-marker attribute with a valid marker id value(obtained from Blippar hub), to AFrame's parent <a-entity> tag -->
<!-- The models defined as a child element under this webar-marker id, will be displayed on the marker image during marker image tracking -->
<a-entity webar-marker="id: b3ed7e4c-7423-44c0-8af1-63567b27a1e9">
<!-- Step 5: Add AR models under the webar-marker nodes -->
<!-- Add webar-loadmonitor attribute to the entities to display loading progress screen before starting the surface tracking -->
<!-- Refer API:Attributes documentation for more details -->
<a-entity gltf-model="#testmodel1" id="testmodel_1" rotation="90 0 0" position="0 0 0" scale="5 5 5" webar-loadmonitor="elType: glb"></a-entity>
</a-entity>

<!-- Step 6: Add another webar-marker attribute with a valid marker id to another parent <a-entity> tag -->
<a-entity webar-marker="id: 7a9ca8e2-bf27-44c1-828d-6bca876bb7a7">
<a-entity gltf-model="#testmodel2" id="testmodel_2" rotation="0 0 0" position="0 -0.5 0" scale="0.25 0.25 0.25" webar-loadmonitor="elType: glb"></a-entity>
</a-entity>

</a-scene>

<!-- Refer API:Functions documentation for more details -->
<script>
WEBARSDK.Init();

// Give a callback when the WebAR Stage <a-entity webar-stage> is ready to display the 3d object
WEBARSDK.SetMarkerDetectedCallback((markerId) => {
  console.log('Marker is detected for marker id: ', markerId);
});

WEBARSDK.SetMarkerLostCallback((markerId) => {
  console.log('Marker tracking is lost for marker id: ', markerId);
});
</script>
</body>
</html>

To switch between auto marker detection and manual marker detection

By default, auto scan mode is enabled i.e. auto-marker-detection = 'true'. You may switch back to manual marker detection by setting auto-marker-detection = 'false'.

Resulting Marker Tracking Experience

Resulting Marker Tracking Experience