[TUTORIAL] CREATE REALISTIC VR EXPERIENCES WITH INTERACTIVE SCENARIOS USING SPEEDERNET SPHERE

In this tutorial, you’ll learn how to create interactions using different elements, changing their aspects and states, using what we call conditionals.

To take a step further the VR example where you can press a button to call the elevator and it changes its color, now, like IRL, the user standing in front of the elevator, will hear the elevator coming and then see the doors open.

Now let’s see how to translate this scenario into Speedernet Sphere:

Adding elements

  • An image of an elevator, initially closed and apparently non-interactive.
  • Next to the elevator, an image of a button to call it is available, visible and interactive

Adding conditionals

  • When clicking the button (calling the elevator):
    • It changes its aspect from gray (”off”) to green (“on”).
    • A sound plays representing the elevator coming.
  • When the sound ends playing (the elevator arrives), the door opens, and it becomes interactive.
  • And finally, when clicking the elevator the user can go inside (change scene).

Main Steps

This example needs two main steps:

  1. Add elements to the scene and define their properties.
  2. Create interactions using the conditional tool.

Necessary Elements

For this experience, you will need:

  • 2 360° panoramas : one outside the elevator, and another inside 2 images of the elevator door : one closed and one open
  • 2 images of the button : one image of a gray button and an image of a green one
  • 1 sound : an elevator ringtone

Step 1 : Add Elements to the scene and define their properties

Let’s consider you have already created and named the two scenes of this experience: “Hall” (outside) and “Elevator” (inside) the elevator, having each the corresponding 360° panorama, and that you have as well imported all your media to the Media Manager. The main scene will be outside.
3 elements are required :

  • The elevator door
  • The button
  • The sound

For each one of them, define their properties :

  • Initial aspect
  • Secondary aspect, if required
  • Initial state
  • Other states, if required

ELEVATOR DOOR

1. Insert an Image Element
Start by adding the image element into the scene:

  • Click the “add element list”
  • Click the image element and insert it in the scene
  • Rename it “elevator” in the “Elements Column”. That will enable you to find it faster when your other elements are added

2. Define the properties of the elevator door
Open the properties tool. 

DEFINE THE ASPECTS OF THE ELEMENT

INITIAL ASPECT

  • Rename the initial aspect as “close”.
  • Associate an image (the elevator door closed) to this aspect by clicking the button “Add an image”.

SECONDARY ASPECT

  • Create a second aspect by clicking the “+” symbol
  • Rename it “open”
  • Add an image (the elevator door open) to this aspect

DEFINE THE STATE

In this example, the elevator door is initially visible and non-interactive, and it becomes interactive after a few interactions, it will need 2 states

INITIAL STATE

  • Rename the initial aspect “inactive”
  • Select “Yes” for the visibility and “No” for interactivity

SECONDARY STATE

  • Click the symbol “+” to create another state
  • A freshly created state, is “Visible” and “Interactive”. For this example, you don’t need to change it. Simply rename it as “active”
  • Close the properties window

ELEVATOR BUTTON

1. INSERT AN IMAGE ELEMENT
Add the image element as explained previously for the elevator door.

2. DEFINE THE PROPERTIES OF THE ELEVATOR DOOR
Open the properties window.

CREATE THE ASPECTS OF THE ELEMENT

The elevator button, like the door, has two aspects (gray and green). As explained previously, create and rename them as “off” and “on”, respectively. The initial aspect is “off”.

DEFINE THE STATE OF THE ELEMENT

In this example, the element has one state all along the experience : “visible” and “interactive”. Remember to give a name to the state to find it faster when needed. Close the property tool.

ELEVATOR SOUND

1. INSERT A SOUND ELEMENT
To make the scene more realistic, add a sound element in the scene the same way as the two previous elements.

2. DEFINE THE SOUND PROPERTIES
Open the properties window.

CREATE ASPECTS OF THE SOUND

A sound element as for images can have different aspects. Imagine a car rolling and suddenly the driver brakes. So first you hear the car then the noise of the brakes. Therefore you have a sound element with two aspects (two sounds) : “go” and “brake”. Know that the different aspects of a same element can’t be played at the same time. The sounds “go” and “brake” can’t be launched at the same time.

In this example, the sound element has only one aspect.

  • Rename the aspect “sound”
  • Click on “Add a sound” to link the audio file

SET THE STATE OF THE SOUND ELEMENT

The state of a sound element can be:

  • Play once
  • Loop
  • Stop
  • Pause

You can use these states to fit the scenario and interactions.
For this example, the sound is not playing (stop) at the beginning, and then it plays once, when the elevator is called.

INITIAL STATE

Rename it “stop” and select “Stop”

SECONDARY STATE

  • Create a new state
  • Rename it “play” and select “Play once”

STEP 2 : CREATE INTERACTIONS USING THE CONDITIONALS

In this last step, use conditionals (conditions and consequences) to add interactivity and bring your scenario to life.
Let’s see them step by step:

1. THE ELEVATOR CALL

When clicking the button (calling the elevator):

  • it changes its aspect from gray (”off”) to green (“on”)
  • a sound plays representing the elevator coming

There’s one condition and two consequences.

  • Open the “Conditional tool” window  next to the elevator “button” element
  • Add a new conditional by clicking the “+” symbol
  • Define the condition and consequences :
  • Condition: If click, “button”
  • Consequence 1: Then this button changes aspect and becomes “on”
  • Consequence 2: click the symbol “+” to add a new consequence: And state of “sound” becomes “play”
  • Close the window

2. THE ELEVATOR DOOR OPENS

When the sound ends playing (the elevator arrives):

  • the door of the elevator opens,
  • and it becomes interactive.

There’s one condition and two consequences.

  • Open the “Conditional tool” window of the sound element
  • Add a new conditional by clicking the “+” symbol
  • Define the condition and consequences :
    • Condition: If “End of playback” of the audio
    • Consequence 1: Then “elevator” changes aspect and becomes “open”
    • Consequence 2: click the symbol “+” to add the second consequence: And state of the ’“elevator” becomes “active”
  • Close the window

3. THE USER ENTERS THE ELEVATOR

When clicking the elevator, the user can go inside(change of scene).
There’s one condition and one consequence.

  • Open the “Conditional tool” of the elevator door:
  • Add a conditional
  • Define the condition and the consequence :
    • Condition: If click “elevator”
    • Consequence: Then “Go to scene” (“elevator”)

You can go further in the use of the aspects and conditions to change elements in one scene or different scenes of the experience.

Feel free to send us your comments or any questions you may have!

Team Sphere

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.