在Unity中只使用shader实现的粒子动画

stonstad · 发表于 2022-12-12 14:46

前言

最近想实现一个降雪效果，考虑到particles带来的cpu负担，决定只用shader来实现类似效果，渲染阶段cpu端不参与渲染之外的事情，shader中管理粒子的生命周期和运动轨迹。
最终效果：

https://www.zhihu.com/video/1565759442431221760
模型准备

要想达到目标需求，需要特制模型数据，这里在C#端生成所需的模型数据。这里虽然称之为“模型”但实际储存的是生成模型的参数（BillBoard），并不能直接用于一般的渲染，需要与对应shader配合才能渲染内容。
Mesh fallMesh
{
  get
  {
Mesh mesh = new Mesh();
mesh.name = &#34;WeatherFall&#34;;
Vector3 size = new Vector3(300, 200, 300); // 范围，作为算法验证这里直接用固定数值了，以下同
int count = 10; // 粒子在棱方向的数量

int total_count = count * count * count;
Vector3[] vertices = new Vector3[total_count * 4];
Vector2[] uvs = new Vector2[total_count * 4];
int[] indices = new int[total_count * 6];
float halfsize = (count - 1) * 0.5f;
Vector3 center = new Vector3(halfsize, halfsize, halfsize);
for (int z = 0; z < count; z++)
{
   for (int y = 0; y < count; y++)
   {
      for (int x = 0; x < count; x++)
      {
      int index = z * count * count + y * count + x;
      Vector3 point = new Vector3(x - center.x, y - center.y, z - center.z);
      vertices[index * 4 + 0] = vertices[index * 4 + 1] =
         vertices[index * 4 + 2] = vertices[index * 4 + 3] = point;

      uvs[index * 4 + 0].Set(0, 0);
      uvs[index * 4 + 1].Set(1, 0);
      uvs[index * 4 + 2].Set(0, 1);
      uvs[index * 4 + 3].Set(1, 1);

      indices[index * 6 + 0] = index * 4 + 0;
      indices[index * 6 + 1] = index * 4 + 1;
      indices[index * 6 + 2] = index * 4 + 2;
      indices[index * 6 + 3] = index * 4 + 2;
      indices[index * 6 + 4] = index * 4 + 1;
      indices[index * 6 + 5] = index * 4 + 3;
      }
   }
}

mesh.vertices = vertices;
mesh.uv = uvs;
mesh.SetIndices(indices, MeshTopology.Triangles, 0, false);
mesh.bounds = new Bounds(Vector3.zero, size);
mesh.UploadMeshData(true);
return mesh;
  }
}
这个模型替换MeshFilter中的sharedMesh，剩下的工作就是写shader了。
Shader实现

生成的模型参数适用于BillBoard方式，四个顶点在同一个位置，通过UV坐标变化在View空间扩展成四边形，这样可以保证旋转时始终面向屏幕。这里先测试以下生成的数据：
v2f vert (appdata v)
{
  v2f o;
  o.color = _Color;

  float3 vertex = v.vertex;

  // Vector3 _Gap是每个点之间的距离，是C#代码中size/count得到的值
  // 这里worldPos的计算方法是为了保证不受transform的缩放和旋转影响，可以根据需要自行修改
  float3 worldPos = UNITY_MATRIX_M._m03_m13_m23 + vertex.xyz * _Gap;
  float4 positionVS = mul(UNITY_MATRIX_V, float4(worldPos, 1));

  float2 patch = v.uv * 2 - 1;
  positionVS.xy += patch * _Size; // 在View空间展开片面，float _Size是片面的大小
  o.vertex = mul(UNITY_MATRIX_P, positionVS);

  o.uv = v.uv;
return o;
}

fixed4 frag(v2f i) : SV_Target
{
  return 1; // 白色
}渲染结果如下，这时是一个均匀分布的10x10x10的长方体点阵列：

增加噪声

能够渲染片面后，需要增加一些噪声来实现降雪错乱的效果。这里可以使用随机数生成一张RGBA的图片，或者使用Photoshop中增加噪声并提高对比度方法生成一张噪声图导入到Unity中：

噪声图

红圈是导入建议的设置

修改代码，在worldPos计算ViewSpace位置前叠加噪声：
float4 SampleNoise(float3 v3)
{
  // 在2D noise实现3D noise纹理拾取，_Repeat取范围是(0,1)
  // 因为不考虑噪声连续性，这个实现比较随意，也可以使用Texture3D实现
  float2 uv3D = float2(v3.xy * _Repeat + frac(v3.z * _Repeat) * 0.11 + v3.z * _Repeat);
  return tex2Dlod(_NoiseTex, float4(uv3D, 0, 0)) * 2.0 - 1; // 顶点纹理拾取必须用tex2Dlod
}

