How to create your own Relief Maps using Gimp (#1 of 3 tutorials)

Earlier today in the #garagegames IRC channel, I worked with Matt Vitelli to figure out how to create your own relief map.

Now, I don't know if there's already a resource about this in the TSE section of the Torque Developer Network, since I don't own TSE. Nor do I have a graphics card capable of rendering any pixel shaders whatsoever. But I figure this might help someone out there.

Relief maps are described here. I believe the texture(s) can be used for parallax/steep parallax mapping as well.

This resource is one of three tutorials. The end result of all of them is the creation of a .dds relief map, which works with TSE. NOTE: These are not tutorials on how to get it working inside of TSE. This is just about how to make the proper texture maps for relief maps, so that it works with the Relief Mapping Shader by Ray Gebhardt.

Actually, these tutorials teach you on how to make a normal map, a parallax map, and a relief map! Three birds with one stone, woohoo!

Now on to the Gimp tutorial...

Files you need...
The version of Gimp I used for this tutorial is 2.2.10, and you can download it for free at www.gimp.org

The next thing you need is Shawn's Normal Map Plugin and DDS Plugin for Gimp.

Now, I'm not going to tell you how to install them. Just remember that the default plugins directory in Windows XP isn't necessarily located in the program files directory, but rather in the user Documents and Settings directory.

First steps
What the relief map is composed of is a regular normal map and a height map. The normal map uses up the RGB channels, whereas the height map uses the alpha channel. People with a good level of expertise in the area of texturing/paint applications can probably figure out exactly what to do from here. However, this tutorial is for those who don't know what to do, or don't know what they did wrong.

So, what we need to do first is create our two texture maps separately.

We'll assume you already have a texture ready. We'll use this texture for the tutorial:

First we'll create our Height Map. For this texture, it's rather easy to create since the parts that should be sticking out are already lighter than the indentions. Remember that white means height. If you used zbrush or something and already have a heightmap generated, skip the parts that don't apply to you.

Creating the Height Map
FIrst we want to make a grayscale copy of it. So go to Layer->Colors->Desaturate (In future releases of Gimp, there may be a main menu for Color instead). Now, all those specks and such on the lighter areas are a nuisance because it'll make it look dimpled in-game. So what we want to do is use the Despeckle filter to smooth it out a bit, so go to Filters->Enhance->Despeckle. Achieve a look like this:

Feel free to add any other filters, paint-overs, whatever you need to get the depth you want where you want it. I do recommend, however, that you don't make the difference of depth too large, otherwise it'll cross that line between reality and omg-that's-aweful. So a little playing around with the brightness/contrast setting to get the darks closer to the whites might help.

Since I personally won't be able to see how aweful it'd look in-game, I decided to use something funky:

That's it for the height map creation. Just save it as a separate .bmp/.png/.tga/.tif lossless image to be used later.

Now, there are instances where your depth in the height map will not exactly correspond with what the normal maps or actual details need. If you need proper consistency, it may be best to use the height map for creating the normal map.

Creating the Normal Map
This is really easy, so long as you installed the plugin(s) correctly and know where they're located. Load up the image that you want to use to generate the normal map off of, and then go to Filters->Map->NormalMap.

Giving a depth of 10 is good enough for this case. You may require different parameters, so keep that in mind. I checked the Wrap option as well, since this is a "tileable" texture. It should look something like this:
Normal:
Funky:
Now, I want to just go ahead and mention this...the 3D preview for this plugin is great in that you don't have to have pixel shader support for it to work with your graphics card. This means that while it's not parallax or relief mapping (or even real normal mapping), you can still see it nicely bump mapped to a selection of primitives.

Press Ok! On to the next step...

Blending the two maps together to create a .DDS
This is also pretty easy, so long as you follow the instructions. There are actually a few ways to do this, but we'll stick with just one.

With your normal map image still open, go to File->Open as Layer, and point it to your height map. Right-Click on the height map layer, and go to Add Layer Mask. In the dialogue that comes up, select "Grayscale copy of layer" and press Ok.

Now, once again Right-Click the height map layer, and go to Mask to Selection. It should show those ants crawling all over the place. Next, Right-Click the normal map layer and press Add Layer Mask. In the dialogue that comes up, select "Selection". Press OK, and then delete the height map layer afterwards.

Here's what it should look like in Gimp:
Normal:
Funky:

Now all you have to do is go to File->Save As...and save as [filename].dds. I'm not entirely sure if compression is supported by TSE, but no compression should work. Select the RGBA8 option (Red Green Blue ALpha--8 bits per channel), and press OK.

There you have it! Pair the dds file with your detail map in your TSE shader script, and you're good to go!

There were some areas I was vague in (mostly the areas that depended on TSE), so if you want to post any comments and information, feel free to! Definitely make a comment if you followed the tutorial and it didn't display correctly in TSE. I'll add corrections and additions to the resource where needed.

I'll have the Photoshop and NVidia DDS Utilities tutorials done asap.