Как наложить текстуру на куб opengl

Урок 5: Текстурированный куб

Добро пожаловать на наш пятый урок. В этом уроке вы узнаете:

• Что такое UV-координаты
• Как самостоятельно загружать текстуры
• Как использовать их в OpenGL
• Что такое фильтрация и мип-маппинг и как их использовать
• Как загружать текстуры с помощью GLFW
• Что такое Alpha-канал

UV-координаты

Когда вы текстурируете какой-то объект, то вам необходимо как-то сообщить OpenGL, какая часть изображения прикрепляется к каждому треугольнику. Именно для этого и используются UV-координаты

Каждая вершина помимо позиции имеет несколько дополнительных полей, а также U и V. Эти координаты используются применительно к текстуре, как показано на рисунке:

Обратите внимание, как текстура искажается на треугольнике.

Загрузка Bitmap-изображений

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

Объявляем функцию для загрузки изображений:

 GLuint loadBMP_custom(const char * imagepath); 

Вызываться она будет так:

 GLuint image = loadBMP_custom("./my_texture.bmp"); 

Теперь перейдем непосредственно к чтению файла.

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

 // Данные, прочитанные из заголовка BMP-файла unsigned char header[54]; // Каждый BMP-файл начинается с заголовка, длиной в 54 байта unsigned int dataPos; // Смещение данных в файле (позиция данных) unsigned int width, height; unsigned int imageSize; // Размер изображения = Ширина * Высота * 3 // RGB-данные, полученные из файла unsigned char * data; 

 FILE * file = fopen(imagepath,"rb"); if (!file)

Первым, в BMP-файлах идет заголовок, размером в 54 байта. Он содержит информацию о том, что файл действительно является файлом BMP, размер изображение, количество бит на пиксель и т. п., поэтому читаем его:

 if ( fread(header, 1, 54, file) != 54 ) < // Если мы прочитали меньше 54 байт, значит возникла проблема printf("Некорректный BMP-файлn"); return false; >

Заголовок всегда начинается с букв BM. Вы можете открыть файл в HEX-редакторе и убедиться в этом самостоятельно, а можете посмотреть на наш скриншот:

Итак, мы проверяем первые два байта и если они не являются буквами “BM”, то файл не является BMP-файлом или испорчен:

 if ( header[0]!='B' || header[1]!='M' )

Теперь мы читаем размер изображения, смещение данных изображения в файле и т. п.:

 // Читаем необходимые данные dataPos = *(int*)&(header[0x0A]); // Смещение данных изображения в файле imageSize = *(int*)&(header[0x22]); // Размер изображения в байтах width = *(int*)&(header[0x12]); // Ширина height = *(int*)&(header[0x16]); // Высота 

Проверим и исправим полученные значения:

 // Некоторые BMP-файлы имеют нулевые поля imageSize и dataPos, поэтому исправим их if (imageSize==0) imageSize=width*height*3; // Ширину * Высоту * 3, где 3 - 3 компоненты цвета (RGB) if (dataPos==0) dataPos=54; // В таком случае, данные будут следовать сразу за заголовком 

Теперь, так как мы знаем размер изображения, то можем выделить область памяти, в которую поместим данные:

 // Создаем буфер data = new unsigned char [imageSize]; // Считываем данные из файла в буфер fread(data,1,imageSize,file); // Закрываем файл, так как больше он нам не нужен fclose(file); 

Следует отметить, что приведенный код может быть использован только для загрузки 24-битных изображений (т. е. где на каждый пиксель изображения отводится 3 байта). С другими форматами BMP-файла вам следует познакомиться самостоятельно.

Мы вплотную подошли к части, касающейся OpenGL. Создание текстур очень похоже на создание вершинных буферов:

• Создайте текстуру
• Привяжите ее
• Заполните
• Сконфигурируйте

GL_RGB в glTextImage2D указывает на то, что мы работает с 3х компонентным цветом. А GL_BGR указывает на то, как данные представлены в памяти. На самом деле в BMP-файлах цветовые данные хранятся не в RGB, а в BGR (если быть точным, то это связано с тем, как хранятся числа в памяти), поэтому необходимо сообщить об этом OpenGL:

 // Создадим одну текстуру OpenGL GLuint textureID; glGenTextures(1, &textureID); // Сделаем созданную текстуру текущий, таким образом все следующие функции будут работать именно с этой текстурой glBindTexture(GL_TEXTURE_2D, textureID); // Передадим изображение OpenGL glTexImage2D(GL_TEXTURE_2D, 0,GL_RGB, width, height, 0, GL_BGR, GL_UNSIGNED_BYTE, data); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); 

