【《Unity着色器和屏幕特效开发秘笈》】学习整理：关于屏幕特效【2】

雨点打透心脏的1/2处 2024-02-18 19:23 15阅读 0赞

### 一个简单的屏幕效果 ###

在[屏幕特效通用脚本][Link 1]的基础上，制作一个简单的灰度效果。  
首先是使用的挂在摄像机上面的脚本：

[ExecuteInEditMode]
    public class MyTestRenderImage : MonoBehaviour
    {
        public Shader curShader = null;
    
        [Range(0f, 1f)]//添加此特性后可在Inspector面板中使用滑动条控制grayScaleAmount
        //控制灰度值
        public float grayScaleAmount = 1.0f;
    
        private Material curMaterial = null;
        private Material CurMaterial
        {
            get
            {
                if(curMaterial == null)
                {
                    curMaterial = new Material(curShader);
                    curMaterial.hideFlags = HideFlags.HideAndDontSave;
                }
                return curMaterial;
            }
        }
    
        private void Start()
        {
            if(!SystemInfo.supportsImageEffects)
            {
                enabled = false;
                return;
            }
            if(!curShader && !curShader.isSupported)
            {
                enabled = false;
            }
        }
    
        private void OnRenderImage(RenderTexture source, RenderTexture destination)
        {
            if(curShader)
            {
                //使用grayScaleAmount控制着色器中对应的属性数值
                CurMaterial.SetFloat("_LuminosityAmount", grayScaleAmount);
                Graphics.Blit(source, destination, CurMaterial);
            }
            else
            {
                Graphics.Blit(source, destination);
            }
        }
    
        private void Update()
        {        
            //检查并将grayScaleAmount的值限定在0到1之间
            grayScaleAmount = Mathf.Clamp01(grayScaleAmount);
        }
    
        private void OnDisable()
        {
            if(curMaterial)
            {
                DestroyImmediate(curMaterial);
            }
        }
    }

通过和之前基本结构的对比，可以看出此脚本只是多了对于grayScaleAmount这一灰度数值相关的代码。  
通过`CurMaterial.SetFloat("_LuminosityAmount", grayScaleAmount);`可以实现外部对于着色器的控制，从而直接看到屏幕效果的变化。  
当然如果为了简便也可以通过继承的方式，将基本结构作为父类，改写其中相应的函数来简化代码，此处为了进行对比，所以还是直接将其直接写了出来。

下面是用到的shader代码：

Shader "RenderImage/MyTestRenderImage" 
    {
        Properties 
        {
            _MainTex("Base Tex", 2D) = "white"{}
            _LuminosityAmount("GrayScale Amount", Range(0.0, 1)) = 1.0
        }
    
        SubShader 
        {
            Pass
            {
                CGPROGRAM
    
                #pragma vertex vert
                #pragma fragment frag
    
                #include "UnityCG.cginc"
    
                sampler2D _MainTex;
                fixed _LuminosityAmount;
    
                struct v2f
                {
                    float4 pos : SV_POSITION;
                    half2 uv : TEXCOORD0;
                };
    
                v2f vert(appdata_img v)
                {
                    v2f o;
                    o.pos = UnityObjectToClipPos(v.vertex);
                    o.uv = v.texcoord;
                    return o;
                }
    
                fixed4 frag(v2f i) : SV_Target
                {
                    fixed4 renderTex = tex2D(_MainTex, i.uv);
    
                    float luminosity = 0.299 * renderTex.r + 0.587 * renderTex.g + 0.114 * renderTex.b;
                    fixed4 finalColor = lerp(renderTex, luminosity, _LuminosityAmount);
    
                    return finalColor;
                }
    
                ENDCG
            }
        }
    
    }   //end shader

在此Shader中，使用了Unity内置的appdata\_img结构体作为顶点着色器的输入。  
此结构体位于`UnityCG.cginc`中，只包含图像处理时必须的定点坐标和纹理坐标等变量。

struct appdata_img
    {
        float4 vertex : POSITION;
        half2 texcoord : TEXCOORD0;
        UNITY_VERTEX_INPUT_INSTANCE_ID
    };

在`vert`顶点着色器中，仅进行了必要的顶点变换和uv坐标的赋值。  
在`frag`片元着色器中，通过`lerp`差值返回最终的屏幕颜色。  
其中需要注意的是以下代码：

float luminosity = 0.299 * renderTex.r + 0.587 * renderTex.g + 0.114 * renderTex.b;

此代码中的`(0.299, 0.587, 0.114)`并不是随意写上去的，经过查询资料显示，这个是一个经典的色彩心理学公式。

Gray = R*0.299 + G*0.587 + B*0.114

目的是将彩色转化为灰度，是国际公认的一个公式。其中Gray是最终的灰度值，R代表红色通道、G代表绿色通道、B代表蓝色通道。  
知道了这个公式，片元着色器中的代码意义也就可以很轻松的理解了。

//根据uv获取相应像素的颜色值
    fixed4 renderTex = tex2D(_MainTex, i.uv);
    //按照公式，将颜色值转化为对应的灰度值    
    float luminosity = 0.299 * renderTex.r + 0.587 * renderTex.g + 0.114 * renderTex.b;
    //通过差值，返回经过_LuminosityAmount控制的最终颜色
    fixed4 finalColor = lerp(renderTex, luminosity, _LuminosityAmount);

以下是此Shader的效果

#### grayScaleAmount = 0 ####

![这里写图片描述][70]

#### grayScaleAmount = 0.25 ####

![这里写图片描述][70 1]

#### grayScaleAmount = 0.5 ####

![这里写图片描述][70 2]

#### grayScaleAmount = 0.75 ####

![这里写图片描述][70 3]

#### grayScaleAmount = 1.0 ####

![这里写图片描述][70 4]

当`grayScaleAmount = 0`时，最终展示的是正常的彩色效果图像。  
当`grayScaleAmount = 1`时，最终展示的是完全的灰度效果图像。

**由于此Shader是书中学习使用的，所以其中仅有达到效果所需的必要代码，但是实际项目过程中需要对Shader进行优化后才能使用。**

[Link 1]: https://blog.csdn.net/everness010/article/details/79833626
[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7b675790c59946e4b43e2b791b515911.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b2f223fde1ab464695538fc23843597c.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a05ddfa7943146e5ad4f719290dfff18.png
[70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d9da824d67dc445fa19c56333a28e85a.png
[70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/57162e2409374ad9aacb838c810d5fc5.png