1

我目前正在阅读有关渲染形状 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 以完全环绕)。

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

4

1 回答 1

2

由参数方程生成的顶点究竟是如何连接到正在生成的正方形(三角形条带)的?

A:顶点基本上就是点。所以它基本上使用数学生成点。引用教程:

“对于半径为 r 的球体,具有 m 个纬度带和 n 个经度带,我们可以通过将 0 到 π 的范围分成 m 个部分来获取 θ 的值范围,并取通过将 0 到 2π 的范围拆分为 n 个部分,然后只计算:

x = r sinθ cosφ y = r cosθ z = r sinθ sinφ"

如何以及为什么必须将它们与三角条结合使用

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

关于生成正方形的函数

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

于 2015-11-18T22:08:25.800 回答