纹理坐标在 OpenGL ES 2.0 中无法正常工作

Question

我正在尝试将大图像的一部分应用于 OpenGL ES 2.0 中的矩形

我有这个大纹理表或精灵表。每张图片都是 32x32。完整图像为 192x32。

加载纹理

glGenTextures(1, &texture->textureId);
bindTexture(texture);

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);

stbi_set_flip_vertically_on_load(true);

unsigned char* textureData = stbi_load(texturePath, &texture->width, &texture->height, &texture->channels, 0);
if(textureData)
{
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, texture->width, texture->height, 0, GL_RGBA, GL_UNSIGNED_BYTE, textureData);
}
else
{
    log_error("Couldn't load texture: %s", texturePath);
}

stbi_image_free(textureData);

所以，为了从此精灵表中获取第一个精灵，我使用 ((1*32)/192) 并获取这些纹理坐标

static Vertex vertices[4] =
{
//  Position               Color                          Tex Coords
    {{{1.0f, 1.0f, 0.0f}}, {{1.0f, 1.0f, 0.0f, 1.0f}}, {{0.16f, 0.16f}}},
    {{{1.0f, -1.0f, 0.0f}}, {{1.0f, 1.0f, 0.0f, 1.0f}}, {{0.16, 0.0f}}},
    {{{-1.0f, -1.0f, 0.0f}}, {{1.0f, 1.0f, 0.0f, 1.0f}}, {{0.0f, 0.0f}}},
    {{{-1.0f, 1.0f, 0.0f}}, {{1.0f, 1.0f, 0.0f, 1.0f}}, {{0.0f, 0.16f}}},
};

但是我没有得到预期的输出。相反，它将完整的精灵表应用到矩形上

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

Answer 1

顶点的纹理坐标似乎不对。由于每个精灵的高度为 32 像素，整个图像的高度也为 32 像素，因此您可以使用 1.0 作为高度。我猜你的纹理坐标的 x 分量似乎是正确的。

我在一个小游戏上有类似的方法，顶点看起来像这样：

    float width = 1.0f / (float)m_spriteCount;
    float widthMin = m_spritePos * width;
    float widthMax = (m_spritePos + 1) * width;

    m_vertices = {
        //                x,                   y,          z,       w,    h
        size.x + position.x, size.y + position.y, position.z, widthMax, 1.0f,       // top right
        size.x + position.x,          position.y, position.z, widthMax, 0.0f,       // bottom right
                 position.x,          position.y, position.z, widthMin, 0.0f,       // bottom left
                 position.x, size.y + position.y, position.z, widthMin, 1.0f        // top left
    };

m_spriteCount

是我在纹理中的图像数量（在您的情况下为 6），

m_spritePos

是我正在渲染的当前纹理位置（从 0 - 5）。

我不使用任何颜色数据，因为纹理已经包含颜色（很明显）而且我不想混合一些颜色而只渲染纹理颜色。