用Unity实现Flat Shading

要实现平面着色，就要使每个三角面是平滑的，我们可以从像素的法线向量入手，让每个像素的法线都等于该三角面的法线，而不是来自于三个顶点法线的插值。为了求得平面法线，可以利用硬件提供的ddx和ddy函数，分别计算tangent和binormal向量，最后叉乘得到normal：

	float3 dpdx = ddx(i.worldPos);
	float3 dpdy = ddy(i.worldPos);
	i.normal = normalize(cross(dpdy, dpdx));
1
2
3

除此之外，我们还可以借助geometry shader，直接修改顶点的normal，再传入fragment shader：

[maxvertexcount(3)]
void MyGeometryProgram (
	triangle InterpolatorsVertex i[3],
	inout TriangleStream<InterpolatorsVertex> stream
) {
	float3 p0 = i[0].worldPos.xyz;
	float3 p1 = i[1].worldPos.xyz;
	float3 p2 = i[2].worldPos.xyz;

	float3 triangleNormal = normalize(cross(p1 - p0, p2 - p0));
	i[0].normal = triangleNormal;
	i[1].normal = triangleNormal;
	i[2].normal = triangleNormal;

	stream.Append(i[0]);
	stream.Append(i[1]);
	stream.Append(i[2]);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

接下来，我们希望在平面着色的基础上为三角面加上线框。那么直观上来说，越靠近三角形边上的点需要进行额外的线框着色，而位于三角形内部的点则不受影响。这里可以借助三角形的重心坐标来进行判断，位于三角形边上的点，其重心坐标(x,y,z)中必定有一项为0。我们首先在geometry shader中添加重心坐标这一属性：

[maxvertexcount(3)]
void MyGeometryProgram (
	triangle InterpolatorsVertex i[3],
	inout TriangleStream<InterpolatorsVertex> stream
) {
	...
	i[0].barycentricCoordinates = float2(1, 0);
	i[1].barycentricCoordinates = float2(0, 1);
	i[2].barycentricCoordinates = float2(0, 0);
	...
}
1
2
3
4
5
6
7
8
9
10
11

这里只用了float2来表示重心坐标，是因为重心坐标有这样的性质：x+y+z=1。

有了重心坐标之后，我们就能利用它来绘制线框。首先，可以取重心坐标中的最小值，表示三角形中的点到边的最近距离，然后直接拿来计算颜色：

	float3 albedo = GetAlbedo(i);
	float3 barys;
	barys.xy = i.barycentricCoordinates;
	barys.z = 1 - barys.x - barys.y;
	
	float minBary = min(barys.x, min(barys.y, barys.z));
	return albedo * minBary;
1
2
3
4
5
6
7

雏形有了，但是黑色的地方太多了，原因是重心坐标中的最小值最大也就只有1/3，还得是在重心的位置。因此，需要把这个范围进行调整，我们可以使用smoothstep函数，只让距离很小的一部分点的着色变黑，然后平滑过渡到正常颜色：

	float3 albedo = GetAlbedo(i);
	float3 barys;
	barys.xy = i.barycentricCoordinates;
	barys.z = 1 - barys.x - barys.y;
	
	float minBary = min(barys.x, min(barys.y, barys.z));
	minBary = smoothstep(0, 0.1, minBary);
	return albedo * minBary;
1
2
3
4
5
6
7
8

看上去效果不错。不过美中不足的是，线框的宽度是各不相同的，这也很好理解，毕竟一个三角形所能覆盖的屏幕空间区域是不同的，覆盖面积大的三角形，重心坐标的变化就会慢一些，也就是经过多个像素才可能使重心坐标从0变化到0.1。那么，有办法统一三角形的线框宽度吗？这就需要我们把重心坐标的变化率考虑进来。变化率越小的，让线框变黑的阈值也应该越小。说到变化率，我们想起了之前提到的ddx和ddy函数：

	float3 albedo = GetAlbedo(i);
	float3 barys;
	barys.xy = i.barycentricCoordinates;
	barys.z = 1 - barys.x - barys.y;
	
	float minBary = min(barys.x, min(barys.y, barys.z));
    // 等价于 float delta = fwidth(minBary);
	float delta = abs(ddx(minBary)) + abs(ddy(minBary));
	minBary = smoothstep(0, delta, minBary);
	return albedo * minBary;
1
2
3
4
5
6
7
8
9
10

我们也可以进一步调节smoothstep的参数，来控制线框的宽度：

	minBary = smoothstep(delta, 2 * delta, minBary);
1

我们注意到，此时有些地方出现了很明显的锯齿。这是因为我们是先取的重心坐标的最小值，然后对其求导，但是这可能是不连续的。所以我们需要调整一下顺序，先分别对重心坐标的xyz求导：

	float3 albedo = GetAlbedo(i);
	float3 barys;
	barys.xy = i.barycentricCoordinates;
	barys.z = 1 - barys.x - barys.y;
	
	float3 deltas = fwidth(barys);
	barys = smoothstep(deltas, 2 * deltas, barys);
	float minBary = min(barys.x, min(barys.y, barys.z));
	return albedo * minBary;
1
2
3
4
5
6
7
8
9

效果拔群。那么最后，我们将一些可调节的参数暴露出来，方便我们随时调整表现：

	float3 albedo = GetAlbedo(i);
	float3 barys;
	barys.xy = i.barycentricCoordinates;
	barys.z = 1 - barys.x - barys.y;

	float3 deltas = fwidth(barys);
	float3 smoothing = deltas * _WireframeSmoothing;
	float3 thickness = deltas * _WireframeThickness;
	barys = smoothstep(thickness, thickness + smoothing, barys);
	float minBary = min(barys.x, min(barys.y, barys.z));
	return lerp(_WireframeColor, albedo, minBary);
1
2
3
4
5
6
7
8
9
10
11

这样我们就能够调整线框的颜色，过渡的平滑度，还有线框本身的宽度了：

如果你觉得我的文章有帮助，欢迎关注我的微信公众号：Game_Develop_Forever

Reference

[1] Flat and Wireframe Shading