N тел в браузере: PWA‑бенчмарк на Rust, WebAssembly и Three.js

Значимый прорыв формирует отрасль ИИ: GorkaIvan 11 минут назад N тел в браузере: PWA‑бенчмарк на Rust, WebAssembly и Three. js 10 мин 276 Rust * WebAssembly * JavaScript * Кейс Из песочницы Выбирая тему для работы в университете, я хотел, чтобы она казалась не только хорошей в плане исследования, но и являлась интересной для выполнения. А интересно мне на тот момент было поэкспериментировать с задачей N тел.

В итоге у меня получилось PWA‑приложение с физическим движком на Rust и скомпилированным в WebAssembly, визуализацией через Three. js, и также с сохранением результатов экспериментов через Supabase. Полноэкранный режимОбычный вид интерфейса (слева настройки, справа метрики, в центре 3D‑сцена)В этой статье я постараюсь описать, как устроен этот проект и какие решения я принимал.

Технические детали

Что я хотел проверитьМне хотелось сделать PWA, которое нагружало бы устройство посредством больших вычислений, 3D‑графикой и большим количеством объектов, которые смотрелись бы гармонично. Поэтому я поставил перед собой несколько целей:Реализовать физическую симуляциюВынести тяжёлые вычисления в WebAssemblyСделать 3D‑визуализациюДобавить различные режимы нагрузкиСобирать метрики производительностиСохранять результаты для сравненияПочему задача N телОна хорошо подошла для моего проекта, поскольку эта задача довольно сложная для вычислений и её нагрузку легко контролировать. Задача заключается в том, что есть набор тел в пространстве.

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

В работе реализованы два метода: прямой и метод Barnes‑Hut. Подробнее опишу их ниже. Общая архитектура проектаНа JavaScript были написаны интерфейс, управление настройками, запуск симуляции, сбор метрик и связь между всеми компонентами.

Отраслевые последствия

js используется для 3D‑визуализации. На Rust написан физический движок. WebAssembly нужен для того, чтобы запускать Rust‑часть в браузере.

Supabase использовался для сохранения результатов симуляции. Результат можно записать после запуска бенчмарка, а потом посмотреть таблицу с разными устройствами, браузерами и настройками. Физический движок на Rust и WebAssemblyЭта часть проекта для меня была довольно трудна.

Тут хранится состояние всей системы, а именно: количество тел, параметры симуляции, координаты, скорости, ускорения, массы и массив позиций.

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.