# Build a Basic 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 %}

## **Marker Tracking** <a href="#h_01fvh21d5yfx9y9rn96j2vc501" id="h_01fvh21d5yfx9y9rn96j2vc501"></a>

## Create a basic scene <a href="#h_01fvhfz0v8b3c7ydepb6vsrf7v" id="h_01fvhfz0v8b3c7ydepb6vsrf7v"></a>

To create a marker tracking app using Unity and WebAR SDK follow the below steps:

* Navigate to the **Blippar Inspector** window and select the option **‘Marker Tracking’** as shown below:

<figure><img src="https://2886719054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqVKCSCzJmvbknXbHtARJ%2Fuploads%2Fgit-blob-13762ade0a8da416202059e906f95917d7a30bc2%2FScreenshot%202023-06-09%20at%2000.31.59.png?alt=media" alt=""><figcaption><p>Marker Tracking</p></figcaption></figure>

Consider the below experience where a marker tracking experience that can track 2 images in the sample app is being created.

* Under **‘Marker Count’**, enter ‘2’ to track two images. You will make two Marker entries to map the marker image ID and its corresponding 3D game object that has to be displayed over the image during marker tracking.

<figure><img src="https://2886719054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqVKCSCzJmvbknXbHtARJ%2Fuploads%2Fgit-blob-6cfb921046f7498165a4262fa25aef3b25e8ad6f%2FScreenshot%202023-06-09%20at%2000.35.23.png?alt=media" alt=""><figcaption><p>Inspector Window</p></figcaption></figure>

