Принципи роботи світла і дзеркальних відображень в іграх

Вітаємо. У цього блогу два автори: Микита Лужанський (Unreal Developer Pingle Studio) і Євген Карпенко (Render Developer Pingle Studio). Разом ми розглянемо основні принципи роботи зі світлом та віддзеркаленнями, до яких розробники вдавалися раніше, та якими користуються зараз.

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

☀️Частина перша: Світло. Хвиля. Максвелл
👥Частина друга: Фонг. Двійники. Піксель

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

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

Але спроба зробити модель ідеальною призведе до «займання» системного блоку ПК, тому завжди йде розмова про баланс ціни/якості картинки. Одним із найвибагливіших до ресурсів частин моделювання є світло: його заломлення та віддзеркалення.

Частина перша: Світло. Хвиля. Максвелл

Наука, яка вивчає світло, називається оптикою. Її можна розділити на два підвиди: геометрична та фізична. Перша представляє світло як промінь, де світло поширюється прямим шляхом. Друга, фізична, розглядає світло як електромагнітну хвилю. Обидві дисципліни мають свої сфери застосування і, як і будь-яка теорія, обмеження. Розгляд почнемо з геометричної оптики.

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

В однорідному середовищі світло поширюється прямолінійно найкоротшим шляхом.

Мал. 1 — Світло поширюється прямими (помаранчеве), криволінійними траєкторіями світло не поширюється (червоне)

Якщо ж світло потрапляє на межу розділу двох середовищ, у яких швидкість поширення світла різна (повітря/вода), то промінь переломиться, проходячи цей кордон. З міркувань симетрії можна зробити висновок, що падаючий, заломлений і відбитий промені повинні лежати в одній площині перпендикулярної до межі розділу.

По суті, цих двох принципів достатньо для того, щоб вивести закон Снеліуса і побудувати найпростішу лінзу.

Мал. 2 — Закон Снелліуса. Кут падіння променя дорівнює куту відбиття. При проходженні через границю розділу промінь змінює напрямок, залежно від швидкості світла у двох середовищах

Мал. 3 — Промені падають на поверхню матеріалу, що пропускає світло. (а) — поверхня сфери, відбувається відбиття від нормалі в точці падіння та заломлення при проходженні всередину сфери. (б) — дві секції сфери, промені потрапляють у крапку за поверхнею — фокальна точка лінзи

Розмірковуючи з самого початку, хтось міг поставити запитання, а чому саме світло відбивається або заломлюється. Основу відповіді дав британський учений Джеймс Максвелл. Він зміг показати, що світло — це електромагнітна хвиля, та запропонував експеримент, що довів неспроможність теорії «світлоносного ефіру», котрий був поставлений Майкельсоном та Морлі.

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

Коли електромагнітна хвиля проходить через середовище, що містить атоми або молекули, її електричне поле впливає на електрони в цих атомах або молекулах. Ця дія може спричинити коливання електронів навколо своїх ядер. Електрони під дією електричного поля хвилі починають «рухатися вгору і вниз», створюючи додаткові вторинні поля. Ці «коливання» електронів є реакцією на вплив світла.

Мал. 4 — Електромагнітна хвиля збуджує електрон, який переходить у «збуджений стан»

У матеріалах з великою кількістю вільних електронів, таких як метали, електрони можуть легко рухатися у відповідь на вплив світла.

Електронна структура, тобто механізм як електрони поводять себе всередині металів характеризується наявністю «вільних» електронів у зоні провідності. Ці електрони можуть легко рухатися під впливом зовнішнього електричного поля. Коли світло падає на метал, електрони у атомній гратці починають «коливатися» під дією електричного поля світла. В результаті цих коливань виникають нові електромагнітні хвилі, які взаємодіють із падаючим світлом.

Мал. 5 — Хвиля потрапляє на електрон 1 (I), поглинається ним (II), електрон 1 перебуває в «збудженому стані» (III), випромінює вторинну електромагнітну хвилю (IV), електромагнітна хвиля поглинається електроном 2 (V)

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

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

