如何使这个多边形呈现​​为完整的形状而不是新月形?

时间:2013-10-28 21:44:51

标签: javascript webgl

我正在使用以下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

任何人都可以看到我做错了什么吗?

1 个答案:

答案 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