Unity Shader入门精要学习笔记 - 第10章 高级纹理

Unity Shader入门精要学习笔记 - 第10章 高级纹理

本系列为UnityShader入门精要读书笔记总结，
原作者博客链接：http://blog.youkuaiyun.com/candycat1992/article/
书籍链接：http://product.dangdang.com/23972910.html

第10章 高级纹理

之前的纹理，我们了解到法线纹理、 渐变纹理和遮罩纹理等。这些纹理尽管用处不同， 但它们都属于低维（ 一维或二维） 纹理。 在本章中， 我们将学习一些更复杂的纹理。我们会学习如何使用立方体纹理(Cubemap) 实现环境映射。 然后，我们会一类特殊的纹理—渲染纹理（ Render Texture), 我们会发现渲染纹理是多么的强大。 最后，将介绍程序纹理 ( Procedure Texture ) 。

10.1 立方体纹理

在图形学中，立方体纹理是环境映射的一种实现方法。环境映射可以模拟物体周围的环境，而使用了环境映射的物体可以看起来像镀了层金属一样反射出周围的环境。
和之前见到的纹理不同，立方体纹理一共包含了6张图像，这些图像对应了一个立方体的6个面，立方体纹理的名称也由此而来。立方体的每个面表示沿着世界空间下的轴向观察所得的图像。和之前使用二维纹理坐标不同，对立方体纹理采样我们需要提供一个三维的纹理坐标，这个三维纹理坐标表示了我们在世界空间下的一个3D方向。这个方向矢量从立方体的中心出发，当它向外部延伸时就会和立方体的6个纹理之一相交，而采样得到的结果就是由该焦点计算而来的。下图给出了使用方向矢量对立方体纹理采样的过程。

使用立方体纹理的好处在于，它的实现简单快速，而且得到的效果也比较好。但它有一些缺点，例如当场景中引入了新的物体，光源，或者物体发生移动时，我们就需要重新生成立方体纹理。除此以外，立方体纹理也仅可以反射环境，但不能反射使用了该立方体纹理的物体本身。这是因为，立方体纹理不能模拟多次反射的结果，例如两个金属球互相反射的情况（事实上，Unity5 引入的全局光照系统允许实现这一的自反射效果）。由于这样的原因，想要得到令人信服的渲染结果，我们应该尽量对凸面体而不要对凹面体使用立方体纹理（因为凹面体会反射自身）。

立方体纹理在实时渲染中有很多应用，最常见的是用于天空盒子以及环境映射。
天空盒子是游戏中用于模拟背景的一种方法。天空盒子这个名字包含了两个信息：它是用于模拟天空的，它是一个盒子。当我们在场景中使用了天空盒子时，整个场景就被包围在一个立方体内。这个立方体的每个面使用的技术就是立方体纹理映射技术。
在 Unity 中， 天空盒子是在所有不透明物体之后渲染的， 而其背后使用的网格是一个立方体或一个细分后的球体。

除了天空盒子，立方体纹理最常见的用处是用于环境映射。通过这种方法，我们可以模拟出金属质感的材质。
在Unity5中，创建用于环境映射的立方体纹理的方法有三种：
第一种方法是直接由一些特殊布局的纹理创建；
第二种方法是手动创建一个Cubemap资源，再把6张图赋给它；
第三种方法是由脚本生成。

