Глава 44. Шейдеры GLSL. Пост-эффекты

 

Пост эффекты встречаются почти в каждой современной игре, например в Crysis, STALKER, Mass Effect (список можно продолжать до бесконечности). В такой ситуации, когда почти каждая компания реализует пост-шейдерные эффекты, мы не можем оставаться в стороне.

Пост-эффекты применяются уже к готовому изображению. Я предлагаю начать изучение с одного из самых простых шейдерных пост-эффектов — с эффекта перевода цветного изображения в чёрно-белое. Для начала нам понадобится какая-нибудь текстура (главное — не серая). Смысл нашей работы сводится к следующему:

Визуализируем сцену через FBO (и компонент GLFBORenderer, соответственно) в текстуру (свойство GLFBORenderer.colorTextureName).

Применяем к полученной текстуре шейдер. Шейдер будем использовать через компонент GLSLShader1, бросьте его со вкладки GLScene Shaders.

Применяем полученный материал к GLHUDSprite. Создайте его в инспекторе объектов и назначьте библиотеку материалов, затем материал Ch/B. Почему именно этот компонент? Потому что GLHUDSprite — это плоскость, всегда повёрнутая к камере — нам это и надо.

Создайте в инспекторе объектов сцены компонент GLCube. Создайте у формы событие OnCreate. Здесь мы будем натягивать текстуру на куб:

GLCube.Material.Texture.Image.LoadFromFile(‘Texture.jpg’);

GLCube.Material.Texture.Disabled:=False;

Далее кидаем на форму GLMaterialLibrary1 и GLFBORenderer1. В GLMaterialLibrary1 создайте материал с именем Ch/B, этот материал будет ключом к пост шейдеру. Для облегчения расчетов, свойства Material.MaterialOptions.moIgnoreFog и moNoLighting поставьте в значение True. После этого для него не будет рассчитываться освещение и туман (если есть). Material.Texture.ImageClassName должно быть Blank Image, иначе ошибка «FrameBuffer not complited».

В GLFBORenderer1 назначьте свойству Camera единственную камеру, свойству MaterialLibrary единственную библиотеку материалов. В свойстве ColorTextureName нажмите выберите Ch/B.

Пришло время написать шейдеры. Используемый шейдер — предмет особых пояснений. Мы не будем пока трогать сложные технологии по типу HDR или God Rays, но наш шейдер тоже хорош — программа перевода цветного изображения в чёрно-белое. Используется, кстати, относительно часто.

От слов к делу! Вот вершинный шейдер:

void main(void)

{

gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;

gl_TexCoord[0] = gl_MultiTexCoord0;

}

Тут производим трансформацию вершин с учётом модельно-видовой матрицы первой строкой, а второй передаём текстурные координаты в пиксельный шейдер.

Теперь фрагментный шейдер:

uniform sampler2D image;

const vec3 LUMINANCE_WEIGHTS = vec3(0.07, 0.07, 0.06);

void main(void)

{

vec3 col = texture2D (image, gl_TexCoord[0].st).xyz;

float lum = dot(LUMINANCE_WEIGHTS,col);

gl_FragColor = vec4(lum,lum,lum,1.0);

}

Мы здесь впервые в GLSL встречаемся с константами. Их синтаксис предельно прост и не требует пояснения. Строкой vec3 col = texture2D (image, gl_TexCoord[0].st).xyz мы создаём вектор col, равный красному, зелёному и синему компонентам (xyz) пикселя текстуры image с координатами st. Допишите в событие OnCreate формы следующий код активации GLSLShader:

GLSLShader1.LoadShaderPrograms(‘Shader.Vert’, ‘Shader.Frag’);

GLSLShader1.Enabled:= true;

Также необходимо передавать шейдеру текстуру. В событии OnApply шейдера запишите:

with Shader do

Param['image'].AsTexture2D[0]:=GLMaterialLibrary1.

LibMaterialByName('Ch/B').Material.Texture;

Перейдём к настройке GLHUDSprite. Поскольку он всегда должен закрывать весь экран, мы создадим у Form1 событие OnResize и запишем в него код подстройки размера спрайта под размеры формы и централизуем его:

GLHUDSprite1.Width:= GLSceneViewer1.Width;

GLHUDSprite1.Height:= GLSceneViewer1.Height;

GLHUDSprite1.Position.SetPoint(GLSceneViewer1.Width div 2,

GLSceneViewer1.Height div 2, 0);

Почти всё. Осталось только запустить перерисовку сцены, иначе весь экран будет чёрный. Создайте GLCadencer, свойству Scene присвойте GLScene1. Создайте событие OnProgress и запишите в нём всего одну строчку — вынужденную перерисовку сцены:

GLSceneViewer1.Invalidate;

Готовый пример: http://www.glscene.ru/download.php?view.533

Вот здесь: http://www.uraldev.ru/articles/id/23 есть ещё очень много шейдерных пост-эффектах. Читайте, изучайте и удачи!