0x00 前言

在游戲中展現一個寫實的田園場景時，草地的渲染是必不可少的，而一提到高效率的渲染草地，很多人都會想起GPU Gems第七章
《Chapter 7. Rendering Countless Blades of Waving Grass》中所提到的方案。
現在國內很多號稱“次世代”的手游甚至是一些端游仍或多或少的采用了這種方案。但是本文不會為這個方案著墨過多，相反，接下來的大部分內容是關于如何利用Geometry Shader在GPU生成新的獨立草體的。

0x01 一個簡單的星型

傳統的方式，即將模型數據從CPU傳遞給GPU，GPU再根據這些數據進行渲染的方式在渲染大規模的草體時，往往會忽略單個草體的模型細節。因為單個草體的建模如果過于細致，則渲染大片的草地就需要傳遞很多多邊形，從而造成性能的下降。
因此，一個渲染大片草地的方案往往需要滿足以下條件：

• 單個草的多邊形不能過多，最好一棵草只用一個quad來表示
• 從不同的角度觀察，草都必須顯得密集
• 草的排布不能過于規則，否則會不自然

綜上，渲染草體時的經典結構——星形就出現了。

fig07-04.jpg

這樣，簡單的星形結構既滿足了單棵草的面數很低同時也兼顧了從不同角度觀察也能夠顯得密集。 而讓草隨風而動也很簡單，只需要根據頂點的uv信息找出上面的幾個頂點，按照自己規則讓頂點移動就可以了。

if (o.uv.y > 0.5)
{
    float4 translationPos =
        float4(sin(_Time.x * _TimeFactor * Pi ), 0, sin(_Time.y * _TimeFactor * Pi ), 0);
    v.vertex += translationPos * _StrengthFactor;
}

現在很多游戲在渲染草地時仍然使用了這種結構。

（圖片來自：九州天空城3D）

1無標題.png

（圖片來自：劍網3）
但是，各位也都看到了，這種方式雖然簡單，但是卻并不自然，從上方俯視的時候各個面片也能看到清清楚楚，因此這種方式并不是我想要的。

0x02 更真實的草葉

我想要的效果是能夠大規模實時渲染，并且每一顆草的葉片都能夠隨風搖曳的更真實自然的效果。在這方面，業內早有一些探索，例如Siggraph2006上的《Rendering Grass Terrains in
Real-Time with Dynamic Lighting》，以及Edward Lee的論文《REALISTIC REAL-TIME GRASS RENDERING》。
本文主要按照Edward Lee的論文方式在Unity中實現GPU生成無盡草地隨風搖曳的效果。
這里，我主要用到了Direct3D 10之后新引入的Geometry Shader來實現在GPU上創建單獨草體葉片的邏輯。每個葉片根據LOD有3種組成方式，分別需要1個quad、3個quad以及5個quad。

LeeRealtimeGrassThesis.png

（圖片來自：Edward Lee）
而每顆草的位置則由CPU來隨機決定，由于GS的輸入是一個圖元（point、line或triangle）而非頂點，所以我們在CPU中需要根據隨機的位置創建point類型的圖元作為這棵草的根位置。

