【Reading Notes】CP2-Surface Shaders and Texture Mapping

Introduce

在这一章节，我们将探索Surface Sshader.将会从非常简单的材质开始，最后完成一个全息投影？和地形纹理融合（Blending）。还可以使用纹理动画，混合，以及其他任何我们想要的属性。本章知识点：
+ Diffuse shading 漫反射
+ Using packed arrays 使用数组
+ Adding texture to a shader 为shader添加纹理
+ Scrolling textures by modify uv values 纹理动画
+ Normal mapping 法相贴图
+ Creating a transparent material 创建透明材质
+ Creating a Holographic shader 创建全息的shader?
+ Packing and blending 纹理包装和混合
+ Creating a circle around you terrain

总的来说，在Surface Shader中有两步至关重要。第一，你必须指定材质的Physical(这个怎么翻译才好？)属性，例如：diffuse color(漫反射颜色)、smoothness(光滑系数)、transparency(通明度)。这些属性在unity的Surface function中被初始化，并被保存到surface output结构体中。第二步，这个surface out 将传递到lighting model中进行光照计算。这个特殊的函数将取得场景中的光照信息，结合surface output这些参数计算最后的片元的颜色。光照函数决定了当光照射到物体上的表现。下面是个流程图：

## Diffuse shading
在开始使用纹理映射之前，明白漫反射材质如何工作是很重要的。统一的颜色，光滑的表面但不足以反射光线（形成高光）。这样的材质最能表示Diffuse Shader了。在真实世界中纯漫反射的材质是不存在的；漫反射Shader在游戏中有着非常高的性能但同时伴随这比较差的美术表现。

一个漫反射Shader:

