Hiya and welcome to my little Skybox rendering tutorial. I've been getting a few questions over e-mail regarding this as well as seeing a few topics pop-up on the forums about it. As it's pretty darn simple to make a good looking skybox in Terragen i decided that some people perhaps have a use for a tutorial on how to create them with a free program.

To do this tutorial, you'll obviously need Terragen. You can download it at the link below:

http://www.planetside.co.uk/terragen/

Now, lets get started!

Step 1: Start Terragen

Once you've started Terragen, the following screen will be visible:

Fig 1, Landscape Overview

In this window we'll be doing a lot of steps for the skybox creation.

Step 2: Generating a landscape

Click on "Generate Terrain..."

Fig2, the "Generate Terrain..." button

The following window will show up:

Fig 3, Terrain Genesis

There are a lot of settings possible here, experiment at will of course as each setting and method will generate different looking terrains. For the tutorial, we'll keep the settings at their defaults.

Click on "Generate Terrain"

Fig 4, The "Generate Terrain" button

Close the Terrain Genesis window and the Landscape window will show something like this:

Fig 5, The landscape window with a terrain in it

Voila! The now visible landscape is what will eventually turn into our skybox.

NOTE: The landscape you generate will look different, Terragen randomizes various things to generate a different looking landscape every time!

Step 3, Editing a landscape

Now, of course, we don't want a generic terrain, so we'll edit it a little bit. We'll add a lake and lower the surrounding mountains a little bit as well.

At the top left of the "Landscape" window, there are four buttons:

Fig 6, Editing buttons

The left most button is pressed. This is the "Camera/Target positioning" button, we'll use this one later on to set the camera and target correctly for the rendering. The other three buttons are for editing the landscape. From left to right, they will edit the landscape in heavier to lesser degree.

Select the middle button:

Fig 7, The middle button

Move the mouse to the middle of the large landscape below the buttons.
To make a lake, press the right mousebutton and move the mouse a little around, as you can see after a while, a blue bit will form, this is water.

Fig 8, The landscape window after adding a lake

You will also notice that the surrounding terrain has turned bright white, this is normal.