如果使用第一种方法，我们需要提供一张具有特殊布局的纹理，例如类似立方体展开图的交叉布局、全景布局等。然后，我们只需要把该纹理的Texture Type 设置为Cubemap即可，Uniry 会为我们做好剩下的事情。在基于物理的渲染中，我们通常会使用一张HDR图像来生成高质量的Cubemap。
读者可在官方文档(https://docs.unity3d.com/2018.1/Documentation/Manual/class-Cubemap.html )
中间的数字是对应的版本，可以自行选择切换。

第二种方法是 Unity5之前的版本中使用的方法。我们首先需要在项目资源中创建一个Cubemap，然后把6张纹理拖拽到她的面板中。在Unity5中，官方推荐使用第一种方法创建立方体纹理，这是因为第一种方法可以对纹理数据进行压缩，而且可以支持边缘修正、光滑反射和HDR等功能。

第三种方法，我们希望根据物体在场景中位置的不同，生成它们各自不同的立方体纹理。这时，我们就可以在Unity中使用脚本来创建。这时通过利用Unity提供的Camera.RenderToCubemap函数来实现的。Camera.RenderToCubemap函数可以把从任意位置观察到的场景图像存储到6张图像中，从而创建出该位置上对应的立方体纹理。
在Unity 的脚本手册给出了如何使用Camera.RenderToCubemap函数来创建立方体纹理的代码。其中关键代码如下：
在 Unity 的 脚 本 手 册 (可以直接进行搜索找到)
(https://docs.unity3d.com/2018.1/Documentation/ScriptReference/Camera.RenderToCubemap.html)
中给出了如何使用 Camera.RenderToCubemap 函数来创建立方体纹理的代码。

void OnWizardCreate()
{
    // create temporary camera for rendering
    GameObject go = new GameObject("CubemapCamera");
    go.AddComponent<Camera>();
    // place it on the object
    go.transform.position = renderFromPosition.position;
    go.transform.rotation = Quaternion.identity;
    // render into cubemap
    go.GetComponent<Camera>().RenderToCubemap(cubemap);

    // destroy temporary camera
    DestroyImmediate(go);
}

具体的创建过程可以查看原书籍或者官方文档。

反射

使用了反射效果的物体通常看起来就像镀了层金属。 想要模拟反射效果很简单， 我们只需要
通过入射光线的方向和表面法线方向来计算反射方向， 再利用反射方向对立方体纹理采样即可。
我们新建一个场景，拖拽一个Teapot模型(茶壶)，这些资源请去作者的原附带案例寻找。

Shader "Unlit/Chapter10-MyReflection"
{
    Properties {
        _Color ("Color Tint", Color) = (1, 1, 1, 1)
        //控制反射颜色
        _ReflectColor ("Reflection Color", Color) = (1, 1, 1, 1)
        //控制反射程度
        _ReflectAmount ("Reflect Amount", Range(0, 1)) = 1
        //模拟反射的环境纹理
        _Cubemap ("Reflection Cubemap", Cube) = "_Skybox" {}
    }
    SubShader {
        Tags { "RenderType"="Opaque" "Queue"="Geometry"}

        Pass { 
            Tags { "LightMode"="ForwardBase" }

            CGPROGRAM

            #pragma multi_compile_fwdbase

            #pragma vertex vert
            #pragma fragment frag

            #include "Lighting.cginc"
            #include "AutoLight.cginc"

            fixed4 _Color;
            fixed4 _ReflectColor;
            fixed _ReflectAmount;
            samplerCUBE _Cubemap;

            struct a2v {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
            };

            struct v2f {
                float4 pos : SV_POSITION;
                float3 worldPos : TEXCOORD0;
                fixed3 worldNormal : TEXCOORD1;
                fixed3 worldViewDir : TEXCOORD2;
                fixed3 worldRefl : TEXCOORD3;
                SHADOW_COORDS(4)
            };

            v2f vert(a2v v) {
                v2f o;

                o.pos = UnityObjectToClipPos(v.vertex);

                o.worldNormal = UnityObjectToWorldNormal(v.normal);

                o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;

                o.worldViewDir = UnityWorldSpaceViewDir(o.worldPos);

                //计算了该顶点处的反射方向  
                o.worldRefl = reflect(-o.worldViewDir, o.worldNormal);

                TRANSFER_SHADOW(o);

                return o;
            }

            fixed4 frag(v2f i) : SV_Target {
                fixed3 worldNormal = normalize(i.worldNormal);
                fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));      
                fixed3 worldViewDir = normalize(i.worldViewDir);        

                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;

                fixed3 diffuse = _LightColor0.rgb * _Color.rgb * max(0, dot(worldNormal, worldLightDir));

                //对立方体纹理的采样需要使用texCUBE函数  
                fixed3 reflection = texCUBE(_Cubemap, i.worldRefl).rgb * _ReflectColor.rgb;

                UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);

                //使用_ReflectAmount 来混合漫反射颜色和反射颜色，并和环境光照相加后返回。  
                fixed3 color = ambient + lerp(diffuse, reflection, _ReflectAmount) * atten;

                return fixed4(color, 1.0);
            }

            ENDCG
        }
    }
    FallBack "Reflective/VertexLit"
}

