Рідина SPH: від Вікіпедії до 60 FPS
Згладжена гідродинаміка частинок (SPH) на папері виглядала жахливо — пошук сусідів, ядрові функції, градієнти тиску. Ось як я пройшов шлях від нульового розуміння до шовковисто плавної 3D-симуляції рідини, що працює повністю в браузері.
Читати допис →🔧 Серія девлогів
Три нові туторіали: Сонячна система, шейдери GLSL та localStorage
Розділ туторіалів виріс із 8 до 11 — Сонячна система на Three.js для середнього рівня, чисті GLSL-шейдери вогню та води для сміливих і дружній до початківців посібник із localStorage. Плюс перехресні посилання на пов'язані симуляції в 16 статтях.
Реакція-дифузія — патерни Тюрінга на GPU
Як рівняння морфогенезу Алана Тюрінга 1952 року перетворилися на текстурний WebGL-шейдер реального часу. Пінг-понг фреймбуфери, модель Грея–Скотта і моторошні візерунки, що виникають із двох хімічних речовин.
Boids — 3 правила, емерджентна поведінка та небо з 10 000 птахів
Трьох керувальних сил Крейга Рейнольдса — розділення, вирівнювання, згуртованість — достатньо, щоб заповнити небо переконливою мурмурацією. Плюс просторовий хеш, що робить 10 000 агентів швидкими.
Шейдер океану — GLSL, хвилі Герстнера та Френель за 3 дні
Реалістична океанська вода з анімованим зміщенням вершин, піною на гребенях і ефектом відбиття за Френелем — усе написано з нуля на GLSL за один довгий вікенд.
Галактика — рендеринг 80 000 зірок без падіння швидкості
Спіральна галактика з 80 тис. зірок звучить як щось неможливе при 60 FPS — поки ви не відкриєте InstancedMesh і власні інстансовані шейдери. Повна історія того, як я скоротив виклики відмалювання GPU з 80 000 до 1.
Тектонічні плити — сферична геометрія та справжнє зміщення
Проєкція земних плит кори на сферу за допомогою карт зміщення та плавних анімацій меж. Three.js, сферичні гармоніки і чимало тригонометрії.
Рідина SPH — від Вікіпедії до 60 FPS
Пошук сусідів SPH, ядрові функції, сили тиску й в'язкості — переклад щільної академічної нотації у працюючий код JavaScript. Плюс оптимізація на просторовому хеші, що зробила її в реальному часі.
Як почався цей проєкт — одна симуляція за вікенд
Це мав бути швидкий експеримент із Three.js на один вікенд. Через рік і 40+ симуляцій ми тут. Історія виникнення 3D Simulations.
📣 Анонси
Нова категорія: Погода й атмосфера — торнадо, дощ, веселка та інше
Шість нових інтерактивних симуляцій про найдраматичніші атмосферні процеси Землі: вихор торнадо, фізика дощу, оптика веселки, шари атмосфери, поширення лісової пожежі та утворення урагану.
Запуск категорій — упорядкування 40+ симуляцій
Фізика, Природа, Алгоритми, Хаос, Космос та інше — представляємо нову систему категорій, що наводить лад у всьому проєкті. Плюс окремі дитячі розділи з віковими рейтингами!
Незабаром: категорія квантової фізики
Корпускулярно-хвильовий дуалізм, квантове тунелювання, дослід із двома щілинами та рівняння Шрьодінгера — візуалізовані в браузері. Стежте за оновленнями!
Оновлення «Гри життя» — сферичний режим і 3 нові набори правил
Класика Конвея отримує режим 3D-сфери, редактор власних наборів правил і кольорове кодування віку клітин. Спробуйте правила «Highlife» та «Day & Night»!
Нова категорія: Алгоритми — A*, сортування та лабіринти
З'являється окремий розділ «Алгоритми» з пошуком шляху A*, візуалізаторами сортування бульбашкою/швидкого/злиттям, генераторами лабіринтів і задачею комівояжера. Шість інтерактивних демонстрацій, усі з покроковою анімацією.
💡 Поради та хитрощі
InstancedMesh змінив усе — з 5 FPS до 60 FPS
Рендеринг тисяч однакових об'єктів — найпоширеніша пастка продуктивності в Three.js. Один виклик API — InstancedMesh — вирішує це повністю. Бенчмарки й код додаються.
Як я налагоджую GLSL-шейдери (і не втрачаю глузд)
Жодного console.log у GLSL. Жодних точок зупину. Просто чорний екран. Ось мої практичні інструменти та робочий процес для налагодження вершинних і фрагментних шейдерів — включно з прийомом «колір як значення».
Як правильно звільняти об'єкти Three.js (без витоків пам'яті)
Геометрія, матеріал, текстура та рендерер — усе протікає, якщо не викликати dispose() правильно. Повний чекліст, яким я користуюся перед кожним очищенням симуляції.
Cannon-es проти Rapier.js — вибір браузерного фізичного рушія
Обидва працюють у браузері; обидва обробляють тверді тіла. То що ж обрати? Практичне порівняння пліч-о-пліч на основі створення симуляцій з кожним із них.
Three.js проти Babylon.js — який WebGL-фреймворк обрати?
Два зрілі WebGL-фреймворки з дуже різними філософіями. Я створив ту саму симуляцію в обох — і ось що я виявив: розмір бандлу, ергономіка API, доступ до шейдерів і відмінності екосистем.
requestAnimationFrame проти setInterval — завжди використовуйте rAF
setInterval не може відповідати частоті оновлення екрана, марнує ресурси CPU у прихованих вкладках і спричиняє смикання. Ось чому саме rAF виграє для анімацій і симуляцій, плюс патерн фіксованого кроку часу, що запобігає вибухам фізики.
Корисні сніпети Three.js, якими я користуюся щодня
8 блоків коду для копіювання, до яких я звертаюся в кожному проєкті: налаштування рендерера з урахуванням pixel-ratio, обробник зміни розміру, завантажувач текстур із колбеками, оновлення інстансованої матриці, BufferGeometry з типізованих масивів та інше.
CSS Grid для адаптивних карток симуляцій
auto-fill проти auto-fit, колонки minmax(), що працюють від 320 px до 4K — без жодних медіазапитів. Точне налаштування сітки, що лежить в основі каталогу симуляцій цього сайту, з живою редагованою демонстрацією.
Будьте в курсі
Нові дописи виходять нерегулярно — підпишіться на RSS-стрічку, щоб отримувати сповіщення, коли зʼявляється щось нове.