Comment on page
Surface and Gyro Tracking
Construction of an AR experience using SLAM
This article is a quick start guide providing instructions and guidelines to create a surface (select surface) or gyro (select around you) tracking experience.
Follow the steps below to create a WebAR experience on a printed marker using Blippbuilder:
- You will be re-directed to the Blippbuilder page.
Blippbuilder Page
- Click on 'Create A New Project', provide a name for your project and click 'Continue.'
Create a New Project
- A pop-up will appear on the screening providing you with options to select the type of AR project you wish to create.
Choose the Type of Project
Select the option 'Select Surface' for SLAM or 'Select Around You' for Gyro based tracking.
- You will be re-directed to the Blippbuilder design canvas.
The Design Canvas functionalities are the same for any kind of project. Refer below section for information on utilising various design canvas elements to create a surface, marker or gyro tracking experience.
The following section provides information on how to utilize various design canvas elements to create, preview and publish a project:
Design Canvas
- The Blippbuilder design canvas comes with a few pre-defined elements and 3D shapes can be used to build the Blipp.
- From the left panel, click on 'Your Library'
- Upload your assets by a simple drag and drop action or browse the system to upload assets.
- Drag and drop the uploaded assets, 3D models from the 3D library, widgets, lighting or animation elements from the left panel to the centre of the screen which is referred to as the 'Stage.'
- In the below image, For eg: An 'empty sprite' element and a 'cylindrical 3D shape' has been dragged and dropped onto the 'stage' as a part of designing the Blipp. Refer image below for more information:
Design Elements
- Define a desired layout for your object in the stage which includes the position, rotation and scale of the object.
- Select the object from the stage and click on 'Layout' from the right panel of the design canvas
- Scale: Resize width and height (click on the padlock icon to maintain the aspect ratio).
- Position: Use the X and Y controls to move the object into the required position on the stage. Use the Z control to adjust the depth (i.e. height of the marker).
- Rotation: Rotate on its X, Y, and Z axes.
Ensure Assets are on different Axis to avoid flickering or flashing. This is caused due to assets overlapping on the same 'Z-Axis'
- The desired action for the object can be defined in this section.
- The actions 'On Touch' can be audio, video, navigation to website etc.
- Select the object from the stage and click on 'Action' from the left panel
- From the drop-down choose the desired action.
- Desired basic properties such as object texture, roughness, metalness, bump, opacity, colour etc can be defined in this section
- Select the object from the stage and click on 'Basic Properties' from the left panel
- From the drop-down choose the desired action.
- Refer image below for more information:
Basic Properties
- Add desired animation for the object from the animation layer in the bottom panel
- The animation can have multiple layers and objects
- Refer image for more information
Animation Layer
- Add desired motion effect to the objects
- Select the object from the stage and apply desired motion effects such as move, rotate, scale, fade out, bounce etc.
- Find the 'Animation Effects' section on the bottom right panel as shown in the image below:
Animation Effects
- To test the Blipp created click on the 'Preview' icon from the top right of the screen.
- A test Blipp is created which can be accessed by scanning the QR code displayed on the screen
- The test code expires in 20minutes
- Refer below image for more information:
Preview Project
- Close the screen to navigate back to the project.
- After reviewing the preview, the project can be published.
- Click the 'Publish' icon from the top right of the screen.
- The Status of the project will appear as 'Live' if published. Refer image below:m
- Scan the QR code on the to test the published project.
- Apply this QR code on all surfaces from which you desire the AR Experience to be triggered.
- For more information refer image below
Published Project
For surface tracking the tracking is enabled on flat/plain surface and for gyro the tracking starts around the user.
Last modified 8mo ago