Налаштування шейдера для світіння, щоб він виглядав краще


9

У мене проста гра, і тематикою цього є ці маленькі рядки. Він орієнтований на iOS та android, тому у нього є ВЕЛИЧЕЗНИЙ діапазон процесорів, який він може працювати зараз.

введіть тут опис зображення

Я намагаюся додати їм світіння в режимі реального часу з двох причин

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

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

Моя найбільша проблема - всі змінні, які беруть участь у тому, щоб зробити його найкращим.

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

  • A. Додайте режим накладання, режим суміші екрана або інший змішувач
  • B. Вага розмиття, і нормально по-різному перед комбінацією
  • C. Сигма функції гауссового дзвоника (я використовував цей заплутаний калькулятор, але, схоже, він не дає тих самих значень, як я бачу в інших людей)
  • D. Скаляри на значення "x", надіслані функції sigma
  • E. Шкала зразка (робить радіус розмиття меншим або більшим)
  • F. Зміна роздільної здатності буфера світіння

Як можна знайти "найкраще виглядаючі" константи, коли працює з такою кількістю змінних, як ця?

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

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

Відповіді:


8

Сигма і розмір ядра Гауссового фільтра

Щодо того, як вибрати сигму та розмір ядра (пікселів) Гаусса: ви встановлюєте сигму залежно від того, яку ширину розмиття вам потрібно (судячи з неї візуально), а потім вибираєте розмір ядра на основі сигми. Це гра на пошук розміру ядра, яка фіксує достатню кількість (математично нескінченної) кривої дзвона, щоб виглядати добре, при цьому не надто дорого.

Як правило, розмір ядра повинен бути не менше 6 разів від сигми. Тоді ядро ​​простягається до 3 сигм у кожному напрямку, що достатньо, щоб покрити майже всю вагу математичної кривої дзвону. Також непогано округлити розмір пікселя до наступного непарного числа, тому фільтр буде симетричним. Так, наприклад, при sigma = 1,5 px, ви б використовували 9-піксельний фільтр; із сигмою = 2,0 пікс, використовуйте 13-піксельний фільтр тощо.

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

До речі, фокус для отримання кращої продуктивності у великих гауссових розмиттях полягає в тому, щоб зменшити вибірку зображення, виконати меншу розмитість, а потім збільшити вибірку. Наприклад, щоб отримати ефективне розмиття 13 пікселів, ви можете зменшити вибірку зображення на 2 рази (за допомогою білінеарної фільтрації), потім виконати розмиття у 7 пікселів, а потім збільшити вибірку (використовуючи білінеарну фільтрацію). Це буде виглядати майже так само добре, як 13-піксельне розмиття, але буде значно швидше.

Створення гарного фільтру світіння

Загальна хитрість із цим полягає у використанні кількох гауссів різного радіусу, доданих разом. Він робить кращий ефект відблиску, ніж будь-який один Гаусс сам по собі. Наприклад, ось макет у Photoshop, створений з трьома шарами, що додатково змішуються між собою. Три гаусса мають розміри 3px, 5px та 11px (що відповідає сигма = 0,5px, 0,83px, 1,83px відповідно).

фільтр для макетного цвітіння

Ви також можете додати ще більших гауссів, щоб ще більше збільшити видимий радіус світіння. Ось як реалізований стандартний ефект "цвітіння" в 3D-ігрових двигунах.

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

Жгутики

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

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


@Nathan_Reed Я застосував більшість ваших порад, за винятком того, що не робив MSAA, що, як не дивно, зробило трюк з не сильним ударом на 2x. Якщо у мене виникло запитання щодо додавання до цього моменту більшої кількості важливих моментів, чи слід відредагувати питання чи зробити нове?
J.Doe

@ J.Doe Чудово, радий почути, що це працює! Я б сказав, що краще задати нове запитання щодо налаштування ефекту, якщо у вас конкретний вигляд.
Натан Рід
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.