Logo

Material tutorial - Normalmap

Left: Vertex lightning, Right: Per Pixel LightningA normal map is used to get high detail in a low detail object or model, applied as a regular texture map.
3D artist can create a high poly object, make (bake) a normal map and then adding that normal map to a low poly model.

The low poly model will look almost as good as the high poly model. In games this is very usefull to decrease the polycount in your scene

how does it work?
Left: Diffusemap, Right: NormalmapNormal maps only work when you apply per-pixel lightning instead of vertex lightning.

A normal map uses red, green and blue channels that represent X, Y and Z values of the normal vector.

You can convert bump maps to normal maps to get realtime bumpmapping very easy.

The tutorial shows you how to create a material using normal maps.

1.

Importing the material images for the Ground material

Press Import/Texture in the Data Explorer
Browse to your picture folder and select the texture: ground_diffuse.bmp
leave the other settings unchanged
press Import
thise image is used for:  Diffuse map (Effect map 0)

Press Import/Texture in the Data Explorer
Browse to your picture folder and select the texture: ground_normal.bmp
Select the Will be used as a normal map entry
press Import
thise image is used for: Normal map

The textures are now imported to the Resources/Textures folder and converted to a TGA file

Data explorer, import texture

Data explorer, import texture

Data explorer, import normalmap

Data explorer, imported textures

2.

Creating the material

Press Create/Resource/Material in the Data Explorer or Material/Create in the Material Editor
Create a material named : Ground
Go to the Texturing Section
In the Effect Map 0 entry, select the ground_diffuse image from the list
When you press the Play button in the bottom of the material editor, you will see the material projected onto a spere, cylinder or box.
The texture is still flat

In the Normal map, select the ground_normal image from the list
You can see that nothing has changed yet.

Material Editor, create material

Material Editor, create material

Press Play to see the material in the material viewer

Adding a normalmap to the material

3.

Setting up lightning

Select the Per Pixel Lightning in the Method section.
You will notice that the material now looks very much alive.

Applying per pixel lightning
4.

You can now apply the material to an object and add that object to the scene.

 

 
5.

Experiment with different materials, provided in the source files (stone, brick, metal and honey)

 

Different materials in the scene

!

note that in order to see the material work in your scene, you need to add the DefaultDirectionalLightSet to your scene.

 

Comparison of the lightning effect

!

there are 2 ways you can import the normal map in Shiva
- Will be used as a normal map
- Will be used as a high qulity normal map
In the image you can see the difference in the way the texture is stored, but also the materials look very much different. I would say the high quality texture is more subtle. 

Left: normal map, Right: high qulity normal map

Tutorial Files

Shiva~Tut~Files_Utilities-Alternate_256.jpg

Shiva~Tut~STEarchive_Stuff_256.jpg

Shiva~Tut~Movie_Movies_256.jpg

Shiva~Tut~PlayShiva_Developer_256.jpg

Download FilesDownload STEPlay MovieRun Demo
Extra LinksTiles incl. Bump and normal map. Photoshop plugin.http://www.filterforge.com/
 Ultimate tile creation tool for professional high resolution diffuse and normal maps. stand-alone tool.http://www.mapzoneeditor.com/
 The NVIDIA Normal Map filter creates normal maps from grayscale height maps. Photoshop plugin.http://developer.nvidia.com/
 Normals, how do they work?.http://en.wikipedia.org/wiki/Surface_normal