The Ultimate Guide To Creating Your First Interactive VR Experience – No Coding Skills Required

Jun 29, 2018 4:37:24 PM / by Viond

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.

Island-Glasses

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 Viond Smartphone 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 Viond Smartphone App which is available for iOS and Android. The Viond App can be downloaded and installed for free via the App Store, Play Store or Oculus Store. Just search for “Viond” and click install.

3. The Viond Builder

Viond is the software that you will use to create your VR experience. Viond makes it easy to create and publish interactive 360° and virtual reality content. To create your experience in accordance with this guide, the Viond Builder must be used. The Builder 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 Viond Smartphone App. The application software can be downloaded from the website www.viond.io . Here, you will find the "Download" section in the upper tab. In order to download the trial version of Viond, 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 Builder 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 Viond Player you will also need some 360° Footage of any kind (photos/videos or CGI) that you can then import to the Builder to add some fancy interactivity. If you don't have a 360° camera on hand to shoot some but still want to try the Builder 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 Builder, 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 Viond Builder 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 Builder, you must first log in with a Viond 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 Viond 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_Erlärungen-1

Nodes and Transition

In the Viond Builder, 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 Viond Builder.

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 Viond.

 

Preview

The preview mode is the main way of checking an experience created with the Viond builder on a smartphone for example.

Before getting into this you have to save the experience locally on your computer in a dedicated folder.

As soon as you click on start in the preview window the export starts and the experience can now be opened on your mobile device in the Viond app.

The mobile device, therefore, must be connected to the same WiFi network as the computer on which the experience is built. Please consider that the preview mode has to be activated in the settings of the Viond app beforehand. As soon as the devices are connected your smartphone will start to download the preview-experience.

And that's it. You can now preview the experience as a local preview on your mobile phone. The Viond watermark will disappear after formally publishing the experience.

 

Publishing

In the Publishing and Management section of Viond Builder, you can publish your 360° experiences. As we learned before, you can add meta information to your experience, add a preview image and the associated project.

It is then highly recommended that you review your entire experience by using ‘Preview Draft’ again. Similar to the Local Preview, this can be done via the Viond app on the smartphone. The difference to the Local Preview is, that the experience will now be delivered by the Viond Cloud and not your local PC.

To do so, simply scan the QR code or enter the URL that will appear in the window when you click on Preview Draft. The Experience will then open in the Viond app and be displayed without watermarks. Here, you can also see the title and the preview image of your experience in the App menu.

By clicking on the ’Publish Request’ button, a publishing request will be sent to the Viond Team. The team will review your experience and approve publication. When your experience is published, it will appear in the Viond App and will be visible to every Viond user.

If you do not wish to do that and prefer to share the experience only with a selected group of user – your colleagues, business partners or friends via a URL-link or QR code -, you can do so via the 'Unlisted' function.

To do so, simply go to the 'Settings' tab and tick the 'Unlisted' box. This will hide the Experience (if you have published it) and will keep it from being publicly shown in the Viond App. Underneath the box, there is the option to generate the QR Code or URL-link to share the unlisted Experience. These links will not work until the Experience has been published through a Publish Request.

You are able to generate new links as needed at any time (via 'Revoke Link'), but please note that the old ones will not work anymore. By doing so, you can control, who has access to your experiences at any time.

 

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 builder 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.

 

 

Topics: Creative Hackathon

Viond

Written by Viond