屏幕后处理效果
边缘检测
边缘检测的原理是利用一些边缘检测算子对图像进行卷积（convolution）操作
一、卷积
在图像处理中，卷积操作指的就是使用一个卷积核（kernel）对图像中的每个像素进行一系列操作。卷积核通常是一个四方形的网格结构，该区域内每个方格都有一个权重值。当对图像中某个像素进行卷积时，要把卷积核的中心放置在该像素上，用卷积核中的权重值去乘对应像素，然后再将相乘的结果相加，就是这个像素对应的新的像素值。
卷积操作分为连续的和离散的：
卷积的定义
在图像处理中是离散的，所以就认为卷及操作就是加权求和的过程。连续的就是求积分。
卷积操作
二、常见的边缘检测算子
用于边缘检测的卷积核，也被称为边缘检测算子。
常见的边缘检测算子
三、边是如何被区分的
如果相邻像素之间存在着明显的差别（亮度，纹理，颜色等属性），就认为它们之间存在着一条边界。这种相邻像素之间的插值可以用梯度（gradient）来表示 ，边缘处梯度的绝对值比较大。在边缘检测时，需要对每个像素点做两次卷积操作，一次水平一次竖直（根据卷积核也能看出，水平和竖直方向分别有一行权重是0，所以卷积核不管怎么旋转都是一样的效果），分别得到Gx，Gy。它们绝对值的和G就是我们使用的梯度值：
G值
G值越大越有可能是边缘。
四、实现
只有边缘
边缘混合
注：这种实现仅仅利用了屏幕颜色信息，而实际中，物体的纹理、阴影等信息都会影响边缘检测的结果，会包含非预期的描边，为了得到更加准确的边缘信息，往往会在屏幕的深度纹理和法线纹理上进行边缘检测。
using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class EdgeDetection : PostEffectsBase
{
public Shader edgeDetectionShader;
private Material edgeDetectionMaterial = null;
[Range(0, 1)] public float edgeOnly = 1.0f;
public Color edgeColor = Color.black;
public Color backgroundColor = Color.white;
public Material material
{
get
{
edgeDetectionMaterial = CheckShaderAndCreateMaterial(edgeDetectionShader, edgeDetectionMaterial);
return edgeDetectionMaterial;
}
}
private void OnRenderImage(RenderTexture src, RenderTexture dest)
{
if (material != null)
{
material.SetFloat("_EdgeOnly",edgeOnly);
material.SetColor("_EdgeColor",edgeColor);
material.SetColor("_BackgroundColor",backgroundColor);
Graphics.Blit(src,dest,material);
}
else
{
Graphics.Blit(src,dest);
}
}
}
Shader
Shader "Unlit/EdgeDetection"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
_EdgeOnly("Edge Only",float)=1
_EdgeColor("Edge Color",Color)=(0,0,0,1)
_BackgroundColor("Background Color",Color)=(1,1,1,1)
}
SubShader
{
ZTest Always
Cull Off
ZWrite Off
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
sampler2D _MainTex;
half4 _MainTex_TexelSize;
fixed _EdgeOnly;
fixed4 _EdgeColor;
fixed4 _BackgroundColor;
struct v2f
{
float4 pos:SV_POSITION;
half2 uv[9]:TEXCOORD;
};
v2f vert (appdata_img v)
{
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
float2 uv = v.texcoord;
o.uv[0] = uv + _MainTex_TexelSize.xy * half2(-1,-1);
o.uv[1] = uv + _MainTex_TexelSize.xy * half2(0,-1);
o.uv[2] = uv + _MainTex_TexelSize.xy * half2(1,-1);
o.uv[3] = uv + _MainTex_TexelSize.xy * half2(-1,0);
o.uv[4] = uv + _MainTex_TexelSize.xy * half2(0,0);
o.uv[5] = uv + _MainTex_TexelSize.xy * half2(1,0);
o.uv[6] = uv + _MainTex_TexelSize.xy * half2(-1,1);
o.uv[7] = uv + _MainTex_TexelSize.xy * half2(0,1);
o.uv[8] = uv + _MainTex_TexelSize.xy * half2(1,1);
return o;
}
fixed Luminance(fixed4 color)
{
return 0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b;
}
half Sobel(v2f i)
{
/*
const half Gx[9]={
-1,-2,-1,
0 , 0, 0,
1 , 2, 1
};
const half Gy[9]={
-1,0,1,
-2,0,2,
-1,0,1,
};
*/
//Sobel算子
const half Gx[9] = {-1, 0, 1,
-2, 0, 2,
-1, 0, 1};
const half Gy[9] = {-1, -2, -1,
0, 0, 0,
1, 2, 1};
half texColor;
half edgeX = 0;
half edgeY = 0;
//只是用了像素的亮度作为依据
for(int it = 0; it < 9; it++){
texColor = Luminance(tex2D(_MainTex,i.uv[it]));
edgeX += texColor * Gx[it];
edgeY += texColor * Gy[it];
}
// half edge = 1- abs(edgeX) - abs(edgeY);
return abs(edgeX) + abs(edgeY);
}
fixed4 frag (v2f i) : SV_Target
{
half edge = Sobel(i);
// fixed4 withEdgeColor = lerp(_EdgeColor,tex2D(_MainTex,i.uv[4]),edge);
// fixed4 onlyEdgeColor = lerp(_EdgeColor,_BackgroundColor,edge);
//lerp相当于半个if语句
//if(edge越大) 颜色越靠近边缘颜色edge
fixed4 withEdgeColor = lerp(tex2D(_MainTex,i.uv[4]),_EdgeColor,edge);
fixed4 onlyEdgeColor = lerp(_BackgroundColor,_EdgeColor,edge);
return lerp(withEdgeColor,onlyEdgeColor,_EdgeOnly);
}
ENDCG
}
}
Fallback Off
}
