rich_is_bored@Posted: Sun Jun 18, 2006 2:10 am    Post subject: Repost of Texture Creation Tutorial - Part 1: Because the original thread is not accessable I have retrieved the cached copy of the original post from web.archive.org and restored it as best I can.

The post follows...
_________________
Staff
Learn something today? Why not write an article about it on modwiki.net?



rich_is_bored@Posted: Sun Jun 18, 2006 2:10 am    Post subject: : Greeting fellow Doom haxors. I've put together the first installment of a two part semi-exhuastive study of Doom 3 material creation. Enjoy...

Some housekeeping before we get started:

First of all, we will need to download NVidia's NormalMapFilter plug-in for Photoshop. The plug-in can be downloaded here:

http://developer.nvidia.com/docs/IO/1176/ATT/NormalMapFilter.8bf

This file needs to be placed in Photoshop's filter plug-ins directory. The plug-ins directory should contain other .8bf files. More information about the NVidia filter and its uses can be found here:
http://www.cyberloonies.com/bump-mapping.html

Create a new folder called "custom/" in "Doom_III/base/textures/". This is where we will save our new textures for our material stages.

=================

Now for the fun stuff. Open up Photoshop and let's draw the stages.

I. Draw a diffusemap texture

This stage will serve primarily as color information for the material. This is basically just a standard RGB texture with dimensions based on powers of 2. The image should contain color and value information. A simple flat brown texture would work fine, but I whipped up this seamlessly tiling example by playing around with the drawing tools.



Save your diffusemap as Doom_III/base/textures/custom/rockwall_d.tga
By convention, diffusemap texture names are denoted with a "_d" suffix.

Exclamation Make sure to save all your material textures as Targas because the Doom3 alpha leak doesn't seem to like Jpegs. For this tutorial, save all targas as 24-bit as we will not be making use of an alpha channel.

II. Render a normalmap

A normalmap contains per-pixel dynamic lighting information. Essentially, it uses the color information for each pixel to determine the direction from which a light source would highlight the pixel. A normalmap can be generated from an elevation map through NVidia's wonderful little NormalMapFilter Photoshop plug-in.

1. Create new 512x512 RGB image as the NormalMapFilter only works on images with dimensions based on powers of 2.

2. Select White as foreground and black as background

3. From the pulldown menus select: Filter -> Render -> Clouds



This cloud pattern serves as an elevation map for the NormalMapFilter plug-in. In the elevation map, white represents high spots on the texture and black represents low spots.

Now, if your image for some reason is not flattened, flatten it now:
Layer -> Flatten Image

4. Now apply NVidia's normalmap filter: Filter -> nvTools -> NormalMapFilter

You may get a warning message about channel selection and alphaheight. This is not a problem. Just click on OK.



Use the settings depicted in the image above and then apply the normalmap color information to the image by by clicking OK.

5. Now resize your image to 256x256. A 512x512 normalmap is overkill in this instance.



6. Save your normalmap as Doom_III/base/textures/custom/rockwall_local.tga

By convention, diffusemap texture names are denoted with a "_local" suffix. I have no idea why this is.

III. Render a specularmap

The specular map stage allows specular hightlights to be added to the material. Specular highlights give the surface a shiny, light-reflective look. In the case of our rock wall, it will give the rock a slightly wet look. Because the specularmap is an additive blend, light areas of the specularmap will create drastic specular highlights while dark areas will create none.

For now, lets just use simple fractal clouds to generate the specular map.

1. Create new 256x256 RGB image

2. Filter -> Render -> Clouds

3. Image -> Adjust -> Auto Contrast



The lighter regions of the texture will translate to shiny areas (specular highlights) on the final material.

4. Save your specularmap as Doom_III/base/textures/custom/rockwall_s.tga

By convention, diffusemap texture names are denoted with a "_s" suffix.

IV. Create a DOOMEdit Preview image

This final image will serve as a material preview when working in DOOMEdit.

1. Open up your newly create rockwall_local.tga and rockwall_d.tga images.

2. Create a new 256x256 RGB image and call it "rockwall_ed"

3. Copy the entire contents of rockwall_d.tga and paste it as a new layer into your new "rockwall_ed" image.

4. Copy the entire contents of rockwall_local.tga and paste it as a new layer into "rockwall_ed", on top of the layer you just pasted from rockwall_d.

5. Apply the following functions to the top layer of "rockwall_ed" (the layer containing the normalmap source).

a. Image -> Adjust -> Desaturate
b. Image -> Adjust -> Auto Contrast

6. Now change the blending mode of the top layer from "Normal" to "Overlay". This is done from the "Layers" tab.

This should give you a shaded and colorized version of your material.



7. Save your editor image as Doom_III/base/textures/custom/rockwall_ed.tga

By convention, editor preview texture names are denoted with a "_ed" suffix. However, I have seen this convention broken in the Doom3 alpha materials.

=================

That wraps up our image creation. Now lets create a quick material script to pull all of our images into a great looking Doom3 material.

Open up your favorite text editing program and let's add the following code to a blank text file:

Code:
textures/custom/rockwall
{
    qer_editorimage  textures/custom/rockwall_ed.tga       // custom DOOMEdit material preview image

    diffusemap       textures/custom/rockwall_d.tga        // color and value information for the material
    specularmap      textures/custom/rockwall_s.tga        // specular highlights
    bumpmap          textures/custom/rockwall_local.tga    // normalmap for bumpmapped appearance
}


Now save your text file as Doom_III/base/materials/custom.mtr.

=================

We're all done with the material creation process. Now fire up DOOMEdit and place the new material on some brush faces. The material can be accessed from the Media Browser (shortcut: 'M' key) under "materials/textures/custom/rockwall".

After assigning the material to some brushes, bring up the Doom console and use "testmap yourmapname" to compile and test the map.

See the shiny highlights ingame? Those are the specular highlights that give the rocky surface a slippery wet look.

Some final thoughts:

DoomEdit handles materials much better than Radiant handled shaders. No more 'shaderlist.txt' registrations (w00t! Very Happy ). DoomEdit automatically makes accessable every valid material found in any file in the 'materials' folder.

ExclamationIMPORTANT Exclamation

For those of you working on image creation and modification, I HIGHLY recommend turning Doom3's texture caching off. Do this at the console by typing the following:

Code:
image_usePrecompressedTextures 0


By default, Doom3 is set up to create a cache of all images. This cache is generated the first time an image is used by the system. This cache doesn't automatically update if image modifications are made, therefore you will not see changes you make to images unless the cache is disabled. This really screwed with my head for quite some time. Evil or Very Mad Having caching turned off will increase load times, but it appears to be the only way for you to see image modifications reflected in the engine.
_________________
Staff
Learn something today? Why not write an article about it on modwiki.net?



BNA!@Posted: Sun Jun 18, 2006 9:09 am    Post subject: : Thank you very much Rich!
_________________
Staff - The world is yours, soon in 6 degrees of freedom!
Visit ModWiki



wviperw@Posted: Sun Jun 18, 2006 4:07 pm    Post subject: : Sweet, thanks! Been looking for this. Smile
_________________
"My dream would be a mod where you wander around in a sunlit forest buzzing with insects that glow in the light, talking to friendly NPC people about their problems with gardening." -der_ton



rich_is_bored@Posted: Sun Jun 18, 2006 2:10 am    Post subject: Repost of Texture Creation Tutorial - Part 1: Because the original thread is not accessable I have retrieved the cached copy of the original post from web.archive.org and restored it as best I can.

The post follows...
_________________
Staff
Learn something today? Why not write an article about it on modwiki.net?



rich_is_bored@Posted: Sun Jun 18, 2006 2:10 am    Post subject: : Greeting fellow Doom haxors. I've put together the first installment of a two part semi-exhuastive study of Doom 3 material creation. Enjoy...

Some housekeeping before we get started:

First of all, we will need to download NVidia's NormalMapFilter plug-in for Photoshop. The plug-in can be downloaded here:

http://developer.nvidia.com/docs/IO/1176/ATT/NormalMapFilter.8bf

This file needs to be placed in Photoshop's filter plug-ins directory. The plug-ins directory should contain other .8bf files. More information about the NVidia filter and its uses can be found here:
http://www.cyberloonies.com/bump-mapping.html

Create a new folder called "custom/" in "Doom_III/base/textures/". This is where we will save our new textures for our material stages.

=================

Now for the fun stuff. Open up Photoshop and let's draw the stages.

I. Draw a diffusemap texture

This stage will serve primarily as color information for the material. This is basically just a standard RGB texture with dimensions based on powers of 2. The image should contain color and value information. A simple flat brown texture would work fine, but I whipped up this seamlessly tiling example by playing around with the drawing tools.



Save your diffusemap as Doom_III/base/textures/custom/rockwall_d.tga
By convention, diffusemap texture names are denoted with a "_d" suffix.

Exclamation Make sure to save all your material textures as Targas because the Doom3 alpha leak doesn't seem to like Jpegs. For this tutorial, save all targas as 24-bit as we will not be making use of an alpha channel.

II. Render a normalmap

