There are already a few cel/toon shaders for Three.js like the cel shader from ro.me. To my knowledge, however, none of the shaders available use the lights added to the scene. While writing my own cel shader to include them, I found that I was duplicating quite a bit of the built-in Lambert shader. As I couldn't come up with any reason that I'd want to use cel material and Lambert material in the same program, it seemed reasonable to just "hijack" the Lambert shader and turn it in to a poor-mans cel shader.
Note: If you've reached this page trying to figure out how to get scene lights to your custom Three.js shaders see this very helpful post:Scene Lights in ShaderMaterial
The result is a very simple script that you can include just below Three.js in your document that turns the Lambert shader into a cel shader. If you already have a program that uses Lambert materials exclusively, you need only add a single line to see your scene with a cool cel shading / toon effect. No additional changes are necessary.
The technique used to create the effect is simple, and gives us a nice cel shading effect even when textures are used. The script is easy to modify to create different 'looks' beyond just cel shading. While I've not included an example here, you can easily modify this shader to make your Lambert materials look shiny, without the overhead of Phong shading. I have included a few examples showing how the script can be modified so that you can quickly start tinkering yourself and find the best look for your program.
Using the script is simple, just include it below Three.js in your document head:
<head> <title>My Fun Three.js Project</title> <script src="Three.js"></script> <script src="three_lambertoon_c.js"></script> </head>
Now all of your Lambert materials will have that cel shading look you want. It doesn't get much easier than that.
People have different ideas about what cel shading is supposed to look like. Here are a few versions of the script that you can modify and change to find the specific look you want.
| File | Example | Description |
| three_lambertoon_c.js | WebGL Example C | This is the look most people want. |
| three_lambertoon_b.js | WebGL Example B | This one is great for giving a cartoon look to dark scenes with complicated textures like castles, dungeons, etc. It doesn't look so good on brighter scenes with simple textures like the example donut. |
| three_lambertoon_a.js | WebGL Example A | This is just like version C above but adds and preserves more detail. It's good for scenes with a lot of large areas with similar colors. |
