Все почалось із запитання
Я дивився відео про боїдів — алгоритм зграйної поведінки, винайдений Крейгом Рейнольдсом у 1987 році. Візуали були прекрасні: сотні віртуальних птахів пікірують і повертають як одне ціле. Правила були оманливо простими: розділення, вирівнювання, згуртованість. Три сили — і ви отримуєте емерджентну поведінку, яка виглядає живою.
Я подумав: чи зможу я побудувати це в браузері за вихідні?
Відповідь, як виявилось, була «так». Приблизно за дванадцять годин кодування, розтягнутих на суботу й неділю, у мене була робоча симуляція боїдів на Three.js з 500 агентами, що працювала стабільно на 60 FPS.
Симуляція боїдів досі жива сьогодні — ви можете знайти її за адресою /boids/. Вона досі використовує приблизно той самий просторовий хеш, який я написав тими першими вихідними.
Одна стає двома, стає багатьма
Проблема із завершенням однієї симуляції в тому, що вона одразу підказує наступну. Боїди змусили мене думати про Гру життя — іншу систему «прості правила, складний результат». Гра життя змусила мене думати про реакцію-дифузію. Реакція-дифузія змусила мене думати про гідродинаміку.
Не встиг я оговтатися, як у мене вже була папка
simulations/ із сімома записами. Потім п'ятнадцятьма.
Потім тридцятьма.
Кожна навчила мене чогось несподіваного:
- Боїди — прискорення просторовим хешем, емерджентна поведінка
- Рідина — математика SPH, вузькі місця CPU, чому потрібні обчислення на GPU
- Галактика — InstancedMesh, кастомні вершинні шейдери, мінімізація викликів рендерингу
- Океан — правильний робочий процес GLSL, рівняння хвиль Герстнера, Френель
- Тектонічні плити — сферична геометрія, карти зміщення, UV-мапінг у Three.js
Чому чистий HTML/JS — без збірки
На ранньому етапі я прийняв рішення, яке сформувало все:
жодних бандлерів, жодного npm, жодного конвеєра
збірки. Кожна симуляція завантажується напряму з
файлової системи через тег <script> або працює
як звичайний file:// URL.
Причина була частково в лінощах (я не хотів налаштовувати Webpack), а частково у філософії. Веб-платформа достатньо потужна. Сучасні ES-модулі працюють нативно. Three.js постачається у вигляді готової для браузера збірки. Можна відкрити HTML-файл, і він просто працює.
Це виявилось правильним вибором. Проєкт тривіально портативний —
заархівуйте його, віддайте будь-кому, він працює. Жодних
node_modules. Жодних lock-файлів. Жодних «у мене
працює».
Що це підтримує
Чесна відповідь? Цікавість. Кожна симуляція відповідає на одне запитання і породжує ще три.
Трохи менш чесна відповідь: цикл зворотного зв'язку надзвичайно короткий. Редагуєш шейдер, оновлюєш сторінку, бачиш результат — жодної компіляції, жодного hot reload для налаштування, жодних помилок типів для виправлення. Це найшвидший можливий цикл ітерації, і це створює залежність.
Проєкт виріс у щось, чого я спочатку не планував: своєрідний інтерактивний підручник. Фізика, біологія, математика, машинне навчання — усе відображається в реальному часі в браузері, безкоштовно і відкрито, для будь-кого, хто достатньо цікавий, щоб заглянути.
Що далі
Серія девлогів висвітлюватиме окремі симуляції детальніше: математику, що стоїть за ними, рішення щодо реалізації, баги, пошук яких зайняв три дні.