WebAR Studio Quickstart

Estimated reading: 4 minutes

Summary: Learn how to create visually appealing, immersive, and branded, augmented reality experiences that work across desktop and mobile web browsers, no app download required.

WebAR Studio allows you to create web AR experiences, choose from a comprehensive assortment of production ready augmented reality technologies and customize them with your assets.

In this guide, we’ll walk through the setup of a WebAR project and the give an over-view of the types of experiences you can build.

Prerequisites

3D assets in glTF or glb formats (3D models, 3D file converter)
WebXR.tools Account

Create New Project

In the WebXR.tools dashboard, click the Create New Project button, fill in the Project Name and select the WEB AR Project Type.

When the studio tool loads, you will notice three distinct sections, a left panel containing the list of screens that can be configured, a center panel containing a preview of the current screen, and a right panel with the various settings for the selected screen.

Customize the Start Screen

The Start screen is the starting point for the experience and acts as a buffer to avoid end user error. Users tend to deny camera permissions if they are prompted on page load, but will accept them if the request is initiated by them. The “Start Experience” button initiates the experience and triggers the camera permissions prompt.

In right panel you will see inputs to customize:

the background image
Intro image
The Call To Action text
Color of the CTA text
Which camera to load when user starts the experience

The difference between background image and intro image:

Background Image will fill the screen
Intro image will remain static in size.

To upload a new background image or intro image use the icon to upload your image. The background and intro images can be jpg, png, or svg files.

Customize the Desktop

The Desktop screen appears when the user loads the experience on their desktop. WebAR experiences are mobile only (for now) and the Desktop screen acts as an easy way to direct users to load the experience on their mobile device.

In right panel you will see inputs to customize:

Background image
Welcome message
The Call To Action message
The size of the QR code

The difference between Welcome Message and Call To Action Message:

Welcome Message explains why the user is seeing this screen
Call To Action Message, prompts the user to scan the QR code.

To upload a new background image use the icon to upload your image. The background image can be jpg, png, or svg files and will fill the screen.

Front and Rear Camera Experiences

The Front and Rear Camera screens each support their own set of AR experiences types. Select from the experience types below to continue.

360 AR

Put users at the center of the augmented reality experience, with content appearing around the user at a fixed distance.

Tap to Place

Leverage surface detection to place 3D models into a users world with freedom to move around and interact with the model.

Head Tracking

Place 2D/3D content around or relative to a user’s head, but don’t require the precision of facial features.

Face Tracking

Place 2D/3D content onto a user’s face. Virtually apply make-up, face paint, or attach 3D to users’ nose, eyes, ears, mouth, or chin.

Virtual Backgrounds

Cut users out of their world by replacing their background with an image or a video.