如何在Unity中實現水體互動？

遊資網發表於2020-03-23
Unity
製作可互動的水體大致分為以下三步：

1.標記水體碰撞的位置

2.計算水波的傳遞 通過波動公式，3D或者2D 波動公式都行

3.水面頂點取樣波動傳遞結果計算結果做頂點Y軸偏移

本文由Unity Connect博主從自身實踐經驗出發，為大家分享在Unity中如何實現水體互動？

相關公式：

如何在Unity中實現水體互動？

根據公式可知波的下次一次傳遞 z(i,j,k+1) 為 當前波值+上一次波值+周圍波值

當前波值 *= (4-8*c^2*t^2/d^2/d^2)/(u*t)

上一次波值 *= (ut-2) / (ut + 2)

四周波值 *= (2c^2t^2/d^2) / (ut + 2)

其中各引數含義為 c 波速， u 粘度, d 波的遞進距離, t 為遞進時間

下面我們著手開始建立：

首先建立水面。這裡直接用Unity Wiki的已有輪子的建立平面，下載wiki上的程式碼，傳到專案中。

https://wiki.unity3d.com/index.php/CreatePlane

如何在Unity中實現水體互動？

這裡我們直接建立一個寬10米，長10米，間隔100的平面，間隔越多，水體的顆粒感越小。對應本文開頭描述的三大步驟，建立3個紋理，對應水體碰撞標記，傳遞，渲染。

  1. m_waterWaveMarkTexture = new RenderTexture(WaveTextureResolution, WaveTextureResolution, 0, RenderTextureFormat.Default);
  2.         m_waterWaveMarkTexture.name = "m_waterWaveMarkTexture";
  3.         m_waveTransmitTexture = new RenderTexture(WaveTextureResolution, WaveTextureResolution, 0, RenderTextureFormat.Default);
  4.         m_waveTransmitTexture.name = "m_waveTransmitTexture";
  5.         m_prevWaveMarkTexture = new RenderTexture(WaveTextureResolution, WaveTextureResolution, 0, RenderTextureFormat.Default);
  6.         m_prevWaveMarkTexture.name = "m_prevWaveMarkTexture";
複製程式碼

標記水體碰撞位置

  1. void WaterPlaneCollider()
  2.     {
  3.         hasHit = false;
  4. if (Input.GetMouseButton(0))
  5.         {
  6.             Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
  7.             RaycastHit hitInfo = new RaycastHit();
  8. bool ret = Physics.Raycast(ray.origin, ray.direction, out hitInfo);
  9. if (ret)
  10.             {
  11.                 Vector3 waterPlaneSpacePos = WaterPlane.transform.worldToLocalMatrix * new Vector4(hitInfo.point.x, hitInfo.point.y, hitInfo.point.z, 1);

  13. float dx = (waterPlaneSpacePos.x / WaterPlaneWidth) + 0.5f;
  14. float dy = (waterPlaneSpacePos.z / WaterPlaneLength) + 0.5f;

  16.                 hitPos.Set(dx, dy);
  17.                 m_waveMarkParams.Set(dx, dy, WaveRadius * WaveRadius, WaveHeight);

  19.                 hasHit = true;
  20.             }
  21.         }
  22.     }
複製程式碼

由於我們預設Raycast 獲取的是碰撞的世界座標，我們期望的是直接獲取到 [0-1] 範圍的數值用來對映到uv空間，直接在 m_waterWaveMarkTexture 進行標記， 因此我們乘以一個 world2Local 矩陣變換到本地， 又因為CreatePlane預設建立的Pivot 位於中心，再除以寬高縮放到1區間時，值域落在[-0.5,0.5]上，因此我們還要做 + 0.5偏移。

標記水體碰撞Shader

  1. float dx = i.uv.x - _WaveMarkParams.x;
  2. float dy = i.uv.y - _WaveMarkParams.y;

  4. float disSqr = dx * dx + dy * dy;

  6. int hasCol = step(0, _WaveMarkParams.z - disSqr);

  8. float waveValue = DecodeHeight(tex2D(_MainTex, i.uv));

  10. if (hasCol == 1) {
  11. waveValue = _WaveMarkParams.w;
  12.                 }
複製程式碼

根據傳入的_WaveMarkParams.xy 跟當前uv 對比，在筆刷範圍內的畫素標記位預設波高度。

波的傳遞Shader

  1. static const float2 WAVE_DIR[4] = { float2(1, 0), float2(0, 1), float2(-1, 0), float2(0, -1) };

  3. float dx = _WaveTransmitParams.w;

  5. float avgWaveHeight = 0;
  6. for (int s = 0; s < 4; s++)
  7.                 {
  8.                     avgWaveHeight += DecodeHeight(tex2D(_MainTex, i.uv + WAVE_DIR[s] * dx));
  9.                 }

  11. //(2 * c^2 * t^2 / d ^2) / (u * t + 2)*(z(x + dx, y, t) + z(x - dx, y, t) + z(x, y + dy, t) + z(x, y - dy, t);
  12. float agWave = _WaveTransmitParams.z * avgWaveHeight;

  14. // (4 - 8 * c^2 * t^2 / d^2) / (u * t + 2)
  15. float curWave = _WaveTransmitParams.x *  DecodeHeight(tex2D(_MainTex, i.uv));
  16. // (u * t - 2) / (u * t + 2) * z(x,y,z, t - dt) 上一次波浪值 t - dt
  17. float prevWave = _WaveTransmitParams.y * DecodeHeight(tex2D(_PrevWaveMarkTex, i.uv));

  19. //波衰減
  20. float waveValue = (curWave + prevWave + agWave) * _WaveAtten;
複製程式碼

最後就是水體的呈現，因為需要做頂點紋理取樣，因此需要至少ES3.0 硬體。

  1. v2f vert (appdata v)
  2. {
  3. v2f o;

  5. float4 localPos = v.vertex;
  6. float4 waveTransmit = tex2Dlod(_WaveResult, float4(v.uv, 0, 0));
  7. float waveHeight = DecodeFloatRGBA(waveTransmit);

  9. localPos.y += waveHeight * _WaveScale;

  11. float3 worldPos = mul(unity_ObjectToWorld, localPos);
  12. float3 worldSpaceNormal = mul(unity_ObjectToWorld, v.normal);
  13. float3 worldSpaceViewDir = UnityWorldSpaceViewDir(worldPos);

  15. o.vertex = mul(UNITY_MATRIX_VP, float4(worldPos, 1));
  16. o.uv = v.uv;
  17. o.worldSpaceReflect = reflect(-worldSpaceViewDir, worldSpaceNormal);
  18. return o;
複製程式碼

* 本文參考的波動相關資料：

https://en.wikipedia.org/wiki/Wave_equation

https://www.amazon.com/Mathematics-Programming-Computer-Graphics-Third/dp/1435458869 流體 章節

作者：dreamfairy  
來源：Unity官方平臺
原地址：https://mp.weixin.qq.com/s/-sL54xgyX6mVMnVOMHnpVg

相關文章