Разработка шейдерных эффектов для игры

Шейдер — это скрипт, который улучшает графику игры. Шейдеры нужны для симуляции частиц, простой анимации объектов и постпроцессинга изображения. Рассказываем, как работают шейдеры и другие графические эффекты. 

Minecraft с шейдерами освещения и симуляции воды

Видеокарта — это комплекс вычислительных блоков. Каждый блок делает свою задачу:

• видеочип — обменивается информацией между вычислительными блоками видеокарты и процессором;
• геометрические блоки — рассчитывают и строят трехмерные объекты;
• блоки текстурирования — выбирают и фильтруют текстурные данные и накладывают их на объекты;
• шейдерные блоки — обсчитывают шейдеры и применяют их к объектам и текстурам;
• блоки растеризации — получают информацию от других блоков и формируют из нее пиксели для отображения на экране. 

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

The Witcher 3 с шейдерами и без

Грубо говоря, шейдеры — это аналог фильтров в Инстаграме.

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

В видеокартах 90-х годов еще не было отдельных шейдерных блоков. Сами видеокарты умели выполнять ограниченные наборы команд. Из-за этого нестандартные алгоритмы приходилось выполнять на центральном процессоре. Благодаря этим эффектам некоторые старые игры выглядели лучше, когда графику рендерил CPU, а не дорогая видеокарта.

Например, в Quake 2 было два способа отображения воды:

• аппаратный рендеринг — видеокарта отображала воду как статичный синий светофильтр;
• программный рендеринг — процессор отображал воду как динамическую текстуру с эффектом всплесков.

Шейдеры в Quake 2

Разработчики видеокарт в конце 90-х внедрили в видеокарты шейдерные блоки для исполнения специальных алгоритмов. Сначала они пытались зашить в блоки стандартные наборы алгоритмов, как сделали это с видеопамятью и центральным видеочипом. Но потом поняли, что разработчики игр хотят придумывать что-то свое, и разрешили играм исполнять в шейдерных блоках любые скрипты. 

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

Система освещения в Quake 1

Затем шейдеры стали использовать для создания динамического освещения и текстур, эффектов воды, тумана и огня, а также для травы. Производитель видеокарт NVidia придумал шейдер для симуляции поведения волос, который использовался в играх The Witcher 3 и Tomb Raider.

Какими бывают шейдеры

Есть такие основные виды шейдеров:

• вершинные (Vertex) — работают с вершинами объектов или отдельными точками в пространстве;
• геометрические — работают с линиями и треугольниками;
• фрагментные — работают с пикселями, изменяют их цвет в зависимости от того, что происходит в сцене.

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

У видеокарты 2007 года 17 шейдерных процессоров, у современной RTX 2080 — 3072

Что можно сделать с вершинными шейдерами

Вершинные шейдеры нужны для изменения координат вершин 3D-объектов. Например, вершинный шейдер позволяет получить координаты вершин сферы, а потом изменить их так, чтобы получился куб. Сама 3D-модель в файлах игры при этом не меняется — изменяются только координаты ее вершин при рендеринге изображения. 

Самая популярная задача вершинных шейдеров — это скиннинг или скелетная анимация. Разработчик делает внутри 3D-модели скелет и с помощью вершинного шейдера привязывает к скелету кожу — skin. Кожа — это группа вершин модели, которые расположены вокруг одной кости. Когда движется кость, то движутся и привязанные к ней вершины. Текстура между вершинами разных костей растягивается, но это лучше, чем «оторванные» руки из ранних 3D-игр.

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

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

На создание этой травы с помощью шейдера Unity 3D понадобилось 137 строчек кода

А еще есть частицы — отдельные движущиеся точки. Шейдерные частицы требуют меньше ресурсов, чем если бы движок рендерил их так же, как 3D-объекты или спрайты. 

Геометрические шейдеры позволяют создавать или уничтожать примитивы в реальном времени. Грубо говоря, можно на лету управлять количеством полигонов в 3D-модели. 

Чаще всего геометрические шейдеры используются для тесселяции — подстройкой сложности отображаемой модели в зависимости от дистанции к ней. Для примера возьмем сферу, которая состоит из 10 000 полигонов. Если отдалить ее от камеры так, чтобы она занимала квадрат 10х10 пикселей, то видеокарта все равно будет обсчитывать 10 000 полигонов и впустую тратить ресурсы. Если приблизить сферу к камере, то игрок увидит угловатые грани вроде бы круглой сферы. 

Геометрический шейдер самостоятельно убирает или добавляет полигоны

Геометрические шейдеры тесселяции позволяют сделать так: 

• при отдалении камеры шейдер удаляет какое-то количество полигонов, чтобы сфера на расстоянии выглядела круглой, но не нагружала видеокарту;
• при приближении камеры шейдер «выдавливает» из каждого полигона еще 2-4 треугольника, чтобы сфера казалась круглой даже если смотреть на нее вплотную. 

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

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

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

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

Типичный пример использования фрагментных шейдеров — мультитекстурирование. Мультитекстурирование необходимо для работы лайтмапов (lightmap) и имитации системы освещения. Оно работает так: поверх текстуры объекта накладывается прозрачный лайтмап — дополнительная текстура, которая описывает освещенность объекта. Когда игровой движок понимает, что на объект падает свет, он дает команду шейдеру «проявить» лайтмап в освещенных местах. 

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

Doom 3 — первая игра с попиксельным шейдерным освещением

Третий пример — эффекты постобработки. Например, ореол от источника освещения, размытие отдаленных объектов, эффект тумана или мутного стекла. Фрагментный шейдер обрабатывает объекты в поле зрения игрока, считает глубину сцены и вручную закрашивает нужные пиксели чтобы создать какой-либо эффект.

Как писать шейдеры 

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

Благодаря простому синтаксису языков программирования шейдеров их создание можно вынести в визуальный редактор. Так поступили разработчики движка Unity3D. Шейдеры Unity3D можно делать в визуальном интерфейсе Shader Graph и наблюдать за результатом в реальном времени. 

Интерфейс ShaderGraph в Unity3D