用图块图像渲染四边形? [英] Rendering quad with tiling image?

问题描述

我正在学习如何在OpenGL中纹理四边形.想法是让图像在整个四边形上重复，但是我将图像拉伸了，形成四边形的两个三角形是可见的.

I am learning how to texture a quad in OpenGL. The idea is to have the image repeated across the whole quad, nevertheless I am getting the image stretched and the two triangles forming the quad are visible.

我想念什么?代码如下所示

What am I missing? The code looks like follows

void GLViewer::initializeGL()
{
    float vertices[] =
    {
        -0.5, 0.0, 0.0,
         0.5, 0.0, 0.0,
         0.5, 0.5, 0.0
    };

    // Setup viewport
    glViewport(0, 0,this->width(), this->height());

    // OpenGL configuration
    glClearColor(0.0f,0.0f,0.0f,1.0f);

    // Setup shaders
    m_triangleShader.addShaderFromSourceFile(QGLShader::Vertex, ":/vshader.glsl");
    m_triangleShader.addShaderFromSourceFile(QGLShader::Fragment, ":/fshader.glsl");
    m_triangleShader.link();

    glGenVertexArrays(1, &m_VAO);
    glBindVertexArray(m_VAO);

    glPointSize(10);

    glGenBuffers(1, &m_VBO);
    glBindBuffer(GL_ARRAY_BUFFER, m_VBO);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
    glEnableVertexAttribArray(0);
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, 0);

    glBindBuffer(GL_ARRAY_BUFFER, 0);
    glBindVertexArray(0);

    float quad[] =
    {
        -1.0, -1.0,
         1.0, -1.0,
        -1.0,  1.0,
         1.0,  1.0
    };

    float uv[] =
    {
        0.0, 0.0,
        1.0, 0.0,
        1.0, 1.0,
        0.0, 1.0
    };

    m_backgroundShader.addShaderFromSourceFile(QGLShader::Vertex, ":/vbackground.glsl");
    m_backgroundShader.addShaderFromSourceFile(QGLShader::Fragment, ":/fbackground.glsl");
    m_backgroundShader.link();
    glGenVertexArrays(1, &m_backgroundVAO);
    glBindVertexArray(m_backgroundVAO);

    glGenBuffers(1, &m_quadVBO);
    glBindBuffer(GL_ARRAY_BUFFER, m_quadVBO);
    glBufferData(GL_ARRAY_BUFFER, sizeof(quad), quad, GL_STATIC_DRAW);
    glEnableVertexAttribArray(0);
    glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 0, 0);

    glGenBuffers(1, &m_uvVBO);
    glBindBuffer(GL_ARRAY_BUFFER, m_uvVBO);
    glBufferData(GL_ARRAY_BUFFER, sizeof(uv), uv, GL_STATIC_DRAW);
    glEnableVertexAttribArray(1);
    glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 0, 0);

    glGenTextures(1, &m_textureID);
    glBindTexture(GL_TEXTURE_2D, m_textureID);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    QImage image(":/background.png");
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, image.width(), image.height(),
                 0, GL_RGBA, GL_UNSIGNED_BYTE, image.bits());

    glBindTexture(GL_TEXTURE_2D, 0);
    glBindBuffer(GL_ARRAY_BUFFER, 0);
    glBindVertexArray(0);
}

void GLViewer::paintGL()
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glDepthMask(GL_TRUE);
    glEnable(GL_DEPTH_TEST);

    m_backgroundShader.bind();
    glBindVertexArray(m_backgroundVAO);
    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_2D, m_textureID);
    glUniform1i(glGetUniformLocation(m_backgroundShader.programId(),"tex"),0);
    glDrawArrays(GL_TRIANGLE_STRIP,0,4);

    m_triangleShader.bind();
    glBindVertexArray(m_VAO);
    glDrawArrays(GL_TRIANGLES, 0, 3);

    update();
}

推荐答案

为什么期望您使用的代码将纹理重复(以及多少次)?

Why do you expect your texture to be repeated (and how many times) by the code you are using?

但是，按原样的代码与您的观察一致.您正在使用[0,1]范围内的texcoords，因此，如果在对纹理进行采样之前未对texcoords进行调整，则应该只看到拉伸到四边形的图像.您可能通过到目前为止尚未粘贴的着色器执行此操作.如果要使纹理显示沿u维度平铺n倍和沿v方向平铺m倍的时间，则需要将[0,n]用于u范围，将[0,m]用于范围.

However, the code as-is is consistent with your observation. You are using the texcoords in the range [0,1], so if you are not tweaking the texcoords before sampling the texture, you should only see the image strechted to the quads. You might do that via the shaders you have not pasted so far. If you want the texture to appear n-times tiled along the u dimension and m times along v, you need to use [0,n] for the u range and [0,m] for the v range, respectively.

第二个问题是您的texcoords与您的几何图形不匹配.这可能导致您描述为可见形成四边形的两个三角形".您的两个三角形不会在纹理空间中建立四边形 ，您应该交换最后两行:

The second issue is that your texcoords do not match your geometry. This is probably causing what you describe as "the two triangles forming the quad are visible". Your two trianges do not build up the quad in texture space you'd expect, you should swap the last two lines:

float uv[] =
{
    0.0, 0.0,
    1.0, 0.0,
    1.0, 1.0,      /* should be 0.0, 1.0 */
    0.0, 1.0       /* should be 1.0, 1.0 */
};

这篇关于用图块图像渲染四边形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！