最后我们得到的效果

折射
折射的物理原理比反射复杂一些。定义：当光线从一种介质斜射入另一种介质时，传播方向一般会发生改变。当给定入射角时，我们可以使用斯涅耳定律来计算反射角。当光从介质1沿着河表面法线夹角为θ(1)的方向斜射入介质2时，我们可以使用如下公式计算折射光线与法线的夹角θ(2)：

其中η(1)和η(2) 分别是两个介质的折射率。折射率是一项重要的物理常数，例如真空的折射率是1，而玻璃的折射率一般是1.5.下图给出了这些变量之间的关系。

通常来说，当得到折射方向后我们就会直接使用它来对立方体纹理进行采样，但这是不符合物理规律的。对一个透明物体来说，一种更准确的模拟方法需要计算两次折射——一次是当光线进入它的内部时，而另一次则是从它内部射出时。但是，想要在实时渲染中模拟出第二次折射方向是比较复杂的，而且仅仅一次模拟得到的效果从视觉上看起来“也挺像那么回事的”。正如我们之前提到的——图形学第一准则“如果它看起来是对的，那么它就是对的”。因此，在实时渲染中我们通常仅模拟第一次折射。

Shader "Unlit/Chapter10-MyRefraction"
{
    Properties {
        _Color ("Color Tint", Color) = (1, 1, 1, 1)
        _RefractColor ("Refraction Color", Color) = (1, 1, 1, 1)
        //折射的颜色
        _RefractAmount ("Refraction Amount", Range(0, 1)) = 1
        //折射的程度
        _RefractRatio ("Refraction Ratio", Range(0.1, 1)) = 0.5
        //不同介质的透射比，用来计算折射方向  
        _Cubemap ("Refraction Cubemap", Cube) = "_Skybox" {}
    }
    SubShader {
        Tags { "RenderType"="Opaque" "Queue"="Geometry"}

        Pass { 
            Tags { "LightMode"="ForwardBase" }

            CGPROGRAM

            #pragma multi_compile_fwdbase   

            #pragma vertex vert
            #pragma fragment frag

            #include "Lighting.cginc"
            #include "AutoLight.cginc"

            fixed4 _Color;
            fixed4 _RefractColor;
            float _RefractAmount;
            fixed _RefractRatio;
            samplerCUBE _Cubemap;

            struct a2v {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
            };

            struct v2f {
                float4 pos : SV_POSITION;
                float3 worldPos : TEXCOORD0;
                fixed3 worldNormal : TEXCOORD1;
                fixed3 worldViewDir : TEXCOORD2;
                fixed3 worldRefr : TEXCOORD3;
                SHADOW_COORDS(4)
            };

            v2f vert(a2v v) {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);

                o.worldNormal = UnityObjectToWorldNormal(v.normal);

                o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;

                o.worldViewDir = UnityWorldSpaceViewDir(o.worldPos);

                //在世界空间计算折射方向 
                //第一个参数即为入射光线的方向，必须是归一化的矢量  
                //第二个参数是表面法线，同样需要归一化  
                //第三个参数是入射光线所在介质的折射率和折射光线所在介质的折射率之间的比值  
                o.worldRefr = refract(-normalize(o.worldViewDir), normalize(o.worldNormal), _RefractRatio);

                TRANSFER_SHADOW(o);

                return o;
            }

            fixed4 frag(v2f i) : SV_Target {
                fixed3 worldNormal = normalize(i.worldNormal);
                fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
                fixed3 worldViewDir = normalize(i.worldViewDir);

                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;

                fixed3 diffuse = _LightColor0.rgb * _Color.rgb * max(0, dot(worldNormal, worldLightDir));

                //使用折射方向采样Cubemap在世界空间中
                fixed3 refraction = texCUBE(_Cubemap, i.worldRefr).rgb * _RefractColor.rgb;

                UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);

                //混合漫反射颜色和折射颜色
                fixed3 color = ambient + lerp(diffuse, refraction, _RefractAmount) * atten;

                return fixed4(color, 1.0);
            }

            ENDCG
        }
    } 
    FallBack "Reflective/VertexLit"
}

