1

次の 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

私が間違っているのは誰でもわかりますか？

4

1 に答える 1

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 つのポイントを固定し、他の 2 つのポイントをエッジの周りに移動します)。

(V1, V2, V3)
(V1, V3, V4)
(V1, V4, V5)

これには、参照用のサンプル画像があります: Drawing GL Polygons

于 2013-10-28T21:53:28.423 に答える