移動端草海的渲染方案（四）

書接上文

前文介紹了咱們遊戲草海的基本渲染方案，本文將介紹一些更加有趣的動態效果。

碰撞彎曲

碰撞彎曲 在手遊中比較常見，下圖是咱們遊戲裏的效果：

uNature 的實現方式 相似用一個球體壓迫草面，使得草的頂點遠離球體中心。

uNature 一共支持 20個碰撞源，不過手遊的話只計算 主角的碰撞 就夠了。

咱們能夠在 頂點着色器 中添加以下代碼：

inline float4 CalculateTouchBending(float4 vertex)
{
    float4 current = _InteractionTouchBendedInstances;

    if (distance(vertex.xyz, current.xyz) < current.w)
    {                
        float WMDistance = 1 - clamp(distance(vertex.xyz, current.xyz) / current.w, 0, 1);
        float3 posDifferences = normalize(vertex.xyz - current.xyz);

        float3 strengthedDifferences = posDifferences * (_TouchBendingStrength + _TouchBendingStrength);

        float3 resultXZ = WMDistance * strengthedDifferences;

        vertex.xz += resultXZ.xz;
        vertex.y -= WMDistance * _TouchBendingStrength;

        return vertex;
    }

    return vertex;
}
複製代碼

上面代碼中的 _InteractionTouchBendedInstances 存貯的是 碰撞源 的信息，其 xyz 份量是 球心的世界座標， w 份量是球的 半徑，_InteractionTouchBendedInstances 的值由腳本傳入。

這裏的代碼很簡單，不廢話。

割草

割草 是另一個好玩的東西，自從玩過 塞爾達，看到什麼都想砍兩刀，：）

下圖是咱們遊戲的割草效果：

割草 的原理也很簡單：在運行時修改 草的密度。

前文提過，Unity內置的 Terrain 提供了一個 GetDetailLayer 接口，這個接口返回一個二維數組，這個二維數組和 柵格化 後的地表網格是相對應的，數組每一個元素的值即當前格 草的密度。

uNature 的實現方式和 Terrain 相似，場景依然會被 柵格化，不一樣的是，uNature 用一張紋理 GrassMap 來存貯密度。

割草 主要的邏輯就是計算出 攻擊範圍 覆蓋的單元格，而且修改這些單元格的密度。

常見的技能攻擊形狀包括：圓形攻擊，扇形攻擊，矩形攻擊等。

下圖是一個 扇形攻擊 覆蓋的單元格示意：

趁着年前有空，我把 割草 的代碼整理了一翻，丟到 Asset Store 賺點小錢，Terrain版本 和 uNature版本 的割草都有：

• Easy Grass Cutter

• uNature Cutter

歡迎參考。

燒草

塞爾達 的草不但能夠割，還能夠燒。

下圖是咱們模仿 塞爾達 的燒草效果，包括火勢蔓延，：）

原理上，燒草 和 割草 相似，不一樣的是，割草須要 密度，而燒草須要 燃燒度。

這裏的 燃燒度 是咱們本身定義的，就是 草發黑的程度。

咱們固然能夠模仿 密度圖 生成一張 燃燒度圖，不過從優化資源佔用的角度考慮，咱們最終的作法是：複用密度圖。

咱們能夠對 密度 作一個編碼，讓他 即能表示密度，也能表示燃燒度。

好比 密度 的最大值咱們定爲 10，燃燒度 的最大值咱們定爲 23，10 * 23 + 22 = 252 仍是在 255之內，這樣 GrassMap 的一個通道就能保存這個信息，表現上也足夠。

舉個例子，好比當前格的密度是 3，燃燒度是 12，那麼編碼後的值就是 3 * 23 + 12 = 81。

這樣，不管是 割草 仍是 燒草，咱們要作的都是 更新密度，即更新 GrassMap 的 像素信息：

public Color32[] mapPixels
{
    get
    {
        if (_mapPixels == null)
        {
            _mapPixels = map.GetPixels32();
        }

        return _mapPixels;
    }

    internal set
    {
        _mapPixels = value;
    }
}
複製代碼

