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

Question

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

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

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

下面是我生成纹理的方法：

    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,
};

结果如下图：

Answer 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)

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

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

OpenGL ES 2.0 Texture Mapping to Fill Quad on Raspberry Pi

opengl-es

opengl-es-2.0