Tutorial: Introduction to Normal Mapping

andrei313 · 06-08-2006, 05:42 AM

Hi, my name is Andrei Ichim [andrei313]. With this tutorial I hope I can help all beginners understand the best way to make a normal mapped model.

In this tutorial I'm going to teach you how to create the dice above using just a box and a normal map.

You are going to learn a lot of tips and tricks. I'm going to guide you step by steap so any person will be able to follow this tutorial. I'm using 3D Studio Max 8 but the techniques should apply to any 3d software that supports normal maps.

I hope you will like it.

Let's begin!

Before starting to do anything you have to make sure you are working with the same units I do. So go to the Customize menu and under Units Setup... make sure that Generic Units is selected.
The second thig you need to check is the driver you are useing. So go to the Customize menu again and this time select Preferences.... From the window that pops up look at the Currently Installed Driver and make sure it is Direct3D 9.0. If it's not click the Choose Driver... button and select Direct3D, and from the Advanced Direct3D... button make sure that DirectX 9.0 is selected.

First you will need to make the low poly model.

Start by making a box that has the following dimensions:

Lenght: 50

Width: 50

Height: 50

This will be the low poly model so rename it to LowPolyDice.

You just made the low poly model!

Now you need to make the high poly model. Because the geometry of the lowpoly and the highpoly needs to occupy the same space Clone the LowPolyDice and name it HighPolyDice. Make sure that it is a Copy and not an Instance.

Before you make the high poly model it is always best to plan what you need to do. There are two ways to make a normal map:

- make the low poly model and the high poly model and then generate the normal map using 3dsmax

- make just the low poly and use Photoshop to generate the normal map

After some tests I found out that the best way to do it is a combination of the two. If you have smooth edeg on the model it is better to make them from the high poly model but if you have some text or some other fine detail on the model it is easier to make it in Photoshop. The first time is confuseing because you don't know when to model and when to leave it to Photoshop. For now I will show you how to make the dice and after some more practice you will find this step to be very easy. For the round forms of the dice and for the holes I will model the high poly model but for the beveled text I will use Photoshop. I could make the holes from Photoshop too but I want to have a more detailed high poly model so that you can see what the normal map generated from 3dsmax can do.

Here are the steps you need to follow to make the highpoly model:

1. Select all the edges of the model and Chamfer them with a value of 2. After that select all the edges from the corners and Conect them. This step is to make sure that the dice keeps its cubic form when the MashSmooth modifier is applied.
2. Select the edges around the cube and Connect them with 2 segments and move them close to the margins. The reason for this is that when I will model the holes I will need them at a certain distace from the edge.
3. Repeat Step 2 but this time leave the edges so that the distance between them is equal.
4. Select all the faces that need to have holes in them. Inset with a value of 2 and make sure that By Polygon is selected. With these polygons selected Bevel useing these values: Height: -2 Outline Amount: -1 make sure again that By Polygon is selected.
The picture on the right will help if you don't have a dice around.
6. Apply the MashSmooth modifier with Iteration:3. Usually a value of 2 for the iteration is enough, but because the geometry is simple and my computer supports 3 interations I can afford a smoother result. The highpoly model is done!

Before generating the normal map we need to unwrap the lowpoly model. Here are some things you need to know about unwraping:

- the highpoly model doesen't need to be unwraped

- you must be sure that there aren't polygons that are useing the same UV space

Because most of the time texture space is very important there is a way to share texture space in a normal map. After you unwrap the model just like you would do if you didn't want to make a normal map for it, with polygons useing the same texture space, offset the UVs that are on top of other UVs with a value of 1 on the U or V axis. This way they will use the texture from the next tile and the normal map will be generated correctly because 3dsmax doesn't render to texture UVs that are not in the UV Editors main box. After you generate the normal map you can offset the UVs back with a value of -1.

There are also two important things that you have to consider while unwraping the low poly models:

- seams

- streaching

