Material system basics -tutorial

Here's a tutorial I made maybe a year ago, but now I have updated it and added some pony in it, just to make it more practical (and to make it possible for me to post it in groups). If you see errors, mistakes or something about lemons, let me know. Also, sorry about the huge pictures if they give you trouble...


Example about what you can do, all in game.

I'm sure there is a good amount of people who know what they want from a model but don't know how to do it. Everyone is a beginner once and what would be easier way to change models appearance than making a new texture or adding some nice effects to the skin? At least it's easier than modeling and some material knowledge is always required in all modeling projects.

Now, I'm not an expert at making textures or skins, I know just enough to recolor stuff, but editing materials is another thing. So, I'm going to cover some basics of material side of the models for Source, like base texture, bumpmap, alpha channel and effects like selfillum, specular, transparency, phong and lightwarp. There are plenty of other stuff but these are the ones I need regularly. And no, I'm not going to tell how to use GIMP or Photoshop, that you'll have to find out yourself. Sorry.

All materials can always be located under the materials -folder in (username)/garrysmod/garrysmod or inside an addon. There are two file types needed, .vmt (Valve Material file) and .vtf (Valve Texture File). Material file is the one the model will always look for and includes all the data needed for finding all the texture maps and adding effects for them. Texture file can be the texture that is drawn on the model, a bumpmap or some type of mask (Will be explained later).

So, you need some tools to open those files. The most handy tool for material editing and converting textures is VTFEdit, but there are .vtf importer and exporter plugins for Photoshop and GIMP and material files can be opened with Notepad++. Once you have opened those files, you might want to edit them so a image manipulation program is needed, some good ones are GIMP, Paint.NET and Photoshop.

Links:

VTFEdit:             nemesis.thewavelength.net/inde…

Notepad++:         notepad-plus-plus.org/download

GIMP:                 www.gimp.org/downloads/

Paint.NET:          www.getpaint.net/download.html



Plugins for .vtf importing/exporting you'll have to find yourself.

Converting textures

So, first you need to convert the texture to something more common format so you can edit it. Open the texture with VTFEdit, then click File and export. You'll get to choose the name and the format, I suggest using .tga's and keeping the filename the same. That's because in the case of complicated filenames it will save time when converting them back to .vtf and .tga has the best quality as far as I know.



After you have made your changes, it's time to convert it back to .vtf. This is a bit more complicated but once you have made some adjustments, you don't have to do them again unless you remove the program. Click File and import, and select the texture you want to import. Then select these options:


This way the quality will be the best possible. Under "Texture Type" you can find Animated texture, Environment map and volume texture. Animated texture is used on models, environment map on world textures and volume map on masks like phong exponent mask (will again be explained later). Texture resizing is needed when the texture resolution is not a power of two (example: 512x512, 1024x1024, 512x1024). Mipmaps are an optimization trick, the quality gets lower the further you are from the object, mostly unused in community made skins. And finally Normal map, which is the same as bumpmap in this case. This one is handy when you are making your own bumpmaps but I'm not going there this time. In Advanced setting there is the version number, set it to 7.4 if it's not already. I don't know if it affects anything but better safe than sorry After you have set those settings, hit Ok and save the texture with the original name.

Textures

Base texture
So, most people usually just modify the base texture when they make skins. Base texture is the only thing required in the material file for the texture to show up on the model. The most simple possible material file looks like this:

"VertexLitGeneric"
{
        "$basetexture" "models/mlp/poninnahka/vest_darker"
}

And the result looks like this (the darker part of the vest):

Note that the filepath is under the materials -folder, meaning that the path is really "materials/models/mlp/poninnahka/vest_darker".

As I said, most people just edit the base texture when they make skins. Just edit the .vtf directly using plugins or convert it to some common format, edit it and convert it back to .vtf and replace the original texture with it. The changes will show up in game, no need to do anything else, handy for simple reskins like recolored mane, patterns etc.

Bumpmap
Basically bumpmap (or normal map, Valve calls normal maps bumpmaps for some reason) is a way to make the model look very detailed without creating extra polygons. The most effectively made models don't have too much polygons, just enough to make the general shape, and the rest is handled with bumpmap. Only small things like wrincles on clothes or small bumps on skin can be made with bumpmap, bigger things like horns cannot.

Bumpmap comparison with a white texture:


Bumpmap is defined in the material file like this:
"VertexLitGeneric"
{
"$basetexture" "models/mlp/poninnahka/vest_darker"
"$bumpmap" "models/mlp/poninnahka/vest_darker_n"
}

