The Solar System: Explore your Backyard
(Skybox setup)
This tutorial will cover the process used to create the sparkling sky background used in ‘The Solar
System: Explore your Backyard’.
The video below is a render I took of just the background.
(Enter video-01 here)
This background is made up of 3 main parts.
1. The background skybox with the twinkling distant stars
2. The main stars in our sky (used for constellations)
3. Particles which spawn at a set distance from the emitter. (to create the twinkles)
For this tutorial, I will simply focus on setting up the skybox geometry and the corresponding material.
The stars themselves are simply square planes of geometry, all sharing the same UV space, with a
transparent shader applied that shows it as a dot. It’s very simple.
The particles will require a different tutorial to explain their set up.
Ok, lets get the skybox create. This is usually very easy to set up, but we will be adding sparkling stars to
it for an added level of detail. The reason I am adding in this ‘sparkle’ into this material is to help keep
the game running smoothly. It would be possible to have two materials, one with the skybox and the
other with the stars, but that would cause for a lot more calculations with things like Alpha rendering
and Sorting.
Creating a layered system like that would require at least two materials, two pieces of geometry, and
alpha sorting between them. This adds up when it comes to calculation time. Combining the sparking
stars into a single material allows for one piece of geometry and one material. The material has a slightly
high calculation time due to the added textures and how they relate, but this is much faster than
calculating through two pieces of geometry all of the time.
------------------------------------------------------------------------------------------
First, we will start out simple. As I’m sure many of you know, skyboxes are easy to set up. All you really
need is a sphere with the normals facing inward (because we will be inside the circle looking out when
we play the game), and a texture. Because we will be using a sphere for this, the texture will have to be
twice as wide as it is tall. In gaming terms, this should also be in a power of 2.
( 512x1024 * 1024x2048 * 2048x4096 )
The reason for this is because the texture will be looping around the circle horizontally 360 degrees, but
the texture does not loop vertically. The top of the texture will be the top of your skybox, and the
bottom of your texture will be the bottom of your skybox. This is only 180 degrees. Keeping the ratio
2X1 will maintain square, un stretched pixels.
This is the geometry normally used for skyboxes (on the left), and what it looks like textured (on the
right).
And here you can see the texture used.
This is a very basic skybox. This will work in most cases; however it entirely depends on the level you are
creating. For example, if you are working on a level that has no negative calculations on the horizon for
the skybox (you can’t look through the ground and see the sky below), then you can split your geometry
down the middle and mirror it. Instead of the middle of the mesh (widest part of the circle, like the
equator of Earth) being in the middle of the texture it would be at the base, and both the northern and
southern tips of the sphere will be at the top of the sphere. With the effect of ‘height fog’ or ‘distance
fog’ set up in UDK, you can hide the bottom parts of the mesh.
I’m sure you might be wondering ‘Why not just ignore the bottom half geometry?’. The reason for this is
because you will run into what I call ‘trailing’. A great example of this is the song ‘WTF’ by the bank “OK
Go” Go ahead, take a look at the video if you haven’t seen it already. If you’re in college and your
teacher asks you why you’re watching a music video, this time you can actually say that it’s for
educational purposes. WOOHOO!
www.youtube.com/watch?v=12zJw9varYE
As you can see, there is a trail left behind them. For the music video, it is controlled by a computer code,
but the logic is the same as with games. If there is nothing to render at a far distance, the game doesn’t
know how to update it which causes the game to keep the rendered information for that frame for the
rest of the game until it’s over written by something else. As you might have guessed, this is not ideal.
Note: I should also mention that this is covering how I set up my Ipad skybox. The same theory can be
applied to any other platform, but from here on out things will change for better looks and functionality
on the Ipad. For a PC, Xbox or PS3 skybox, you can do a whole lot more. Adding in multiple shaders and
layers of mesh to make a distant volcano smoke cloud for example.
Now, to set up MY skybox, I had to do things a little bit differently. First, I started out with a square, not
a sphere. The reason for this will be apparent later on.
I simply created a square (make sure it’s a square, and not a rectangle), smoothed it a few times, and
edited the UV’s a few times in the process.
Here is an image showing the steps and their effect.
Once this is created, we will need to move it to the second UV set. In 3dsMax, this is done simply by
creating an ‘Unwrap UVW’ node on your asset and changing the Map channel from 1 to 2. When asked,
what to do with our UV set, choose ‘move’, and it will create a copy onto your second UV set.
The nice thing about UDK is that you can choose which UV set your texture uses. I should note that this
does not go for every single texture type. For example, you can pick which UV to use for your base
texture, but not your emissive texture. This is why we are moving the UV’s we just created over to the
UV2 set. We have control over what UV set the diffuse and mask textures use, but not the emissive
texture.
----------------------------------------------------------What this UV set will be used for is the mask of the emissive texture (star strength). This is a black and
white texture. The black areas are where no emissive effect will show, and the white is where you will
see an effect.
The following textures are what I used for this scene.
(Star mask)
(Star strength)
This is what the skybox looks like with the Mask applied to the correct UV slot.
Remember, all this does is it MASKS the emissive texture. For the coordinates of the emissive texture, I
simply created a planer map for the UV1 set. The map was straight down, so my UV’s looked like a
flattened pancake. (Shown below)
Even though this might look seem strange, what I am going to do is repeat the texture within the
material editor and pann it in a direction. Since the edges of the UV’s here will be hidden by the milky
way in the main texture, you won’t notice any slight issues.
Next I need to create a third set of UV’s for my background texture. This is easily done by doing a
cylindrical UV map, but it is very important that it is on the third UV set. (Shown below)
I realize this might look rather strange to some of you, but because the 3d program used to lay out these
UV’s did so, these UV’s (although offset and not snapped to the borders) so line up when you apply a
repeating texture.
So, to recap.
UV set 1 – Controlls the emissive texture which will be repeated and panned within the game engine
UV set 2 – Controlls the mask. Since only one set of ‘scale’ values are supported per shader (and this one
is taken up by the emissive texture using UV set 1), we created our own UV set (UV set 2).
UV set 3 – Controlls the main background Diffuse texture.
Setting up the scene in UDK.
First, you will need to import your background asset into a package and place it into a scene.
(the scale of the skybox has been scaled down to allow for easier viewing, however it should be large
enough to surround your entire level (and then some).)
The settings for this asset are very important. Because you don’t want it to cast any lighting information,
or calculate in any way with collision, I tend to set the following values.
The most important part to focus on is the lighting, as this may greatly affect your scene later on.
Once this is in place, you can begin to import your textures.
These are the three textures I used in the material.
Setting up the UDK material.
To create a material, simply open up the ‘Content Browser’, right click anywhere and select the ‘New
Material’ option.
You will be prompted to out in a ‘package name’, ‘group name’, and ‘name’.
The ‘package name’ is the name of the actual package that will be loaded up with UDK. This can be an
existing package, or you can create a new one.
The ‘group name’ is like a sub folder within the package itself. This is where I group my assets, such as
‘mesh, textures, materials, particles’ etc.
The ‘name’ is for the actual name you wish to use for your material. Make it relevant, something like
‘skybox’ or ‘sunset_red’.
Once the material is created, open it up and we’ll begin to tweak the settings. The main thing you will
have to do is set it to ‘unlit’ to allow the asset to be fully lit. The geometry will not require lighting
information to view the skybox with this option selected.
Here I will show you the entire network, and what is important for this shader to work. I will break down
everything below the image.
1:
A: The first thing you will need to do is plug in the skymap texture into the ‘mobile base texture’
slot. This is the large 2x1 sized texture.
B: This texture will need to reference the third UV coordinates you created. Remember that in
UDK, they count the first UV as 0 not 1, so what you see here is the third UV, not the second.
2:
A: plug in the emissive texture that you want to use. I kept mine relatively soft so that there was
a constant brightness to them, but there are random points of brightness. This mixture is what gives the
‘sparkle’ effect.
B: I pushed the color of this up slightly to help push the sparkles.
C: I masked this by the Red channel of the mask texture. This allows only points to show rather
than a constant color.
3:
A: Plug in the mask that you will want to use.
B: Set it to the second UV coordinates you created. This is what repeats the texture.
4:
A: Enable the ‘Emissive Texture Transform’ option. This will allow that one texture to be scaled
and pann.
B: Because the texture will be repeated, the panning speed needs to be small, otherwise it will
be very noticeable.
C: I scaled my texture 7 times in both axis, but the amount is really up to you.
If everything is done correctly, this is what you will see in the UDK editor.
As you can see, it’s not really pretty. Everything appears to be using the first UV map. This is because the
second and third UV maps are computed at run time. It will require you to run the game in order to view
you final results. Depending on the scale, detail and design of your textures and UV’s, you can come out
with some really interesting results.