top of page
​Comic-Book Style Toon Shader
Platform: PC
Duration: 3 Weeks
Tools: Unreal Engine 5, Post-Process Material
- Solo Project
​Inspiration:
My inspiration comes from the Hi-Fi Rush team's presentation at GDC about their stylized 3D toon rendering techniques. They used a comic-book style, applying halftone dots in the lit areas and hatching lines in the shadowed areas. Therefore, I want to create a similar toon shader following this approach.
​Overview:
I primarily achieve this effect by creating a post-processing material. It can be devided into four main parts: the outline, toon shading, hatching lines and halftone dots.
​Material Overview
​The Outline:
I implemented an edge detection technique using a Laplacian filter, which operates by sampling adjacent pixels around the current pixel in a 3x3 kernel. For each neighboring pixel, the filter calculates the differences in both the normal and depth values compared to the center pixel.
​Outline Node
​Aspect Ratio:
When I was working on the outline, I encountered an issue: the thickness of the outline was inconsistent and disconnected. After spending some time troubleshooting, I realized it was caused by the screen's aspect ratio.
Outline with Inconsistent Thickness under Different Aspect Ratios (incorrect example)
To fix this, I calculated the ratio of the view size and passed it into the convolution sampling process. This ensured that the outline thickness would remain consistent regardless of the aspect ratio. I also applied the same approach to the halftone dots afterward.
​Aspect Ratio Node
​Toon Shading:
The toon shading effect is primarily achieved through value manipulation in the HSV space. By adjusting and compressing the intensity values, the shader quantizes the light, creating the distinct bands of shading that are characteristic of toon shading. The result is then converted back to RGB for final output.
Toon Shading Node
MF_Curve Node
Turn-off
Turn-on
Hatching Lines:
To generate hatching lines in the shadow areas, a shadow mask is first created, which determines, based on a set threshold, which parts should be considered shadow regions. Then, regular lines are generated to simulate hand-drawn hatching effects and are overlaid on the shadow areas.
Hatching Lines Node
Turn-off
Turn-on
Halftone Dots:
To generate halftone dots in the lit areas, similarly, a highlight mask is first created, which determines what parts should be considered lit regions. Then, a regular dot pattern is generated based on dot density and rotation, and then combined with the highlight areas to simulate a comic-style halftone effect, with the size of the dots changing according to the varying intensity of the light.
Halftone Dots Node
Before
After
Before
After
​Effect on Point Light
​Effect on Volumetric Fog
Toon Shader on Metal Material:
Turn-off
Turn-on
Under Strong Light Source
Working in Progress ...
bottom of page