Here you can find the benefits of making the highpoly model. If you have a highpoly model you don't need to worry about seams and streaching because max will take care of it. Most of the time it is better to avoid streaching because at low resolution maps it will be visible. The less streached the UVs are the more seams you will have. You should only be concerned on the faces where you want to add detail in Photoshop. It is very hard to make adjustments if the area that needs to be modified has a seam in the middle of it.

The unwraping of this model is very easy. Apply the Unwrap modifier and select Flatten Mapping from the Mapping menu. The UV's should look like this:

As you can see there are a lot of seams, but that is not a problem because I don't need to paint in Photoshop on the edges, I only need to make changes in the middle of the polygon, where the text is.

There is a lot of wasted space there. We will fix that later. For some reason the normal map that is generated by 3dsmax has to be a square. But after we make the normal map at a rezolution of 512x512 we can resize it to 512x256 and then readjust the UV's so that they fit with the new unwraping.

All you have to do for now is move the face from the top and put it in the right corner. It should look like this:

Now that we unwraped our model collaps the stack because you don't need to make any more changes to the UVs and bring the Render2Texture dialog be pressing 0 on the keyboard or by going to the Render menu and selecting Render To Texture...

Here is what you need to know about this window:

1. The value for the Pdding is the number of pixels that the rendered part spreads so that there are no black areas around the seam. The value of 2 that is the default is enough so you don't need to make changes here, but make sure that this is checked and a value of 2 is entered.

2. In the Projection Mapping make sure that Enabled is checked and the LowPolyDice is selected and then click on the Pick button. The Add targets dialog will pop-up, from here select the HighPolyDice object and click Add. If the dialog is empty make sure that the HighPolyDice is unhiden. At this point you can see that a Projection modifier is applyed to the LowPolyDice. We will get back to this later.

3. Now click the Options... button and from the dialog that appears make sure that Use Cage (11.) is checked and then click on the Setup... button (10.). This will bring up another menu, from here, under Global SuperSampling you can select the option to render your normal map with antialiasing. The best setup for this is with a Max 2.5 Star. So just make sure that Enable Global Supersampler is checked and Max 2.5 is selected. If you don't want to render the normal map with antialiasing just check Disable all Samplers.

4. Most of the time you won't use Mapping Coordinates so leave this as it is. If you hit render and the texture that is renderd is black make sure that the Use Existing Channel is selected and the Channel is with the value of 1. Don't hit render yet, you have to do a lot of other changes before you'll get to this part. If you changed the channel for the UVs make sure to make the changes here as well.

5. Click the Add... button and select NormalsMap from the dialog that apears and click Add Elements.

6. From the File Name and Type select the path where you want the normal map to bo saved and select a file type. I recomend a tga or a bmp file. Do not use a jpg files because the compression will make a low quality normal map.

7. In the Target Map Slot you can select where to add the normal map after it is beeing rendered. I like to leave this on black because I prefer to add it myself in the Material Editor. If you think it will help your workflow select Bump.

8. Here you can select the size for the normal map. Be sure that this will be the size of the final texture because resizeing it will alter the quality. For this model click 512.

9. The render button will render the normal map. If you hit the button now you will see that the normal map looks strange. This is because the Cage is not ajusted.

Before you hit the Render button you need to ajust the Cage of the Projection. This is a very important part so be sure not to forget about it. To do this close the Render to Texture dialog (do not worry about the changes you just made because they will be saved) and click on the Projection modifier that is over the Editable Poly.

The Projection modifier has the selection subobjects just like the EditPoly modifier but only the points can the ajusted with the gizmo.

Before you do anything to the cage make sure to check Shaded and then click Reset. The Shaded option is there to help you see where the cage intersets the highpoly model and Reset resets the Cage to the form of the lowpoly model, this is a very good start for ajusting the cage. If you have an iregular lowpoly model most of the time you will move the points with the Move tool so that the cage is not intersecting the highpoly model but if you have a model like this one it is a lot more simple to use the Push option.

The cage has to be as close as possible to the highpoly model without intersecting it.

