Saturday, June 2, 2012

Nvidia Normal Map Filter installation and usage








Hey guys!  We're breaking away from the norm in this tutorial.  We'll be doing a lot of explaining of theory and concepts, but not an actual project this time.  I tried a video, but since there wasn't much on screen action, it was really boring!  There is a project in the works, but one of the techniques I use in that tutorial is complex enough that I felt it deserved a tutorial of its own, and before I just start tossing the technique around in the next tutorial, I felt like we should probably cover a few of the basics before hand.  So without further ado, let's talk about normal maps.

If you have any experience with 3D modeling programs, you probably already know what a normal map is and what it does.  If not, you're probably wondering what the heck I'm talking about and why am I talking about modeling on a Photoshop blog.

Well, here's why.When you're talking models, geometry equals overhead, and overhead equals increased load on your CPU and GPU, and increased load equals sub-par performance, which is always a bad thing.

Normal maps are a favored tool for avoiding this bottleneck.  Without going into too much detail they do this by manipulating the way light is reflected off a given surface.  Used correctly, normal maps create the illusion of geometry where none exists.  This means that a 3D modeller can create a character that consists of only a couple thousand polygons and make it look as if it were made of 10s of thousands, without the increased strain on system resources.

Here we have a graphic example of the theory of normal mapping.  In this image, we see the light being reflected away from the flat surface at an equal but opposite angle from the source, exactly as you would expect.


In this image, we have the exact same surface, but with a normal map included.  The light is reflected away from the surface at multiple angles, creating the illusion that the surface is a lot less flat than it actually is.


In some situations, such as character modeling, the mesh is so complex, that you really should use a modeling program to create the normal map.  But the normal mapping process inside 3D modeling programs is a convoluted mess involving projection cages, baking, low poly and high poly versions of your model, and a lot of grief.  Even if you're skilled at it, it's still more art than science and can turn into a huge project all by itself.

However, there are many other situations where the same result can be accomplished in a much easier, less painful way.  The folks over at Nvidia have created a normal map filter plug-in for Photoshop, and I have found that for non-organic work, I prefer using the plug-in instead of baking the maps inside a modeling application.

Now you may be asking yourself what this has to do with Photoshop.  This is not a 3d modeling blog.  Well, here's the answer.  You can create and use the same normal maps that are designed to improve the efficiency of 3D models inside Photoshop extended to exponentially enhance the quality of your work.  If you use the 3D capabilities of Photoshop at all, you should definitely take notice of normal maps.

Photoshop's 3D capabilities are great.  You can extrude bend, twist, taper, and scale shapes.  You can add lighting, materials, shadows, reflections ... the list goes on and on.  But one serious limitation on the Photoshop 3D engine is its ability to manipulate the mesh on a given surface.  We can use the normal maps to great effect to compensate for this shortcoming.  So let's go ahead and get the plug in downloaded and installed.

First, point your browser to http://developer.nvidia.com/nvidia-texture-tools-adobe-photoshop.  The plug in is compatible with all versions of Photoshop going all the way back to 5.0.  (even though CS6 is not specifically mentioned it does work.)  This plug-in also contains the DDS plug in, MIP map generator,  and cube map shuffler, but those are outside the scope of this tutorial.  Feel free to explore those on your own.  Choose whether you want the 32 bit version or the 64 bit version, download, then install as normal.  The prompts are self-explanatory.

Once you have it installed, open up Photoshop, and you'll find the plug in in your filters menu, under "Nvidia tools".


Normal map creation works similarly to bump map creation.  In fact, they both use the same basic principals.  They use gray scale information to create the illusion of depth on a given surface.  Normal mapping is sort of an evolution of bump mapping but it is not a replacement.  In fact, I have found that normal maps and bump maps work very well together in tandem.  Bumps seems to be better for rough textures, while normals work great for complex, mechanical structures.

This tutorial is more of a discussion about the theory of normal maps and less about technique, so I don't have an actual project for you to do.  In the next tutorial, I will go into greater detail into the actual creation process.  For now, let's open up the filter and look inside.

 You'll see many options here, but for our purposes, we'll only cover the essentials.  In the height source pane, click the Average RGB bullet.  In the Alpha Field pane, tick the Unchecked bullet.  In the Height Generation pane, you have some options.  Combining the filter type with the scale will determine how profoundly the filter influences the image.  There is a 3d preview feature which you can play with if you like.  I have found that the more I use this filter, the less I need the preview.  The Dynamic Filter in the upper left corner is sufficient.

