WebAR SDK
v2.0.7
v2.0.7
  • Introduction
  • What's New?
  • GETTING STARTED
    • SignUp and Get a License
    • Manage Your Licenses
    • Download WebAR SDK
    • Installing WebAR SDK
  • INTEGRATIONS
    • A-Frame Integration
      • Build a Basic Surface Tracking Experience
      • Build a Marker Tracking Experience
      • Build a Basic Face Tracking Experience
    • Babylon.Js Integration
      • Build a Basic Surface Tracking Experience
      • Build a Basic Marker Tracking Experience
    • Unity Integration
      • Package Installation
      • Build a Basic Surface Tracking Experience
      • Build a Basic Marker Tracking Experience
      • Customize Loading Screen
      • Rotate and Zoom
      • Use Cases
      • Unity Build Settings
      • Unity Screenshot Feature
    • PlayCanvas Integration
      • Build a Basic Surface Tracking Experience
      • Build a Basic Marker Tracking Experience
    • What Makes a Good Marker
  • API
    • API Reference - Javascript
      • A-Frame Attributes
      • SDK Configuration Properties
      • Javascript Functions
    • API Reference - Unity(C#)
      • SDK Configuration Properties
      • C# Functions
    • Customization API
  • PUBLISH YOUR CREATION
    • Develop Locally
    • Launch the Experience
  • MORE INFORMATION
    • Pricing
    • FAQs
    • Release Notes
  • Support
    • Contact Support
Powered by GitBook
On this page
  • Surface Tracking
  • Create a basic scene
  • Integrate Enhanced UX with Stage Cursor, Rotation, and Scaling
  • View the Experience
  • Resulting Surface Tracking Experience
  1. INTEGRATIONS
  2. PlayCanvas Integration

Build a Basic Surface Tracking Experience

Construction of an AR experience using SLAM

Surface Tracking

Create a basic scene

  • Login to your PlayCanvas Account OR you can alternatively click the link to fork this PlayCanvas 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.

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

Integrate Enhanced UX with Stage Cursor, Rotation, and Scaling

This is enabled by default. You can enhance the AR experience by incorporating a stage cursor, which enables users to precisely place the AR model with a simple screen tap. This feature not only adds precision but also introduces gesture-based interactions, such as rotation and scaling, making the scene more interactive and engaging. However, if this functionality does not suit your needs, it can easily be disabled or switched off. This optional enhancement is controlled through the webar-ux-control component, which should be configured as a child of the webar-stage entity. To enable or disable the Enhanced UX feature in the PlayCanvas Editor, please follow these steps:

    1. Stage Cursor UX: When this option is enabled, a visual cursor will appear on the identified surface within the AR scene. This feature allows users to tap the screen to position the 3D model precisely at the cursor's location. It provides an intuitive method for controlling the placement of the model in the physical environment.

View the Experience

Load the URL on a mobile browser(iOS Safari or Android Chrome) to start viewing the experience

Resulting Surface Tracking Experience

For more information refer article to setup a local HTTPS web server.

In the PlayCanvas Editor, click on the Root located on the left side of the interface. You will see a display similar to this:

After selecting the root, a properties window will appear on the right-hand side of the editor, like this: In this properties window, you will notice several script attributes from WebarSdkSurface.js. These include Webar Camera, Webar Stage, and Webar UX Control, each mapped to corresponding entities in the hierarchy shown on the left side of the panel, as illustrated in the first step. To enable/disable different UX options, look for WebAR UX Options.

To toggle different UX options, simply check or uncheck the options under WebAR UX Options:

User Gesture Rotation: Enabling this feature allows users to rotate the model by swiping on the screen. The rotation responsiveness of the AR object to user gestures can be customized. To adjust this, the attribute is available in the webar-sdk-config-surface.js configuration file. This setting enhances the user's interactive experience by allowing them to manipulate the object's orientation in the AR space.

User Gesture Scale: With this feature activated, users can scale the AR object up or down using a pinch gesture, adding a dynamic and interactive element to the AR experience. The scaling range can be controlled through the and attributes, which are also located in the webar-sdk-config-surface.js file. These settings provide users with the flexibility to adjust the size of the AR object to their preference.

develop locally
gesture-rotation-speed
gesture-scale-max
gesture-scale-min
Surface Tracking
Play Canvas Editor
URL with License Key
Surface Tracking Experience with PlayCanvas
Blippar Documentation Centre