# Build a Marker Tracking Experience

{% content-ref url="<https://app.gitbook.com/o/QMsd5hT6sxA9FBIB03yh/s/3UKy7VHRJWrNarYaMp13/>" %}
[Blippar Documentation Centre](https://app.gitbook.com/o/QMsd5hT6sxA9FBIB03yh/s/3UKy7VHRJWrNarYaMp13/)
{% endcontent-ref %}

## Introduction <a href="#h_01fmg1fd55cyag5s1sq09pmhjx" id="h_01fmg1fd55cyag5s1sq09pmhjx"></a>

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 <mark style="color:red;">webar-marker</mark>=<mark style="color:blue;">"id: 123-xyz"</mark> can be added to an Aframe <mark style="color:orange;">\<a-entity></mark> 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 <a href="#h_01fmg1fspbgrt23cawr8k8yjjx" id="h_01fmg1fspbgrt23cawr8k8yjjx"></a>

* Login to the[ HUB](https://www.blipps.blippar.com).
* Click **‘Add Marker’** from **‘Your Licenses’** tab as shown in the image below

<figure><img src="https://content.gitbook.com/content/2pjgkt3egtd7BDNR38Vs/blobs/5RAviPHvVwlsLobXKPBd/Screenshot%202023-03-02%20at%202.19.23%20PM.png" alt=""><figcaption><p>Add Marker</p></figcaption></figure>

* 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.

<figure><img src="https://content.gitbook.com/content/2pjgkt3egtd7BDNR38Vs/blobs/gOsBVMHYECVxmPGNkOb3/Screenshot%202023-03-02%20at%202.20.14%20PM.png" alt=""><figcaption><p>Browse and Upload Markers</p></figcaption></figure>

* 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

<figure><img src="https://content.gitbook.com/content/2pjgkt3egtd7BDNR38Vs/blobs/kMFaeHliGBkZJT35u5kv/Screenshot%202023-03-02%20at%202.22.10%20PM.png" alt=""><figcaption><p>Autogenerated Marker</p></figcaption></figure>

* Click Confirm
* The marker is added to the project.

## Manage Markers <a href="#h_01fmg1g661tyzs434vcwdgkndx" id="h_01fmg1g661tyzs434vcwdgkndx"></a>

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](https://www.blipps.blippar.com).
* Select the specific license for which a marker has been added.
* Click on **'Manage Markers'** as shown below:

<figure><img src="https://content.gitbook.com/content/2pjgkt3egtd7BDNR38Vs/blobs/RcVC1yxKwj6AijfZbl39/Screenshot%202023-03-02%20at%202.26.09%20PM%20(1).png" alt=""><figcaption><p>Manage Markers</p></figcaption></figure>

## Browse and Upload Markers <a href="#h_01fmg1gkeqjk5b3pv41c408cwv" id="h_01fmg1gkeqjk5b3pv41c408cwv"></a>

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

## Delete Uploaded Markers <a href="#h_01fmg1gxrspx2e7zcsnk1bjp4w" id="h_01fmg1gxrspx2e7zcsnk1bjp4w"></a>

* 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:

<figure><img src="https://content.gitbook.com/content/2pjgkt3egtd7BDNR38Vs/blobs/dtGUNRcrsviL4E6SdwA1/Screenshot%202023-03-02%20at%202.27.15%20PM.png" alt=""><figcaption><p>Bin Icon to Delete Marker</p></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/2pjgkt3egtd7BDNR38Vs/blobs/WP3HqU1hexsLQ4it4xob/Screenshot%202023-03-02%20at%202.28.23%20PM.png" alt=""><figcaption><p>Delete Marker</p></figcaption></figure>

* Click **'Yes'** to confirm the delete action.
* The uploaded marker will get deleted.

## Download Markers <a href="#h_01fmg1h7hba96v0655559gg983" id="h_01fmg1h7hba96v0655559gg983"></a>

* Login to the[ HUB](https://www.blipps.blippar.com).
* Select the specific license for which a marker has been added.
* Click on **'Manage Markers'** as shown below:

<figure><img src="https://content.gitbook.com/content/2pjgkt3egtd7BDNR38Vs/blobs/rlGuh6sXzLx8cyRrVBJ4/Screenshot%202023-03-02%20at%202.26.09%20PM.png" alt=""><figcaption><p>Manage Markers</p></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/2pjgkt3egtd7BDNR38Vs/blobs/QTn4svtiCJTvVncFQ2t3/Screenshot%202023-03-02%20at%202.30.30%20PM.png" alt=""><figcaption><p>Download Marker</p></figcaption></figure>

* The specific marker is downloaded.

## Build A Basic Marker Tracking Experience <a href="#h_01fmd5pb1z032qqsv9e5z3fcts" id="h_01fmd5pb1z032qqsv9e5z3fcts"></a>

New attribute <mark style="color:red;">webar-marker</mark>=<mark style="color:blue;">"id: 123-xyz"</mark> can be added to an Aframe <mark style="color:orange;">\<a-entity></mark> 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:

```html
<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.2.min.js"
  webar-mode="marker-tracking"></script>
```

* When <mark style="color:red;">webar-mode</mark>=<mark style="color:blue;">"marker-tracking"</mark> 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

{% hint style="info" %}

* From Webar SDK v1.1.0-beta and above, A-frame script has to be included separately
* Supports A-frame version 1.3.0
  {% endhint %}

## **To map a marker image to the <**<mark style="color:red;">**a-scene webar-scene**</mark>**>** **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:

<figure><img src="https://content.gitbook.com/content/2pjgkt3egtd7BDNR38Vs/blobs/05S0bCNZ8PvzGhOx7Vp0/Screenshot%202023-03-02%20at%202.30.30%20PM%20(1).png" alt=""><figcaption><p>Copy License Key</p></figcaption></figure>

* Create a parent <<mark style="color:red;">a-entity webar-marker</mark>> under <<mark style="color:red;">a-scene webar-scene</mark>>
* Paste the Marker ID as shown in the below attribute

```html
<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: <a href="#h_01fmd5nrakz9405qpm65dtn9tf" id="h_01fmd5nrakz9405qpm65dtn9tf"></a>

* To display a 3D model on an image surface, create a child <<mark style="color:red;">a-entity</mark>> under <<mark style="color:red;">a-entity webar-marker</mark>>
* For example, we use gltf-model in the child \<a-entity> element.

```html
<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

```html
<!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.2.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. *<mark style="color:red;">auto-marker-detection</mark> = <mark style="color:blue;">'true'.</mark>* You may switch back to manual marker detection by setting *<mark style="color:red;">auto-marker-detection</mark> = <mark style="color:blue;">'false'.</mark>*

## **Resulting Marker Tracking Experience**

<figure><img src="https://content.gitbook.com/content/2pjgkt3egtd7BDNR38Vs/blobs/BQ215jQzmcBnKNFGuUPc/mar.gif" alt=""><figcaption><p>Resulting Marker Tracking Experience</p></figcaption></figure>