本文参考自教程，并加上自己的一些心得体会。
0.生成三角形面片
一块草地由若干根草组成，每根草其实可以看作是一个三角形面片。为了生成三角形面片，我们借助geometry shader的力量，去修改输入的顶点信息：
[maxvertexcount(3)]
void geo(triangle v2g IN[3], inout TriangleStream<g2f> tristream)
{
tristream.Append(generateGeoVertex(IN[0]));
tristream.Append(generateGeoVertex(IN[0]));
tristream.Append(generateGeoVertex(IN[0]));
}
如何确定生成三角形面片的position信息呢？这里我们选择在切线空间中去生成position。之所以选择切线空间而不是物体空间，是因为我们希望最后生成的草是生长在物体表面的，即与物体表面垂直，与物体本身是什么形状是无关的。通过输入的顶点信息，即可构造出所需要的TBN矩阵：
float4 vertex = IN[0].vertex;
float4 tangent = IN[0].tangent;
float3 normal = IN[0].normal;
float3 binormal = cross(normal, tangent) * tangent.w;
float3x3 tangentToLocal =
{
tangent.x, binormal.x, normal.x,
tangent.y, binormal.y, normal.y,
tangent.z, binormal.z, normal.z,
};
Unity提供的tangent向量中的w分量用于确定副切线binormal的方向。接下来，就可以将生成的三角形面片的切线坐标转换到裁剪坐标系输出给frag shader：
g2f generateGeoVertex(float3 originPos, float width, float forward, float height, float2 uv, float3x3 tangentToLocal)
{
float3 tangentPos = float3(width, forward, height);
float3 localPos = originPos + mul(tangentToLocal, tangentPos);
g2f o;
o.uv = uv;
o.pos = UnityObjectToClipPos(localPos);
return o;
}
假设生成的三角形切线坐标为(-0.5, 0, 0),(0.5, 0, 0),(0, 1, 0)，生成的效果如下：
显而易见有一些细节需要完善，让我们来逐一解决。
1.完善草的细节
我们希望，草的颜色是渐变的绿色，底部的颜色最深，顶部的颜色最浅。因此，我们可以借助纹理坐标的y来代表颜色的深浅程度：
fixed4 frag (g2f i) : SV_Target
{
fixed4 col = lerp(_BottomColor, _TopColor, i.uv.y);
return col;
}
然后在面板上调好颜色，效果如下：
看上去有了草的气息。但是现在看上去太死板了，每个草的面向完全一致，需要加些随机因素，让每个草的面向发生不同的偏转，也就是在切线坐标系中，让它们的坐标绕z轴旋转一个随机的角度：
float3x3 randomFacingMatrix = angleAxis3x3(rand(vertex.xyz) * TWO_PI, float3(0, 0, 1));
float3x3 mat = mul(tangentToLocal, randomFacingMatrix);
看上去好了一些。不过现在来看每一棵草都是笔直的，也比较生硬，需要给它们随机俯仰一个角度：
float3x3 ramdomForwardMatrix = angleAxis3x3(rand(vertex.zyx) * _BendRotationRandom * HALF_PI, float3(-1, 0, 0));
float3x3 mat = mul(mul(tangentToLocal, randomFacingMatrix), ramdomForwardMatrix);
接下来，我们需要处理每棵草的宽度和高度，现在每棵草显得太大了，也要限制下宽高阈值，然后随机一下：
float randomWidth = (2 * rand(vertex.xzy) - 1) * _BladeWidthRandom + _BladeWidth;
float randomHeight = (2 * rand(vertex.yzx) - 1) * _BladeHeightRandom + _BladeHeight;
现在草终于有草的样子了，但是看上去也太过于稀疏了。接下来我们要借助tessellation的力量，扩充整体的顶点数量。
2.tessellation增加顶点
在渲染管线中我们只能指定tessellation输入的顶点信息，和具体输出的顶点信息，中间如何tessellation的过程是由硬件控制的。有关tessellation的文章可以查看这篇。为了实现tessellation，我们需要引入hull shader和domain shader，并声明用来告诉硬件如何细分顶点的TessellationFactors结构：
struct TessellationFactors
{
float edge[3] : SV_TessFactor;
float inside : SV_InsideTessFactor;
};
TessellationFactors patchConstantFunction(InputPatch<v2g, 3> patch)
{
TessellationFactors f;
f.edge[0] = _TessellationUniform;
f.edge[1] = _TessellationUniform;
f.edge[2] = _TessellationUniform;
f.inside = _TessellationUniform;
return f;
}
[UNITY_domain("tri")]
[UNITY_patchconstantfunc("patchConstantFunction")]
[UNITY_partitioning("integer")]
[UNITY_outputtopology("triangle_cw")]
[UNITY_outputcontrolpoints(3)]
v2g hull (InputPatch<v2g, 3> patch, uint id : SV_OutputControlPointID)
{
return patch[id];
}
[UNITY_domain("tri")]
v2g domain(TessellationFactors factors, OutputPatch<v2g, 3> patch, float3 barycentricCoordinates : SV_DomainLocation)
{
v2g v;
v.vertex = patch[0].vertex * barycentricCoordinates.x + patch[1].vertex * barycentricCoordinates.y + patch[2].vertex * barycentricCoordinates.z;
v.tangent = patch[0].tangent * barycentricCoordinates.x + patch[1].tangent * barycentricCoordinates.y + patch[2].tangent * barycentricCoordinates.z;
v.normal = patch[0].normal * barycentricCoordinates.x + patch[1].normal * barycentricCoordinates.y + patch[2].normal * barycentricCoordinates.z;
v.uv = patch[0].uv * barycentricCoordinates.x + patch[1].uv * barycentricCoordinates.y + patch[2].uv * barycentricCoordinates.z;
return v;
}
patchConstantFunction用来设置factors结构的值。具体tessellation factors中的edge和inside分量是如何影响顶点划分的，可以参考这篇知乎问答。
做完这些后，我们将_TessellationUniform的值调大试试：
3.让草动起来
现在看上去已经有了草地的雏形，但它们都还是静止的。接下来，我们要加一点风的元素，让草动起来。
实现起来也不是很麻烦，就是根据时间的变化，对一张代表风的贴图进行连续采样，根据采样点信息计算出风力和风向，然后得到对应的旋转矩阵，应用在每棵草上：
float2 uv = vertex.xz * _WindDistortionMap_ST.xy + _WindDistortionMap_ST.zw + _WindFrequency * _Time.y;
float2 windSample = (2 * tex2Dlod(_WindDistortionMap, float4(uv, 0, 0)).xy - 1) * _WindStrength;
float3 wind = normalize(float3(windSample, 0));
float3x3 windMatrix = angleAxis3x3(windSample * PI, wind);
float3x3 mat = mul(mul(mul(tangentToLocal, windMatrix), randomFacingMatrix), ramdomForwardMatrix);
需要注意的是，由于这些工作都是在geometry shader完成的，因而要使用tex2Dlod而不是tex2D方法进行采样，否则会出错，原因可以参考这个链接：
The error here is that you're trying to sample from a texture in a vertex shader the way you would in a fragment or pixel shader.
Vertex texture fetches are a little bit special. They're only supported in Shader Model 3 and up,
and they're unable to use the tex2d() function.
That may sound odd, but tex2D() is really a shortcut that says "figure out the right mip level to sample automatically"
- in a fragment shader this is done using implicit derivatives, but those aren't available at the vertex stage.
So, we need to use the more explicit tex2dlod() form (which works at both the vertex and fragment stages).
This takes a 4-component vector, whose x and y are the familiar texture coordinates in uv space,
and w indicates which mip level to sample from (0 being the highest resolution available).
有了随风摆动的效果之后，我们发现每棵草还是太有三角形几何体的特征，于是我们在geometry shader中将输出的顶点增加为7个，并在切线空间中修改顶点的y值，使得它们带有一定形状的扭曲，最顶端的扭曲程度越大。
另外，我们注意到，每棵草的根部是不应该有俯仰和扭曲，还有随风摆动的，不然根部很可能会被旋转到地底里去。所以，我们根据了每棵草顶点的不同区分了变换矩阵：
#define BLADE_SEGMENTS 3
[maxvertexcount(2 * BLADE_SEGMENTS + 1)]
void geo(triangle v2g IN[3], inout TriangleStream<g2f> tristream)
{
float3x3 widthMat = mul(tangentToLocal, randomFacingMatrix);
float3x3 heightMat = mul(mul(mul(tangentToLocal, windMatrix), randomFacingMatrix), ramdomForwardMatrix);
for(int i = 0; i < BLADE_SEGMENTS; i++)
{
float t = (float)i / BLADE_SEGMENTS;
float width = randomWidth * (1 - t);
float forward = randomForward * pow(t, _BladeCurve);
float height = randomHeight * t;
float3x3 mat = i == 0 ? widthMat : heightMat;
tristream.Append(generateGeoVertex(vertex, -0.5 * width, forward, height, float2(t, t), mat));
tristream.Append(generateGeoVertex(vertex, 0.5 * width, forward, height, float2(1 - t, t), mat));
}
tristream.Append(generateGeoVertex(vertex, 0, randomForward, randomHeight, float2(0.5, 1), heightMat));
}
4.光照与阴影
最后，我们要为草加上光照和阴影。阴影分为产生阴影和接收阴影两部分，产生阴影需要新增一个pass，写入shadow map：
Pass
{
Tags
{
"LightMode" = "ShadowCaster"
}
CGPROGRAM
#pragma multi_compile_shadowcaster
float4 frag(g2f i) : SV_Target
{
SHADOW_CASTER_FRAGMENT(i)
}
ENDCG
}
接收阴影使用Unity提供的SHADOW_COORDS，TRANSFER_SHADOW，SHADOW_ATTENUATION即可实现，配合最基本的漫光照模型，修改frag代码：
Pass
{
CGPROGRAM
fixed4 frag (g2f i, fixed facing : VFACE) : SV_Target
{
float3 normal = facing > 0 ? i.normal : -i.normal;
float shadow = SHADOW_ATTENUATION(i);
float nDotL = saturate(dot(normal, _WorldSpaceLightPos0)) * shadow;
float3 ambient = ShadeSH9(float4(normal, 1));
float4 lightColor = float4(ambient + nDotL * _LightColor0, 1);
fixed4 col = lerp(_BottomColor, _TopColor * lightColor, i.uv.y);
return col;
}
ENDCG
}
这里我们假定了只有顶端的颜色才会和光照颜色融合，如果底端也融合的话，整棵草的颜色会偏暗。同时，为了支持深度偏差，使用Unity提供的UnityApplyLinearShadowBias：
#if UNITY_PASS_SHADOWCASTER
// Applying the bias prevents artifacts from appearing on the surface.
o.pos = UnityApplyLinearShadowBias(o.pos);
#endif
最终效果如下：
如果你觉得我的文章有帮助，欢迎关注我的微信公众号（大龄社畜的游戏开发之路）-
