Симуляция ткани на WebGPU

Ткань симулируется методом Position Based Dynamics (PBD) на CPU: интегратор Верле, дистанционные ограничения и гравитация считаются в JavaScript. WebGPU используется только для отрисовки — заливка треугольников и wireframe поверх. Никаких three.js и других движков.

из требований только Браузер с поддержкой WebGPU: Chrome 113+, Edge 113+ или аналог

Подробнее о том как это реализовывалось можно посмотреть здесь

Структура проекта

ClothSim/
├── index.html          — холст и панель управления
├── style.css           — стили панели
├── src/
│   ├── main.js         — инициализация, UI, цикл приложения
│   ├── webGPU.js       — создание WebGPU-контекста
│   ├── grid.js         — генерация сетки, нормали, упаковка в GPU-буфер
│   ├── Vertex.js       — класс вершины (position, oldPosition, флаги)
│   ├── constraint.js   — создание и решение дистанционных ограничений
│   ├── integrator.js   — интегратор Верле
│   ├── renderer.js     — физический цикл, пайплайны, отрисовка
│   ├── camera.js       — орбитальная камера
│   ├── mat4.js         — матрицы проекции и вида
│   └── math.js         — вспомогательная математика
└── shaders/
    ├── triangle.wgsl   — заливка треугольников с освещением по нормали
    └── line.wgsl       — сетка из линий(wireframe)

Запуск

так как проект содержит очень много файлов кода, его нельзя так просто открыть в браузере, так как н нарушает политику CORS. Есть несколько способов как можно его запустить

Способ 1 — локальный сервер (рекомендуется)

Из корня проекта:

python -m http.server 8099

На Linux/macOS можно также python3 -m http.server 8099.

Открыть в браузере: http://localhost:8099

Способ 2 — отключение CORS (не рекомендуется)

Если сервер недоступен, можно запустить браузер с отключённой политикой безопасности. Для Microsoft Edge:

"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --disable-web-security --user-data-dir="C:\EdgeDev"

У других браузеров флаги аналогичные. Использовать только для локальной разработки.

Как устроено

Ткань — квадратная сетка, с заданным количеством квадратов, разбитая на треугольники. Крайнии четыре угла закреплены, центральная вершина движется по синусу — от неё по ткани расходятся волны. Есть возможность включить гравитацию по оси Z на чекбоксе.

Каждый кадр делится на несколько подшагов (по умолчанию 10). В каждом подшаге:

1. Интеграция — Verlet: скорость из position − oldPosition, затем сдвиг с учётом гравитации и затухания.
2. Кинематика — центральная вершина получает z = A·sin(2πft).
3. Ограничения — 5 итераций Gauss-Seidel по дистанционным связям:
   • structural — горизонталь и вертикаль между соседями;
   • shear — обе диагонали каждого квадрата;
   • bend — связи через одну вершину для стабилизации краёв.
4. Сохранение инерции — oldPosition не перезаписывается после constraints, поэтому позиционные поправки участвуют в следующем Verlet-шаге как скорость и помогают волнам распространяться от движимой вершины

После физики считаются нормали конечными разностями, вершины отправляются в GPU-буфер, рисуется заливка и опционально wireframe.

Управление

Действие	Управление
Вращение камеры	ЛКМ + перетаскивание
Зум	Колёсико мыши
Амплитуда волны	Ползунок 0–0.5
Частота волны	Ползунок 0–3 Гц
Сила тяжести	Ползунок 0–30
Подшагов / кадр	Ползунок 1–25
Гравитация	Чекбокс
Сетка (wireframe)	Чекбокс
Сброс параметров	Кнопка «Сброс»