Stay up to date with the VRdirect Blog

All about Virtual Reality and 360°

The Ultimate Guide To Creating Your First Interactive VR Experience

June 29, 2018 / by VRdirect

drei_ecke_over

I want to know about:

VRdirect Blog  »   VRdirect Products & News  »   The Ultimate Guide To Creating Your First Interactive VR Experience

Have you ever worked with VR? No? Possibly because it was just too expensive or you didn't know any way to get into the matter without working yourself through hundreds of tutorials explaining to you how to get started with coding in Unity or another 3D software and you just felt overwhelmed.

 

Well... this stops today. Because this is the ultimate guide to creating your first VR experience. And you don't need any coding skills to get started. Basically you don't need a lot to get started although there might be some things to consider.

 

Prerequisites

1. A computer and WiFi

Although you don't need any coding skills you still need a computer to get things up and running. You can use a Mac or Windows, doesn't matter, but the computer should have some performance since you will be handling 360° data which tends to have quite big file sizes. You will also need WiFi ­ for the computer to connect to the smartphone we will talk about in the next section, as well as to continue to read this guide ;).

2. A smartphone and the VRdirect App

To test your VR experience you will need a smartphone that is connected to the same WiFi as your computer. That way you will be able to preview your VR experience easily and without any hassle. To do that you will also have to download the VRdirect App which is available for iOS and Android. The VRdirect App can be downloaded and installed for free via the App Store, Play Store or Oculus Store. Just search for “VRdirect” and click install.

3. The VRdirect Studio

VRdirect is the software that you will use to create your VR experience. VRdirect makes it easy to create and publish interactive 360° and virtual reality content. To create your experience in accordance with this guide, the VRdirect Studio must be used. The Studio makes it possible to import 360° images and videos and to add interactivity. Together with other 360° experiences, these are published and shared on the VRdirect App. The application software can be downloaded from the website www.VRdirect.com. Here, you will find the "Download" section in the upper tab. In order to download the trial version of VRdirect, you must first enter your first and last name and then your e-mail address.

The download link will then be sent to you via email. If you click on the link, you will be redirected to the download page.

When the Studio and the App are installed on the respective devices, all that remains is to accept the terms of use.

4. Some 360° Footage

To create an interactive 360° experience with the VRdirect Web Player you will also need some 360° Footage of any kind (photos/videos or CGI) that you can then import to the Studio to add some fancy interactivity. If you don't have a 360° camera on hand to shoot some but still want to try the Studio you can always use some stock footage or download 360° videos from Youtube. If you do have a 360° camera and are eager to produce some footage feel free to check out our guide to filming your own 360° footage.

And yeah. That's it. Not too much to think about, right? Now you can start creating interactive 360° experiences.

 

Let’s dive in!

Managing and Publishing your projects

When you first start the Studio, you will see that it consists of two parts: authoring as well as management and publishing. Since you want to create some neat interactive VR experiences, you will have to choose Authoring but we will quickly have a look into the management and publishing options that the VRdirect Studio has to offer.

