Create once, deploy everywhere at scale

Documentation
and tutorials

XR.+ cloud WYSIWYG studio enables experience makers to design, create, collaborate, publish and optimize webAR / webVR experiences that run directly on a mobile web browser.

Using exclusively HTML, CSS and Javascript standards, our technology is compatible with 96% of smartphone users to deliver advanced experiences with many types of tracking and triggers.

We provide different means to promote the experiences including QR codes, url, HTML embed code 3D / AR player.

In addition, we support deployment on social applications such as Facebook, Instagram, Snapchat and other social networks supporting AR

All in XR.+   /   XR.+ in all

DOCUMENTATION

Search

Table of Contents

Compatibility

End user experience

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

  • webAR: we support all major browsers on Android and Safari on iOS phones
  • webVR: we support Oculus Quest, Oculus Go, Gear VR, and the combo Firefox / Chrome + Oculus Rift / HTC Vive on desktop computers. If webVR is not available, the experience is displayed centered on the smartphone screen.

webAR compatibility

96%

iOS: 98%
iPhones and iPads running on iOS 11 or newer

Android: 95%
Android phones launched since 2017 with a minimum of 2GB RAM

Together, that’s 96% of phones compatible

XR.+ studio

The XR.+ studio is collaborative Cloud Software as a Service platform which doesn’t need any application to be downloaded. 
The studio works on all major browsers used.
 Chrome
Safari
Edge
Firefox
Samsung

Tutorials

Assets

3D model files

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

Maximum file size:

  •  3Mb
  •  6Mb
  •  12Mb

Recommended:

  • less than 80 000 tris (triangle faces) for AR
  • less than 200 000 tris for VR

Materials

There are 5 types of materials in the editor

  •  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 on models from 3D scans
  •  cell shading, for a cartoon effect
  •  same as unlit, but with a video as texture (not available on the free plan)

Images 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 files. 

Maximum resolution: 512 x 512 pixels
 
Maximum size: 5Mb
 
We recommend using ‘Miro video converter’ software to compress video files.

Sounds

Audio files

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

  • Maximum size: 1Mb

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 3D 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 composition.

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 projects!
Try to keep your project 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.

web ar marker xr.plus

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

Publish a project

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

If you don’t want your project to appear web in search results, set it to private.

Publish on another web domain

Business users can embed project 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 projects.

Example of embed project

White label

(PRO plan only)

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

  • Use a custom AR tracking image (marker)
  • Embed the project from an external website
  • Use a custom branding with your logo
  • 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

Definition

3D mesh
collection of vertices, edges and faces that defines the shape of a object
3D viewvisualization in relief presented to user into a XR+ player
3DoF
three degrees of freedom refers to tracking of rotational motion only: pitch, yaw, and roll
6DoF
six degrees of freedom refers to change position as forward/backward, up/down, left/right, yaw (normal axis), pitch (transverse axis), and roll (longitudinal axis)
Anchor
place where the AR composition can be anchored (can be an image, a 3D model, a flat surface, face, hand, foot, body, no marker)
AR view
visualization with user camera activates presented to user into a XR+ player
Assetan element integrated into a scene
Asset
type of asset / format which can be integrated into a scene (text, image, audio, video, 3D model, texture, HTML code)
Avatara graphical representation of a user or the user’s character or persona
Barcode
a small of rectangular black lines printed on something and read by a scanner
Camera permission
authorization asked to deliver AR experience in the live environment of the user
Cognitive
refers to “the mental action or process of acquiring knowledge and understanding through thought, experience, and the senses
Compositiona list of scenes combined into an experience
Configuratortool proposed to user to select different options into 3D or AR views
DoF
refers to Degrees of Freedom of movement of a rigid body in three-dimensional space
Dwell timetime spent in an experience
Embed code
experience HTML code to be pasted into a webpage which will show the same experience as the original
Exteroception
relating to stimuli received by an organism from outside : auditory (sound), visual (sight), oral (taste and texture), olfactory (smell), tactile (touch)
Hologram
reproduction in 3D of an image which still has the depth, parallax, and other properties of the original
HTML
HyperText Markup Language (a way of marking text so that it can be seen on the internet)
Immersion
perception of being physically present in a non-physical world by surrounding or adding images, sounds, videos or 3D objects providing an engrossing total environment.
Interoceptionrelating to stimuli arising within the body and especially the viscera
Librarylist of assets available to be added to a composition
Markersee anchor
Metaphor
figure of speech that directly refers to one thing by mentioning another (an arrow to move, a shopping cart to buy, a heart to love
Player
computer program that can store, copy, and play in 3D, AR and VR experiences
projectexperience composed of element before, during and after an AR part
Proprioception
relating to stimuli which affect sensory receptors like muscles, tendons and joints linked to the perception of our body in the space (also referred to kinesthesia)
QR code
pattern of black-and-white squares printed on something and read by smartphone to give access to an url
Compositioncombinaison of assets presented to users
Project modethe XR.+ cloud studio supports Augmented Reality and Virtual Reality experience
SLAManchor positioned on a flat surface (horizontal or vertical)
Social app
mobile native application published by social media companies such as Facebook, Instagram, Snapchat, TikTok, Wechat…
Template
pattern registered for creating other similar experiences with different items
Timecode
sequence of numeric codes generated at regular intervals to coordinate multiple actions on items presented into an experience
Trackersee anchor
Triggerevent generating an action (can be automatic or activated by the user)
UrlUniform Resource Locator (a website address)
WebAR
web-based augmented reality experiences that allow access and interactions without any need of an extra app
WebVR
web-based virtual reality experiences that allow access and interactions with virtual reality devices and smartphones

Need more information ?