Просмотр нескольких изображений в сетке 2x2 в одном окне с использованием OpenGL и текстур

Трудно предоставить «лучший подход» без какого-либо кода, предоставляющего дополнительный контекст того, что вы пытаетесь сделать.

1. Является ли это лучшим/современным подходом с использованием вершинного шейдера и фрагментного шейдера? Есть много примеров изображений 5-10-летней давности, которые делают что-то другое.

Не видя учебники, трудно дать ответ. Однако я предполагаю, что вы имеете в виду примеры с использованием конвейера с фиксированной функцией. Если так, то да, придерживайтесь шейдеров.

2. Если у меня загружено четыре изображения, могу ли я повторно использовать одни и те же вершинные и фрагментные шейдеры для каждого изображения?

Предполагая, что ваш фрагментный шейдер в некоторой степени совпадает с тем, на который вы ссылались (4.1.texture.fs), то есть сводится к чему-то вроде этого:

#version 330 core

out vec4 fragColor;
in vec2 vTexCoord;
uniform sampler2D tex;

void main() {
    fragColor = texture(tex, vTexCoord);
}

Тогда да, вы можете повторно использовать шейдер. Предполагая, что ваш текущий подход включает 4 вызова отрисовки, тогда просто привяжите необходимую текстуру до вызова отрисовки.

3. В настоящее время я думаю о подходе к рендерингу изображений в сетке 2x2, чтобы создать 4 вершины [] с каждым квадрантом (от -1 до 0, от 0 до 1 и т. д.). Это означало бы, что мне понадобятся 4 объекта вершины VAO. Это лучший подход, или есть что-то более простое, что можно сделать?

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

Вы познакомитесь с этим в следующем учебнике LearnOpenGL «Преобразования».

Короче говоря, вы добавите uniform mat4 mvp к вашему вершинному шейдеру и умножите его на позицию вершины, примерно так:

#version 330 core

layout (location = 0) in vec3 pos;
uniform mat4 mvp;

void main() {
    gl_Position = mvp * vec4(pos, 1.0);
}

Существуют также альтернативные способы, с помощью которых вы можете выполнить то, что пытаетесь сделать, с помощью одного вызова отрисовки.

• Вы можете использовать "атлас текстур"
• Если все изображения имеют одинаковый размер, вы можете использовать «текстуру массива».
• Вы также можете использовать юниформ-массив текстур.

Чтобы использовать текстуру массива, ваш шейдер должен указать sampler2DArray вместо sampler2D. Наряду с вашим vTexCoord необходимо указать третью координату, представляющую слой.

#version 330 core

out vec4 fragColor;
in vec3 vTexCoord;
uniform sampler2DArray tex;

void main() {
    fragColor = texture(tex, vTexCoord);
}

По сравнению с uniform массивом текстур. Вы бы добавили атрибут layer к своим вершинным данным и шейдерам.

Вершинный шейдер:

#version 330 core

layout (location = 0) in vec3 pos;
layout (location = 1) in vec2 texCoord;
layout (location = 2) in uint layer;

flat out uint vLayer;

uniform mat4 mvp;

void main() {
    vTexCoord = texCoord;
    vLayer = index;

    gl_Position = mvp * vec4(position, 0.0, 1.0);
}

Фрагментный шейдер:

#version 330 core

out vec4 fragColor;

in vec2 vTexCoord;
flat in uint vLayer;

uniform sampler2D tex[4];

void main() {
    fragColor = texture(tex[vLayer], vTexCoord);
}