Мал. 6 — Приклад блокування інфрачервоних електромагнітних хвиль скляною панеллю. Джерело.

Частина друга: Фонг. Двійники. Піксель

Для відтворення або рендеру на екрані монітора сцени з лампою і об’єктом, що освітлюється, — наприклад, кубом — потрібно створити таку логіку, яка б виконувалася на комп’ютері користувача, обробила положення всіх ключових елементів і їх параметрів, потім відправила пакети даних на відеокарту і результат обробки вивела на екран.

Розберемо послідовність цих процесів.

Об’єкти на сцені розташовані щодо центру світу або початку координат у нулі (0, 0, 0). Віртуальна камера — те, що нібито вважається екраном користувача. Передбачається, що вона складається з набору світлочутливих елементів — пікселів. Камера може вільно переміщатися світом, тоді як джерело світла і куб знаходяться в закріплених позиціях.

Застосовуючи правила лінійної алгебри, можна перетворити положення куба і джерела світла зі світових координат в координати камери. Джерело світла випускає прямолінійні промені, які, відбиваючись від об’єкта, потрапляють у камеру або розсіюються. Поверхня куба описується набором параметрів, що задають правила, за якими світло відбивається від поверхні (шорсткість, металевість, колір). Завданням є вирішення певних рівнянь, які обчислюють колір і інтенсивність променя, що йде до камери через кожен піксель.

Мал. 7 — Сцена містить джерело світла (жовте), куб (червоне) та камеру (синє)

Все це має виконуватися 30/60/120 разів на секунду, залежно від цільової частоти кадрів у грі.

Ми пропустимо процес попередньої обробки куба і перетворення координат зі світових на локальні — простір камери, оскільки це окремий складний і цікавий процес, що виходить за рамки даного тексту.

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

Розглянемо лише відбиття від куба. Існуюча модель, яка враховує напрям джерела світла і колір об’єкта, що освітлюється, називається моделлю Фонга. Вона моделює відбите світло як три складові. Фонова — загальне освітлення сцени з джерелом. Дифузна — рівномірне відбиття променів джерела поверхнею куба. Дзеркальна — відблиски на поверхні при напрямку камери яка мало відрізняється від напрямку відбитого променя від поверхні.

Мал. 8 — Модель освітлення Фонга. Ліворуч — фонова складова (ambient), дифузна (diffuse), дзеркальна (specular), комбінація трьох складових (combined). Джерело

Все стає складніше, коли потрібно моделювати відбиття світла від дзеркальних поверхонь. Основна проблема полягає у складності повторення ефекту віддзеркалення: рендер повинен врахувати, що куб перед дзеркалом створює копію себе всередині дзеркала, немов дзеркало створює окремий світ — задзеркалля, в якому теж є джерело світла і сам куб, але немає камери. Так можна уявити, що дзеркала не існує, а є просто дублікат сцени. Цей підхід називається «кімнати-двійники»

Мал. 9 — Кімнати-двійники. Камера бачить дзеркальну поверхню, яка насправді є «порталом» між двома областями простору, в яких знаходяться дві копії одного об’єкта

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

Інший спосіб робити дзеркала у відеоіграх — це відрендерити рівень щодо положення дзеркала. Тобто поставити камеру з погляду дзеркальної поверхні та рендерити все в текстуру, яка в базовому проході візуалізації (base render pass) буде використана як текстура дзеркала (мал. 10).

Мал. 10 — Текстура дзеркала як поверхня, що відбиває

В даному випадку все ще залишається проблема з подвоєнням текстур і кількості геометрії, що відображається. Але вирішується проблема з простором для дзеркальної кімнати. У даному проході використовується два проходи візуалізації.

Перший — reflection pass, прохід візуалізує сцену щодо положення дзеркала. Другий — базовий прохід візуалізації сцени, але вже з погляду ігрової камери. Оскільки дзеркало це площина, то подібний спосіб візуалізації називається planar reflection (мал. 11).