For this model the best way to adjust the cage is to Reset it, and then just enter the value of 0.1 in the Push Amount. After you hit Enter you will see that the Amount resets to 0. Don't worry about that, the changes are made to the cage.

After you are sure that the cage is properly set up bring the Render to Texture dialog back and hit Render. You will see that a window apears that looks just like the one that appears when you render useing the Render button but the image is actually the UV layout. This window is usefull because you can see if the cage intersects with the high poly. If it does you will see some red areas. That means that in that region your cage intersects the highpoly. If there are some red areas push the cage a little further.

Here is another tip: When you have a more complex geometry it is best to go into the Vertex mode (Cage) and pull the verteces until the cage looks ok. If you use the push slider you push all the verteces with the same value, this can lead to some problems with complex geometry so only use it when you know it will not intersesc other parts of the highpoly. A good example would be the hand. If you use the push slider the cage would intersect itself and with the highpoly between the fingers. Here you will have to ajust the verteces of the cage by hand.

The normal map should look like this:

Now we will apply the normal map to the model and see how it looks. To do this open Photoshop and open the normal map from the location you selected in the File Name and Type slot. Save the file as a .psd file because you will make a lot of changes and saveing the file in another format after every change is a waste of time. If you have a PSD file with a lot of layers it is best to save in another format and use that in max because you don't want to save the file while max is making a backup, that will take a lot of time and is annoying.

Now go to 3dsmax and open the Material Editor (M). Select a new slot and go to the Bump slot. First set the amount to 100 (the default is 30). Click on the None button and from the window that apperars select Normal Bump. Click the Normal slot and from the window that appears select Bitmap. Load the .psd file you just saved. There is one more thing you need to do to see the normal map in the viewport. In the Material Editor check the DX Display of Standard Material in the DirectX Manager section.

As you can see there is another slot there, the Additional Bump. This is usefull if you want to add extra bump to the model, but it will be visible only when you render it, not in the viewport.

Apply the material to the low poly model and click the Show Map in Viewport icon to see the material. If all goes well you should have the low poly material look almost like the high poly.

To see the results better create an Omni light and move it around the model to see how the light reacts to it.

Because all is set up now you'll just need to work in Photoshop to make the changes to the normal map and come back to 3dsmax just to see the result.

Before we continue with this tutorial you need the nVidia plugin for Photoshop to make the grayscale layers in normal map layers. To do this go to this link and download the nVidia plugin. It is very easy to instal. After instaling it you need to restart Photoshop. If you did this we can start adding details to the normal map. Open Photoshop again and load the PSD file.

To add detail to the normal map make another layer, select the Text Tool, change the color of the text to black and write Las Vegas on it. Click the Create warped text button and select the Arc Style. Enter the value +80 for Bend

Make another layer and repeat the process but this time enter the text "Casino" with a Bend value of -60.

Align them to look like in the picture on the right.

Make just the text layers visible and after that make a new layer. Use Merge Visible (Shift+Ctrl+Alt+E) to merge the text on a single layer. With that new layer selected go to the Filter menu and under NVIDIA Tools select NormalMapFilter...

Here is what you need to know about the NVIDIA Normal Map Filter:

Invert X/Y: If the detail you just added looks inverted check this

Scale: This is for the depth of the detail. Most of the time you should test diferent values untill it looks right. For the this text enter a value of 4. If you think it is too much enter a smaller value.

Average RGB: If this is selected the plugin takes the value of all the channels (RGB), this is what you want most of the time. Another option is to select Normalize Only, this will treat the map as if it was a normal map. This option is for when you have a normal map and you work directly on it, not on other layers.

Set to 1.0: should alwayes be checked
3D Preview: helps seeing in real time how the normal map will look like.

Now click Ok to generate the normal map information for the text. The layer should look like the one on the right. From this layer you only need the text, so it is better to delete the rest of the layer. The neutral color for the normal map is R:128 G:128 B:255 so select the Magic Wand Tool enter the value 0 for the Tolerance and be sure that Anti-alias, Contiguous and Sample All Layer are unchecked. Select the neutral color and press delete.

