Basic GLSL shader demonstration/tutorial (lots of images), now reviewing hair and fur

Okay, till now I have seen many incredible shaders and filters achieved by using python scripts (that can make computers go low on fps), super high resolution textures probably from a several-megapixel-camera (witch the graphic card will downsample anyways), super high density character meshes (that most probably won’t work on any game), but somehow it feel that a demo using the basic stuff that blender does out of the box is kind of missing. So I’ll try to fill in the gap.

You should see 2 images, a set of 3 pictures and a set of 6, I’ll be explaining using this last one, the first one showing all special effects and the main textures separated and then together.

Checking Blender site reference:
http://www.blender.org/development/release-logs/blender-248/realtime-glsl-materials/

I’ll be focusing in this first post on the following (Check out the pictures):
-Col map (diffuse)
-Hard Map
-Normal Map
-Stencil Map
-and clever and cheap reflection trick :stuck_out_tongue_winking_eye:
-I’m not covering -yet- other uses because this file is already a bit… overcrowded with maps xD

The following character shader is achieved using only 1 material, and at the same time will be properly setted up so both renderer and real time engine shows the same (this doesn’t mean it’s perfect, just… versatile).

Important note: the way I’m using all of this in this demo is a bit of an overkill, and my normal map is a bit not-so-well-made, beware.

Important note 2: there a link to a file, there is this character and the textures packed.

Important note 3: this character and her diffuse texture are from the open source game Open Arena, not me. The implementation on Blender and normal map and other textures were made be my but use them as you wish.

Let’s begin:

1: From the beggining.
When you give an object a material, this mean you will give to this object surface a several properties, the 2 most obvious is diffuse and specular values. The diffuse (or col) is the colors of the surface (check out the first image of the 6 picture set), as simple as that, and the specular shade is the amount of shininess of the surface.

This shininess is controlled in fact by another factor, witch is the HARD value, this tell how glossy is the surface, while the specularity is the amount of light is reflected, you control the hard value using black and white textures being white for ultra glossy surfaces and black for the contrary, when using this map make sure you have the hard value in a low number, this will be the starting value for black being white the maximum (check out the 4th image of the 6 picture set for a single surface with 2 values of hard). IMPORTANT: you got to set it as NO RGB.

2: Bumpiness
The following map to discuss is the famous normal map, in some software a black and white texture that shows the height of the bumps is enough, but not in blender, you will need the multicolored one.

Blender can bake a high resolution character on a low resolution one easily (use search option in the forums, not gonna explain it here), or you can draw a white and black height texture then use the Gimp to transform it (not gonna explain it here either, plenty of tutorials on google).

A normal map can simulate bumps on a flat surface, shading it so it affects both shadow on diffuse and specular light, but also reflection and hard maps. (check out the 5th image of the 6 picture set). When you load this texture is really important to tell blender that it is a normal map, if not it won’t work (also sometimes it won’t show the effect right away, saving and reloading, or modifying a light may solve this).

3: Faked reflection can be cool too, plus stencil!!
Now I’m gonna focus on the 2nd and 3rd picture of the 6 images, on the third one I gave a reflection texture to the character on the material, to achieve this 2 steps are needed, first when you give it the reflection texture, in Map input instead of “UV” you got to set it to “Normal”, this will make the texture to “follow” the camera. Next you got to set it to Col (as a normal diffuse texture) but instead of MIX set it to ADD.

Great now all your character is reflective… to solve this we use the stencil map. Also a black and white image, you have to uncheck it the col button, and check the Stencil button and NO RGB button.

This maps works occluding the map that is below it in the maps stack (the texture over it isn’t actually occluded but since another map is going to be put over it, then it gets occluded, got it?), done correctly the reflective character should turn into the same as the 2nd image, instead the 3rd one.

Stencils are normally used to make sand and grass to mix easily on the scene ground and things like that.

It was that hard wasn’t it, and the result is… a bit of too much but I gess it was instructive I hope ^^.

Demo file:
Neko

Another thread about texturing:
http://blenderartists.org/forum/showthread.php?t=186920

Attachments







Sorry the last one for a close up :stuck_out_tongue:

Attachments


I made an update to the file, changed all TGA image files with PNG files, reducing the filesize.

Also I added a few Maps (the hair material, where there are a couple of other maps, I’m gonna explain it later.) But for now I’ll be focusing on a new one on the body material:

7- The Emit map.

As showed on the images I only added a bit of color on the eyes of the character. The emit material can make areas of the shader to be iluminated even is there is no light source, this is used in this example to make the pupils of the character to be brighter, and at the same time when there is NO light, to make only that visible.

