Unreal Engine Shader Showcase
Kuwahara Filter - Blueprints & HLSL
Unreal Engine Post Process Tech Breakdown
Kuwahara Filter
Kuwahara
A Kuwahara filter is a noise reduction algorithm that is known for creating a "painterly" look by reducing texture noise whilst preserving edges
Approach
I was assigned the task of creating this shader as part of a my work on Heavy lies the Crown, a souls-like project currently in development at University of Portsmouth
I was heavily influenced by Matthijs Verkuijlen's approach detailed here:
UE4 - Tutorial - Painterly Post Processing - Kuwahara Filter (youtube.com)
Implementation
Blueprints are used to gather the scene texture and UV data. these are fed into the script which uses for loops to sample a radius of pixels and filter out pixel data that exceeds a given variance.
Right click to drag the blueprint window ->
HLSL code
No Directionality or Edge Detection
Directionality & Edge Detection
Differences
There are several differences between the above implementations. The basic filter (left), uses a single radius value which is used to determine how many pixels are filtered, this is light weight and relatively optimal and works as a really good base for other shaders to be placed on top.
The second implementation includes rotation metricise and a Sobel operator which creates more customisations within the shader, however it is significantly more complex to render because Sobel essentially doubles the number of loops required for each pixel that is sampled.
I keep both of these approaches available for the artist as it allows them to create a range of unique visual styles and is project agnostic. The real benefit of implementing the Sobel shader is the ability to customise the edge detection filtering algorithm to include other edge detection methods, like Laplacian.
Limitations
A Major limitation of the Kuwahara shader is its removing or filtering of texture detail, this isn't as noticeable in a stylised scene like the one to the right, but in a scene with more complex material detail it becomes more difficult to balance the painterly feel with material sharpness. Text on signs and paper is a good example of this.
Another limitation is in the method of sampling pixels. This can be a struggle in situations where the player needs to be able to see points of interest from across an open environment. In this situation there is often a greater variance between pixels so some detail can be missed or occluded.
A simple solution to this is using different post process volumes. another solution would be adding a depth buffer to limit the effect of the filter beyond a given distance.
Outline Shader - Blueprint & HLSL
Outline Shader
This outline shader uses a Laplacian operation to find edges these are then lerp'd as alpha with the Scene texture and outline colour.
Outline Shader
The Laplacian operator works in almost exactly the same way Sobel does but uses a different filtering maths in the kernel. this could very easily be converted to Sobel and my blueprint only outline shader could very easily be converted to Laplacian.
The general premise is that a pixel is chosen and the 8 surrounding pixels are sampled, this is known as the kernel, we then look for big variations between the pixels and where this exists we draw an outline.
The choice to use Laplace rather than Sobel was in its less extreme filtering, its more subtle and since this shader interacts with Normals means less tweaking where texture detail is high.
My blueprint only outline shader lacks this subtlety.
Outline Shader - BP only
For reference the following interactive BP's are for the blueprint only version of the outline shader using Sobel.
Material functions are used for getting the kernel and modulating the edge thickness amounts.
Similarly to the HLSL variant of this shader it also samples Normals.
The only downside of this shader is the customisation is almost too much, there are a lot of parameters that can be accessed through the material instance. I need to simplify the customisation so its easier to pickup and use.
Credit to Tidal Flask Studios for this amazing scene which can be found here: