Skybox

Skyboxes give a game a surrounding and grounding. Be it a race car, ego-shooter or space simulation, the skybox makes the game feel more realistic. At its most primitive version it is simply 6 images projected onto the sides of an imaginary cube way out at infinity. Here we show you how to easily create simple skyboxes. But skyboxes can be more complex also. They can be dome shaped, they can simulate dusks and dawns with rising sun. Also examples for how to create those are given.

Creating a simple Skybox

First you will need to create the six images for each cube face. There are several ways to accomplish this. However it depends on what you want in your scene. So you could could take the some digital pictures and generate the skybox from them. Another possibility would be use a skybox someone else created (public domain). Naturally, you have the most freedom if you create everything from scratch. And that’s what we are going to do. In the following our tool of choice will be Terragen 2 (non-commercial version).

Creating Skybox Images with Terragen 2

My focus is on bringing you quick results rather than in depth information. If you have the desire to dig in deeper, please check out the tutorials i have based my guide on.

Once you have started Terragen, you see the default scene, consisting of a flat planet with an atmosphere. First thing you want to do is to change this flat space into a more interesting landscape.

Adding Terrain

You use heightfields and procedurals to generate Terrain in Terragen 2.

Using Heightfields

Select the Heightfield generate node in the Terrain section

Hit the Generate Now button and wait for the process to complete. The 3D preview now shows the new terrain.
Enlarge the navigation panel in the top right corner of the Terragen window
It will change to the full navigation control
You can navigate through the scene using these controls. Play around with the parameters to get a feeling of how they affect the terrain when you hit the Generate Now button.
Then go on and find a position you like e.g. on top of a mountain or hill.
Locate the Copy To Current Camera button in the toolbar below the 3D preview section. By clicking it you will change the render camera to your current view. Do so.

Hit the Open Render View (R) button in the top toolbar and press the Render button.

Wait for the Renderer to complete and enjoy your first rendered view. Now use the navigation controls to get to a position very high above ground so you can see the horizon. You will notice that there is still a lot of flat surface. This is because of the limitations of Heightfields. We may want to change this now using Procedurals.

Mountains generated by heightfield

Using Procedurals

First disable the Heightfield shader by selecting it and unchecking the Enable checkbox.
The surface will be flat again now
Click Add Terrain and select Power Fractal
A new Power Fractal node will appear in the list. You may want to give it a good name an rename it to „mountains“
Notice how the complete terrain has changed. mountains everywhere!
Now select a good view point spot again using the navigation controls. Choose a spot which has a good combination of altitudes, like a valley surrounded by mountains.
Then again click the Copy to Current Camera button in the toolbar below the 3D preview
Hit the Open Render View (R) button in the top toolbar and press the Render button.

Mountains generated by Power Fractal procedural

Texturing using Shaders

Now we will add better colors and textures using Shaders.

Modifying the mountain ground color

Open the Shaders layout
Select the Base colors node in the list and have a look at the parameters presented when clicking the Colour tab
Choose a brown color for the high colour and adjust the brightness by adjusting the slider. You can leave the low colour for now.

Adding a grass like texture

Click the Add Layer button above the node list and select Surface Layer from the drop-down menu. A new shader node appears in the list.
Now go to the Colour Tab of the newly added shader and use the color picker to select a green/yellow tone color.
You may want to rename it to "Grass" as we are going to use this Shader to add Grass to the world.

Go to the Altitude constraints tab and turn the Limit maximum altitude checkbox
Set the Maximum altitude to something between 400-500
Change the Max altitude fuzzy zone to a value around 100 (sharpness of cut-off at the altitude constraint)

Go to the Slope constraints tab and turn the Limit maximum slope checkbox
Set the Maximum slope angle to something around 30
Change the Max slope fuzzy zone to a value around 15

You may want to spend some time adjusting all parameters mentioned above to shape everything the way you like it to be. Render to see the effects of your adjustments.

Controlling the appearance of the grass layer

Go to the Coverage and breakup tab. Coverage controls the amount of the underlying surfaces that will be covered by this layer. Fractal breakup controls layer distribution.
Set Coverage to 0.7 and Fractal breakup to 1 to get a good result, but adjust it as you wish.

As you see it Terragen2 is a mighty tool, but this is just the beginning. You could go on and add snowy mountains, fast valleys and water and then integrate atmospherics and lightning. We leave it for now and start building our skybox.

Rendered image with water, grass and snow textures, an atmosphere and sunlight

Camera Setup

Now you have to decide which point of view you want to present in your projects skybox. Go on an find a good spot using the navigation controls.

Click the Renders layout button at the top of the screen.
Select /Full Render and then click the add button. Select Create new camera in the drop-down menu. Create four more cameras.

Switch to the Cameras layout Here you will see a list of your new cameras. And the default Render Camera. We will use these six cameras to render all views we need for the skybox. But first we have to configure them:

Select the first camera and rename it to North. The three position fields describe your actual position and will differ from mine.
Set the three values of the Rotation field to 0
Select the Perspective radio button and then the Use horizontal fov radio button. Change the value to 90 degree.

