sign uplogin
login with Facebook

or with email / password

Documentation

AR / VR modes

  • AR (augmented reality mode)
    WebAR ( also called webXR ) is supported by Chrome, Firefox, Edge and Samsung Internet on Android, and supported by Safari on iOS 11 or newer.

  • VR (virtual reality mode)
    WebVR works on cardboard viewers on Android, 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.

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

3D models

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

Maximum file size:

  • 3Mb
  • 6Mb
  • 12Mb

Recommended:

  • less than 50 000 tris for AR
  • less than 100 000 tris for mobile VR
  • less than 500 000 tris for desktop VR

Animations

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

Image textures

You can import .jpg and .png images

Maximum size:

  • 1024 x 1024 pixels, 5Mb
  • 2048 x 2048 pixels, 5Mb
  • 4096 x 4096 pixels, 5Mb

Video textures

On the Plus and Pro plans, you can import .mp4 video files.

  • Maximum resolution: 512 x 512 pixels
  • Maximum size: 5Mb

We recommend using 'Miro video converter' software to compress video files.

Materials

XR.+ offers 5 types of materials

  • simple material with a single texture
  • physically based rendering material with 3 textures, use it for realistic shading
  • single texture light shading applied, use it for model with textures from a 3d scan
  • cell shading, for a cartoon effect
  • same as unlit, but with a video as texture (not available on the free plan)

Interacting with 3D models

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

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

When a scene goes to a new state, all actions from the state are applied, and all buttons from the state are displayed.
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 or open a webpage.

View tutorial

Optimization

It is very important to optimize your scenes!
Try to keep your scenes total size ( model + textures ) under 5Mb.
Short loading times and a good framerate always make an experience more pleasant...

Tracking image markers

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

View markers design guidelines

Publishing scenes

Publish a scene

To make your webAR content available to all, you need to publish your scene.
A scene can be published if it has a name and a cover image (used as thumbnails in listings).
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 on a website.
We provide a template for that, no coding needed from tour side, just upload html file provided in your server.

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

Example of embed scene

White label scenes

(PRO plan only)

White label checklist

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 'Augmented Reality is better on mobile' screen option.
  • On the social share button options, edit the shared link
  • Customize the about screen
  • Customize the AR help screen

Something is missing here?

Email us:
contact@xr.plus