OpenGL ES 2.0 纹理映射在 Raspberry Pi 上填充四边形答案

【问题标题】：OpenGL ES 2.0 Texture Mapping to Fill Quad on Raspberry PiOpenGL ES 2.0 纹理映射在 Raspberry Pi 上填充四边形
【发布时间】：2016-03-02 05:08:29
【问题描述】：

我正在尝试设置我的顶点和纹理坐标，以便我有一个覆盖整个 OpenGL 窗口的四边形（2 个三角形）。然后，我想在从相机接收图像时更新纹理。

除了我的流式纹理永远不会填满整个屏幕并且纹理像素在预期纹理之外重复（见下图）之外，它正在工作。

如何设置我的顶点和纹理坐标，以便我的纹理将填充四边形而不重复？

这是我生成纹理的方式：

    glGenTextures(1, &m_dataFrame);
    glBindTexture(GL_TEXTURE_2D, m_dataFrame);
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, WIDTH, HEIGHT, 0, GL_RGBA, GL_UNSIGNED_BYTE, frame.bits());
    // CUSTOM
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

初步尝试：

// Setup the vertices and texture coordinates
float scaler = 1.0f;
static const GLfloat squareVertices[] = {
    -(1.0f/scaler), -(1.0f/scaler), 0.0f, // First triangle bottom left
    (1.0f/scaler), -(1.0f/scaler), 0.0f,
    -(1.0f/scaler),  (1.0f/scaler), 0.0f,
    (1.0f/scaler),  -(1.0f/scaler), 0.0f, // Second triangle bottom right
    (1.0f/scaler),  (1.0f/scaler), 0.0f,
    -(1.0f/scaler),  (1.0f/scaler), 0.0f,
};
static const GLfloat textureVertices[] = {
    -1.0f, -1.0f,
    1.0f, -1.0f,
    -1.0f, 1.0f,
    1.0f, -1.0f,
    1.0f, 1.0f,
    -1.0f, 1.0f,
};

这会产生以下图像：

// Setup the vertices and texture coordinates
float x = 1.0f;
float y = 1.0f;
static const GLfloat squareVertices[] = {
    -(x*2), -(y*2), 0.0f, // First triangle bottom left
    (x*2), -(y*2), 0.0f,
    -(x*2),  (y*2), 0.0f,
    (x*2),  -(y*2), 0.0f, // Second triangle bottom right
    (x*2),  (y*2), 0.0f,
    -(x*2),  (y*2), 0.0f,
};
static const GLfloat textureVertices[] = {
    -1.0f, -1.0f,
    1.0f, -1.0f,
    -1.0f, 1.0f,
    1.0f, -1.0f,
    1.0f, 1.0f,
    -1.0f, 1.0f,
};

这会产生以下图像：

【问题讨论】：

纹理坐标的设置有可能被破坏了。但是您没有显示发生这种情况的代码。

标签： opengl-es opengl-es-2.0

【解决方案1】：

这是我在 Raspberry Pi 上渲染纹理四边形时使用的（在 Swift 中，但语法类似于您用于 C 的语法）。设置纹理参数：

    glEnable(GLenum(GL_TEXTURE_2D))
    glGenTextures(1, &cameraOutputTexture)
    glActiveTexture(GLenum(GL_TEXTURE0));
    glBindTexture(GLenum(GL_TEXTURE_2D), cameraOutputTexture)
    glTexParameteri(GLenum(GL_TEXTURE_2D), GLenum(GL_TEXTURE_MIN_FILTER), GL_NEAREST)
    glTexParameteri(GLenum(GL_TEXTURE_2D), GLenum(GL_TEXTURE_MAG_FILTER), GL_NEAREST)

上传纹理：

    glActiveTexture(GLenum(GL_TEXTURE0))
    glBindTexture(GLenum(GL_TEXTURE_2D), cameraOutputTexture)
    glTexImage2D(GLenum(GL_TEXTURE_2D), 0, GL_RGB, 1280, 720, 0, GLenum(GL_RGB), GLenum(GL_UNSIGNED_BYTE), buffers[Int(currentBuffer)].start)

并渲染它：

glClear(GLenum(GL_COLOR_BUFFER_BIT))
shader.use()

let squareVertices:[GLfloat] = [
    -1.0, -1.0,
    1.0, -1.0,
    -1.0,  1.0,
    1.0,  1.0,
]

let textureCoordinates:[GLfloat] = [
    0.0, 1.0,
    1.0, 1.0,
    0.0, 0.0,
    1.0, 0.0,
]

glVertexAttribPointer(positionAttribute, 2, GLenum(GL_FLOAT), 0, 0, squareVertices)
glVertexAttribPointer(textureCoordinateAttribute, 2, GLenum(GL_FLOAT), 0, 0, textureCoordinates)

glUniform1i(GLint(textureCoordinateAttribute), 1)

glDrawArrays(GLenum(GL_TRIANGLE_STRIP), 0, 4)
eglSwapBuffers(display, surface)

我可能会旋转图像以考虑我用作输入源的相机中的旋转，因此如果您看到图像渲染颠倒，您可能需要调整顶点或坐标。

【讨论】：