Последние две строки мы поясним позднее, а пока в части C++ мы должны использовать нашу функцию для загрузки текстуры:

 GLuint Texture = loadBMP_custom("uvtemplate.bmp"); 

**Очень важное замечание: **используйте текстуры с шириной и высотой степени двойки! То есть:

• Хорошие: 128128, 256256, 10241024, 2*2…
• Плохие: 127128, 35, …
• Приемлемые: 128*256

Использование текстуры в OpenGL

Что же, давайте посмотрим на наш Фрагментный шейдер:

 #version 330 core // Интерполированные значения из вершинного шейдера in vec2 UV; // Выходные данные out vec3 color; // Значения, которые остаются неизменными для объекта. uniform sampler2D myTextureSampler; void main() < // Выходной цвет = цвету текстуры в указанных UV-координатах color = texture( myTextureSampler, UV ).rgb; >

• Фрагментному шейдеру требуются UV-координаты. Это понятно.
• Также, ему необходим “sampler2D”, чтобы знать, с какой текстурой работать (вы можете получить доступ к нескольким текстурам в одном шейдере т. н. мультитекстурирование)
• И наконец, доступ к текстуре завершается вызовом texture(), который возвращает vec4 (R, G, B, A). A-компоненту мы разберем немного позднее.

Вершинный шейдер также прост. Все, что мы делаем — это передаем полученные UV-координаты в фрагментный шейдер:

 #version 330 core // Входные данные вершин, различные для всех запусков этого шейдера layout(location = 0) in vec3 vertexPosition_modelspace; layout(location = 1) in vec2 vertexUV; // Выходные данные, которые будут интерполированы для каждого фрагмента out vec2 UV; // Значения, которые останутся неизменными для всего объекта uniform mat4 MVP; void main() < // Выходная позиция вершины gl_Position = MVP * vec4(vertexPosition_modelspace,1); // UV-координаты вершины. UV = vertexUV; >

Помните “layout(location = 1) in vec3 vertexColor” из Урока 4? Здесь мы делаем абсолютно тоже самое, только вместо передачи буфера с цветом каждой вершины мы будем передавать буфер с UV-координатами каждой вершины:

 // Две UV-координаты для каждой вершины. Они были созданы с помощью Blender. Мы коротко расскажем о том, как сделать это самостоятельно. static const GLfloat g_uv_buffer_data[] = < 0.000059f, 1.0f-0.000004f, 0.000103f, 1.0f-0.336048f, 0.335973f, 1.0f-0.335903f, 1.000023f, 1.0f-0.000013f, 0.667979f, 1.0f-0.335851f, 0.999958f, 1.0f-0.336064f, 0.667979f, 1.0f-0.335851f, 0.336024f, 1.0f-0.671877f, 0.667969f, 1.0f-0.671889f, 1.000023f, 1.0f-0.000013f, 0.668104f, 1.0f-0.000013f, 0.667979f, 1.0f-0.335851f, 0.000059f, 1.0f-0.000004f, 0.335973f, 1.0f-0.335903f, 0.336098f, 1.0f-0.000071f, 0.667979f, 1.0f-0.335851f, 0.335973f, 1.0f-0.335903f, 0.336024f, 1.0f-0.671877f, 1.000004f, 1.0f-0.671847f, 0.999958f, 1.0f-0.336064f, 0.667979f, 1.0f-0.335851f, 0.668104f, 1.0f-0.000013f, 0.335973f, 1.0f-0.335903f, 0.667979f, 1.0f-0.335851f, 0.335973f, 1.0f-0.335903f, 0.668104f, 1.0f-0.000013f, 0.336098f, 1.0f-0.000071f, 0.000103f, 1.0f-0.336048f, 0.000004f, 1.0f-0.671870f, 0.336024f, 1.0f-0.671877f, 0.000103f, 1.0f-0.336048f, 0.336024f, 1.0f-0.671877f, 0.335973f, 1.0f-0.335903f, 0.667969f, 1.0f-0.671889f, 1.000004f, 1.0f-0.671847f, 0.667979f, 1.0f-0.335851f >; 

