::TUTORIAL:: Making A Skybox

User avatar
DJ99X
Posts: 15465
Joined: Tue Jan 15, 2008 11:36 am
Team: El Chupamobra
Location: Upper Shit Creek, Sans Paddlington

::TUTORIAL:: Making A Skybox

Postby DJ99X » Fri Apr 03, 2009 10:57 am

Everyone seems to be releasing tracks without custom skies, unless I made them or you are talking about Wilson's tracks. So here's a tutorial to make a seamless skybox.

I know this looks like alot of work, but once you know what you are doing, it will take like 10 minutes every time you need to make one

Tools Required: -TERRAGEN
-Your favourite image editing software. Eg, GIMP
-The attached script

______________________________________________________________

Method: (1) - Open up Terragen. On the Rendering Control Panel, set 'image size' to 960px x 960px. Set 'Detail' slider to maximum. For this tutorial, we are going to forget about land, so untick 'land' (you can try adding land later on at your own will. Optional settings: Go into 'render settings', and increase quality sliders. This will make your box have a higher quality, but will take longer to render.

Image

Hit 'Render Preview' to have a look at what you have. Move the three lined thingy round to look at different parts of your sky, as that is the camera.
______________________________________________________________

(2) - OK, lets get your lighting set up. Click on the Sun icon on the left hand panel. There will be 2 pictures, each with a red line on them. The left one is sun direction, the right is sun elevation. Move these around till you get a setting you think is right. You can move this round later if you like. But whatever setting you render with, write down the values for Sun heading and Sun altitude, these will be needed for your track.

Image
______________________________________________________________

(3) - Have a play around with Atmosphere settings (the blue-white gradient) and Cloudscape (the cloud image).
______________________________________________________________

(4) - Once you have something you like, its time to export. With that downloaded script you have, you will need to edit the second line. This will determine the location and name of the rendered images.

InitAnim "C:\Documents and Settings\Owner\Desktop\Folder\Filename", 1

Things to edit: Owner = your computer sign in name
Folder = Folder name (if not on the desktop, edit path to suit)
Filename = Name of the images. These will be saved as Filename0001.bmp, Filename0001.bmp etc.

Once you've edited these lines, save the script.

In Terragen, go Terragen>Execute Script. Find your script, and let it render the 5 images. Could take a while depending on your computer.
______________________________________________________________

(5) - The images rendered will be these directions
0001 = West
0002 = North
0003 = East
0004 = South
0005 = Up
______________________________________________________________

(6) - Open up 0001. Sample a colour in its fog zone. Like this:

Image

Write down the RGB values of this. In my case, its 200, 219, 239. These will be needed for the games fog colour.
______________________________________________________________

(7) - Make a new layer. From about halfway to the bottom, fill with this colour. Then, from the half way mark, do a gradient fade upwards, about 1/4 of the image up. Should be like this:

Image

Copy and paste this layer into a blank document, as you will need this for the remaining 3 side images.

Go back to the 0001 image, and flatten it (so the fog colour and skybox image are one layer). The image size will be 960x960 pixels. If you are using photoshop, you might want to make an action out of this (google it). Resize the image to 1010x1010 pixels. Select the whole image, and copy it. Now resize the base image to 1024x1024 pixels. Paste what you copied now, center it (should automatically center anyway). (End action there). Save image as something like sky_west.png. Heres what we should have (note: I've darkened the pasted image so you can see what i did. Dont you darken it):

Image

Notice how it has a border. I think that the game's skybox's edges overlap, and from testing, 1010x1010 pixels seems to be the right size. If you dont understand, dont worry, it will work.

Open up your 0002, 0003, 0004 images (north, east, south), copy and paste the fog colour from that separate file into your skybox image, make sure it is positioned to the bottom, and repeat what was done above. For 0005 (up), do not copy and paste the fog colour into it.
______________________________________________________________

(8) - Put the 5 images into your track folder. Open up the lighting file, and get the game to load your images by adding lines like these:
sky_x @foldername/image_x.png (x is first letter of direction, eg x=n if north. x=u for up)
eg.
sky_n @oldgoldberry/sky_north.png

Have a go of your track and test out your skybox. Here's how my test one looks

Image
______________________________________________________________

(9) - Maths time now. We have to work out the sun vector from the Sun heading and Sun altitude values. The sun vector is written as

sun_vector [ x y z ]

Let x=1 if sun heading is on right side, and let x=-1 if sun heading is on left side
Using sun altitude, y = tan (sun altitude value)
eg, my sun altitude was 24.7°
y = tan(24.7) = 0.46 (make sure whatever you are using is set to degrees not radians. Anything between 0 and 45° will be between 0 and 1)

For z, let there be 4 quadrants, like in this picture (the quadrants are what the roman numerals are)
Image

If your sun heading line is in:
Quadrant I, then z=sin([Sun Heading Angle]-90)
Quadrant II, z=sin(-[Sun Heading Angle]-90) (sun heading angle will be negative, so negative in front will make positive)
Quadrant III, z=sin(270-[Sun Heading Angle])
Quadrant IV, z=sin([Sun Heading Angle]-90])

Quadrant I and II should produce something between 0 and -1, and the other 2 quadrants should produce something between 0 and 1

Eg, with my box, Sun Heading Angle = 64.6. It is in Quadrant I, so z=sin(64.6-90)= -0.43

Therefore, for my box, sun_vector [ 1.0 0.46 -0.43 ]

Refresh your shading in game. You should see that the lighting lines up with the Sun Heading Angle line in terragen. As you can tell here, the lighting looks as if it makes an angle of 64.7°

Image

If your flat ground looks too dark because of a low Sun Altitude, just increase the values of your ambience

Eg from "ambient [ 0.25 0.25 0.50 ]" to "ambient [ 0.35 0.35 0.70 ]"
______________________________________________________________

(10) - Fog time. Fog is layed out like so:

fog [red green blue] density
eg: fog [0.56 0.64 0.35] 0.0032

The RGB values you wrote down before need to be scaled down to between 0 and 1, instead of between 0 and 255. So, just divide your values by 255.

So, 200, 219, 239 goes to 0.78, 0.85, 0.94

ie: fog [0.78 0.85 0.94] 0.0032

Play around with density till you get something that looks ok. Heres how mine turned out

Image
______________________________________________________________

(11) - Sun flare (taken from track files explained)

flare_element [x y] [red green blue] size @foldername/image.png (size should be ~1. x=0, y=0 flare is centre of screen, x=0, y=1 flare is on vector. Black in image represents transparency)
flare_vector [x y z] (self explanatory, if sun flare, same as sun_vector)

In my case (using JLV's flare textures)

flare_element [ 0.0 1.0 ] [ 0.5 0.5 0.5 ] 0.75 @glare.png
flare_element [ 0.0 -0.0 ] [ 0.0 0.0 0.125 ] 0.5 @glare.png
flare_element [ 0.0 -0.25 ] [ 0.0 0.125 0.0 ] 0.5 @glare.png
flare_element [ 0.0 -0.5 ] [ 0.125 0.0 0.0 ] 0.5 @glare.png
flare_element [ 0.0 -0.9 ] [ 0.0 0.0 0.0625 ] 0.4 @ring.png
flare_element [ 0.0 -0.95 ] [ 0.0 0.0625 0.0 ] 0.5 @ring.png
flare_element [ 0.0 -1.0 ] [ 0.0625 0.0 0.0 ] 0.6 @ring.png
flare_vector [ 1.0 0.46 -0.43 ]

______________________________________________________________
(12) - Making the environment mapping image: Take a screenshot of the sky in game, and put a black border around it like so:
Image

Remember, keep it as a power of 2 image. Put image in your track folder, and enter into the lightning file like so

sky_env @foldername/image.png
______________________________________________________________

(13) - When you make sunsets, play around with the main flare colour, and also the sun colour, using RGB value conversions as shown above.
______________________________________________________________

(14) - Here is my overall lighting file

sun_vector [ 1.0 0.46 -0.43 ]
sun_color [ 1.00 1.00 0.50 ]
ambient [ 0.25 0.25 0.50 ]
sky_n @treetest/north.png
sky_e @treetest/east.png
sky_s @treetest/south.png
sky_w @treetest/west.png
sky_u @treetest/up.png
sky_env @treetest/env.png
flare_element [ 0.0 1.0 ] [ 0.5 0.5 0.5 ] 0.75 @glare.png
flare_element [ 0.0 -0.0 ] [ 0.0 0.0 0.125 ] 0.5 @glare.png
flare_element [ 0.0 -0.25 ] [ 0.0 0.125 0.0 ] 0.5 @glare.png
flare_element [ 0.0 -0.5 ] [ 0.125 0.0 0.0 ] 0.5 @glare.png
flare_element [ 0.0 -0.9 ] [ 0.0 0.0 0.0625 ] 0.4 @ring.png
flare_element [ 0.0 -0.95 ] [ 0.0 0.0625 0.0 ] 0.5 @ring.png
flare_element [ 0.0 -1.0 ] [ 0.0625 0.0 0.0 ] 0.6 @ring.png
flare_vector [ 1.0 0.46 -0.43 ]
fog [0.78 0.85 0.94] 0.0032

______________________________________________________________

Good luck. :D

SCRIPT
Attachments
skyboxscript.zip
Unzip me
(306 Bytes) Downloaded 165 times

Garasaki
Posts: 1949
Joined: Mon Feb 04, 2008 4:33 pm

Re: ::TUTORIAL:: Making A Skybox

Postby Garasaki » Fri Apr 03, 2009 2:49 pm

Hey massive thanks DJ, can't wait to try this out.
Image

DR.MIZ wrote: Keeping something "secret" so you can be "cool" is not making a flourishing community.

User avatar
yzmxer608
Posts: 15169
Joined: Mon Dec 29, 2008 4:30 am
Team: Race Tech/SD
Location: Wisconsin, U.S.A

Re: ::TUTORIAL:: Making A Skybox

Postby yzmxer608 » Wed Apr 15, 2009 3:17 am

Nice tutorial, but I have a few questions. What does the environment mapping image actually do? Also, how do you get the coordinates for the position of the flares?
TeamHavocRacing wrote:If I had a nickel for every time someone asked for this, I would have a whole shitload of nickels.

gordy
Posts: 1099
Joined: Sat Jan 19, 2008 6:43 am
Team: Privateer
Location: Bathurst, Australia
Contact:

Re: ::TUTORIAL:: Making A Skybox

Postby gordy » Wed Apr 15, 2009 3:26 am

the env image is what is reflected on objects with an env layer enabled
Image

instupitious.

User avatar
DJ99X
Posts: 15465
Joined: Tue Jan 15, 2008 11:36 am
Team: El Chupamobra
Location: Upper Shit Creek, Sans Paddlington

Re: ::TUTORIAL:: Making A Skybox

Postby DJ99X » Wed Apr 15, 2009 3:45 am

For a flare vector, the co-ordinates are the exact same as the sun vector

User avatar
yzmxer608
Posts: 15169
Joined: Mon Dec 29, 2008 4:30 am
Team: Race Tech/SD
Location: Wisconsin, U.S.A

Re: ::TUTORIAL:: Making A Skybox

Postby yzmxer608 » Wed Apr 15, 2009 4:10 am

Ah I see, thanks guys. But what would you do for spotlights (I think you used some on your endurocross track)?
TeamHavocRacing wrote:If I had a nickel for every time someone asked for this, I would have a whole shitload of nickels.

Pumaxcs
Posts: 12786
Joined: Sat Dec 15, 2007 11:50 pm
Team: Kyle/Luiz
Location: Western, Kentucky
Contact:

Re: ::TUTORIAL:: Making A Skybox

Postby Pumaxcs » Thu Apr 16, 2009 12:53 am

Well I say a very good job well done. Only one part I had a problem with, or so I think. My sun and highlight/shadows are complete opposites. Say my sun is on the left but the shadow on a hill is on the left and the brighter side is on the right.
Image
Everytime you post something stupid, a baby gets punched in the face. Please be smart, for the children.

MXS Cares

User avatar
DJ99X
Posts: 15465
Joined: Tue Jan 15, 2008 11:36 am
Team: El Chupamobra
Location: Upper Shit Creek, Sans Paddlington

Re: ::TUTORIAL:: Making A Skybox

Postby DJ99X » Thu Apr 16, 2009 2:53 am

I think there maybe problems with my maths for the sun. Ill fix that later.

yzmxer: Point flares are very tedious. Ill write something about it later

User avatar
yzmxer608
Posts: 15169
Joined: Mon Dec 29, 2008 4:30 am
Team: Race Tech/SD
Location: Wisconsin, U.S.A

Re: ::TUTORIAL:: Making A Skybox

Postby yzmxer608 » Thu Apr 16, 2009 1:32 pm

Ok, was just wondering :).
TeamHavocRacing wrote:If I had a nickel for every time someone asked for this, I would have a whole shitload of nickels.

User avatar
giopanda
Posts: 811
Joined: Sun Jul 05, 2009 8:08 am
Team: Privateer
Location: milano, italy
Contact:

Re: ::TUTORIAL:: Making A Skybox

Postby giopanda » Wed Aug 05, 2009 7:56 am

i've looked everywhere in the software and on the net and i can't find that darn "execute script" command..any hint?
Image

User avatar
yzmxer608
Posts: 15169
Joined: Mon Dec 29, 2008 4:30 am
Team: Race Tech/SD
Location: Wisconsin, U.S.A

Re: ::TUTORIAL:: Making A Skybox

Postby yzmxer608 » Thu Aug 06, 2009 3:22 am

It's under the Terragen tab at the top, Terragen>Execute Script.
TeamHavocRacing wrote:If I had a nickel for every time someone asked for this, I would have a whole shitload of nickels.

User avatar
giopanda
Posts: 811
Joined: Sun Jul 05, 2009 8:08 am
Team: Privateer
Location: milano, italy
Contact:

Re: ::TUTORIAL:: Making A Skybox

Postby giopanda » Thu Aug 06, 2009 6:24 am

yzmxer608 wrote:It's under the Terragen tab at the top, Terragen>Execute Script.


yeah i solved thanx!
the problem is that i downloaded terragen 2 and it doesn't have the terragen menu, but the 0.9 version does! :wink:
Image

User avatar
tyskorn
Posts: 6426
Joined: Sun Jan 11, 2009 5:52 pm
Team: Adept MX Graphics
Location: Utah, USA
Contact:

Re: ::TUTORIAL:: Making A Skybox

Postby tyskorn » Sun Dec 20, 2009 7:11 pm

Do I need to rotate the image to make it look real?
Image

User avatar
Shadow
Posts: 2751
Joined: Sun Dec 02, 2007 5:10 pm
Team: FSK
Location: Finland

Re: ::TUTORIAL:: Making A Skybox

Postby Shadow » Sun May 09, 2010 11:21 am

DJ wrote:I think there maybe problems with my maths for the sun. Ill fix that later.


There indeed is an error in determining the sun vector.

Image
It should be like this.



Depending where the sun is, you either calculate x or z instead of always z.
The same equations apply except, but the results will not be the same.

Sun (cardinal direction) = [ x y z]

Ex.
Sun position is on the south_sky.png = [ x y 1 ]

quadrant III -> x is negative
quadrant IV -> x is positive


Sun position is on the north_sky.png = [ x y -1 ]

quadrant I -> x is positive
quadrant II -> x is negative


Sun position is on the west_sky.png = [ -1 y z ]

quadrant II -> z is negative
quadrant IV -> z is positive


Sun position is on the east_sky.png = [ 1 y z ]

quadrant I -> z is negative
quadrant IV -> z is positive


y is calculated the same as usual.
Image
Those who possess strength have also known adversity.

User avatar
DJ99X
Posts: 15465
Joined: Tue Jan 15, 2008 11:36 am
Team: El Chupamobra
Location: Upper Shit Creek, Sans Paddlington

Re: ::TUTORIAL:: Making A Skybox

Postby DJ99X » Sun May 09, 2010 11:23 am

Yeah, I've had the solution for a while now. I just never bothered updating this thread


Return to “Tutorials”

Who is online

Users browsing this forum: No registered users and 1 guest