A normalmap contains per-pixel dynamic lighting information. Essentially, it uses the color information for each pixel to determine the direction from which a light source would highlight the pixel. A normalmap can be generated from an elevation map through NVidia's wonderful little NormalMapFilter Photoshop plug-in.

1. Create new 512x512 RGB image as the NormalMapFilter only works on images with dimensions based on powers of 2.

2. Select White as foreground and black as background

3. From the pulldown menus select: Filter -> Render -> Clouds



This cloud pattern serves as an elevation map for the NormalMapFilter plug-in. In the elevation map, white represents high spots on the texture and black represents low spots.

Now, if your image for some reason is not flattened, flatten it now:
Layer -> Flatten Image

4. Now apply NVidia's normalmap filter: Filter -> nvTools -> NormalMapFilter

You may get a warning message about channel selection and alphaheight. This is not a problem. Just click on OK.



Use the settings depicted in the image above and then apply the normalmap color information to the image by by clicking OK.

5. Now resize your image to 256x256. A 512x512 normalmap is overkill in this instance.



6. Save your normalmap as Doom_III/base/textures/custom/rockwall_local.tga

By convention, diffusemap texture names are denoted with a "_local" suffix. I have no idea why this is.

III. Render a specularmap

The specular map stage allows specular hightlights to be added to the material. Specular highlights give the surface a shiny, light-reflective look. In the case of our rock wall, it will give the rock a slightly wet look. Because the specularmap is an additive blend, light areas of the specularmap will create drastic specular highlights while dark areas will create none.

For now, lets just use simple fractal clouds to generate the specular map.

1. Create new 256x256 RGB image

2. Filter -> Render -> Clouds

3. Image -> Adjust -> Auto Contrast



The lighter regions of the texture will translate to shiny areas (specular highlights) on the final material.

4. Save your specularmap as Doom_III/base/textures/custom/rockwall_s.tga

By convention, diffusemap texture names are denoted with a "_s" suffix.

IV. Create a DOOMEdit Preview image

This final image will serve as a material preview when working in DOOMEdit.

1. Open up your newly create rockwall_local.tga and rockwall_d.tga images.

2. Create a new 256x256 RGB image and call it "rockwall_ed"

3. Copy the entire contents of rockwall_d.tga and paste it as a new layer into your new "rockwall_ed" image.

4. Copy the entire contents of rockwall_local.tga and paste it as a new layer into "rockwall_ed", on top of the layer you just pasted from rockwall_d.

5. Apply the following functions to the top layer of "rockwall_ed" (the layer containing the normalmap source).

a. Image -> Adjust -> Desaturate
b. Image -> Adjust -> Auto Contrast

6. Now change the blending mode of the top layer from "Normal" to "Overlay". This is done from the "Layers" tab.

This should give you a shaded and colorized version of your material.



7. Save your editor image as Doom_III/base/textures/custom/rockwall_ed.tga

By convention, editor preview texture names are denoted with a "_ed" suffix. However, I have seen this convention broken in the Doom3 alpha materials.

=================

That wraps up our image creation. Now lets create a quick material script to pull all of our images into a great looking Doom3 material.

Open up your favorite text editing program and let's add the following code to a blank text file:

Code:
textures/custom/rockwall
{
    qer_editorimage  textures/custom/rockwall_ed.tga       // custom DOOMEdit material preview image

    diffusemap       textures/custom/rockwall_d.tga        // color and value information for the material
    specularmap      textures/custom/rockwall_s.tga        // specular highlights
    bumpmap          textures/custom/rockwall_local.tga    // normalmap for bumpmapped appearance
}


Now save your text file as Doom_III/base/materials/custom.mtr.

=================

We're all done with the material creation process. Now fire up DOOMEdit and place the new material on some brush faces. The material can be accessed from the Media Browser (shortcut: 'M' key) under "materials/textures/custom/rockwall".

After assigning the material to some brushes, bring up the Doom console and use "testmap yourmapname" to compile and test the map.

See the shiny highlights ingame? Those are the specular highlights that give the rocky surface a slippery wet look.

Some final thoughts:

DoomEdit handles materials much better than Radiant handled shaders. No more 'shaderlist.txt' registrations (w00t! Very Happy ). DoomEdit automatically makes accessable every valid material found in any file in the 'materials' folder.

ExclamationIMPORTANT Exclamation

For those of you working on image creation and modification, I HIGHLY recommend turning Doom3's texture caching off. Do this at the console by typing the following:

Code:
image_usePrecompressedTextures 0


