Симулятор бумажного пакета: физика, звук и картошка на JavaScript, WebGL 2, ChatGPT и Codex.
Создатель проекта провел 16 часов в аэропорту из-за отменённых рейсов и заметил в складках бумажного пакета сходство со скульптурой. Так появился проект «Симулятор пакета».
Пакет можно мять, рвать двумя пальцами, поднимать и бросать. Внутри шесть картошек: задача вытряхнуть все на пол за минимальное время или забыть про таймер и почувствовать себя скульптором.
Это эксперимент с интерактивной рекламой: знакомая упаковка становится объектом, с которым зритель сам придумывает, что делать.
Как делали
Проект собирали в диалоге с ChatGPT и Codex: описывали поведение материала и жесты, проверяли результат, возвращали конкретные правки. Идея, визуальное направление и оценка ощущений остались за создателем, написание и переработка кода выполнены через ИИ.
Основа: JavaScript и WebGL 2. Геометрия, фактуры и шейдеры создаются программно, сцена рассчитывается в реальном времени.
Больше всего возни было с физикой. Первые версии напоминали резину: пакет растягивался, пружинил, поверхности проходили друг сквозь друга. Дорабатывали ограничения растяжения, сохранение заломов, столкновения и разрывы. Отдельно пришлось убирать зависания после долгого сминания и искать баланс между детализацией и скоростью на телефоне. На мобильных расчёт физики вынесен в отдельный поток.
Звук
Шорох, хруст и разрывы синтезируются программно через Web Audio API и реагируют на действия пользователя. Варианты звука меняются, чтобы сминание не сопровождалось одним повторяющимся эффектом.
Время и расходы
- Время: первый прототип около 16 часов, затем пара дней на доводку физики.
- Расходы: около 30% недельного лимита, подписка ChatGPT Pro 200.
Ещё новости:
