Unity - Skyboxes

From NoskeWiki
Jump to navigation Jump to search


NOTE: This page is a daughter page of: Unity

A skybox is a method often used in computer games to make a level look bigger than it really is. When a skybox is used, the scene is enclosed in a cube; and the sky, distant mountains, distant buildings, and other unreachable objects are projected onto the cube's six square faces using a technique called cube mapping, thus creating the illusion of distant three-dimensional surroundings.

Skybox setup

Skyboxes in Unity

The Unity game engine allows you to use a skybox, by adding a "Skybox component" to the scene and/or individual camera objects. Within this skybox component you must specify a "Skybox material" - a special form of material which contains six square textures (six images imported into Unity) in the following order:

  • Front ...... (+Z)
  • Back ...... (-Z)
  • Left ........ (+X)
  • Right ..... (-X)
  • Up ......... (+Y)
  • Down ... (-Y)

Typically each of these images is 1024x1024 or 512x512... although in many games the "down" image will never get seen, so you may decide to leave this blank or make it 1x1 single-colored image to reduce file size. Your six skybox textures don't have to all be the same resolution. In any scene on land or water (which is most scenes!), a day-time (blue sky, clouds and sun) or night-time (stars, moons and optional clouds) sky will occupy just over half your box (lets say -3 degrees below horizontal) - hence in many skyboxes the bottom half of front, back, left and right images is often just a shade of blue or green (which should compress nicely).

Adding a Skybox in Unity

To add a Skybox in Unity, the easiest method is to use one of Unity's pre-existing skyboxes and add it to the scene:

  • Start a new Unity project, and make sure you tick "Skyboxes.unityPackage".
  • In the newly created project, expand "Standard Assets > Skyboxes" in the Project window so you can see the skyboxes there.
  • Choose Edit>Render Settings from the menu bar.
  • Drag "Sunny 1" (or any other skybox material) from the Project Window into the custom skybox field. This skybox should now appear in both the editor and game window and is the "default skybox" for every camera in the scene.

If you don't want the skybox appearing in the editor window, or wish different cameras to render different skyboxes, another option in Unity is to add a "skybox component" to individual cameras. To add a skybox to a camera:

  • Select the desired camera in the Hierarchy window ("Main Camera" is the default one).
  • Choose "Component > Rendering > Skybox" in the menubar.
  • In the Inspector window, click the little circle under the newly created "skybox" component, or drag your desired skybox material from the Project Window into the custom skybox field. When you click "Play", you should now see this skybox appear for this camera, but it won't appear in the editor window. You can dynamically change the X and Y rotation of the main camera to see how the entire skybox looks as you look around the (otherwise empty) scene.

Applying your own Skybox Textures

If you are unhappy with the provided skyboxes, you have three main options:

  • (1) try searching online to find a skybox you like,
  • (2) take an existing skybox, and modify the images in a 2D program, or
  • (3) try to use a 3D program to generate a custom skybox by creating your own 3D scene and outputting to six images.

Note on each of these are below. Once you've got your your six images (I recommend using a tif or png) create a new folder in your Unity Assets folder: YourUnityProject/Assets/Materials/MySkybox/ and drag in your six new images. When Unity imports these as textures select each texture in the Project window and apply the following changes:

  • Change the "Wrap Mode" to "Clamp" (if you don't do this you'll see nasty edge lines along each corner).
  • Change the "Texture Type" (under "Texture Importer") to Advanced.
  • Untick "Generate Mip Maps" - since you always want these images appearing at full size. "Generate Cubemap" should be set to none (if not already) and all other options left as default (which is off).

In the Project window, you can now go "Create > Material". With this new material selected, change its "Shader" to "RenderFx>Skybox" and then drag each of your textures into the appropriate position (front,back,left,right,up,down).... obviously it helps if you've named each of your skybox images appropriately! Finally you should rename this material "skybox" and put it in the same folder as your images. As outlined in the "Adding a Skybox in Unity" section... you can now apply this skybox to the scene via Edit > Render settings on the menubar.

