Методы анимации 2D Sprite с OpenGL

Поскольку тайлы спрайтов хранятся в нескольких строках, кажется, что ими сложно управлять в шейдере.

Не совсем так, все ваши спрайты имеют одинаковый размер, поэтому вы получаете идеальную равномерную сетку, а переход от какого-то одномерного индекса к двухмерному — это просто вопрос деления и деления по модулю. Не очень сложно.

Однако почему вы вообще храните отдельные кадры в сетке mxn? Теперь вы можете хранить их только в одной строке. Однако в современном GL у нас есть массив текстур. По сути, это набор независимых 2D-слоев одинакового размера. Вы просто получаете к ним доступ по 3D-координате, где третья координата — это слой от o до n-1. Это идеально подходит для вашего варианта использования и устранит любые проблемы с фильтрацией текстур/просвечиванием на границах, а также будет хорошо работать с мипмаппингом (если вам это нужно). Когда были введены массивы текстур, минимальное количество слоев, которое должна поддерживать реализация, составляло 64 (в настоящее время оно намного выше), поэтому 32 кадра будет проще простого даже для старых графических процессоров.

Вы можете сделать это миллионом способов, но я собираюсь предложить наивное решение:

Создайте VBO с 32 (квадраты кадра) * 2 (треугольники на квадрат кадра) * 3 (вершины треугольника) * 5 (x, y, z, u, v на вершину) = 960 поплавков пространства. Заполните его вершинами всех ваших спрайтов по схеме 2 треугольника на кадр.

Теперь, согласно документам glDrawArrays, вы можете указать, где вы start и как долго вы рендерите. Используя это, вы можете указать следующее:

int indicesPerFrame = 960/32;
int indexToStart = indicesPerFrame*currentBallFrame;
glDrawArrays( GL_TRIANGLES, indexToStart, indicesPerFrame);

Нет необходимости изменять VBO. Теперь, с моей точки зрения, рендерить 32 кадра по одному кадру за раз — это излишество. Есть лучшие решения этой проблемы, но это самое простое для изучения OpenGL4.

В OpenGL 2.1 я использую ваш второй вариант:

void setActiveRegion(int regionIndex)
{
    UVs.clear();

    int numberOfRegions = (int) textureSize / spriteWidth;

    float uv_x = (regionIndex % numberOfRegions)/numberOfRegions;
    float uv_y = (regionIndex / numberOfRegions)/numberOfRegions;

    glm::vec2 uv_up_left    = glm::vec2( uv_x                     , uv_y );
    glm::vec2 uv_up_right   = glm::vec2( uv_x+1.0f/numberOfRegions, uv_y );
    glm::vec2 uv_down_right = glm::vec2( uv_x+1.0f/numberOfRegions, (uv_y + 1.0f/numberOfRegions) );
    glm::vec2 uv_down_left  = glm::vec2( uv_x                     , (uv_y + 1.0f/numberOfRegions) );


    UVs.push_back(uv_up_left   );
    UVs.push_back(uv_down_left );
    UVs.push_back(uv_up_right  );

    UVs.push_back(uv_down_right);
    UVs.push_back(uv_up_right);
    UVs.push_back(uv_down_left);

    glBindBuffer(GL_ARRAY_BUFFER, uvBuffer);
    glBufferSubData(GL_ARRAY_BUFFER, 0, UVs.size() * sizeof(glm::vec2), &UVs[0]);
    glBindBuffer(GL_ARRAY_BUFFER, 0);

}

Источник: http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-11-2d-text/

Он реализовал его для рендеринга 2D-текста, но это та же концепция!

Надеюсь помог!