我们得到的最终效果

菲涅耳反射
在实时渲染中，我们经常会使用菲涅尔反射来根据视角方向控制反射程度。通俗地讲，菲涅尔反射描述了一种光学现象，即当光线照射到物体表面时，一部分发生反射，一部分进入物体内部，发生折射或散射。被反射的光和入射光之间存在一定的比率关系，这个比率关系可以通过菲涅尔等式进行计算。一个经常使用的例子是，当你站在湖边，直接低头看脚边的水面时，你会发现水几乎是透明的，你可以直接看到水底的小鱼和石子；但是，当你抬头看远处的水面时，会发现几乎看不到水下的情况，而只能看到水面反射的环境。这就是所谓的菲涅尔效果。事实上，不仅仅是水、玻璃这样的反光物体具有菲涅尔效果，几乎任何物体都或多或少包含了菲涅尔效果，这是基于物理渲染中非常重要的一项高光反射计算因子。读者可以在 JohnHable 的一篇非常有名的文章 Everything Has Fresnel (http://filmicgames.com/archives/557)中看到现实生活中各种物体的菲涅耳效果。
那么，我们如何计算菲涅尔反射呢？这就需要使用菲涅耳等式。真实世界的菲涅耳等式是非常复杂的，但在实时渲染中，我们通常会使用一些近似公式来计算。其中一个著名的近似公式就是Schlick 菲涅耳近似等式：

其中，F(0)是一个反射系数，用于控制菲涅耳反射的强度，v是视角方向，n是表面法线。另一个应用比较广泛的等式是Empricial菲涅耳近似等式：

其中，bias、scale和power是控制项、
使用上面的菲涅耳近似等式，我们可以在边界处模拟反射光强和折射光强/漫反射光强之间的变化。在许多车漆、水面等材质的渲染中，我们会经常使用菲涅耳反射来模拟更加真实的反射效果。
我们使用Schlick菲涅耳近似等式来模拟菲涅耳反射。

Shader "Unlit/Chapter10-MyFresnel"
{
    Properties {
        _Color ("Color Tint", Color) = (1, 1, 1, 1)
        _FresnelScale ("Fresnel Scale", Range(0, 1)) = 0.5
        //菲尼尔的范围控制
        _Cubemap ("Reflection Cubemap", Cube) = "_Skybox" {}
    }
    SubShader {
        Tags { "RenderType"="Opaque" "Queue"="Geometry"}

        Pass { 
            Tags { "LightMode"="ForwardBase" }

            CGPROGRAM

            #pragma multi_compile_fwdbase

            #pragma vertex vert
            #pragma fragment frag

            #include "Lighting.cginc"
            #include "AutoLight.cginc"

            fixed4 _Color;
            fixed _FresnelScale;
            samplerCUBE _Cubemap;

            struct a2v {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
            };

            struct v2f {
                float4 pos : SV_POSITION;
                float3 worldPos : TEXCOORD0;
                fixed3 worldNormal : TEXCOORD1;
                fixed3 worldViewDir : TEXCOORD2;
                fixed3 worldRefl : TEXCOORD3;
                SHADOW_COORDS(4)
            };

            v2f vert(a2v v) {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);

                o.worldNormal = UnityObjectToWorldNormal(v.normal);

                o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;

                o.worldViewDir = UnityWorldSpaceViewDir(o.worldPos);

                o.worldRefl = reflect(-o.worldViewDir, o.worldNormal);

                TRANSFER_SHADOW(o);

                return o;
            }

            fixed4 frag(v2f i) : SV_Target {
                fixed3 worldNormal = normalize(i.worldNormal);
                fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
                fixed3 worldViewDir = normalize(i.worldViewDir);

                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;

                UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);

                fixed3 reflection = texCUBE(_Cubemap, i.worldRefl).rgb;

                fixed fresnel = _FresnelScale + (1 - _FresnelScale) * pow(1 - dot(worldViewDir, worldNormal), 5);

                fixed3 diffuse = _LightColor0.rgb * _Color.rgb * max(0, dot(worldNormal, worldLightDir));

                fixed3 color = ambient + lerp(diffuse, reflection, saturate(fresnel)) * atten;

                return fixed4(color, 1.0);
            }

            ENDCG
        }
    } 
    FallBack "Reflective/VertexLit"
}

效果如下：

10.2 渲染纹理

在之前的学习中，一个摄像机的渲染结果会输出到颜色缓冲区，并显示到我们的屏幕上。现代的GPU允许我们把整个三维场景渲染到一个中间缓冲区，即渲染目标纹理（RTT），而不是传统的帧缓冲或后备缓冲。与之相关的是多重渲染目标（MRT），这种技术指的是GPU允许我们把场景同时渲染到多个渲染目标纹理中，而不再需要为每个渲染目标纹理单独渲染完整的场景。延迟渲染就是使用多重渲染目标的一个应用。
Unity为渲染目标纹理定义了一种专门的纹理类型——渲染纹理。

在Unity中使用渲染纹理通常有两种方式：
一种方式是在Project 目录下创建一个渲染纹理，然后把某个摄像机的渲染目标设置成该渲染纹理，这样一来该摄像机的渲染结果就会实时更新到渲染纹理中，而不会显示在屏幕上。使用这种方法，我们还可以选择渲染纹理的分辨率、滤波模式等纹理属性。
另一种方式是在屏幕后处理时使用GrabPass命令或OnRederImage函数来获取当前屏幕图像，Unity会把这个屏幕图像放到一张和屏幕分辨率等同的渲染纹理中，然后我们可以在自定义的Pass中把它们当成普通的纹理来处理，从而实现各种屏幕特效。

镜子效果
我们先学习如何使用渲染纹理来模拟镜子效果。
我们先去掉默认的天空盒，并且随便搭建一点场景物体，创建一个Quad当做镜子。创建一个渲染纹理，进行改名MirrorRender，拖拽给一个摄像机。
镜子实现的原理很简单，它使用一个渲染纹理作为输入属性，并把该渲染纹理在水平方向上翻转后直接显示到物体上即可。我们修改之前创建的Shader的代码。

Shader "Unlit/Chapter10-MyMirror"
{
    Properties {
        //对应渲染纹理
        _MainTex ("Main Tex", 2D) = "white" {}
    }
    SubShader {
        Tags { "RenderType"="Opaque" "Queue"="Geometry"}

        Pass {
            CGPROGRAM

            #pragma vertex vert
            #pragma fragment frag

            sampler2D _MainTex;

            struct a2v {
                float4 vertex : POSITION;
                float3 texcoord : TEXCOORD0;
            };

            struct v2f {
                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD0;
            };

            v2f vert(a2v v) {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);

                o.uv = v.texcoord;
                //反转X的坐标分量  镜子里边的图像是左右相反的
                o.uv.x = 1 - o.uv.x;

                return o;
            }

            fixed4 frag(v2f i) : SV_Target {
                return tex2D(_MainTex, i.uv);
            }

            ENDCG
        }
    } 
    FallBack Off
}

我们得到如下图效果。

玻璃效果
在unity中，我们还可以在Unity Shader 中使用一种特殊的Pass 完成获取屏幕图像的目的，这就是GrabPass。当我们再Shader中定义了一个GrabPass后，Unity会把当前屏幕的图像绘制在一张纹理中，以便我们在后续的Pass中访问它。我们通常会使用GrabPass来实现诸如玻璃等透明材质的模拟，与使用简单的透明混合不同，使用GrabPass可以让我们队物体后面的图像进行更复杂的处理，例如使用法线来模拟折射效果，而不再是简单的和原屏幕颜色进行混合。

需要注意的是，在使用GrabPass 的时候，我们需要额外小心物体的渲染队列设置。正如之前所说，GrabPass 通常渲染透明物体，尽管代码里并不包含混合指令，但我们往往仍然需要把物体的渲染队列设置成透明队列（即”Queue”=”Transprent”）。这样才可以保证当渲染该物体时，所有的不透明物体都已经被绘制在屏幕上，从而获得正确的屏幕图像。

