Cell Shading Portal- all you could want to know about Cell Shading

WHow it Works (Cont')...hat

So Now you know what a texture is, i know you may be thinking, "What does a texture have to do with Cel-Lighting? Well, I'll answer that in a minute.

I already explained how conventional lighting is different from Cel-Lighting, which is why the first things cel-shaders do is disable their conventional lighting. This means that Cel-shaders have to create their own lighting engine. If you've read the article "Making a lighting engine" under the theory section, then you probably had questions like, "What the heck is a dot product?" Well, it has to do with how directional lighting is calculated. basically, for every vertex on an object, there is it's position, and it's lighting normal. the position identifies it's co-ordinates in 3D space, (usually in the form X,Y,Z) while the lighting normal contains a vector. A Vector is described in physics as a quantity with both direction and magnitude. the same goes for Vector's in 3D graphics.

Okay, let me take a step back for a moment and explain were I'm going with this. We are trying to program a basic lighting engine, conventional wisdom tells us that the sides of an object closest to the light will be the brightest, right? So we need to make sure that when we draw an object on screen (like a cube) we want the corner closest to the light to be the brightest. In order to do that, we need to figure out which of the vertex's (corners) is closest to the light, before we can do THAT, we need to be able to calculate the distance between a light source and the corners of an object drawn in 3d space.

Remember above, when i said that "every vertex on an object, there is it's position, and its lighting normal"? Well, see that picture above? Each one of those vertex's (corners) has a position that identifies it's location in 3d space, those green lines coming out of the vertex's are the vertex's normals. Normal's are vectors, they have a start point and an end point, In 3d graphics only one vertex is needed to identify a normal, because it's start point is identified by the vertex it's attached to. Lighting engines will Normalize the normal vectors, which is just a fancy way of saying "cut the length of the normal down to a number less than 1"

Now that we have an object's normals, we can calculate the Dot Product, which is a useful method for calculating the angle between two vectors.

So basically, programmers use the dot product to calculate the angle between the vertex normal and the light direction. This angle can then be used to shade the object accordingly. I'm not going to go into how to calculate the dotproduct, or how to normalize a vector, read the Nehe tutorial (the link is under the CODING section) it details the math involved in calculating those things, I just explained what these things ARE, so when you read the tutorial, you will know what he is talking about.

The lighting engine mentioned above would light objects the same way that conventional lighting routines do, which is what we DON'T want, so how do we get the broken up "color-banding" or cel-lighting that we want? Well, that's were the Texture thing comes in.

Now, back to the texture part. you see, when mapping a texture to an object, you must supply the texture co-ordinate this tells the graphics library where to map the Texture on the object. well it turns out that your dot product also yields your texture co-ordinate.

Furthermore, Cel-shading uses 1D textures, when the lighting calculations discussed in the paragraph above are fed into the intensity value of the texture, it turns the texture into a 1-D Lookup table, which can be customized to alter the amount of "color banding" that you want. This process yields different results based on the look-up table (which is really a grayscale map). Here are a few examples.

Gradient Grayscale:

This grayscale has many different lighting values that blend into each other, notice how this causes a gradual shading effect similar to photo-realistic rendering, NOT cartoon rendering!

Black and White Grayscale:

This grayscale only has two values, white and black. this "Grayscale" is a little to dramatic, it doesn't quite generate that cel-shaded feel we're going for.

Standard Greyscale:

Now THIS is a little more like it! notice how the grayscale only has 3 gray values, you can tailor it even more to your liking in order to match the particular style your going for. Games like Viewtifull Joe only use 3, while I'm pretty sure Windwaker used 6, but two were saved for the far ends of the spectrum.

A little note about screenshots, cel-shading games will NEVER look good in screenshots, why? Because cel-shading is made to imitate 2-d drawings, only by seeing this effect in 3D motion is the result truly breathtaking. I created the above screenshots using Loony.exe, which is available for download under "Resources" I encourage you to check it out and play around with it!

So now you have a pretty good idea of how cel-lighting works, but remember, this is only half of the cel-shading process, the other process, silhouette lining, creates much more dramatic effects such as those seen in Viewtiful Joe and XIII, wich ill discuss in the next page of "How it Works" When i get around to finishing this article!

Next Page of "How it Works">>

Home

Mail me- jaw048000@utdallas.edu