Inkwash: симулятор акварелі в одному HTML-файлі

Джоно Вітакер опублікував Inkwash — застосунок для акварельних замальовок, що працює в браузері, — разом із довгим технічним поясненням того, як він влаштований. Програма є одним HTML-файлом на менш ніж тисячу рядків, без залежностей і без етапу збірки; їй потрібні WebGL2 і текстури з підтримкою half-float, що, за словами автора, відповідає апаратному забезпеченню приблизно з 2021 року.

Від пензля з водою до розв'язувача рідини

Проєкт починався як тест Anthropic Claude Fable 5 і виріс у спробу відтворити в браузері звичку автора вести нотатки про природу. Ця звичка поєднує ручку Pilot G2 з waterbrush — нейлоновим пензлем із водяним резервуаром у ручці, який стискається. Вітакер пише, що сам не торкався коду: файл він читати може, але реалізацію написала модель — як і значну частину тексту пояснення, про що він відкрито повідомляє.

Під полотном картина — не пікселі, а набір текстур із плаваючою комою: рухомий пігмент, осілий пігмент, вода, поле швидкості та тиск. Щокадру вони проходять через приблизно десяток шейдерів WebGL2. Рух рідини використовує алгоритм Stable Fluids Джоса Стама (1999), чия напілаґранжева адвекція простежує кожну комірку назад уздовж поля швидкості, тому навіть великий крок часу не руйнує симуляцію. Проєкція тиску приблизно з 22 ітераціями Якобі робить воду нестисливою.

Вологість як система дозволів

Те, що результат читається як папір, забезпечує поле вологості, яке керує всією симуляцією. Швидкість множиться на smoothstep вологості, тож на сухому місці течія не існує, і заливка зупиняється на власній межі. Рухливість пігменту масштабується так само: на вологому папері туш повзе, на просоченому — розтікається. Сама вода адвектується зі швидкістю 0,6 від швидкості течії й експоненційно висихає, а повзунок задає сталу часу від приблизно 2 до 18 секунд. Свіжа туш залишає трохи власної вологості — тому прохід пензлем одразу після штриха розпушає лінію, а старіший штрих тримається.

Beer–Lambert і синій ореол

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

За шарування відповідає другий, осілий шар пігменту: натискання "fix" запускає 1,2-секундний прохід, який переносить рухомий пігмент на закріплений шар і миттєво висушує папір, а біла гуаш непрозоро впікається в нього. Увесь конвеєр — дванадцять проходів шейдерів разом з ітераціями Якобі — тримає 60 кадрів за секунду на телефоні, пише автор, бо дороге розв'язування відбувається на грубій сітці.