index file template

Photo & video module

With the photo & video module, users can make photos & record videos of their experience.

How to use the module ?

  1. Enable the module in the modules section
  2. Add a photo or video button to a scene overlay

3D models formats

You can import .obj.fbx and .glb (compressed gltf) 3D models up to 12 MB.
The 3D models can be animated.
We recommend importing 3D models with less than 100 000 triangle faces (polygons).

Importing animations & textures

When importing a:

.obj model : neither textures nor animations are included
.fbx model : animations are included but not textures
.glb model : animations and textures are included

Composition background

Add a colored layer placed at the back of the composition, the layer can be a gradient or a plain color, opaque or semi transparant

Gaze trigger

Trigger actions by pointing at composition items. When using the gaze trigger, you can trigger action without touching the screen, leaving the user hand free

Javascript & CSS API

Expand the project functionalities with the XR+ front-end javascript & CSS API module (advanced javascript knowledge recommended)

Contact us for more infos

Javascript/CSS XR+ API

The XR+ javascript API let developpers add front-end functionalities that do not exist in XR+, it also allows for a deeper UI / screens customization.

How it works?

The API is a project module to enable in the studio

The API allows javascript file and CSS files to be loaded in the <body> of the project web document, with the usual <script> and <style> tags.

You must host those files, they are not hosted by XR+.

We provide a simple example – a javascript class – on how we recommend to communicate with the XR+ elements of the experience.

You can register and listen to particular events such as when the experience starts, or when an image marker is found/lost.

You can also setup your own events with the XR+ studio action editor. By doing so you can trigger an action on a composition item to call a function you have defined in your script.

download the javascript API class example

Libraries included in the core project js code

Those libraires are loaded by all projects and ready to use with the API:

Javascript reference

considering: var XRAPI = new XRAPI_V1({});

XRAPI.getIsLibraryLoaded();check if project library is fully loadedboolean
XRAPI.getIsStarted();check if experience already startedboolean
XRAPI.getThreejsScene();get threejs scenethreejs scene
XRAPI.getCompositionItemByName(“my item name”);get a composition item threejs root object by its namethreejs object
XRAPI.getCompositionParent();get parent off all threejs objects on the scenethreejs object
XRAPI.getDesktopScreenDomElement();get web dom element: desktop screendom element
XRAPI.getLoadingScreenDomElement();get web dom element: loading screendom element
XRAPI.getStartScreenDomElement();get web dom element: start screendom element
XRAPI.getMainScreenDomElement();get web dom element: main screendom element
XRAPI.goToScene(index);change scene. Use index 1 for the first scene
XRAPI.goToState(index);change state. Use index 1 for the first state

Using three.js

the three.js library is currently available at the global scope ( but may only be available as a module import in future updates ).

You can use it directly this way:

const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 ); ...

Contact

for questions regarding the API, email us at: contactus@xr.plus

Scenes

Each XR+ project is made of one or several scenes, on the basic plan your have have up to 5 scenes.

Each scene is independent, you can setup actions to switch between scenes, take a look at the bird slideshow template as a multi scenes project example.

Open multi scenes project template

Scene timeline

XR+ scene timeline

Activate the timeline on a scene to setup in & out timings for each of its items

Overlays

Each scene can have an overlay linked to it. An overlay is an extra layer of UI elements like buttons, shapes, or images. Overlays can be simply decorative or used to trigger interactions.

User position

XR+ webXR user ghost

You can set the starting user position when doing 3DOF or 6DOF tracking on computer and headset.
In the composition, the starting user position is displayed as a semi transparent ghost, either a bust or a full body silhouette.

You can set a global scale for each device, so that an item can be small on mobile, but much larger on headset.

Overlays

An overlay is an extra layer of UI elements such as buttons, images, rectangle.
Overlays can be simply decorative or used to trigger interactions. Each scene can have an overlay linked to it.

Overlays can contain:

• rectangle shapes
• text
• images
• buttons
• photo & video module buttons

View overlays project template example

Working with overlays

to create and edit overlays, go to the ‘Scenes overlays’ section on the left column menu.

Left column:

  • manage project scenes overlays
  • manage overlay items of the selected overlay

Middle column:

This is overlay preview, use the tabs at the top to switch between the mobile and the computer preview

Right column:

edit properties of the selected overlay item:

  • item visibility: mobile + computer, only mobile or only computer
  • position
  • size
  • content
  • action to trigger when clicking / tapping item

Actions

With actions, you can add interactions to your projects

Actions can be added to:

  • scenes items
  • scenes model meshes
  • overlays items
  • state engine states
  • modules such as the QR code / barcode readers

XR+ studio actions

  • Change scene
    Switch to another scene.
  • Restart scene timeline
    Restart the current scene timeline
  • Pause scene timeline
    Pause the current scene timeline, also pause all audios & videos
  • Resume scene timeline
    Resume the current scene timeline, also resume playback of audios & videos
  • Change overlay
    Display another scene overlay, or remove the current overlay
  • Play model animation
    Play an animation from a model that contains animations. At the end of the animation playback, you can choose to switch to another state.
  • Pause model animations
    Pause all the animations from the selected model
  • Play basic animation
    Animate a mesh from a model with a simple animation: scale up/down, pulse, rotate clockwise, rotate anticlockwise
  • Stop basic animation
    Stop all basic animation on the selected mesh
  • Play audio
    Play an audio file from the assets library
  • Stop audio(s)
    Stop the playback of an audio file
  • Play video
    Play a video from the composition
  • Pause video(s)
    Pause the selected video from the composition
  • Stop video(s)
    Stop the selected video from the composition
  • Change material
    Apply the selected material on the selected mesh
  • Set material color
    Change the color of the selected material
  • Recenter composition
    Recenter the composition in front of the user, only available when using 3 DOF tracking
  • Reset user position & rotation
    Recenter the composition in front of the user, only available when using 6 DOF tracking
  • JS API action
    Send a message to the XR+ Javascript & CSS API

Only available in the states engine:

  • Timer => switch to a state
    Set an timer alarm, when the alarm is triggered, switch to another state
  • Play basic animation
    Animate a mesh from a model with a simple animation: scale up/down, pulse, rotate clockwise, rotate anticlockwise
  • Stop basic animation
    Stop all basic animation on the selected mesh
  • Show composition items
    Unhide the selected items from the composition
  • Hide composition items
    Hide the selected items from the composition
  • Show model meshes
    Unhide the selected meshes from the composition
  • Hide model meshes
    Hide the selected meshes from the composition

When to use the States engine?

If you need to trigger multiple actions at once like: change scene, then hide an item, then wait 3s, then change overlay… Then use a state from the states engine

States engine

(formerly ‘advanced interactions’ module)

Complex actions sequences can be made with the ‘States engine‘, by switching between states.

A state is made of one or several actions. Use states when you need to trigger multiple actions at once like: change scene, then hide an item, then wait 3 seconds, then change overlay…

When a project switches to a new state, all actions from the new state are applied in a top to bottom order.

There are many different actions, such as:
change scene, change overlay, hide / show an item, play an animation, play a sound effect, change a color.

States actions

See ‘actions’ section for the full list of all available XR+ studio actions.

Tip: multiple states can be chained with a timer action, to switch to another state after a fixed amount of time.

Tutorial

You can follow this step by step tutorial to practice using the states engine

States engine tutorial