Libgdx多边形三角剖分

Question

好吧，我有一个多边形(简单但凹形)，我试图将其切成三角形以使其与其他多边形碰撞。

我知道我的多边形是凹的，所以我决定使用 LibGDX EarClippingTriangulator 来设法将其切割成三角形。

因此，通过这段代码，我得到了三角形顶点:

public void triangulate()
    {
        Vector<float[]> trianglesVertices = new Vector<float[]>();
        ShortArray pointsCoords = new ShortArray();
        EarClippingTriangulator triangulator = new EarClippingTriangulator();

        // Cut in triangles
        pointsCoords = triangulator.computeTriangles(this.getTransformedVertices());

        // Make triangles
        for (int i = 0; i < pointsCoords.size / 6; i++)
        {
            trianglesVertices.add(new float[] {
                    pointsCoords.get(i), pointsCoords.get(i+1),
                    pointsCoords.get(i+2), pointsCoords.get(i+3),
                    pointsCoords.get(i+4), pointsCoords.get(i+5),
            });
            Polygon triangle = new Polygon(trianglesVertices.get(i));
            triangles.add(triangle);
        }

        System.out.printf("Triangulation made %d triangles.\n", pointsCoords.size / 6);
    }

但是当我尝试绘制我刚刚制作的三角形时，它们只是堆叠在 0,0 坐标中..而且，所有三角形看起来几乎相同，我的意思是它们都有相同的方向，这正常吗？

我没有找到太多关于 libgdx 的三角剖分使用的信息你能帮忙吗？

(抱歉我的英语我是法国人，抱歉没有照片，我在这里太年轻了)

编辑:这是我的多边形(CCW)

hitbox.setVertices(new float[]{  
                this.getX() + 13, this.getY() - 60,
                this.getX() + 16, this.getY() - 74,
                this.getX() + 39, this.getY() - 74,
                this.getX() + 45, this.getY() - 105,
                this.getX() + 81, this.getY() - 105,
                this.getX() + 88, this.getY() - 74,
                this.getX() + 108, this.getY() - 74,
                this.getX() + 114, this.getY() - 61,
                this.getX() + 106, this.getY() - 30, // Top right
                this.getX() + 101, this.getY() - 29,
                this.getX() + 101, this.getY() - 57,
                this.getX() + 83, this.getY() - 62,
                this.getX() + 75, this.getY() - 50,
                this.getX() + 65, this.getY() - 4, // Top mid
                this.getX() + 62, this.getY() - 4, // Top mid
                this.getX() + 52, this.getY() - 50,
                this.getX() + 44, this.getY() - 62,
                this.getX() + 25, this.getY() - 56, 
                this.getX() + 25, this.getY() - 30,
                this.getX() + 19, this.getY() - 30,  // Top left
                });

编辑2:现在我有足够的点来向您展示这里的多边形

Answer 1

这里的问题是EarClippingTriangulator.computeTriangles返回的输出与您预期的不同。它返回一个索引数组，其中每个索引代表您最初传入的数组中的一个顶点。因此，如果您传入一个大小为 8 的数组，则表示 4 个顶点；返回的数组大小为 6(三角形 1 有 3 个顶点，三角形 2 有 3 个顶点)。

假设您有一个 2 x 3 的矩形，其左下角位于 (5, 5)。你的顶点将是:

• 顶点 0:(5, 5)
• 顶点 1:(7, 5)
• 顶点 2:(7, 10)
• 顶点 3:(5, 10)

您可以将它们展平为一个数组并将它们传递到 computeTriangles如:

[5、5、7、5、7、10、5、10]

返回的数组看起来像这样:

[0, 3, 2, 2, 1, 0]

返回数组中的每个一组三个索引形成一个三角形。每个值都代表您传入的数据中的顶点索引。在此示例中，输出将告诉您使用这些顶点:

• 三角形 1:顶点 0、顶点 3、顶点 2
• 三角形 2:顶点 2、顶点 1、顶点 0

所以你需要绘制这些三角形:

• 三角形 1:(5, 5) -> (5, 10) -> (7, 10)
• 三角形 2:(7, 10) -> (7, 5) -> (5, 5)

请注意，这不一定是您通过我提供的输入获得的实际输出，它只是一个示例，旨在说明您应该如何使用返回的数据。

这是我最终得到的代码，它将正确绘制 Polygon实例，尽管您可以使用任何正确制定的​​顶点数组执行相同的操作:

private void drawFilledPolygon(Polygon polygon, Color color) {
    shapeRenderer.begin(ShapeRenderer.ShapeType.Filled);
    shapeRenderer.setColor(color);

    float[] vertices = polygon.getTransformedVertices();

    // NOTE: you probably don't want to create a new EarClippingTriangulator each frame
    ShortArray triangleIndices = new EarClippingTriangulator().computeTriangles(vertices);
    for (int i = 0; i < triangleIndices.size; i += 3) {
        shapeRenderer.triangle(
            vertices[triangleIndices.get(i) * 2], vertices[triangleIndices.get(i) * 2 + 1],
            vertices[triangleIndices.get(i + 1) * 2], vertices[triangleIndices.get(i + 1) * 2 + 1],
            vertices[triangleIndices.get(i + 2) * 2], vertices[triangleIndices.get(i + 2) * 2 + 1]
        );
    }

    shapeRenderer.end();
}