Edit the other cameras as shown in the table below:

	Camera01	Camera02	Camera03	Camera04	Camera05	Camera06
Name	North	East	South	West	Up	Down
Position	a/b/c	a/b/c	a/b/c	a/b/c	a/b/c	a/b/c
Rotation	0/0/0	0/90/0	0/180/0	0/270/0	90/0/0	270/0/0
Perspective	Selected	Selected	Selected	Selected	Selected	Selected
Horizontal FOV	Selected	Selected	Selected	Selected	Selected	Selected
Value	90	90	90	90	90	90

Note: a/b/c is a placeholder for your position values. Once you have found a camera positon you want to use for the skybox you can just copy the same values to all six cameras.

Go back to to the Renderers layout

Select the Quick Render and assign on of the six cameras to it using the add in the Renderers details view.
Click Render Image to see a low quality render of it
You might want to repeat this to check all cameras

Render/Quality Settings

There are two pre-configured Renderers in Terragen 2. The Full Render is intended to generate high-quality output. Therefore you will just use it when you want to test how your project really will look like, or you want to render and export. It depends on your settings but expect this renderer to take some time. The Quick Render is intended to give you a quick impression and therefore the render time is short. Of course you can configure both of them matching your needs, or create additional Renderers.

Now we are going to configure the Full Render and then create all images for the skybox.

Go to the Renderers layout

Select the Full Render and change Image Width and Image height to 512
Choose a camera using the add button and assign it to the Renderer
In the Quality tab set the Detail parameter to 1
Now select the first camera from the camera drop-down list and press the Render Image button.
Wait for the Renderer to finish
Save the image to your disk by clicking the Save button. As we are going to use with XNA you might want to save it as Windows Bitmap (.bmp)
Then render the other cameras

Note on using GI in your scene:
You might want to turn off GI (Global Illumination) by setting GI relative detail, GI sample quality and GI blur radius to zero.
This is because GI can lead to visible edges in your skybox. You may have to adjust your lightning configuration to lighten up you scene.

Once you have rendered all cameras, you might want to align the images in your favorite image editing program, and check how they all fit together.

Skybox images aligned by their position in the skybox

XNA integration

Creating a skybox cube map

One way to get your skybox into your XNA project is to generate a cube map file which you can easily load later on. A quick and easy way to archive this is by using a tool called CubeMapGen from ATI.

Skybox cube map creation with CubeMapGen

In CupeMapGen:

Select D3D Cube as Export Image Layout
Select the Skybox checkbox in the Display section
Now you can apply your skybox images to the cube faces, by selecting the cube face from the drop-down menu and then loading the corresponding image clicking the Load CubeMap Face button.

Based on the alignment of the skybox images created earlier, the axis mapping is as follows:

East	West	Up	Down	North	South
X+	X-	Y+	Y-	Z+	Z-

Save the cube map as DDS file by clicking Save CubeMap (.dds) button when done.

Integrating a skybox cube map in XNA

Tutorial

Skydome

Same concept as a skybox but instead of a cube, a sphere is used. Can be used to simulate atmospherics and sun movement (dawn, dusk).
See Tutorials on how to create these.

Links

Terragen

http://www.planetside.co.uk/wiki/index.php/Terragen_2_Tutorials#360.C2.BA_Panoramas_.2F_SkyBoxes
http://www.planetside.co.uk/wiki/index.php/Main_Page

Skybox

http://en.wikipedia.org/wiki/Skybox_(video_games)
http://wiki.delphigl.com/index.php/Skybox

Skybox Tutorials

http://wiki.delphigl.com/index.php/Skybox
http://www.stromcode.com/2008/03/30/building-an-xna-skybox-with-blender/
http://rbwhitaker.wikidot.com/skyboxes-1
http://wiki.delphigl.com/index.php/Tutorial_Skyboxen

Skyboxes

Ready and free to use skyboxes (public domain):
http://rbwhitaker.wikidot.com/texture-library

Skydome

http://wiki.delphigl.com/index.php/Skydome

Skydome Tutorials

http://www.xnamag.de/article.php?aid=40
http://www.flipcode.com/archives/Sky_Domes.shtml
http://en.wikibooks.org/wiki/Blender_3D:_Noob_to_Pro/Build_a_skybox

Other

http://en.wikipedia.org/wiki/Cube_mapping

References

http://www.planetside.co.uk/docs/tg2/first-scene.pdf
http://www.outpt.co.uk/how-to-create-a-terragen-2-skybox/

Authors

arie

Game Creation with XNA/3D Development/Skybox

Contents

Skybox

Creating a simple Skybox

Creating Skybox Images with Terragen 2

Adding Terrain

Using Heightfields

Using Procedurals

Texturing using Shaders

Modifying the mountain ground color

Adding a grass like texture

Controlling the appearance of the grass layer

Camera Setup

Render/Quality Settings

XNA integration

Creating a skybox cube map

Integrating a skybox cube map in XNA

Skydome

Links

Terragen

Skybox

Skybox Tutorials

Skyboxes

Skydome

Skydome Tutorials

Other

References

Authors