index file template

Your first Web AR Project

In this tutorial, you will learn how to create a very simple Web AR Project with an image.

1. Create your account

First of all, you will need an XR.+ account, so go to the register page and create a free acount. Follow the steps to complete your registration, and now, let’s start your project!

On the XR+ studio home screen, click on the “Create your first project” button.

2. Create your first project

Name your project and click on “Create project”.

3. Import an image

Welcome to the main project edition screen! Open your assets library by clicking on “Open library”, which is empty for now.

Import your image by clicking on the button named “Import a File”, then click on the “Add to scene” button.

4. Add the image to the composition scene

Now, we have your image in the 3D space of the editor. You can move it by selecting one of the two main tools of the view in the bottom left corner. Place it at your will. You can resize it or move it by entering the coordinates in the tool bar at the bottom of the 3D view.

5. And you’re done!

Your project is already published and live, above to the QR code, you can see the public link to the project, in this case: (yours will be different).

Type this web address on your phone web browser or scan the QR code in the editor to view the project in web augmented reality.

Congratulation you’ve made it!


XR+ provides the highest level of compatibility with smartphones to deliver advanced AR / VR experiences to 3+ billions of end users

Web AR

iPhones and iPads running on iOS 14 or newer, that’s all iOS devices launched since 2017

Android phones launched since 2020 with a minimum of 2GB RAM

WebXR projects made with the XR+ studio are compatible with all major web browsers

ChromeSafariFirefoxSamsung internetEdge

Web VR

XR+ supports Oculus Quest 1, 2 & 3, Meta Quest Pro, PICO 4, and the combo Chrome + Oculus / HTC Vive on computers

Assets library

Import assets to the project library so you can use them in scenes, overlays, modules…

What can be imported to the library?

3D models

You can import .obj.fbx and .glb (compressed gltf) files up to 12 MB.
The 3D models can be animated.
We recommend importing 3D models with less than 100 000 triangle faces (polygons).


You can import .jpg, .png and .webp images


You can import .mp4 videos files

Maximum resolution: 1920 x 1080 pixels
Maximum size: 50MB 

When imported, videos files are resized for webXR performance considerations.

To produce, edit , and crop your video before importing them to the studio, we recommend using Pikimov, a free web-based video editor.

Audio files

You can import .mp3 files up to 10 MB.


Each XR+ project is made of one or several scenes, on the basic plan your have have up to 5 scenes.

Each scene is independent, you can setup actions to switch between scenes, take a look at the bird slideshow template as a multiple scenes project example.

Open multi scenes project template

Scene timeline

Activate the timeline on a scene to setup in & out timings for each of the scene items

UI Overlays

Each scene can have an overlay linked to it. An overlay is an extra layer of UI elements like buttons, shapes, or images. Overlays can be simply decorative or used to trigger interactions.

Learn more about UI overlays

User position

XR+ webXR user ghost

You can set the starting user position when doing 3DOF or 6DOF tracking on computer and headset.
In the composition, the starting user position is displayed as a semi transparent ghost, either a bust or a full body silhouette.

You can set a global scale for each device, so that an item can be small on mobile, but much larger on headset.

Use actions to switch to another scene

On multiple scene projects, use actions to switch between scenes (change scene, next scene, previous scene)

Learn more about actions

UI Overlays

An overlay is an extra layer of UI elements such as buttons, images, rectangle.
Overlays can be simply decorative or used to trigger interactions. Each scene can have an overlay linked to it.

Overlays can contain:

• rectangle shapes
• text
• images
• buttons
• photo & video module buttons

View overlays project template example

Working with overlays

to create and edit overlays, go to the ‘Scenes overlays’ section on the left column menu.

Left column:

  • manage project scenes overlays
  • manage overlay items of the selected overlay

Middle column:

This is the overlay preview, use the tabs at the top to switch between mobile and computer preview

Right column:

Edit properties of the selected overlay item:

  • item visibility: mobile + computer, only mobile or only computer
  • position
  • size
  • content
  • action to trigger when clicking / tapping item

Project skins

Create skins to customize the design of the loading and start screens of your project.

They key screens that can be customized are the loading, the start, and the main screens.