Question

我目前正在通过this tutorial渲染形状WebGL（在这种情况下特别是一个球体），我理解球体上每个点生成背后的数学。但是，在教程中，作者定义了一种方法来查找所有顶点，另一种方法来生成将构成球体的所有方块。

在本教程中所做的一些事情尚不清楚。首先，参数方程生成的顶点到底是如何连接到正方形（三角形条带）生成的？在使用生成的顶点做同样的事情之前，我已经用普通的javascript和HTML5做了一个简单的骨头程序，所以我没有看到它们如何以及为什么必须与三角形条带一起使用。另一个混淆点是关于生成正方形的函数：

 var indexData = [];
    for (var latNumber = 0; latNumber < latitudeBands; latNumber++) {
      for (var longNumber = 0; longNumber < longitudeBands; longNumber++) {
        var first = (latNumber * (longitudeBands + 1)) + longNumber;
        var second = first + longitudeBands + 1;
        indexData.push(first);
        indexData.push(second);
        indexData.push(first + 1);

        indexData.push(second);
        indexData.push(second + 1);
        indexData.push(first + 1);
      }
    }

要生成每个方格的第一个点（左上角的点），请执行以下操作：var first = (latNumber * (longitudeBands + 1)) + longNumber;

我不确定为什么需要在每一步中将经度线的数量乘以经度线的总数（加上1到完全环绕）。

这两个函数的代码都在本教程的底部。在这种情况下使用三角形条带的一般解释也可能有所帮助，谢谢。

Answer 1

参数方程生成的顶点到底是如何连接到正方形（三角形条）？

答：顶点基本上是点。所以它基本上使用数学生成点。引自教程：

“对于半径为r的球体，具有m个纬度带和n个经度带，我们可以通过将范围0到π分成m个部分来获取θ的值范围来生成x，y和z的值通过将范围0到2π分成n个部分来获取φ的一系列值，然后计算：

x =rsinθcosφ y =rcosθ z =rsinθsinφ“

如何以及为什么它们必须与三角形条带一起使用

答：它们不是原始类型gl.TRIANGLE_STRIP中的三角形STRIPS，而只是用3个点定义的正三角形。

关于生成正方形的函数

答：它们本身不是生成方块，而是使用参数方程生成的点来创建GPU渲染的三角形。您在OP中显示的代码基本上将一个正方形划分为2个三角形。

如何渲染带有三角形条带的球体

1 个答案: