🖍️ Edge Detection Outlines
How to draw edge detection outlines in Unity.
10 minute read
💡 This tutorial is made for Unity 6 or Unity 2022.3+ and the Universal Render Pipeline.
Jump to heading Introduction
Edge detection outlines have been commonly used in multiple games over the past years. They add a comic-book-like style to the scene which many game developers are after.
In this tutorial, I will show you how to set up an edge detection shader in Unity 6 and Unity 2022.
Jump to heading Full-Screen Render Pass
Our edge detection shader will need to affect the whole screen. For this, we will first make a full-screen render pass. In Unity 6, we can make use of the new render graph API. Make a new C# script called EdgeDetection.cs
I won't go over every line of code, but the full-screen render pass performs these steps:
- The AddRenderPasses method creates the edge detection material, sets up the render pass and passes it to the ScriptableRenderer using EnqueuePass.
- The Setup method passes the edge detection settings to the edge detection material
- The RecordRenderGraph method contains the actual render pass. We do a blit using the edge detection material.
You can find the complete code below for either Unity 2022 or Unity 6.
Unity 2022
using System;
using UnityEngine;
using UnityEngine.Rendering;
using UnityEngine.Rendering.Universal;
public class EdgeDetection : ScriptableRendererFeature
{
private class EdgeDetectionPass : ScriptableRenderPass
{
private Material material;
private static readonly int OutlineThicknessProperty = Shader.PropertyToID("_OutlineThickness");
private static readonly int OutlineColorProperty = Shader.PropertyToID("_OutlineColor");
public EdgeDetectionPass()
{
profilingSampler = new ProfilingSampler(nameof(EdgeDetectionPass));
}
public void Setup(ref EdgeDetectionSettings settings, ref Material edgeDetectionMaterial)
{
material = edgeDetectionMaterial;
renderPassEvent = settings.renderPassEvent;
material.SetFloat(OutlineThicknessProperty, settings.outlineThickness);
material.SetColor(OutlineColorProperty, settings.outlineColor);
}
public override void Execute(ScriptableRenderContext context, ref RenderingData renderingData)
{
var outlineCmd = CommandBufferPool.Get();
using (new ProfilingScope(outlineCmd, profilingSampler))
{
CoreUtils.SetRenderTarget(outlineCmd, renderingData.cameraData.renderer.cameraColorTargetHandle);
context.ExecuteCommandBuffer(outlineCmd);
outlineCmd.Clear();
Blitter.BlitTexture(outlineCmd, Vector2.one, material, 0);
}
context.ExecuteCommandBuffer(outlineCmd);
CommandBufferPool.Release(outlineCmd);
}
public override void OnCameraCleanup(CommandBuffer cmd)
{
if (cmd == null)
{
throw new ArgumentNullException(nameof(cmd));
}
}
}
[Serializable]
public class EdgeDetectionSettings
{
public RenderPassEvent renderPassEvent = RenderPassEvent.AfterRenderingTransparents;
[Range(0, 15)] public int outlineThickness = 3;
public Color outlineColor = Color.black;
}
[SerializeField] private EdgeDetectionSettings settings;
private Material edgeDetectionMaterial;
private EdgeDetectionPass edgeDetectionPass;
/// <summary>
/// Called
/// - When the Scriptable Renderer Feature loads the first time.
/// - When you enable or disable the Scriptable Renderer Feature.
/// - When you change a property in the Inspector window of the Renderer Feature.
/// </summary>
public override void Create()
{
edgeDetectionPass ??= new EdgeDetectionPass();
}
/// <summary>
/// Called
/// - Every frame, once for each camera.
/// </summary>
public override void AddRenderPasses(ScriptableRenderer renderer, ref RenderingData renderingData)
{
// Don't render for some views.
if (renderingData.cameraData.cameraType is CameraType.Preview or CameraType.Reflection) return;
if (edgeDetectionMaterial == null)
{
edgeDetectionMaterial = CoreUtils.CreateEngineMaterial(Shader.Find("Hidden/Edge Detection"));
if (edgeDetectionMaterial == null)
{
Debug.LogWarning("Not all required materials could be created. Edge Detection will not render.");
return;
}
}
edgeDetectionPass.ConfigureInput(ScriptableRenderPassInput.Depth | ScriptableRenderPassInput.Normal | ScriptableRenderPassInput.Color);
edgeDetectionPass.Setup(ref settings, ref edgeDetectionMaterial);
renderer.EnqueuePass(edgeDetectionPass);
}
/// <summary>
/// Clean up resources allocated to the Scriptable Renderer Feature such as materials.
/// </summary>
override protected void Dispose(bool disposing)
{
edgeDetectionPass = null;
CoreUtils.Destroy(edgeDetectionMaterial);
}
}Unity 6
using System;
using UnityEngine;
using UnityEngine.Rendering;
using UnityEngine.Rendering.RenderGraphModule;
using UnityEngine.Rendering.Universal;
public class EdgeDetection : ScriptableRendererFeature
{
private class EdgeDetectionPass : ScriptableRenderPass
{
private Material material;
private static readonly int OutlineThicknessProperty = Shader.PropertyToID("_OutlineThickness");
private static readonly int OutlineColorProperty = Shader.PropertyToID("_OutlineColor");
public EdgeDetectionPass()
{
profilingSampler = new ProfilingSampler(nameof(EdgeDetectionPass));
}
public void Setup(ref EdgeDetectionSettings settings, ref Material edgeDetectionMaterial)
{
material = edgeDetectionMaterial;
renderPassEvent = settings.renderPassEvent;
material.SetFloat(OutlineThicknessProperty, settings.outlineThickness);
material.SetColor(OutlineColorProperty, settings.outlineColor);
}
private class PassData
{
}
public override void RecordRenderGraph(RenderGraph renderGraph, ContextContainer frameData)
{
var resourceData = frameData.Get<UniversalResourceData>();
using var builder = renderGraph.AddRasterRenderPass<PassData>("Edge Detection", out _);
builder.SetRenderAttachment(resourceData.activeColorTexture, 0);
builder.UseAllGlobalTextures(true);
builder.AllowPassCulling(false);
builder.SetRenderFunc((PassData _, RasterGraphContext context) => { Blitter.BlitTexture(context.cmd, Vector2.one, material, 0); });
}
}
[Serializable]
public class EdgeDetectionSettings
{
public RenderPassEvent renderPassEvent = RenderPassEvent.AfterRenderingTransparents;
[Range(0, 15)] public int outlineThickness = 3;
public Color outlineColor = Color.black;
}
[SerializeField] private EdgeDetectionSettings settings;
private Material edgeDetectionMaterial;
private EdgeDetectionPass edgeDetectionPass;
/// <summary>
/// Called
/// - When the Scriptable Renderer Feature loads the first time.
/// - When you enable or disable the Scriptable Renderer Feature.
/// - When you change a property in the Inspector window of the Renderer Feature.
/// </summary>
public override void Create()
{
edgeDetectionPass ??= new EdgeDetectionPass();
}
/// <summary>
/// Called
/// - Every frame, once for each camera.
/// </summary>
public override void AddRenderPasses(ScriptableRenderer renderer, ref RenderingData renderingData)
{
// Don't render for some views.
if (renderingData.cameraData.cameraType == CameraType.Preview
|| renderingData.cameraData.cameraType == CameraType.Reflection
|| UniversalRenderer.IsOffscreenDepthTexture(ref renderingData.cameraData))
return;
if (edgeDetectionMaterial == null)
{
edgeDetectionMaterial = CoreUtils.CreateEngineMaterial(Shader.Find("Hidden/Edge Detection"));
if (edgeDetectionMaterial == null)
{
Debug.LogWarning("Not all required materials could be created. Edge Detection will not render.");
return;
}
}
edgeDetectionPass.ConfigureInput(ScriptableRenderPassInput.Depth | ScriptableRenderPassInput.Normal | ScriptableRenderPassInput.Color);
edgeDetectionPass.requiresIntermediateTexture = true;
edgeDetectionPass.Setup(ref settings, ref edgeDetectionMaterial);
renderer.EnqueuePass(edgeDetectionPass);
}
/// <summary>
/// Clean up resources allocated to the Scriptable Renderer Feature such as materials.
/// </summary>
override protected void Dispose(bool disposing)
{
edgeDetectionPass = null;
CoreUtils.Destroy(edgeDetectionMaterial);
}
}Now in our Universal Renderer Data asset we can add the Full Screen Edge Detection renderer feature.
Jump to heading Edge Detection Shader
Now let's make the edge detection shader! Start by making a new shader. You can do this by going Create > Shader > Unlit Shader in your project window.
Jump to heading Discontinuities
An edge detection shader works by looking at discontinuities in the scene. Where a discontinuity is great enough, an edge can be drawn.
Color: Let's say our shader sees the image on the left and we want to draw an edge. We could simply detect if there is a sudden color discontinuity, and if that is the case, draw an edge.
Normals: Now let's say our shader sees the image in the middle. In this case, the 2 edges of the cube are blue and so not color discontinuity can be found. Instead, we will look at the orientation of the edge (the normal vector).
Depth: If our shader sees the image on the right where the cube has the same color as the background, we cannot rely on color or orientation. Instead, we will look at the depth difference in the scene since the background is much farther than the cube.
The solution to creating an effective edge detection shader that will work for all geometry and colors, is to take into account color, normal vector and depth discontinuities.
Jump to heading Edge Detection
The edge detection shader will look at the scene color, depth and normals, and check for edges using an edge detection kernel. We will use the Roberts cross operator which computes an edge based on the differences between diagonally adjacent pixels. For each pixel in the scene, we take 4 corner samples and compute the edge.
See the comments in the shader to see what each part does.
❗ Make sure to keep the Hidden/Edge Detection name of the shader since the full-screen render pass refers to this name.
Shader "Hidden/Edge Detection"
{
Properties
{
_OutlineThickness ("Outline Thickness", Float) = 1
_OutlineColor ("Outline Color", Color) = (0, 0, 0, 1)
}
SubShader
{
Tags
{
"RenderPipeline" = "UniversalPipeline"
"RenderType"="Opaque"
}
ZWrite Off
Cull Off
Blend SrcAlpha OneMinusSrcAlpha
Pass
{
Name "EDGE DETECTION OUTLINE"
HLSLPROGRAM
#include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"
#include "Packages/com.unity.render-pipelines.core/Runtime/Utilities/Blit.hlsl"
#include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareDepthTexture.hlsl" // needed to sample scene depth
#include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareNormalsTexture.hlsl" // needed to sample scene normals
#include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareOpaqueTexture.hlsl" // needed to sample scene color/luminance
float _OutlineThickness;
float4 _OutlineColor;
#pragma vertex Vert // vertex shader is provided by the Blit.hlsl include
#pragma fragment frag
// Edge detection kernel that works by taking the sum of the squares of the differences between diagonally adjacent pixels (Roberts Cross).
float RobertsCross(float3 samples[4])
{
const float3 difference_1 = samples[1] - samples[2];
const float3 difference_2 = samples[0] - samples[3];
return sqrt(dot(difference_1, difference_1) + dot(difference_2, difference_2));
}
// The same kernel logic as above, but for a single-value instead of a vector3.
float RobertsCross(float samples[4])
{
const float difference_1 = samples[1] - samples[2];
const float difference_2 = samples[0] - samples[3];
return sqrt(difference_1 * difference_1 + difference_2 * difference_2);
}
// Helper function to sample scene normals remapped from [-1, 1] range to [0, 1].
float3 SampleSceneNormalsRemapped(float2 uv)
{
return SampleSceneNormals(uv) * 0.5 + 0.5;
}
// Helper function to sample scene luminance.
float SampleSceneLuminance(float2 uv)
{
float3 color = SampleSceneColor(uv);
return color.r * 0.3 + color.g * 0.59 + color.b * 0.11;
}
half4 frag(Varyings IN) : SV_TARGET
{
// Screen-space coordinates which we will use to sample.
float2 uv = IN.texcoord;
float2 texel_size = float2(1.0 / _ScreenParams.x, 1.0 / _ScreenParams.y);
// Generate 4 diagonally placed samples.
const float half_width_f = floor(_OutlineThickness * 0.5);
const float half_width_c = ceil(_OutlineThickness * 0.5);
float2 uvs[4];
uvs[0] = uv + texel_size * float2(half_width_f, half_width_c) * float2(-1, 1); // top left
uvs[1] = uv + texel_size * float2(half_width_c, half_width_c) * float2(1, 1); // top right
uvs[2] = uv + texel_size * float2(half_width_f, half_width_f) * float2(-1, -1); // bottom left
uvs[3] = uv + texel_size * float2(half_width_c, half_width_f) * float2(1, -1); // bottom right
float3 normal_samples[4];
float depth_samples[4], luminance_samples[4];
for (int i = 0; i < 4; i++) {
depth_samples[i] = SampleSceneDepth(uvs[i]);
normal_samples[i] = SampleSceneNormalsRemapped(uvs[i]);
luminance_samples[i] = SampleSceneLuminance(uvs[i]);
}
// Apply edge detection kernel on the samples to compute edges.
float edge_depth = RobertsCross(depth_samples);
float edge_normal = RobertsCross(normal_samples);
float edge_luminance = RobertsCross(luminance_samples);
// Threshold the edges (discontinuity must be above certain threshold to be counted as an edge). The sensitivities are hardcoded here.
float depth_threshold = 1 / 200.0f;
edge_depth = edge_depth > depth_threshold ? 1 : 0;
float normal_threshold = 1 / 4.0f;
edge_normal = edge_normal > normal_threshold ? 1 : 0;
float luminance_threshold = 1 / 0.5f;
edge_luminance = edge_luminance > luminance_threshold ? 1 : 0;
// Combine the edges from depth/normals/luminance using the max operator.
float edge = max(edge_depth, max(edge_normal, edge_luminance));
// Color the edge with a custom color.
return edge * _OutlineColor;
}
ENDHLSL
}
}
}And that's it! You should now see an outline in your scene and be able to control the outline settings through the outline material inspector.
Jump to heading Next Steps
There you go! A very basic edge detection shader in Unity but a great starting point to build upon. You can go ahead and add many features to this shader. Some ideas:
- Instead of hardcoding the depth/normals/color sensitivities in the shader, pass them as settings just like the color and thickness. This will allow you to better configure the edge detection shader.
- Implement some of the techniques in the Roystan outline tutorial linked below to get rid of some artifacts for sharp surface angles.
- Use the depth of the scene to fade out edges towards the distance.
If you're interested in outline rendering, please check out Linework, an outline rendering toolkit I made for Unity. It contains an advanced edge detection shader as well as 3 other outline types for rendering per-object outlines.
Jump to heading Additional Resources
Linework - A Practical Toolkit for Rendering Outlines
https://roystan.net/articles/outline-shader/
https://www.alanzucconi.com/2022/04/19/edge-detection/