《Unity Shader》11.3.2 广告牌技术

下面，我们将在Unity中实现上面提到的广告牌技术。在学习完本节后，我们可以得到类似图11.6中的效果。

（1）新建一个场景。在本书资源中，该场景名为Scene_11_3_2。在Unity 5.2中，默认情况下场景将包含一个摄像机和一个平行光，并且使用了内置的天空盒子。在Window → Lighting →Skybox中去掉场景中的天空盒子。

(2）新建一个材质。在本书资源中，该材质名为BillboardMat。

(3）新建一个Unity Shader。在本书资源中，该Shader名为Chapter11-Billboard。把新的Shader赋给第2步中创建的材质。

(4）在场景中创建多个四边形（Quad），调整它们的位置和大小，然后把第2步中的材质拖曳给它们。这些四边形就是用于广告牌技术的广告牌。

打开新建的Chapter11-Billboard，删除原有的代码，添加如下关键代码。

（1）我们首先声明了几个新的变量：

（2）在本例中，我们需要为透明效果设置合适的SubShader标签：

（3）接着，我们设置了Pass的渲染状态：

（4）顶点着色器是我们的核心，所有的计算都是在模型空间下进行的。我们首先选择模型空间的原点作为广告牌的锚点，并利用内置变量获取模型空间下的视角位置：

然后，我们开始计算3个正交矢量。首先，我们根据观察位置和锚点计算目标法线方向，并根据_VerticalBillboarding属性来控制垂直方向上的约束度。

_VerticalBillboarding为1时，意味着法线方向固定为视角方向；当_VerticalBillboarding为0时，意味着向上方向固定为(0, 1, 0)。最后，我们需要对计算得到的法线方向进行归一化操作来得到单位矢量。

接着，我们得到了粗略的向上方向。为了防止法线方向和向上方向平行（如果平行，那么叉积得到的结果将是错误的），我们对法线方向的y分量进行判断，以得到合适的向上方向。然后，根据法线方向和粗略的向上方向得到向右方向，并对结果进行归一化。但由于此时向上的方向还是不准确的，我们又根据准确的法线方向和向右方向得到最后的向上方向：

这样，我们得到了所需的3个正交基矢量。我们根据原始的位置相对于锚点的偏移量以及3个正交基矢量，以计算得到新的顶点位置：

最后，把模型空间的顶点位置变换到裁剪空间中：

（5）片元着色器的代码非常简单，我们只需要对纹理进行采样，再与颜色值相乘即可：

（6）最后，我们把Fallback设置为内置的Transparent/VertexLit（也可以选择关闭Fallback）：

保存后返回场景，把本书资源中的Assets/Textures/Chapter11/star.png拖曳到材质的Main Tex中，即可得到类似图11.6中的效果。

https://github.com/candycat1992/Unity_Shaders_Book/blob/master/Assets/Shaders/Chapter11/Chapter11-Billboard.shader

Shader "Custom/Chapter11-Billboard"
{
    Properties {
        _MainTex ("Main Tex", 2D) = "white" {}
        _Color ("Color Tint", Color) = (1, 1, 1, 1)
        _VerticalBillboarding ("Vertical Restraints", Range(0, 1)) = 1  //_VerticalBillboarding则用于调整是固定法线还是固定指向上的方向，即约束垂直方向的程度。
    }

    SubShader {
        //  Need  to  disable  batching  because  of  the  vertex  animation
        Tags  {"Queue"="Transparent"  "IgnoreProjector"="True"  "RenderType"="Transparent" "DisableBatching"="True"}
        Pass {
            Tags { "LightMode"="ForwardBase" }
            ZWrite Off
            Blend SrcAlpha OneMinusSrcAlpha
            Cull Off

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "Lighting.cginc"

            sampler2D _MainTex;
            float4 _MainTex_ST;
            fixed4 _Color;
            fixed _VerticalBillboarding;

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

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

            v2f vert (a2v v) {
                v2f o;
                // Suppose the center in object space is fixed
                float3 center = float3(0, 0, 0);
                float3 viewer = mul(_World2Object,float4(_WorldSpaceCameraPos, 1));

                float3 normalDir = viewer - center;
                // If _VerticalBillboarding equals 1, we use the desired view dir as the normal dir,Which means the normal dir is fixed
                // Or if _VerticalBillboarding equals 0, the y of normal is 0, Which means the up dir is fixed
                normalDir.y =normalDir.y * _VerticalBillboarding;
                normalDir = normalize(normalDir);
                float3 upDir = abs(normalDir.y) > 0.999 ? float3(0, 0, 1) : float3(0, 1, 0); // If normal dir is already towards up, then the up dir is towards front
                float3 rightDir = normalize(cross(upDir, normalDir));
                upDir = normalize(cross(normalDir, rightDir));

                // Use the three vectors to rotate the quad
                float3 centerOffs = v.vertex.xyz - center;
                float3 localPos = center + rightDir * centerOffs.x + upDir * centerOffs.y + normalDir * centerOffs.z;

                o.pos = mul(UNITY_MATRIX_MVP, float4(localPos, 1));
                o.uv = TRANSFORM_TEX(v.texcoord,_MainTex);

                return o;
            }
            fixed4 frag (v2f i) : SV_Target {
                fixed4 c = tex2D (_MainTex, i.uv);
                c.rgb *= _Color.rgb;
                return c;
            }
            ENDCG


        }
    }
    FallBack "Transparent/VertexLit"
}

https://github.com/candycat1992/Unity_Shaders_Book/blob/master/Assets/Textures/Chapter11/star.png

有变化的，图片可能看不太出来。