Указанные UV-координаты относятся к такой модели:

Остальное очевидно. Мы создаем буфер, привязываем его, заполняем, настраиваем и выводим Буфер Вершин как обычно. Только будьте осторожны, так как в glVertexAttribPointer для буфера текстурных координат второй параметр (размер) будет не 3, а 2.

И вот такой результат мы получим:

в увеличенном варианте:

Фильтрация и мип-маппинг.

Как вы можете видеть на скриншоте выше, качество текстуры не очень хорошее. Это потому, что в нашей процедуре загрузки BMP-изображения (loadBMP_custom) мы указали:

 glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); 

Это означает, что в нашем фрагментном шейдере, texture() возвращает строго тексель, который находится по указанным текстурным координатам:

Есть несколько решений, которые позволят улучшить ситуацию.

При помощи линейной фильтрации texture() будет смешивать цвета находящихся рядом текселей в зависимости от дистанции до их центра, что позволит предотвратить резкие границы, которые вы видели выше:

Это будет выглядить значительно лучше и используется часто, но если вы хотите очень высокого качества, то вам понадобится анизотропная фильтрация, которая работает несколько медленнее.

Аппроксимирует часть изображения, которая действительно видна через фрагмент. К примеру, если указанная текстура просматривается сбоку и немного повернута, то анизотропная фильтрация будет вычислять цвет, который находится в синем прямоугольнике, с помощью фиксированного количество сэмплов (Уровень анизотропии) вдоль его направления:

И линейная, и анизотропная фильтрация имеют недостаток. Если текстура просматривается с большого расстояния, то смешивать 4 текселя будет недостаточно. То есть, если ваша 3D модель находится так далеко, что занимает на экране всего 1 фрагмент, то фильный цвет фрагмента будет являться средним всех текселей текстуры. Естественно, это не реализовано из-за соображений производительности. Для этой цели существует так называемый мип-маппинг:

• При инициализации вы уменьшаете масштаб текстуры до тех пор, пока не получите изображение 1х1 (которое по сути будет являться средним значением всех текселей текстуры)
• Когда вы выводите объект, то вы выбираете тот мип-мап, который наиболее приемлем в данной ситуации.
• Вы применяете к этому мип-мапу фильтрацию
• А для большего качества вы можете использовать 2 мип-мапа и смешать результат.

К счастью для нас, все это делается очень просто с помощью OpenGL:

 // Когда изображение увеличивается, то мы используем обычную линейную фильтрацию glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); // Когда изображение уменьшается, то мы используем линейной смешивание 2х мипмапов, к которым также применяется линейная фильтрация glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR); // И генерируем мипмап glGenerateMipmap(GL_TEXTURE_2D); 

Загрузка текстур с помощью GLFW

Наша процедура loadBMP_custom великолепна, так как мы сделали ее сами, но использование специальных библиотек может быть предпочтительнее (в конечном итоге мы в своей процедуре многое не учли). GLFW может сделать это лучше (но только для TGA-файлов):

 GLuint loadTGA_glfw(const char * imagepath) < // Создаем одну OpenGL текстуру GLuint textureID; glGenTextures(1, &textureID); // "Привязываем" только что созданную текстуру и таким образом все последующие операции будут производиться с ней glBindTexture(GL_TEXTURE_2D, textureID); // Читаем файл и вызываем glTexImage2D с необходимыми параметрами glfwLoadTexture2D(imagepath, 0); // Трилинейная фильтрация. glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR); glGenerateMipmap(GL_TEXTURE_2D); // Возвращаем идентификатор текстуры который мы создали return textureID; >

Сжатые текстуры

На этом шаге вы наверное хотите узнать, как же все-таки загружать JPEG файлы вместо TGA?

Короткий ответ: даже не думайте об этом. Есть идея получше.

##Создание сжатых текстур

• Скачайте The Compressonator, утилита от ATI
• Загрузите в нее текстуру, размер которой является степенью двойки
• Сожмите ее в DXT1, DXT3 или в DXT5 (о разнице между форматами можете почитать на Wikipedia)

