后处理原理及过程

后处理是在渲染完后对图像进行处理，unity使用的是 C# 脚本

就是渲染完后不显示，多走一步，经由脚本处理后再显示到屏幕上，以实现诸如各种模糊效果、Bloom、描边等等

后处理一般过程

获取当前屏幕图像，利用C#脚本调用shader对图像进行处理，在将处理后的图像显示到屏幕上

原理

创建了一个同屏幕宽高完全一样的面，将之前的渲染结果作为渲染纹理传入脚本，调用shader对纹理采样渲染回面片

所以在后处理时需要关闭深度写入等，防止渲染纹理覆盖了特殊情况下最后渲染的半透明物体

Unity提供了OnRenderImage() 函数获取屏幕图像

MonoBehaviour.OnRenderImage (RenderTexture src, RenderTexture dest)

1
2
3
4
5
6
/*OnRenderImage中利用Graphics.Blit实现处理*/
public static void Blit(Texture src, Texture dest);

public static void Blit(Texture src, Texture dest, Material mat, int pass = -1);

public static void Blit(Texture src, Material mat, int pass = -1);

Blit函数获取屏幕图像后调用shader，将源图像src作为一张渲染纹理赋值给shader中_MainTex

边缘检测(描边)

梯度的本意是一个向量（矢量），表示某一函数在该点处的方向导数沿着该方向取得最大值，即函数在该点处沿着该方向（此梯度的方向）变化最快，变化率最大（为该梯度的模）

二维空间下的偏微分方程
$$
\frac{∂f(x,y)}{∂x}=\lim_{\epsilon->0}\frac{f(x+\epsilon,y)-f(x,y)}{\epsilon}
$$

$$
\frac{∂f(x,y)}{∂y}=\lim_{\epsilon->0}\frac{f(x,y+\epsilon)-f(x,y)}{\epsilon}
$$

由于像素不是连续的，只要计算当前像素沿偏微分方向的差值，ε=1，所以只需进行简单的加减运算

在xy得到的值经过勾股定理后就得到，二维空间下灰度的变化率

边缘检测算子

edge_detection_kernel

注意：图中后两个算子是错的，xy方向反了！！！

一般不采用 Roberts 这样偶数的算子，因为结果对原像素存在偏移

Prewitt：$Gx = f(x+1) + 0 * f(x)-f(x-1)$，提取系数就是[-1, 0, 1] 

1
2
3
4
所以该算子Gx就是：     同理Gy：
[-1, 0, 1]			[-1, -1, -1]
[-1, 0, 1]			[ 0,  0,  0]
[-1, 0, 1]			[ 1,  1,  1]

Sobel就是prewitt的基础上，加强了对直线上像素的检测

高斯模糊和 Bloom 效果

均值模糊

卷积核的各元素值相同，n*n的核每个的值就是1/n^2

高斯模糊

高斯模糊的卷积核又叫高斯核

高斯模糊的名字来源于高斯分布（正态分布），其概率密度函数所表示的就是均值与样本值之间的关系，所以高斯模糊就是一种权值按距离减少的方法
$$
G(x,y)=\frac{1}{2\pi\sigma^2}e^{-\frac{x^2+y^2}{2\sigma^2}}
$$
$\mu$就是0，因为当前像素的原点距离为0，方差$\sigma$取标准方差1

n*n 的高斯核可以使用两个一维的高斯核替换

而且由于概率密度函数是对称的，所以存储上可以优化

1
2
3
4
5
6
7
8
9
10
11
12
13
/*Shader*/
_MainTex获取屏幕图像
_MainTex_TexelSize获取纹素尺寸
    
/*计算纹理坐标*/
half2 uv[5] : TEXCOORDS0
    //Vertical
    uv[0]=uv;
	uv[1]=uv + float2(0.0, _MainTex_TexelSize * 1.0);//上方一格的坐标
	uv[2]=uv - float2(0.0, _MainTex_TexelSize * 1.0);//下方一格的坐标
	uv[3]=uv + float2(0.0, _MainTex_TexelSize * 2.0);//上方两格的坐标
	uv[4]=uv - float2(0.0, _MainTex_TexelSize * 2.0);//下方两格的坐标
	//horizontal同理

Bloom效果

步骤：提取图像中的亮部（像素的亮度可由rgb通过一定比例的计算获得），对提取的亮部进行高斯模糊，混合原图和Bloom

luminance = 0.2125 * r + 0.7154 * g + 0.0721 * b，可以看出绿色对亮度的贡献最大，红色次之，蓝色最小

运动模糊

方法：累计缓存（混合多张图像），速度缓存（按照像素的运动速度来模糊处理）

脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/*一般格式*/
using UnityEngine;
using System.Collections;

public class MyScript : MonoBehaviour {
    public Shader MyScriptShader;
    private Material MyScriptMaterial = null;
    
    public Material material {
        get {
        	MyScriptMaterial = function(MyScriptShader, MyScriptMaterial);
        	return MyScriptMaterial;
    	}
    }
    
    
    //暴露的属性
    [Range(0, 4)]
    public int temp = 3;
    ...
    
   	//调用shader
    void OnRangeImage(RenderTexture src, RenderTexture dest) {
        if(material != null) {
            material.setFloat("_temp", temp);
            //后处理
            Graphics.Blit(src, dest, material);
        } 
        else {
            //直接返回
            Graphics.Blit(src, dest);
        }
    }
}