This map is used in grayscale and the option NORGB has to be used, I tried using it wih colors but didn’t work, and didn’t bothered to change it again xD.

Attachments


Now I’m explaining the hair, but I’m advising you, this material was mostly done to show examples of the different maps on the material panels, sadly I didn’t manage to get something that looks realistic, not even good.

For better info on hair shading check this out for example.
http://developer.amd.com/media/gpu_assets/Scheuermann_HairSketchSlides.pdf

Now let get into the hair material, here I used 4 maps:
-Col/difuse map
-normal map, both of these already explained.
-Alpha map
-Specular color map

Alpha Map:
For those who don’t know, when we talk about alpha, we are talking about the transparency of an object, 0 being invisible, 1 opaque.

The alpha map can control the transparency of the surface using a grayscale texture, set with NORGB, and putting the material with 0 alpha, this way the texture will have full control on the transparency of the object.

Before continuing, is important to note that nowadays Blender has a usable alpha support in real time, but issues seen from before version 2.45 are still visible on some circumstances, the old alpha sorting problem.

Alpha in the BGE, either be GLSL mode or multi texture mode, is controlled by textures, materials and the Texture Face panel, check out the small image to see this panel.

The alpha button enables transparency, while opaque disables it (not in GLSL), add makes the transparency works adding the colors of the object to whatever that is behing, and clip alpha that enables alpha but only in a 0 or 1 (binary way). 50% alpha gets disbled.

In the 8 set images I show in the first 5 different results, the image 2 and 3 are the same, the one with blue background is with the engine started, showing the alpha sorting problem, being the 4 image a easy way to solve it disabling 2 side-faces, but you get the issue that can only be seen by one side. A more secure solution is using clip-alpha, it doesn’t make alpha sorting issues, but is a bit uglier.

Another solution could be duplicating the mesh and flip the normals, using alpha and not 2 side-faces, you will have to test around.

When using alpha on the BGE in GLSL mode, I seriously recommend using this method instead of using PNG files with transparent areas, done incorrectly and white borders will appear once the engine starts, specially on computers with ATI graphic cards.

Specular color Map:
You may be noticing that the hair has an ugly multicolored shines, this is achieved with this map. It allows you to control the color of the specularity in the same way as an single texture, this may be more useful on racecar surfaces for example, this way a red and green car for example can have a brighter red and glow on their respective areas and not a single boring white glow. Using this feature correctly may prove usefull, but handle with care.

Attachments



Okay, it’s been a while. Last time I ended talking about the kind of maps that you can use in a material and some issues about materials with alpha.

In general I found that the character showed here ended pretty good, with the big exception of her hair. So investigating (googling) a little I found some solutions that I’m gonna explain starting now:

Firstly , here is the website I using as a bibliography:
http://www.paultosca.com/varga_hair.html

And here is the File:
http://sites.google.com/site/bgeatelier/file-holder/hair.blend?attredirects=0&d=1

As that tutorial explains, for creating nice looking hair strands, at least 4 maps are needed, in the images you can see the hair in alpha and clip-alpha mode, and the 4 maps separated:
-diffuse map for the hair color
-specular map for specularity
-normal map for surface bumps
-alpha map for transparency

In general the diffuse, specular and alpha map are pretty straight forward to understand and make, being the normal map the less obvious.

As the original tutorial explains, its not only about making the normals of every single hair, but seeking the general shininess of the hair, the curvature of the surface, as can be seen on the separated maps, the normal and specular one are in the center together and you can clearly see that the flat plane with normals look really good as hair already (but needs alpha and a more natural color of course).

Okay now the fur, this is hard to achieve because of the amount of resources that are needed, if we do it using the method explained in the following site:
http://gameartisans.org/forums/showthread.php?t=13031&p=193687
(you got to scroll down quite a bit)
Also the following PDF’s solution is better looking but even harder to achieve:
http://research.microsoft.com/en-us/um/people/hoppe/fur.pdf

The general idea is (check the picture with a 4 layer shell of red fur):
-setting up the surface with a solid diffuse material (base mesh not showed on image)
-over it making several shells, with alpha mapped materials (in the images alpha and clip alpha example)
-the alpha map are dots, so the outer shell has smaller dots and the inner shells have them bigger, this way a ‘hair’ shape is formed within the shells

In general it is discussed that you got to achieve the fur effect in 4 layer, because that way the character, or scene, polycount will only be augmented 4 times (a 1000 quads character would go up to 4000!), but its clear that most of the time 4 shells aren’t gonna be enough.

