0. Context & Result of My Version of Genshin Character Materials

For this project, I looked to recreate the character toon-shading effect used in Genshin. I used Klee, an iconic character, as my base model to work from. Thanks to Rachel who allowed me to explore the project in Unreal Engine instead :)

Completed Viewport Screenshot in Unreal:

YouTube Demo

1. Original Concept Art

Found some nice in-game screenshots in Genshin:

2. Shader Creation

Base Color

Simple Dot with Sunlight Sampling

CelShading: Color Lookup Using a Custom Color Curve

Slight Self-Shadowing by Sampling a Simple Light/Shade Texture using Matcap UV

Custom 1: Specular Rendering (Talked with Rachel to replace multiple lighting support)

Achieved through reading PBR info from channels of the lightmap and compute using BlinnPhong

Custom 2 Additional Light Feature: Metallic Rendering

MetalMap used:

Diffuse + Specular + Metallic Combined Result

Custom Shadow Texture

World-Aligned Shadow Texture Mapping

Special Surface Shader: Custom SDF & Normal-Based Face Rendering

Old:

New:

SDF-based Shadow Calculation

Lerping Artist-Controlled Light and Shadow Colors

Outline

Base Outline

Using Noise to Offset Outline Based on Time For a Windy Effect on Hair

Pixel Art Screen Post Process Effect

Threshold at 1/10: Threshold at 1/20: Threshold at 1/29:

3. Game Scene & Interactivity

I used some marketplace assets that closely resembled Genshin Impact's modeling styles with the architecture mirroring the city where the character was from: "Mondstadt". Then I added my own lighting setup and post processes effect to it.

Here is one of my final hero render:

For the interactivity part, I wanted to showcase the shader performing at different lighting scenarios: another one at dawn, and another very stylized one. I implemented functions that would quick unload/load different lighting components & post process materials to achieve this. Here are the results on YouTube: YouTube Demo