Cell Shading Tutorial
by Arland (Barry) Woodham · in Game Design and Creative Issues · 01/06/2005 (8:29 am) · 22 replies
***Warning this is not real cell shading, but instead a cartoon outlining.***
Well I promised I would make this tutorial eventually and now I am just finally getting around to do so.
This is a tutorial that I am creating based on an idea I saw on a website sometime ago that for the time being escapes me. What the person had done was to create a sort of pseudo cell shading effect in Quake II. When you see how this technique works you will understand why the poly limits of this engine made it difficult. While helping a friend in class with his Unreal level that had a cartoony look I decided on a whim to try and implement the technique. The results of this were better than I hoped and so I went on to attempt it in Torque which took some more work but the result was worth it. Anyways enough talk, on to the actual tutorial.
Programs Used
Wings 3D
Photoshop
Milkshape
Torque
You may substitute your favorite applications but be aware some of the techniques may be slightly different in them.
Part One The Modeling
The first step is to model the object that you are going to cell-shade. In my case this is just an extruded primitive with a smooth modifier.

Next you need to copy you model. In wings this is done by selecting the whole model and then right clicking then clicking duplicate. Make sure the copy is in the same spot as the original.
Now you want to enlarge the model based on it's normals. For wings select all the faces and then use the bump command from the right click menu. In 3dsmax the modifier to use is called push. I am sorry but I do not know of what commands would be used in other programs.
What you want is a slightly larger version of your model as shown here. The copy is the wire frame. This is what will create you outline so the father it is from the base model the thicker the line will be.

The last step as far as the modeling goes is to invert the normals on the copy. In wings this is done by using invert after selecting the whole object. In max select all the faces and then use the flip command.

Now that all your modeling is done setup whatever uv's you want to do and export the file for milkshape. This is for those following along in wings3d not other modeling software.
Part Two Texturing
This is the easy part. If you have a fancy model you can spend quite some time here but for the sake of this tutorial I will stick to solid colors with no uv's.
When you look at the object in milkshape it will look something like this don't worry just right click and turn off draw backfaces.

First you want to apply your texture to the first object. This is what the object will look like so it is where you want to spend the most time. For my sake I am going to throw a solid color on. After that apply a solid black texture to the copy, the inverted object. And since the black is a solid color and will be used again and again you can make one small texture file and reuse it for all the models.
When you are done your model will look something like this and you will already be able to see how the shading effect works.

Part Three Torque
Of course the effect works well in the modeling program but we want it in torque after all so fire up your dts exporter and export it. Then copy your dts and your two textures to torque/starter.racing/data/shapes or whatever folder you need it in for you particular project.
All that's left is to go into the mission editor and add you object and admire its wonderful cartoon outlining.

Well I promised I would make this tutorial eventually and now I am just finally getting around to do so.
This is a tutorial that I am creating based on an idea I saw on a website sometime ago that for the time being escapes me. What the person had done was to create a sort of pseudo cell shading effect in Quake II. When you see how this technique works you will understand why the poly limits of this engine made it difficult. While helping a friend in class with his Unreal level that had a cartoony look I decided on a whim to try and implement the technique. The results of this were better than I hoped and so I went on to attempt it in Torque which took some more work but the result was worth it. Anyways enough talk, on to the actual tutorial.
Programs Used
Wings 3D
Photoshop
Milkshape
Torque
You may substitute your favorite applications but be aware some of the techniques may be slightly different in them.
Part One The Modeling
The first step is to model the object that you are going to cell-shade. In my case this is just an extruded primitive with a smooth modifier.

Next you need to copy you model. In wings this is done by selecting the whole model and then right clicking then clicking duplicate. Make sure the copy is in the same spot as the original.
Now you want to enlarge the model based on it's normals. For wings select all the faces and then use the bump command from the right click menu. In 3dsmax the modifier to use is called push. I am sorry but I do not know of what commands would be used in other programs.
What you want is a slightly larger version of your model as shown here. The copy is the wire frame. This is what will create you outline so the father it is from the base model the thicker the line will be.

The last step as far as the modeling goes is to invert the normals on the copy. In wings this is done by using invert after selecting the whole object. In max select all the faces and then use the flip command.

Now that all your modeling is done setup whatever uv's you want to do and export the file for milkshape. This is for those following along in wings3d not other modeling software.
Part Two Texturing
This is the easy part. If you have a fancy model you can spend quite some time here but for the sake of this tutorial I will stick to solid colors with no uv's.
When you look at the object in milkshape it will look something like this don't worry just right click and turn off draw backfaces.

First you want to apply your texture to the first object. This is what the object will look like so it is where you want to spend the most time. For my sake I am going to throw a solid color on. After that apply a solid black texture to the copy, the inverted object. And since the black is a solid color and will be used again and again you can make one small texture file and reuse it for all the models.
When you are done your model will look something like this and you will already be able to see how the shading effect works.

Part Three Torque
Of course the effect works well in the modeling program but we want it in torque after all so fire up your dts exporter and export it. Then copy your dts and your two textures to torque/starter.racing/data/shapes or whatever folder you need it in for you particular project.
All that's left is to go into the mission editor and add you object and admire its wonderful cartoon outlining.

About the author
#22
EDIT: Nevermind. I don't have the certain graphics card for the Modernization Kit.
03/01/2009 (6:43 am)
Yeah. I'm also no TorqueScript expert. The site specifically said for Torque 1.5 only, which could mean if you attempted to make it work on 1.4.2, some of the features would be missing. I'll give it a try, though. However, if it requires engine changes, I'm out of luck. I don't know squat about c++.EDIT: Nevermind. I don't have the certain graphics card for the Modernization Kit.
Torque Owner Daniel Buckmaster
T3D Steering Committee