6 апреля 2012 г.

OpenGL ES 1. Как наложить несколько текстур на один полигон

Иногда бывает необходимо нанести последовательно несколько текстур на один полигон в виде слоёв с регулируемой прозрачностью. Делается это с помощью смешивания цветов различных текстур. Для решения этой задачи нужно определить несколько материалов с различным значением альфа компоненты отраженного света и загрузить в память несколько текстур. Рассмотрим пример. Предположим, у нас загружены в память три текстуры с именами name1, name2, name3. Изображение первой текстуры представляет из себя красные вертикальные полосы, второй-зелёные горизонтальные полосы, а третьей - синий круг.










Определим три материала для текстурирования. Первый материал сделаем непрозрачным с альфа-компонентой диффузного света = 1. Подготовим буфер для этого материала: 
ByteBuffer b1 = ByteBuffer.allocateDirect(16);
b1.order(ByteOrder.nativeOrder());
FloatBuffer diffusematerialBuffer1 = b1.asFloatBuffer();
float [] diffusematerialArray1={0.8f, 0.8f, 0.8f, 
1}; //альфа=1
diffusematerialBuffer1.put(diffusematerialArray1);
diffusematerialBuffer1.position(0);

Аналогично зададим ещё два полупрозрачных материала с альфа=0.5:
ByteBuffer b2 = ByteBuffer.allocateDirect(16);
b2.order(ByteOrder.nativeOrder());

FloatBuffer diffusematerialBuffer2 = b2.asFloatBuffer();
float [] diffusematerialArray2={0.8f, 0.8f, 0.8f, 
0.5f};
diffusematerialBuffer2.put(diffusematerialArray2);
diffusematerialBuffer2.position(0);

ByteBuffer b3 = ByteBuffer.allocateDirect(16);
b3.order(ByteOrder.nativeOrder());

FloatBuffer diffusematerialBuffer3 = b3.asFloatBuffer();
float [] diffusematerialArray3={0.8f, 0.8f, 0.8f, 
0.5f};
diffusematerialBuffer3.put(diffusematerialArray3);
diffusematerialBuffer3.position(0);


Текстуры будем наносить текстуры на квадрат, лежащий в плоскости Z=-3 и имеющий координаты угловых точек A (x=-1,y=-1), B (x=1,y=-1), C(x=1,y=1), D(-1,1):

Порядок обхода вершин квадрата выберем от точки A до точки D против часовой стрелки, т.е. A-B-C-D. Заполним буфер координат вершин, соответствующий правилу обхода:
ByteBuffer b4 = ByteBuffer.allocateDirect(48);
b4.order(ByteOrder.nativeOrder());
FloatBuffer vertexBuffer = b4.asFloatBuffer();
float [] vertexArray={-1,-1,-3,    1,-1,-3,    1,1,-3,    -1,1,-3};
vertexBuffer.put(vertexArray);
vertexBuffer.position(0);

Вспомним, что направления осей S и T текстурных координат отсчитываются от левого верхнего угла картинки текстуры. Заполним буфер координат текстур по выбранному правилу обхода:
ByteBuffer b5 = ByteBuffer.allocateDirect(32);
b5.order(ByteOrder.nativeOrder());
FloatBuffer texcoordBuffer = b5.asFloatBuffer();
float [] texcoordArray={0,1,  1,1,  1,0,  0,0};
texcoordBuffer.put(texcoordArray);
texcoordBuffer.position(0);

Выполним команды для установки необходимых параметров состояния OpenGL:
// разрешим использовать освещение 
gl.glEnable(GL10.GL_LIGHTING);
// включаем источник света с номером 0, 
// по умолчанию он находится в начале координат
gl.glEnable(GL10.GL_LIGHT0);
// разрешим использование двумерных текстур
gl.glEnable(GL10.GL_TEXTURE_2D);
// включим использование альфа-компоненты света
gl.glEnable(GL10.GL_ALPHA);
// включим смешивание цветов
gl.glEnable(GL10.GL_BLEND);
// устанавливаем режим смешивания цветов
// для регулировки прозрачности с помощью альфа-компоненты
gl.glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);
// включаем использование массивов (буферов) координат вершин
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// указываем программе, что в буфере vertexBuffer содержатся координаты вершин
gl.glVertexPointer(3,GL10.GL_FLOAT,0,vertexBuffer);
// включаем использование массивов (буферов) координат текстур
gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
// указываем программе, что в буфере texcoordBuffer содержатся координаты текстур 
gl.glTexCoordPointer(2,GL10.GL_FLOAT,0,texcoordBuffer);

