Tutorials
HDR Skybox
Hello, and welcome to this tutorial on HDR skybox texture making. I will go step-by-step in free programs anyone can use to make a functional HDR (High Definition Rendering) skybox for use in the Source engine. The first thing to get done is a brief introduction to the system.
The Valve Docs describe it as:
HDR or High Dynamic Range is used as the name for a feature introduced into the Source engine with Half-Life 2: Lost Coast and Day of Defeat: Source. For the player, Valve's "dynamic tonemapping" simulates the way that a human eye (or a camera with auto-exposure) gradually adjusts to compensate for changes in illumination levels, such as when entering a dark room from a daylit street or vice versa. As well as exposure-shifting to suit the average light level of the scene, the HDR feature also depicts burn-out (flat white with bloom halo) in over-bright areas, and flat shadows (black) in over-dark areas of the scene. For example, standing in a street in bright daylight, the window of a house appears black - you cannot see any details of the room behind the window. On entering the house the interior still appears black until your eyes gradually adjust to the lower light level, and then you can see the furniture, etc. Now looking at the small window to the street from inside the house, the illumination outside is far too bright for your eyes tuned to the interior light level, so you just see a slab of blooming bright white light instead of the street or sky beyond. The advantage of this 'LDR' view of an 'HDR' scene is that the correctly-exposed parts of the image are rendered in full detail; using all 8 bits per RGBA channel to describe the fine gradations of local colour and tone on the Player's screen.
In-a-nutshell, this means that the Source Engine puts a scene through a filter so lighting and colors act like they would to a human eye. While Source does this natively to world geometry with lighting, the skybox is unlit and needs some auxiliary files to tell the engine how to properly render it in high definition.
Now that we know what HDR is, we can start work on making a skybox. This will be step-by-step using free programs to get the same result. Hopefully you will learn a bit of the procedure for your own work. I'd say maybe 50% of the formats are game specific, so using GCFEdit to look at official game files is a must. I will be making a skybox for Half Life 2: Episode 2, so if you have it, I'd suggest you make this for it.
The programs you will need for this (Free) are:
-Terragen to generate the skybox.
-The Gimp to edit the pictures.
-HDRShop to make the HDR information.
-VTFEdit to make the Source-compatible files.
Let's Start:
Terragen Classic is a scenery generator program developed and published by Planetside Software. It can be used to create renderings and animations of landscapes or skies. The free version has restrictions on render size and settings.
PlanetSide's Official Guide
Terragen tutorial by E. DeGiuli
Before the render:
Even though the Valve Docs has a full tutorial, I can't help but feel it is lacking in tips so I will go over using Terragen with some suggestions for you to use if you plan on using the program. If you're not planning on using Terragen, I would highly suggest using a Vue . There is a tutorial on it right here on Interlopers.
Valve Doc's Skybox Guide <-Older Guide for Terragen skyboxes, but worth a read. (Don't get ahead of yourself in this tutorial. We just want to set up our sky now.)
This .Zip contains:
-Basic setup for a Terragen skybox
-The settings for 2nd the skybox in the tutorial
-The skybox rendering script
-A readme file to explain how to open and run
>Link<
Rings are bad. They are caused by fine gradients in the skybox. To combat the ring effect, use clouds to cover almost whole sky. The gradients are often caused by a very visible horizon and glowing sun or moon, so watch out. If you see rings in your render, they will definitely be in your finished skybox. Valve's general idea is: "Cloudcover=lowres; Opensky=highres" It will take so playing around with your first skyboxes before you get a grasp at what to avoid doing.
Example: To be sure 'bloom-rape' is at a minimum, make sure you aren't compensating for HDR in your compile. A normal, sunny day should look like this before you go into HDR. I started seeing this after writing the bulk of this tutorial, and I have a better sky with a photoshop using varient later on, but please don't make it as bright as that swampy failure of a skybox I made, m'k?
I wound up with this after a bit of fiddling with Terragen. It has a rather swampy greenish sky and scarce grey clouds.
This is the second skybox I did for this tutorial. It is mostly cloudy and has a blown-out sections of clouds where the sun is. I put this skybox into the .ZIP instead of the previous skybox.
Terragen Classic is rather limited. You will only got one layer of clouds to play with. :C Try to get your hands on that Vue. http://www.cgtextures.com/has some cubemaps you can use if you apply some tweaks.
A skybox for HL2-EP1 should have a ground rendered, but modern one should have just the sky rendered. Once you have your skybox set up and ready to go, use the skybox rendering script I included in the .ZIP file. (Make sure to crank up the render settings.) Press ok when Terragen says "end of script."
After the render:
After you're done rendering from the skybox script, you should have 6 new files in your system drive. You'll have to rename the files in the correct syntax or else you'll get problems down the road.
Where "xxxx" is your given name:
Original filename Change to sky0001.bmp sky_xxxx_hdrft.bmp sky0002.bmp sky_xxxx_hdrlf.bmp sky0003.bmp sky_xxxx_hdrup.bmp sky0004.bmp sky_xxxx_hdrbk.bmp sky0005.bmp sky_xxxx_hdrrt.bmp sky0006.bmp sky_xxxx_hdrdn.bmp
Let's break down the syntax:
sky_-This is cosmetic, but is helpful to you to refer to it as a skybox.
tutorial- Your given name could be anything, but keep it simple and descriptive.
01- This is cosmetic, but helpful to you to refer to variations on the same name.
_hdr- This will tell the engine that it is a HDR texture.
bk- This will tell the engine what side of the skybox the texture is. It will be different for every texture side of a skybox.
Side Syntax:
FT=Front BK=Back RT=Right LF-Left UP=UP DN=Down
After you're done renaming the files, move them to this folder in your steam files:
C:\Program Files\Steam\steamapps\<<YOURUSERNAME>>\sourcesdk_content\ep2\materialsrc
It should look like this now:
.BMP is a lossless format as it does not lose information over time. It makes a great backup and base-file for textures so keep the files in this format and just copy it if you need it in another. You have used Terragen to render square images making a cubemap altogether. then, you renamed your files to the right names so they will work later on.
We are done with Terragen for now. We will now move onto The Gimp.
Image Editing:
The Gimp is a free graphics editor. It is primarily employed as an image retouching and editing tool, in addition to offering freeform drawing and retouching tools, GIMP can accomplish essential image workflow steps such as resizing, editing, and cropping photos, combining multiple images, and converting between different image formats.
As I've said before, each Source game handles skyboxes differently, but did I ever mention better? With the release of the Orange box came a way of making higher resolution skybox textures without the high file-size through texture transformation. There will be parameters for it later, but for now we just deal with the images.
Resolutions:
Source work with ^2, meaning it works with nice even numbers multiplied by 2.
(2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, ect.)
A world texture is usually 512x512, because they are scaled down by 25% in-game for better quality in 3d space. Skyboxes, on the other hand, are meant to represent an almost infinite amount of space. In Half Life 2, skybox textures were 512x512 on all sides, but onwards things changed. In the Orange Box, skybox textures were (mostly) 1024x512px sides, and a 512or1024sqaured top with a 1-4px bottom.
If you will:
Example - Do you see Bobbo? Bobbo is happy because he is not a tax on your system. That Half Life 2 texture could learn a lot from Bobbo. If only he listened...
The bottom half of the texture isn't rendered or included because you don't normally see it. The game just takes the bottom pixels and stretches them to the bottom. For this tutorial and for the sake of making a nice, efficient skybox texture, we will make our side 512x256px, our bottoms 4x4px, and our tops 512x512px. ALSO: Make sure to look at the official game files you're making a skybox for. Compatibility only goes one way. Do not make a 1024x512px skybox for HL2:DM, or you might just cry in frustration.
ARE YOU A LUCKY CITIZEN WITH A COPY OF PHOTOSHOP?
There is a segment down below the Gimp section that will describe how to achieve faster, better-quality results using Photoshop instead of Gimp. You'll see this section start with GIANT BOLD letters saying Photoshop. Mmm-yes.
Onwards:
-Start up Gimp
-Drag and select all your textures from your materials folder and drag them right into the window. It will open up all the files for you.
-Since we rendered at 960x960, resize all the textures to 512x512, make sure it is not a clipping tool. We want the whole picture to shrink. You could scale upwards if you want (1024x1024), but I see little point as it's not full res. The scale downwards will increase quality in our 512x512 textures. (use image scale)
-The side textures (rt,lf,ft,bk) will be clipped to 512x256. MAKE SURE IT IS THE SKY THAT REMAINS, NOT HALF SKY HALF GROUND!!!!
-Shrink the bottom to 4x4px. You will not see it anyways. There just needs to be something there.
-Resave all files as .BMP
Now your files should be these sizes:
Your materialssrc folder should look exactly as it did before, except the files have changed. You have changed your file-sizes to source compatible forms and are now ready to make the HDR auxiliary files for your textures.
GIMP USERS SKIP OVER THIS PHOTOSHOP BLACK-MAGIC AND DOWN TO THE HDRSHOP SECTION
PHOTOSHOP USERS LOOK HERE:
Good thing you read through that last part even when I didn't say to. There's some information you would have missed without it. The first thing we will do is open up our properly named skybox sides in Photoshop. Make a new image to the size of the one shown. (512x512 is H:1536px W:2048)(1024x1024 is H:3072 W:4096)
Copy-paste the sides into the new image like shown. I turned on the grid and snap-to-grid with a size of 256 to make sure they all lined up nice and easy. (this is important) You should new have 6 new layers laid out on the background. Select the background layer and paint-can it pure black for the HDR program. Select all 6 new layers by holding down ctrl. Right-click and merger these 6 layers. You should now have 1 layer with your skybox textures and a black background. You can now edit the skybox layer to fit your needs. I added a bottom to the render and edited the color and brightness layers. This full skybox image will be used to make our HDR texture in HDR Shop.
Now, copy-paste your edited sides back over their original files in Photoshop. That way your LDR textures will match your HDR textures. Save over the images as .BMPs (24bit depth always) Save this full sky composition as your skybox name without any suffixes except "_hdr" so I would save this as sky_tutorial_hdr. This is important for the next process.
The 512x512 edited sides will be used for our HDR compile, but we need full LDR textures for our fall-backs. Now, We will make new altered resolution copies of our LDR textures for the actual sides. Use "canvas size" to crop the images to a 2:1 horizontal elongated state for the sides (rt,lf,ft,bk-MAKE SURE THE ANCHOR FOR THESE SIDES IS UPPER MIDDLE, YOU SHOULD SEE THE UPPER HALF OF THE SKY AFTER THE CROP). This will make these 512x512 sides into 512x256. Make the down side (dn) 4x4 as we will not see it. The upward side (up) needs no resolution changes.
Save these altered-resolution textures over their HDR textures at 24bit depth.
You have made an arrangement of your skybox sides into a full skybox image, made pretty adjustments to the image, saved these edited sides over your original render images, and saved the full skybox as a .BMP for the HDR program.
Your materialssrc folder should look the same as it had, but the resolution of your .BMP files has changed and a full sky composite .BMP will be in there too.
Read the next section if you want, but don't do any of the steps it suggests.
There will be a continuation of the Photoshop process below the Gimp-HDR section.
HDR Editing:
HDR Shop is an interactive graphical user interface image processing and manipulation system designed to create, view and manipulate High-Dynamic Range images. HDR Shop can also be used as an advanced and very rapid image viewer for all common low/high dynamic range formats.
The first thing to do is check our image properties. Right-click one of your .BMP files and select properties. Select it to open with a program you can paint with. (The Gimp or Photoshop) I'll explain why later.
Open HDRShop and open one of your textures (not the one with the sun). You get lots of options when you open it up, but just say ok. We don't need to edit this picture, so we will just save it in the same place with the same name as a .PFM. (portable float map) You can do this for all the sides (even up and down) except the one with the sun in it. Please don't let the sun be in-between sides, that's just horrible. The Valve docs said you can edit the HDR information in the clouds to give bright highlights. You can do this with the procedure down below, but it is hard to get the highlights looking right and do not suggest doing if for your first.
This image shows me sliding the exposure from 0 at the top, to +1 at the bottom. The HDR system works with different versions of the images with different brightness values. The .PFM holds all of them all for you.
There is an option to edit the image in an editor program. Slide the exposure around with + and - until you find the exposure you want to work with and File>Edit in Image Editor. "+1 stops" will be what the sky will normally look like under normal circumstances and no tonemap editing, so make sure it's not bloom-rapey at +1. This will take you to the program you set it to open with and a temporary file. paint what you want to change, save it, and press ok in the HDRShop box. Play around with the exposures until you think it looks right. Save it as a .PFM.
TIP: A technique I found with Left 4 Dead 2's skyboxes is not even have a sun or point of light in the skybox texture. In that game, it's all handled by an entity so they can have the sun at different altitudes and colors through a campaign.
C:\Program Files (x86)\Steam\steamapps\igotchocolate\sourcesdk\bin\orangebox\bin
You should now have 6 properly-sized .BMPs and 6 new HDR .PFMs in you materialssrc folder.
We have made the HDR auxiliary files to go with our skybox. We are done with HDRShop.
GIMP USERS SKIP OVER THIS PHOTOSHOP BLACK-MAGIC AND DOWN TO THE VTFEDIT SECTION
PHOTOSHOP USERS LOOK HERE:
Open up your full sky composite with HDRShop. All you have to do is re-save it in the same location with the same name, but as a .PFM.
You will find a program called Splitskybox.exe in 2 bin folders in the sdk folders.
Orange Box and later:
C:\Program Files\Steam\steamapps\<USERNAMEHERE>\sourcesdk\bin\orangebox\bin
EP1:
C:\Program Files\Steam\steamapps\<USERNAMEHERE>\sourcesdk\bin\ep1\bin
Create a shortcut of the application file and move it to your materialssrc folder.
Click-drag your full sky composite .PFM into splitskybox.exe and it will split it into 6 .PFM files with the correct names for sides. We will now make the resolutions for these files correct. Open up all six .PFMs in Photohop.
"WHAT IS THIS BLASPHEMY?!" you might be thinking. Yes, Photoshop cannot read the files correctly natively, they will be upside down and rather odd-looking. Do not fret, though, because all we have to do is a slight resolution change. Do the 'canvas size' change you did before for the LDR sides, except the anchor will be at the bottom instead of the top. When it's cropped, just File>Save over the original. There shouldn't be any gruff. The sizes will be the same as the LDR resolution change too, so there's (ft,bk,rt,lf-512x256)(dn-4x4)(up-nochange). They will appear right-side-up in-game so don't worry, please.
You should now have 6 new, properly-sized .PFM files for use with VTFEdit. You can continue on in the next section.
Texture Making:
VTFLib is similar in functionality to Valve's vtex Source SDK utility, but offers a lot more control. It allows for the viewing, converting, creation, and compiling of Source Engine texture files including VTFs and VMTs.
Ah, the last stretch. Are you familiar with Valve's texture format by any chance?
Let's Review:
VTF (Valve Texture File): the proprietary texture format used by the Source engine. VTF files are just one layer in the Material System. VTFs ("Textures") can only be applied to Geometry via a VMT ("Material") File. VMTs can assign several VTFs to the same surface, and specify which Shader and Shader Parameters to use when rendering the textures.
VMT (Valve Material File): A material is a .vmt ("Valve Material Type") text file that defines a two-dimensional surface. It contains all of the information needed for Source to simulate the surface visually, aurally, and physically.
Let's get this over with:
In this section we will be:
-compiling source-capable HDR texture files
-making LDR fallbacks
-writing VMT files for our HDR and LDR textures
Start by opening up your
C:\Program Files\Steam\steamapps\<<USERNAME>>\sourcesdk\bin\orangebox\bin
;that's
C:\Program Files\Steam\steamapps\<<USERNAME>>\sourcesdk\bin\ep1\bin
if you're using a EP1 Engine game.
Create a shortcut for Vtex.
Drag the shortcut into the materialssrc folder your skybox is in.
The 12 picture files should already be there. You now have a Vtex shortcut in your folder.
Make a new .txt file in notepad with the following:
"pfm" "1" "pfmscale" "1"
Resave the same .txt files with the same names as your skybox textures. There should be 6 new txt fies in your materialssrc. This .txt file will tell Vtex the settings to make your Source-compatible HDR texture.
Your materialssrc folder should now look like this.
We are now going to make the HDR textures by dragging corresponding .PFM and .BMP files into our Vtex shortcut.
Files to be dragged together are in yellow, destination is in red. Do this for all 6 file-sets
A screen like this will show up. Make sure to note where the files end up. It can be wacky sometimes.
Once you've done this with all six file-sets, move the new .VTFs into the game's materials/skybox folder. In this case (EP2) that's
C:\Program Files (x86)\Steam\steamapps\<<USERNAME>>\half-life 2 episode two\ep2\materials\skybox
Open your HDR .VTFs in the skybox folder with VTFEdit and add these checked parameters to each. (remember to save) If you're skybox is bright, these lines should appear.
You now have 6 HDR .VTFs in your skybox folder.
We have made our HDR Textures. We will now make our LDR fallbacks.
Go back to the materiassrc folder.
OPTION 1:
Open all your .BMPs in The Gimp or Photoshop.
Resave to your materialssrc folder EXCEPT AS .TGAs. Rename them through removing the _hdr.
(24bits/px no compress)
sky_tutorial01_hdrbk.bmp -> sky_tutorial01bk.tga
You now have 6 renamed .TGAs in your materialssrc folder.
Drag the .TGAs into Vtex by themselves.
ALTERNATIVE:
Open the .BMP files with VTFEdit
Save in chosen format with same name (-_hdr)
Move to the same folder (materialssrc)
Move the created .VTF files into your skybox folder. (same as the hdr textures)
Add these parameters to you LDR fallback .VTFs
You should have 6 new .VTF LDR skybox textures with the proper names.
Your materialssrc should have these files in it at this time. (New are in yellow)
You are done with .VTFs now. HOO-RAY!
now on to .vmts
Home-Stretch:
We will now need to write .VMTs so the game will be able to interpret our texture files.
No, I am not going to teach you how to make any material, but I will show you what will work for a HDR HL2:EP2 skybox, so remember to check those game-files for example.
HDR VMT:
Start by opening up VTFEdit.
File>New
A text editor window should show up now.
Paste this in:
"sky"
{
"$hdrcompressedTexture" "skybox/sky_tutorial01_hdr"
"$nofog" "1"
"$ignorez" "1"
"$basetexture" "skybox/sky_tutorial01"
"$basetexturetransform" "center 0 0 scale 1 2 rotate 0 translate 0 0"
}
This will be the palette for our side HDR textures.
"sky" - This is the basic game interpretation for the texture.
"$hdrcompressedTexture" - This refers to a HDR .VTF
"$nofog" "1" - This means it will not have fog in it from the game.
"$ignorez" "1" - This means it will always be rendered behind 3D geometry.
"$basetexture" - This actually will refer to a .VMT for our fall-back texture
"$basetexturetransform" - Like I said in the resolution section, this will stretch to make a 2:1 texture fit right.
Plug in the correct information for your 4 sides. You will put the name of each HDR texture side in for "$hdrcompressedTexture" and the name of each LDR fall-back for "$basetexture" (The .VMT will have the same name.)
// - This means skip the line it's in. It will skip out the scaling because our vertical textures are square 1:1.
Save them as the same name as the side they represent. (EX. sky_tutorial01_hdrbk.vmt)
Drag the 6 new HDR .VMTs into your materiassrc folder.
LDR VMT:
Start by opening up VTFEdit.
File>New
A text editor window should show up now.
Paste this in:
"UnlitGeneric"
{
"$nofog" "1"
"$ignorez" "1"
"$basetexture" "skybox/tutorial01bk"
"$basetexturetransform" "center 0 0 scale 1 2 rotate 0 translate 0 0"
}
This will be the palette for our side LDR textures.
"UnlitGeneric" - This means it is a normal texture that doesn't get lit.
Just plug in the right information. (your LDR texture names)
Example:This is a side LDR texture.
Example: This is a vertical LDR texture.
Save them as the same name as the side they represent. (EX. sky_tutorial01bk.vmt)
Drag the 6 new LDR .VMTs into your materiassrc folder.
You should now have 12 new .VMTs in your materialssrc folder. That's 6 HDR and 6 LDR. They should share the names of your HDR and LDR .VTFs in the skybox folder. The parameters should be different from sides and vertical sides because of the different resolution scaling.
Copy the 12 new files into your skybox folder.
To use the skybox in-game. Go to Map>Map Properties>Skybox Name. Put your sky name -the side.
sky_tutorial01_hdr
The End:
- Mr. Chop
