# 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>

To create a Surface tracking experience using WebAR SDK and Unity follow the below steps:

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

<figure><img src="https://content.gitbook.com/content/bQqPaV6FIzoHKVJRqxai/blobs/eOhX8u4i7OCAbmu2vMuj/Screenshot%202023-03-02%20at%202.45.14%20PM.png" alt=""><figcaption><p>Blippar Inspector tab</p></figcaption></figure>

* Certain new game objects such as webarStage, webarCamera and webarManager will be added under the SampleScene.
* webarStage is the game object that is positioned at the origin of the tracked surface. Any 3D objects/assets placed under webarStage will be anchored and appear on the tracked surface.
* Right click on the webarStage object and add a Capsule 3D object for the example.
* Delete the default **"Main Camera"** object from SampleScene.

<figure><img src="https://content.gitbook.com/content/bQqPaV6FIzoHKVJRqxai/blobs/1jHR4BnetYyMtLyKVxYo/Screenshot%202023-06-09%20at%2000.25.45.png" alt=""><figcaption><p>Delete Main Camera</p></figcaption></figure>

## Enable Tap And Place :

A visual cursor appears on the identified surface within the AR scene. To enable this option,  define <mark style="color:red;">Tap And Place: true.</mark> Users can tap the screen to place the 3D model at the cursor's location, providing an intuitive way to control where the model appears in the physical environment.&#x20;

Conversely, setting <mark style="color:red;">Tap And Place: false</mark> will hide the cursor, disabling this placement feature and the 3D model will appear on the surface after detection.\
\
To enable the tap and Place feature go the “**Bilppar Settings**” window and check the tap and place checkbox and assign the “webar plane” and “webar cursor” prefab from the **Assets -> webarSDK -> Resources -> Prefabs** folder. Users can also customize or assign new prefabs similar to the predefined prefabs.\
\
If user selects the 'Tap and place' feature the inspector window look like

<figure><img src="https://content.gitbook.com/content/bQqPaV6FIzoHKVJRqxai/blobs/EqYjkmQAAPYk308Xa3yM/Screenshot%202023-11-27%20at%206.36.54%20PM.png" alt=""><figcaption><p>Build a Scene</p></figcaption></figure>

## Build Scene

* In the Blippar Inspector tab, click **Build** to build the surface tracking web application.
* 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.
* After the build is complete, a pop-up confirming the build completion will appear on the screen.
* 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/v2.0.1/publish-your-creation/develop-locally)
* Open the URL in the mobile browser (Android Chrome or iOS Safari) to view the Surface 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)