How to Shade

From The Battle for Wesnoth Wiki

The only way that we are capable of seeing things is by light passing into our eyes. It is a good visualization to think of light as little particles - balls if you will, that are created at a light source (the filament of a lamp, for example, or the flame of a candle), and bounce around off of surfaces until they are absorbed by the retina of our eyes, or absorbed by the many surfaces around us. These little balls of light are called "photons".

One of the first things you must understand about light is that, for any scene you stand in, you only see an infinitesimally small portion of the light in that scene - you only see what passes into your eye. Many thousands of times more light never makes it in there, and hence, is never seen. It is absorbed by materials around you, and turned into heat, or ricocheted off into the distance.

All of the light that you see depends just as much on where YOU are, as on what it is like. Think about how the moon reflects off of water - have you ever noticed how it moves with you if you yourself move? It doesn't stop shining at the place it was shining before just to accommodate you - no, it's still shining there after you leave. In fact, it's shining everywhere around the water.


When light bounces off of something, it follows the basic rule of reflection - the angle that the light comes in at is the same angle that the light travels away at. The easiest way to visualize this is by thinking of how a pool ball bounces off the side of a pool table.


The trick is - this is true in 3 dimensions as well as two. If you toss a rubber ball at the ground, it will bounce up at the same angle that it hit the ground at.


All of these angles have to be measured, though, from something called the normal angle - something perpendicular to the surface (which means the same thing in both 2 and 3 dimensions). In a game of pool, the normal angle to the side of the pool table would be a line drawn straight out from the side of the table. Each side has its own normal angle, just as each surface has its own normal angle.

If you are thinking of the floor, the normal angle to it would be something that is perpendicular to both north-south, AND east-west. The only option for that is either straight up or straight down. So, if you drop a ball straight down onto the floor, it will reflect off of that floor at the same angle as it hit the floor at. In this case, it hit the floor at 0°, and thus it will bounce straight back up - also at 0°. If you toss a ball forward, and it hits the ground at 45°, it will bounce back up, on the opposite side of the "normal" angle.

If you don't get this - ask your local math teacher. They do, and they'll be happy to teach you what a normal angle is. Have them teach it to you, and have them point out to you what the normal angle of a more complex object, like, say, a ball, is. Also have them show you how things reflect across a normal.

Planar analysis

Planar analysis is an oft-misunderstood technique taught in art studios. People teach it to help students visualize 3d forms, but really its best use is in approximating shading, by making it easy to find normal angles. I blather on and on about normal angles in this tutorial, but the concept doesn't make any sense for a surface that isn't flat.

The trick is, to realize that any round surface can be approximated by several flat surfaces. One of the wonderful examples that we have today, which artists of the past did not, is 3d videogames - especially the more primitive ones, like what were on the first generations of 3d consoles (eg. N64, Playstation). Notice how all of the round surfaces in those games are actually made up of flat surfaces, just like a crystal.

A flat surface is easy to find the normal of. And you can approximate any object by chopping it up into flat surfaces. Each one of these will have a different normal angle. To make the real drawing, as you cross between these little planes, or polygons, you blend the angles together (or "interpolate" them, or transition between them).

Consider the following two slides from a book by Andrew Loomis - the first showing rather clear planar analysis, and the second showing how it would get worked into a real drawing workflow.

shading-planar-analysis1.png shading-planar-analysis2.png


The easiest way to approximate the effects of light is to break how light bounces off of something into two categories: Diffuse, and Specular reflection.

Specular reflection works in the way I described above.

Diffuse reflection doesn't. It happens because surfaces are not perfectly smooth - and it happens because these surfaces are "apparently" breaking the law of reflection that I stated above. A surface which is not smooth will cause much of the light which lands on it to bounce off at a random angle, rather than at the same angle it came in at, but on the other side of the normal.

It's still following the law of reflection, but what's happening is that instead of hitting one cohesive surface, the bajillions of photons are bouncing off of tons of tiny little surfaces, each pointing in their own direction.

A surface that had purely specular reflection would look something like a mirror. A surface that had, not purely, but very diffuse reflection would look something like a piece of cotton, or charcoal. Real materials have a mix of both - shinier materials have stronger specular reflections, and weaker diffuse reflections, and vice-versa for dull materials.

