top of page

2021

Cel Shader Project

CelShaderTop.png

Goal of this project:

The goal of this project was to generate Cel Shading with ramps that can be adjusted, as well as how many layers it produces. This effect is going to be used in another project, therefor it is very important to make it as performance friendly as possible. Another feature that is important is to support tranclucency and colored lights for that reason.

CelShaderOverview.png
CelShaderDesmos.png

Research:

Looking into how Cel shading is made, I found that most rely on "if statements" which can become performance heavy if I were to do too many layers. That's when I started to think of other solutions and headed over to Desmos. After a bit of research, I came up with this equation that did the trick for me.

o - dictates the falloff, making the transition appear smoother.

f - dictates the ammount of ramps the cel shader shall generate.

Programs Used

UnrealLogo.png

Approach:

My approach has been to generate ramps by using the luminosity values of the scene and dividing them into ramps based of the values each pixel has. The idea is pretty much the same as the "if statement" method, but without the "if statement".

To the right you can see the material setup in
Unreal Engine 4.

Note - This snippet will only produce the black and white values. 

CelShaderUEGraph.png
CelShaderLowRes.gif

Advantages:

The advantage with my method is that the user can easily add or remove layers and tweak the ramp falloff with variables.

Another advantage is that this method is much more performance friendly than the "if-statement" method.

Limitations:

The limitation however would be that the user don't have the ability to adjust the size of each ramp since the equation is doing it linearly in code. That means if you offset 1 ramp, you offset all of them at once.

​
 

CelShaderHLSL.png
CelShaderInEngine.png

In The Project:

Writing the code for our engine wasn't too hard since most of the work had already been made in Desmos.
The rest was more or less translating my prototype from Unreal Engines shader grapth into code as well.

To the left you can enjoy its current state in our own engine.

Wishlist:

The other developers in the team has a wishlist of features they want added. I'll go through the list depending on how much time I have left from other tasks, right now there are two main features they want added:

-Height gradient
-Rim light

If I decide to add those, I'll update this page at a later date.

CelShaderSplash.png
bottom of page