An easy way to achieve shells on a custom-shaped figure (I mean a character that isn’t a plane or a sphere), you got to go in edit mode, duplicate the whole surface, here I recommend separating it from the base, pressing ‘p’ on edit mode, then on the shell surface instead of making ‘Skey’ to scale it, do ‘ALT-Skey’, this way the faces will be scale according to their normals.

That’s all for now!! Don’t be shy to ask anything.

Attachments






As you may have noticed, I always talk about using a map specially for alpha, why is that if there are PNG image files that already comes with alpha?

The reason: check out the following images, as you can see (btw: in them it’s showed how to set up the material to work with the alpha on the image), in GLSL you can load a PNG file with alpha as you could do with Multitexture mode.

BUT as you can see in the images, the texture only has a blurred red dot on it, why is there a white (then black) aura surrounding it?

Thats because that other color is the color of the material without the texture, and there seem to be an issue about how the alpha of the texture works the alpha of the material, the texture just doesn’t fade away the material as fast as the texture itself.

The funny thing is that… this is NOT a bug! The renderer also does this so it seems its some kind of weird feature…

So that means you got to always make material with alpha maps and materials?

Not necessarily, whenever you add an object a material you are literally saying “this objects works using GLSL”.

BUT if you give an object a texture without giving it a material, this object will works just as it does in multitexture mode, ignoring GLSL. This means it will not be affected by shadows, it won’t be shaded the same way as glsl objects, etc. while the game is RUNNING, out of it it will look like a gray object.

That’s it!

Attachments




The following images show the fur method previously showed applied on a serious example:





As can be seen in the wireframe, it’s only a fur of 5 layer, other screenshot shows the layers working but tinted with color so to see them separately while working, and the last screenshot showing the end result, this fur uses only color, specular color and alpha maps, but each layer has its own material.

Notice in the end result, part of a layer kinds of float in mid-air, this is because the 5 meshes are exactly the same geometry, witch means that all vertexes and faces are evenly spaced, if you pull together the external edges of the meshes so they don’t get far appart, this issue gets solved, since the important part of the fur is around the area of the middle.

Very cool!!!

Thanks Leonn.
fu.blend (605 KB)
Lol, here is the file so you can check it up, the main and alpha textures are packed.

That is cool.

Unfortunatly I do not have GLSL support :(. Edit: Hey the above file still works pretty nice :D.

I tried with such methods as well, but in Multitexture it does not look that well, or I’m just not able to make it good looing ;).

To generate the shells I recommend the Solidifier script that is delivered with Blender. It can be found under Scripts/Meshes/Solidify Selection.

If someone needs the inside faces of a shell, I can provide an extented version of the solidifier that can generate these faces too. This might be handy when you look from a flat angle at the edges of the shell.
Edit: But I couldn’t find a good lighting setup for these faces. Their normals are around 90° to the normals of the shell faces and might disturb the look.

Hi Monster, sorry for the late reply.

Yes this setup was intended to work with GLSL, esencially because I find that normal Multi-texture mode tends to mess up alpha sorting more easily than GLSL, but here I upload a file with the same result on multitexture mode, but had to disable two-faces on the multitexture one, also the texture are a bit downsampled to half resolution because png with alpha are a lot bigger in file size, but it looks pretty much the same.:wink:

I also found out the same thing, making shell fur is not only about making a great looking fur texture and giving to it a few layers so “it looks volumetric”, the way you work with the alpha of these layers is also part of the key, be it the texture or the alpha map, if one of those look bad, the end result will be bad… hard stuff isn’t it?:spin:

About the shell modifier, in the previous post I showed it as a way to get the shells faster, but personally I find that doing them by hand, you get more control and can avoid the “floating hair cluster” issue that happens on certain angles.:cool:

furNOGLSL.blend (524 KB)

Wow, its was awesome. thanx for sharing.

Will you be updating the blender.org manual with this?

I don’t know how to submit it to blender.org actually, but I’ve been thinking on redoing the whole tutorial with a more appropiate character. Maybe releasing it as a pdf? Not sure really, if you can hint me on how to submit it to make it a bit more formal it would be usefull :D.

This thread should be sticked I often open it up to see something about the shading methods. This information is very good to BGE

Thanks for bumping leonnn, or I wouldn’t have seen that great Fur Example, very well done Cloud_GL! Of Course the Technqie is well-known to me but seeing such an accurate Example helps out a Lot on understanding how to actually do it. Thanks. :slight_smile:

EDIT:
And thank you very much for hinting on that [Alt+S] Scaling Method, Cloud_GL! That is one of the Things that I always needed and never even knew existed in that Form! :smiley:

I want to bump this thread this should be a stick thread.