For official instructions and pictures see: Unity Manual - How do I make a Skybox?.

Find Free Skyboxes Online

Finding good (free) skyboxes online can be tricky - and they might not always be in the format you want, but here are a few sites to get you started:

  • Hazel Whorley - Textures - contains about 28 great textures, eating jungles, storms, deserts, canyons, and different colored skies which you can view and download as a rare containing 1024x1024 tiles... for non-commercial use only.
  • 3DElyvision.com - 20 beautiful skyboxes, featuring day, night, antarctica, desert, city and a couple of futuristic scenes. Also has a tutorial showing how to generate skyboxes using Bryce and Terragan at the bottom.
  • 18 Free Skyboxes - UnityPackage - Greg Bassett has made 18 nice skyboxes (free for commercial or non-commercial use) ready to include. These are actually the same skyboxes as the one at "3DElyvision", so not sure who copied who?!
  • Roel's skyboxes - 4 nice day and dawn skyboxes downloadable as .rare with each tile 1024x1024

Modifying Skyboxes in a 2D Program

If you want to make minor changes to a skyboxes, you can probably get away with opening the six square images (front,back,left,right,up,back) in a program like Adobe Photoshop (save a copy first)... where you can apply the same color adjustments to each and/or draw extra objects. You will, however, probably want to avoid the edges and corners, since each edges connects to another image, and each corner connects with three other images. If you desperately want to edit edges, one option is to paste all six sides into a single photoshop image, such that right, front, left, back (in that order) are in a single row, and up and down are above and below front respectively. You can then draw over the connected edges, or apply a single transform, then break the image up again into its original pieces. Adobe Fireworks is probably a better program for this, because it lets you use the "Slice" tool to export certain regions of the file, and you could potentially use the "Symbol" tool to project rotated versions of up and down to check that they align with the other images to your satisfaction. Anther tricky thing about skyboxes is that, because they are boxes, the 2D image gets "stretched" near each edge, thus making it hard to for even a talented artist to draw 3D objects in the background and have them look the way he wants. Skyboxes are not easy!

Using a 3D Program to Generate a SkyBox

To create a truly realistic skybox (with shadows etc), what you need is some kind of 3D program! There are several programs people have written which generate clouds etc (eg: Sky Panorama generator - windows only), but if you want to add to this your own buildings, or landscapes etc, you'll need a full blown 3D animation program! With such a program you can then setup all these objects, cast shadows, and finally you'll need to take a square image facing each direction - front =(0,0,0), back=(0,180,0), left=(0,90,0), right=(0,270,0), up=(90,0,0), down=(-90,0,0) - with the camera centered on a single point. For each image you'll need the camera's field of view to be 90 degrees, so that all edges align. You'll also have to be careful with lighting - and especially with "specular". If you have everything lit evenly you should be safe - or you might add a single light at the same position of the camera - otherwise the lighting of various objects may be unequal on two sides of your edges.

What program you use is personal preference. My preferred 3D program is "Cinema 4D". I've written instructions on generating a Skybox using Cinema 4D here:

A program that looks particularly powerful for generating landscapes is "Bryce" - a 3D modeling, rendering and animation program specializing in fractal landscapes (see video). If you want a totally free program, the most powerful and well known free 3D animation program is "Blender".

Generating a Skybox From a Unity Scence

One interesting idea is to use Unity to generate a skybox for itself ! In other words, you could setup a scene, with distant 3D objects and mountains (and even a skybox)... then run a script to generate the six images for a new skybox (including all the objects you've rendered). Once these images are turned into a skybox, you could remove (or turn off) all your distant objects - since it's probably expensive to render these - and they already appear in your skybox. Ethan Vosburgh has created a great little Unity Script / plugin called "SkyBoxGenerator.js" to do just this - see UnifyCommunity - Skybox Generator. Here's a similar one by Renaldas Zioma: New Skybox Generator.