Question

我在WebGL中渲染多面体，我想知道是否有更高效且更不容易出错的方法来生成顶点位置和法线。

理想情况下，我会向GPU发送仅包含索引的缓冲区，并计算顶点着色器中的每顶点位置和法线。顶点着色器看起来像这样：

uniform mat4 transform;

uniform ??? polyhedra; // some kind of representation of the polyhedra type    

attribute int index;

varying vec4 normal;
varying vec2 uv;

vec3 calculatePosition() { /* mathemagic w/index and polyhedra */ };
vec3 calculateNormal  () { /* mathemagic w/index and polyhedra */ };
vev2 calculateUV      () { /* mathemagic w/index and polyhedra */ };

void main() {
  gl_Position = transform * vec4(calculatePosition(), 1.0);
  normal      = transform * vec4(calculateNormal(), 1.0);
  uv          = calculateUV();
}

然后将一个顶点索引数组发送给index。对于每个面具有两个三角形并且具有平面着色的立方体（这很重要，因为这意味着不能在不同面之间共享顶点，因为法线是不同的每个面）我会发送一个索引缓冲区[0 .. 36）（6面* 2个三角形*每个3个顶点）。

这可能是有效的，没有英勇的努力吗？

WebGL本质上是OpenGL ES 2.0，因此没有几何着色器。

Answer 1

当然，这是可能的......但是可能不实用。

您无法生成顶点，但您至少可以使用顶点着色器在程序上用值填充它们。一种方法可能是使用FBO并计算片段着色器中的位置，然后使用顶点着色器使用纹理查找来获取位置/法线/ uv。这是您可以做的最好的事情，因为OpenGL ES 2.0缺乏转换反馈来持久存储数据。

但是，如果你只是一次生成这些多面体，那么首先没有动力卸载到GPU。 WebGL可在各种设备上运行，其中一些设备的吞吐量高于其他设备。但在所有情况下，从顶点缓冲区读取顶点位置比纹理查找更快。如果WebGL有转换反馈，我可能会另有建议，但这听起来像是浪费时间。

用于枚举多面体顶点位置，法线和纹理坐标GLSL的方法

1 个答案: