Image: Google Cardboard Design Lab

How to Design VR Skyboxes

Making skyboxes in Unity3D from a variety of different materials.

Getting set up

First off, download Unity 3D if you haven’t done so already. It’s free. (I’m using Unity 5.3, as of this writing.) I’d recommend developing for Cardboard if you’re still new to Unity, simply for ease of use and cost effectiveness. You just need a phone and a Cardboard viewer (about $15 on Amazon or Google’s website.) I won’t get into the details here about how to setup your Unity workspace for Cardboard or how to build out and run your demos — there are a lot of tutorials that explain it pretty well. Just make sure you download the appropriate build support components in the Unity download assistant (iOS, Android, or PC if you’re building to Oculus.) If you’re developing for another platform — like Rift, Gear VR, Vive, Daydream — this discussion applicable to all those too.

Making a skybox from a cylindrical panorama

In this first example, we’ll use a single cylindrical panorama image to make the skybox. It’s a good place to start tinkering with skyboxes if it’s your first time around. Remember though, the cylindrical panos are missing the top and bottom of the image (it’s 360˙ on the horizontal axis only). So this method is best for cases where you don’t need an extremely detailed skybox and just want a background scene that focuses mainly on a horizontal view.

Photosphere image by Hugo Barra
Settings for the Texture converted to Lat-Long*
Creating a new Material
Assigning your Texture to the Material.
Scene Lighting settings with skybox Material assigned
Photosphere skybox in Unity (button and reticle were added separately).

Making a skybox from a spherical panorama

Starting with a 360 x 180 equirectangular panorama to make a skybox is the same method as above, but it’ll yield a full sphere skybox. You can find images online or take your own, if you have a 360˙ camera like the Theta S or Gear 360.

Theta S 360˙ image by Andrew Hazelden
Photosphere skybox in Unity
Play mode in Unity.

Making a skybox from cube mapped images

In this example, we’ll use images that were captured as six sides of a cube and render them with Unity onto a skybox. This is a great method if you have access to these type of photos or have a rig to capture them. The level of detail is exceptional, covering the full 360 x 180 sphere.

Six 3D cube face images.
Texture settings. Shown: back image — remember to do this for each image.*
6-sided skybox Material
Scene Lighting settings with skybox Material assigned
Cube mapped photo skybox in Unity
View in Unity play mode

Making a skybox from rendered artwork

In this case, a scene is designed in 3D software and 6-sided cube renderings are captured with cameras mounted in the scene — this can be done with Cinema 4D, Blender, Maya, etc. Then, the skybox is assembled in Unity using the cube mapped method. If you’ve already obtained 6-sided rendered artwork from elsewhere you can skip to the “In Unity” section below.

Six 3D cube images.
360˙ rendered artwork skybox in Unity
Live view mode in Unity. (There’s a couple of places where I have some issues with seams.)

Making solid color backgrounds without an image

This isn’t a traditional skybox, but since we’re talking about backdrops and environmental lighting I thought it deserved mention. Using just color, you can create the feeling of dimension and shading, without a complicated background. You have a couple of options for making solid backgrounds, depending on the rendering effect you want.

Option A: Single color background

1). In the Lighting panel, set the skybox Material to None.

Skybox: no material
Camera set to Solid Color and white.
White colored background in Unity view. (Shown with a curved menu of cars from a previous project.)

Option B: Shaded background with a custom mesh

For a colored background with dimension and shading, you can use a mesh model that wraps around your scene. The model asset is usually an fbx file constructed in a 3D application and looks a bit like a large sphere, or in some cases a smashed sphere like the one I’m using here. The shape of the mesh confers a unique rendered look using a shader.

Adding a Mesh Filter
Material settings
MenuBg with Mesh Filter, Renderer, and Collider.
Rendered background mesh wraps around the scene. Source: Unity Oculus VR Sample Project (Maze dem0)



Product Designer @yahoo ex-@facebook ex-@AOLAlpha. Ex-lab geek.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store