In this tutorial, we’re going to cover a very interesting and useful topic that you can use in many games: skyboxes. A skybox is simply a cube that is drawn around everything in a scene and textured with some sort of sky-type background in just the right way that it looks as though the player is surrounded by a sky, mountains, and other distant scenery. Skyboxes can really add a lot to your game, especially if it is outdoors or in space. Skyboxes are a fairly advanced concept, but you’ll see that XNA and DirectX have made it pretty easy to do. A couple of examples of a game with a skybox in it are shown below:
In addition to adding cool scenery to a game, skyboxes are also a critical component of environment mapping, which will allow us to do reflection and refraction later on.
In this tutorial, we are going to go through the process of creating a skybox shader.
I’ve broken it up into three major parts.
The first part, which we will discuss in this section, is on how to go about acquiring skybox textures and putting them in our game.
In the second part we will create our own skybox shader.
In the third part, we will create and use a Skybox class, which will handle all of our work for dealing with skyboxes.
A skybox texture is a little more complicated than a regular texture. A skybox texture is typically composed of six separate images, one along the +x axis, the -x axis, the +y axis, the -y axis, the +z axis, and the -z axis. So basically, one in each of the six major directions along the surface of a cube. It can take some work to generate your own because the images need to be seamless, and the angles have to be just perfect, or it will look funny. So right now, we will look at where you can get some skybox textures for free, and then after that, we will spend a few minutes talking about how you might go about generating your own.
A Google image search for “skybox” will usually give you all sorts of good skyboxes, and that might be the best place to start. When you are looking for a skybox to use, it is probably a good idea to find one that is in the .dds file format, though I think that most of them are. Remember, if you just search the Internet for skyboxes, you need to be sure you understand the license agreement of the skybox so that you don’t get in trouble for copyright infringement. Often, the skyboxes you find in an Internet search cost money, but there are free ones out there too.
Additionally, I’ve created several of my own skyboxes that you can use for anything you want, which are all in the Texture Library .
I haven’t really seen any free skybox programs on the Internet, but there are a few tools out there that can help you create your own skyboxes. The first step is to create a square texture in each of the six directions. Some skyboxes are simple enough that you can pull this off with a normal image editor, like Paint.NET, GIMP, or Photoshop. For instance, the Empty Space and “Sun In Space” skyboxes in the Texture Library were both created in Paint.NET. More sophisticated skyboxes need to be created with a more powerful rendering program, like Bryce. Bryce 5.5 was free for download a while ago, and a Google search for “Bryce 5.5” might help you find it if it is still available. I used Bryce to create my other skyboxes. If you are using Bryce to generate skyboxes, terathon.com has an article about using Bryce to create a skybox that you’ll probably find helpful. You just need to follow the directions there for generating the six images, and from there we will use a different tool to actually create the skybox.
Once you have all of your images prepared, it is time to create a skybox out of it. ATI has a very nifty tool for creating cube maps, including skyboxes, at http://developer.amd.com/gpu/cubemapgen/Pages/default.aspx. This tool will allow you to import each of your six images onto six different faces, and you can rotate them around and everything until you get everything lined up like you want it. Then you can export a cube map in the .dds format. I used this program to create all of my skyboxes, and it is not too difficult to use.
The final thing that we will need to do here is to load all of the content that we will need. I usually go ahead and create a folder in my Content node called “Skyboxes”, where I put my skybox cube maps, and also a couple of other things. So feel free to create a folder like this. Add the skybox image of your choice to your content like we have done before with all of our other images. Also, we will need an object to draw on. Usually, a cube is an ideal choice, since it doesn’t have very many vertices or faces to draw. But you can experiment around later and see that the object that you draw is not important. The object could be a sphere or any other kind of object, too. So I would suggest downloading the cube model below and adding it to your content as well:
cube.fbxIn the next section, we will create a skybox shader as well, and then in the third section, we will create a way of using our skybox inside of an XNA game.