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 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 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
Open tutorial

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

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

3D models

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

Maximum 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 .dae models animations can be activated with the 'interactions' module.
To play an animation, use 'play 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 different 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 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 and buttons

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 the first time the web AR image marker is discovered by the camera view

There are a lot of possible actions, such as:
hide / show a mesh, start 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

Something is missing here?

Email us:
contact@xr.plus