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.
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
Tutorials
Start WebAR
From an image : How to make an interactive composition in web AR
From 3D Model : How to make augmented reality on web browser?
Add interactions to a 3D model
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.
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.
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.
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
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.
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 view | visualization 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 |
| Asset | an 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) |
| Avatar | a 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 |
| Composition | a list of scenes combined into an experience |
| Configurator | tool 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 time | time 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. |
| Interoception | relating to stimuli arising within the body and especially the viscera |
| Library | list of assets available to be added to a composition |
| Marker | see 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 |
| project | experience 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 |
| Composition | combinaison of assets presented to users |
| Project mode | the XR.+ cloud studio supports Augmented Reality and Virtual Reality experience |
| SLAM | anchor 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 |
| Tracker | see anchor |
| Trigger | event generating an action (can be automatic or activated by the user) |
| Url | Uniform 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 |