Sep 12, 2016
How to Design VR Skyboxes
Making skyboxes in Unity3D from a variety of different materials.
In my previous post, Making Sense of Skyboxes in VR Design, we went through some of the basics of skyboxes. I’d recommend checking it out for some background on the physics of skyboxes and types of 360˙ images and methods of capturing them. Now, let’s talk about how to make skyboxes in VR using Unity 3D.
In VR design, a skybox is an environment lighting effect that’s rendered around the periphery of the scene. So imagine sitting inside a sphere, projecting an image onto the inside of it, and looking around. Really, that’s the gist of it. Implementing a skybox in Unity is just a matter of creating a skybox material from an image and then adding it to the scene via the Lighting menu. We’ll get into the details in a moment.
So if you’re ready, let’s jump in and make some skyboxes!
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.
Once you have yourself set up in Unity and your platform of choice, I’d recommend creating folders to keep your assets in order.
In Projects > Assets, create a folder for each:
- Textures (images, textures, sprites)
- Models (3D assets)
- Materials (shader including skyboxes)
There are usually additional folders for Scripts, Animations, Fonts, Builds, etc., but we won’t need use those here.
Let’s get started!
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.
1). First, you’ll need to find or create a stereoscopic panorama image. For the purposes of this tutorial, you can grab one from an online source like the Google Photo Sphere community or on Flickr. You can also make your own using the Cardboard Camera app for iOS or Android.
2). Image settings:
Import the image into Unity as an Asset and save it into your Textures folder. Highlight the Texture and in the Inspector change the Texture Type to Advanced. Set the Mapping to Latitude-Longitude Layout (cylindrical). Hit Apply.
*Update: Step 2 has changed in Unity 5.5. There is no longer an “Advanced setting for Texture type. Instead use Texture Type: “Default” and Texture Shape: “Cube”.
3). Create a Material:
(Assets > Create > Material). Then in the Inspector change its Shader to Skybox > Cubemap. Then give the new Material a name (I usually name it the same as my Texture image.)
4). Assign your Texture to the Material:
Highlight the Material in the Project window, go to the Inspector, and select or drop your Texture image into the Cubemap (HDR) box.
5). Assign your Material to the Lightbox:
Go to the Inspector > Lighting > Scene, then drag the Material to the Skybox property.
6). Here’s what you’ll see in the Unity workspace:
I have the Scene view on the top and the Game view on the bottom (in stereoscopic view, since it’s set up for Cardboard).
7). Hit the Play mode in Unity and you’ll be able to mouse around the scene. You can also build it out and watch it on your phone using a Cardboard device.
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.
1). Follow the same steps as above for the cylindrical pano to import the Texture, create a Material, then map it to the skybox.
2). Here’s your result:
Notice how the top and bottom of the image look smooth.
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.
1). A series of photos are taken at 90˙angles from a single origin:
Front: 0,0,0
Back: 180, 0, 0
Left: 270, 0,0
Right: 90, 0, 0
Top: 0, 90, 0
Bottom: 0, -90, 0
2). Import each of the photos as Assets:
Save them in the Textures folder (be sure each photo is labeled up, down, left, right, front, and back).
3). Texture settings:
For each image, change the Texture type to Advanced, uncheck Generate Mip Maps, and change Wrap mode to Clamp (this stitches the edges properly). (*See note in first tutorial about changes in Unity 5.5 and above.)
4). Create a skybox Material:
(Assets > Create > Material) and change its Shader to Skybox, 6-sided and name the Material. Drag or assign each of your six images into the proper (HDR) boxes according to orientation.
5). Assign your Material to the Lightbox:
Go to the Inspector > Lighting > Scene, then drag the Material to the Skybox property.
6). Here’s your result:
Every angle looks perfect without retouching. Full 360 x 180 views.
If you notice issues with seams, you can take the offending cube map images into Photoshop to edit until you feel it looks correct.
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.
Creating the landscape:
The steps below are a brief review of how to create and capture a landscape in Cinema 4D which are detailed in this video.
1). First, create a landscape:
Briefly, in your 3D modeling software of choice, you’ll construct a scene in a disc/ring shape along a horizontal plane — this ensures that you have a full 360˙ view of your artwork. You can style the image as desired or add in other 3D elements, just keep the distances in mind and stick to including only horizon elements that are not interactable.
2). Next, capture the images:
Position a camera in the center of the scene, slightly raised on the y-axis so you can see below you. Duplicate it so there are six cameras, one in each of the following orientations, then render out each of the images. Make sure to name them accordingly.
Front: 0,0,0
Back: 180, 0, 0
Left: 270, 0,0
Right: 90, 0, 0
Top: 0, 90, 0
Bottom: 0, -90, 0
Assemble the skybox in Unity:
These steps are similar to a 6-sided cube skybox constructed from an image that we discussed previously.
1). Import the six images into Unity as Textures. For each image, change the Wrap mode to Clamp to smooth out the stitching edges.
2). Create a new Material and change its Shader to Skybox, 6-sided. Drag or assign each of your six images into the proper box according to orientation.
3). Assign the Material to the Lightbox. Go to the Inspector > Lighting > Scene, then drag the Material to the Skybox property.
4). Here’s your result:
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.
2). Then select the Main Camera from the Hierarchy. Change Clear Flags to Solid Color and for the Background, select an RGB color of your liking. Presto! You have a solid colored background.
3). Here’s the result:
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.
In this sample, I’m using the background asset model called MenuBg with the mesh MenuBg001 from the Unity Oculus VR Samples Project. (Download the project from the asset store and open it in Unity. You can save the assets you need from there.) You could also create your own model in a 3D rendering program.
1). Import the fbx asset MenuBg (MenuBg + MenuBg001) into your Model folder.
2). Setup your Background:
Create an empty GameObject in your scene (Hierarchy > Create > Create Empty) and set its position to 0,0,0. Change the name to Background. If you don’t have anything else in your scene yet, you can add a 3D Object like a cube or sphere at position 0,0,0 just to use for reference.
3). Setup your Mesh:
Create an empty GameObject as a child of the Background and name it MenuBg.
4). Add a Mesh Filter to the MenuBg object:
(Inspector > Add Component > Mesh Filter) and assign the fbx file mesh MenuBg001.
5). You’ll also need a Material to render the Shader:
In your Project panel, create a new Material and change the Shader to Standard and leave the Rendering Mode Opaque. The standard color will be white, but if you want to change the color or shade you can adjust the Albedo and Specular RGB colors. I called my new Material MenuBg2.
6). Now add a Mesh Renderer to the MenuBg object:
(Add Component > Mesh Renderer) and assign the Material you just created to the Element field. Also, add in a Mesh Collider and set the mesh to MenuBg001.
7). Here’s the result:
Well, there you go — I hope you found these tutorials and reviews helpful. I felt like grouping these ideas together and having these resources in one place helped me quite a bit, so I thought I’d share them. I hope you’ll give some of these a shot as you implement skyboxes in your next project. There’s pros and cons to each methodology depending on your bandwidth, the look and feel of the experience you want to create, and the resources that you have access to.
I look forward to seeing what you make!
