PlayCanvas Examples

WebAR SDK now supports the PlayCanvas engine. This article provides instructions on how to integrate PlayCanvas with WebAR SDK and bring your gaming experiences to life.

Scope 

This document provides instructions on how projects can be forked and edited in PlayCanvas editor and integrated with WebAR SDK. The AR experiences created using WebAR SDK which have surface tracking or marker tracking features can be forked into the PlayCanvas projects using the editor. 

Surface Tracking

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

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

• 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 as shown in the image below:

• 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

Marker Tracking

• Login to your PlayCanvas Account OR you can alternatively click the link to fork this PlayCanvas Marker Tracking project
• Click 'Editor' to open the project in PlayCanvas Editor as shown in the image below:

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

• 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 
  • Enter the number (maximum 10) of marker images to be tracked in the MarkerEntityMap's Array Size field. Each array object has a map of Marker Id with the Entity to be displayed on the marker image when scanning.
  • In the forked example, replace the sample Marker Ids (dddddddd-uuuu-mmmm-mmmm-yyyyyyyy1111 and dddddddd-uuuu-mmmm-mmmm-yyyyyyyy2222) with valid Marker Ids obtained from the Marker Manager in the Blippar hub. 
  • For more information refer this article on how to Add Marker and Manage Marker

• 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 scanning the marker images to experience Marker Tracking

Support Versions

WebAR SDK v1.1.0-beta (and above)

What makes a good marker?                                                                                 Babylon.js Examples