CG素材网 - Unity3d资源插件 - UE4资源教程Shader从入门到跑路：屏幕后处理效果前言我们在第二篇文章用网格的uv坐标来设置四边形的颜色，那么屏幕的uv坐标是什么呢？正文你可以将屏幕看成一个大的正方形，别嘘我，底层的图形API也是这么看待屏幕的。 ...

首页»CG资源 › 交流分享区 › 『业内| 消息』 › Shader从入门到跑路：屏幕后处理效果

Shader从入门到跑路：屏幕后处理效果

『业内| 消息』版权：禁止匿名转载；禁止商业使用。

786 0 0 2020-03-18 举报

CG素材

未设置职业关注

前言我们在第二篇文章用网格的uv坐标来设置四边形的颜色，那么屏幕的uv坐标是什么呢？

正文你可以将屏幕看成一个大的正方形，别嘘我，底层的图形API也是这么看待屏幕的。

在第一章中我们提到了shader的计算流程，并且介绍到fragment shader会将计算好的颜色传给颜色缓冲，并结束工作，因为之后的内容就是交由底层图形API来将颜色缓冲内的数据内容以法向量的形式渲染到屏幕上，而这个过程将根据运行平台的不同而选择不同的图形API，所以我没有详细说，想了解只要随便找个图形API比如openGL什么的学一下就好了。

谢谢这位临时演员帮助了我们理解屏幕渲染效果是怎么一回事。图形渲染的底层实现是由unity来决定的，当unity指定了执行平台后，图形API就可以开始喷射图像了，存储在水枪里面的都是以法向量存在的渲染数据，包含颜色、深度信息等，只要图像API做一些中间处理，就可以将其射到屏幕上。但是，在颜色缓冲区的内容真正被喷到屏幕上之前，我们仍然有机会更改其中的内容。而unity也为我们考虑到了这一点，因此它提供了一个叫OnRenderImage的函数，这是个monobehaviour事件。关于这个函数可移步Unity Doc：https://docs.unity3d.com/Manual/ExecutionOrder.htmldocs.unity3d.comPost-processing overviewdocs.unity3d.com1这个函数有一个source渲染纹理作为输入，这个输入包含了颜色缓冲里面所有的数据资讯，包括颜色、深度信息等等。以及一个destination作为输出，在这我们通常认为就是相机屏幕了。

场景准备（随便搭一搭就好了）：

为了展示接下来的效果，我先随便建立了一个游戏界面

接下来写一个简单的C#程序来了解它的用法：

using UnityEngine;
[ExecuteInEditMode]
public class PostEffects : MonoBehaviour
{
public Material material;
private void OnRenderImage(RenderTexture source, RenderTexture destination)
{
Graphics.Blit(source, destination, material);
}}

复制代码首先，ExecuteInEditMode表示我们可以在Edit mode中观察程序的执行。然后定义了一个材质，用来渲染屏幕，然后调用OnRenderImage这个函数，而重点则在于Graphics.Blit这个方法，它的意思大概是用这个material把这个source渲染到那个destination。然后我会用第二节讲到的shader：

Shader "Custom/ShaderLearning"
{
SubShader
{
Tags
{
"Queue" = "Transparent"
}
Pass
{
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv: TEXCOORD0;
};
struct v2f
{
float4 vertex : SV_POSITION;
float2 uv: TEXCOORD1;
};
v2f vert(appdata v)
{
v2f o;
o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
o.uv = v.uv;
return o;
}
float4 frag(v2f i) : SV_Target
{
float4 color = float4(i.uv.r,i.uv.g, 0, 1);
return color;
}
ENDCG
}
}}

复制代码接下来把PostEffects拖给场景内的相机。并新建一个新的material，将上面的shader赋给新材质后，将材质赋值给PostEffects的材质参数

最终的效果如上图所示。我们把整个屏幕的uv坐标作为颜色参数输出了，但这确实不是什么好玩的东西，我们可以在shader中新建一个主纹理来接收在颜色缓冲中存储的纹理（这里就是屏幕），并将其输出到屏幕上吧。值得注意的是，Graphics.Blit方法会把source传入的纹理赋值给mateiral中的主纹理。必须将shader中的主纹理命名为_MainTex才行，不然会报错。加入一个Properties区域，并且声明一个_MainTex的二维属性，以白色为预设颜色：