honmono

游戏和计算机图形学

0%

渲染管线实现之 绘制球体

发表于 更新于

球体生成与渲染(细分法)

单纯生成球体的mesh很简单, 但是要保证mesh和uv对应, 并且在接缝处不出现问题还是会有一些麻烦的.

1. 细分算法

细分法很简单, 本质就是对一个三角形进行细分变成四个三角形

image-20230522162636334

如图(网图, 侵删), 在三角形的三条边上取中点, ab, ac, bc, 这三个点减去球心, 得到从球心指向ab, ac, bc 的向量, 在做归一化, 乘以球体半径, 得到最终的ab, ac, bc. 对这六个点, 可以得到四个三角形

  • ab, ac, bc
  • a, ab, ac
  • b, ab, bc
  • c, bc, ac

然后对这四个三角形重复上面的步骤, 直到越来越接近一个完美的曲面.

2. 球体实现

具体实现方法, 首先我们准备一个正二十面体, 从这个二十面体细分出球体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const double t = 1.61803;
this.vertices.Add(Vector4.Create(-1, t, 0, 1));
this.vertices.Add(Vector4.Create(1, t, 0, 1));

this.vertices.Add(Vector4.Create(-1, -t, 0, 1));
this.vertices.Add(Vector4.Create(1, -t, 0, 1));

this.vertices.Add(Vector4.Create(0, -1, t, 1));
this.vertices.Add(Vector4.Create(0, 1, t, 1));

this.vertices.Add(Vector4.Create(0, -1, -t, 1));
this.vertices.Add(Vector4.Create(0, 1, -t, 1));

this.vertices.Add(Vector4.Create(t, 0, -1, 1));
this.vertices.Add(Vector4.Create(t, 0, 1, 1));

this.vertices.Add(Vector4.Create(-t, 0, -1, 1));
this.vertices.Add(Vector4.Create(-t, 0, 1, 1));

var indexs = new int[] {
  0, 11, 5,
  0, 5, 1,
  0, 1, 7,
  0, 7, 10,
  0, 10, 11,
  1, 5, 9,
  5, 11, 4,
  11, 10, 2,
  10, 7, 6,
  7, 1, 8,
  3, 9, 4,
  3, 4, 2,
  3, 2, 6,
  3, 6, 8,
  3, 8, 9,
  4, 9, 5,
  2, 4, 11,
  6, 2, 10,
  8, 6, 7,
  9, 8, 1
};

第二步细分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
for (var i = 0; i < subdivisions; i++) {
    var newIndices = new List<int>();
    for (var j = 0; j < indexs.Length; j += 3) {
      var v1 = indexs[j];
      var v2 = indexs[j+1];
      var v3 = indexs[j+2];

      var a = this.GetMiddlePoint(v1, v2);
      var b = this.GetMiddlePoint(v2, v3);
      var c = this.GetMiddlePoint(v3, v1);

      newIndices.AddRange(new int[] { v1, a, c });
      newIndices.AddRange(new int[] { v2, b, a });
      newIndices.AddRange(new int[] { v3, c, b });
      newIndices.AddRange(new int[] { a, b, c });
    }
    indexs = newIndices.ToArray();
}
this.indices.AddRange(indexs);
1
2
3
4
5
6
7
8
// 获取两点的中点
private int GetMiddlePoint(int v1, int v2) {
		var p1 = this.vertices[v1];
		var p2 = this.vertices[v2];
		var mid = p1.Add(p2).MulSelf(0.5).NormalizeSelf();
		this.vertices.Add(mid);
		return this.vertices.Count - 1;
}

这样我们就得到了一个可以设置任意细分次数的球体mesh.

3. 计算uv和法线

球体的uv, 我们可以理解为经纬度.

image-20230522164449728

对于纬度, 也就是上到下, 我们可以用a角表示

image-20230522164145915

对于经度, 也就是左到右, 图片有点问题, 点应该在曲线上, 但是没啥影响. 也可以用, a和b的tan角表示

image-20230522164612912

代码:

1
2
var u = Math.Atan2(vector4.x, vector4.z) / (2.0f * Math.PI) + 0.5f
var v = Math.Asin(vector4.y) / Math.PI + 0.5f)

法线更简单了, 球心到顶点的连线即为法线:

1
var normal = vec.Normalize();

4. 问题:

实现完发现了一个问题, 在接缝处会出现明显的纹理被压缩的画面.

image-20230522165021187 image-20230522164959582

可以看到, 在最左边到最右边的接缝区域, 三角形纹理采样有问题.

这是因为会出现有三角形的两个顶点的uv坐标是跨越了左右边缘的情况, 比如顶点A的uv.x是0.95, 顶点B的uv.x是0.1. 那么这个时候我们期望的uv差值应该是从0.95 -> 1.0 -> 0.1这个方向的, 但是实际情况确是0.95 -> 0.5 -> 0.1这个方向, 这个方向就几乎涵盖了整个纹理, 所以会出现在接缝区域的纹理被压缩的感觉.

这种情况话, 把顶点B的uv.x改为1.1也是没用的, 因为对于下一个三角形, 本来是0.1 ~ 0.3, 现在变成1.1 ~ 0.3, 方向还是错误的.

解决办法:

没有想到特别好的解决办法, 目前想的方法是在接缝区域的三角形多生成一个顶点, 还是上面的例子, 顶点A和顶点B, 在顶点B的位置多加一个顶点C, 顶点C的uv.x为1.1, 顶点A和顶点C位接缝处的三角形, 而顶点B为下一个三角形的顶点.

这样就可以解决接缝处uv采样错误的问题了.