If you wish, you can also lower the surrounding area by using the editing tools and the right mousebutton to quickly (otherwise you'll get loads of lakes!) move around the areas surrounding our lake. The left mousebutton will raise the mountains.

So, in summary:

• To lower terrain, use the right mousebutton in combination with one of the three editing tools.
• To raise terrain, use the left mousebutton in combination with one of the three editing tools.
• To add water, lower the terrain a lot.

  ---

  Chapter 3, Camera operations and previewing

  Step 4: Camera operations

  Before we can preview our work, we'll need to set up the camera. You could use the default setting of the camera but because we'll be taking the skybox images themselves from the middle of the terrain, we'll set it up there.

  Click the left most button at the top of the landscape window:

  
  Fig 9, The camera operations button

  You'll see three lines appear in the large terrain. This is the camera looking to the north (top). Now we need to put the camera itself in the middle of the terrain.

  See that little button stating "7680 metres" ? This is the exact width of the terrain. As the terrain is square, that means that we need to put the x and y location of the camera exactly in the middle of that value. 7680 divided by 2 is 3840.

  Hold the left mousebutton down in the large terrain display and move the mouse around a little. As you can see, the bottom part of the three lines move. Move this to x: 3840,m and y: 3840,m.

  
  Fig 10, The camera moved to the middle

  That's it, the camera is set up to the middle.

  Step 5: Rendering a preview

  You might already have noticed that there's a second window floating around. It's called "Rendering Control" and it's what we're going to use to generate a preview and also the full rendered images for the skybox.

  If the "Rendering Control" window is not there, click the following button in the left toolbar of the Terragen window:

  
  Fig 11, The button for the Rendering Control window

  Look at the window:

  
  Fig 12, The Rendering Control window

  Just for fun, click on "Render Preview":

  
  Fig 13, A preview render Well well, it shows you a bit of your landscape in 3d now. The quality is crap, but this can be set. Locate the following slider in the "Rendering Control" window:
  
  Fig 14, The detail slider

  It's set in the middle right now. This means that the preview render quality (and the real full size render as well) are only half the detail they could be. Move the slider to the far right:

  
  Fig 15, The detail slider all the way to the right

  Now, click on "Render Preview" once again:

  
  Fig 16, A much higher detail preview

  That looks a lot nicer doesn't it?

  ---

  Chapter 4, Initial setup for the skybox rendering

  Step 6: Setting up for the skybox rendering

  We're now ready to actually make the skybox images required but we'll first need to set some stuff up!

  Look at the "Rendering Control" window again.

  
  Fig 17, The Rendering Control window revisited

  All those entry boxes seem a little daunting but not to worry, we only need to do a few things in here.

  First, click the "Camera Settings..." button that's next to the terrain display:

  
  Fig 18, The Camera Settings button

  The following window will show up:

  
  Fig 19, The Camera Settings window

  Below the word "Zoom", in the little white box that states "1,414", type "1" (just a "one") and click on close:

  
  Fig 20, Zoom level

  We've now set the zoom level of the camera to 1, this means that the perspective won't bother use for the seamless images that we need.

  It's time to start making the six images that we need for our skybox, lets start with the first image.

  Look at the "Camera part" of the "Rendering Control" window. There's lots of stuff not set correctly yet:

  
  Fig 21, The wrong camera settings

  Lets edit the ones we need to edit.

  Make sure that "Camera Position" x and y are "3840,m" and that "Target Position" x is "3840,m" and y can be anything greater than "3840.m"

  Locate "Fixed Height Above Surface" just below "Camera Position", make sure the little box is ticked and that the box next to that states "80,m"

  Locate "Fixed Height Above Surface" just below "Target Position", make sure the little box is ticked and that the box next to that states "80,m"

  Check the "head", "pitch", "bank" setting next to "Camera Orientation", these must be "0" (zero).

  After editing it should look something like this:

  
  Fig 22, The correct camera settings

  ---

  Chapter 5, Rendering the images

  Step 7: Rendering the images

  Now it's time to render the front skybox image.

  Look at the "Rendering Control" window once more:

  
  Fig 23, The Rendering Control window again

  Locate the part called "Image Size (in pixels)"

  Right now it states 640 and 480. For a texture, this isn't correct. You probably know that a texture size is usually a power of 2 (16x16,32x32,64x64,etc).

  What we are going to set this to, depends on the quality of the final skybox that you want. Usually you want the best quality possible of course, but older videocards have severe problems with textures over 256x256.. I would assume most people to have a decent videocard now-a-days tho. In other words, lets go for some good quality...

  NOTE: All the example images below are 256x256 so that i won't clog up your bandwidth too much!

  Set the "Width" and "Height" to "512" and "512":

  
  Fig 24, Width and Height set to 512 and 512

  Make sure that the "Detail" slider is set fully to the right!

  Locate the "Render Image" button and click it! Depending on the speed of your computer, go fetch a coffee, this can take a bit! :)

  The result should look something like this:

  
  Fig 25, The front of the skybox image

  Looks very nice doesn't it?

  Lets save it, Click the "Save" button:

  
  Fig 26, The Save button

  This bring forth a normal fileselector.. just save it where you want it under the name "front.bmp". Note that it saves in BMP format only.

  well, that's the "front" image! One down, five more to go :)

  Look at the "Camera Orientation" part of the "Rendering Control" window.

  Change the "0" (zero) under "head" to "90":

  
  Fig 27, Camera Orientation changed

  You should see the camera position change to it facing right, this will become the right image of our skybox.

  Once again, click on "Render Image".

  A cup of coffee later, you should see something like this:

  
  Fig 28, The left image of the skybox

  Save this under "right.bmp".

  Direct your attention to the "Camera Orientation" part again.

  Change the "90" under "head" to "180":

  
  Fig 29, Camera Orientation changed

  Again, the camera view will change, this time it's pointing down. This will become the back image of the skybox.

  Click on "Render Image" again.

  Something like this pops up after a while:

  
  Fig 30, The back image of the skybox

  Save this under "back.bmp".

  Change the "head" part of "Camera Orientation" from "180" to "270".

  
  Fig 31, Camera Orientation changed

  The camera changes again in the camera window, this time it points to the left, which will become our left image.

  Click on "Render Image" once again.

  And something like the following pops up:

  
  Fig 32, The right image of the skybox

  Save this under "left.bmp".

  Now we have all our side images, all we need now is a top and bottom one. These require two things to be set.

  Look at that "Camera Orientation" bit again.

  Change "head" from "270" to "-90" (minus!).
  Change "pitch" from "0" to "90".

  
  Fig 33, Camera Orientation changed for top image

  Click on "Render Image".

  A bit of candy chewing later:

  
  Fig 34, The top image, nice clouds!

  Save this under "top.bmp".

  Direct yourself away from the pretty sky and lets change "Camera Orientation" for our last image.

  Change "pitch" from "90" to "-90" (minus!).

  
  Fig 35, Camera Orientation changed for bottom image

  Click "Render Image"

  And here is the bottom part of the skybox:

  
  Fig 36, Bottom part of the skybox

  Save this under "bottom.bmp".

  There we go, all six images rendered.

  ---

  Chapter 6, Summary of render settings

  A small summary of all the settings required for rendering all six of the images.

  General Settings
  Camera Position	x	3480,m
  	y	3480,m
  Fixed height above surface	activated	Yes, ticked
  	set to	80,m
  Target Position	x	3480,m
  Fixed height above surface	activated	Yes, ticked
  	set to	80,m
  Zoom (under Camera Settings...)	Zoom	1

  Front Image
  Camera Orientation	head	0
  	pitch	0
  	bank	0

  Right Image
  Camera Orientation	head	90
  	pitch	0
  	bank	0

  Back Image
  Camera Orientation	head	180
  	pitch	0
  	bank	0

  Left Image
  Camera Orientation	head	270
  	pitch	0
  	bank	0

  Top Image
  Camera Orientation	head	-90
  	pitch	90
  	bank	0

  Bottom Image
  Camera Orientation	head	-90
  	pitch	-90
  	bank	0

  ---

  Chapter 7, Implementation into Blitz3D

  Step 8: The code

  There's two you can use the generated skybox images.

  1) You can map them by hand on the inside of a cube in a 3d modelling program.
  2) Code your own cube generation code and map it from within Blitz3D.

  Step 1, I'll leave entirely up to you, i hardly know anything about 3d modelling software :)

  Step 2, I've constructed a quick function to automatically do the work for ya.

  Function create_skybox() mesh = CreateMesh() ;front face brush = LoadBrush("front.bmp",49) surface = CreateSurface(mesh,brush) AddVertex surface,-1,+1,-1,0,0 AddVertex surface,+1,+1,-1,1,0 AddVertex surface,+1,-1,-1,1,1 AddVertex surface,-1,-1,-1,0,1 AddTriangle surface,0,1,2 AddTriangle surface,0,2,3 FreeBrush brush ;right face brush = LoadBrush("right.bmp",49) surface = CreateSurface(mesh,brush) AddVertex surface,+1,+1,-1,0,0 AddVertex surface,+1,+1,+1,1,0 AddVertex surface,+1,-1,+1,1,1 AddVertex surface,+1,-1,-1,0,1 AddTriangle surface,0,1,2 AddTriangle surface,0,2,3 FreeBrush brush ;back face brush = LoadBrush("back.bmp",49) surface = CreateSurface(mesh,brush) AddVertex surface,+1,+1,+1,0,0 AddVertex surface,-1,+1,+1,1,0 AddVertex surface,-1,-1,+1,1,1 AddVertex surface,+1,-1,+1,0,1 AddTriangle surface,0,1,2 AddTriangle surface,0,2,3 FreeBrush brush ;left face brush = LoadBrush("left.bmp",49) surface = CreateSurface(mesh,brush) AddVertex surface,-1,+1,+1,0,0 AddVertex surface,-1,+1,-1,1,0 AddVertex surface,-1,-1,-1,1,1 AddVertex surface,-1,-1,+1,0,1 AddTriangle surface,0,1,2 AddTriangle surface,0,2,3 FreeBrush brush ;top face brush = LoadBrush("top.bmp",49) surface = CreateSurface(mesh,brush) AddVertex surface,-1,+1,+1,0,1 AddVertex surface,+1,+1,+1,0,0 AddVertex surface,+1,+1,-1,1,0 AddVertex surface,-1,+1,-1,1,1 AddTriangle surface,0,1,2 AddTriangle surface,0,2,3 FreeBrush brush ;bottom face brush = LoadBrush("bottom.bmp",49) surface = CreateSurface(mesh,brush) AddVertex surface,-1,-1,-1,1,0 AddVertex surface,+1,-1,-1,1,1 AddVertex surface,+1,-1,+1,0,1 AddVertex surface,-1,-1,+1,0,0 AddTriangle surface,0,1,2 AddTriangle surface,0,2,3 FreeBrush brush ScaleMesh mesh,200,200,200 FlipMesh mesh EntityFX mesh,1 ; make fullbright Return mesh End Function

  
  

  As i am not here to explain how all this works .. i won't :) it's all pretty straightforward anyway.

  Just include this function and the generated .bmp files into your program and use the following bit of code to create the skybox:

  sky = create_skybox()

  
  

  (if you want it global, just add the "Global" before the word "sky")

  You can use the skybox as any other entity in your game. Just make sure that the camera is INSIDE the skybox. Another tip, try to keep the camera in the middle of the skybox (ie: if the camera moves, move the skybox with it) as you wouldn't want to bump into a skybox!

  There, that's it .. you've got a pretty skybox now that can be used for your games. If you have any questions, comments, etc.. just e-mail me at the following e-mail address:

  tracer@darkeffect.com

  -Tracer

  • This tutorial's example can be downloaded HERE.
  • The Green Hills example can be downloaded HERE.
  • The Alien Cliffs example can be downloaded HERE.
  • The Ocean Dusk example can be downloaded HERE.

  ---

  For a printable copy of this article, please click HERE.

  ---

  This site is Copyright© 2000-2004, BlitzCoder. All rights reserved.