Diffuse light accounts for the vast majority of what we are able to see on physical objects.

How to draw this

All this theory has been fine and dandy, but you need to put this on paper. How you do it, is that you imagine yourself as being a 3d rendering program, and you go through the same steps that it does.

Imagine your view as a camera, taking a picture of the scene. Your canvas is a square, and the camera is a point behind it. In order to choose whether something is lit up or not, you fire a ray out from your camera, through a point on your canvas. Yes, this is a position on the page you're drawing on - that page exists in both the real world, and is also a window into the world you're drawing.

You then see where that ray bounces off to, and see what kind of light it ends up hitting. Why? Because the light will follow the exact same path, except in reverse! Straight into your eye/ onto your page!

In order to tell whether something should be bright or not, for the specular light, you see if this line bounces straight into a light. For a simple, and classic scene, consider a ball sitting in empty space, with the sun shining over your left shoulder. There will be one single spot on the ball where you see the direct reflection of the sun. One shiny point. That's the specular reflection.

Now for the diffuse reflections. The level of brightness of a diffuse surface is proportional to how close that surface is to being at the right angle for reflection that I stated above. If a light is shining at a surface at 15°, it will look brightest at the opposite 15°. This is NOT when the surface is facing directly at the light - thinking that it is results in pillowshading. Pillowshading is only accurate when you, and light striking the surface are in a straight line with the surface. This is only true when you're using a camera flash in a pitch-dark room, or when you have the biggest source of light around. It might be true if the sun were shining over your shoulders, except that your shadow would likely get in the way.

The correct view is hard to intuit, and rather than flog it with words, I give you visual example. This is a diffuse-surfaced sphere hanging in empty space, with a light source. Notice something in this example - the brightest spot is NOT at the edge of the sphere. It would be, if the light were coming from the far side of the object, but the light is on the near side.


For a second example, I give you a sphere with light coming, more or less, from behind and to the side of it. Note how one entire hemisphere is completely dark.


"Ambient" light

Because so much of the light in Diffuse reflections bounces in random directions, a lot of it does NOT come straight from a source. There is enough bouncing off of other surfaces to illuminate things rather heavily. Consider the moon. You may have noticed that, with a crescent moon, you can see the dark side of the moon, as well as the light side. The light illuminating that dark side is not coming directly from the sun, rather it's bouncing off of the earth, hitting the moon, and then bouncing back down to us.

But don't, from that example, think of this as being a very weak effect - it's very powerful in more down-to-earth situations. One of the best is an overcast day. When you stand out in a field on such a day, all sides of you will have relatively equal illumination. This is from the diffuse, "ambient" light bouncing off of the clouds, and thus coming at you from all directions. Another good example is direct afternoon sunlight, mentioned below - in such a situation, you can still see the dark side of a person, and that's from the ambient light reflecting off of the ground, and then back to you.

The amount of surfaces facing an object determine how much it will be illuminated by this. Not the whole object, just whatever parts of it are facing other, illuminated, surfaces. The more directly these surfaces are facing the object, the more illuminated it will be.

Directional light

There is one more level of approximation necessary for doing a simple cell-shaded drawing, and that is directional light. The number one thing that makes this necessary is the sun, or any powerful light sources.

The sun lets out a torrent of light that hits an object, and then bounces off of it. Because the sun is so far away, all of this light is roughly coming in at the same angle.

One half of the object will be have tons of light hitting it - and its diffuse reflections (and specular reflections) will be very strong. The other half of the object will have only the light that was bouncing off the ground and then back towards you to account for it, and thus will have very weak diffuse and specular light.

The cut-off edge for this is determined by the rules of reflection I stated above. If the normal angle, for a surface of the object, is facing more than 90° away from the light, it will be dark.


I've only outlined a very complicated topic, here, but hopefully this can serve as a beginning for you. Try to recognize these things in the world around you, as you see them, and incorporate that into your drawings. Likewise, playing around with a 3d rendering program may serve to illustrate a number of the things I've only spoken about, here.

See Also

This page was last edited on 1 May 2006, at 08:02.