ok，接下來就在GPU上通過一個根位置來制作草的葉子。

    [maxvertexcount(40)]
    void geom(point v2g points[1], inout TriangleStream<g2f> triStream)
    {
     
        float4 root = points[0].pos;

雖然位置是隨機的，但是我們顯然也希望葉子本身的高度和寬度也存在一些隨機。

        float random = sin(UNITY_HALF_PI * frac(root.x) + UNITY_HALF_PI * frac(root.z));
        _Width = _Width + (random / 50);
        _Height = _Height +(random / 5);

設置好葉子的屬性之后，我們就可以根據這些屬性來創建新的頂點模擬葉子的樣子了。

QQ截圖20170922223330.png

畫一個簡圖各位可以看到，組成一顆草的葉子需要12個不同的頂點，但是由于這里沒有用index，所以最后總共要輸出30個頂點來組成5個quad。
而根據這幅簡圖，我們還可以很方便的根據根的位置計算各個頂點的位置。
同時，還能發現偶數頂點對應的uv坐標是(0,v)，而奇數頂點對應的uv坐標都是(1,v)——這里的v是uv坐標中的v——因此，我們又能很輕松的計算出各個頂點對應的uv坐標了。
最后，如果我們要計算實時光，則還需要獲取頂點的法線信息，這里簡單起見統一為(0, 0, 1)。

        for (uint i = 0; i < vertexCount; i++)
        {
            v[i].norm = float3(0, 0, 1);

            if (fmod(i , 2) == 0)
            { 
                v[i].pos = float4(root.x - _Width , root.y + currentVertexHeight, root.z, 1);
                v[i].uv = float2(0, currentV);
            }
            else
            { 
                v[i].pos = float4(root.x + _Width , root.y + currentVertexHeight, root.z, 1);
                v[i].uv = float2(1, currentV);

                currentV += offsetV;
                currentVertexHeight = currentV * _Height;
            }
 
            v[i].pos = UnityObjectToClipPos(v[i].pos);

        }

QQ圖片20170922225533.png

這樣，一個葉片的網格就在GPU上創建完成了。

接下來，我們需要處理一下草葉的紋理來渲染出符合我們預期的葉片。這里我用到了GPU Gem那篇文章中的草叢紋理的處理方法：

fig07-02.jpg

即葉片的顏色可以只用一個張單獨表示葉片顏色的紋理來處理，比如我用的這張紋理：

QQ截圖20170922063324.png

        SubShader
            Tags{ "Queue" = "AlphaTest" "RenderType" = "TransparentCutout" "IgnoreProjector" = "True" }

            Pass
                AlphaToMask On

grassBladeAlpha2.png

所以，現在我們只需要在fs內簡單的取樣輸出就可以了。

    half4 frag(g2f IN) : COLOR
    {
        fixed4 color = tex2D(_MainTex, IN.uv);
        fixed4 alpha = tex2D(_AlphaTex, (IN.uv));

        return float4(color.rgb, alpha.g);
    }

QQ圖片20170923084241.png

0x03 生成覆蓋地面的無盡草地

有了葉子之后，我們就可以考慮如何生成地形以及地面上覆蓋的草了。為了地面的起伏輪廓自然真實，我們可以根據一張高度圖來動態創建地面的網格。
由于Unity的網格頂點上限是65000，因此我決定讓地面網格的尺寸為250 * 250：

    for (int i = 0; i < 250; i++)
    {
        for (int j = 0; j < 250; j++)
        {
            verts.Add(new Vector3(i, heightMap.GetPixel(i, j).grayscale * 5 , j));
            if (i == 0 || j == 0) continue;
            tris.Add(250 * i + j); 
            tris.Add(250 * i + j - 1);
            tris.Add(250 * (i - 1) + j - 1);
            tris.Add(250 * (i - 1) + j - 1);
            tris.Add(250 * (i - 1) + j);
            tris.Add(250 * i + j);
        }
    }        
    ...
    Mesh m = new Mesh();
    m.vertices = verts.ToArray(); 
    m.uv = uvs;
    m.triangles = tris.ToArray();

這樣，一個自然而真實地面網格就創建好了。

QQ截圖20170923094148.png

        m.vertices = verts.ToArray();
        m.SetIndices(indices，MeshTopology.Points, 0);

        grassLayer = new GameObject("grassLayer"); 
        mf = grassLayer.AddComponent<MeshFilter>();
        grassLayer.AddComponent<MeshRenderer>();

創建好之后，可以看到草根的位置隨機的分布在地面上，數量有上百萬個。

QQ圖片20170923101626.jpg

把我們的shader應用于記錄草根位置的mesh上。
wow，我們的草地出現了。

QQ圖片20170923103751.jpg

0x04 風的模擬

呆立的草雖然看上去比之前的紙片草好看了很多，但是靜止而整齊的葉子畢竟還是很不自然。因此，我們要讓草動起來也就是模擬風的效果。
思路仍然是利用三角函數來讓草葉搖擺起來，同時根據草的根位置為三角函數提供初始相位然后再增加一些隨機性在里面讓效果更自然。

        ...偽代碼
        wind.x += sin(_Time.x + root.x);
        wind *= random;
        ...

但是針對目前每一顆草都有獨立的葉片網格，為了更加逼真的模擬風的效果，顯然不同的葉片的不同部位受到風的影響是不同的。
距離葉子的頂端越近，則受到風的影響就越大。

QQ圖片20170923234027.png

因此在GS生成新頂點的邏輯中，增加風對頂點位置的影響，越高的頂點被影響的程度越大，這樣一個更真實的無盡草地效果就實現了。

QQ圖片20170924000328.jpg

ref：

【1】《Chapter 7. Rendering Countless Blades of Waving Grass》
【2】《Rendering Grass Terrains in
Real-Time with Dynamic Lighting》
【3】《REALISTIC REAL-TIME GRASS RENDERING》
【4】《Programming Guide for Direct3D 11》

-EOF-
最后打個廣告，歡迎支持我的書《Unity 3D腳本編程》

歡迎大家關注我的公眾號慕容的游戲編程：chenjd01