WebAR Surface Tracking
Construction of an AR experience using SLAM
This article is a quick start guide providing instructions and guidelines to create a WebAR experience without a printed marker by using Blippbuilder.
This documents helps you build Blipps or WebAR experiences without a printed marker using Blippbuilder. It is intended to be used as a quick start guide.
Follow the steps below to create a WebAR experience on a printed marker using Blippbuilder:
- You will be re-directed to the Blippar Hub
- Click on 'Create A WebAR Project' as shown in the image below:
HUB
- A pop-up will appear on the screening providing you with options to select the type of AR experience you wish to create.
- Select the option 'Around the User' since the AR experience is being built without a printed marker. Refer below image
HUB
- A pop-up will appear on the screen to provide a name for your Blipp. Enter a desired name in the section as shown in the image below:
Create A Blipp
- Click Continue
- You will be re-directed to the Blippbuilder design canvas.
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 Canvas
- 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.
Note: 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 'Motion Effects' section on the bottom right panel as shown in the image below:
Motion 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
- After reviewing the preview, the Blipp can be published.
- Click the 'Publish' icon from the top right of the screen.
- The Status of the Blipp will appear as 'Live' if published. Refer image below:
Publish
- Scan the QR code on the to test the published Blipp
- Apply this QR code on all surfaces from which you desire the AR Experience to be triggered.
- For more information refer image below
Project Live