Мал. 11 — Planar reflection та область захоплення реальною камерою

Через подвійний прохід візуалізації зростає кількість текстур і геометрії, що відображається. Фактично одна і та ж геометрія сцени рендериться двічі. Для оптимізації можна використовувати менший розмір мети візуалізації (render target size) для дзеркального проходу візуалізації (reflection pass).

Наприклад, ми можемо розрахувати розмір дзеркала у фінальному кадрі гри, і використовувати цей розмір як розмір текстури, в яку буде рендеруватись дзеркальний прохід візуалізації. Якщо розмір кадру в грі 1920×1760, і в цьому кадрі ми можемо розрахувати, що дзеркало має розмір у 100×200 пікселів, то перший дзеркальний прохід візуалізації буде рендеритися в текстуру розміром 100×200, а базовий прохід візуалізації — в 1920×17. Таким чином, зміна за розміром мети рендерингу для reflection pass буде більш продуктивною (мал. 12).

Мал. 12 — Різні Render target для різних дозволів. Джерело

Крім того, для reflection pass можна використовувати більш низьку якість геометрії, наприклад один із рівнів LOD (мал. 13).

Мал. 13 — Різні LOD-и однієї моделі для оптимізації. Джерело

А також використовувати більш низьку якість текстури або їх MIP (мал. 14). LOD геометрії під час растеризації сцени буде набагато продуктивнішим, а використання MIP текстури дозволить розвантажити смугу пропускання текстурного семплера в шейдері.

Мал. 14 — MIP текстурування. Джерело

На додачу до цього, для reflection pass можна додати відсікання геометрії з використанням culling алгоритмів (мал. 15), щоб контролювати, що саме має рендеруватися в reflection pass з більшим рівнем оптимізації.

Мал. 15 — Різні алгоритми culling-а. а) Frustrum culling — об’єкти поза конусом камери не обробляються. б) Backface culling — задня сторона об’єкта не обробляється. в) Occlusion culling — прихована від камери геометрія не обробляється

Ще один спосіб візуалізації дзеркальних поверхонь у відеоіграх називається cubemap reflection. Суть його полягає у використанні готових кубічних текстур, у яких візуалізоване оточення сцени (мал. 16).

Мал. 16 — Cubemap reflection. а) Віддзеркалення навколишнього середовища на об’єкті. Джерело

Кубічна текстура — набір із 6 текстур, де кожен елемент відповідає певному напрямку в оточенні, в якій вже заздалегідь візуалізоване оточення. Вибір пікселя з текстури для підстановки їх у кадр (семплювання), на відміну двомірних текстур, використовує вектор напрямку (мал. 17).

Мал. 17 — Вектор напрямку, як вектор, що проходить з центру куба до центру пікселя

У піксельному шейдері ми за допомогою вектора напрямку з камери і вектора напрямку поверхні (нормалі поверхні) можемо обчислити вектор віддзеркалення, і за його допомогою семплювати піксель з кубічної текстури (мал. 18).

Мал. 18 — Cubemap віддзеркалення. а) Вектор спрямований з камери (помаранчевий), нормалі поверхні (червоний) і вектор до cubemap (синій). б) Віддзеркалення із різних напрямів на об’єкт. Джерело

Це дасть абсолютно дзеркальну поверхню з точки зору оточення. Цей підхід часто використовується в сучасних ігрових рушіях. Єдине, що для нього потрібне, — заздалегідь мати кубічні карти оточення. Вони можуть бути сформовані як заздалегідь, так і сформовані на окремому проході візуалізації (мал. 19).

Мал. 19 — Кубічні карти оточення у різних ігрових двигунах. а) Unreal Engine. Джерело. б) Unity. Джерело.

Майже всі сучасні ігрові рушії надають такий механізм. Десь він називається Reflection CubeMap, десь — Environment CubeMap, десь — Reflection Probe, але всі вони надають схожий функціонал — механізм створення кубічних карт оточення.

