OpenGL ES 2.0 обертка для Qt

Давным давно, когда я писал игру под адроид, нужно было мне разобраться с OpenGL ES 1.1. Вроде бы ничего сложного, 2D графика, нужно было просто рисовать PNG изображения, с возможностью масштабирования, поворота, добавления прозрачности. Тогда я потратил на это около недели, а может даже и больше, уже не помню. Было сложно, поскольку с OpenGL я никогда дела не имел. Сильно помог исходный код libgdx, в котором, кстати, все низкоуровневые OpenGL функции спрятаны от разработчика.
Времена меняются, на смену OpenGL ES 1.1 приходит версия 2.0, которая довольно сильно отличается. Приходится разбираться, что это за шейдеры, и почему без них никак. На это опять уходит несколько дней. Казалось бы, должно быть легко, ведь 2D, все просто. Например, если использовать QML, это делается вот так:

Image
{
    source: "brick.png"
    opacity: 0.8
    rotation: 90
}

А если писать все на С++, то получается много-много строк кода, которые сложно понять, если не знаком с OpenGL. Я пытался найти какую-нибудь библиотеку, обертку над OpenGL, как libgdx, только для Qt, но безуспешно. Поэтому решил, после того, как у меня все заработает, я напишу небольшую обертку, которая прячет все OpenGL вызовы и позволяет удобно работать с 2D графикой.

Код обертки на GitHub
Пример использования на GitHub

Для того, чтобы использовать обертку в своем приложении, необходимо добавить одну строчку в .pro файл:

include (opengl-qt/opengl-qt.pri)

Унаследовать окно приложения от OpenGLQt::Widget:

class Widget : public OpenGLQt::Widget
{
public:
    Widget();

protected:
    virtual void drawSprites();
};

Передать в конструкторе путь к файлу и количество изображений в нем. Запустить таймер:

Widget::Widget()
    : OpenGLQt::Widget(10, "spritesheet.png")
    , m_counter(0)
{
    startTimer();
}

Переопределить метод drawSprites():

void Widget::drawSprites()
{
    static Sprite apple = {86, 118, 30, 30}; // участок изображения, который нужно нарисовать
    static Color color = {1, 1, 1, 1};       // оттенок цвета
    static DrawSpriteArgs args;              
    args.sprite = apple;
    args.color = color;
    args.x = 10;                             // центр изображения по оси х
    args.y = 15;                             // и по оси у
    args.angle = 3.14f / 2.0f;               // поворот на 90 против часовой стрелки
    args.scaleX = 0.5f;                      // уменьшение на 50% по оси х
    args.scaleY = -1.0f;                     // зеркальное отражение по оси у

    drawSprite(args);
}

И все. Довольно легко, правда? Если вы хотите использовать эту обертку, вам нужно будет вместить всю свою графику в один PNG файл. Это можно сделать, например, с помощью TexturePacker. Смысл этого в увеличении быстродействия: текстура загружается в видеопамять один раз, при старте, и остается там до конца работы программы. Когда вы хотите нарисовать изображение, вам нужно указать его координаты в этой текстуре.


Немного OpenGL подробностей. Vertex shader:

uniform mat4 mvp_matrix;
attribute vec4 a_position;
attribute vec2 a_texcoord;
attribute vec4 a_color;
varying vec4 v_color;
varying vec2 v_texcoord;
void main()
{
    gl_Position = mvp_matrix * a_position;
    v_texcoord = a_texcoord;
    v_color = a_color;
}

Fragment shader:

#ifdef GL_ES
#define LOWP lowp
precision mediump float;
#else
#define LOWP 
#endif
varying vec2 v_texcoord;
varying LOWP vec4 v_color;
uniform sampler2D texture;
void main()
{
    gl_FragColor = v_color * texture2D(texture, v_texcoord);
}

Большинство OpenGL функциий вызывается один раз при инициализации программы. После этого запускается таймер, который 60 раз в секунду вызывает обновление экрана:

void Widget::startTimer()
{
    m_timer.start(1000.0f / 60.0f, this);
}

void Widget::timerEvent(QTimerEvent *)
{
    updateGL();
}

void Widget::paintGL()
{
    beginDraw();
    drawSprites();
    endDraw();
}

void Widget::beginDraw()
{
    m_idx = 0;
    glClear(GL_COLOR_BUFFER_BIT);
    glClearColor(m_background.r,
                 m_background.g,
                 m_background.b,
                 m_background.a);
}

void Widget::endDraw()
{
    glDrawArrays(GL_TRIANGLES, 0, m_idx / 2);
}

Все рисование происходит в методе drawSprites(), пример которого приведен выше. Оно заключается в заполнении структуры DrawSpriteArgs и вызове метода drawSprite для каждого изображения, которое необходимо нарисовать. Если хочется чего-то нестандартного, например, вращать изображение не вокруг центра, можно вручную заполнять массивы координат, текстур, и цветов. Максимальный размер массивов необходимо задать при старте программы в конструкторе, потому что QVector при увеличении может переехать на другой участок памяти, и нужно будет оповестить об этом OpenGL:

    int vertexLocation = m_program->attributeLocation("a_position");
    m_program->enableAttributeArray(vertexLocation);
    glVertexAttribPointer(vertexLocation, 2, GL_FLOAT, GL_FALSE, 0, &m_verts[0]);

    int texcoordLocation = m_program->attributeLocation("a_texcoord");
    m_program->enableAttributeArray(texcoordLocation);
    glVertexAttribPointer(texcoordLocation, 2, GL_FLOAT, GL_FALSE, 0, &m_texCoords[0]);

    int colorLocation = m_program->attributeLocation("a_color");
    m_program->enableAttributeArray(colorLocation);
    glVertexAttribPointer(colorLocation, 4, GL_FLOAT, GL_FALSE, 0, &m_colors[0]);

Проекционная матрица была взята отсюда. Она устанавливается во время изменения размеров окна:

void Widget::resizeGL(int w, int h)
{
    glViewport(0, 0, w, h);

    QMatrix4x4 mat(
                2.0f/w, 0, 0, -1,
                0, 2.0f/h, 0, -1,
                0, 0, -1, 0,
                0, 0, 0, 1
                );

    m_program->setUniformValue("mvp_matrix", mat);
}

Вот пожалуй и все. Тем, кто действительно захочет использовать обертку, очень советую скомпилировать пример и разобраться, как он работает. Код был протестирован на Windows 7 (Qt 4.8 MinGW, MSVC 2008), Mac OS X 10.8 (Qt 5.1 Clang), Nokia N9 (Qt 4.7), BlackBerry 10 (Qt 4.8), везде выполняется корректно.

Заключение

Я думаю, что не только у меня возникали подобные проблемы и надеюсь, что эта статья поможет кому-нибудь, что эта маленькая оберка станет кирпичиком в каком-нибудь проекте и облегчит кому-то жизнь. А может быть кто-то просто подчерпнет себе что-то из кода — пожалуйста. Поскольку я не являюсь специалистом по OpenGL, не исключено что в реализации присутствуют ошибки. Если у вас есть исправления или предложения по улучшению, не стесняйтесь, пишите в комментариях.