v2f vert (appdata v)
{
  v2f o;
  o.color = _Color;

  float3 vertex = v.vertex;
  float3 uvw = v.vertex;
  float3 worldPos = UNITY_MATRIX_M._m03_m13_m23 + vertex.xyz * _Gap;
  float4 noise = SampleNoise(uvw);
  worldPos.xyz += noise.xyz * (_Gap.xyz + _Size); // 扰动worldPos
  float4 positionVS = mul(UNITY_MATRIX_V, float4(worldPos, 1));

  float2 patch = v.uv * 2 - 1;

  positionVS.xy += patch * _Size;
  o.vertex = mul(UNITY_MATRIX_P, positionVS);

  o.uv = v.uv;
  return o;
}这里在顶点中读取纹理信息，使用了顶点纹理拾取（Vertex Texture Fetch）,与纹理采样不同的是访问不考虑连续性，所以是“拾取”而不是“采样”。最后是这样：

粒子下落

最简单的粒子下落公式就是：
位置=初始位置+时间*速度*方向
在CPU实现的粒子系统中，一般是检查粒子的生命周期，当生命周期大于设定时间后销毁粒子（或转入到池中），然后在利用这个粒子的空间创建一个新的粒子。在shader中只能从只读数据中获得数据，无法控制粒子的销毁与创建，这里需要做的就是让粒子在y轴某个范围内不断滚动即可。
float Round(float y, float range)
{
  float r = range * 2;
  return frac((y + range) / r) * r - range;
}

v2f vert (appdata v)
{
  // ...
  float3 vertex = v.vertex;
  // ...
  vertex.y -= _Time.y * _FallSpeed;       // float _FallSpeed 是下落速度
  vertex.y = Round(vertex.y, _Count * 0.5); // float _Count 是粒子棱方向的数量，粒子间距为1，
                                          // 所以在模型空间的运动范围是（-5, 5]
  // ...
}现实中，如果雪花很轻或者风很大，受到空气扰动影响下落方向不是很稳定，所以我们在横向上增加一个摆动效果。
float s, c;
sincos(noise.w * UNITY_PI * 2.0 + _Time.y, s, c);
float2 swing = float2(c, s) * _Swing * _Gap.xz; // float _Swing 是摆动幅度
worldPos.xz -= (swing + _Direction.xy) * vertex.y; // float4 _Direction.xy 是风力方向效果图：

风力+扰动效果

可以看出，因为风力方向的影响，粒子超出了设定的范围框，同时在范围内也有一部分空间没有粒子，解决办法是对worldPos.xz做出限定：
// _Range 是模型空间的范围，所以滚动xz时要转到模型空间
float3 _Range = _Gap.xyz * _Count * 0.5;
worldPos.xz = Round(worldPos.xz - UNITY_MATRIX_M._m03_m23, _Range.xz) + UNITY_MATRIX_M._m03_m23;

限定xz范围

结尾

最后，在fragment中加一个简单的纹理采样即可。如果想得到更丰富的粒子形态，可以再叠加旋转，大小和颜色随机。稍微修改一下也可以做成全屏下雪效果。
完整代码：
struct appdata
{
  float4 vertex : POSITION;
  float2 uv : TEXCOORD0;
};

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

sampler2D _MainTex;
sampler2D _NoiseTex;
float4 _Color;
float4 _MainTex_ST;
float _Repeat;
float4 _Gap;
float _Size;
float _FallSpeed;
float4 _Direction;
float _Swing;

float4 SampleNoise(float3 v3)
{
  float2 uv3D = float2(v3.xy * _Repeat + frac(v3.z * _Repeat) * 0.11 + v3.z * _Repeat);
  return tex2Dlod(_NoiseTex, float4(uv3D, 0, 0)) * 2.0 - 1;
}

float Round(float y, float range)
{
  float r = range * 2;
  return frac((y + range) / r) * r - range;
}

float2 Round(float2 y, float2 range)
{
  float2 r = range * 2;
  return frac((y + range) / r) * r - range;
}

v2f vert (appdata v)
{
  v2f o;
  o.color = _Color;

  float3 vertex = v.vertex;
  float3 uvw = v.vertex;
  float _Count = _Gap.w;
  float3 _Range = _Gap.xyz * _Count * 0.5;

  vertex.y -= _Time.y * _FallSpeed;
  vertex.y = Round(vertex.y, _Count * 0.5);
  float3 worldPos = UNITY_MATRIX_M._m03_m13_m23 + vertex.xyz * _Gap;
  float4 noise = SampleNoise(uvw);
  float s, c;
  sincos(noise.w * UNITY_PI * 2.0 + _Time.y, s, c);
  float2 swing = float2(c, s) * _Swing * _Gap.xz;
  worldPos.xz -= (swing + _Direction.xy) * vertex.y;
  worldPos.xz = Round(worldPos.xz - UNITY_MATRIX_M._m03_m23, _Range.xz) + UNITY_MATRIX_M._m03_m23;

  worldPos.xyz += noise.xyz * (_Gap.xyz + _Size);
  float4 positionVS = mul(UNITY_MATRIX_V, float4(worldPos, 1));

  float2 patch = v.uv * 2 - 1;

  positionVS.xy += patch * _Size;
  o.vertex = mul(UNITY_MATRIX_P, positionVS);

  o.uv = v.uv;
  return o;
}

half4 frag(v2f i) : SV_Target
{
  half4 col = tex2D(_MainTex, i.uv) * i.color;
  return col;
}

		自动登录	找回密码
密码			立即注册

在Unity中只使用shader实现的粒子动画

本帖子中包含更多资源