Разработчик навайбкодил браузерную песочницу с магией четырех стихий из "Аватара"

Разработчик Chiro Visuals опубликовал исходный код Casting Abilities – браузерной песочницы, вдохновлённой покорением стихий из "Аватара". Работа собрана на Three.js и Vite с шейдерами, написанными на GLSL вручную.

Основная механика строится на одном жесте. Игрок зажимает левую кнопку и рисует линию по земле, а после отпускания способность огня, воды, земли или воздуха проходит по получившемуся сплайну и взрывается в конце. Стихия переключается цифрами от 1 до 4.

Тот же самый штрих имеет второе значение. В режиме ходьбы нарисованная линия не запускает способность, а становится маршрутом, по которому едет сам персонаж. Он запрыгивает на начало пути, складывается в позу медитации на вращающемся воздушном шаре и проходит трассу до конца, накреняясь на каждом повороте.

Наклон при этом не анимирован заранее. Контроллер отслеживает, насколько быстро меняется направление движения, и вращает тело вокруг собственной продольной оси пропорционально этой скорости, так что крутые повороты дают сильный крен, а прямые участки идут ровно. Крен живёт на отдельном суставе под корнем персонажа, чтобы не конфликтовать с разворотом.

Раскладка управления умещается в несколько клавиш:

• левая кнопка мыши рисует путь, правая вращает камеру, так как левая занята

• M переключает режимы применения и езды, Q и E перебирают стихии

• G открывает встроенный редактор эффектов, H прячет панель управления

• C сбрасывает активные эффекты и отменяет поездку, P ставит паузу, T меняет позу персонажа

Все параметры собраны в одном файле настроек, который служит единственным источником истины для шейдеров, частиц, света и постобработки. Перетаскивание ползунка меняет не только будущие применения, но и уже летящие способности, окружение и постпроцесс сразу. Пресеты сохраняются в браузере и выгружаются в JSON.

Огонь устроен сложнее остальных стихий. Вместо текстурной ленты используется настоящий объём, где меш служит лишь оболочкой вокруг траектории, а каждый фрагмент пускает луч от камеры и интегрирует плотность через шум с тремя октавами и всплытием. Сажа поглощает свет, из-за чего холодный газ действительно перекрывает фон, а не подсвечивает его.

Вода решает обратную задачу тем же приёмом. Луч идёт до первой смены знака поля, точка уточняется четырьмя бисекциями, а нормаль берётся из градиента того же поля, так что каждая рябь в математике превращается в рябь в освещении. Сверху накладываются френель по HDR-пробнику, солнечный блик, глубинное тонирование по закону Бугера, просвет через тонкие гребни и пена, разбитая на ячейки шумом Вороного.

Земля единственная сделана из настоящей геометрии. По ходу движения пол мостится рядами процедурных каменных плит, следом идёт волна разлома, ломающая корку, а завершается всё обелиском на ступенчатом постаменте с кольцом валунов вокруг. Всё это отбрасывает и принимает тени сцены.

Разработчик с помощью ИИ Claude создал впечатляющую веб-демку с деформируемым снегом и магией воды из "Аватара"

Все, естественно, сделано с помощью вайбкода при помощи Gemini Flash и Claude в Google AI Studio, причём на одну воду ушло два-три дня с большим числом итераций.