Gamasutra: The Art & Business of Making Gamesspacer
Creating Backgrounds for 3D Games
View All     RSS
August 21, 2017
arrowPress Releases
August 21, 2017
Games Press
View All     RSS

If you enjoy reading this site, you might also want to check out these UBM Tech sites:

Creating Backgrounds for 3D Games
by Gavin Bell [Art]

October 23, 1998 Article Start Page 1 of 2 Next

Creating backgrounds for 2D games is easy. You create a bunch of bitmaps in your favorite paint program and you're done. Creating backgrounds for 3D games can be much more difficult if you don't know what you are doing. The earliest games (both 2D and 3D) were set in deep space, because drawing a few stars on a completely black background is fast, easy, and requires no artistic talent. Game players today demand more interesting graphics.

Some game developers solve the 3D background problem by sweeping it under the rug-using one of several techniques to hide the background. For example, the game's scenery completely fills the screen in top-view games like SimCity or Command and Conquer. Indoor games like Descent also fill the entire screen with game scenery. Fog is sometimes used to make distant object dissolve into a background that is just a single fog color. These techniques make the game feel either two-dimensional or claustrophobic.

Driving games can cheat and use a single bitmap that is scrolled left/right/up/down as the player drives around the track. This works pretty well, because the players are limited to driving on a pre-determined path and they never look straight up at the sky.

However, if you want to create a 3D game that allows the player unrestricted movement and makes them feel like they are in an unlimited 3D world, you need to learn to create 3D backgrounds, otherwise known as skyboxes. The rest of this article explains how to create realistic skybox backgrounds for your 3D games.

Figure 1

A skybox is a cube made of six images that surrounds the game player. Figure 1 shows a slightly exploded view from inside a skybox. Skyboxes are also known as environment maps. The player stands in the middle of the box, so no matter which way they turn they see some part of the box. The game engine figures out which parts of the skybox are visible and displays the proper pixels as the player moves. The player is never aware they are inside a big cube; see Figure 2 for three snapshots of what the player when turning inside the skybox of Figure 1.

Figure 2


Skyboxes are drawn as if they are infinitely large--no matter how far the player moves, they are still surrounded by the box. Only objects that the player can never reach will look correct, like clouds in the sky or distant mountains. If the player's movement is limited to just looking around (rotating their head) from one spot, then a skybox can be used even for nearby scenery.

Skyboxes look great, if they are created properly. They create the illusion the player is in a large, seamless world. But the illusion is quickly shattered if the borders between the skybox images don't match exactly, or if you create images with the wrong perspective. This article will give you a good understanding of skyboxes and related technologies, and will help you avoid time-wasting mistakes by describing several techniques for creating skyboxes.

Related Technologies

Skyboxes go by several other names, and have many other uses besides game backgrounds. The technical term for a skybox is cubic environment map or cubic reflection map. They were invented over 20 years ago as a fast method for calculating reflections when rendering objects, and are frequently used by high-quality rendering software such as 3DStudio MAXand RenderMan.

You may be wondering how reflections relate to game backgrounds. You can think of reflections as showing you what an object can "see" in any direction. This is the same problem we need to solve to draw the background for a 3D game-- the game engine needs to know what the player can see in any direction.

Many high-quality renderers support spherical environment maps. They are a lot like skyboxes, but are a single image mapped onto a sphere instead of six images mapped onto a cube. Figures 3, 4 and 5 show a simple background consisting of a regular on the ground and a huge dome in the sky. Figure 3 is what the game player sees. Figure 4 is the cubic projection, unwrapped and laid flat, and Figure 5 is the spherical projection. Notice that straight lines in the player's view or cubic map turn into curved lines in the spherical map, and vice versa. Spherical maps can be easier to work with because they are stored as a single image. However, interactive graphics hardware and software is designed to display flat surfaces, so cubic environment maps can be drawn quicker than spherical maps. The massive distortion of pixels near the north and south poles of a spherical map (see Figure 5) also makes them difficult to create.

Figure 3



Figure 4


Figure 5


Skyboxes are also closely related to immersive imaging technologies like Apple's QuickTimeVR™ or Live Picture's panorama technology. Immersive imaging products concentrate on the problem of stitching together photographs to create a 3D environment, and they map the final image to a cylinder or partial sphere instead of a cube. Often they limit the view so you cannot look straight up or straight down, although creation of full panoramas using special camera lenses or mirrors is becoming more common. Zork Nemesis™, Zork Grand Inquisitor ™ and The Journeyman Project 3™ are three games that have used panoramic technologies effectively. However, the restrictions on viewer movement, as well as the difficulty of incorporating fast cylindrical or spherical rendering into polygon-based game engines, limits their use in most games.

