我正在使用以下javascript函数创建一个顶点数组,以便在创建形状时传递给缓冲区。它应该计算n边正多边形的顶点,第一个顶点位于原点。然后创建缓冲区并将其作为属性存储在传递给函数的形状对象上。
var vertices = [];
// Create each vertex by calculating the position of the new vertex relative
// to the old then adding on to the old position
// Begin by setting up the first vertex at the origin
vertices [0] = 0.0;
vertices [1] = 0.0;
vertices [2] = 0.0;
var oldX = 0.0;
var oldY = 0.0;
for (var i = 0; i < shape.numberOfSides; i++) {
var theta = i * 2 * Math.PI / shape.numberOfSides;
var y = shape.sideLength * Math.sin(theta);
var x = shape.sideLength * Math.cos(theta);
y += oldY;
x += oldX;
var start = (i+1) * 3;
vertices [start] = x;
vertices [start + 1] = y;
vertices [start + 2] = 0.0;
oldX = x;
oldY = y;
}
// Create a buffer and store the vertices on it
shape.verticesBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, shape.verticesBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
这对三角形来说绝对正常,但对于五边形或以上形状来说,形状并不完整 - 它看起来像新月形。我在下面列出了工作三角形和非工作六边形的截图,两者都是用相同的功能创建的。
http://i39.tinypic.com/ndoj8z.png
任何人都可以看到我做错了什么吗?
答案 0 :(得分:3)
绘制1个三个顶点,你应该知道 - 现在你正在做这个:
(V1, V2, V3) -> Triangle along an edge
(V2, V3, V4) -> Another triangle along an edge.
(V3, V4, V5) -> Another triangle along an edge.
当你这样做时,没有三角形穿过中心,你会得到你发布的新月。
要正确绘制,你需要这样做:(固定每个三角形的1个点并移动边缘周围的其他两个点)
(V1, V2, V3)
(V1, V3, V4)
(V1, V4, V5)
这是一个示例图片供参考:Drawing GL Polygons