Jump to content
  • Advertisement
  • entries
  • comments
  • views

Programmer Art: Better Normal Maps

Sign in to follow this  


I was once discussing with someone how they were creating normal maps in this thread.

The basic idea is (and we have all done it), you take a photo texture. You use that photo for your diffuse, but you have normal mapping in your engine and you want to show it off. You simply take that texture and run it through a normal map generator....great! you have created surface normal representation from a picture that contains light intensity. Light intensity has nothing to do with the surface representation. A height map however does contain surface information and from it we can generate normal maps from it. And they will look glorious.

Lets look at the final results first. Here the left portion of the texture is creating a proper normal map from this tutorial. The right portion of the texture is simply taking the photo of bricks and putting it right into your normal map creator.

I use GIMP for reference with the normal map plugin. ***If you use this plugin, the default scale of 1 does not create very slope based/tall normal maps. For these textures I set the scale/height in the normal map plugin to 12.

Lets get right to it. We have some bricks we want to normal map.

Here is what I'm talking about with heightmaps vs a photo texture. I have manually created some blocks at the top in all white to represent height of bricks. I blur this by 2 different amounts and you can see the results. The hard edged brick just creates a hard normal 1 pixel big. This is basically what happens when you take a picture and normal map it. It takes a pixel, and it looks at the neighboring pixels to use for height values. Since most pixels are about the same color, it just creates a bunch of random 1 pixel edge normals.
At the bottom of the height map, you will see what I did with our brick texture. I created a heightmap manually from it. I did this by using the GIMP select by color tool, and changing the Threshold until it selected all the low gaps. I selected that part as opposed to the bricks because the gaps are mostly the same color, just a gray concrete. Once selected I painted all that area with pure black. Then I inverted the selection and painted all the bricks pure white. We now have a height map representation of this brick texture. Remember though this will give us only a pixel slope at best, because the difference in pixel values is black to white within 1 pixel edge. So I blur the result, so that it goes from 0 to 1 over the course of many pixels. This gives a continual slope/change in the heightmap values.

Here is the normal map for reference.

Here is a render. Left brick portion is my method, right is just straight diffuse to normal map.

Doesn't look very good. Lets add specular. Specular adds much more life. Here is our specular and the resultant image.

Ok, but our heightmap is so blurry and smooth. Bricks are pretty rough. So what I did, and you can see in the above normal map and heightmaps is:
I took the original diffuse texture and normal mapped it with a scale of 12 as well. In gimp this is a second layer on top of my other normal map and I simply turn it to grain merge. This combines them nicely. I get those little 1 pixel or so variations in normals. I get some dings and what not. This is the result.

And here is some close up's. Here is without adding the micro details of the 2nd normal map merged. The left portion of the texture is the bricks with my method, on the right is simply taking the diffuse and pushing it through a normal map generator. Take the extra few minutes to make your normal maps better, especially brick textures.
And this is the final result of the two normal maps merged.

Sign in to follow this  


Recommended Comments

I like it, but it looks like the bricks are recessed into the mortar.  Are you able to use the same technique to make it look like the mortar is recessed into groves?

Share this comment

Link to comment

That is probably because of a bad angle shot. Normal maps are an illusion, so a dug in crease lit from the left, can also appear as a lifted bump when lit from the right. Based on the angle and no clear direction of light, people might perceive it differently. I have 2 dominate lights which the dominate one is coming from upper right, so I think my normal map just needs to intert the X-axis.

Share this comment

Link to comment

Thanks. I've actually been making art as long as I've been prorgramming.

Share this comment

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!