Shader "cookbook/PureDiffuse" {
    Properties {
        _Color ("Color", Color) = (1,1,1,1)
    }
    SubShader {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        // Physically based Standard lighting model, and enable shadows on all light types
        #pragma surface surf Lambert fullforwardshadows

        // Use shader model 3.0 target, to get nicer looking lighting
        #pragma target 3.0

        //sampler2D _MainTex;

        struct Input {
            float2 uv_MainTex;
        };
        fixed4 _Color;

        void surf (Input IN, inout SurfaceOutput o) {
            fixed4 c = _Color;
            o.Albedo = c.rgb;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

### Unity5 中的surfaceOutput sturct

SurfaceOutput
{
    fixed3 Albedo; //diffuse color 
    fixed3 Normal; //法线
    fixed3 Emiision; //自发光颜色
    fixed Alpha; //透明度
    half Specular; //高光强度
    fixed Gloss; //光泽度
}

SurfaceOuutputStandard
{
    fixed3 Albedo; //基本颜色（diffuse or specular）
    fixed3 Normal; //法线
    half3 Emission; //自发光颜色
    fixed Alpha; //透明度
    half Occlusion; //吸收？？默认值是1
    half Smoothness; //光滑度，（0 = rough, 1 = smooth）
    half Metallic; //金属质感（0 = non-metal, 1 = metal）
}

SurfaceOutputStandardSpecular
{
    fixed3 Albedo; //基本颜色(diffuse color)
    fixed3 Normal; //法线
    half3 Emission;
    fixed Alpha;
    half Occlusion;
    half Smoothness;
    fixed3 Specular;// 高光颜色，和SurfaceOutput有着很大的不同，可以指定高光的颜色
}

是否可以正确的使用Surface Shader是一个关于能不能正确的初始化Surface output结构的问题。

Using Packed arrays

不是很负责的说，shader中的代码在屏幕上的每一个像素都至少执行一次。这是为什么GPU对于并行运算做了很大的优化。在CG的标准函数变量的设计也遵循这样的哲学（高并行）。明白这一点对于如何写出高性能的shader和优化shader至关重要。
在cg中有两类变量：sigle values & packed arrays(数组).可以简单的从类型的结尾判断，float3, int4，这样的packed array类型的总是以一个数字结尾。这样的类型有点像一个结构，包含了对应数目的sigle values 在cg中称作packed arrays，但又不是传统意义上的数组。。。它可以像一个普通的结构体一样通过域来访问他的成员，例如x、y、z、w；或者r、g、b、a。尽管对于x和r没有本质上的区别，但对于阅读上却意义巨大。对于shader的代码，总是在计算颜色和位置。略一段示例…..

### 说说矩阵 packed matrices

一个4x4的矩阵类型 float4x4 mat;

你可以这样访问矩阵的某一行某一列：float f = mat._m23

还可以这样：float4 vec = mat._m00_m11_22_33;

还有这样：float4 vec1 = mat[0] 等价于 mat._m00_m01_m02_m03

## 为Shader 添加材质

纹理可以让我们的shader很容易就达到比较真实的效果。为了更好和更有效率的使用纹理，我们需要理解2d的纹理是如何映射到3D模型上的，这个过程称作纹理映射（texture mapping）。都知道3D模型是由三角形构成，每一个顶点保存了可供Shader访问的数据。其中一个最重要的信息是UV Data(纹理坐标)。她由两个坐标组成分别是u & v 值的范围由0到1。她们表示2D图片中被映射到顶点的像素的xy坐标。uv坐标仅仅映射了顶点的颜色，但顶点内的颜色也需要进行映射计算，GPU通过最近的几个UV坐标的进行插值，然后根据插值后的uv从2D图片中读取对应的像素。来看看示例图：

UV Data 由3D模型编辑生成，一些模型丢失了UV Data 将不支持纹理映射。

Shader中进行纹理采样(tex2D函数)：fixed3 c = tex2D(_MainTex, IN.uv_MainTex)

## 纹理动画

fixed xScrollValue = _ScrollXSpeed * _Time;
fixed yScrollValue = _ScrollYSpeed * _Time;

// Apply the final UV offset
scrolledUV += fixed2(xScrollValue, yScrollValue);

// Apply textures and tint
half4 c = tex2D (_MainTex, scrolledUV);
o.Albedo = c.rgb * _MainTint;
o.Alpha = c.a;

书中的例子简单的通多_Time去改变纹理坐标的偏移。这里自己写了个结合C#脚本，也是个十分简单的纹理动画，几个注意的地方在代码注释中说明。

//UVAni.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using UnityEngine;

namespace _5xCookbook
{
    public class UVAni: MonoBehaviour
    {
        private Material m_mat;
        public int m_speed = 10;
        public int m_width = 1;
        public int m_height = 1;

        private float m_scaleX = 1;
        private float m_scaleY = 1;
        private float m_offsetX = 0;
        private float m_offsetY = 0;

        private float m_curOffsetX = 0;
        private float m_curOffsetY = 0;
        private int m_offsetStep = 0;
        void Start()
        {
            m_mat = GetComponent().material;
            m_speed = 10;
            ReCaculate();
        }

        public void ReCaculate()
        {
            m_offsetX = m_scaleX = 1.0f / m_width;
            m_offsetY = m_scaleY = 1.0f / m_height;
            m_offsetStep = 0;
            m_mat.SetTextureScale("_MainTex", new Vector2(m_scaleX, m_scaleY)); //设置纹理采样的范围，可以理解为缩放
            InvokeRepeating("SetTextureOffset", 0, 1.0f / m_speed);
        }

        private void SetTextureOffset()
        {
            int xStep = m_offsetStep % m_width;
            int yStep = m_height - 1 - m_offsetStep / m_width;
            m_curOffsetX = xStep * m_offsetX;
            m_curOffsetY = yStep * m_offsetY;
            string log = string.Format("ox: {0} oy: {1}", xStep, yStep);
            m_offsetStep++;
            m_offsetStep = m_offsetStep % (m_width * m_height);
            m_mat.SetTextureOffset("_MainTex", new Vector2(m_curOffsetX, m_curOffsetY));//采样纹理坐标偏移

            Debug.Log(log);
        }
    }
}

Shader:

Shader "CookbookShaders/Chapter02/UVAni"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

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

            sampler2D _MainTex;
            float4 _MainTex_ST;

            v2f vert (appdata_base v)
            {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                o.uv = TRANSFORM_TEX(v.texcoord, _MainTex); //可以在UnityCG.cginc中找到它的定义，Uniyt会把Inspectore中till和offset四个值保存在
                                                            //一个float4类型的变量中再Shader使用。这个函数算出最终的纹理坐标
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv);
                return col;
            }
            ENDCG
        }
    }
}

