Build a Basic Surface Tracking Experience

Construction of an AR experience using SLAM

Blippar Documentation Centre

Surface Tracking

Create a basic scene

• Login to your PlayCanvas Account OR you can alternatively click the link to fork this PlayCanvas Surface Tracking project.

• Click 'Editor' to open the project in PlayCanvas Editor as shown in the image below:

Play Canvas Editor

• 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:

URL with License Key

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

Surface Tracking Experience with PlayCanvas