Idiot Proof Normal Mapping

    I've written up an idiot proof mini-tutorial for the Insurgency dev. team on how to get nice looking normal maps without having to go through the process of creating a map based solely off of a model, but I thought I'd might share it with you guys as well. Before I begin, I have to say you should not always use this method, as sometimes it simply will not work. This tutorial is aimed at those who do not wish for the large hassle (some may disagree), but still, I recommend learning the mainstream method.

    I'm going to be using Pericolos0's texture named "peri_sewer.jpg", which can be found here:

    [Blocked Image: http://www.insurgencymod.net/team/upload/Users/Pericolos0/peri_sewer.jpg]

    To start, open up your good ole' texture you have just created in Photoshop, and run it through a desaturation. You should have something like this:

    [Blocked Image: http://www.insurgencymod.net/team/upload/Users/Squirrelly/Insurgency/Normal%20Mapping%20Tutorial/Tutorial_01.jpg]

    We then need to run it through the high pass filter. A setting between 5-10 should be good, depending on the texture you are working with. I used a setting of 5 and came up with this:

    [Blocked Image: http://www.insurgencymod.net/team/upload/Users/Squirrelly/Insurgency/Normal%20Mapping%20Tutorial/Tutorial_02.jpg]

    Create a layer UNDERNEATH the base texture (you may have to create the layer, because you cannot place anything underneath the background layer, so just double-click it), and fill it with pure black. Return back to the base texture, and use the cutout filter on it (Filter > Artistic > Cutout), and use the settings: 8, 0, 3 respectively. Immediately after, fade the cutout with an opacity anywhere from 25-50. I used 40, and came up with this:

    [Blocked Image: http://www.insurgencymod.net/team/upload/Users/Squirrelly/Insurgency/Normal%20Mapping%20Tutorial/Tutorial_03.jpg]

    Once again, re-apply the high pass filter. I used a setting of 5 again.

    [Blocked Image: http://www.insurgencymod.net/team/upload/Users/Squirrelly/Insurgency/Normal%20Mapping%20Tutorial/Tutorial_04.jpg]

    Duplicate the base texture, and apply the gaussian filter to it with a setting of about 1, and change this layers opacity to about 20 and change the mode to "Exclusion". Change the opacity of the base texture to about 10 or so, again, depending on the texture you are working with.

    [Blocked Image: http://www.insurgencymod.net/team/upload/Users/Squirrelly/Insurgency/Normal%20Mapping%20Tutorial/Tutorial_05.jpg]

    Finally, flatten the image and go up to the Photoshop normal map filter. Use the settings present in the following image:

    [Blocked Image: http://www.insurgencymod.net/team/upload/Users/Squirrelly/Insurgency/Normal%20Mapping%20Tutorial/Tutorial_06.jpg]

    And voila! You have a rather nice looking normal map.

    [Blocked Image: http://www.insurgencymod.net/team/upload/Users/Squirrelly/Insurgency/Normal%20Mapping%20Tutorial/Tutorial_07.jpg]

    Much better than sending it straight through the filter. I hope this is of some sort of assistance to you all. Also, this is just meant for those who are too lazy to try a different method. I beg of you, don't send your textures straight through the filter! It just looks awful.

    REVISION: Adjusted certain settings, and added the applying of the gaussian filter to a duplicated layer.

    UPDATE: Be sure to invert the image at step five as you will obtain better results.

    Very nice, but is it possible you could show the texture ingame? Without the map. With your tutorial. And with just using filter without all that other filters? So we can see the visable difference?

    I'll ask Minos or someone else to do that. I haven't slightest idea how to use Hammer, so unfortunately I am unable to see how well it would appear in-game.

    Ive also been looking quite a while for the best combination of filters to run before you normal map it but havent found the best method yet

    yours look nice so Im certainly going to give it a try, thx

    Urk.

    Do these filters have any other names, or can you descrube what they do? I'm using GIMP here, and I can come fairly close to matching this, but not 100%, and i'd like to know if i'm going to fuck something up or not.

    Quote from Pericolos0

    As i said before, the normal here doesnt really represent the geometry the texture was intended to have... but atleast it looks better than just running the texture through that filter like what is mostly done.It would still look 100x better if this texture's normal map was done in a modelling tool though

    the top brick pixels have a green bevel wich means their vektor aims up

    ... in the picture its clearly under the stone and cant recieve ligth from anything above it ... ... ... also all the little gabs between the realy large gabs have the bevel inside out the nvidia filter ist just not clever enaugh to understand the 3d ness of a picture i recommend for everyone to stick with 3d apps to make normal maps and only use the nvidia normalmap filter to overlay structure and noise onto that normal map spit out by max maya etc.

    Quote from Pericolos0

    As i said before, the normal here doesnt really represent the geometry the texture was intended to have... but atleast it looks better than just running the texture through that filter like what is mostly done.It would still look 100x better if this texture's normal map was done in a modelling tool though

    Yeah, but for the little guys, this is a good method.

    Cheers, SS.

    GJ squirrel!

    I don't know if i ever going to do these kind of things but i apreciate the sharing

    Also a small tip or whatever you want to call it.

    You say you can't place anything underneath the background layer in photoshop.

    Well you can if you unlock the layer OR copy it first and then throw away the original/locked layer.

    Spellbinder.

    Quote from Spellbinder

    GJ squirrel!I don't know if i ever going to do these kind of things but i apreciate the sharing

    Also a small tip or whatever you want to call it.

    You say you can't place anything underneath the background layer in photoshop.

    Well you can if you unlock the layer OR copy it first and then throw away the original/locked layer.

    Spellbinder.

    dupe the background layer, then paint over the bottom one?

    Please please PLEEEEEEEEEEASE don't make normal maps like this. Squirrel I know you mean well but that's a ghastly way to make normal maps.

    A good rule of thumb is to think of normal maps like this:

    Anything that juts out from the wall more than 6 inches uses a normal map (and will require you to make that map piecemeal in photoshop with that filter by hand, not by filtering the entire image, or by making a model for it)

    Anything that juts out from the wall less than 6 inches should be a height map (black and white image) and this counts divots, scratches, woodgrain and subtle changes in the surface of materials.

    Making normal maps like you're suggesting makes very muddy edges on textures in game and really loses a lot of strong details and contrast.

    I personally don't use the method, I just thought I'd inform people about it. Also, if you invert the image at step 5, you geta better representation of the height of the normal. It all depends on whether or not it uses ATi's method or Nvidia's; ATi inverts the X/Y while Nvidia doesn't. This is what it looks like with the image inverted...

    [Blocked Image: http://img142.imageshack.us/img142/4995/tutorial05inverted5cf.jpg]

    /me Abandons tutorial.

    Quote from The Postman

    Anything that juts out from the wall less than 6 inches should be a height map (black and white image) and this counts divots, scratches, woodgrain and subtle changes in the surface of materials.

    what kind of highmap do you mean?

    the only highmaps i know in this context are those for bump maps and those for parallax mapping. both of them are not supported by the source engine and as far as I know, bump maps have been pretty much replaced by normal mapping.

    maybe it's just me, but that doesn't make sense regarding the previous sentence

    Anything that juts out from the wall more than 6 inches uses a normal map (and will require you to make that map piecemeal in photoshop with that filter by hand, not by filtering the entire image, or by making a model for it)

    postman please explain

    /the low rider hitler somehow disturbs me more than peris' calvin and hobbes

    Quote from dissonance

    dupe the background layer, then paint over the bottom one?

    No, duplicate the background layer that often is locked, and you get a unlocked copy of it and then you can put layers under it and throw away the original.

    You can't put layers under the original because it is locked.

    And sure yes you can paint over it aswell as soon as it is unlocked.

    Spellbinder.

    Quote from kleinluka

    i guess he means the height (greyscale) map that is used to convert the image into a normalmap..btw peris remove that sig...

    Sort of. Heightmaps (greyscale images like you said) don't HAVE to be an exact match to the image under it, but can be a supplament to it. IE: If a diffuse (colored texture) map had concrete, the height map could just be tiny divots and wear.

    Quote from sensee

    maybe it's just me, but that doesn't make sense regarding the previous sentenceAnything that juts out from the wall more than 6 inches uses a normal map (and will require you to make that map piecemeal in photoshop with that filter by hand, not by filtering the entire image, or by making a model for it)

    postman please explain

    Well, I meant that one must make the normal map by hand with that filter in mind. To make sure you don't get "fuzzy" or soft edges you have to make sure that your normal map image has very stark contrasts on the edges of its structures. You can add detail scratches, etc. to it by using a heightmap along with it later.

    Quote from SinisterSquirrel

    I personally don't use the method, I just thought I'd inform people about it. Also, if you invert the image at step 5, you geta better representation of the height of the normal. It all depends on whether or not it uses ATi's method or Nvidia's; ATi inverts the X/Y while Nvidia doesn't. This is what it looks like with the image inverted.../pic-snip

    /me Abandons tutorial.

    The problem with converting images like the tutorial suggests is that EVERYTHING is essentially the same height and any detail is "fuzzy" or soft. It doesn't stand out very well and the whole thing looks like wrinkled cloth, not brick/concrete/iron. Sorry to stomp all over this, but there's a smart way and a sloppy way to use normal maps and unfortunately that filter is very very sloppy.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!

Register Yourself Login