• Создайте мипмапы, чтобы не создавать их во время выполнения программы.
• Экспортируйте это как .DDS файл

После этих шагов вы имеете сжатое изображение, которое прямо совместимо с GPU. И когда вы вызовите texture() в шейдере, то текстура будет распакована на лету. Это может показаться более медленным, однако это требует гораздо меньше памяти, а значит пересылаемых данных будет меньше. Пересылка данных всегда будет дорогой операцией, в то время как декомпрессия является практически бесплатной. Как правило, использование сжатия текстур повышает быстродействие на 20%.

##Использование сжатой текстуры

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

 GLuint loadDDS(const char * imagepath) < unsigned char header[124]; FILE *fp; /* пробуем открыть файл */ fp = fopen(imagepath, "rb"); if (fp == NULL) return 0; /* проверим тип файла */ char filecode[4]; fread(filecode, 1, 4, fp); if (strncmp(filecode, "DDS ", 4) != 0) < fclose(fp); return 0; >/* читаем заголовок */ fread(&header, 124, 1, fp); unsigned int height = *(unsigned int*)&(header[8 ]); unsigned int width = *(unsigned int*)&(header[12]); unsigned int linearSize = *(unsigned int*)&(header[16]); unsigned int mipMapCount = *(unsigned int*)&(header[24]); unsigned int fourCC = *(unsigned int*)&(header[80]); 

После заголовку идут данные, в которые входят все уровни мип-мап. К слову, мы можем прочитать их все сразу:

 unsigned char * buffer; unsigned int bufsize; /* вычисляем размер буфера */ bufsize = mipMapCount > 1 ? linearSize * 2 : linearSize; buffer = (unsigned char*)malloc(bufsize * sizeof(unsigned char)); fread(buffer, 1, bufsize, fp); /* закрываем файл */ fclose(fp); 

Сделано. Так как мы можем использовать 3 разных формата (DXT1, DXT3, DXT5), то необходимо в зависимости от флага “fourCC”, сказать OpenGL о формате данных.

 unsigned int components = (fourCC == FOURCC_DXT1) ? 3 : 4; unsigned int format; switch(fourCC)

Создание текстуры выполняется как обычно:

 // Создаем одну OpenGL текстуру GLuint textureID; glGenTextures(1, &textureID); // "Привязываем" текстуру. glBindTexture(GL_TEXTURE_2D, textureID); 

Следующим шагом мы загружаем мип-мапы:

 unsigned int blockSize = (format == GL_COMPRESSED_RGBA_S3TC_DXT1_EXT) ? 8 : 16; unsigned int offset = 0; /* загрузка мип-мапов */ for (unsigned int level = 0; level < mipMapCount && (width || height); ++level) < unsigned int size = ((width+3)/4)*((height+3)/4)*blockSize; glCompressedTexImage2D(GL_TEXTURE_2D, level, format, width, height, 0, size, buffer + offset); offset += size; width /= 2; height /= 2; >free(buffer); return textureID; 

DXT компрессия пришла к нам из DirectX, где координатная текстура V является инвертированной по сравнению с OpenGL. Поэтому, если вы используете сжатые текстуры, то вам необходимо использовать (coord.u, 1.0 — coord.v), чтобы исправить тексель. Вы можете выполнять это как при экспорте текстуры, так и в загрузчике или в шейдере.

Заключение

В данном уроке вы узнали как создавать, загружать и использовать текстуры в OpenGL.

Стоит отметить, что в своих проектах мы настоятельно рекомендуем вам использовать только сжатые текстуры, так как они занимают меньше места, быстрее загружаются и используются. Для этих целей можете также использовать The Compressonator.

Упражнения

• В исходный код к урокам включен загрузчик DDS, но без исправления текстурных координат. Модифицируйте код так, чтобы корректно выводить куб.
• Поэкспериментируйте с разными DDS форматами. Дают ли они разный результат или разную степень сжатия?
• Попробуйте не создавать мип-мапы в The Compressonator. Каков результат? Создайте 3 пути решения этих проблем.

Полезные ссылки

• Using texture compression in OpenGL , Sébastien Domine, NVIDIA

learnopengl. Урок 1.6 — Текстуры

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

Содержание