我们用GrabPass模拟一个玻璃效果。这种效果实现思路非常简单，我们首先使用一张法线纹理来修改模型的法线信息，然后使用反射方法，通过一个Cubemap来模拟玻璃的反射，而在模拟折射时，则使用了GrabPass获取玻璃后面的屏幕图像，并使用切线空间下的法线会屏幕纹理坐标偏移后，再对屏幕图像进行采样来模拟近似的折射效果。

Shader "Unlit/Chapter10-MyGlassRefraction"
{
    Properties {
        //玻璃的材质纹理
        _MainTex ("Main Tex", 2D) = "white" {}
        //玻璃的法线纹理
        _BumpMap ("Normal Map", 2D) = "bump" {}
        _Cubemap ("Environment Cubemap", Cube) = "_Skybox" {}
        //折射图像扭曲程度
        _Distortion ("Distortion", Range(0, 100)) = 10
        //折射程度 当 RefractAmount 值为 0 时， 该玻璃只包含反射效果， 
        //当_RefractAmount 值为 1 时， 该玻璃只包括折射效果。
        _RefractAmount ("Refract Amount", Range(0.0, 1.0)) = 1.0
    }
    SubShader {
        // We must be transparent, so other objects are drawn before this one.
        Tags { "Queue"="Transparent" "RenderType"="Opaque" }

        // 通过关键词 GrabPass 定义了一个抓取屏幕图像的 Pass。 在这个 Pass 中我们定义
        //了一个字符串， 该字符串内部的名称决定了抓取得到的屏幕图像将会被存入哪个纹理中
        GrabPass { "_RefractionTex" }

        Pass {      
            CGPROGRAM

            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            sampler2D _MainTex;
            float4 _MainTex_ST;
            sampler2D _BumpMap;
            float4 _BumpMap_ST;
            samplerCUBE _Cubemap;
            float _Distortion;
            fixed _RefractAmount;
            sampler2D _RefractionTex;
            float4 _RefractionTex_TexelSize;

            struct a2v {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                float4 tangent : TANGENT; 
                float2 texcoord: TEXCOORD0;
            };

            struct v2f {
                float4 pos : SV_POSITION;
                float4 scrPos : TEXCOORD0;
                float4 uv : TEXCOORD1;
                float4 TtoW0 : TEXCOORD2;  
                float4 TtoW1 : TEXCOORD3;  
                float4 TtoW2 : TEXCOORD4; 
            };

            v2f vert (a2v v) {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                //通过内置的ComputeGrabScreenPos函数来得到对应抓取的屏幕图像的采样坐标  
                o.scrPos = ComputeGrabScreenPos(o.pos);

                o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex);
                o.uv.zw = TRANSFORM_TEX(v.texcoord, _BumpMap);

                float3 worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;  
                fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);  
                fixed3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);  
                fixed3 worldBinormal = cross(worldNormal, worldTangent) * v.tangent.w; 

                //计算该顶点对应的从切线空间到世界空间的变换矩阵，并把该矩阵的每一行分别存储在TtoW0~TtoW2中 
                o.TtoW0 = float4(worldTangent.x, worldBinormal.x, worldNormal.x, worldPos.x);  
                o.TtoW1 = float4(worldTangent.y, worldBinormal.y, worldNormal.y, worldPos.y);  
                o.TtoW2 = float4(worldTangent.z, worldBinormal.z, worldNormal.z, worldPos.z);  

                return o;
            }

            fixed4 frag (v2f i) : SV_Target {       
                float3 worldPos = float3(i.TtoW0.w, i.TtoW1.w, i.TtoW2.w);
                fixed3 worldViewDir = normalize(UnityWorldSpaceViewDir(worldPos));

                //获取切线空间的法线
                fixed3 bump = UnpackNormal(tex2D(_BumpMap, i.uv.zw));   

                //对屏幕图像的采样坐标进行偏移，模拟折射效果  
                float2 offset = bump.xy * _Distortion * _RefractionTex_TexelSize.xy;
                i.scrPos.xy = offset * i.scrPos.z + i.scrPos.xy;
                fixed3 refrCol = tex2D(_RefractionTex, i.scrPos.xy/i.scrPos.w).rgb;

                //把法线方向从切线空间转换到世界空间下  
                bump = normalize(half3(dot(i.TtoW0.xyz, bump), dot(i.TtoW1.xyz, bump), dot(i.TtoW2.xyz, bump)));
                fixed3 reflDir = reflect(-worldViewDir, bump);
                fixed4 texColor = tex2D(_MainTex, i.uv.xy);
                fixed3 reflCol = texCUBE(_Cubemap, reflDir).rgb * texColor.rgb;

                 //得到最终的输出颜色  
                fixed3 finalColor = reflCol * (1 - _RefractAmount) + refrCol * _RefractAmount;

                return fixed4(finalColor, 1);
            }

            ENDCG
        }
    }

    FallBack "Diffuse"
}

我们可以得到最后的效果。

尽管GrabPass和之前使用的渲染纹理+额外的摄像机的方式都可以抓取屏幕图像，但它们还是有一些不同的。GrabPass的好处在于实现简单，我们只需要再Shader中写几行代码就可以实现抓取屏幕的目的。而要使用渲染纹理的话，我们首先需要创建一个渲染纹理和一个额外的摄像机，再把该摄像机的Render Target 设置为新建的渲染纹理对象，最后把该渲染纹理传递给响应的Shader。
但从效率上来说，使用渲染纹理的效率往往要好于GrabPass，尤其在移动设备上。使用渲染纹理我们可以自定义渲染纹理的大小，尽管这种方法需要把部分场景再次渲染一遍，但我么可以通过调整摄像机的渲染层来减少二次渲染时的场景大小，或使用其他方法来控制摄像机是否需要开启。而使用GrabPass获取到的图像分辨率和显示屏幕是一致的，这意味着在一些高分辨率的设备上可能会造成严重的带宽影响。而且在移动设备上，GrabPass虽然不会重新渲染场景，但它往往需要CPU直接读取后备缓冲中的数据，破坏了CPU和GPU之间的并行性，这是比较耗时的，甚至在一些移动设备上这是不支持的。

10.3 程序纹理

程序纹理指的是那些由计算机生成的图像，我们通常使用一些特定的算法来创建个性化图案或非常真实的自然元素，例如木头、石子等、使用程序纹理的好处在于我们可以使用各种参数来控制纹理的外观，而这些属性不仅仅是那些颜色属性，甚至可以完全不同类型的图案属性，这使得我们可以得到更加丰富的动画和视觉效果。
我们先使用一个算法来生成一个波点纹理，如下图所示。我们可以在脚本中调整一些参数，如背景颜色、波点颜色等，以控制最终生成的纹理外观。

创建一个场景，去掉天空盒子
创建一个参数，新建一个Shader，赋给材质
新建一个立方体，上步材质赋给它
创建一个脚本ProceduralTextureGeneration.cs，拖拽到上步中的立方体中。
修改ProceduralTextureGeneration.cs 代码。

[ExecuteInEditMode]  
public class ProceduralTextureGeneration : MonoBehaviour {  
    //为了保存生成的程序纹理，我们声明了一个Texture2D类型的纹理变量  
    public Material material = null;  

    /* 
        注意到，对于每个属性我们使用了get/set的方法， 
        为了在面板上修改属性时仍可以执行set函数，我们使用了 
        一个开源插件 SetProperty。这使得当我们修改了材质属性时， 
        可以执行_UpdateMaterial函数来使用新的属性重新生成程序纹理。 
    */  

    //纹理的大小，数值通常是2的整数幂  
    #region Material properties  
    [SerializeField,SetProperty("textureWidth")]  
    private int m_textureWidth = 512;  
    public int textureWidth{  
        get{return m_textureWidth;}  
        set{  
            m_textureWidth = value;  
            _UpdateMaterial();  
        }  
    }  
    //纹理的背景颜色  
    [SerializeField,SetProperty("backgroundColor")]  
    private Color m_backgroundColor = Color.white;  
    public Color backgroundColor{  
        get{return m_backgroundColor;}  
        set{  
            m_backgroundColor=value;  
            _UpdateMaterial();  
        }  
    }  
    //圆点的颜色  
    [SerializeField,SetProperty("circleColor")]  
    private Color m_circleColor = Color.yellow;  
    public Color circleColor{  
        get{return m_circleColor;}  
        set{  
            m_circleColor=value;  
            _UpdateMaterial();  
        }  
    }  
    //模糊因子，这个参数是用来模糊圆形边界的  
    [SerializeField,SetProperty("blurFactor")]  
    private float m_blurFactor = 2.0f;  
    public float blurFactor{  
        get{return m_blurFactor;}  
        set{  
            m_blurFactor=value;  
            _UpdateMaterial();  
        }  
    }  
    #end region  

