Відразу зазначу, що матеріал розрахований на тих, хто ніколи не працював з шейдерами або взагалі не знайомий з розробкою ігор, тобто це в певному сенсі науковий поп.
Слово «шейдер» у контексті розробки ігор дуже популярне, чути його могли й ті, хто гри не робить. Саме слово спочатку виникло від англ. shading (Затінення) – перші шейдери використовувалися, щоб передавати глибину за допомогою роботи зі світлом, блиском, тінями та іншим. Згодом шейдери стали використовуватися для абсолютно різного виду постобробки та взагалі малювання приблизно всього.
Говорячи загалом, шейдер — це просто програма для графічної карти. Тобто те, що пишеться школярами на паскалі (хіпстерами на пайтоні) – це програми для центрального процесора (CPU), а шейдери – для графічного (GPU). Особливість цих програм виходить з особливостей GPU — вони працюють паралельно на сотнях. маленьких отрут замість кількох великих, переважно здійснюючи математичні операції.
Тепер розберемося, як усе це працює.
Загалом мета шейдера – відмалювати деякий об'єкт. Тому візьмемо куб, розпишемо процес його відмальовування та подивимося, де використовуються шейдери та навіщо. Спочатку опишемо сам куб. Для графічної карти це 8 точок, між деякими з яких є площина. Кожна з точок описується трьома числами (правильно сказати, що це вершини). Крім цього, у кубика є колір і положення всередині світу.
Процес малювання
Процес малювання, якщо його досить спростити (що я й зроблю в рамках цієї статті), можна поділити на кілька кроків:
1. Отримання вхідних даних із пам'яті.
2. Виконання шейдера вершин.
3. Розтеризація.
4.Виконує шейдер пікселів (фрагментів).
5. Проведення тестів "глибини".
6. Відображення текстури для екрана.
У першому кроці відеокарта якимось чином отримує дані (вершини, площини, текстури) у свою відеопам'ять, нам це зараз не так важливо. Далі відбувається конвертація координат щодо об'єкта координати на екрані щодо камери. Після цього відбувається розтеризація – обчислюється, в яких пікселях вже на екрані знаходиться об'єкт. Такі пікселі називають фрагментами. Відмінність від пікселів полягає в тому, що фрагмент крім інформації про піксель містить ще й деяку побічну інформацію, отриману після растеризації. Для спрощення вважатимемо, що це все просто пікселі на екрані. Далі кожного пікселя виконується шейдер фрагмента. А потім перевіряється, що відстань від камери до фрагмента відповідає заздалегідь вирахуваному в потрібному напрямку в буфері глибини. Простіше кажучи, перевіряється, чи немає перед об'єктом ще чогось, і чи потрібно його малювати на підсумкове зображення.
Як бачите, у процесі малювання можна помітити два види шейдера. Насправді зараз є трохи більше видів, але вони не такі важливі для розбору, оскільки мають більш специфічний характер використання, а ми розповідаємо на пальцях. Але ті два, що нас хвилюють:
1. Шейдер вершин.
2. Шейдер фрагментів.
Шейдер вершин
Як сказано раніше, цей шейдер (або група шейдерів по черзі) займається переведенням координат щодо об'єкта, в координати на текстурі.
На картинці початок координат трохи не відповідає реальним, що так само не впливає на розуміння процесу 🙂
Пройдемося станами. У першому у нас, вочевидь, вхідні координати без надлишків.На другому вони були перенесені до координат щодо початку «світу». Потім вони переносяться в координати щодо точки, що дивиться (видно на другому малюнку), але помітно, що картинка плоска. Їхня проекція відбувається далі і ми отримуємо наші підсумкові координати. Всі ці операції виконуються шейдером. Крім іншого, він дозволяє не тільки відобразити реальні координати, а й модифікувати їх так, щоб спотворити об'єкт ефекту. Наприклад, я нещодавно писав шейдер, який перевертав спрайт, щоб відмалювати його тінь:
З цікавого – підсумкові вершини розміщуються на так званій поверхні Clip Space і знаходяться в діапазоні від -1.0 до 1.0. Саме з такими координатами згодом і працює відеокарта.
Шейдер фрагментів
Після перетворень вершин та растеризації потрібно вирахувати колір кожного фрагмента (пам'ятаємо, що для спрощення це пікселі). Наприклад візьмемо наш куб: ми пам'ятаємо, що він залитий одним кольором. Просто зробимо так, щоб колір кожного фрагмента став кольором куба і все:
Виглядає трохи дивно, так? Проблема в тому, що ми не бачимо ні тіні, ні текстури. Якби на кубі була якась текстура, ми помітили б перехід між гранями. Ось візьмемо текстуру:
Тепер достатньо в кожному пікселі просто брати колір із текстури. Але, щоб це зробити, потрібно додати для кожної точки куба ще інформацію: UV канал. Це координати виду (u, v). Звідси і назва, тому що x та y були зайняті. Вона надається вершині об'єкта і позначає точку на текстурі, що їй відповідає. Щоб було зрозуміліше, якщо ми хочемо на кожну грань куба намалювати знайоме нам обличчя, то UV координати для кожної грані виглядатимуть дуже просто:
Модифікувати їх не треба. Більше того, вважати координати для кожної точки теж не потрібно.Цим займається GPU, самостійно інтерполюючи точки з вершин.
Це дуже умовний приклад, але приблизно так у найпростішому випадку воно і працює:
Крім натягування текстур у піксельному шейдері можна, наприклад, отримати інформацію про освітленість і додати до кольору чорного пропорційно затемненню в цій точці, тоді об'єкт буде менш плоским. Взагалі робити з квітами можна що завгодно, наприклад підміняти їх залежно від гравця:
Крім UV каналу в шейдер в залежності від його виду приходять різні дані. Вони залежать від ігрового движка і графічної бібліотеки. дані в піксельний шейдер. Якщо це координата, то вона буде проінтеполована на основі положення фрагмента щодо вершин, між якими він знаходиться, як, наприклад, UV дані.
Загалом на цьому все 🙂
фрагмент може насправді трохи залазити на сусідні пікселі. Ця фраза винесла мозок навіть мені.
Фрагментами вони називаються від того, що є результатом роботи розтеризатора, який видає саме фрагменти (набір аттрибутів), з яких потім фрагментний шейдер порахує і запише в рендер таргет колір. .
Не змішуйте ці 2 поняття будь ласка.
шейдер (або група шейдерів по черзі) займається перекладом координат щодо об'єкта, координати на текстурі.Почав було обурено писати, але ви трохи нижче виправилися і згадали що все ж таки Clip Space 😉
Цим займається графічна бібліотека та движок, самостійно інтерполюючи точки з вершин. Варто вас похвалити – і на тобі. Яка бібліотека? Який двигун? Цим займається texture sampler прямо на GPU.
піксельному шейдері можна отримати інформацію про тіні Краще б ви це не писали, а то більшість народу подумає, що є якась вбудована функція прорахунку тіней на GPU 🙂
А взагалі інфа ну просто капець як поверхово подана – ті хто не в темі все одно нічого не зрозуміють, а ті хто в темі бугуртить (як це роблю я, ага))))
Коли ви граєте у відеогру або переглядаєте веб-сайт із гарною графікою, то навряд чи замислюєтеся, звідки ця «неземна краса» береться. А створюють її шейдери. Вони малюють реалістичні тіні, відображення, ефекти вогню, води та багато інших візуальних елементів. То хто ж такі ці шейдери? Давайте розберемося
Що таке шейдер
Шейдери – це невеликі програми, які використовуються в комп'ютерній графіці, щоб визначити, як виглядатиме кожен піксель на екрані. Вони допомагають створювати різні ефекти, кольори, текстури та освітлення в іграх, додатках та на сайтах.
Шейдери дозволяють програмістам налаштовувати зовнішній вигляд об'єктів на екрані за допомогою математичних обчислень. Вони працюють на графічних прискорювачах комп'ютера (GPU) і допомагають оптимізувати процес відображення графіки, роблячи зображення швидкими та красивими.
Простими словами, шейдери – це інструменти, які роблять зображення в іграх, додатках та на сайтах більш реалістичними, детальними та красивими.Вони відіграють важливу роль у створенні візуального образу віртуальних світів і допомагають нам поринути у дивовижні графічні досліди.
Для чого потрібні шейдери
Відеоігри
– Створення реалістичної графіки
Шейдери використовуються для додавання текстур, освітлення, тіней та інших візуальних ефектів, що робить ігровий світ більш переконливим та емоційно насиченим.
Шейдери дозволяють розробникам ігор оптимізувати продуктивність графіки, роблячи зображення більш красивими та швидкими одночасно.
Кіноіндустрія
– Створення візуальних ефектів
Шейдери використовуються в кіноіндустрії для створення вражаючих спецефектів, таких як космічні сцени, монстри, вибухи та багато іншого.
Шейдери допомагають покращити візуальну якість анімації, роблячи персонажів більш реалістичними та виразними.
Віртуальна та доповнена реальність
– Створення іммерсивного досвіду
Шейдери відіграють важливу роль у створенні іммерсивного віртуального та доповненого реальності, роблячи зображення більш живими та привабливими.
– Симуляція різних ефектів
Шейдери можуть бути використані для симуляції різних ефектів, таких як дощ, сніг, вогонь, вода і т.д., щоб посилити враження від віртуального світу.
Дизайн та візуалізація
– Створення привабливого дизайну
Шейдери можуть бути використані для створення стильного та унікального візуального стилю у дизайні веб-сайтів, реклами, архітектури та інших галузях.
Шейдери можна використовувати для візуалізації складних даних або моделей, що допомагає зробити інформацію більш доступною та зрозумілою.
Види шейдерів
1. Піксельні (фрагментні) шейдери
Для чого потрібні піксельні шейдери використовуються для визначення кольору та інших властивостей кожного пікселя на екрані, що дозволяє створювати різні ефекти, такі як тіні, освітлення, текстури та фільтри.
Де і як їх можна використовувати: піксельні шейдери широко застосовуються у відеоіграх для створення реалістичної графіки, кіноіндустрії для спецефектів, в дизайні для розробки стильних візуальних ефектів.
2. Вершинні шейдери
Для чого потрібні: вершинні шейдери задають форму та положення кожного вершини об'єкту 3D-моделі, забезпечуючи їх правильне відображення та анімацію.
Де і як їх можна використовувати: вершинні шейдери використовуються в 3D графіки для створення реалістичних моделей та анімації, у віртуальній реальності та доповненої реальності для візуалізації об'єктів та сцен.
3. Геометричні шейдери
Для чого потрібні: геометричні шейдери дозволяють змінювати геометрію об'єктів на льоту, додаючи або видаляючи вершини, що допомагає створювати складні форми та ефекти.
Де і як їх можна використовувати: геометричні шейдери застосовуються в архітектурній візуалізації, візуалізації наукових даних, створенні анімації та спецефектів у фільмах.
4. Обчислювальні (compute) шейдери
Для чого потрібні: обчислювальні шейдери дозволяють виконувати складні обчислення на графічному процесорі (GPU), що корисно для обробки даних, симуляції фізики, штучного інтелекту та інших завдань.
Де і як їх можна використовувати: обчислювальні шейдери використовуються в обробці аудіо та відео даних, у наукових дослідженнях, криптографії, машинному навчанні та інших обчислювальних завданнях.
Кожен вид шейдерів має свої специфічні можливості та застосування, які дозволяють створювати різноманітні візуальні ефекти та обробляти дані у різних галузях, таких як ігрова індустрія, кіно, дизайн, архітектура та наукові дослідження.
Як працюють шейдери
Давайте розберемося, як працюють шейдери на прикладі створення тіні у грі. Спочатку вершинний шейдер перетворює положення вершин об'єкта, щоб вони виглядали правильно щодо джерела світла та камери. Геометричний шейдер може додати додаткові вершини для розширення об'єкта та створення об'ємних тіней. Піксельний шейдер визначає колір кожного пікселя, враховуючи освітлення та текстури, та застосовує тінь до відповідних пікселів. Для роботи шейдери використовують різні мови програмування.
GLSL (OpenGL Shading Language)
Ця мова програмування використовується для написання шейдерів у графічній бібліотеці OpenGL.
HLSL (High-Level Shading Language)
HLSL застосовується для створення шейдерів у Microsoft DirectX, популярна платформа для розробки відеоігор.
Cg (C for graphics)
Cg є мовою програмування, розробленою компанією NVIDIA для написання шейдерів у графічних додатках.
SPIR-V (Standard Portable Intermediate Representation – Virtual)
SPIR-V – це універсальний бінарний формат, який може використовуватися в різних API та платформах, таких як Vulkan і OpenGL.
Отже, шейдери працюють на основі специфічного алгоритму обробки даних та виконуються спеціалізованими мовами програмування, які призначені для створення візуальних та обчислювальних ефектів у графічних додатках, іграх, віртуальній реальності та інших областях.
Читайте також, як створити комп'ютерну гру:
Чи не награлися ще Як створити комп'ютерну гру
Розвиток комп'ютерних ігор приваблює все більше і більше людей, і багато хто з них замислюється над створенням своєї власної гри. Але з чого розпочати? У цій статті ми розглянемо основні етапи розробки комп'ютерної гри
Двигуном прогресу у бік фотореалістичності картинки у комп'ютерній графіці є саме комп'ютерні ігри, адже саме графіка – головний фактор, що продає. Тому давайте саме в розрізі відеоігор і поговоримо про те, що таке "шейдери".
До того, як з'явилися перші графічні прискорювачі, всю роботу з відтворення кадрів відеоігри виконував бідолаха центральний процесор.
Відображення кадру, досить рутинна робота насправді: треба взяти "геометрію" – полігональні моделі (світ, персонаж, зброю тощо) та розтеризувати. Що таке розтеризувати? Вся 3d модель складається з найдрібніших трикутників, які розтеризатор перетворює на пікселі (тобто "розтеризувати" означає перетворити на пікселі). Після розтеризації взяти текстурні дані, параметри освітленості, туману і тп і розрахувати кожен результуючий піксель кадру, який буде виведений на екран гравцю.
Так ось, центральний процесор (CPU – Central Processing Unit) дуже розумний хлопець, щоб змушувати його займатися такою рутиною. Натомість логічно виділити якийсь апаратний модуль, який розвантажить CPU, щоб той зміг займатися більш важливою інтелектуальною працею.
Таким апаратним модулем став – графічний прискорювач чи відеокарта (GPU – Graphics Processing Unit). Тепер CPU готує дані та завантажує рутинною роботою колегу. Зважаючи на те, що GPU зараз це не просто один колега, це натовп міньйонів-ядер, то він з такою роботою справляється на раз.
Але ми поки що не отримали відповіді на головне питання: Що таке шейдери? Чекайте, я підводжу до цього.
Хороша, цікава та близька до фото-реалізму графіка, вимагала від розробників відеокарт реалізовувати багато алгоритмів на апаратному рівні. Тіні, світло, відблиски тощо. Такий підхід – з реалізацією алгоритмів апаратно називається "Фіксований пайплайн або конвеєр" і там, де потрібна якісна графіка, він тепер не зустрічається. Його місце посів “Програмований пайплайн”.
Запити гравців “Давайте, завозіть хороший графоній! дивуйте!”, штовхали розробників ігор (і виробників відеокарт відповідно) все до більш складних алгоритмів. Поки що в якийсь момент зашитих апаратних алгоритмів їм стало замало.
Настав час відеокарт стати більш інтелектуальними. Було прийнято рішення дозволити розробникам програмувати блоки графічного процесора довільні конвеєри, що реалізують різні алгоритми. Тобто, розробники ігор, графічні програмісти відтепер змогли писати програми для відеокарток.
І ось нарешті ми дійшли до відповіді на наше головне питання.
"Що таке шейдери?"
Шейдер (англ. shader — програма, що затіняє) — це програма для відеокартки, яка використовується в тривимірній графіці для визначення остаточних параметрів об'єкта або зображення, може включати опис поглинання і розсіювання світла, накладання текстури, відображення і заломлення, затінення, зміщення поверхні і безліч інших параметрів.
Що таке Шейдер? Наприклад, такий ефект можна отримати, це шейдер води застосований до сфери.
Графічний пайплайн
Перевага програмованого конвеєра перед його попередником у тому, що тепер програмістам можна створювати свої алгоритми самостійно, а не користуватися зашитим апаратним набором опцій.
Спочатку відеокарти оснастили кількома спеціалізованими процесорами, які підтримують різні набори інструкцій. Шейдери ділили на три типи залежно від того, який процесор їх виконуватиме. Але потім відеокарти стали оснащувати універсальними процесорами, що підтримують набори вказівок всіх трьох типів шейдерів. Розподіл шейдерів на типи зберігся для опису призначення шейдера.
Крім графічних завдань із такими інтелектуальними відеокартами з'явилася можливість виконання на GPU обчислень загального призначення (не пов'язаних із комп'ютерною графікою).
Вперше повноцінна підтримка шейдерів з'явилася у відеокартах серії GeForce 3, але зачатки були реалізовані ще GeForce256 (у вигляді Register Combiners).
Види шейдерів
Залежно від стадії конвеєра шейдери поділяються на кілька типів: вершинний, фрагментний (піксельний) та геометричний. А в нових типах конвеєрів є ще шейдери тесселяції. Докладно обговорювати графічний конвеєр ми не будемо, я все думаю, чи не написати про це окрему статтю, для тих хто вирішить зайнятися вивченням шейдерів та програмування графіки. Напишіть у коментарях якщо Вам цікаво, я знатиму, чи варто витрачати час.
Вершинний шейдер (Vertex Shader)
Вершинними шейдерами роблять анімації персонажів, трави, дерев, створюють хвилі на воді та багато інших штук.У вершинному шейдері програмісту доступні дані, пов'язані з вершинами, наприклад: координати вершини в просторі, її текстурні координатами, її колір і вектор нормалі.
Геометричний шейдер (Geometry Shader)
Геометричні шейдери здатні створювати нову геометрію і можуть використовуватися для створення частинок, зміни деталізації моделі «на льоту», створення силуетів тощо. На відміну від попереднього вершинного, здатні обробити як одну вершину, а й цілий примітив. Примітивом може бути відрізок (дві вершини) та трикутник (три вершини), а за наявності інформації про суміжні вершини (англ. adjacency) для трикутного примітиву може бути оброблено до шести вершин.
Піксельний шейдер (Pixel/Fragment Shader)
Піксельними шейдерами виконують накладання текстур, освітлення та різні текстурні ефекти, такі як відображення, заломлення, туман, Bump Mapping та ін. Піксельні шейдери також використовуються для постефектів.
Піксельний шейдер працює з фрагментами растрового зображення та текстурами — обробляє дані, пов'язані з пікселями (наприклад, колір, глибина, текстурні координати). Піксельний шейдер використовується на останній стадії графічного конвеєра для формування фрагмента зображення.
Обчислювальний шейдер (Compute Shader)
Крім шейдерів графічного пайплайну, сучасні відеокарти дозволяють писати обчислювальні шейдери. Це окремий пайплайн, який дозволяє використовувати обчислювальну потужність відеокарти, всі її ядра для розрахунку певного виду завдань.
Ці завдання мають масовим паралелізмом – ознакою, що обчислення по всій області не пов'язані між собою і, відповідно, можуть бути виконані паралельно.
Обчислювальні шейдери доступні і для розробників ігор, тому що сучасні графічні API надають можливість розробникам ігор використовувати їх для різних завдань (серед яких наприклад: GPU-частинки, skinning і т.д.)
На чому пишуть шейдери?
Спочатку шейдери можна було писати assembler-like мовою, але пізніше з'явилися шейдерні мови високого рівня, схожі на мову С, такі як: Cg, GLSL і HLSL.
Такі мови набагато простіше ніж C, адже завдання, які вирішуються за їх допомогою, набагато простіше. Система типів у мовах відбиває потреби програмістів графіки. Тому вони надають програмісту спеціальні типи даних: матриці, семплери, вектори тощо.
RenderMan
Все, що ми обговорили вище відноситься до реальногочасу графіка. Але існують недійсні графіки. У чому різниця – realtime – реальний час, тобто тут і зараз – давати 60 кадрів на секунду у грі, це процес реального часу. А ось рендер комплексний кадр для ультрасучасної анімації по кілька хвилин це non-realtime. Суть у часі.
Наприклад, графіку такої якості, як в останніх мультиплікаційних фільмах студії Pixar, отримати в реальному часі ми зараз не можемо. Дуже великі рендер-ферми обраховують симуляції світла за зовсім іншими алгоритмами, дуже затратними, але такими, що дають майже фотореалістичні картинки.
Супер-реалістична графіка в Sand piper
Наприклад, подивіться, на цей милий мультфільм, піщинки, пір'їнки пташки, хвилі, все виглядає неймовірно реальним.
*Відео можуть забанити на Youtube, якщо воно не відкривається, погуглите pixar sandpiper – короткометражний мультфільм для хороброго пісочника дуже милий і пухнастий. Зворушить і продемонструє наскільки крутою може бути комп'ютерна графіка.
Так це RenderMan від фірми Pixar.Він став першою мовою програмування шейдерів. API RenderMan є фактичним стандартом для професійного рендерингу, використовується у всіх роботах студії Pixar та не лише їх.
Корисна інформація
Тепер Ви знаєте, що таке шейдери, але крім шейдерів, є інші дуже цікаві теми в розробці ігор та комп'ютерній графіці, які напевно Вас зацікавлять:
- Партикли (системи частинок) – техніка створення приголомшливих ефектів у сучасних відео-іграх. Оглядова стаття та відео з уроками створення ефектів у Unity3d
- Для початківця Unity3d програміста, якщо Ви замислюєтеся про розробку відеоігор, як професійну кар'єру або хобі, ця стаття містить відмінний набір рекомендацій “з чого почати”, “які книги читати” і т.д.
Якщо залишилися питання
Як завжди, якщо у Вас залишилися якісь питання, ставте їх у коментарях, я завжди відповім. За будь-яке добре слово чи виправлення помилок я буду дуже вдячний.
Іноді пише статті про створення ігор та проводить інтерв'ю з розробниками. Зараз працює engine-progremmer'ом у Larian Studios. Великий шанувальник ігор Naughty Dog.