Here you can manage and publish your projects (wouldn't have guessed that from the name right ;)). To be able to use this part of the Studio, you must first log in with a VRdirect account. Once you have logged in, it is now possible to create a so-called 'Publishing Slot'.

When creating such a slot, you can edit the corresponding information and add a preview image for your experience for the VRdirect App main menu. If you want to publish your experience, you can do so by ‘Publish Request’.

It is also possible to generate a QR code and URL-link to share your experience for an already published project via the 'Settings' tab.

But let's get back to authoring real quick because that's what you came for, right?

 

Viond_Screenshot_Erklaerungen-1

Nodes and Transition

In the VRdirect Studio, Nodes represent 360° footage. As stated above those can be photos, videos or CGI footage but it has to be 360°. They are the centerpiece of your interactive 360° experience. Transitions connect one Node to another… but let’s get into this later. First things first. To create a Node click on “Create new Node” on the bottom left of the storyboard section. This creates a Node. TADA... You’re done.

Okay not quite but this is the first big step.

Nodes are like scenes in your interactive experience and contain the 360° footage. You can create as many nodes as you like but always organize the node layout structure in the storyboard section by simply dragging and dropping your nodes around the section.

Ideally, the nodes are arranged in a way that represents the story that you want to tell in your interactive experience.

Each Node has different properties. For your convenience. Name them. Trust me. And then simply import your 360° footage using the "Media Path" property.

If you have done that with at least two nodes it's time to add some transitions.

Just hover over a node and draw a line from one of the small dots to the dots of another node. This automatically creates a transition between the two nodes that can now be used to add some interactivity.

 

Interactive elements and interaction events

Sections-1

 

Interactive Elements are objects or interactions within a node. They can contain information, show or hide other elements, or start a transition. Interactive elements are mostly pictures, graphics or sounds.

When using images, the PNG format recommended. You can use Photoshop or even Powerpoint to create icons, boxes, text-boxes, labels or frames and use them as interactive elements.

To add an interactive element, select any node and click on the “new interactive element” button on the bottom left of the Preview section. A new interactive element appears.

The interactive element can be moved around the 360° image or 360° video again by drag and drop. Name, media path, type of element (e.g., image, video, or sound), distance to the user and horizontal and vertical position can now be set in the properties. Use 'Scale' to slightly up- or downsize an element to better fit into your picture.

From here, you can select an event that is triggered by the interactive element. To do so, click on the + in the lower part of Interaction Events section to create a new event. This event will be named automatically. Under "Type" you can choose between Select, Gaze in and Gaze out. Select is activating an interactive element after a little while (like clicking on it), Gaze in and Gaze out is looking on or off an object. If you simply want to trigger the before added transition, simply set the event to "Trigger Transition". This will take the viewer to a new node. You can now select the Transition, which we inserted before.

Now, we have created and set up a new interactive element and also specified, what the interaction event should be.

When it comes to simple interactive experiences, these few steps that we took are more than enough. Sure, triggering transitions and hopping around between different footage might not be revolutionary but the point that you just did this in a few minutes is. And you didn't even realize it.

But since when is simple enough? We are here for some real experiences so let's get into some features of the VRdirect Studio.

 

 

Time Events

'Time Events' are an additional method to trigger an action in the 360° Experience. For instance, you can use time events to guide the user through your experience or have an image appear after a set time.

In the properties window of a node, you can create events that are triggered after a specific time, rather than after a specific user action. These are called Time Events. The Time Event and the associated action occur after a set number of seconds. The action will start automatically after this time.

A time event is created by selecting a node and clicking on the 'plus icon' on the right side in the properties window. The number of seconds can be configured in the 'Time (in seconds)' section. You can then select the desired action for the event in the tab 'Action'.

 

Persistent Nodes

A persistent node is a node that is persistent. Obviously. But what does this mean? A persistent node, for example, can be some background music that you want to add for your entire experience.

To create such a persistent node, click on the button "Persistent Node and Experience Properties" in the bottom right corner of the “Storytelling section”. The button opens a node in which all created interactive elements run permanently throughout the entire Experience.

For example, to insert background music, create an interactive element in the Persistent node. On the right in the settings, you can specify the media path, i.e. the location on the computer where the sound file for the background music is located. Select the title and rename the element.

Once this is done, you can create a new Time Event in the Persistent Node via the 'Plus' button on the right and select the 'Start Sound' action. In the 'Target' window, select the 'Background music' node you have just created.

Once these steps have been completed, the music will play in the background of the entire Experience.

 

Are you still with me? Awesome. Because this means that you actually did it! You have just created your first interactive VR experience. Without using any code. Just by drag and drop. Doesn't this feel insanely good?

 

Oh right. It can't quite yet since you haven't actually seen your experience. Well, let's change that and dive into how to preview, export and publish an experience with VRdirect.

 

Preview

If you are ready with creating your very first experience, you are able to do a local preview.  

Here you have to follow a straight guideline.  

Make sure you have installed the VR direct app on your smartphone. Open the VR direct app, go to settings in the right upper corner and turn on the “preview mode”.

Make sure that both devices, smartphone and computer, are in the same wifi network. 

Press the “preview Button” on the left-hand side in the story. A little window will open and if the experience is valid, you can press start. Once it 100% loaded you can open the VR direct app on your smartphone. 

Then the window “Preview Mode” will then appear on the screen and your computer will be listed as device. Select your computer. 

Now you are able to preview your created experience and check if everything is set up right or if you have to make some changes in the authoring part. 

As you now know how the local preview works. You are ready for publishing your experience. 

 

 

Publishing

You already learned how to create an experience and how to do the local preview. You will now learn where to organize, manage and publish your experiences.

After creating the your very first experience, head over the starting menu screen of the VR direct Studio, go to “Management and Publishing” and Log-in with your created account. Now you are in the “Slot Management and Publishing” section of the VR direct Studio. Here you are able to create new slots, upload and publish your experiences. Create a new Slot by clicking the plus symbol.  Then, the Slot information section will be displayed. Here you can add several information like title, author and description to your experience. After inserting the information, click “save information”. 

Now the Studio wants you to upload a preview image. Click “upload image” and insert any image. This image will be displayed as title image of your experience. Now click on “Upload project” and upload your experience file. Once it is successfully uploaded, you are able to make another preview draft. Check your experience using one of those links or codes. These codes are only valid one time. Now, after the last preview, you now finally can publish your project.

The VR direct Studio is automatically generating some codes and links for distributing the experience. Head over to settings. Here you will see a unique QR Code for experience as well as an experience URL and six-digit experience code. This code can simply be typed in the search field of the VR direct app. Further, you have the possibility to embed the experience in your own website with the given I frame. 

 

So this is it. This is our ultimate guide to creating your first interactive VR experience without any code. We sincerely hope that you like our studio and if you have any questions whatsoever feel free to comment them on the social media channels or contact our team via Email. We will always be happy to assist you with any issues whatsoever.

 

 

Leave a Reply

About VRdirect

The VRdirect platform is the easiest solution to create and publish Virtual Reality projects. There are no expert skills needed. Moreover, Virtual Reality projects created with VRdirect can be published instantly via any VR enabled device, smartphone or web-browser and you can update them easily and in real-time.

Join our newsletter

teaser_free-trial
teaser_white-paper