Documentation: Concept Art Shader Pack for Unreal Engine
Available on the Unreal Engine Marketplace
Contents:
- Overview - What does the shader do
- Initial Setup
- Material Overview
- Outline Material
- Greyshade Material
- Hatching Material
- Ink Material
- Paper Material
- Toon Shader
- Brush Stroke Material
- Painted Sky Material
- Pixelate Material
- Vignette Material
- Mixer Material
- Combining the Effects
- Advanced Usage - tips and tricks
Important: If flickering occurs with the outlines, please set the Antialiasing Method to MSAA or FXAA.
1. Overview - What Does It Do
The Concept Art Shader Pack For Unreal Engine is a collection of 10 different Post-Process-Materials specifically aimed at the use in Concept Art, but I can also imagine a use for it in games or anything else.
It contains an Outline Material, Greyshade Material, Hatching Material, Ink Material, Paper Material, Toon Shader, Color Grading Material, Brush Stroke Material, Pixelate Material, and a Vignette Material.
The different effects can be combined by using the "Mix Material" (further description in 3.11.)
Concepts by Maya Squar (https://www.artstation.com/mayasquar)
It is easy to use, adaptable and versatile.
2. Initial Setup
- create an Unreal Engine Project if not already existing
- merge the Concept Art Shader Pack into your Project
- in your 3D scene, 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 (optional)
- then, in the post process volume search for "Post Process Materials" or navigate to Rendering Features > Post Process Materials. Then click on the plus next to Array, choose "Asset Reference" and then drag & drop one of the Material instances in there.
- you can find the Materials under Content > ConceptArtShaders > post_process_materials > Material_Instances.
The material is now ready to use. Doubleclick the instance and you can start to set it up.
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. Material Overview
3.1. Outline Material
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 Outlines)(near)" Parameter.
(low and high line width)
The "Threshold (Depth Outlines)(near)" 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)(near)" and "Threshold (Diffuse Outlines)(near)". They do exactly the same.
An option that has been added recently is "Use Distance Blend". With it enabled, the Line Width, as well as the Threshold, will decrease over distance. Therefore you now have the parameters "Line Width (Depth Outlines)(near)"/"Line Width (Diffuse Outlines)(near)", which define the maximum thickness of the lines that are close to the camera, and "Line Width (Depth Outlines)(far)"/"Line Width (Diffuse Outlines)(far)" which define the minimum thickness of the lines that are far from the camera.
As well as "Threshold (Depth Outlines)(near)"/"Threshold (Diffuse Outlines)(near)", which define the maximum threshold close to the camera, and "Threshold (Depth Outlines)(far)"/"Threshold (Diffuse Outlines)(far)" which define the minimum threshold far from the camera. (more information about the Threshold parameter can be found above)
The "Blend Distance" parameter defines the distance within which the blending occurs. The value is not representative of any length unit like meters.
Another option that can be enabled is "Exponential Blend Distance". By default this option is disabled, but especially for exterior scenes, it is recommended to use it. When it is disabled, the blending distance is linear (e.g. line thickness 5 after 1m, 4 after 2m, 3 after 3m, 2 after 4m, 1 after 5m). With it enabled the blending distance is exponential (e.g line thickness 5 after 1m, 4 after 2m, 3 after 4m, 2 after 8m, 1 after 16m)
With "Blend Distance Exponent", you can also edit the exponent that is used. By default, it is set to 2.
Here is a comparison of Linear Blend Distance (left) vs Exponential Blend Distance (right)
The "Blend Distance Debug Plane" helps to visualize at which point the Distance Blend stops, or in other words, at which point the outlines have reached the minimum set width. It moves with the "Blend Distance" parameter.
You can also freely adjust the color of the Debug Plane with the parameter "Debug Plane Color"
The following screenshots show the Debug Plane at a different Blend Distance, the parameter "Line Width (Depth Outlines)(far)" is set to "0"
(left: Debug Plane enabled, right: Debug Plane disabled)
There's also the option "White Background". With it set to "1", the outlines get drawn on top of a white background instead of on top of the original scene.
Outlines can also be enabled in the other Post Process Materials.
3.2. Greyshade Material
This Material generates a greyshade version of your scene.
The option "Isolate Lighting Information" controls which algorithm is used to produce the greyshade look. If it's disabled, the scene will just be desaturated completely. When it is enabled, the shader tries to filter out all the information from the diffuse color and leaves only the lights and shadows.
It should be mentioned 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 assign 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.
3.3. Hatching Material
"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.
"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:
3.4. Ink Material
This material works a bit like a cel-shader. It paints the darker areas of the image black, and the lighter areas white. You can also enable "two tone" to have darker and lighter types of shadows together.
The area where the shadows are painted can be adjusted with "darker shadows cutoff" and "lighter shadows cutoff". The darkness of the shadows can be adjusted with "darker shadows color" and "lighter shadows color".
3.5. Paper Material
If you want the image to look like it's painted on paper, use the Paper Material. It overlays the rough structure of paper over the image, and also adds some wrinkles if wanted.
Both textures can be adjusted according to your needs. "Wrinkles Intensity" and "Paper Texture Intensity" can be adjusted or set to 0 to disable them completely. "wrinkles UV scale" and "paper UV scale" control the size of the textures.
3.6. Toon Shader
The Pack also includes a Toon Shader.
all features of the Outline Material are also available here.
The Shader uses the diffuse color from the scene, to first remove the lighting. When no diffuse color is found (like for self-lit materials), the original background is automatically used for this area. With the "Mix in Original Lighting"-option, you can also feed some of the original background back into the diffuse color, if wanted.
You can adjust the brightness of the image with the options: "Diffuse Color Brightness" and "Original Scene Brightness"
On top of this image, the cel-shading is then added, in form of 4 shadow layers that are added.
With "shadows 1/2/3/4 cutoff" the position of each shadow layer can be defined. Set it to "0" to disable the layer completely. With "shadows 1/2/3/4 color" you define the brightness of each shadow layer.
Use the "Denoise" option to smoothen out the shadows and remove noise from the shadow borders (higher values are performance heavy)
3.7. Brush Strokes Material
The Brush Strokes Material gives the Scene a Painted Look. It includes three different typed of Paint strokes, that also can be mixed: "Curved Strokes", "Random Strokes" & "Straight Strokes". You can control the strength of each type with the "Intensity" parameter and the size of the strokes with the "UV Scale" parameter.
For the Straight Strokes only, you can also modify the "Length" and "Width" separately, as well as control their direction with the "Rotation" parameter.
Also for each type, you can also multiply the alpha texture of the strokes with "Shadow Intensity" to give each stroke more contrast without turning the intensity up.
This Material manipulates the Scene Texture UVs and is therefore not included in the Mixer Material. To combine it with other effects, mix them in the Post Process Volume (see 4.)
3.8. Painted Sky Material
With this material, you can change the look of the sky quickly and easily, without having to change the sky-sphere.
With the parameter "Background Distance" you can change the scene distance at which the sky replacement begins. The default settings should work however in most cases.
You can also modify the contrast, saturation, and color of the sky with the "Contrast", "Desaturation" and "Tint" parameters.
You can also give it a painted look by using the "Painted Sky" parameters. You can control the "Painted Sky - Intensity" and the "Painted Sky - UV Scale" of the Paint Strokes (Intensity 0 means paint effect is off). You can also change the look of the paint effect by changing the texture that is used under "Painted Sky - Brush". The texture should be in greyscale and have power of two size.
You can also replace the sky entirely with either a texture or a solid color. To do that, enable the "Replace Sky with Texture" option. When the option is enabled, new parameters appear.
You can change the used sky texture in the "Background Image" slot. The colors of the used texture can also be inverted with "Invert Background Image", and the brightness of it adjusted with "Multiply Background Image".
The Size can be changed vertically and horizontally with the parameters "Background UV Scale X", "Background UV Scale Y" & "Background UV Scale XY".
If no texture at all is wanted, you can also use the "Sky is Solid Color" option (only appears when "Replace Sky with Texture" is enabled). You can then change the sky to any color with the "Solid Sky Color" parameter.
This Material manipulates the Scene Texture UVs and is therefore not included in the Mixer Material. To combine it with other effects, mix them in the Post Process Volume (see 4.)
3.9. Pixelate Material
The Pixelate Material creates rough pixels from the scene.
Use "Resolution XY" to change the size of the pixels, or "Resolution X", "Resolution Y" if you don't want square pixels.
"Pixel Grid" overlays a grid, the same size as the pixels are. Set it to "0" to turn it off, "1" to make it black, or "-1" to make it white.
This Material manipulates the Scene Texture UVs and is therefore not included in the Mixer Material. To combine it with other effects, mix them in the Post Process Volume (see 4.)
3.10. Vignette Material
With the Vignette material, you can overlay different styles of vignettes over the scene.
There are 5 different vignette styles that can also be mixed. The "Intensity", "Hardness" and "UV Scale" of each can be controlled.
The color or tint of the vignette can be changed with "Vignette Color"
If you are using the vignette in combination with outlines or hatching, you might want to use the "Hatched Vignette" option, which converts the transparent vignette into hatching. The hatching can then be adjusted with the "Hatching - Rotation" and "Hatching UV Scale" parameters.
3.11. Mixer Material
The Mixer Material is there, to make it easier to combine the different effects from the other materials. Like the other materials, it needs to be added as an Asset Reference to the Post Process Material section of the Post Process Volume.
This material combines all the features from most other materials in one.
Excluded are features that require Scene Texture UV manipulation (Brushstrokes Material, Painted Sky Material, Pixelize Material). If you want to combine these effects, it needs to be done in a different way, explained in point 4.
Here is a list of all the available options in the Mixer Material:
4. Combining the Effects
Combining most Effects can be easily done by using the Mixer Material described in point 3.11.
Excluded in the Mixer Material are the Brushstrokes Material, Painted Sky Material & Pixelize Material, due to technical limitations.
To combine those Effects, add multiple Asset References in the Post Process Volume under Rendering Features > Post Process Materials > Array
5. 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.