By default, Doom3 is set up to create a cache of all images. This cache is generated the first time an image is used by the system. This cache doesn't automatically update if image modifications are made, therefore you will not see changes you make to images unless the cache is disabled. This really screwed with my head for quite some time. Evil or Very Mad Having caching turned off will increase load times, but it appears to be the only way for you to see image modifications reflected in the engine.
_________________
Staff
Learn something today? Why not write an article about it on modwiki.net?



BNA!@Posted: Sun Jun 18, 2006 9:09 am    Post subject: : Thank you very much Rich!
_________________
Staff - The world is yours, soon in 6 degrees of freedom!
Visit ModWiki



wviperw@Posted: Sun Jun 18, 2006 4:07 pm    Post subject: : Sweet, thanks! Been looking for this. Smile
_________________
"My dream would be a mod where you wander around in a sunlit forest buzzing with insects that glow in the light, talking to friendly NPC people about their problems with gardening." -der_ton



rich_is_bored@Posted: Sun Jun 18, 2006 3:10 am :
Because the original thread is not accessable I have retrieved the cached copy of the original post from web.archive.org and restored it as best I can.

The post follows...



rich_is_bored@Posted: Sun Jun 18, 2006 3:10 am :
Greeting fellow Doom haxors. I've put together the first installment of a two part semi-exhuastive study of Doom 3 material creation. Enjoy...

Some housekeeping before we get started:

First of all, we will need to download NVidia's NormalMapFilter plug-in for Photoshop. The plug-in can be downloaded here:

http://developer.nvidia.com/docs/IO/117 ... Filter.8bf

This file needs to be placed in Photoshop's filter plug-ins directory. The plug-ins directory should contain other .8bf files. More information about the NVidia filter and its uses can be found here:
http://www.cyberloonies.com/bump-mapping.html

Create a new folder called "custom/" in "Doom_III/base/textures/". This is where we will save our new textures for our material stages.

=================

Now for the fun stuff. Open up Photoshop and let's draw the stages.

I. Draw a diffusemap texture

This stage will serve primarily as color information for the material. This is basically just a standard RGB texture with dimensions based on powers of 2. The image should contain color and value information. A simple flat brown texture would work fine, but I whipped up this seamlessly tiling example by playing around with the drawing tools.

Image

Save your diffusemap as Doom_III/base/textures/custom/rockwall_d.tga
By convention, diffusemap texture names are denoted with a "_d" suffix.

:!: Make sure to save all your material textures as Targas because the Doom3 alpha leak doesn't seem to like Jpegs. For this tutorial, save all targas as 24-bit as we will not be making use of an alpha channel.

II. Render a normalmap

A normalmap contains per-pixel dynamic lighting information. Essentially, it uses the color information for each pixel to determine the direction from which a light source would highlight the pixel. A normalmap can be generated from an elevation map through NVidia's wonderful little NormalMapFilter Photoshop plug-in.

1. Create new 512x512 RGB image as the NormalMapFilter only works on images with dimensions based on powers of 2.

2. Select White as foreground and black as background

3. From the pulldown menus select: Filter -> Render -> Clouds

Image

This cloud pattern serves as an elevation map for the NormalMapFilter plug-in. In the elevation map, white represents high spots on the texture and black represents low spots.

Now, if your image for some reason is not flattened, flatten it now:
Layer -> Flatten Image

4. Now apply NVidia's normalmap filter: Filter -> nvTools -> NormalMapFilter

You may get a warning message about channel selection and alphaheight. This is not a problem. Just click on OK.

Image

Use the settings depicted in the image above and then apply the normalmap color information to the image by by clicking OK.

5. Now resize your image to 256x256. A 512x512 normalmap is overkill in this instance.

Image

6. Save your normalmap as Doom_III/base/textures/custom/rockwall_local.tga

By convention, diffusemap texture names are denoted with a "_local" suffix. I have no idea why this is.

III. Render a specularmap

The specular map stage allows specular hightlights to be added to the material. Specular highlights give the surface a shiny, light-reflective look. In the case of our rock wall, it will give the rock a slightly wet look. Because the specularmap is an additive blend, light areas of the specularmap will create drastic specular highlights while dark areas will create none.

For now, lets just use simple fractal clouds to generate the specular map.

1. Create new 256x256 RGB image

2. Filter -> Render -> Clouds

3. Image -> Adjust -> Auto Contrast

Image

The lighter regions of the texture will translate to shiny areas (specular highlights) on the final material.

4. Save your specularmap as Doom_III/base/textures/custom/rockwall_s.tga

By convention, diffusemap texture names are denoted with a "_s" suffix.

IV. Create a DOOMEdit Preview image

