[SOLVED] Toon Shading Techniques


Continuing the discussion from FBX import issue?:

There is a simple example of Toon Shading here using the technique @max describes of duplicating the model.

Shadows in custom shader?

Thank you very much for the shader example. It’s very helpful and I’ll check the code later.

I was working on the similar approach based off of PlayCanvas custom shader example. My first objective is rendering a model without a shade.

What I trying to do was find the material imported from FBX and applied to the model’s face. Then replace a shader associated with the material with a new “shadeless” shader. My goal is being able to render any imported FBX material without shadow by replacing a shader of the existing material.

It seems my code successfully created a shader instance but it didn’t change how the model is rendered. (https://playcanvas.com/editor/code/367166/shadeless_shader.js)

So my first question is, is it possible to replace a shader of the existing material and render? Both of your toon sample and custom shader sample creates a new material in a code. So I want to confirm my approach is valid.

Just for your information, the FBX model’s face I’m trying to render is optimized for “shadeless” rendering while other part of body is expected to be rendered with toon shading. (I’m not a model creator and still trying to understand the model)

(Below is a Blender render image with the default shading + back face culling. The floating eyes and mouth has shape key animation for its facial animation. Notice nose is also a floating polygon)

(Below is a Blender render image with the default shading + no back face culling. As you see, the model already has a black mesh for nose and cheek edge. Notice the static nose+mouth mesh is now visible. Its normal is facing inside of the model and used to render the skin color when the face is rendered from side)

(Below is a Blender render image with shadeless + back face culling. This is the closest to the desired result. The face skin color comes from a flat polygon behind eyes and mouth. The shade on forehead is actually a colored polygon)


Hello Dave,

I created a “shadeless” shader and applied to some meshinstances in my project. And I realized that the meshinstances stopped animating just like a screenshot below. (Though the shading itself became “shadeless” as expected)

It seems that I have to do something more than your example to apply a custom shader while keeping the skeltal animation. Would you let me know how? Would it be the case that PlayCanvas is using vertex shader to apply skeltal animation?

By the way, I tried to apply the custom shader to the FBX imported material and it didn’t work. (line 12 and line 35 of https://playcanvas.com/editor/code/367166/shadeless_shader.js) Would you also let me know why it didn’t work? Thanks a lot!

Link to the project: https://playcanvas.com/project/367166/overview/model-test-3


Yes, that is exactly it.

Skinned animation is done in the vertex shader, so you probably don’t want to replace that with your own.

I’ll have to defer to @max or @Mr_F to let you know the best way to replace the fragment shader of an existing material.

We’re working on another way of doing this which Max eluded to before which is the shader chunk system. Unfortunately the API for that isn’t finished completely so I’m hesitant to recommend you use that at the moment.


I’ve tried replacing some global shaderChunks that is used for materials.
It basically does pasteurisation of light, making it graduated.
Here is the project: https://playcanvas.com/project/367538/overview/toon-shading


Thank you Max.

With your code and Shader Chunk API in “Plasma Shader” example, I finally got the desired rendering result.
I applied the “shadeless” shader to the face, the eyes and the nose materials. And applied your toon shader to all other materials. (with 3.0 toonSteps and minimum diffuse value 0.5)

Link to the project

I will start working on the particle effect next. Thank you very much for you continuous help. I hope the facial animation becomes available soon!


Hello guys, is there any reason why the code doesn’t work anymore ? I’ve tried to compile both max and nakata0705 projects and I get an error … I’m an interactive designer with a (small) technical background and I’m looking for a way to get a nice toon shader . I need it for some animated meshes so the shaderChunk alternative looked perfect to me … Anyway thanks for what you’ve already done.


It looks like the shader chunk system has changed since @nakata0705 created that app. Hey, @Mr_F - what needs to be changed to get it working again?


It seems, @nakata0705 had a somewhat unusual toon shading method using special flipped geometry. Here you go, I made an example that works with skinning: https://playcanvas.com/project/489836/overview/toon-shader-with-skinning


Hey, in case anybody wants to use @Mr_F’s shader, I noticed it was broken for playcanvas rev 1.0+ (it was originally made for 0.201-something), so I fixed it.

Here’s the public fixed project compiled with today’s latest revision: https://playcanvas.com/project/605855/overview/toon-shader-skinned