By Gavan

First off, if you have not read last month’s article (issue 10), I suggest you do so now, as it covers several vital concepts not discussed here. That said, let us delve into more shading concepts. What is that I hear? Thousands crying "No, we hate shading, we don’t want any more freakin’ shading tutorials!" ? Worry not, this article concludes all that I know (or remember) about shading; in the following months I will discuss more interesting concepts like...explosions!!! (I sense that many have now gained interest).

Specularly highlight *this*

dithered transparency
Dithered transparency combines an object with its background by dropping out every other pixel (in a "checker board" pattern). The beauty of this method is that dithered-transparent objects are not static, that is, they can be placed on any background and still look properly transparent. However, dithered transparency really only looks acceptable at higher resolutions (I would estimate 640x480 at the least), and it does not really work with small objects. To make a dithered-transparent object, first draw the object as you normally would (5,1), except the shadow should be a darker shade of the object’s base color. Next, drop out every other pixel of the object to the background color (6,1); the easiest way to do this is with diagonal lines of a 45 degree angle (slope of 1), in the background color. Flat objects are exactly the same (5,2)-(8,2).

hue/value (HV) transparency
HV transparency works in the following manner: the background hue (color) is changed to the object color, where the object and background meet (this is called colorizing, the process of changing one color to another). The background texture keeps the variations of its respective values (brightness levels) in each shading region of the sphere. So, for example, say the background texture has four values that make up its texture; whatever hues it has does not matter. In the brightest shading region of the object, the texture is turned to four bright values of the objects hue, to replace the four values that make up the background. HV transparency only works correctly on static objects. First we must have a background on which we can work with our HV transparency (I chose a rock texture in this tutorial). Once you have a suitable texture, cut out the shape of your object from one part of the texture, then cut out the shadow as another piece (5,3).

First we will work with the object cut out. If you do not have a "color replacer" tool in your paint program, you may find this part difficult (a color replacer replaces the secondary color with the primary color). You will want to replace the brightest region of this cut out with bright values of your object’s given hue, and the darker regions with subsequently darker values of the object’s hue (6,3). This should result in a shaded object that has a texture visible behind it (unless you messed up, which is most likely the case :0) ). Then the shadow piece is replaced with a fairly dark range of the object’s hue (7,3) (this makes sense because shadows cast by transparent objects are the color of the object). Then you piece the shadow and the object together in their respective places on top of the background where you cut them out (8,3). Flat objects (5,4)-(8,4) are similar, except the individual faces are cut out and replaced with single color ranges.

psuedo-refraction
Pseudo-refraction is not a static method, but on the other hand, it does not look as accurate as true refraction (explained shortly). Pseudo refraction is almost similar to the pseudo-reflection discussed last issue, except that the process is reversed. Where ever a face cannot reflect the ground, it refracts the ground. Thus, much of the upper hemisphere of a sphere would refract the ground below it, or the same with the top face of a cube. First, make a normal sphere (5,5), then find its refraction region (6,5), which should be a something like a crescent shape near the top. The crescent should not touch the top (it’s a little anomally of refraction, I’m not sure what physical law is behind it :] ). Anyway, next shade the region in whatever fashion suits you, so long as it is distinguishable from the rest of the object.

Flat-surfaced objects (5,6)-(8,6)refract slightly differently; Whichever faces point outwards away from the ground (usually the upper pieces of a flat object), these regions refract, or partially refract, given their angle. Shade these regions in some other way than their counterpart faces. You may wonder why the other faces of these objects are not transparent. Remember that refraction bends light, so the side and lower faces of an object cannot "see" the ground below them; the only thing the can "see" is air, so they are shaded normally. You may choose to make your refractive objects transparent, but it does not always look good and is simpler left alone.

true refraction
Finishing up, we have true refraction. True refraction is static because it refracts the texture below it, not just an approximation of the background. We will start by cutting out the refractive pieces for a cylinder and the cylinder’s shadow (5,7). Note that the bottom cap area of the cylinder is where the top will refract (refractive surfaces reflect directly below them, or in whichever direction the inside of the surface points), so we cut it out for a top piece. Next we draw the side regions normally, as they refract nothing; the shadow is colorized by a dark value of the object’s hue (6,7). Then the top (refractive) region is colorized according to how much light it recieves (7,7). Finally, everthing is pieced together. The flat object (5,8)-(8,8) follows the same rules as the one in (5,6)-(8,6), except that it uses true refraction, and the pieces refract chunks of the background in the opposite directions of their respective surfaces. That is it!

conclusion
These are all of the shading techniques I will tell you, but it does not stop there. You can combine any of the shading methods to produce unique objects (try making a texture mapped, bump-mapped, refractive, reflective, irregular object!). You can invent your own shading techniques for interesting objects. Anyway, count down the days to the next tutorial, because it is about one of the most important concepts to good game graphics: seemless tiling!

 Beg Gavan once every 27 minutes to do art for your game too by emailing him here.