In most cases adding a bumpmap is not necessary, only if you add something that would change the surface (like scars, skin tight clothes, you'll get the idea) you need to change the bumpmap for the result to look good. Programs like GrazyBump would be ideal for bumpmap generating but I just make simple black&white textures and turn them into bumpmaps with VTFEdit. Bad solution in a long run, but does the job.


Alpha channel
Every picture has at least three channels, red, green and blue, but some pictures have fourth channel, the alpha channel. It's like the transparency of the picture and shows up as grey&white chess board, the more visible the alpha channel is, the more transparent the picture is. Since alpha channel is part of the texture, it's not defined separately in the material unless it has some special purpose.

Alpha is used for various purposes in Source. When the base texture has the alpha channel, it can be used as a mask for transparency, phong exponent, phong strength or selfillum instead of using separate mask textures, and they have to be defined in the material file. On bumpmap it's used as a mask for phong strength by default. More of these later, at this point you only need to know what an alpha channel is.


Effects

Now we're getting to the fun part. Since textures are somewhat covered, it's time to add some effects.

Selfillum
Selfillum means self illuminating or glowing. When selfillum is applied, the model won't have any shadows, the texture is drawn on the model exactly with the colors that are in the texture, so the model appears to glow in the dark. It doesn't look good when used incorrectly, but when it's used as it should, it can make some nice effects, for example the glowing eyes of a combine soldier in HL2 or in ponies case, powerful gems, energy sources or streams etc. I know I've seen some weird ponies around, those are valid examples.

Here's an example, Twilight's magic effect made with a (quick) texture edit and selfillum. The effect isn't as noticeable in the pic as in game:

(actually, I had to edit three textures to get the glow look like it's reflected)

Selfillum can be applied with a simple command "$selfillum" "1" in the material file and if the base texture has an alpha channel, it will use it by default. The less alpha the texture has, the more visible the glow is, meaning that in the horn texture the whiter, visible parts glow brighter than the ones that have some transparency. This effect CANNOT be used together with $translucent because they will screw each other up, everything else being invisible except glowing parts, or visible parts having no shadows (same thing).

NOTE: If you use selfillum and want to use phong at the same time, you can't use the texture alpha as the phongmask since selfillum is using it. Make a simple, flat 16x16 bumpmap and use that as phongmask, the result will be exactly the same.


Envmap
Envmap means environment map (not the same as the texture type in VTFEdit) that is reflected on surface. In other words, the world you can see on reflecting surfaces like glass or metal. In Source it doesn't mean the world around you is reflected. Almost every map has (you'll know if it doesn't have) environment cubes places everywhere around you. Environment cube consists of six low quality pictures taken from one point, each picture being one face of the cube. These cubes are invisible and can only be seen from the reflective surfaces.


There are a few commands for the envmap, first being "$envmap" "env_cubemap" which enables the envmap to use the environment cube. Second useful command is "$envmaptint" "[  ]" where "[1 1 1]" is the default. You can use this command to change the color of the reflection (faint red reflection on gun sights) or just decrease the value the object reflects, for example "[0.5 0.5 0.5]" reflects only half as much as the default values.

You can also use masks to change the strength of reflection. The mask can be a separate texture or the alpha channel of the base texture, or if the model has a bumpmap, the mask has to be the alpha of the bumpmap. With the command "$envmapmask" "path here" a separate texture will be used. The separate mask should be black and white texture where more reflective areas are lighter and less reflective areas darker. With the command "$basealphaenvmapmask" "1" it will use the base textures alpha channel where more transparent areas reflect more and less transparent areas reflect less, and the command "$normalmapalphaenvmapmask" "1" will make it use the bumpmap alpha channel. Again, if the model has a bumpmap enabled, envmap won't work unless it's using the bumpmaps alpha as a mask.

Note that this method is old and not that much used. It will look good in pictures and in small reflective areas like lenses, but on bigger objects the transition while moving between environments (when you move for example from a room into another) can be seen very clearly and it's not too pretty. Use with caution.

These still need to be confirmed, things changed quite a while ago and I haven't used envmaps efficiently in ages, so use with caution.


Transparency
This one doesn't need much explaining, basically when the base texture has an alpha channel, you can turn the transparent areas invisible. This is mostly used on hair, ripped clothing and glass.

There are three commands you can use to make things transparent, first being "$translucent" "1" which makes the alpha channel invisible. It means that you can have partially invisible pixels in the texture. The second command, "$alphatest" "1", is less pretty, but works a lot better in most cases. The drawback is that it will make all pixels either fully visible or fully transparent, so the edges will be, well, edgy. On the other hand, you can use bumpmaps and phong with alphatest, while they might not work with translucent as well.

The last command to make texture transparent is "$no_draw" "1" and it must be the first command in the material file, example:
"VertexLitGeneric"
{
"$no_draw" "1"
         "$basetexture" "models/mlp/poninnahka/vest_darker"
"$bumpmap" "models/mlp/poninnahka/vest_darker_n"
}
This will make the texture fully invisible, doesn't matter if it has alpha or not. This is also known as the "vmt-trick", very useful for removing horns or wings from models you're editing if the model doesn't have any bodygroups or you don't know anything about modeling. Note that it won't remove the mesh, so dynamic shadows are still effective. Alphatest with a fully transparent texture might be in order if you prefer using lamps in dark areas.


Phong
Most of you don't know this but I started my modding career by adding and tuning bumpmaps and phong in Counter Strike: Source right after it got its first engine update. There are several commands for phong and getting it perfect takes quite a few tries and everyone has his own taste of how it should look.

So, phong is like a reflected light from a surface. You can use it to make the skin seem matte, greasy, or shiny with different values.

Here's an example, the vests darker part with a bumpmap and a weak phong enabled:


Here are the material files contents:
"VertexLitGeneric"
{
"$basetexture" "models/mlp/poninnahka/vest_darker"
"$bumpmap" "models/mlp/poninnahka/vest_darker_n"

"$phong" "1"
"$phongexponent" "20"
"$phongboost" ".1"
"$phongfresnelranges" "[.2 .5 1]"
}

These commands are basic commands that are pretty much the only ones needed for phong. "$phong" "1" enables the phong shading, the rest need some more explaining.

$phongboost
phongboost controls the strength of the phong, default value being 1. The bigger the value, the stronger the shader. If your model has a bumpmap, its alpha channel is used automatically as a mask for phongboost and you can still adjust the strength using phongboost.


$phongexponent
phongexponent defines how large area the phong shading will cover. Unlike with phongboost, the values are reversed, so the bigger the value, the smaller the area is. Usually people use values between 1 and 50 since that range gives enough variety. You can also use "$phongexponenttexture"  and a black&white texture to have different exponent values between different areas in the texture, white having smaller area and black wider.


$phongfresnelranges
phongfresnelranges define how the phong strength changes in different viewing angles. The command is "$phongfresnelranges" "[.05 .2 1]" and each value is for different angle. First value is for 0 degrees, like you were looking directly at a wall and the value is the multiplier how bright the phong is in that angle. The second value is for 45 degrees view angle and the third is for 90 degrees angle, again the value being the multiplier. While most people use values between 0-1, you can also use bigger values, for example "[1 3 8]" in which case small phongboost is in order.

$phongtint
phongtint is the color of the phong and can be used with the command "$phongtint" "[  ]", default values being "[1.0 1.0 1.0]". For example L4D characters have blueish tint.

Rimlight
Rimlight is like a glare that reaches on the surface from behind the model when a light is located behind the model. It acts very similarly as phong, so the commands are pretty much the same. "$rimlight" "1" enables it, "$rimlightboost" controls the strength and "$rimlightexponent" controls the area size. Notice that phong needs to be enabled for rimlight to work.

Example, see vests darker part:


Phong- and lightwarp
Lightwarp is one of the finishing touches the skin might need. It's usually a 256x16 texture that goes from black to white from left to right. It's used for defining how the light levels change from shade to lit area, for example if the left end of the texture is white and right is black, the shadows are all backwards. It also defines if the shadows are smooth or very sharp, or if the shadow has a certain tint, for example I use the different lightwarps for golden and silver surfaces, both are shamelessly taken from TF2's Dead Ringer and the Ambassador.

Example, only thing changed here is the lightwarp texture. Light position, texture and phong are the same:


Phongwarp is exactly the same thing, but only affects how the phong level changes.

I think that was all for now, I didn't cover everything but hopefully enough so people don't get all stuck right at the start. Also note that there might be some errors, so if you notice something is wrong, let me know.
make sure to check this out: developer.valvesoftware.com/wi…
Some data may be outdated but it sure has helped me when I was a beginner.