РОЗРОБКА ШЕЙДЕРНИХ ЕФЕКТІВ ДЛЯ ГРИ

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

Шейдер – це скрипт, який покращує графіку гри. Шейдери потрібні для симуляції частинок, простої анімації об’єктів і постпроцесингу зображення. Розповідаємо, як працюють шейдери та інші графічні ефекти.

приклад використання шейдерів у Minecraft

Minecraft із шейдерами освітлення та симуляції води

Як відеокарта обробляє шейдери

Відеокарта – це комплекс обчислювальних блоків. Кожен блок робить своє завдання:

  • відеочіп – обмінюється інформацією між обчислювальними блоками відеокарти і процесором;
  • геометричні блоки – розраховують і будують тривимірні об’єкти;
  • блоки текстурування – вибирають і фільтрують текстурні дані та накладають їх на об’єкти;
  • шейдерні блоки – обраховують шейдери і застосовують їх до об’єктів і текстур;
  • блоки растеризації – отримують інформацію від інших блоків і формують з неї пікселі для відображення на екрані.

Відеокарта спочатку формує геометрію об’єктів, які будуть відображатися на моніторі. Потім накладає на об’єкти текстури. Зараз сцена виглядає плоскою: текстура не реагує на освітлення, об’єкти не відкидають тінь. Ці та інші ефекти можна додати за допомогою шейдерів.

The Witcher 3 шейдери

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

Грубо кажучи, шейдери – це аналог фільтрів в Інстаграмі.

ОТРИМАТИ КОНСУЛЬТАЦІЮ

Історія появи шейдерів

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

У відеокартах 90-х років ще не було окремих шейдерних блоків. Самі відеокарти вміли виконувати обмежені набори команд. Через це нестандартні алгоритми доводилося виконувати на центральному процесорі. Завдяки цим ефектам деякі старі ігри мали кращий вигляд, коли графіку рендерив CPU, а не дорога відеокарта.

Наприклад, у Quake 2 було два способи відображення води:

  • апаратний рендеринг – відеокарта відображала воду як статичний синій світлофільтр;
  • програмний рендеринг – процесор відображав воду як динамічну текстуру з ефектом сплесків.
вода в quake 2 без шейдерів і з шейдером

Шейдери в Quake 2

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

Уперше шейдери з’явилися в Quake 1 – там вони відповідали за динамічне освітлення. Скрипт отримував інформацію про координати джерела світла, рахував відстань від джерела світла до найближчих полігонів і освітлював пікселі їхньої текстури під час рендерингу кадру.

система освітлення в quake 1

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

Потім шейдери стали використовувати для створення динамічного освітлення і текстур, ефектів води, туману і вогню, а також для трави. Виробник відеокарт NVidia придумав шейдер для симуляції поведінки волосся, який використовувався в іграх The Witcher 3 і Tomb Raider.

Якими бувають шейдери

Є такі основні види шейдерів:

  • вершинні (Vertex) – працюють із вершинами об’єктів або окремими точками в просторі;
  • геометричні – працюють із лініями та трикутниками;
  • фрагментні – працюють із пікселями, змінюють їхній колір залежно від того, що відбувається в сцені.

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

У відеокарти 2007 року 17 шейдерних процесорів, у сучасної RTX 2080 - 3072

У відеокарти 2007 року 17 шейдерних процесорів, у сучасної RTX 2080 – 3072

Що можна зробити з вершинними шейдерами

Вершинні шейдери потрібні для зміни координат вершин 3D-об’єктів. Наприклад, вершинний шейдер дає змогу отримати координати вершин сфери, а потім змінити їх так, щоб вийшов куб. Сама 3D-модель у файлах гри водночас не змінюється – змінюються тільки координати її вершин під час рендерингу зображення.

Найпопулярніше завдання вершинних шейдерів – це скінінг або скелетна анімація. Розробник робить всередині 3D-моделі скелет і за допомогою вершинного шейдера прив’язує до скелета шкіру – skin. Шкіра – це група вершин моделі, які розташовані навколо однієї кістки. Коли рухається кістка, то рухаються і прив’язані до неї вершини. Текстура між вершинами різних кісток розтягується, але це краще, ніж “відірвані” руки з ранніх 3D-ігор.

скінінг за допомогою вершинного шейдера

Друге популярне завдання – деформація об’єктів у реальному часі. Раніше за допомогою таких шейдерів робили реалістичні хвилі на воді. Зараз деформацію використовують для створення реалістичного снігу, бруду, вм’ятин на автомобілях і слідів від попадання куль.

