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

## **Surface Tracking** <a href="#h_01fvh20gjfh57jbvcc388a91sm" id="h_01fvh20gjfh57jbvcc388a91sm"></a>

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

* Login to your PlayCanvas Account OR you can alternatively click the link to fork this PlayCanvas [Surface Tracking](https://playcanvas.com/project/859355/overview/surface-tracking) project.
* Click **'Editor'** to open the project in PlayCanvas Editor as shown in the image below:

<figure><img src="https://content.gitbook.com/content/MNoA4M7dz4DXv12sDZUk/blobs/chW44qzFZknFMgIMaQzy/Screenshot%202023-03-02%20at%203.27.26%20PM.png" alt=""><figcaption><p>Play Canvas Editor</p></figcaption></figure>

* Select the '**Main'** Scene
* Click the gear icon to open Main settings as show in the image below:
* A pop-up will appear as an instructor panel on the right side of the screen
* Click on **'External Scripts'**
* A URLs pop-up will appear on the screen with a sample license key as shown in the image below:

<figure><img src="https://content.gitbook.com/content/MNoA4M7dz4DXv12sDZUk/blobs/YrXrEmOiGNmgFUtqjCKH/Screenshot%202023-03-02%20at%203.28.34%20PM.png" alt=""><figcaption><p>URL with License Key</p></figcaption></figure>

* In the second url's license-key search parameter, replace the sample license key value xxxxxxxx-1111-2222-3333-yyyyyyyyyyyy with a valid license key registered in the Blippar hub.
* In the left **'Hierarchy'** panel select the **Root** Entity
* In the right Inspector Panel, click the **'arrow'** next to WebarSdkSurface '**Script'** component as shown in the image below and make sure the following the following details are entered:
  * Ensure the *Camera* Entity is selected under the **Webar Camera** field
  * Ensure the *playcanvas* Entity, which needs to be displayed on a surface, is selected under the **Webar Stage** field.
  * If there are multiple Entities to be displayed, they can be placed under a single parent entity
  * The parent entity can then be selected in the **Webar Stage** field.
* Click **Publish/Download** from the left panel and download the project.
* Host it on a local/remote HTTPS web server
* You can alternatively host it on a server having the same domain name as the one for which the license key is registered.
* For more information refer article [develop locally ](https://docs.blippar.com/webar-sdk/v.1.7.1/publish-your-creation/develop-locally)to setup a local HTTPS web server.

## View the Experience

Load the URL on a mobile browser(iOS Safari or Android Chrome) to start viewing the experience

## Resulting Surface Tracking Experience

<figure><img src="https://content.gitbook.com/content/MNoA4M7dz4DXv12sDZUk/blobs/YcBqfvmAHVwABBE3iq9Y/Screenshot%202023-03-02%20at%203.31.00%20PM.png" alt=""><figcaption><p>Surface Tracking Experience with PlayCanvas</p></figcaption></figure>