13 листопада 2023, 21:25 454

Як за допомогою шейдерів створити Vorley Noise ефект. Тред Render & UE5 Game Developer’а

Капітан GPU — Render developer та UE5 Game Developer, який публікує в X (твіттер) треди про програмування графіки та геймдев українською. Днями він опублікував цікавий і корисний тред про те, як за допомогою шейдерів створити Vorley Noise ефект.

Публікуємо його на форумі для тих, хто не сидить в X і щоб не загубилося.

Далі цитати з треду Капітана GPU:

Шум Ворлі (Vorley Noise), також відомий як шум Вороного та клітинний шум, є функцією шуму. Це розширення діаграми Вороного, яке виводить реальне значення заданої координати до найближчого початкового числа.
Шум Уорлі використовується для створення процедурних текстур. За допомогою нього можна створювати різні ефекти та візерунки з реального життя.
Шум Уорлі можна створити за допомогою поділу текстурного простору на сітку, зрушити центр кожної клітини на випадкове значення, а для кожного пікселя в клітині — обчислити мінімальну відстань до найближчого центру клітини.
Для візуалізації кожного кроку та реалізації цього ефекту я використовуватиму glslCanvas, а використовуючи написану мною раніше статтю про основи програмування шейдерів мовою GLSL, ви можете налаштувати всі потрібні інструменти і повторювати кожен мій крок. twitter.com/...tatus/1718721123792068973
Ось так виглядає базовий код шейдера, він повертає чорний колір пікселя та має реалізацію псевдо-випадкового шуму, а також значення координат пікселів та поточне значення часу.
Насамперед, нам треба отримати UV-координати, які в майбутньому будуть використовуватися для формування сітки з клітин.
Визначимо кількість клітин по висоті та ширині сітки. Я вибрав значення 5, тобто сітка буде розміром 5×5 клітин. Помножимо це значення на UV-координати.
Обчислимо номер клітини кожного пікселя, для цього відкинемо дробову частину UV-координати з допомогою функції floor(). На візуалізації можна побачити лише чотири кольори, пов’язане це з тим, що значення кольору кодується в діапазоні [0..1], і номери клітин більше 1 відображаються жовтим кольором.

UV-координати пікселя кожної клітини можна отримати відкинувши цілу частину UV-координат сітки за допомогою функції fract(). Отримане таким чином значення UV-координат у кожній клітині знаходиться в діапазоні [0..1]

Відібравши від значення UV-координат клітини 0.5, ми пересунемо значення центру UV-координат до центру кожної клітини, змінивши значення діапазону UV-координат з [0..1] до [-0.5 ... 0.5]. На візуалізації побільшало чорного кольору, пов’язано це з тим, що значення яке менше нуля, відображаються чорним кольором.

Тепер треба перевести UV-координати клітини в модульні UV-координати клітини, взявши модуль значення UV-координат клітини (абсолютне значення). Іншими словами, ми всі значення UV-координат клітини перевели у позитивне значення, змінивши діапазон з [-0.5...0.0...0.5] на [0.5...0.0...0.5].

Використовуючи теорему Піфагора, за допомогою трансформованих UV-координат клітини знаходимо значення відстані даного пікселя до центру клітини.

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

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

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

Ми можемо змістити центр кожної сусідньої клітини, додавши до неї значення синус навпіл, від поточного значення часу. На візуалізації видно як тепер центри клітин зсуваються в одному напрямку (синусної амплітуди).

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

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

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