The last thing you need to do is put the layer with the text on Overlay. Be sure to do this with all the layers added to the normal map. If you don't you could change some parts of the map that you don't want to be changed. Save the map and see how it looks in the viewport.

Duplicate the normal map and work on it to make a diffuse map and a specular map. It is easier to work on the normal map because you can see where to add the detail. It also helps to put a wire on the top layer if the model is complex. Be sure to put the specular map in the Specular Color and Specular Level slot. If you don't put it in both of them it won't work. The specular map should affect the specular color of the model and the power of it.

As this point you can optimize the texture by reducing it to 512x256, just like I said earlier. To do this Crop the area of the texture that is used be the model and then resize it to 512x256. Only do this when the resizeing will not affect the quality of the texture in a way that will make this obvious. This dice is an example where you can do this if the texture size is important, the space used is 512x343 so if you do a little math you will see that a 87 pixel streach is more acceptable then a 169 pixel waste. By making this texture 512x256 you reduce it by half. After making the changes to all the textures (diffuse, specular and normal map) go to 3dsmax and unwrap the model for the new texture. This part is also very easy, all you need to do is select all the UVs and scale them so that they fit perfectly inside the UV box.

Now let's go back to 3dsmax to make a nice render.

I always use the same set up for the final scene and I find this to work very nice for me.

There are 3 Omni light there as you ca see. One on the top that lights the entire scene, it has Shadows and a Multiplier of 1.2. The other 2 omnis in the back have a multiplier of 0.5 and don't cast Shadows. To make the nice blending between the background and the plane on which the dices are, make a plane and put a Matte/Shadow on it. All you need to do next is change the color of the background and hit render.

Thanks for reading this, I hope it helpes. Please feel free to contact me if you have any question.

If you want to see more of my work visit my site at www.andrei313.com.

Quote:

Originally Posted by Eric Chadwick

Andrei, great tutorial.

Might help to say that after using the Nvidia filter, you don't need to delete pixels. A better/easier way is to perform a Levels adjustment on the layer... setting the Channel dropdown to Blue, and the Output Levels to 0 and 127... then changing the layer to Overlay. This way you're altering the normals without losing any strength (noticeable if your layer overlaps mesh details below it).

It's also wise at the end to merge all to a new layer (Ctrl-Shift-Alt E), then re-run the Nvidia filter, choosing Normalize Only. This prevents rendering problems with your specular, which may freak out when it is given un-normalized pixels. It can cause artifacts in-game, depending on whether the shader renormalizes or not.

bart013 · 07-08-2006, 02:13 AM

this is a nice mapping tut man

happy me ive been searching a long while for this kinda tutorials

Generalvivi · 10-08-2006, 04:54 AM

fantastic tutorial! couldn't have done it better myself

Nysuatro · 13-08-2006, 07:14 PM

Very nice tutorials, i just dont know all the terms. First have to find out the meaning of the terms.

Thanks for the tutorial, i can use this for making techtextures

Dark · 14-08-2006, 01:27 AM

Very nice tutorial, I will post my results as soon as I give this a try. Project week atm though.

andrei313 · 14-08-2006, 02:44 AM

Quote:

Originally Posted by Nysuatro

Very nice tutorials, i just dont know all the terms. First have to find out the meaning of the terms.

Thanks for the tutorial, i can use this for making techtextures

If you have a question or you can't understand something just post it here. I'll be happy to help.

Nysuatro · 14-08-2006, 07:14 AM

Thanks man, i really appreciate this.
But i think its more of a translateproblem for me. Some english things i dont understand.
But can i make a request ? It would be great if someone could record this steps in a video tutorial. Without comments just that we can see the written tutorial and see on the video how you can do. That would be the best combination ever and it would help me very much.

Jiro · 14-08-2006, 08:13 AM

Wow really great tutorial this really helps me.

Insulaner · 14-08-2006, 03:34 PM

Somehow, I won't work for me..
When I activate "DX Display of standard material" my box becomes a triangulated wireframe.
When I uncheck it, it looks just like a normal.. wait, that might be the wrong term.. it looks like a ordinary box.

