Javascript 如何使用三角形条带渲染球体

Javascript 如何使用三角形条带渲染球体,javascript,webgl,parametric-equations,Javascript,Webgl,Parametric Equations,我目前正在学习渲染形状WebGL(在本例中是一个球体),我了解球体上每个点的生成背后的数学原理。但在本教程中,作者定义了一种方法来查找所有顶点,另一种方法用于生成将构成球体的所有正方形 从本教程中所做的事情来看,有几件事情是不清楚的。首先,参数方程生成的顶点与生成的正方形(三角形条带)连接的准确程度如何?在使用生成的顶点做同样的事情之前,我已经用纯javascript和HTML5做了一个简单的程序,所以我不知道如何以及为什么它们必须与三角形条一起使用。另一个混淆点是关于生成正方形的函数: va

我目前正在学习渲染形状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 indexData=[];
对于(变量latNumber=0;latNumber
要生成每个正方形的第一个点(左上角的点),请执行以下操作:
var first=(latNumber*(longitudeBands+1))+longNumber

我不确定为什么在每一步中,晶格线的数量需要乘以经线的总数(加上1以完全环绕)


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

参数方程生成的顶点与生成的正方形(三角形条带)的连接情况如何

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

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

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

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

答:它们不是原始类型gl.triangle_STRIP中的三角形条带,而是由3个点定义的规则三角形

关于生成正方形的函数


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

谢谢您的回答!只有一个后续问题。因此,您似乎在说GPU将把存储在索引数据缓冲区中的六个点呈现为三角形(这是
gl.drawerelements()中使用的类型)
函数。但如果我想使用三角形条带来渲染形状,我需要将哪些点推入indexData数组,以及每次迭代需要多少点。六个点构成两个三角形。我不建议使用三角形条带,因为它们是连接的三角形,需要断开连接时需要进行工作。