Наступною технікою реалізації віддзеркалень в іграх є відображення в просторі екрана (screen space reflection, SSR). Це метод рендерингу, який використовується в графіці в реальному часі для імітації віддзеркалень на таких поверхнях, як вода, скло або полірований метал. Цей ефект досягається шляхом повторного використання інформації з поточної сцени (простору екрану) для апроксимації віддзеркалень, і забезпечує баланс між продуктивністю та якістю зображення (мал. 20).

SSR використовує буфер глибини та інформацію про колір з візуалізованої сцени для розрахунку приблизних віддзеркалень для поверхонь, що відбивають. Замість трасування окремих променів для кожного відображеного пікселя, він здійснює вибірку сусідніх пікселів і використовує їхню інформацію для створення ефекту віддзеркалення. Алгоритм звертається до буфера глибини, в якому зберігається інформація про глибину для кожного пікселя сцени. Крім того, він отримує колірну текстуру, що містить кольори (мал. 21).

Мал. 21 — Алгоритм проходження променя. (а) — інформація зі сцени для роботи алгоритму; (б) — аналіз буфера глибини та віртуальний промінь

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

Щоб зменшити шум та артефакти до остаточної текстури віддзеркалення, можна застосувати етап розмиття, згладжуючи ефект (мал. 22).

Мал. 22 — Застосування згладжування. Джерело

Головна перевага такого підходу — це продуктивність. У порівнянні з трасуванням променів SSR забезпечує швидший час рендерингу, що робить його придатним для відеоігор з помірними вимогами до якості віддзеркалення. А завдяки його гнучкості, алгоритм можна реалізувати на різних платформах та інтегрувати до існуючих конвеєрів рендерингу.

Звичайно, є недоліки. Точність відбиття може бути не дуже високою, особливо для складних сцен або об’єктів з глибокою геометрією. Розмиття іноді може призводити до появи артефактів. SSR зазвичай погано працює з дуже глянцевими поверхнями. Проблемою є неможливість візуалізувати віддзеркалення для поверхонь, напрямок відображення яких виходить за екранний простір (мал. 23).

Мал. 23 — Артефакти застосування SSR

Останній варіант, який ми розглянемо, це PBR (physically based rendering) — метод, заснований на фізичних принципах. Він дозволяє створювати більш реалістичні зображення. Метали — один із важливих матеріалів, які можна реалізувати за допомогою цього методу.

PBR враховує колір покриття, оскільки метали можуть мати різний хімічний склад поверхні. Вони можуть бути гладкими або шорсткими, що впливає на те, як відбивається світло. Гладкість — це те, наскільки глянсовою чи матовою виглядає поверхня.

Однією з головних властивостей матеріалів PBR є анізотропія. Можна сказати, що це властивість матеріалів, при якому їх оптичні властивості змінюються в залежності від напрямку (мал. 24).

Мал. 24 — Анізотропна поверхня металу після обробки на верстаті

Для реалізації PBR рендерингу металів використовуються (мал. 25):

Ключова різниця між металами та неметалами в PBR полягає в тому, як вони відбиває світло, і як відбувається їхня обробка в конвеєрі рендерингу (мал. 25).

Мал. 25 — Приклад градієнтного значення металізації (а) та шорсткості (б) та інших параметрів (в) при використанні PBR. Джерело 1, Джерело 2

Метали мають дзеркальне відображення, тобто вони відбивають світло під певним кутом залежно від положення глядача і напряму джерела світла. Це створює різкі відблиски та чіткі віддзеркалення навколишнього середовища.

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

Методи реалізації дзеркал в іграх

У робочих процесах PBR карта металів використовується визначення ступеня металевості матеріалу. Значення 1 вказує на ідеальний метал, а 0 на неметал.

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

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

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

Підписуйтеся на Telegram-канал @gamedev_dou, щоб не пропустити найважливіші статті і новини