Газовый шейдер в Cocos2d

Добрый день.
Хотела поделиться своим небольшим опытом оптимизации шейдеров на IOS, и по возможности услышать дельные советы на этот счет. Вроде бы есть прекрасный инструмент OpenGl ES 2.0, и можно сделать неплохие эффекты, но при этом получить более-менее вменяемый fps не всегда получается.

Начала с простого. Сделана небольшая программка построения бесконечного газопровода, обходя препятствия и подключая объекты. Задача – отрисовать газ, заполняющий трубу. Программирую я на Cocos2d, материалов по шейдерам там не очень-то много, но по большому счету, можно легко пристраивать любые примеры доступные для ios и андроида. Небольшое отличие, которое вносит непосредственно Cocos2d, — это передача координат вершинных шейдеров в экранных размерах, а не в диапазоне [-1.0, 1.0]. Это весьма удобно.
Для конвертации диапазонов кокос сам формирует матрицу CC_MVPMatrix, и добавляет ее в вертексный шейдер.
За основу газа взят шейдер, который комбинирует цвета на основе входящей текстуры шума Перлина.

precision mediump float; varying vec4 Position; varying vec2 v_texCoord; uniform float Offset; uniform sampler2D uTextNoise;  void main (void) {     vec4 noisevec;     vec3 color;     float intensity;          vec3 FireColor1 = vec3(0.5, 0.7, 0.8);     vec3 FireColor2 = vec3(0.1, 0.3, 0.8);          noisevec = texture2D(uTextNoise, Position.xy);     noisevec = texture2D(uTextNoise, vec2 (Position.x+noisevec[1]+Offset, Position.y-noisevec[2]+Offset));          intensity = 1.5 * (noisevec[0] + noisevec[1] + noisevec[2] + noisevec[3]);     intensity = 1.95 * abs(intensity - 0.35);     intensity = clamp(intensity, 0.0, 1.0);     color = mix(FireColor1, FireColor2, intensity) * 1.8;          gl_FragColor = vec4(color,1.0); } 

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

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

-(void) createFBO {     GLint	_oldFBO;     glGetIntegerv(GL_FRAMEBUFFER_BINDING, &_oldFBO);          ccGLBindTexture2DN(0, texOut.name);      glGenFramebuffers(1, &_noiseFBO);     glBindFramebuffer(GL_FRAMEBUFFER, _noiseFBO);     glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, texOut.name, 0);          glBindFramebuffer(GL_FRAMEBUFFER, _oldFBO);     glActiveTexture(GL_TEXTURE0); } 

Отрисовка будет выглядеть примерно так:

-(void)draw {       ccGLBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);          GLint	_oldFBO;     glGetIntegerv(GL_FRAMEBUFFER_BINDING, &_oldFBO);     glBindFramebuffer(GL_FRAMEBUFFER, _noiseFBO);          [shaderProgramNoise use];     [shaderProgramNoise setUniformsForBuiltins];          glUniform1f(quOffset0, offset);     ccGLBindTexture2DN(0, texNoise.name);           ccGLEnableVertexAttribs(kCCVertexAttribFlag_Position|kCCVertexAttribFlag_TexCoords);     glVertexAttribPointer(kCCVertexAttrib_Position, 2, GL_FLOAT, GL_FALSE, 0, vertexArr);     glVertexAttribPointer(kCCVertexAttrib_TexCoords, 2, GL_FLOAT, GL_FALSE, 0, vertexTex);          glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);     glBindFramebuffer(GL_FRAMEBUFFER, _oldFBO);          [shaderProgramAlpha use];     [shaderProgramAlpha setUniformsForBuiltins];     ccGLEnableVertexAttribs(kCCVertexAttribFlag_Position|kCCVertexAttribFlag_TexCoords);     ccGLBindTexture2DN(0, texOut.name);      ccGLBindTexture2DN(1, texTemplate.name);      glVertexAttribPointer(kCCVertexAttrib_Position, 2, GL_FLOAT, GL_FALSE, 0, vertexArrOut);     glVertexAttribPointer(kCCVertexAttrib_TexCoords, 2, GL_FLOAT, GL_FALSE, 0, vertexTexOut);     glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);     glActiveTexture(GL_TEXTURE0); } 

