# Build a Basic Surface Tracking Experience

{% content-ref url="/spaces/3UKy7VHRJWrNarYaMp13" %}
[Blippar Documentation Centre](https://docs.blippar.com/blippar-documentation-centre/)
{% 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="/files/kMIQHFpv1ckoCnY1y0gX" 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="/files/jDySbNZgl4XDrgaFWWud" 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="/files/nJKGbt7ryQQe8c2b2jaP" 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.](/webar-sdk/v2.0.3/publish-your-creation/develop-locally.md)
* 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.blippar.com/webar-sdk/v2.0.3/integrations/unity-integration/build-a-basic-surface-tracking-experience.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.