andrei313 · 14-08-2006, 03:38 PM

I heard of this problem. I think it has something to do with your graphic card. If it is too old it can't display normal maps. Try rendering it and see if this works.

10-08-2006, 04:54 AM	#3 (permalink)
Generalvivi Industry Artist 133 - 194	fantastic tutorial! couldn't have done it better myself __________________ Portfolio \| My blog \| Chell's Legend : Moddb Profile

14-08-2006, 01:27 AM	#5 (permalink)
Dark Frequenter 87 - 56	Very nice tutorial, I will post my results as soon as I give this a try. Project week atm though. __________________ Level Designer - Ubisoft Toronto

14-08-2006, 03:38 PM	#10 (permalink)
andrei313 loves polygons 1,725 - 695	I heard of this problem. I think it has something to do with your graphic card. If it is too old it can't display normal maps. Try rendering it and see if this works. __________________ http://www.andrei313.com

Bookmarks
Digg	del.icio.us	StumbleUpon	Google

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

07-08-2006, 02:13 AM	#2 (permalink)
bart013 New Member 33 - 66	this is a nice mapping tut man happy me ive been searching a long while for this kinda tutorials

13-08-2006, 07:14 PM	#4 (permalink)
Nysuatro Amateur Artist 475 - 388	Very nice tutorials, i just dont know all the terms. First have to find out the meaning of the terms. Thanks for the tutorial, i can use this for making techtextures

14-08-2006, 07:14 AM	#7 (permalink)
Nysuatro Amateur Artist 475 - 388	Thanks man, i really appreciate this. But i think its more of a translateproblem for me. Some english things i dont understand. But can i make a request ? It would be great if someone could record this steps in a video tutorial. Without comments just that we can see the written tutorial and see on the video how you can do. That would be the best combination ever and it would help me very much.

14-08-2006, 08:13 AM	#8 (permalink)
Jiro New Member 4 - 29	Wow really great tutorial this really helps me.

14-08-2006, 03:34 PM	#9 (permalink)
Insulaner Senior Member 277 - 268	Somehow, I won't work for me.. When I activate "DX Display of standard material" my box becomes a triangulated wireframe. When I uncheck it, it looks just like a normal.. wait, that might be the wrong term.. it looks like a ordinary box.

