Programmer Art: Better Normal Maps

Published June 26, 2016
Advertisement

I was once discussing with someone how they were creating normal maps in this thread.
https://www.gamedev.net/topic/666662-normal-map-generator-from-diffuse-maps/

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.
sjvxna8s7m15ax9zg.jpg

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.
59x3355ua4bo4ymzg.jpg?size_id=8

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.
10a9efvtaff03qnzg.jpg
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.
37cxld1tm9ku30pzg.jpg

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

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

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.
r525ib9tfs1sv7jzg.jpg

Conclusion
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.
mocxhbm5b1v0108zg.jpg
And this is the final result of the two normal maps merged.
sjvxna8s7m15ax9zg.jpg

6 likes 4 comments

Comments

Awoken

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?

June 28, 2016 08:52 PM
dpadam450

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.

June 28, 2016 09:05 PM
Gian-Reto

That is some Kick-Ass programmer art. I like it!

June 30, 2016 03:34 PM
dpadam450

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

July 01, 2016 03:31 AM
You must log in to join the conversation.
Don't have a GameDev.net account? Sign up!
Profile
Author
Advertisement
Advertisement