This final image will serve as a material preview when working in DOOMEdit.

1. Open up your newly create rockwall_local.tga and rockwall_d.tga images.

2. Create a new 256x256 RGB image and call it "rockwall_ed"

3. Copy the entire contents of rockwall_d.tga and paste it as a new layer into your new "rockwall_ed" image.

4. Copy the entire contents of rockwall_local.tga and paste it as a new layer into "rockwall_ed", on top of the layer you just pasted from rockwall_d.

5. Apply the following functions to the top layer of "rockwall_ed" (the layer containing the normalmap source).

a. Image -> Adjust -> Desaturate
b. Image -> Adjust -> Auto Contrast

6. Now change the blending mode of the top layer from "Normal" to "Overlay". This is done from the "Layers" tab.

This should give you a shaded and colorized version of your material.

Image

7. Save your editor image as Doom_III/base/textures/custom/rockwall_ed.tga

By convention, editor preview texture names are denoted with a "_ed" suffix. However, I have seen this convention broken in the Doom3 alpha materials.

=================

That wraps up our image creation. Now lets create a quick material script to pull all of our images into a great looking Doom3 material.

Open up your favorite text editing program and let's add the following code to a blank text file:

Code:
textures/custom/rockwall
{
    qer_editorimage  textures/custom/rockwall_ed.tga       // custom DOOMEdit material preview image

    diffusemap       textures/custom/rockwall_d.tga        // color and value information for the material
    specularmap      textures/custom/rockwall_s.tga        // specular highlights
    bumpmap          textures/custom/rockwall_local.tga    // normalmap for bumpmapped appearance
}


Now save your text file as Doom_III/base/materials/custom.mtr.

=================

We're all done with the material creation process. Now fire up DOOMEdit and place the new material on some brush faces. The material can be accessed from the Media Browser (shortcut: 'M' key) under "materials/textures/custom/rockwall".

After assigning the material to some brushes, bring up the Doom console and use "testmap yourmapname" to compile and test the map.

See the shiny highlights ingame? Those are the specular highlights that give the rocky surface a slippery wet look.

Some final thoughts:

DoomEdit handles materials much better than Radiant handled shaders. No more 'shaderlist.txt' registrations (w00t! :D ). DoomEdit automatically makes accessable every valid material found in any file in the 'materials' folder.

:!:IMPORTANT :!:

For those of you working on image creation and modification, I HIGHLY recommend turning Doom3's texture caching off. Do this at the console by typing the following:

Code:
image_usePrecompressedTextures 0


By default, Doom3 is set up to create a cache of all images. This cache is generated the first time an image is used by the system. This cache doesn't automatically update if image modifications are made, therefore you will not see changes you make to images unless the cache is disabled. This really screwed with my head for quite some time. :evil: Having caching turned off will increase load times, but it appears to be the only way for you to see image modifications reflected in the engine.



BNA!@Posted: Sun Jun 18, 2006 10:09 am :
Thank you very much Rich!



wviperw@Posted: Sun Jun 18, 2006 5:07 pm :
Sweet, thanks! Been looking for this. :)



bashport@Posted: Thu Aug 07, 2008 4:29 pm :
Quote:
:!:IMPORTANT :!:

For those of you working on image creation and modification, I HIGHLY recommend turning Doom3's texture caching off. Do this at the console by typing the following:

Code:
image_usePrecompressedTextures 0


By default, Doom3 is set up to create a cache of all images. This cache is generated the first time an image is used by the system. This cache doesn't automatically update if image modifications are made, therefore you will not see changes you make to images unless the cache is disabled. This really screwed with my head for quite some time. :evil: Having caching turned off will increase load times, but it appears to be the only way for you to see image modifications reflected in the engine.



If image_usePrecompressedTextures is set to zero, the engine won't use dds files

This screwed with my head for quite some time :twisted:



Pectabyte@Posted: Fri Apr 24, 2009 3:25 am :
Here is a stupid question but I have to ask it...

Quote:
Create a new folder called "custom/" in "Doom_III/base/textures/". This is where we will save our new textures for our material stages.


Does it have to be named custom or can it be named after your map?



6th Venom@Posted: Fri Apr 24, 2009 5:34 am :
No it don't have to, it's an exemple.
Use a specific name of you to be sure there will be no folder's name problem with vanilla game materials/textures:
Quote:
[yourDoom3GameDirectory]/game/textures/Pectabyte/
or
Quote:
[yourDoom3GameDirectory]/[yourModName]/textures/Pectabyte/
if you're using a a mod folder.

In the two cases, your material's images will point to textures/Pectabyte/blablabla.tga :wink: