为什么这个正方形网格没有正确绘制？

Question

为什么这个正方形网格没有正确绘制？

我有一个关于如何绘制网格的数组

// Here, 1 means a wall and 0 means an empty square
const int mapX = 8, mapY = 8, mapSize=mapX*mapY;
int map[] =
{
    1, 1, 1, 1, 1, 1, 1, 1,
    1, 0, 0, 0, 0, 0, 0, 1,
    1, 0, 0, 1, 0, 0, 0, 1,
    1, 0, 0, 0, 0, 1, 1, 1,
    1, 0, 0, 0, 0, 1, 0, 1,
    1, 0, 1, 0, 0, 0, 0, 1,
    1, 0, 0, 0, 0, 0, 0, 1,
    1, 1, 1, 1, 1, 1, 1, 1,
};

然后，我填充一个顶点和索引数组

typedef struct
{
    Vertex vertices[4];
} Tile;

for(int y = 0; y < mapY; y++)
{
    for(int x = 0; x < mapX; x++)
    {
        int x0 = x * mapSize;
        int y0 = y * mapSize;

        Tile tile = {
            (Vertex){{x0+1, y0+1, 0.0f}, {0.0f, 0.0f, 0.0f, 1.0f}},
            (Vertex){{x0+1, y0 + mapSize-1, 0.0f}, {0.0f, 0.0f, 0.0f, 1.0f}},
            (Vertex){{x0 + mapSize-1, y0 + mapSize-1, 0.0f}, {0.0f, 0.0f, 0.0f, 1.0f}},
            (Vertex){{x0 + mapSize-1, y0+1, 0.0f}, {0.0f, 0.0f, 0.0f, 1.0f}},
        };

        mapVertices[y*mapX + x] = tile;
    }
}

for(size_t i = 0; i < mapSize*6; i += 6)
{
    static int offset = 0;

    mapIndices[i + 0] = 0 + offset;
    mapIndices[i + 1] = 1 + offset;
    mapIndices[i + 2] = 2 + offset;

    mapIndices[i + 3] = 2 + offset;
    mapIndices[i + 4] = 3 + offset;
    mapIndices[i + 5] = 0 + offset;

    offset += 4;
}

最后在主循环中绘制

// Changing color for wall
for(int y = 0; y < mapY; y++)
{
    for(int x = 0; x < mapX; x++)
    {
        if(map[y*mapX + x] == 1)
        {
            memcpy(mapVertices[y*mapX + x].vertices[0].color, (vec4){1.0f, 1.0f, 1.0f, 1.0f}, sizeof(vec4));
            memcpy(mapVertices[y*mapX + x].vertices[1].color, (vec4){1.0f, 1.0f, 1.0f, 1.0f}, sizeof(vec4));
            memcpy(mapVertices[y*mapX + x].vertices[2].color, (vec4){1.0f, 1.0f, 1.0f, 1.0f}, sizeof(vec4));
            memcpy(mapVertices[y*mapX + x].vertices[3].color, (vec4){1.0f, 1.0f, 1.0f, 1.0f}, sizeof(vec4));
        }
    }
}

mat4 mapTransform;
glm_mat4_identity(mapTransform);
glm_translate(mapTransform, (vec3){0.0f, 0.0f, 0.0f});

mat4 mvp;
glm_mat4_mulN((mat4* []){&projectionMatrix, &viewMatrix, &mapTransform}, 3, mvp);

glUniformMatrix4fv(glGetUniformLocation(mapShaderProgram, "mvp"), 1, GL_FALSE, (float*)mvp);

bindVAO(&mapVertexAttributes);
bindVBO(&mapVertexAttributes);
glBufferSubData(GL_ARRAY_BUFFER, 0, sizeof(mapVertices), mapVertices);
glDrawElements(GL_TRIANGLES, sizeof(mapIndices)/sizeof(mapIndices[0]), GL_UNSIGNED_INT, 0);

0,0 在屏幕左下方。

网格绘制不正确。正方形不在数组中指定的正确位置。 如果您并排查看图像和阵列，您会注意到它

为什么会这样？ 我该如何解决这个问题？

Answer 1

如果你仔细观察你的输出，你会发现屏幕上的方块与数组的内容匹配，但有反线。

这是因为屏幕上的坐标以左下角的

(0,0)

开头，而在您的数组中

(0.0)

在左上角的元素中。

您需要在遍历数组时转换 y 坐标：

只需更改您条件下的单元格计算：

for(int y = 0; y < mapY; y++)
{
    for(int x = 0; x < mapX; x++)
    {
        if(map[y*mapX + x] == 1)
        {
            memcpy(mapVertices[y*mapX + x].vertices[0].color, (vec4){1.0f, 1.0f, 1.0f, 1.0f}, sizeof(vec4));
            memcpy(mapVertices[y*mapX + x].vertices[1].color, (vec4){1.0f, 1.0f, 1.0f, 1.0f}, sizeof(vec4));
            memcpy(mapVertices[y*mapX + x].vertices[2].color, (vec4){1.0f, 1.0f, 1.0f, 1.0f}, sizeof(vec4));
            memcpy(mapVertices[y*mapX + x].vertices[3].color, (vec4){1.0f, 1.0f, 1.0f, 1.0f}, sizeof(vec4));
        }
    }
}

到

        if(map[(mapY-y-1)*mapX + x] == 1)