Часть 2. Базовое освещение

Часть 3. Загрузка 3D-моделей

1. Библиотека Assimp
2. Класс полигональной сетки Mesh
3. Класс 3D-модели

Часть 4. Продвинутые возможности OpenGL

1. Тест глубины
2. Тест трафарета
3. Смешивание цветов
4. Отсечение граней
5. Кадровый буфер
6. Кубические карты
7. Продвинутая работа с данными
8. Продвинутый GLSL
9. Геометричечкий шейдер
10. Инстансинг
11. Сглаживание

Часть 5. Продвинутое освещение

1. Продвинутое освещение. Модель Блинна-Фонга.
2. Гамма-коррекция
3. Карты теней
4. Всенаправленные карты теней

Программисты и художники предпочитают использовать текстуры. Текстура — это 2D изображение (1D и 3D текстура также существуют), используемое для добавления деталей объекту; считайте, что текстура — это кусок бумаги с картинкой кирпича (к примеру), который наклеен на ваш дом и кажется, что ваш дом сделан из кирпича.

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

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

Текстурные координаты находятся в промежутке между 0 и 1 по x и y оси (мы же используем 2D текстуры). Получение цвета текстуры с помощью текстурных координат называется отбором (sampling). Текстурные координаты начинаются в (0, 0) в нижнем левом углу текстуры и заканчиваются на (1, 1) в верхнем правом углу. Изображение ниже демонстрирует как мы накладывали текстурные координаты на треугольник:

Мы указали 3 текстурные координаты для треугольника. Мы хотим, чтобы нижний левый угол треугольника соотносился с нижним левым углом текстуры, поэтому мы передаем (0, 0) нижней левой вершине треугольника. Соответственно в нижнюю правую вершину передаем (1, 0). Верхняя вершина треугольника должна соотноситься с центральной частью верхней стороной текстуры, поэтому мы передаем в верхнюю вершину (0.5, 1.0) в качестве текстурной координаты.

В результате текстурные координаты для треугольника должны выглядеть как-то так:

GLfloat texCoords[] = < 0.0f, 0.0f, // Нижний левый угол 1.0f, 0.0f, // Нижний правый угол 0.5f, 1.0f // Верхняя центральная сторона >;

Сэмплинг текстуры может быть выполнен различными методами. Наша работа — сообщить OpenGL как он должен проводить сэмплинг.

Texture Wrapping

Текстурные координаты, зачастую, находятся в промежутке между (0,0) и (1,1), но что произойдет, если текстурные координаты выйдут за этот промежуток? Поведение OpenGL по-умолчанию — повторять изображение (фактически, просто игнорируется целая часть числа с плавающей точкой), но также есть и другие опции:

• GL_REPEAT: Стандартное поведение для текстур. Повсторяет текстуру.
• GL_MIRRORED_REPEAT: Похоже на _GLREPEAT за исключением того, что в этом режиме изображение отражается.
• GL_CLAMP_TP_EDGE: Привязывает координаты между 0 и 1. В результате выходящие за пределы координаты будут привязаны к границе текстуры.
• GL_CLAMP_TO_BORDER: Координаты, выходящие за пределы диапазона будут давать установленный пользователем цвет границы.

Каждая их этих опций по разному отображается при использовании текстурных координат, выходящих за пределы промежутка. Изображение ниже отлично демонстрирует различия:

Каждую из вышепредставленных опций можно установить на оси (s, t (и r если вы используете 3D текстуры), эквивалентны x, y и z) с помощью функций **glTextParameter***:

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_MIRRORED_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_MIRRORED_REPEAT);

Первый аргумент определяет цель к которой привязана наша текстура, мы работаем с 2D текстурой, поэтому наше значение будет GL_TEXTURE_2D. Второе значение требуется для того, чтобы сообщить OpenGL какой конкретно параметр мы хотим установить. Мы хотим настроить опцию WRAP и указать ее значение для осей S и T. В последнем аргументе передается выбранный метод wrapping. В данном случае мы используем GL_MIRRORED_REPEAT.

Если бы мы выбрали GL_CLAMP_TO_BORDER, то нам бы еще пришлось указать цвет границ. Делается это fv альтернативой glTextParameter с передачей в нее GL_TEXTURE_BORDER_COLOR в качестве опции и массива из чисел с плавающей точкой в качестве цветового значения.

