Important: The following tutorial was written back in 2010.
A lot of it still makes sense, but some parts should (and will eventually) be revised to include the concept of PBR materials.
Brief Considerations About Materials
I originally made this tutorial for a lecture I gave at CCAA, a school in Brazil where I help running the Post-Graduation Course on Game Art.
It came from the necessity to explain some elements of the materials that are commonly misunderstood. Especially about Specular Maps that, sometimes, seem to be a bit more obscure for most people.
Most artists, in general, have a pretty good understanding of diffuse, normals, alpha, but it’s often on the specular map that they will get lost and some times even ruin a pretty good asset.
I hope you enjoy it.
Textures and Shaders
If the shape of an object, in 3D, is the result of its geometry, the material from which this object is made of is the result of its shader and textures.
Shaders are instructions that tell the render how an object should be displayed.
Textures are images that provide visual information to the shader. They can be extracted from real life photographs, they can be digital paintings, or even procedurally generated.
In this way, we use textures as inputs of a shader, defining attributes such as color, reflectivity, transparency, roughness, brightness and other characteristics of a possible material. Out of these textures, the most common are:
Specular (and Specular Power – aka Glossiness)
Normals Maps will change the normals of a given surface. They will make the light bounce off the surface as if it had hit something other than just the polygons.
Alpha Maps define transparency. It can be on materials such as water, glass, fire, smoke… Or it can also be used for creating different silhouettes, gaps , rips on simple surfaces.
So, in some ways, if we disregard the truly transparent or translucent materials, like glass, where the transparency is at the core nature of the material, it would be ok to say that Alpha and Normals Maps alter how we see the shape of an object more than the material itself.
Self-Illumination or Glow only defines parts of the object that emits light, that glows in the dark.
Thus, transparency, embossing and brightness are material characteristics conferred by the respective use of the following maps: Alpha, Normals and Self-Illumination.
But what about all the other aspects?
Those that really define the nature of a material …
Is it light or dark? Smooth or rough? Clean or dirty? Reflective or matte? It is made of metal, clay, wood, plastic? Is it wet or dry? Rusty? Stained? Scratched? Old and worn, or brand new? …
All these variables, and many more, are controlled by two maps:
Diffuse and Specular (well, maybe three maps, since there’s still the Specular Power. But because this one only affects the specularity, I’ll consider it as part of the Specular slot).
But what are they?
Everyone who works with 3D has at least a basic understanding that Diffuse is the color of an object and Specular is the light reflected on its surface… The highlights. But this definition is somewhat simplistic.
We must remember that everything we see around us in the world is only visible because they are reflecting light. In essence, everything we see, if it doesn’t emit light, reflects light.
As on this example, the light-bulb will emit light on all directions, some of these rays will hit the teapot. The teapot will absorb part of the rays, in this case mostly the blues and greens, and bounce off the reds. Some of these bounced rays will pass through our pupils hitting our retinas, and this information will be sent to our brain so we can finally “see” the teapot.
The thing is, there are two ways this reflection may happen.
In this type of reflection the light is reflected from the surface at multiple different angles.
In this type of the reflection the light that comes in and reflects out from the surface make the same angle.
In reality both type of reflection will coexist on most objects, varying on intensity from one type of surface to another.
So, the shader will use the information contained in the diffuse texture to define how the light that hits an object is partially absorbed by its surface and also diffusely reflected.
And the Specular texture will define how the specular reflection will happen.
But, if both Diffuse and Specular are types of reflection that coexist on any surface, why aren’t they only one, and why they may have different colors? As in this case, of the chess pawn, with a brownish (wood) diffuse reflection and a white specular reflection?
At this point an important information needs to be added to this equation. Physical/chemical characteristics of a material will affect how the light behaves when hitting its surface. Depending on the material’s nature, the specular reflection may remain true to the original color of the light, or may be tinted by the color of the object.
So, on this example, the specular reflection on the toy and the chess piece maintains the original color of the light (white), while the specular reflection on the door knob or the Christmas tree ball is tinted by their colors.
For the purpose of our needs, we may reduce the materials to two basic different types:
Dielectrics and Conductors.
Dielectrics materials do not conduct electricity. Conductors do.
So, in a very non-scientific way that should only be used by artists and not someone writing a science paper, we could say that Conductors are all the metals or metallic looking surfaces, and Dielectrics are all the non-metallic surfaces, such as wood, plastic, rubber, clay, fabrics, etc.
And what is interesting for us to know is that Conductors alter the color of the specular reflection, tinting them. While the Dielectrics materials will be neutral to the light and not affect the color of the specular reflection.
(There are some very interesting information on the web showing how the electrons of conductor or dielectric surfaces are aligned in specific ways and how it affects the light that bounces on them. But for the solely artistic purpose of this study, knowing that it happens, and not all the details of how it happens, is enough).
Also, in the case of the Christmas tree ball, that is made of plastic but still has a metallic look, that’s because it was painted with a metallic finish. So it’s made to look like metal. The same way if something made of metal is painted with a truly opaque paint, they will reflect as dielectric, and not as conductor, because the external layer that is reflecting the light is not of conductive nature.
So, if you want to create a material in 3D that truly recreates the physical aspects of an existing material, you have to understand its nature and how it affects the light.
Ok, we understood how real world materials behave, but how you replicate that in 3D?
In order to do that we must get one bit of technical information.
It is very important for us to know that, during the rendering, diffuse and specular will be calculated on two separate moments.
First the diffuse reflection will be calculated, then the specular reflection.
Then, right after that , one is added to the other for the final result and the object if finally drawn on screen.
If you keep in mind that all specularity is simply ADDED to the diffuse (as a simple mathematical addition) we start understanding how this part of the render works and we have a little more control over it.
Think about the colors in a shader as number that go from 0 to 1 in the RGB scale (yeah, not 0 to 255). So 0-0-0 would be black, 1-1-1 would be white, 0.5-0.5-0.5 a mid gray, 1-0-0 red, 0-1-0 green, 0-0-1 blue, and so on.
If you know the values of your diffuse color, and you know the values of your specular color, you just need to add these three numbers individually to see the result of the specular reflection on top of the diffuse color.
It will be through the good understanding of how this works that you will be able to represent the true nature of a material (dielectric or conductor).
If you need to create a Conductor material it is simple. You just need to use the same color of the diffuse as the starting point for your specular map. So, if you are making something made of gold, your diffuse and specular will be of some shade of yellow, if it’s copper, some sort of brown/orange…
This way the base color of the object (diffuse) and the highlights (specular) will be of similar hues.
Of course you may change the intensity and even vary the hue a bit for achieving the specific look you are trying to get. But you will probably want to stay close to the original diffuse color range.
But in the case of a Dielectric material, the light that is reflected as specularity is not affected by the diffuse color of the material. It maintains itself neutral. If the light is white, the reflection will be white, if the light is blue, the reflection will be blue…
So, in this case, it would be reasonable to assume that the specular map for dielectric materials should have no colors at all, right? It should be grayscale… correct?
Well, not really. In order to get a good non-metallic result (neutral specular color), we need to neutralize the specular reflection using the inverse color of the diffuse.
Because, in RGB, whites and grays contain all colors. Since they have all colors, they will also contain the diffuse color, and once you add this portion of the diffuse color, contained in the grays of the specular, on top of the original diffuse, the result will give the material a metallic aspect.
As you can see here.
If you add a green specular on top of a green diffuse, the specular reflection will be a bright saturated green, which is a very metallic characteristic. If you add a gray specular on top of a green diffuse, the specular highlight will still be tinted green, not as much as before, but still making a metallic, conductor, aspect. But, if you add a specular color that neutralizes the diffuse color, such as this magenta, the end result is neutral, in this case, white. That means that the color of the light will not be affected when being reflected as specular highlights, giving you the impression of a dielectric material.
See how it completely changes the nature of the materials?
Alright, so now we know how different types of materials affects light in specific ways.
And we also know that, on 3D, the specular highlight is the result of the specular color being ADDED to the diffuse color… But how can one benefit from this?
The great thing about it is that once you understand this you can have a solid starting point, instead of just guessing what color you should use. And that saves a lot of time :)
So, as a general rule for creating your specular maps, first step: using your diffuse texture as a guide, separate the areas that should be metallic looking and the ones that should be dielectrics.
With the dielectric selection, create a Hue and Saturation adjustment layer and simply slide the hue slider all the way to the end. This will hue shift it to the inverse hue value, the one that neutralizes the diffuse color under the specular reflection.
You will still need to adjust all other values, such as brightness, contrast, levels, any specific detail you may need.
And, of course, you may want to change the hues for achieving a specific aspect that you are looking for the asset, but in terms of first step for the colors, this is a pretty good start.
But what if, besides this all, you could also get a preview of how the specular reflection will look like when rendered, directly in Photoshop, or any other software with layers and blending modes?
That can save some time as well :)
The cool thing is that, you can!
As mentioned before, in order to see the result of the specular reflection on top of the diffuse reflection you just need to add their values. You can do that in Photoshop using the Linear Dodge blending mode. This mode simply adds the values of the current layer and what’s underneath it.
So, if you paste you diffuse texture on top of all layers of your specular texture, and set it to Linear Dodge, you will see the color of the final specular render under a white light.
Look at the following example.
This is the diffuse texture.
And here is the specular map.
Notice that the ones on the left are respecting the true nature of the materials, wood (dielectric) using the inverse color of the diffuse, and the metal (conductor) with same colors as the diffuse. It has some scratches and a little more contrast, but it’s still very similar to the diffuse in terms of hue.
The ones on the right are not good, they are just wrong. Wood specular matching the wood diffuse, metal specular with inverse color.
Now, if you put them on layers like in this image bellow. With the diffuse on top of all the layers of the specular file, and set to Linear Dodge.
The result you get is this:
This result will never look very good because it’s like having the specular reflection on top of everything, as if there were several different light sources illuminating the surface from all possible angles. But you can already feel that the reflections on the left look more natural than the ones on the right.
Now, lets make this a little more interesting…
What about having a preview like this one here, in Photoshop?.
To do that is actually quite simple.
Bellow the diffuse layer, in Photoshop, create a group and make it multiply.
In this group add two new layers. The bottom one you will fill with black. On the top one you will create some white spots, faking the shape of the specular reflection that you would expect to see on the surface.
Now, you just need to drag the spots around to see how the specular reflection works for this material.
Pretty cool, right? :)
Of course, I don’t keep these layers visible all the time while working on the specular texture. Sometimes I just don’t use them at all. But every time I want to be sure I’m heading on the right direction I’ll toggle them on and off, and move the small white spot around, to see if I’m still on track.
You may be curious about skin reflection. After all, a good skin reflection will be hued as a dielectric material (inverse of the diffuse color), but our skin does conduct electricity. Yeah, this is true. But our skin is a far more complex material, with several different layers and elements – epidermis, fat, oils, muscle, tinny hairs, sweat, salt, etc. Maybe the mix of these different elements results on a dielectric look, or maybe because oils are not conductive of electricity, and they are on top of all layers of the skin, the final appearance is dielectric… I don’t know really :) – hey, I said this is not a science study ;) But it’s true, if you are trying to make a specular map for skin, you should use the inverse color of the diffuse.
I hope you find this useful!
There are some other things you could do in order to make this preview of the specular reflection even more interesting. But I’ll leave it for a next tutorial.