CelShading
By:Lifeng Wang, Zhuowen Fang, Zirui Huang, Zhengyu Weng
What is Cel-Shading?
Non-Photorealistic Rendering(NPR) encompasses any rendering technique that does not strive for photorealism. Instead, it aims to create visually expressive or stylistic renders that evoke artistic styles such as painting, drawing, or cartooning.
Non-Photorealistic Rendering
Cel-shading is a subset of Non-Photorealistic Rendering (NPR), also known as toon shading or cell shading, is a rendering technique that makes 3D graphics appear as if they are 2D cartoons.
Cel-Shading
Our Final Project
Understanding the concept of Cel-Shading. Analyse the algorithms used to process Cel-shading, simulate these algorithms to the Utah Teapot and try to create a cartoon-like effect.
Searching for more advanced algorithms, using image processing software to apply a Comicize process to a specific 3D humanoid model.
Example of Cel-Shading
Anime
Games
Legend of Zelda:
Tears of Kingdom
Neo:
The World Ends with you
Genshin Impact
Dragon Ball Super:
Super Hero
The First Slam Dunk
Features of Cel-Shading
Color Quantization
Edge Enhancement
Customized lighting
The process of reducing the number of colors used in the image to create a more simplified and stylized appearance
Accentuate the outlines or borders of objects.
Crucial for achieving its distinctive, stylized look that resembles hand-drawn art or cartoons.
Original Model
Cel
Shading
Modification of Utah Teapot
Color/Lighting Model Quantization
Output of HW4
To achieve Cel shading, we need to simplify the lighting model to reduce the number of colors in the image. And use Edge detection algorithm to outline the silhouette of the model.
Modification of Utah Teapot
Color/Lighting Model Quantization
Output of HW4
(Ks ∑[Ie (RᐧE)^s]) + (Kd ∑[Ie (NᐧL)]) + (Ka Ia)
→ (Kd∑ [Ie (NᐧL)]) + (Ka Ia)
2. Color quantization: Establish thresholds to different terms to get several lighting levels.
Method 1: Set threshold for light Intensity
if (lightIntensity > Threshold) {
lightIntensity = Bright;�} else {
lightIntensity = Dim;
}
Modification of Utah Teapot
Color/Lighting Model Quantization
Output of HW4
(Ks [Ie (RᐧE)^s]) + (Kd [Ie (NᐧL)]) + (Ka Ia)
→ (Kd [Ie (NᐧL)]) + (Ka Ia)
2. Color quantization: Establish thresholds for several lighting levels.
Method 2: Set threshold for NdotL
if (NdotL> Threshold) {
NdotL = BrightLevel;�} else {
NdotL = DimLevel;
}
Code Segment
Modification of Utah Teapot
Edge Enhancement
Output of 1st Implemenetation
Post Processing: Traverse the image after the model has been rendered to image space.
Simple Implementation: by comparing the color with surrounding pixels.
Modification of Utah Teapot
Edge Enhancement
Simple Implementation: by comparing the color with surrounding pixels.
Output after
Depth detection
Output before
Depth detection
Digging into more advanced Model and Algorithms
Modification of Lighting Model
ShaderGraph
Key Properties:
Shader Graph Flow
Visual Impact
Modification of Lighting Model
ShaderGraph
Key Properties:
Shader Graph Flow
Visual Impact
Edge Enhancement
BackFacing
Implementation: involves two rendering passes: the first pass renders the character, and the second pass renders the outline. During the outline rendering, the vertices are displaced in the direction of their normals within the vertex shader. This displacement enlarges the model's silhouette, which is then rendered to create the outline.
Problem: When Camera Zoom in, the Edge become wider
Solution: Use normal from NDC instead of Model Space
�
Shading
How to make 3D model look cartoonish
Shading
Reduce the number of color levels
Shading
Separate cool tones and warm tones
Shading
Control the hand-drawn light and dark areas
Shading
Bicolor Implementation
Shading
Bicolor Implementation
Adding more details
Lightmap
RGB Channels
R channel: Control which parts have highlight
G channel: Control the intensity of shadow
B channel: Control the intensity of highlight
Shadow map
G channel
Shadows
Base color: The base color that fills the entire layer
Soft shadows: represents shadows of clothing folds and simulates details on flat models
Pitch-black shadows: commonly used in areas like groin, neck where it meets the head
Implementation
Based on the theory, the main idea is to implement two types of shadows
Algorithm
Shadow factors to control under current lighting,
and output corresponding color
Lightmap Result
Lightmap Result
Face Shadow
Although the face already had anime-like face effect after lightmaps are applied, there are still several issues remaining
Light source is on the right side of the model, but the right face still has shadow
Face Lightmap
Face Lightmap
Control threshold through dot product between vectors
Left
Front
Back
Light
Face Lightmap
Dot product between front direction and the light direction controls which part of lightmap to be displayed
threshold = 0 (fully lit), dot product = 1
threshold = 1 (completely dark), dot product = 0
Left
Front
Back
Light
Face Lightmap
Face lightmap only contains the shadow information of 0° - 90°
Use dot product between left direction and the light direction to check light position
dot product > 0, light source is on the left
Left
Front
Back
Light
Light
Face Lightmap Demo
Final Adjustment
Demonstration
Reference
Hertzmann, Aaron. "Introduction to 3D Non-Photorealistic Rendering: Silhouettes and Outlines." https://mrl.cs.nyu.edu/publications/npr-course1999/hertzmann-intro3d.pdf
Tone-based Shading of Matte Objects (northwestern.edu)
The Evolution of Cel-Shading: A Detailed Exploration of the History, Techniques and Applications, https://sam-hedges.github.io/2023/01/31/cel-shading.html
Re:Zero − Starting Cel Shading, https://zhuanlan.zhihu.com/p/109101851
Analysis of Genshin shader, https://zhuanlan.zhihu.com/p/435005339