OpenGL ES 2.0纹理映射在Raspberry Pi上填充Quad

时间:2016-03-01 20:21:10

标签: opengl-es opengl-es-2.0

我正在尝试设置我的顶点和纹理坐标,以便我有一个Quad(2个三角形)覆盖整个OpenGL窗口。我想在从相机接收图像时更新纹理。

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

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

以下是我生成纹理的方法:

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

这会产生以下图像: enter image description here

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

这会产生以下图像: enter image description here

1 个答案:

答案 0 :(得分:2)

这就是我用来在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)

我可能正在旋转图像以考虑我用作输入源的相机中的旋转,因此如果您看到图像呈现倒置,则可能需要调整顶点或坐标。