Documentation

AR / VR modes

• AR (augmented reality mode)
  WebAR (also called webXR) is supported by all major browsers on Android, and by Safari on iOS.
  
  
• VR (virtual reality mode)
  WebVR works on Oculus Quest, Oculus Go, Gear VR, and the combo Firefox / Chrome + Oculus Rift / HTC Vive on desktop computers.
  If VR is not available, the scene will be displayed centered on the screen.

Phones AR compatibility

Tutorials

Learn how to make a web AR scene from images
Image compositions tutorial

Learn how to make a web AR scene from a 3D model
3D model scene tutorial

Learn how to add interactions to a 3D model in augmented reality
3D model interactions tutorial

Media scenes

Model scenes

3D model files

You can import .obj, .fbx and .glb (compressed gltf) models.

Maximum file size:

• Free plan: 3Mb
• Plus plan: 6Mb
• Pro plan: 12Mb

Recommended:

• less than 50 000 tris (triangle faces) for AR
• less than 100 000 tris for mobile VR
• less than 500 000 tris for desktop VR

Materials

There are 5 types of materials in the editor

• Phong: simple material with a single texture
• PBR: physically based rendering material with 3 textures, use it for realistic shading
• Unlit: single texture light shading applied, use it on models from 3D scans
• Cel: cell shading, for a cartoon effect
• Video: same as unlit, but with a video as texture (not available on the free plan)

Textures

Animations

.fbx and .glb models animations can be activated with the 'interactions' module.
To play an animation, use a 'play model animation' action in the module states.

If the model is static, you can also play simple animations ( pulse, rotate... ) from the module.

Interactions

Interactions are made with the 'interactions' module, by switching between 'states' of the scene.

A state is made of actions, buttons can be added to it.

When a scene switches to a new state, all actions from the state are applied.
The default state is applied when the web AR image marker is tracked by the camera for the first time.

There are many different actions, such as:
hide / show an object, play an animation, play a sound effect, change a color or set a timer to switch to another state after a fixed amount of time.

Buttons can be used to switch between states, play sound effects, start a phone call, display a pop-up with text & image, open a webpage.

3D model interactions tutorial

Optimization

It is very important to optimize your scenes!
Try to keep your scenes total size (model + textures) under 5Mb.

Do not use oversized textures, and delete all faces that are hidden,
short loading times and a good framerate always make an experience more pleasant...

Tracking

Image tracking

On the PRO plan, you can create your own custom tracking web AR image markers.

View markers design guidelines

Free users can use the default XR+ image marker.

Print the default marker

No tracking

It's also possible to make experiences without image tracking, the phone motion sensors will then be used to position the scene content in the environment

Example: Micro story: Vika + Miśu

ARCore floor tracking

on ARCore Android compatible phones, XR+ scenes can be placed on the user environment, on a flat surface.

Example: Circus Pandy star

See list of supported devices

Publishing scenes

Publish a scene

To make your webAR scene available for all, you need to publish your scene.

If you don't want your scene to appear in the 'latest scenes' list and in search results, set it to private.

Publish on another web domain

PRO users can embed scenes from an external web domain inside an iframe, like when adding a Youtube video on a web page.
We provide a template for that, no coding to do, just upload the .html file to your server.

Note: an SSL certificate (https:// ...) on your web domain is required to embed scenes.

Example of embed scene

White label

(PRO plan only)

To remove all XR.+ branding visual elements, check this list:

• Use a custom AR tracking image (marker)
• Embed the scene from an external website
• Use a custom branding with your logo
• On the 'details' tab, add a scene description
• On the 'screens' tab, tick the Skip the 'This is an augmented reality experience for mobile' screen option
• On the social share button options, edit the shared link
• Customize the about screen
• Customize the AR help screen