如何渲染带有三角形条带的球体
How to render a sphere with triangle strips
我目前正在研究 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 以完全环绕)。
这两个函数的代码在教程的底部。在这种情况下使用三角形带的一般解释也可能会有所帮助,谢谢。
参数方程生成的顶点与生成的正方形(三角带)的连接到底是怎样的?
A:顶点基本上就是点。所以它基本上使用数学生成点。引自教程:
"对于半径为 r、具有 m 个纬度带和 n 个经度带的球体,我们可以通过将 0 到 π 的范围拆分为 θ 的一系列值来生成 x、y 和 z 的值m 个部分,并通过将范围 0 到 2π 分成 n 个部分来获取 φ 的值范围,然后计算:
x = r sinθ cosφ
y = 余弦θ
z = r sinθ sinφ"
如何以及为什么必须将它们与三角条一起使用
A:它们不是原始类型gl.TRIANGLE_STRIP中的三角形STRIPS,而只是用3个点定义的规则三角形。
关于生成正方形的函数
A:它们本身不是生成方块,而是使用参数方程生成的点来创建三角形供GPU渲染。您在 OP 中显示的代码基本上将一个正方形分成 2 个三角形。
我目前正在研究 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 以完全环绕)。
这两个函数的代码在教程的底部。在这种情况下使用三角形带的一般解释也可能会有所帮助,谢谢。
参数方程生成的顶点与生成的正方形(三角带)的连接到底是怎样的?
A:顶点基本上就是点。所以它基本上使用数学生成点。引自教程:
"对于半径为 r、具有 m 个纬度带和 n 个经度带的球体,我们可以通过将 0 到 π 的范围拆分为 θ 的一系列值来生成 x、y 和 z 的值m 个部分,并通过将范围 0 到 2π 分成 n 个部分来获取 φ 的值范围,然后计算:
x = r sinθ cosφ y = 余弦θ z = r sinθ sinφ"
如何以及为什么必须将它们与三角条一起使用
A:它们不是原始类型gl.TRIANGLE_STRIP中的三角形STRIPS,而只是用3个点定义的规则三角形。
关于生成正方形的函数
A:它们本身不是生成方块,而是使用参数方程生成的点来创建三角形供GPU渲染。您在 OP 中显示的代码基本上将一个正方形分成 2 个三角形。