法线映射

3D模型的每个三角面都有一个朝向，也就是这个三角面的法向量（向外的）。面的朝向对光照如何反射有这很大的影响。不同朝向的面，将朝不同方向反射光线，因此他们着色将显得不要一样。对于实际上非棱角分明的模型，这就显得很不自然。

为了规避这个问题，光照的反射将不去关注这个面的朝向，而是根据顶点的法向量（Normal Direction）。一种方式是为Shader添加一个法相贴图。法向量是除了纹理坐标之外最重要的数据，这是一个表示顶点方向的单位向量。一个顶点可能被多个三角面共享，所想顶点法向量是一个线性插值的结果。这样我们可以使低分辨率的模型看起来像高分辨率一样。

实现法相贴图

完整的Normal Mapping(法线映射)过程已经超出本章讨论范围，不过Unity为我们封装了一个函数：在UnityCG.cginc中定义了UnpackNormal()。这个函数将从法相贴图中解析并经过处理返回正确的顶点法向量，把纹理贴图内0-1范围的值转化到法向量的-1-1范围内。还可以通过缩放法向量的x，y来控制法相贴图的强度。

Shader "cookbook/Normal" {
    Properties {
        _Color ("Color", Color) = (1,1,1,1)
        _NormalTex ("Normal Map", 2D) = "bump" {}
        _NormalItensity("Normal Itensity", Range(0,2)) = 1
    }
    SubShader {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        // Physically based Standard lighting model, and enable shadows on all light types
        #pragma surface surf Lambert

        // Use shader model 3.0 target, to get nicer looking lighting
        #pragma target 3.0

        sampler2D _NormalTex;

        struct Input {
            float2 uv_NormalTex;
        };

        fixed4 _Color;
        float _NormalItensity;

        void surf (Input IN, inout SurfaceOutput o) {
            float3 normalMap = UnpackNormal(tex2D (_NormalTex, IN.uv_NormalTex));
            normalMap.x *= _NormalItensity;
            normalMap.y *= _NormalItensity;
            normalMap = normalize(normalMap);
            // Albedo comes from a texture tinted by color
            fixed4 c = _Color;
            o.Albedo = c.rgb;
            o.Alpha = c.a;
            o.Normal = normalMap.rgb;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

创建透明材质

透明材质有几个关键的地方，总而言之，Surf shader中的Tags标签添加了一些描述Object如何进行渲染的信息。我们真正感兴趣的是Queue。Unity默认根据Object距离摄像机的距离进行排序，所以Object离摄像机越近就越晚被渲染。很多时候这很好，不过有时我们想要更多的控制场景中物体的渲染顺序。Unity提供了一些默认的值去确定物体的渲染队列，而不仅仅根据Object距离摄像机的距离。内置的值和说明如下：

对于Render queue value而言，越大就越晚被渲染。所以在渲染透明物体的时候，可以他Tags中的Queue设置为Transparent.

Shader "cookbook/Transparent" {
    Properties {
        _Color ("Color", Color) = (1,1,1,1)
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
    }
    SubShader {
        Tags
        { 
            "RenderType" = "Transparent" 
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
        }
        LOD 200
        Cull Back

        CGPROGRAM

        #pragma surface surf Standard alpha:fade //alpha 混合

        sampler2D _MainTex;

        struct Input {
            float2 uv_MainTex;
        };

        fixed4 _Color;

        void surf (Input IN, inout SurfaceOutputStandard o) {
            // Albedo comes from a texture tinted by color
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
            o.Albedo = c.rgb;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

创建全息效果(?Holographic)的Shader

Shader "cookbook/Silhouette" {
    Properties {
        _Color ("Color", Color) = (1,1,1,1)
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _DotProduct("Rim effect", Range(-1, 1)) = 0.25
    }
    SubShader {
        Tags
        { 
            "RenderType" = "Transparent" 
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
        }
        LOD 200
        Cull Back

        CGPROGRAM

        #pragma surface surf Lambert alpha:fade nolighting //alpha 混合

        sampler2D _MainTex;
        float _DotProduct;
        fixed4 _Color;

        struct Input {
            float2 uv_MainTex;
            float3 worldNormal;
            float3 viewDir;
        };



        void surf (Input IN, inout SurfaceOutput o) {
            // Albedo comes from a texture tinted by color
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
            o.Albedo = c.rgb;

            float border = 1 - (abs(dot(IN.viewDir, IN.worldNormal)));
            float alpha = (border * (1 - _DotProduct) + _DotProduct);
            o.Alpha = c.a * alpha;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

上面是Shader的最终代码，主要思想是计算定点法线与视线之间的夹角的点积，通过点积值计算一个Alpha的变化，越近Object中心法线与视线重合的时候Alpha=0边缘Alpha=1.

合并纹理&纹理混合（Packing and blending textures）

纹理不仅仅可以保存RGBA数据，随着我们的想法保存其他信息，如深度，前面的法线。还可以将纹理的RGBA通道分离成单独的R,G,B,A4个灰度图，在Shader中将这些通道组装起来，在有些时候可以起到减少总纹理大小的效果。

书中举了个地形纹理的例子，通过纹理混合得到最后的结果：关键点在于_BlendTex的使用，_BlendTex保存了RGBA各个通道的权重，组合成一个新的RGBA图片。权重的插值，通过cg的内置函数lerp(a, b, f)处理，如果需要对地形进行纹理混合的时候，通过一个权重的灰度图混合岩石，草地两份纹理就可以得到比较好的地形纹理效果，而且通过改变灰度图可以产生不同的效果，从而达到save size的效果。

Shader "CookbookShaders/Chapter02/TextureBlending" 
{
    Properties 
    {
        _MainTint ("Diffuse Tint", Color) = (1,1,1,1)

        //Add the properties below so we can input all of our textures
        _ColorA ("Terrain Color A", Color) = (1,1,1,1)
        _ColorB ("Terrain Color B", Color) = (1,1,1,1)
        _RTexture ("Red Channel Texture", 2D) = ""{}
        _GTexture ("Green Channel Texture", 2D) = ""{}
        _BTexture ("Blue Channel Texture", 2D) = ""{}
        _ATexture ("Alpha Channel Texture", 2D) = ""{}
        _BlendTex ("Blend Texture", 2D) = ""{}
    }

    SubShader 
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        #pragma surface surf Lambert

        float4 _MainTint;
        float4 _ColorA;
        float4 _ColorB;
        sampler2D _RTexture;
        sampler2D _GTexture;
        sampler2D _BTexture;
        sampler2D _BlendTex;
        sampler2D _ATexture;

        struct Input 
        {
            float2 uv_RTexture;
            //float2 uv_GTexture;
            //float2 uv_BTexture;
            //float2 uv_ATexture;
            float2 uv_BlendTex;
        };

        void surf (Input IN, inout SurfaceOutput o) 
        {
            //Get the pixel data from the blend texture
            //we need a float 4 here because the texture 
            //will return R,G,B,and A or X,Y,Z, and W
            float4 blendData = tex2D(_BlendTex, IN.uv_BlendTex);

            //Get the data from the textures we want to blend
            float4 rTexData = tex2D(_RTexture, IN.uv_RTexture);
            float4 gTexData = tex2D(_GTexture, IN.uv_RTexture);
            float4 bTexData = tex2D(_BTexture, IN.uv_RTexture);
            float4 aTexData = tex2D(_ATexture, IN.uv_RTexture);

            //No we need to contruct a new RGBA value and add all 
            //the different blended texture back together
            float4 finalColor;
            finalColor = lerp(rTexData, gTexData, blendData.g);
            finalColor = lerp(finalColor, bTexData, blendData.b);
            finalColor = lerp(finalColor, aTexData, blendData.a);
            finalColor.a = 1.0;

            //Add on our terrain tinting colors
            float4 terrainLayers = lerp(_ColorA, _ColorB, blendData.r);
            finalColor *= terrainLayers;
            finalColor = saturate(finalColor);

            o.Albedo = finalColor.rgb * _MainTint.rgb;
            o.Alpha = finalColor.a;
        }
        ENDCG
    } 
    FallBack "Diffuse"
}

画个圈圈

略