как применить текстуру к сетке квадратов с помощью OpenGL

Question

Я пытаюсь изучить OpenGL, и это немного утомительно.Для начала я пытаюсь использовать его для создания некоторых эффектов на 2D-изображении.По сути, я хочу взять изображение (скажем, 1000 на 1000 пикселей) и разделить его на сетку из квадратов одинакового размера (скажем, на 10 на 10), а затем по отдельности манипулировать квадратами (например, повернуть один квадрат черным, перевернуть другое,еще одно "падение" с экрана и т. д.).Я выполнил некоторые основные онлайн-инструкции (http://blog.jayway.com/2010/12/30/opengl-es-tutorial-for-android-%E2%80%93-part-vi-textures/) о том, как отобразить текстуру в простой квадрат, но у меня возникли проблемы с отображением текстуры в более сложное расположение из нескольких квадратов.

1)Учитывая сетку квадратов 2x2 (и большего размера), как я могу отобразить одну текстуру / изображение по всей сетке?То есть, каковы координаты текстуры, которые OpenGL ожидает (и в каком порядке), чтобы эта работа работала?Кажется, я не могу обернуться, как выяснить порядок «UV» координат на большей структуре многоугольника.

2) Поскольку в конечном итоге я буду преобразовывать, вращать и т. Д. Каждый отдельный квадратсетки, было бы лучше создать каждый квадрат сетки и индивидуально разделить текстуру / растровое изображение и применить каждый фрагмент изображения к каждому квадрату отдельно?Если да, то есть ли у вас какие-либо рекомендации по эффективному разделению растрового изображения на части?

Любая помощь, ссылки, предложения и т. Д. Будут высоко оценены.Я делаю это в приложении для Android с предполагаемой поддержкой OpenGL ES 2, но я предполагаю, что большинство обсуждений / концепций OpenGL не зависят от платформы.Я не хочу включать какой-либо большой фреймворк или инструментарий, чтобы сделать это, если это возможно, так как я хочу много скорости и минимального размера.

Answer 1

1) Я думаю, что ключевое слово, которое вы ищете, - это «Атлас текстуры».

Некоторые подсказки, но вы можете найти лучшие объяснения в Интернете, так как я все еще учусь: (Я использую OpenGl 2.1 и GLSL1.2 так ymmv)
Вершинный шейдер имеет что-то вроде этого:

uniform mat4 projectionMatrix;  
uniform mat4 viewMatrix;  
uniform mat4 modelMatrix;  

attribute vec3 position;
attribute vec2 texcoord;

varying vec2 vertTexCoord;

void main()
{ 
  vertTexCoord = texcoord;
  gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0f);
}

в вашем фрагментном шейдере вы делаете что-то вроде этого:

uniform sampler2D texture;
varying vec2 vertTexCoord;

void main()
{
   gl_FragColor = texture2D(texture, vertTexCoord);
}

, а затем, например, есливам нужна сетка квадратов 2х2 (текстура разделена на 4 части), у вас будут такие вершины;(при условии, что квадраты имеют ширину 1 единицу и высоту)
(uv = texcoord, vertex = position)
square1
и следующий квадрат справа от выглядит следующим образом:
square2

Важно помнить, что, хотя координаты вершины могут превышать 1 и ниже 0, координаты текстуры не могут (всегда между 0 и 1).

2) Я бы не стал делить растровое изображение, поскольку использование текстурных атласов (во множественном числе?) Уже довольно быстро, и я сомневаюсь, что вы получите значительное увеличение скорости (если оно вообще есть).

Я надеюсь, что смогу помочь!(также извините, но я не могу встраивать изображения напрямую, пожалуйста, дайте мне ответ. Чтобы я мог сделать это в будущем! :))

Answer 2

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

Возвращаясь к # 1, способ сделать это на самом деле довольно прост. Ваша текстура находится в единичном квадрате координат (от 0,0) до (1,1). Это называется текстурно-пространственными координатами, а оси называются U и V соответственно. Таким образом, каждый из них идет между 0 и 1 и покрывает все ваше изображение.

Теперь, когда вы создаете свои объекты, вершина за вершиной (через буфер вершин или сразу), вы можете отправить второй набор координат, координаты текстуры UV, для каждой вершины. Вы используете это, чтобы «разрезать» ваше изображение на части.

Самый простой способ выполнить ваше конкретное приложение - взять координату вершины, разделить ее на длину изображения и умножить на длину небольшого квадрата, который вы строите. Очевидно, это не сработает, когда вы начнете вращать квадраты, но, возможно, это поможет вам лучше визуализировать процесс.

Обратите внимание, что это полностью независимо от платформы, вы можете использовать те же рассуждения для приложений DirectX или что угодно!