Огляд #4 — Рендеринг і генеративне мистецтво

Симуляцій у категорії

Симуляції на GLSL-шейдерах

Базові алгоритми

Генеративне мистецтво — це місце, де математика стає видимою. На відміну від фізичних симуляцій, що моделюють реальні системи, симуляції рендерингу керуються чистим візерунком — рекурсією, шумом, зворотними зв'язками та хвильовими рівняннями. Це також найвимогливіші до GPU симуляції на сайті, тож вони демонструють, на що здатен конвеєр WebGL у браузері.

Симуляції

GLSL-шейдери та трасування променів

☁️ Трасування променів (Ray Marching) Сферичне трасування функцій зі знаком відстані — рендеринг неможливих форм без жодної геометрії. Використовує класичну бібліотеку SDF: сфери, куб, тор, плавне змішування smooth-min. GLSL фрагментний шейдер · SDF 🎵 Фігури Хладні Пісок самоорганізується у вузли стоячої хвилі на вібруючій пластині. Візерунок — це розв'язок двовимірного хвильового рівняння в частинних похідних, відображений як теплова карта в реальному часі. 2D хвильове рівняння · Canvas 2D 🌈 Кольори світла Спектральний розклад білого світла — як інтерференція в тонких плівках створює переливчастий колір. Функції кольоропідбору CIE XYZ, перетворені у sRGB на GPU. GLSL · Наука про колір CIE 〰️ Інтерференція на двох щілинах Дослід Юнга з двома щілинами з регульованою довжиною хвилі, шириною та відстанню між щілинами. Принцип Гюйгенса, відображений як накладене хвильове поле. Суперпозиція хвиль · Canvas 2D

Реакція-дифузія та системи зворотного зв'язку

🧫 Реакція-дифузія Модель морфогенезу Алана Тюрінга 1952 року — дві хімічні речовини (активатор та інгібітор) породжують плями, смуги та лабіринтоподібні візерунки. Пінг-понг фреймбуферів на GPU. Грей-Скотт · WebGL пінг-понг 🔲 Клітинні автомати «Гра в життя» Конвея плюс сім альтернативних наборів правил: HighLife, День і Ніч, Лабіринт, Move, Реплікатор, Seeds і 2×2. Сітка 1024×1024, обчислена на GPU. Обчислення WebGL · Текстурний буфер 💨 Дифузія Дифузія броунівського руху, відображена як поле густини — частинки, що виконують випадкові блукання і колективно формують гаусів фронт розповсюдження. Броунівський рух · Canvas 2D ❄️ Зростання кристалів Дифузійно-обмежена агрегація та розгалуження Ліхтенберга — як сніжинки та мінеральні дендрити набувають фрактальної форми через стохастичне зростання. DLA · Фрактал

Генеративна геометрія та шум

🌿 Папороть Барнслі Фотореалістична папороть, згенерована лише чотирма афінними перетвореннями та випадковим числом. Канонічний приклад ітерованої функціональної системи Майкла Барнслі. IFS · Ітерована функціональна система 🌀 Діаграма біфуркації Шлях логістичного відображення до хаосу — кожна точка на осі x — значення параметра, кожна точка на осі y — стаціонарна популяція. Метелик теорії хаосу. Логістичне відображення · Теорія хаосу 🌊 Хвилі у ванні Відбиття хвиль на мілководді в обмеженій області — моди резонансу, стоячі хвилі та крайова дифракція — усе кероване інтерактивним дотиком/перетягуванням. Рівняння мілкої води · WebGL 🫧 Бульбашки Фізика мильної плівки — кольори інтерференції в тонкій плівці, сили поверхневого натягу, закони Плато для укладання бульбашок і динамічне злиття при дотику. Поверхневий натяг · Оптика тонких плівок

Спецефекти та візуалізатори

🎼 Акустика концертного залу Акустичні відбиття, трасовані променями, всередині налаштовуваного залу — ранні відбиття, дифузний хвіст реверберації та живе відображення RT60 при зміні розмірів кімнати. Акустичне трасування променів · Canvas 2D 📡 Ефект Доплера Фронти хвиль стискаються попереду рухомого джерела і розтягуються позаду — анімовано на будь-якій швидкості, від дозвукової до надзвукової (формування конуса Маха). Поширення хвиль · Canvas 2D

Основні алгоритми в дії

Трасування променів через SDF Реакція-дифузія Грея-Скотта Дифузійно-обмежена агрегація Ітеровані функціональні системи Пінг-понг фреймбуфери Суперпозиція хвиль Гюйгенса Логістичне відображення (хаос) Броунівський рух Оптика тонких плівок Акустичне трасування променів

Огляд #4 — Рендеринг і генеративне мистецтво

Симуляції

Основні алгоритми в дії

Рекомендований навчальний маршрут

Для викладачів