* In the Blippar hub, upload marker images to be tracked and obtain their marker IDs. [Click here](https://support.blippar.com/hc/en-us/articles/4410413461011-Building-a-Basic-Marker-Tracking-Experience)[ ](https://docs.blippar.com/webar-sdk/v.1.7.0/integrations/a-frame-integration/build-a-marker-tracking-experience)for more details.
* In the Blippar inspector tab, add the two marker IDs. For example, if the marker IDs are a\_bcd-1234-marker-image\_ and *wxyz-5678-marker-image*, enter these two IDs.

<figure><img src="https://2886719054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqVKCSCzJmvbknXbHtARJ%2Fuploads%2Fgit-blob-db2754a534dd18fb3c13237933440ed1bcc86822%2FScreenshot%202023-06-09%20at%2000.36.29.png?alt=media" alt=""><figcaption><p>Inspector Window</p></figcaption></figure>

* If you have created a Surface tracking experience in the previous example, deactivate webarStage game object to hide the sample Capsule object from the Unity Editor's scene view. Right click on webarStage game object and select Toggle Active State. This is an optional setting.
* Delete the default ‘Main Camera’ object from SampleScene
* Under **Blippar Menu** in the Unity Editor's Menu bar, select **webar Marker** to create a webarMarker1 game object.

<figure><img src="https://2886719054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqVKCSCzJmvbknXbHtARJ%2Fuploads%2Fgit-blob-81db01d0edd75c0246a226e86ace3ca0898b7ce1%2FScreenshot%202023-06-09%20at%2000.38.27.png?alt=media" alt=""><figcaption></figcaption></figure>

Add Marker

* Repeat the step to create webarMarker2 object

<figure><img src="https://2886719054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqVKCSCzJmvbknXbHtARJ%2Fuploads%2Fgit-blob-8cf77a42a6e6570482503d651ed40a37126faa31%2FScreenshot%202023-06-09%20at%2000.42.42.png?alt=media" alt=""><figcaption><p>Add Marker</p></figcaption></figure>

* In the **Hierarchy window,** drag and drop the webarMarker1 object under Marker Object field of Marker 1 in order to map the webarMarker1 game object with Marker 1's Marker ID.

<figure><img src="https://2886719054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqVKCSCzJmvbknXbHtARJ%2Fuploads%2Fgit-blob-bac037d4f610853ad8515cce2434d3ec2b0d2bdf%2FScreenshot%202023-06-09%20at%2000.43.51.png?alt=media" alt=""><figcaption><p>Add Marker ID</p></figcaption></figure>

* Repeat the above step webarMarker2 object to map it with Marker 2's Marker ID.
* Create a sample 3D object under webarMarker1, for example, Cube, which will be displayed on the image having the marker id abcd-1234-marker-image, when running marker-tracking experience.
* Similarly, create a sphere object under webarMarker2, to display it on the image having the marker id wxyz-5678-marker-image.

<figure><img src="https://2886719054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqVKCSCzJmvbknXbHtARJ%2Fuploads%2Fgit-blob-81db01d0edd75c0246a226e86ace3ca0898b7ce1%2FScreenshot%202023-06-09%20at%2000.38.27.png?alt=media" alt=""><figcaption><p>Hierarchy Window</p></figcaption></figure>

**Marker Preview**

* Enter proper domain name and license Key
* Select Marker Tracking and click on Fetch marker data
* Enter marker ID and assign respective marker object from hierarchy(if already not assigned)
* Click on Apply button.
* The marker preview is visible in scene view, adjust the object size wrt to marker size. marker size is default size which is generated at the time of marker creation. In some cases the marker size is small compare to default object size(1,1,1), so adjust the object(cube) size to see proper preview.

<figure><img src="https://2886719054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqVKCSCzJmvbknXbHtARJ%2Fuploads%2Fgit-blob-6cd2a7b9bf38811b84a5f912168ca6b426da75d6%2FScreenshot%202023-06-09%20at%2000.54.25.png?alt=media" alt=""><figcaption><p>Marker Preview Settings</p></figcaption></figure>

Check Color space -> go to the the project settings -> Player -> other settings and check the color space if it is Linear then change it to the Gamma.

* Click **Build** in the Blippar Inspector tab, to build the marker tracking web application.

<figure><img src="https://2886719054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqVKCSCzJmvbknXbHtARJ%2Fuploads%2Fgit-blob-e55e81139ed952f7782f8e6b101740a9b629410e%2FScreenshot%202023-06-09%20at%2000.46.09.png?alt=media" alt=""><figcaption><p>Inspector Window</p></figcaption></figure>

* After the build is complete, a pop-up confirming this will appear on the screen

<figure><img src="https://2886719054-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqVKCSCzJmvbknXbHtARJ%2Fuploads%2Fgit-blob-bf8787da7b436c8e05150eb0d35f8ed0aee1a230%2FScreenshot%202023-02-05%20at%209.42.30%20PM.png?alt=media" alt=""><figcaption><p>Build Generated</p></figcaption></figure>

* Once the build is complete, you can locate the built application under the unity project folder. Navigate to **build location.**
* Host this folder in a HTTPS web server. For local testing, host it in a HTTPS web server having the desktop/laptop's IP address as the domain address.
* For more details see this [link on how to develop locally.](https://docs.blippar.com/webar-sdk/v.1.7.0/publish-your-creation/develop-locally)
* Open the URL in the mobile browser(Android Chrome or iOS Safari) to view the Marker Tracking experience.

## Examples <a href="#h_01gd0n5e1nnrra8vghnyt1k4m8" id="h_01gd0n5e1nnrra8vghnyt1k4m8"></a>

Check out a few example AR experiences created using WebAR SDK Unity Package. Scan the QR code displayed on the screen to trigger the experience:

* [ar-shooter](https://webar-sdk.blippar.com/unity-webarsdk-example/v1.3.0-beta/surface-tracking/ar-shooter/index.html)
* [solar-system](https://webar-sdk.blippar.com/unity-webarsdk-example/v1.3.0-beta/surface-tracking/solar-system/index.html)
* [remote-car](https://webar-sdk.blippar.com/unity-webarsdk-example/v1.3.0-beta/surface-tracking/racing-car/index.html)
* [ar-animation](https://webar-sdk.blippar.com/unity-webarsdk-example/v1.3.0-beta/surface-tracking/ar-animation/index.html)
* [Marker Tracking](https://webar-sdk.blippar.com/unity-webarsdk-example/v1.3.0-beta/marker-tracking/blippar-marker/index.html)