Toon Shading
Non-Photorealistic Rendering (NPR), as opposed to Physical Based Rendering (PBR), achieves a completely different art representation from the real world through feature-based rendering.
Toon Shading is one of the common effects of non-realistic rendering.
Usually cartoon rendering contains the following basic components:
- Stroke objects
- Reducing the number of color gradations and simulating color gradation discontinuities
- Separation of light and dark tones
- Shade shape interference, etc.
Passes
Creator provides a built-in toon rendering shader builtin-toon.effect, as an example, we switch the shader in the Effect property to builtin-toon.effect in the material resource, we can see that the toon rendering consists of two rendering passes.
- Pass 0: used for stroking, not enabled by default, can be enabled by checking USE_OUTLINE_PASS on the right side.
- Pass 1: normal rendering of the model
Pass 0
Pass 0 selects the culling mode in the rasterization state to frontal culling (CullMode = FRONT) and expands the model's vertices along the normals, resulting in a larger monochrome model than the original model, after which Pass 1 renders the model once normally and masks the rendering of Pass 0, leaving a solid color edge to form a stroke since the model size of Pass 1 is smaller than that of Pass 0.
Pass 0 can be turned on or off by checking USE_OUTLINE_PASS.
When USE_OUTLINE_PASS is checked to turn on the stroke function for Pass 0, the effect is as follows.
If you need to adjust the depth effect of the stroke, you can do so with the DepthBias property.
When USE_OUTLINE_PASS is unchecked to turn off the stroke function for Pass 0, the effect is as follows.
Pass 1
The core idea of cartoon rendering is to simulate the Celluloid painting style in cartoons by reducing the number of color gradations.
Reduces the color scale to three shades in the shader and is composed by three colors:
- baseColor：Basic colors
- shadeColor1：First-order coloring of colors
- shadeColor2：Second-order coloring of colors
The color corresponds to the editor material properties as follows：
If USE_1ST_SHADE_MAP and USE_2ND_SHADE_MAP are checked, the texture is used externally to simulate the color scale discontinuity.
The parameters of the surface shader (ToonSurface) are calculated by the shader's surf method, and the final shading is calculated by the CCToonShading method.
Parameters and pre-compiled macro definitions
Pass 0
| Properties | Description |
|---|---|
| lineWidth | The width of the stroke |
| depthBias | Depth shift adjustment factor for stroke |
| baseColor | Stroke base color |
Pass 1
| Properties | Description |
|---|---|
| tilingOffset | Scaling and offset of the model UV, xy corresponds to scaling, zw corresponds to offset |
| mainColor | The primary color, which will be used as the initial color gradient |
| colorScale | Color scaling, multiplying RGB channels for primary, first-order and second-order colors |
| alphaThreshold | Set the Alpha test threshold. Pixels with Alpha values below the set value will be discarded. This item is only displayed when USE_ALPHA_TEST is checked |
| shadeColor1 | First order color. This color will be used as an intermediate color for cartoon coloring |
| shadeColor2 | Secondary order color. This color will be used as the last color scale of the cartoon coloring |
| specular | specular color |
| baseStep | Step size for first-order coloring |
| baseFeather | First-order shading and primary color mixing factor, and BaseStep property to adjust the proportion of first-order shading and the form of mixing |
| shadeStep | Step size for second-order color |
| shadeFeather | Blending factor for second-order shading and first-order shading, and ShadeStep property to adjust the proportion of second-order shades and the form of blending |
| shadowCover | Shadow covering factor |
| emissive | Self-emitting colors, independent of lighting calculation, directly emitted by the model itself |
| emissiveScale | Self-emitting intensity, used to control the weight of the impact of self-emitting color on the final color |
| normalStrength | Normal scaling The xy axis of the normal can only be adjusted and scaled if USE_NORMAL_MAP is enabled |
| normalMap | Normal mapping can only be adjusted if USE_NORMAL_MAP is enabled |
| mainTexture | The main texture, which defines the base texture of the object. Is displayed in the editor as baseColorMap and can only be adjusted if the USE_BASE_COLOR_MAP macro is enabled |
| shadeMap1 | The first-order color texture, if specified, will be multiplied by the set ShadeColor1. This item is only shown when USE 1ST SHADER MAP is checked. |
| shadeMap2 | Second-order color texture, if specified, it will be multiplied by the set ShadeColor2. This item is only shown when USE 2ND SHADER MAP is checked. |
| specularMap | The highlight map, if specified, will be multiplied with the highlight color. This item is only shown when USE SPECULAR MAP is checked. |
| emissiveMap | Self-Emitting map, if specified, it will be multiplied by the self-emitting color, so you need to turn up the RGBA in the self-emitting color (default is black) to get the effect. This item is only shown when USE EMISSIVE MAP is checked. |
Pre-compiled Macro Definition
| macro | description |
|---|---|
| USE_INSTANCING | Whether to enable dynamic gpu instancing |
| USE_OUTLINE_PASS | Whether to enable strokes Pass |
| USE_NORMAL_MAP | Whether to use normal mapping |
| USE_BASE_COLOR_MAP | Whether to use base color maps |
| USE_1ST_SHADE_MAP | Whether to use the map as a first-order color scale |
| USE_2ND_SHADE_MAP | Whether to use a texture as a second-order color map |
| USE_EMISSIVE_MAP | Whether to use self-emitting maps |
| USE_ALPHA_TEST | Whether to perform alpha tests |
| USE_SPECULAR_MAP | Whether to use the highlight map |
| BASE_COLOR_MAP_AS_SHADE_MAP_1 | Use baseColorMap as first-order shading |
| BASE_COLOR_MAP_AS_SHADE_MAP_2 | Use baseColorMap as second-order shading |
| SHADE_MAP_1_AS_SHADE_MAP_2 | Whether second-order coloring is overlaid with first-order coloring |