В отрисовке мы сначала подключаем фрейм буффер, в котором shaderProgramNoise формирует текстуру texNoise маленького размера.
Далее в рендер буффере shaderProgramAlpha отрисовывает обработку двух текстур: газа и трафарета. Текстуру трафарета первоначально я отрисовывала в другой фрейм буфер, используя картинки полных и частичных труб.

Fps значительно улучшился. Тем не менее, полученный вариант был вовсе не оптимальным. Как выяснилось, увеличение количества frambuffer’ов (! хотя их всего было 2!) нагружает систему, и fps сразу падает на десяток. Понятное дело, что такая драматическая ситуация наблюдалась только на iphone4, тем не менее это надо учитывать при разработке и не плодить дополнительные frambuffer’ы без необходимости.
Хорошим решением было бы разместить трафаретную текстуру в stencil буффер frameBuffera c газом. Там где значение стенсила 0, не происходит вызов пиксельного шейдера. Однако, неприятным моментом в использовании stencil- буфферов является невозможность запихать туда текстуру. Т.е. рисовать туда придется треугольниками – а это полное ФУ (для данной задачи). Но раз уж я упоминула о stencil-буффере, скажу, что все-таки запихать туда текстуру мне удалось. Поскольку вызов glDrawArrays для stencil’а тоже использует шейдерную программу, то используя в этой программе discard для прозрачных областей, мы все-таки можем получить там трафарет текстуры. Если кому-то интересно смотрите такой способ:

-(void)draw {     glDisable(GL_DEPTH_TEST);     ccGLBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);          glClearColor(0.0/255.0, 200.0/255.0, 245.0/255.0, 1.0);     glClear(GL_COLOR_BUFFER_BIT | GL_STENCIL_BUFFER_BIT);           glClearStencil(0);     glEnable(GL_STENCIL_TEST);          glStencilFunc(GL_NEVER, 1, 0);     glStencilOp(GL_REPLACE, GL_KEEP, GL_KEEP);          ccGLBindTexture2DN(0, stencilTexture.name);     [shaderProgramStencil use];     [shaderProgramStencil setUniformsForBuiltins];      ccGLEnableVertexAttribs(kCCVertexAttribFlag_Position|kCCVertexAttribFlag_Color|kCCVertexAttribFlag_TexCoords);     glVertexAttribPointer(kCCVertexAttrib_Position, 2, GL_FLOAT, GL_FALSE, 0, vertexArr);     glVertexAttribPointer(kCCVertexAttrib_TexCoords, 2, GL_FLOAT, GL_FALSE, 0, vertexTex);     glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);          // теперь устанавливаем stencil buffer как маску     glStencilFunc(GL_EQUAL, 1, 255);          [self.shaderProgram use];     [self.shaderProgram setUniformsForBuiltins];          ccGLBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);     ccGLBindTexture2DN(0, tex0.name);      ccGLEnableVertexAttribs(kCCVertexAttribFlag_Position|kCCVertexAttribFlag_Color|kCCVertexAttribFlag_TexCoords);     glVertexAttribPointer(kCCVertexAttrib_Position, 2, GL_FLOAT, GL_FALSE, 0, vertexArr);     glVertexAttribPointer(kCCVertexAttrib_TexCoords, 2, GL_FLOAT, GL_FALSE, 0, vertexTex);     glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);          glActiveTexture(GL_TEXTURE0);  }

Шейдер для отрисовки трафарета текстуры, будет выглядеть так:

precision lowp float; varying vec2 v_texCoord; uniform sampler2D CC_Texture0;  // по умолчанию в кокосе  void main() {     vec4 color = texture2D(CC_Texture0, v_texCoord);     if (color.a == 0.0)     {         discard;     }     gl_FragColor = color;  }

Разумеется использование функции discard (а также функции if и непоследовательного доступа к текстурам) в пиксельном шейдере – это зло и низкий fps. Поэтому никакого смысла в таком надругательстве над stencil буффером нет, вот собственно поэтому его мало используют в 2d.

В итоге, я решила избавится от отдельного “запекания” текстуры трафарета в фреймбуфер, а также от загрузки ее в stencil буффер. И пришла к такому решению: делаю один фреймбуфер c маленькой текстурой газа, строю VBO трафарета, в который складирую координаты текстур трубопровода, координаты текстур газа, и координаты экрана и рендерю на экран. Вижу отличный fps.

Видео результата можно посмотреть здесь.
Мне эти “упражнения” очень помогли разобраться в пучине “open gl”. Возможно, кому-то тоже будут интересны и полезны эти знания.