LinkBacks (?) LinkBack to this Thread: http://www.game-artist.net/forums/spotlight-articles/43-tutorial-introduction-normal-mapping.html
Posted By	For	Type	Date
xNormal v3.0 ( normal mapper tool ) - Page 4 - Threedy Forums	This thread	Refback	01-05-2008 11:46 AM
normal/ambiocclusion/heightmap... generator - Page 22 - Polycount	This thread	Refback	25-04-2008 05:11 PM
trying to grasp the meaning and workflow for normal maps - 3D Buzz	This thread	Refback	19-04-2008 05:37 AM
Architecture and Construction Visualization Forum • View topic - Normal Mapping	This thread	Refback	18-04-2008 06:48 PM
trying to grasp the meaning and workflow for normal maps - 3D Buzz	This thread	Refback	14-04-2008 12:19 AM
[Hexagon]Normal Mapping Question - Polyloop - 3D & 2D Forums	This thread	Refback	12-04-2008 05:09 AM
Íåñêîëüêî âîïðîñîâ ïî ñîçäàíèþ Normal map - CGTALK.RU – Ïðîôåññèîíàëû êîìïüþòåðíîé ãðàôèêè è âèçóàëüíûõ ýôôåêòîâ. Àíèìàöèÿ è 3D ãðàôèêà.	This thread	Refback	10-04-2008 03:06 AM
cdg.net :: View topic - [WIP]Sako TRG-42[Free Hat!!!]	This thread	Refback	08-04-2008 12:54 PM
cdg.net :: View topic - [WIP]Sako TRG-42[Free Hat!!!]	This thread	Refback	08-04-2008 10:22 AM
trying to grasp the meaning and workflow for normal maps - 3D Buzz	This thread	Refback	08-04-2008 05:23 AM
trying to grasp the meaning and workflow for normal maps - 3D Buzz	This thread	Refback	08-04-2008 04:30 AM
Murm's Dominance War Thread	This thread	Refback	29-03-2008 04:42 AM
Murm's Dominance War Thread	This thread	Refback	29-03-2008 04:39 AM
Ask a	This thread	Refback	22-03-2008 07:36 PM
CGTalk - Normal maps in 3D max 9 tutorial?	This thread	Refback	21-03-2008 11:36 PM
CGTalk - Normal maps in 3D max 9 tutorial?	This thread	Refback	21-03-2008 06:18 AM
3DSMax - Modeling Tutorials	This thread	Refback	08-03-2008 10:18 AM
Video Game Artist and Fan Community: Polycount: normal/ambiocclusion/heightmap... generator	This thread	Refback	05-03-2008 02:53 PM
Baking	This thread	Refback	05-03-2008 12:06 AM
CG-Links :: 3D Studio Max :: Introduction to Normal Mapping	This thread	Refback	02-03-2008 01:03 PM
Ask a	This thread	Refback	01-03-2008 01:37 AM
Ask a	This thread	Refback	28-02-2008 07:49 AM
Team Bigun WIP Thread - Page 8 - Threedy Forums	This thread	Refback	21-02-2008 04:35 PM
xNormal v3.0 ( normal mapper tool ) - Page 4 - Threedy Forums	This thread	Refback	16-02-2008 08:51 AM
Ogre Forums :: View topic - Normal/Bump maps	This thread	Refback	17-01-2008 12:20 AM
Recessed text - Blender Artists Forums	This thread	Refback	15-01-2008 09:34 AM
æ¬¡ä¸–ä»£æ¸¸æˆè´´å›¾æŠ€å·§ æ¸¸æˆç ”å‘ã€æ¸¸æˆå¼€å‘ã€æ¸¸æˆç¾Žæœ¯äººå‘˜æœ€å¤§çš„ç½‘ç»œäº¤æµå¹³å° - GAME798 - Powered by Discuz!NT	This thread	Refback	04-01-2008 03:50 AM
Someone Please Explain Why This Normal Map Is Making Me Look Foolish. Im Freaking Out - 3D Buzz	This thread	Refback	20-12-2007 01:44 AM
Baking - CGArena Forum	This thread	Refback	15-12-2007 03:35 AM
Video Game Artist and Fan Community: Polycount: Seems I've hit a wall here..	This thread	Refback	13-12-2007 05:43 PM
CGTalk - 3dsmax specific normal mapping	This thread	Refback	05-12-2007 03:41 AM
Normal Map Tutorial (für komplexe Figuren und ähnliches) - www.MAPPING-TUTORIALS.de	This thread	Refback	25-10-2007 08:16 AM
CrazyBump :: View topic - From A to Z	This thread	Refback	20-10-2007 10:05 PM
Video Game Artist and Fan Community: Polycount: Seems I've hit a wall here..	This thread	Refback	08-10-2007 10:56 AM
Minibitwa 18: Mój kwadrat ;) - Page 2 - Max3D.pl Forum	This thread	Refback	14-09-2007 04:54 AM
RustyKnight's bookmarks on del.icio.us	This thread	Refback	30-08-2007 07:38 PM
xNormal v3.0 ( normal mapper tool ) - Page 4 - Threedy Forums	This thread	Refback	16-08-2007 03:43 PM
CrazyBump :: View topic - From A to Z	This thread	Refback	05-08-2007 09:55 AM
Normal Map Tutorial (für komplexe Figuren und ähnliches) - www.MAPPING-TUTORIALS.de	This thread	Refback	27-07-2007 03:35 AM
Normal Map Tutorial (für Komplexe figuren und ähnliches) - www.MAPPING-TUTORIALS.de	This thread	Refback	11-07-2007 12:32 PM
Help with skinning - Steam Users Forums	This thread	Refback	01-07-2007 04:19 AM