Now that you have some background on skyboxes and related technologies, we'll move on to the nuts and bolts of creating them.

Rendering Skyboxes

Your existing 3D modeling software is a great source of skyboxes. You can use weather, mountain, or star-field generation plugins to create most of the scenery, along with the modeling and texturing tools with which you are already familiar.

To create a skybox, render six images of the scene from a single point in space. Set the camera to create square images with a vertical and horizontal field-of-view of 90°. Then render six views, each 90° apart: forward, left, back, right, up and down.

The resulting images should fit together seamlessly when placed next to each other in Photoshop or viewed with the game engine. If they don't, you might be able to swap and rotate some of the six images to get the arrangement required by your game engine, or you might have to change the camera parameters and re-render.

Each of the six square images should be rendered at the same resolution-- for example, 256x256 pixels. Limitations of the game engine and/or hardware texture mapping will determine the maximum skybox size. Higher resolution skyboxes will look better, up to a certain point that is determined by the resolution of the screen and the game camera's field-of-view*. Popular first-person shooter games like Quake run with a fixed 90° field-of-view, which makes the calculation easy--if the resolution of each of the six skybox images is as large as the largest dimension of the screen (e.g. 640x640 if the game is running on a 640x480 screen), then the skybox pixels will not be magnified as they're projected onto the screen. If your game supports larger screen resolutions or a smaller (zoomed-in) field-of-view, you will need higher-resolution skyboxes to avoid BBS: the dreaded Blocky Background Syndrome.

Of course, larger skybox images will use more texture memory, which might slow the frame rate. Happily, AGP graphics boards (which allow regular system memory to be used as texture memory) and larger on-board texture memories are the wave of the future.

If you have the luxury of running with bilinear interpolated texturing you can use a lower-resolution skybox and get a blurry background instead of a blocky background. Clouds and mountains usually look fuzzy in the real world, so turn on bilinear filtering for your backgrounds if you can.

*Mathematically, the best skybox resolution is:
maxScreenResolution * 1/tan(fieldOfView/2)
If your calculator doesn't have a tangent button, here are some common field-of-view values :

90° : 1/tan(90/2) = 1.0
60° : 1/tan(60/2) » 1.7
45° : 1/tan(45/2) » 2.4

The next two sections give step-by-step instructions on creating skyboxes using two popular 3D packages-3DStudio MAX™ and Bryce™.

3DStudio MAX R2 environment maps

3DStudio MAX R2 includes built-in support for cubic environment maps, so creating skyboxes with 3DStudio is particularly convenient. To create a skybox once you have created the 3DStudio scene:

1. Create a small box (or sphere or any other shape). This represents the game player, and will be the center of the skybox.

2. Place the box at the center of your scene, where the player will be standing.

3. Edit the box's material (open the Material Editor). Create a standard material with zero shininess/shininess strength, zero self-illumination, and zero opacity. Because the box is completely transparent, it will not show up when you render the scene (which is what we want, since it is being used only to create a skybox).

Figure 6

1. Assign a reflection map to the box's material. Open the Maps section of the material editor, check the "Reflection" box, and press the "None" button. Then select a new "Reflect/Refract" map from the Material/Map Browser.

2. The material editor will change, allowing you to choose Reflect/Refract parameters. Select the following (See Figure 6):
Source: From File
Size: enter resolution of skybox images, e.g. 256
Render Cubic Map Files To File: enter name of skybox, e.g. "gamesky.tga"
Press 'Pick Object and Render Maps'
Pick the box in the main MAX window

3. 3DStudio will then create the six images of the skybox, and save them to disk.

The next step depends on your game engine; you may need to convert the images into another format, resize them, rename them, etc. 3DStudio MAX uses a right-handed coordinate system with the Z axis 'up', and uses the following conventions for skybox images:

Table 1: 3DStudio MAX skybox image conventions
View direction Filename suffix
Forward (+Y direction) _BK.tga
Left (-X direction) _LF.tga
Back (-Y direction) _FR.tga
Right (+X direction) _RT.tga
Up (+Z direction) _UP.tga
Down (-Z direction) _DN.tga


See the section "Reflect/Refract Map" in the 3DStudio MAX R2 reference manual for more information.

Article Start Page 1 of 2 Next

Related Jobs

Phosphor Games Studio
Phosphor Games Studio — Chicago, Illinois, United States

All Positions
Skydance Interactive
Skydance Interactive — Marina Del Rey, California, United States

Art Director
Skydance Interactive
Skydance Interactive — Marina Del Rey, California, United States

UI/UX Artist
Skydance Interactive
Skydance Interactive — Marina Del Rey, California, United States

VFX Artist

Loading Comments

loader image