Третє завдання – алгоритмічна анімація об’єктів. Наприклад, за допомогою вершинних шейдерів можна зробити низькополігональну траву або трикутне листя і змусити їх рухатися від поривів вітру. Також можна зробити реалістичну анімацію мотузок або тканини.

шейдер трави на Unity 3D

На створення цієї трави за допомогою шейдера Unity 3D знадобилося 137 рядків коду

А ще є частинки – окремі рухомі точки. Шейдерні частинки потребують менше ресурсів, ніж якби рушій рендерував їх так само, як 3D-об’єкти або спрайти.

Що можна зробити з геометричними шейдерами

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

Найчастіше геометричні шейдери використовують для тесселяції – підстроюванням складності відображуваної моделі залежно від дистанції до неї. Для прикладу візьмемо сферу, яка складається з 10 000 полігонів. Якщо віддалити її від камери так, щоб вона займала квадрат 10х10 пікселів, то відеокарта все одно буде обраховувати 10 000 полігонів і даремно витрачати ресурси. Якщо наблизити сферу до камери, то гравець побачить незграбні грані начебто круглої сфери.

приклад роботи геометричного шейдера

Геометричний шейдер самостійно прибирає або додає полігони

Геометричні шейдери тесселяції дають змогу зробити так:

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

Також геометричні шейдери можна використовувати для поліпшення каменів, стін, тканини та будь-яких нерівних поверхонь. Якщо потрібно додати нерівностей – геометричний шейдер втисне або видавить полігони за заданим алгоритмом.

геометричний шейдер в іграх

Крім трикутників геометричні шейдери можуть генерувати прямі лінії. Можливо налаштувати шейдер так, щоб він генерував додаткові лінії тільки на гранях об’єкта. Таким чином можна зробити краї об’єктів шорсткими або плавними залежно від типу об’єкта.

Що роблять фрагментні шейдери

Фрагментні або піксельні шейдери модифікують колір відображуваних пікселів. За допомогою піксельних шейдерів і алгоритмів можна робити градієнтні фільтри, віньєтки по краях екрана, шум і зернистість зображення.

Фрагментні шейдери працюють так само, як піксельні, але їх можна застосовувати до фрагментів растрового зображення і текстур. Наприклад, додати ефект світіння, розмити об’єкт не у фокусі або згенерувати текстуру за допомогою алгоритму.

приклад роботи піксельного шейдера

Типовий приклад використання фрагментних шейдерів – мультитекстурування. Мультитекстурування необхідне для роботи лайтмапів (lightmap) та імітації системи освітлення. Воно працює так: поверх текстури об’єкта накладається прозорий лайтмап – додаткова текстура, яка описує освітленість об’єкта. Коли ігровий рушій розуміє, що на об’єкт падає світло, він дає команду шейдеру “проявити” лайтмап в освітлених місцях.

Другий приклад – попіксельне освітлення. Такий піксельний шейдер збирає інформацію про освітленість моделі і вручну змінює яскравість кожного пікселя текстури об’єкта. Попіксельне освітлення дає змогу домогтися реалістичного освітлення на динамічних об’єктах, а також зробити динамічні тіні.

doom 3 з піксельним шейдером

Doom 3 – перша гра з попіксельним шейдерним освітленням

Третій приклад – ефекти постобробки. Наприклад, ореол від джерела освітлення, розмиття віддалених об’єктів, ефект туману або каламутного скла. Фрагментний шейдер обробляє об’єкти в полі зору гравця, зчитає глибину сцени і вручну зафарбовує потрібні пікселі, щоб створити якийсь ефект.

Як писати шейдери

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

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

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

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

Висновки

Якби не шейдери – сучасні ігри виглядали б як Wolfenstein 3D із деталізованими моделями. Саме шейдери роблять ігри красивими:

  • створюють освітлення та інші графічні ефекти;
  • симулюють поведінку води, тканини, снігу та інших матеріалів;
  • забезпечують роботу системи частинок;
  • роблять анімації реалістичнішими.

Робота з шейдерами вимагає хорошої математичної бази: потрібно розуміти математичні функції, матричні перетворення, графи та багато іншого. Спеціаліст із шейдерів – це окрема професія з високим порогом входження.

Якщо вам потрібно створити графічні ефекти (VFX) для гри – звертайтеся. У нас є фахівці з VFX з великим досвідом створення найрізноманітніших ефектів за допомогою шейдерів.

Связаться с нами:

hey@koloro.ua
+447 44 55 3 66 31 (мессенджеры)

Обговорити проект

– Побудова плану робіт
– Комплектація команди
– Ціни та Терміни