小貼士：用 Texture2D.GetPixels32 接口和 Color32 來計算，速度更快，：）

For most textures, even faster is to use GetPixels32 which returns low precision color data without costly integer-to-float conversions.

隨風擺動

uNature 草的擺動算法以下：

void FastSinCos(float4 val, out float4 s, out float4 c) 
{
    val = val * 6.408849 - 3.1415927;
    float4 r5 = val * val;
    float4 r6 = r5 * r5;
    float4 r7 = r6 * r5;
    float4 r8 = r6 * r5;
    float4 r1 = r5 * val;
    float4 r2 = r1 * r5;
    float4 r3 = r2 * r5;
    float4 sin7 = { 1, -0.16161616, 0.0083333, -0.00019841 };
    float4 cos8 = { -0.5, 0.041666666, -0.0013888889, 0.000024801587 };
    s = val + r1 * sin7.y + r2 * sin7.z + r3 * sin7.w;
    c = 1 + r5 * cos8.x + r6 * cos8.y + r7 * cos8.z + r8 * cos8.w;
}

float4 ApplyFastWind(float4 vertex, float texCoordY)
{
    if (_WindSpeed == 0) return vertex;

    float speed = _WindSpeed;

    float4 _waveXmove = float4 (0.024, 0.04, -0.12, 0.096);
    float4 _waveZmove = float4 (0.006, .02, -0.02, 0.1);

    const float4 waveSpeed = float4 (1.2, 2, 1.6, 4.8);

    float4 waves;
    waves = vertex.x * _WindBending;
    waves += vertex.z * _WindBending;

    waves += _Time.x * (1 - 0.4) * waveSpeed * speed;

    float4 s, c;
    waves = frac(waves);
    FastSinCos(waves, s, c);

    float waveAmount = texCoordY * (1 + 0.4);
    s *= waveAmount;

    s *= normalize(waveSpeed);

    s = s * s;
    float fade = dot(s, 1.3);
    s = s * s;

    float3 waveMove = float3 (0, 0, 0);
    waveMove.x = dot(s, _waveXmove);
    waveMove.z = dot(s, _waveZmove);

    vertex.xz -= waveMove.xz;

    //vertex -= mul(_World2Object, float3(_WindSpeed, 0, _WindSpeed)).x * _WindBending * _SinTime;

    return vertex;
}
複製代碼

上面的代碼和Unity內置的 WavingGrass 版本差很少，也是本身擺本身的，不受 WindZone 影響。

咱們項目並未採用上述算法，而是選擇了 Lux LWRP Essentials 的方案，細節請參考前文 Lux的風和WindTexture，這裏略過。

一個浮點數比較的Bug

最後說一個 uNature 的bug。

第一次在手機上跑 uNature 的時候，我發現部分 Mali GPU 的手機 草不見了，追了半天，最後發現是下面這個函數致使的：

float GetDensity(float4 pixel)
{
    pixel *= 255;
    if (pixel.r == _PrototypeID) return pixel.g;
    if (pixel.b == _PrototypeID) return pixel.a;

    return 0;
}
複製代碼

這個函數根據 GrassMap 獲取 指定類型草的密度，這裏的 _PrototypeID 即 草的類型ID。

這裏關於ID的 浮點數比較 直接用了 ==，違背了老師對咱們的教導，十分的可疑。

換成下面的寫法後，這個bug就修正了：

float GetDensity(float4 pixel)
{
    pixel *= 255;

    if(abs(pixel.r - _PrototypeID) < 0.01f) return pixel.g;
    if(abs(pixel.b - _PrototypeID) < 0.01f) return pixel.a;

    return 0;
}
複製代碼

本文就到這裏，下篇文章會介紹提高草的 光照表現 的一些作法。

我的主頁

本文的我的主頁連接：baddogzz.github.io/2020/01/20/…。

好了，拜拜。