There are a few different kinds of normal maps.  The type we are using is called tangent normal map.  It uses RGB values to determine which way light will be reflected.  Let's look at an example of a normal map I created using simple geometric shapes.  I first created a pattern, then used this same pattern as a basis for both the diffuse and the normal map.


And now down to brass tacks. What does this all mean for you as a Photoshop user?  Beyond the theory, how is all that this fanciness brought to bare in a practical way?  Here's what a normal map is capable of doing.  These two boxes are identical in every way.  They exist in the same scene, so they share the same lighting.  They both have the exact same reflective and specular settings.  They even both have the same diffuse texture.  The only difference is one of them has a normal map applied. Can you guess which one?


And here is where a normal map's usefulness becomes most apparent.  the box on the right is reflecting light, but notice that the light is not being broken up as it is distributed across the surface.  Even with the level of detail, the diffuse texture is not capable of manipulating the light on its own.  Without a normal map, even the most detailed photo-realistic pattern will look flat once we begin to apply an external light source.  The box looks like it's wrapped in acrylic and the illusion is destroyed.

The box on the left is a completely different story.  The light is being reflected, but thanks to the normal map, the surface is capable of reflecting light in many different directions, as if it had actual geometry.  The dome-shaped elements are especially dynamic, reflecting the image-based light very realistically.  If we take a look at the top edge, which is at an extreme angle, we are reminded that the normal map doesn't actually create geometry, but instead is only an illusion.  However, on the surface facing the camera, the illusion is so complete that it approaches photo-realism.


And there you have it, a quick and dirty sneak peak into normal mapping and how you, as a Photoshop designer, can use them to exponentially enhance your projects. As promised, in the next tutorial, we'll go step by step through the normal map creation and deployment process and soon you'll be using them to make designs that are almost impossible to distinguish from the real thing.  See you next time.

7 comments:

  1. That plug-in doesn't work with the mac. I bet there are more mac photoshop users than pc ones... and we have NVIDIA chips on our macs... so what's up with that?

    ReplyDelete
  2. I really couldn't say. I don't use Mac, so unfortunately I don't know what works with it and what doesn't.

    I also don't know the statistics of Mac vs. PC Photoshop users. The only answer I have is, there hasn't been enough demand from Mac users for that particular plug in to justify a conversion.

    You might try contacting Nvidia directly and seeing if you can get some feedback concerning the issue.

    Good luck.

    ReplyDelete
  3. I agree with dkliman, almost every artist works with a Mac, WE NEED IT too!

    A sides from that, at work i have to use a PC because of my company's software program being only compatible with PC. I have Photoshop CS6, compatible with this, and I installed it as the prompts said. I go to my Photoshop>Filter and it's not there at all. I tried to reopen Photoshop and it still doesn't appear. Do I have to do something else in Program Files? Am I missing something here? Thanks for the help and your post.

    ReplyDelete
    Replies
    1. Thanks for the reply!

      I didn't have any trouble installing the filter. The only thing I can think of off the top of my head would be to check and make sure you're installing it in the right folder. Adobe has stuff scattered across both the Program Files and the Program Files (x86) folder. It's annoying.

      Follow this file path all the way to the Filters folder:

      C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Plug-ins\Filters

      You should have a file in there named NormalMapFilter64.8bf or something similar. If not, try your install again.

      This,of course, assumes that Photoshop is installed in the default location. If not, navigate appropriately. The plug-in has to be in that Filter folder in order to appear in the Filter menu.

      That's the only thing that I can think of off the top of my head. If it's installed in the right folder, it should be there.

      Good luck and keep me updated!

      Delete
  4. Hi! Thanks for your help Will,

    I checked on my computer C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Plug-ins\Plug-Ins\Plug-Ins\Filters and it's everything alright, the NormalMapFilter64.8bf file is where it 's supposed to, so... I really don't know what's wrong because I try to access it from my Photoshop>Filter and it's still not there. I tried to uninstall it and install it again several times but it doesn't seem to be working. Anyway... thanks a lot for you help Will I really appreciate it.

    ReplyDelete
  5. To Anonymous:
    Did you ever solve your problem? I have a similar one after multiple variations of installations on the Photoshop CC, I have not been successful.

    ReplyDelete
  6. Hello Scholar Henry. I know you directed your question at anyonymous but I'm not sure if they're still watching the thread or not. I've never gotten an update. I hope you don't mind if I jump in.

    I recently upgraded to CC, myself, and I was able to install the plug-in with no problems. Do you have Photoshop installed in the default directory? The default is C:\Program Files\Adobe\Adobe Photoshop CC (64 Bit).

    ReplyDelete