UPDATE: You can find a more up-to-date version of this documentation on Polycount:
In this documentation, I describe in-depth the Hatched Ink Shader for Unreal Engine. I aimed this shader specifically at Concept Artists, but I can also imagine a use for it in games or anything else.
If you have somehow stumbled over this documentation without knowing about the shader, you can get it here:
[approval pending]
This document is structured as followed:
- Overview - What does the shader do
- Initial Setup
- Features and how to use them
3.1. Outlines
3.2. Grayshade
3.3. Hatching - Advanced Usage - tips and tricks
- Features that may follow
1. Overview - What Does The Shader Do
This is an easy-to-use post-process material. It can create outlines with or without different styles of hatching, on a white background, on grayscale, or on your original scene background, to create images similar to those below.
It is easy to use, adaptable and versatile.
3D Scene put together by Maya Squar (ArtStation - Maya Squar)
2. Initial Setup
- create your 3D-Scene in the Unreal Engine
- go to your “Place Actors” window, search for Post Process Volume and drag & drop it into the scene
- in the settings of your post process volume, search for “Infinite Extent (Unbound)”, and check it, so it affects the whole scene
- then also search for “Post Process Materials”, click on the plus next to Array, choose “Asset Reference” and then drag & drop the instanced material in there.
Your material is now ready to use. Doubleclick the instance and you can start to set it up. It will look something like this:
Note that some settings will only show up when certain others are selected.
You can make as many copies of the Instance as you want, to save your settings.
3. Features and how to use them
The Material is split into three main features. Drawing outlines, generating a gray shade image and generating hatching. They can be used separately or combined freely.
You need to activate the checkboxes on the left to be able to edit the belonging parameters!
Here is how they work.
Outlines
There are two methods of generating the outlines. “Depth Based Outlines” and “Diffuse Based Outlines”. As the names suggest, one generates the outlines based on the depth information of the scene, the other one based on the color information.
“Depth Based Outlines” is active by default and should always be used as the main method. You can edit the thickness of the outline with the “Line Width (Depth Outline)” Parameter.
(low and high line width)
The “Threshold (Depth)” defines the minimum distance that needs to be between the geometry so that outlines are drawn. The Higher the Value is set, the more lines are created. You might have to work in the top range of the value to adjust it, and only set it to a lower value if you only want outlines on the edges of your objects.
(low, medium, and high threshold)
The “Diffuse Based Outlines” work best in combination with the Depth Based Outlines to get additional information from the image.
Check out these notes for example. They only stand out a little from the wall, so they barely show up.
To counter this I gave them a different colored material than the wall and activated Diffuse Based Outlines.
It’s a similar situation with this dotted carpet. Without Diffuse Based Outlines there is no pattern visible, but with it switched on, the pattern shows up.
For the Diffuse Based Outlines, you have the same settings as for Depth Based Outlines. “Line Width (Diffuse Outlines)” and “Threshold (Diffuse)”. They do exactly the same.
There’s also the option “Show Original Scene as Background”. If you have outlines or hatching enabled this means those will be drawn on top of your original scene and not on white as in the screenshots above. When outlines or hatching are not active, this means only your original scene will be shown, as if there is no post-process applied.
Next up:
Greyshade
Make sure “Show Original Scene as Background” is disabled, otherwise, these options will not show up.
With the option “Generate Greyshade”, the shader generates a grayscale image from your original scene. When “Isolate Lighting Information” is disabled, it means the image will just be desaturated completely.
By default “Isolate Lighting Information” is turned on though. When it is active, the shader tries to filter out all the information, from the Diffuse, and to leave only the lights and shadows.
It is important to mention that “tries” means, due to technical limitations it is using a workaround to achieve this. This doesn’t always work perfectly, especially if you have very dark or high contrast colors in your scene. Usually, it will lead to a better result, if you simply assigning the same grey material to all your objects.
On the left, Isolate Lighting Information is turned off, on the right, it’s enabled:
When “Isolate Lighting Information” is enabled, there’s also the option “Use only Red Channel for Lighting Information”. This is enabled by default and generally, you should leave it like that since it gives the best result. However, if you have completely blue or green lights in your scene, they will just not show up with this option enabled. in this case, you should uncheck it.
You can also adjust the “Greyshade Brightness (Multiply)” and the “Greyshade Contrast (Power)” of your image.
Hatching
You can also “Generate Hatching” and Crosshatching on your image.
“Hatching Thickness” defines the overall thickness of your hatching lines:
you can also go into the negative values if you want the hatching thinner up to the point where they completely disappear.
“Overall Hatching UV Scale” defines the size of your hatching:
this will also affect the width of the lines, so you might want to counter this with the Hatching Thickness again.
“Overall Hatching Rotation” does exactly what it says, it rotates the hatching.
“Primary Hatching Area” and “Secondary Hatching Area” define in which light situation hatching lines start to appear. Primary lines are used for the less dark, and secondary lines for the darker areas.
A higher value means only the darker areas are affected, which usually means less area.
“Secondary Hatching Offset” and “Secondary Hatching Rotation” can be used to achieve different styles of hatching.
The rotation is defined with a value from 0-1
Here are some examples:
4. Advanced Usage - tips and tricks
- if you have multiple cameras set, instead of setting your post-process volume to unbound, you can leave this option turned off, then position multiple post-process volumes where your cameras are and define a different instance of the shader to each of them. This way you can save different settings for each camera.
5. Features that may follow
- distance-based outline strength
- more hatching styles like dotted, or more organic looking ones
- cel shader
- colored lighting on top of the grayscale image
- improvement of the “Isolate Lighting Information” option