Нарисуем наш квадрат три раза. 
Сначала включим диффузный свет первого материала:
gl.glMaterialfv(GL10.GL_FRONT_AND_BACK,
             GL10.GL_DIFFUSE, diffusematerialBuffer1);
Затем сделаем активной первую текстуру (вертикальные красные полосы):
gl.glBindTexture(GL10.GL_TEXTURE_2D, name1);
Нарисуем квадрат с использованием первой текстуры:
gl.glDrawArrays(GL10.GL_TRIANGLE_FAN,0,4);
Повторим процедуру для второго материала и второй текстуры (горизонтальные зелёные полосы): 
gl.glMaterialfv(GL10.GL_FRONT_AND_BACK,
             GL10.GL_DIFFUSE, diffusematerialBuffer2);
gl.glBindTexture(GL10.GL_TEXTURE_2D, name2);
gl.glDrawArrays(GL10.GL_TRIANGLE_FAN,0,4);

Получим такое изображение:













Теперь нарисуем поверх этой картинки третью текстуру (синий круг) с использованием третьего материала:
gl.glMaterialfv(GL10.GL_FRONT_AND_BACK,
        GL10.GL_DIFFUSE, diffusematerialBuffer3);
gl.glBindTexture(GL10.GL_TEXTURE_2D, name3);
gl.glDrawArrays(GL10.GL_TRIANGLE_FAN,0,4);

Результат будет такой:













Интенсивность каждой текстуры можно регулировать путем изменения альфа-компоненты соответствующего материала. Для примера, уменьшим альфа-компоненту второго материала с 0.5 до 0.2, т.е. сделаем второй слой более прозрачным:
diffusematerialArray2={0.8f, 0.8f, 0.8f, 0.2f};
При этом яркость второй текстуры, содержащей зелёные полосы заметно уменьшится:












Главным преимуществом данного подхода является его простота и гибкость, позволяющая наложить на один полигон сколько угодно текстур. Заметьте, что мы просто выполняем несколько раз рисование одного и того же полигона переключаясь между текстурами и материалами. При этом не требуется многократная загрузка координат вершин и текстур в буферы и повторная  передача их в OpenGL командами glVertexPointer и glTexCoordPointer.
Существует другая, более сложная для понимания, техника наложения нескольких текстур на один полигон и называется она "мультитекстура". Она позволяет отобразить множество текстур на одном полигоне за один цикл рисования, т.е. за один вызов команды glDrawArrays. Однако, по сравнению с одиночной текстурой, мультитекстура занимает в несколько раз больше видеопамяти. Кроме того, эффект освещения при использовании мультитекстуры значительно ослабевает. На практике я применял обе техники на поверхности, состоящей из нескольких тысяч вершин, и не заметил заметного преимущества мультитекстуры в части скорости рендинга. Поэтому мультитекстура здесь рассматриваться не будет.
       

      

4 комментария:

  1. Подскажите пожалуйста, что происходит быстрее glBindTexture(при переключении между мелкими текстурами) или glTexCoordPointer(при выборе координат этих мелких текстур из атласа текстур)?

    ОтветитьУдалить
    Ответы
    1. glBindTexture теоретически быстрее, т.к. просто меняет ссылку на текущую текстуру.

      Удалить
  2. Пожалуйста ОГРОМНАЯ ПРОСЬБА.
    Вы бы не могли подробно создать урок о сжатии текстур например в ETC 1.
    Сжатие простых текстур (не прозрачные) и также сжатие тектстур с альфа каналом (прозрачный фон), используя OPEN GL

    ОтветитьУдалить
  3. Напрвьте пожалуйста в какую сторону копать чтобы сделать следующее: мне нужно нарисовать несколько 3D кубиков и напрмер объединить их в группы по 2, так чтобы я мог вращать отдельно первую группу или вторую.

    ОтветитьУдалить