Wonda VR
Wonda VR allows you to create interactive, branching narrative 360° video experiences.
Below is documentation on using Wonda VR. There is also an interactive tutorial, created in Wonda VR, to help you get started with Wonda VR.
This page covers the following topics:
Record in 360°
Stitch your footage
Edit in Premiere
Create in Wonda VR
Recording in 360° is different than recording traditional media. Your 360° camera captures the full environment surrounding the position you choose. From that position, whatever you can turn your head and see, your camera can see, and thus, your audience will see.
If you do not wish to be in the video, considering hiding (i.e. behind a tree)!
For most 360° cameras, you should position your camera with at least 2-3 feet of clearance around the lenses. If objects are too close to the camera, they may become distorted during stitching. The greatest potential for distortion is along the seams- the area between lenses.
If there is an important focal point, position one of the camera’s lenses to focus directly on that point. This will help reduce distortion where you want to see detail.
If you wish to allow your viewer to move around in an environment, consider recording from multiple positions. Later, you can link those positions with navigational arrows in Wonda VR, to allow viewers to move between spots- or “stand” in different areas of the scene.
If you do not choose in-camera stitching, there are a few different programs that will stitch your 360° videos for you.
Gear 360:
- Select “360° VR Video”
- Import Videos (drag and drop from folder to the “media” tab in Gear 360)
- The program will begin stitching automatically and display % complete bars under each video.
In Insta360Stitcher:
- For each video, drag the entire folder containing the individual origin files into the left side panel.
- Adjust settings on the right side panel as needed, i.e. Resolution (2.5K – 8K), Format (MP4 H.264/H.265), h.264 codec.
- Click Add to Batch – this will add the file to the bottom panel.
- Click the play sign to begin stitching.
Adobe Premiere allows you to edit 360° videos just like regular videos, with the added benefit of setting the initial view/ perspective for the 360° video.
- Open Adobe Premiere and create a New Project.
- Import your media by clicking import (bottom left pane).
- Drag the first video clip you want to edit to your timeline (bottom pane).
- In the Program window (upper middle pane), you will see your selected video clip. Below the clip, select “Toggle VR Video Display”.
Set the center of view:
- Search Effect for “offset” (Video Effects > Distort > Offset).
- Click and drag offset onto the video clip in the bottom timeline.
- Be sure the video clip is selected, and ensure the degrees are set to 0.0 in the Program pane.
- Under the Effect Controls (upper left pane), find “Video Effects”, “Offset” and “Shift Center to”.
- The first blue number is the horizontal center, and the second blue number is the vertical center.
Note: You will typically only want to shift the horizontal center. - Hover over the horizontal number (in blue), then click & hold. Move your cursor left and right to adjust the center. You will see the center move in the main Program window.
Cut your video:
- If you want to cut yourself and/or other elements out of the beginning or end of your video clip, you can do this in more than one way. Hit play and find the point you want your video to start at.
- Pause, select the Razor Tool from the timeline, and click on the clip in the timeline to make a cut. Your original clip is now cut into two clips.
- Switch to the Selection Tool and now select the clip you want to delete. Hit “delete” on your keyboard.
- If the clip was at the beginning, you will now see a gap in the timeline. Right clip on the gap and select “Ripple Delete” to remove the gap.
You can also play with Video effects by using the effects tool along the right. Simply drag an effect and drop it on the clip you want to apply an effect to. In the Effect Controls panel, you can find the effects you’ve applied and adjust them. One common effect that may be useful is Video Effects > Adjust > Levels. From the Effect Controls panel, you can adjust colors and lighting, for instance, increasing the (RGB) Gamma will lighten your video.
While you can add text and audio in Adobe Premiere, you can also do this WondaVR with the added benefit of more interactivity, therefore we’ll skip this step and later apply text and sound effects in WondaVR.
Export your video clip:
- File > Export > Media
A window should pop up (Note it may take a few moments) - You can change the file name and save location by clicking on the blue text next to “Output Name”
- The format should be automatically set to H.264, and the checkbox should be checked for “Video is VR”
- Click “Export” at the bottom
Repeat these steps for additional video clips.
- File > Export > Media
When you’re finished, you should have a folder with separate edited video clips to pull into Wonda VR.
Video Requirements for WondaVR:
- Format: MP4
- Maximum resolution: 3840 x 1920 px.
- Maximum weight: no limit.
Import Edited Videos into Wonda VR
- Open Wonda VR, Click “NEW”, type in a project “Title” and click “Create”
- Separately, open the folder containing the edited media you want to use. Drag and drop all the media from the folder into WondaVR.
- Click “Yes” for 360° videos
-
- Note: You can now find imported media organized by type along the left side of your screen.
Add videos to your storyboard:
- Using the tools along the left side of the screen, double-click on the Videos icon. Select the video you want your project to begin with and drag it onto the center of the screen.
- Drag other videos onto the screen
- Note: A home icon appears in the corner of the first video you added, indicating that it is your story’s main menu. If you want to change which video your project starts with, simply right click on another video and select “Set as start up sequence”
- As your storyboard grows, it can be helpful to spatially organize videos in your storyboard so that you can visualize the storyline flow.
- One recommendation is to put the home video at the top, and put each of the videos you want the home video to link to in a row below it. Additional videos that are not linked to from the home video can go under whichever subsequent video links to them. If you follow this method, your storyboard may look like a vertically branching flowchart, similar to the look of a family tree.
Make an Interactive Text Button:
Your home video serves as a “main menu” for your project.- Double-click on your home/ startup sequence video to enter editing mode.
- Note: You now see a timeline at the bottom of the screen, similar to the timeline in Adobe Premiere. You can always return to the overall Storyboard to select a different video by clicking “Back to Storyboard” at the top of the screen.
- On the left side of the screen, double-click the “Texts” icon and drag the default text box onto your video.
- Note: The text box now appears on top of your video, and is referenced in the timeline below the video.
- To customize your text, double-click the Textbox
- A window will pop up. Here you can type and format text.
- Select Ok.
- With the text box selected, use the “Text Properties” panel on the right side of your screen
- The Text Properties panel lets you edit the Position, Size and Style of the text box. For instance, you can add a background color to your text box and adjust the opacity. It also lets you create links.
- Link your text box to another video on your storyboard:
- In the Text Properties panel, find “Link” > “Go to” and then select “Sequence” from the drop down box.
- A new drop-down box called “Sequence” appears. Select the video you want to link to.
- Note: If you’re unsure of a sequence name, you can select “Back to Storyboard” from the top of the screen, look at the videos on your storyboard, then go back to the video you are editing by double-clicking it again.
- Edit the interactions with your text box
- Interactions allow you to set what happens when a user gazes or hovers over the target. The target can be a textbox or a picture that you’d added to the timeline. In this case, we’re working with a text box.
- Right click on the textbox and select “Edit Interactions”.
- A window will popup.
Let’s make the text box get bigger when a user hovers:
- Select “Gaze Over”
- Target: This Element
- Type: Position and Size
- Value: 1.5
- If you want to add an additional interaction, simply select “+add” below the values you just set.
- Select “Save and Close”
- You can repeat these steps to make additional buttons to different videos in your storyboard.
- Note: While you may choose to link to all of the videos in your project from your home video, you don’t have to. You may choose to give viewers only a few options to choose from on the home/main menu. Then you can develop the storyline for each of those linked videos by linking to the next video sequentially. This lets you guide viewers through a story sequence.
Add a title to your startup sequence:
- Since your home video is the first screen your viewers will experience, use it to frame your story! You may want to simply give your project a descriptive title, or you may want to add a sentence or two about yourself, the scope of your project and/or other people represented in your project.
- Repeat the steps above for adding a text box to your video. Edit the style and interactions as you see fit!
Save your work and check your progress:
- After saving, select “File” from the top of the screen, “Run” > “Run Sequence”. This will let you play your most recent saved version. Checking your work this way is much quicker than synchronizing (publishing) after every change.
- Note: If the browser that automatically pops up does not support the project, simply copy the link from your browser and paste it into another browser.
- Try clicking on the button you made and see if it takes you to another video!
Add a “Return to Home” icon to your other videos:
Click “Back to Storyboard” at the top of the screen and choose another video to edit by double-clicking on it. Just like we did with the home video, you can add interactive features and buttons to your other video clips. These features may provide more information with that video, take viewers to the next video in your storyline, or back to the home/main menu. It’s usually a good idea to have an option to “return home” on every video in your storyboard.- You can create your own icon if you have experience (i.e. in Adobe Illustrator) or you can search the internet for free clipart; for this purpose, an png/clipart icon of a house may be appropriate, but feel free to be creative based on the story you’re telling!
- Once you’ve downloaded or created the image you want to use, import it into Wonda VR:
- Either drag the image from the folder it’s saved in into Wonda VR, or import it using the tools along the left side of your screen by double-clicking “Images” and clicking “Media” at the bottom.
- With your image imported, double-click the Images icon, find and drag the new image onto your video clip. This is similar to how you added text boxes.
- Note: The image should now appear on your video, and referenced in the timeline below your video.
- With the image selected, adjust the image:
- Resize of the image by dragging the corners in and out or by using the Position and Size settings found in the Image Properties panel on the right of the screen.
- Just like the textbox, you can also edit the opacity, add interactions, and create links. We’ll create a link.
- Create a Link:
- Under “Image Properties” > “Link” > “Go to”, select “sequence”
- Choose the name of your home/startup sequence from the sequence drop-down box
Synchronize Project
- In the upper right side of Wonda VR, you can click “Synchronize Working Version”.
- Wonda VR will begin uploading your project to the cloud.
- Once it is complete, the upper right side will say “Synchronized”
- Click on the cloud with the share symbol at the top of the screen.
- Here you can copy the link to your project. You can also submit the project to the next stages, “In Review” and “Released”. This will allow you to keep have a separate link for your polished “Released” version live on your website, while you continue updating the project and share the “Working Version” with collaborators, similar to a “beta” status.
