Revision as of 22:27, 13 December 2012

About Shaders

What is a Shader?

• In the Cube 2 engine (and many other engines), shaders are used to change a texture without actually changing the texture itself. How? A shader will take a 2nd texture, based off of the original, and will apply a special effect based on what kind of shader you use and the texture provided for it. Keep in mind that some textures won't really need shaders, and that adding a shader could end up making the texture look bad.

What kind of shaders are there?

• There are many different kinds of shaders, and you can combine some of them. Here's a basic list of common shaders:

Bump/Height

• A bumpmap (which may go by other names) is a greyscale image which bumps parts of a texture up or down (raising or lowering parts), based on the color. In a bumpmap, white (rgb 255, 255, 255) rises and black (rgb 0, 0, 0) lowers, while grey (rgb 127, 127, 127) is even. Bumpmaps can be combined with virtually any other shader, and some only work with bumpmaps. Bumpmaps are designed for adding "scratches, dings and bumps" to models or textures.

Normal/Height/Displace

• A normalmap is a red-green-pinkish purple colored image which is more accurate than a bumpmap. It does the same purpose, but on a more accurate and better scale, changing light reflections of certain angles to provide perspective. It's also harder to make.

Decal

• A decal is an image which is added to an image after something happens to that texture. In Cube 2: Sauerbraten, decals are used to add bullet holes to textures.

Glow

• A glowmap allows a texture to glow in the dark.

Pulse

• Like a glowmap, but the glowing "pulses". It's like a light being turned on and off, back and forth.

Specular

• A specular map, or specmap, controls the amount of light a texture, or an area of a texture, receives or reflects. Specular maps are lighter (closer to white) when they reflect more light, while they are usually darker (closer to black) when they receive light and don't reflect it. A specular map of rock, for example, would be relatively dark.

Creating and Adding Shaders

• There are two parts to creating a shader and applying it to a texture: actually creating the shader map (based off of your diffuse, or color, map) and scripting it in (so the shader is applied to the texture within Sandbox).

Actually creating the texture

Bump/Height

• Bumpmaps can be made in a variety of ways.
  • Note: if you test your texture with shaders and see something really weird, check to see if your bumpmap, not your normalmap, may be too strong. While checking both helps, I've noticed it's usually the bumpmap which causes problems. Should your bumpmap be too strong, open it up in GIMP and lower the contrast. Also, make sure that your bumpmap is seamless before and after you make a normalmap with it.

Using GIMP

• Desaturate the texture
• Change contrast/brightness as required
• invert as necessary (remember - light areas raise, darks depress/lower and grey is neutral)
• If preferred, copy the layer, use threshold, apply opacity/transparency as wanted, then merge layers
• save as texture_Bump.jpg

Using SSBump

//to be done

Normal/Height

• Normalmaps usually requires special tools such as the GIMP Normal-map Plugin, Smart Normal, SSBump Generator, or other bump-to-normal converters to work.
• Before you make a normal map, make sure your bumpmap is seamless.
• Load the bumpmap into whatever you're going to use, and then convert. See below for instructions on the given sources above.
• Once you've made your Normal map, save it as texture_Normal.jpg and test it in Sandbox (see below). If you see random straight lines in places, then use GIMP to make the texture seamless.
• If you want, follow up by following this great tutorial on enhancing normalmaps.

Using a photo-editor plugin

• To use a plugin for a photo editor (e.g. the GIMP, Paint.net, Photoshop), find and download the plugin, install it into the program that uses it, then find and execute it within the editor. A tutorial for paint.net can be found here: Making Seamless textures.

Using SmartNormal

• First: What is SmartNormal?
  • SmartNormal is an online program which converts bumpmaps to normalmaps. While you can always use it online, you can also download and install SmartNormal. SmartNormal is incredibly useful in its speed and it also keeps your settings from your previous texture and applies it to your newly loaded texture.
• Using SmartNormal is incredibly easy. Just visit the site, load your image, then move the bias (strength) and blur sliders as you like. When picking a filter, Sobel seems to be a lot stronger while Condensed is the exact same as the default (no-filter) look. I recommend you invert the source as well, as the normal map should look the opposite of what it does (so rocks jutting out would actually look like they're pointing in, and vice-versa).
• I believe SmartNormal has a habit of messing with a texture's borders; with that in mind, open up your normalmap and make sure it's seamless.

Using SSBump

//to be done

Decal

• A decal only needs to be a transparent .png. Alternatively, you could just use texture blending and painting, unless you want a specific shape.

Glow

• We have a great glowmap tutorial made by Hirato here on the wiki @ Glowmaps.

Pulse

• Pulse shaders can use just diffuse textures to start, and are made primarily by scripting. However, you can also throw in a glowmap texture and a specmap texture if you would like.

Specular

• You can edit a bumpmap to create a specular map. As previously mentioned, lighter colors (yes, colors, you're not limited to greyscale, so experiment) tend to reflect more light while darker colors absorb light. You can change an image's brightness and contrast to get the result you want.

Scripting

• In order to utilize a shader on your map, you need to add it to your package.cfg, which is later executed to add your textures to Sandbox. The basic code to execute a shader is like this:

  setshader [shadername]
  texture 0 "[texturepath]/[diffusetexturename.jpg]
  texture ? "[texturepath]/[shadertexturename.jpg]
  //(repeat above line as needed)

• There are many combinations of shaders out there. Lots of them combine individual shaders. A very good list of all texture shaders can be found on Quadropolis. NOTE: Quadropolis may not be appropriate for children.

• A very basic example:

  setshader bumpspecmapparallaxworld //bump-, spec-, and normal-map textures. 
  setshaderparam "specscale" 0.2 0.2 0.2 //reduce the specularity
  setshaderparam "parallaxscale" 0.2 0.2 0.2 //reduce parallax
  texture 0 "textures/textureX.jpg" //diffuse, or color, texture
  texture z "textures/textureX_Bump.jpg" //bump map
  texture n "textures/textureX_Normal.jpg" //normal map
  texture s "textures/textureX_Spec.jpg" //specular map

• As you can see, setshader determines the type of shader used. This is in effect until the next setshader line. The setshaderparam command changes the scale of each shader, so you don't get a dizzyingly strong texture. Each individual texture is then called up by its respective command, based on the type of shader map it is. This specific example would call up textureX in Sandbox, and then apply a bumpmap, normalmap, and specular map (bump, parallax and spec shaders) to textureX.