> For the complete documentation index, see [llms.txt](https://docs.blippar.com/webar-sdk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.blippar.com/webar-sdk/v.1.7.1/integrations/unity-integration/build-a-basic-surface-tracking-experience.md).

# 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/v.1.7.1/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)
