OpenGL Mapping Textures to a Grid Stored Inside Vertex Array

Question

I have code that uses indices and vertices to draw a set of triangles in the shape of a grid. All the vertices are drawn using glDrawElements(). Now for each vertex I will set its corresponding Texture Coordinates to 0 or 1 for each set of triangles that form a square in the grid. Basically I want to draw a collage of random textures in each one of the "squares" (consisting of two triangles). I can do this using the glBegin() and glEnd() method calls inside a for loop using the fixed functional pipeline, but I would like to know how to do this using Vertex Arrays. A code view of what I am trying to do can be seen below.

#include "glwidget.h"

GLWidget::GLWidget(QWidget *parent, QGLWidget *glparent) :
    QGLWidget(parent, glparent),
    texture_ids_(NULL),
    col_(30),
    row_(30),
    step_(16.0)
{
    texture_ids_ = new GLuint[row_ * col_];
}

GLWidget::~GLWidget()
{
    if (texture_ids_) {
        glDeleteTextures(row_ * col_, texture_ids_);
    }
}

void GLWidget::resizeEvent(QResizeEvent * /*event*/) {
    initGL();

    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    glViewport(0, 0, width(), height());
    glOrtho(0, width(), 0, height(), -1, 1);
}

void GLWidget::initGL()
{
    makeCurrent();
    // Variables for vertices
    vertices_.clear();
    int32_t start_y = step_;
    int32_t start_x = step_;

    // Varaibles for indices
    indices_.clear();
    int32_t vertices_per_row = col_ + 1;
    int32_t vertex_num = 0;

    for (int32_t j = 0; j <= row_; ++j) {
        // Generate Vertices on row j
        for (int32_t i = 0; i <= col_; ++i) {
            vertices_.push_back(Vertex<GLfloat>((start_x + (i * step_)),
                (start_y + (j * step_)), 0.0f));
        }

        if (j == row_) {
            break;
        }

        // Generate Indices to get right vertices for traingle
        for (int32_t i = 0; i < col_; ++i) {
            indices_.push_back(Indices<GLuint>(vertex_num, (vertex_num + 1), 
                (vertex_num + vertices_per_row)));

            indices_.push_back(Indices<GLuint>((vertex_num + 1), 
                (vertex_num + vertices_per_row), 
                (vertex_num + vertices_per_row + 1)));

            vertex_num++;
        }
        vertex_num++;
    }
}


void GLWidget::textureInit()
{
    makeCurrent();
    for (int32_t i = 0; i < row_ * col_; ++i) {
        QImage tmpQImage(step_, step_, QImage::Format_ARGB32);
        tmpQImage = QGLWidget::convertToGLFormat(tmpQImage);

        QPainter tmpQPainter;
        tmpQPainter.begin(&tmpQImage);
            tmpQPainter.fillRect(QRect(0, 0, width(), height()),
                QColor(255, 0, 0));
            tmpQPainter.setRenderHint(QPainter::Antialiasing, true);
        tmpQPainter.end();

        glGenTextures(1, &texture_ids_[i]);
        glBindTexture(GL_TEXTURE_2D, texture_ids_[i]);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
        glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, tmpQImage.width(),
            tmpQImage.height(), 0, GL_RGBA, GL_UNSIGNED_BYTE,
            tmpQImage.bits());
    }
}

void GLWidget::updateGL() {
    if (first_render_) {
        textureInit();
        first_render_ = false;
    }

    glMatrixMode(GL_MODELVIEW);
    glScissor(0, 0, width(), height());
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glClearColor(0.5f, 0.5f, 0.5f, 0.5f);
    glLoadIdentity();

    glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
    glEnableClientState(GL_VERTEX_ARRAY);
    glVertexPointer(3, GL_FLOAT, 0, vertices_.data());
    glDrawElements(GL_TRIANGLES, indices_.size() * 3, GL_UNSIGNED_INT,
        indices_.data());
    glDisableClientState(GL_VERTEX_ARRAY);
    glPolygonMode(GL_FRONT_AND_BACK, GL_FILL);
}

How do you map multiple textures within the grid without a for loop? — Matthew Hoggan, Sep 09 '12 at 03:32
How do you map multiple textures within a grid *with* a for loop? Are you talking about drawing a quad, then binding a new texture, then drawing a new quad? Or are you just talking about drawing multiple independent quads? — Nicol Bolas, Sep 09 '12 at 03:39
Subversion commit messed up my code, I am correcting then will repost in a sec. I noticed the error in the code when I pasted it into the window. Give me 5 and I should have it back up. In a few words. I create the grid once, and store it into a std::vector. Then I use glDrawElements to render the vertices to the screen with one method call. Because of this I cannot load multiple textures and bind them to a pair of "GL_TRIANGLES". — Matthew Hoggan, Sep 09 '12 at 03:45

score 1 · Accepted Answer · answered Sep 09 '12 at 05:29

So, you want to draw using a lot of textures, but you obviously can't re-bind new textures as it is all drawn from one array. One solution to this is to use a texture atlas. It is one single bitmap with all your textures inside it. For example, if you have 16 different textures, you make a bitmap with 4x4 sections. Instead of using texture coordinates from 0 to 1, you will use 0 to 0.25, or 0.25 to 0.50, etc.

There are some disadvantages you need to be aware of:

If you want high resolution, the texture atlas will obviously be quite big.
Minifying and magnifying can play tricks with you. GL_NEAREST won't be any problem, but using GL_LINEAR or variants of mipmapping will average values around a pixel. This can lead to artifacts for pixels at the border of one sub image.
As the UV coordinates will vary more, fewer vertices will have common vertex data, leading to a increased number of indices.

I assume you have done profiling that shows that using multiple iterations of drawing, rebinding the texture for each, is not good enough. This obvious solution can be surprisingly effective.

What about Array Textures? Would this be an option? http://www.opengl.org/wiki/Array_Texture — Matthew Hoggan, Sep 09 '12 at 21:58
Yes, they'll do the same thing. You will need three UV numbers to use them (two for the coordinate, and one for the array index). But then, you will not have the disadvantage of border problems. — Lars Pensjö, Sep 10 '12 at 05:20

OpenGL Mapping Textures to a Grid Stored Inside Vertex Array

1 Answers1