UE5 Zenless Zone Zero Stylization

Chromatic Aberration

Outline

Shadow

Cover Image

Cover Image

Chromatic Aberration Shader Graph

Chromatic Aberration Shader Graph

Outline Shader Graph

Outline Shader Graph

Shadow Shader Graph

Shadow Shader Graph

Toon Shader Graph

Toon Shader Graph

Curve Atlas

Curve Atlas

UE5 Zenless Zone Zero Stylization

This is a stylized renderer in Unreal Engine 5 intended to recreate the NPR style from the game Zenless Zone Zero with some personal touches.

The model was taken from the official, publicly released MMD models. However, this means that the model comes with neither normal maps nor light maps, which made the model look slightly flat and has less control over the look of individual parts.

The basic idea is still constructing lambert shader and pluging it into emission. However, this time I used the default lit shading model instead of the unlit model, which allowed some support of features such as: multiple lights, shadows cast by other objects.

Then I used Curve Atlas to adjust the contrast of the images textures, which helped me achieve a overall more punchy look.

If the model had light maps and normal maps, I would have implemented some metallic specular by constructing blin-phong and masking it using light map onto only parts with metallic value over a certain threshold. Also I could use normal map to map vertex positions for the basic lambert shading model.

# Post Process
I think what really carried this project is the post process shaders. I used a custom stencil pass to mask out the character from the background, which allowed me to have a lot more control over the look of the shadows.

# Shadow
For the shadow post process, I basically did a very dense dotted effect with a Voroinoi noise of only 1 octave, then applied power adjust its shape. Then I simply multiplied it onto the shadow part of the image.

# Outline
The outline is done by using the SampleSceneDepth node, which allowed me to find drastic changes in the depth pass and use that as a mask to drive the outlines.

# Vignette & Chromatic Abberation
For Vignette, I simply converted the 0-1 viewport UV space into -1 to 1, and then used length as a radial mask.
For Chromatic Abberation, I just shifted the sampling viewport UV by a tiny amount to offset the red channel in one direction, and then the blue and green channels in the opposite direction.

More artwork