very.gd team
Mar 24, 2017 · 4 min read

In our ongoing effort to make very.gd the fastest, easiest way to create for VR and 360° video we wanted to take a moment to share how best to author content for VR and our platform.

Templates

To make content creation easier, we’ve created a few templates that can be used to help inform the process:

These templates not only include sizing information but also some common tips on creating immersive content.

Comfort Zone

Using the oft-cited work of Google’s Designer / Researcher Mike Alger the templates denote the Main Content Zone, Periphery Zone, and Curiosity Zones as illustrated here:

Content Zones defined by Mike Alger

Looking at Alger’s guidelines on vertical range of motion also provides us with our UI “safe area” to ensure an interface remains visible and comfortable to navigate.

Field of View (FOV)

With any immersive 360° medium field of view is also critical when determining how to best design content. Each VR headset has a different FOV so it’s important to know how to make your content viewable to all users, similar to cross-platform considerations of traditional 2d interactive

experiences. Here’s a breakdown of how FOV differs across the major VR hardware:

  • HTC Vive — 110°
  • Oculus Rift — 100–110°
  • GearVR — 96° (depends on phone used)
  • PSVR — 100°
  • Google Cardboard — 90° (depends on phone used)
  • Google Daydream — 90° (depends on phone used)

(source 1, source 2, source 3)

Our platform renders an effective field of view of 100° to ensure that very.gd aligns with your existing design workflow and what you see in very.gd will closely mirror what you see in your end product.

Canvas Size

While you can still drag and drop any content you have and view in seconds, we created some guidelines for anyone creating new content that wanted to understand how your content gets displayed when in 360°.

Panoramas

When determining an ideal canvas size for panorama content we balanced image resolution with performance to ensure your content looks as good as possible while maintaining a good user experience across mobile and web. (If you find yourself needing higher resolutions, please contact us.)

The templates we’ve created use the dimensions 5400 x 1000px which provide good quality for photographic content and font rendering with a height that fills the majority of the viewport on both web, mobile, and stereoscopic views. We’ve found that these dimensions provide an optimal area for UX/UI design, prototyping, and narrative storyboarding.

Note: images larger than 5400px in any dimension will be resized to ensure the best viewing experience.

Example:

Louvre Museum — an example of panorama content over an equirectangular background

Panels

Due to the number of factors that can be considered when authoring panel-based content we haven’t created a definitive template to reference. We do, however, resize any media larger than 1200px in either dimension.

Example:

“Limbo Window” — an example of a single panel scene

Background

In addition to the panorama or panel-based content that you upload there also exists the area that makes up the spherical area that exists at the periphery of your scene. This area is referred to as the “skybox”. You can define the skybox by hex color or by uploading an equirectangular image — which will allow you to separate your foreground and background content and create more immersive environments.

Example:

“Moon Over Tatooine” — moon with transparent background as a single panel over an equirectangular image of Tatooine

You can also add a simple equirectangular plane to provide a grounding element to composite content on top or in front of.

A simple ground plane

Hotspots

Once you’ve uploaded your content you can add interactivity by creating rectilinear hotspots that trigger an action. Because we know very.gd is used for different types of content with different interactivity we have created different types of hotspots that can be displayed.

Each scene can contain hotspots that are optionally shown or hidden. If you’d like for your hotspots to be seen you can also specify whether the hotspot is displayed as the rectangle that you’ve drawn, or a point that will be centered within that rectangular area.

Happy Creating!

We’re excited for this new release of ours which will dramatically increase what can be created with very.gd and hope that it supports your VR creation workflow as much as it has ours. If you have feature requests, comments, questions, or anything else please let us know!

verygd

very.gd provides the fastest, easiest way to create and share 360° video and VR content for web, mobile, and VR.

very.gd team

Written by

We make it easy to prototype and experiment in VR / 360°.

verygd

verygd

very.gd provides the fastest, easiest way to create and share 360° video and VR content for web, mobile, and VR.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade