Unity自定义后处理——用偏导数求图片颜色边缘

  大家好，我是阿赵。
  继续介绍屏幕后处理效果的做法。这次介绍一下用偏导数求图形边缘的技术。

一、原理介绍

先来看例子吧。
  这个例子看起来好像是要给模型描边。之前其实也介绍过很多描边的方法，比如沿着法线方向放大模型，或者用NdotV来求边缘，之类。
  不过这篇文章所说的内容，其实和模型描边是没有关系的。因为这是屏幕后处理，他针对的并不是模型，所以也不会有法线方向，有观察空间的计算。用偏导数，求的是一张图片的颜色变化。
  简单来说，我们要求的是连续像素点之间的颜色变化。
  听起来好像很复杂，不过由于已经提供了现成的方法，所以我们直接用就行了。方法就是ddx和ddy。
  ddx是求横向像素之间的变化的，可以理解成是当前像素点和横向前一个像素点颜色的变化。
  ddy就是纵向像素之间的变化了。

  通过ddx和ddy，我们可以求出一张图片颜色变化比较强烈的一些边缘位置。

  当求出了这些范围之后，我们可以给他填充不同的颜色，也可以指定背景色，发挥想象力之后，就可以做出一些有趣的效果了。

二、代码实现

1、C#代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;public class OutlineCtrl : MonoBehaviour
{private Material outlineMat;public float lineStrength = 1;public Color baseColor = Color.white;public Color lineColor = Color.black;public float powVal = 1;// Start is called before the first frame updatevoid Start(){}// Update is called once per framevoid Update(){}private void OnRenderImage(RenderTexture source, RenderTexture destination){if(outlineMat == null){outlineMat = new Material(Shader.Find("Hidden/azhaoOutline"));}outlineMat.SetFloat("_lineStrength", lineStrength);outlineMat.SetColor("_baseColor", baseColor);outlineMat.SetColor("_lineColor", lineColor);outlineMat.SetFloat("_powVal", powVal);Graphics.Blit(source, destination,outlineMat);}
}

2、Shader

Shader "Hidden/azhaoOutline"
{Properties{_MainTex ("Texture", 2D) = "white" {}_lineStrength("LineStrength",Float) = 1_lineColor("LineColor",Color) = (0,0,0,1)_baseColor("baseColor", Color) = (1,1,1,0)_powVal("powVal",Float) = 1}SubShader{Tags { "RenderType"="Opaque" }LOD 100Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;float2 uv : TEXCOORD0;};struct v2f{float2 uv : TEXCOORD0;float4 vertex : SV_POSITION;};sampler2D _MainTex;float4 _MainTex_ST;float _lineStrength;float4 _lineColor;float3 _baseColor;float _powVal;v2f vert (appdata v){v2f o;o.vertex = UnityObjectToClipPos(v.vertex);o.uv = TRANSFORM_TEX(v.uv, _MainTex);UNITY_TRANSFER_FOG(o,o.vertex);return o;}half4 frag (v2f i) : SV_Target{// sample the texturehalf4 col = tex2D(_MainTex, i.uv);float grayscale = col.r * 0.2126729f + col.g * 0.7151522f + col.b * 0.0721750f;grayscale = pow(grayscale, _powVal);float ddVal = saturate(ddx(grayscale) + ddy(grayscale))*_lineStrength;half3 finalCol =  _baseColor.rgb * (1.0 - ddVal) + _lineColor.rgb * ddVal;return half4(finalCol, 1);}ENDCG}}
}

三、和原图的叠加

  稍微做的一点点扩展，之前描绘出来的是纯背景色和线条色，其实我们也不一定要用纯背景色的，比如把偏导数得到的结果，和原图做叠加，就可以做出类似模型描边的效果。

代码很简单，修改一下shader的片段着色器程序就可以：

half4 frag (v2f i) : SV_Target
{// sample the texturehalf4 col = tex2D(_MainTex, i.uv);float grayscale = col.r * 0.2126729f + col.g * 0.7151522f + col.b * 0.0721750f;grayscale = pow(grayscale, _powVal);float ddVal = saturate(ddx(grayscale) + ddy(grayscale))*_lineStrength;half3 finalCol = col.rgb*(1 - ddVal) + _lineColor.rgb * ddVal;return half4(finalCol, 1);}

  可以看出，描边的效果其实没有使用法线计算那么干净清晰。这是因为偏导数依赖于颜色的变化，越分明的变化，结果是越清晰，然后图片的分辨率如果不够大，得出的效果也会比较的模糊。
  不过由于它并不依赖于其他数据，只要有颜色，就能计算，所以在屏幕后处理上，就刚好可以做出一些特殊的效果了。