float borderColor[] = < 1.0f, 1.0f, 0.0f, 1.0f >; glTexParameterfv(GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR, borderColor); 

Фильтрование текстур

Текстурные координаты не зависят от разрешения, но при этом могут принимать любые значения с плавающей точкой, поэтому OpenGL требуется понять какой пиксель текстуры (также называемого текселем) ему требуется наложить. Эта проблема становится наиболее острой если требуется наложить текстуру низкого разрешения на большой объект. Возможно вы уже догадались, что в OpenGL есть опция для фильтрования текстур. Есть несколько доступных опций, но мы обсудим только наиболее важные: GL_NEAREST и GL_LINEAR.

GL_NEAREST (также называемый фильтр ближайшего соседа) — стандартный метод фильтрования в OpenGL. Пока он установлен OpenGL будет выбирать пиксель, который находится ближе всего к текстурной координате. Ниже вы можете видеть 4 пикселя и крест, показывающий текстурную координату. Поскольку центр верхнего левого тексель ближе всего к текстурной координате, то он и выбирается в качестве цвета сэмпла.

GL_LINEAR (также называемый (би)линейной фильтрацией). Принимает интерполированное значение от ближайших к текстурной координате текселей. Чем ближе тексель к текстурной координате, тем больше множитель цвета этого текселя.

Ниже вы можете видеть пример смешивания цветов соседних пикселей:

Но какой же все таки визуальный эффект от выбранного эффекта фильтрования? Давайте посмотрим как эти методы отработают с текстурой в маленьком разрешении на большом объекте (текстура была увеличена для того, чтобы было видно отдельные тексели):

Mipmaps

Представьте, что у вас есть большая комната с тысячами объектов, к каждому из которых привязана текстура. Часть объектов ближе к наблюдателю, часть объектов дальше от наблюдателя и каждому объекту привязана текстура с высоким разрешением. Когда объект находится далеко от наблюдателя, требуется обработать только несколько фрагментов. У OpenGL есть сложности с получением правильного цвета для фрагмента с текстуры высокого разрешения, когда приходится учитывать большое количество пикселей текстуры. Такое поведение будет генерировать артефакты на маленьких объектах, не говоря уже о чрезмерной трате памяти связанной с использованием текстур высокого разрешения на маленьких объектах.

Для решения этой проблемы OpenGL использует технологию, называемую мипмапами (mipmaps), которая предусматривает набор изображений-текстур где каждая последующая текстура вдвое меньше прошлой. Идея, которая лежит в основе мипмапов довольно проста: после определенного расстояния от наблюдателя, OpenGL будет использовать другую мипмап текстуру, которая будет лучше выглядеть на текущем расстоянии. Чем дальше от наблюдателя находится объект тем меньше будет использоваться текстура, поскольку пользователю сложнее будет заметить разницу между разрешениями текстур.Также мипмапы имеют приятное свойство увеличивать производительность, что никогда не бывает лишним. Давайте посмотрим на пример мипмапы поближе:

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

Во время переключения между уровнями мипмапов в процессе отрисовки OpenGL может отображать некоторые артефакты, вроде острых краев между двумя уровнями. Также как возможно использование фильтрации на текстурах, также можно использование фильтрации на различных уровнях мипмапов с помощью NEAREST и LINEAR фильтрации для переключения между уровнями. Для указания способа фильтрации между уровнями мипмапами мы можем заменить стандартные методы одной из следующих четырех настроек:

• _GL_NEARESET_MIPMAPNEAREST: Выбирает ближайший мипмап, соотносящийся с размером пикселя и также используется интерполяция ближайшего соседа для сэмплинга текстур.
• _GL_LINEAR_MIPMAPNEAREST: Выбирает ближайший мипмап и сэмплирует его методом линейной интерполяции.
• _GL_NEAREST_MIPMAPLINEAR: Линейная интерполяция между двумя ближайшими мипмапами и сэмплирование текстур с помощью линейной интерполяции.

Также как и с фильтрацией текстур мы можем установить метод фильтрации с помощью функции glTexParameteri

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

Частая ошибка — это установка метода фильтрации мипмапов в качестве увеличивающего фильтра. Это не даст никакого эффекта, поскольку мипмапы в основном используют при уменьшении текстуры. Увеличение текстуры не использует мипмапы, поэтому при передаче ему опции фильтрации мипмапа сгенерирует ошибку GL_INVALID_ENUM.

Загрузка и создание текстур

Перед тем как начать использовать наши текстуры нам требуется их загрузить в наше приложение. Текстурные изображения могут храниться в безграничном количестве форматов, в каждом из которых своя структура и упорядоченность данных, так как же мы передадим наше изображение в приложение? Одним из решений является использование удобного нам формата, к примеру .PNG и написать собственную систему загрузки изображений в большой массив байт. Хоть написание собственного загрузчика изображений не представляет собой неподъемную работу, все-таки это довольно утомительно, тем более если вы захотите использовать много форматов файлов.

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

SOIL

SOIL расшифровывается как Simple OpenGL Image Library, поддерживает большинство популярных форматов изображений, легка в использовании и может быть скачана отсюда. Также как и большинство других библиотек вам придется сгенерировать файл .lib самостоятельно. Вы можете использовать один из их проектов, располагающихся в папке /projects (не волнуйтесь, если версия их проектов будет ниже версии вашей VS. Просто сконвертируйте их в новую версию, это должно работать в большинстве случаев) для создания на его основе собственного. Также добавьте содержимое папки src в свою папку include. Также не забудьте добавить SOIL.lib в настройки своего линковщика и добавить #include в начале вашего кода.

int width, height; unsigned char* image = SOIL_load_image("container.jpg", &width, &height, 0, SOIL_LOAD_RGB);

GLuint texture; glGenTextures(1, &texture);

glBindTexture(GL_TEXTURE_2D, texture);

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, image); glGenerateMipmap(GL_TEXTURE_2D);

SOIL_free_image_data(image); glBindTexture(GL_TEXTURE_2D, 0);

GLuint texture; glGenTextures(1, &texture); glBindTexture(GL_TEXTURE_2D, texture); // Устанавливаем настройки фильтрации и преобразований (на текущей текстуре) . // Загружаем и генерируем текстуру int width, height; unsigned char* image = SOIL_load_image("container.jpg", &width, &height, 0, SOIL_LOAD_RGB); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, image); glGenerateMipmap(GL_TEXTURE_2D); SOIL_free_image_data(image); glBindTexture(GL_TEXTURE_2D, 0); 

GLfloat vertices[] = < // Позиции // Цвета // Текстурные координаты 0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f, // Верхний правый 0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f, // Нижний правый -0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, // Нижний левый -0.5f, 0.5f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f // Верхний левый >;

glVertexAttribPointer(2, 2, GL_FLOAT,GL_FALSE, 8 * sizeof(GLfloat), (GLvoid*)(6 * sizeof(GLfloat))); glEnableVertexAttribArray(2); 

#version 330 core layout (location = 0) in vec3 position; layout (location = 1) in vec3 color; layout (location = 2) in vec2 texCoord; out vec3 ourColor; out vec2 TexCoord; void main()

#version 330 core in vec3 ourColor; in vec2 TexCoord; out vec4 color; uniform sampler2D ourTexture; void main()

glBindTexture(GL_TEXTURE_2D, texture); glBindVertexArray(VAO); glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0); glBindVertexArray(0);

Color = texture(ourTexture, TexCoord) * vec4(ourColor, 1.0f);

glActiveTexture(GL_TEXTURE0); // Активируем текстурный блок перед привязкой текстуры glBindTexture(GL_TEXTURE_2D, texture);

#version 330 core . uniform sampler2D ourTexture1; uniform sampler2D ourTexture2; void main()

glActiveTexture(GL_TEXTURE0); glBindTexture(GL_TEXTURE_2D, texture1); glUniform1i(glGetUniformLocation(ourShader.Program, "ourTexture1"), 0); glActiveTexture(GL_TEXTURE1); glBindTexture(GL_TEXTURE_2D, texture2); glUniform1i(glGetUniformLocation(ourShader.Program, "ourTexture2"), 1); glBindVertexArray(VAO); glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0); glBindVertexArray(0); 

public class Cube extends Abstract3DFigure < private FloatBuffer vertexBuffer; private FloatBuffer textureBuffer; private ByteBuffer indexBuffer; private int[] textures = new int[6]; private float vertices[] = < //Vertices according to faces -1.0f, -1.0f, 1.0f, //Vertex 0 1.0f, -1.0f, 1.0f, //v1 -1.0f, 1.0f, 1.0f, //v2 1.0f, 1.0f, 1.0f, //v3 1.0f, -1.0f, 1.0f, //. 1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 1.0f, 1.0f, 1.0f, -1.0f, 1.0f, -1.0f, -1.0f, -1.0f, -1.0f, -1.0f, 1.0f, 1.0f, -1.0f, -1.0f, 1.0f, -1.0f, -1.0f, -1.0f, -1.0f, -1.0f, -1.0f, 1.0f, -1.0f, 1.0f, -1.0f, -1.0f, 1.0f, 1.0f, -1.0f, -1.0f, -1.0f, 1.0f, -1.0f, -1.0f, -1.0f, -1.0f, 1.0f, 1.0f, -1.0f, 1.0f, -1.0f, 1.0f, 1.0f, 1.0f, 1.0f, 1.0f, -1.0f, 1.0f, -1.0f, 1.0f, 1.0f, -1.0f, >; private float texture[] = < //Mapping coordinates for the vertices 0.0f, 0.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f, 1.0f, >; private byte indices[] = < //Faces definition 0, 1, 3, 0, 3, 2, //Face front 4, 5, 7, 4, 7, 6, //Face rightButtonPositiion 8, 9, 11, 8, 11, 10, //. 12, 13, 15, 12, 15, 14, 16, 17, 19, 16, 19, 18, 20, 21, 23, 20, 23, 22, >; public Cube(Context context) < ByteBuffer byteBuf = ByteBuffer.allocateDirect(vertices.length * 4); byteBuf.order(ByteOrder.nativeOrder()); vertexBuffer = byteBuf.asFloatBuffer(); vertexBuffer.put(vertices); vertexBuffer.position(0); byteBuf = ByteBuffer.allocateDirect(texture.length * 4); byteBuf.order(ByteOrder.nativeOrder()); textureBuffer = byteBuf.asFloatBuffer(); textureBuffer.put(texture); textureBuffer.position(0); indexBuffer = ByteBuffer.allocateDirect(indices.length); indexBuffer.put(indices); indexBuffer.position(0); >public void draw(GL10 gl) < gl.glPushMatrix(); gl.glTranslatef(0, 0, -10); //Move 5 units into the screen gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]); //Point to our buffers gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY); //Set the face rotation gl.glFrontFace(GL10.GL_CCW); //Enable the vertex and texture state gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer); gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, textureBuffer); //Draw the vertices as triangles, based on the Index Buffer information gl.glDrawElements(GL10.GL_TRIANGLES, indices.length, GL10.GL_UNSIGNED_BYTE, indexBuffer); gl.glPopMatrix(); >public void loadGLTexture(GL10 gl, Context context) < Bitmap bitmap = loadResurse(context, R.drawable.border); //Generate one texture pointer. gl.glGenTextures(1, textures, 0); //. and bind it to our array gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]); //Create Nearest Filtered Texture gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_NEAREST); gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR); //Different possible texture parameters, e.g. GL10.GL_CLAMP_TO_EDGE gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S, GL10.GL_REPEAT); gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T, GL10.GL_REPEAT); //Use the Android GLUtils to specify a two-dimensional texture image from our bitmap GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0); //Clean upButtonPositiion bitmap.recycle(); >private Bitmap loadResurse(Context context, int resourceId) < InputStream is = context.getResources().openRawResource(resourceId); Bitmap bitmap = null; try < //BitmapFactory is an Android graphics utility for images bitmap = BitmapFactory.decodeStream(is); >finally < //Always clear and close try < is.close(); >catch (IOException e) < >is = null; > return bitmap; > > 

Bitmap east = loadResurse(context, R.drawable.east); Bitmap north = loadResurse(context, R.drawable.north); Bitmap west = loadResurse(context, R.drawable.west); Bitmap south = loadResurse(context, R.drawable.south); Bitmap up = loadResurse(context, R.drawable.up); Bitmap down = loadResurse(context, R.drawable.down);