Shaders
The shaders
Based on the research from fellow team members about the art direction of Meliae, it was decided that the game should have a cartoonish/painterly look. For this I was given the following reference image as to what our golden standard would be in terms of looks.
In order to create something stylistically similar using shaders I had to do some research. Eventually I decided that the best way to recreate this style would be to put a kuwahara filter on top of a cel shader. And maybe slap an outline shader in there for good measure.
​
I'll try my best to explain how I adapted and used these 3 different shaders in the rest of this post
The cel shader
Unfortunately combining the kuwahara and cel shaders together in unreal engine created a lot of noise in the game, which would cause issues for the player and the rest of development. to counter this I looked into the cel shading techniques of a game called 'Guilty Gear -Strive-.' The developers hosted a talk at GDC in 2015 in which they revealed some of their shading techniques.
^ before cel shader ^
^ After cel shader ^
^ Model + textures by Jaide Opara ^
Here's what the full shader looks like.
Don't worry, I'll break down how I made it as well.
First, I use an ILM map (although to this day I have no clue what ILM stands for) and a base color map. The color will be multiplied with the desired shadow tint parameter and the ILM map its red input will connect to notes that will control the band depth of the shadows, which dictates how far the shadows reach.
I then use switch parameters before the if nodes so that (if needed) I can adjust which shadow are activated for an object and which are not.
in the if node I put the dot function of an Atmosphere Sun Light Vector node and a Vertex Normals node into the B input. The shadow band depth goes into the A input. the A> B input takes the output of the previous if statement (or the highlight color for the first if node in the chain.) And the remaining inputs will have the shadow colors plugged in. All this essentially tells the shader where and how the shadows should be drawn.
Ambient occlusion is then added from the ILM map before the Specular occlusion is also handled. Afterwards we add nodes so that we can adjust the contrast and saturation of the shader.
Lastly, I add some final tweaks which make it possible for the damage effects to multiply the emissivity of the shader, allow the shader to react to light if needed, and add the normals into the shader if wanted.
Preferably I would have it so the shader reacts dynamically to the lighting, but this is currently outside of my skill level, this shortcut luckily isn't noticed in game though.
The kuwahara shader
I used a kuwahara shader/filter in order to achieve a more painterly effect from the screen space of the monitor. This was heavily based of one made by Matthijs Verkuijlen. there are a few small tweaks so the shader would be a little easier to control in the X and Y axis.
^ Models by Jaide Opara, textures by Natasza Dejczer ^
The fog shader
This shader is pretty pretty simple, but it proved to be verry effective for adding some atmosphere to the game.
it works by lerping the normal world colors with single, solid color. and then simply having the alpha be decided by a depth fade. I then exposed all the parameters so that they could be edited with an actual view on the game.​​​​
​
as for the background blur, I originally tried adding depth of field into the game, but I found out quickly that that would be too finicky and intensive for this use. So instead I cheated a little and added a transparent but slightly blurred plane over the background instead. this was a lot simpler and made for a better effect.
The outline shader
This is a shader made through the help of a tutorial by Visual Tech Art on youtube. However, I added a way to make the shader only apply to certain assets through the use of depth stencils.
​
​
I also used another tutorial by Evans Bohl and adapted a part of his outline coloring to implement into my existing shader. This way I can have as many colors as I want on whatever object I need them to be on.