    void Start(){  
        if(material == null){  
            Renderer renderer = gameObject.GetComponent<Renderer>();  
            if(renderer == null){  
                Debug.LogWarning("cannot find a renderer");  
                return;  
            }  
            material = renderer.sharedMaterial;  
        }  
        _UpdateMaterial();  
    }  

    void _UpdateMaterial(){  
        if(material != null){  
            m_generatedTexture = _GenerateProceduralTexture();  
            material.SetTexture("_MainTex",m_generatedTexture);  
        }  
    }  

    Texture2D _GenerateProceduralTexture(){  
        Texture2D proceduralTexture = new Texture2D(textureWidth,textureWidth);  
        //定义圆与圆之间的间距  
        float circleInterval = textureWidth / 4.0f;  
        //定义圆的半径  
        float radius = textureWidth / 10.0f;  
        //定义模糊系数  
        float edgeBlur = 1.0f / blurFactor;  

        for(int w = 0; w < textureWidth; w++){  
            for(int h = 0; h < textureWidth; h++){  
                //依次画9个圆  
                for(int i = 0; i < 3; i++){  
                    for(int j = 0; j < 3; j++){  
                        Vector2 circleCenter = new Vector2(circleInterval*(i+1),circleInterval*(j+1));  
                        //计算当前像素与圆心的距离  
                        float dist = Vector2.Distance(new Vector2(w,h),circleCenter) - radius;  
                        //模糊圆的边界  
                        Color color = _MixColor(circleColor,new Color(pixel.r,pixel.g,pixel.b,0.0f),  
                            Mathf.SmoothStep(0f,1.0f,dist*edgeBlur));  
                        //与之前得到的颜色进行混合  
                        pixel = _MixColor(pixel,color,color.a);  
                    }  
                }  
                proceduralTexture.SetPixel(w,h,pixel);  
            }  
        }  
        proceduralTexture.Apply();  
        return proceduralTexture;  
    }  
}  

我们调整脚本面板中的材质参数来得到不同的程序纹理，如下图所示

在Unity中，有一类专门使用程序纹理的材质，叫做程序材质。这类材质和我们之前使用的那些材质本质上是一样的，不同的是，它们使用的纹理不是普通的纹理，而是程序纹理。需要注意的是，程序材质和它使用的程序纹理并不是在Unity中创建的，而是使用了一个名为Substance Designer的软件在Unity外部生成的。
Substance Designer是一个非常出色的纹理生成工具，很多3A的游戏项目都使用了由它生成的材质。我们可以从Unity的资源商店或网络中获取到很多免费或付费的Substance材质。这些材质都是以sbsar 为后缀的，如下图所示，我们可以直接把这些材质像其他资源一样拖入到Unity项目中。

当把这些文件导入Unity后，Unity就会生成一个程序纹理资源。程序纹理资源可以包含一个或多个程序材质，例如下图就包含了两个程序纹理——Cereals和Cereals_1，每个程序纹理使用了不同的纹理参数，因此Unity为它们生成了不同的程序纹理，例如Cereals_Diffuse和Cereals_Diffuse等。

通过单击程序材质，我们可以在程序纹理的面板上看到该材质使用的Unity Shader 及其属性、生成程序纹理使用的纹理属性、材质预览等信息。
程序材质的使用和普通材质是一样的，我们把它们拖拽到相应的模型上即可。程序纹理的强大之处很大原因在于它的多变性，我们可以通过调整程序纹理的属性来控制纹理的外观，甚至可以生成看似完全不同的纹理。下图给出了调整Cereals 程序材质的不同纹理属性得到的不同材质效果。

可以看出，程序材质的自由度很高，而且可以和Shader配合得到非常出色的视觉效果，它是一种非常强大的材质类型。