@Magneto903

Как сделать на html canvas эффект motion blur (в реалтайме)?

У меня простой макет игры (кораблик летает по клеточному полю)
Управление:
W/стрелка на верх - ускорение
Мышка - направление корабля
(На всякий случай щёлкните мышью по полю, чтобы управлять, может заедать)


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

Сначала я просто хотел через неполную очистку canvas (заливка частично закрытым прямоугольником), вот так:


Однако это хорошо смотрится лишь тогда, когда кораблик летит на маленькой скорости. На большой поле просто превращается в мелкую сетку, что тоже некрасиво. И это не эффект размытия. Это просто дублирование изображения с небольшим смещением, но не эффект motion blur.

Тогда я решил использовать API canvas для применения фильтра размытия

Это уже лучше смотрится (особенно в сочетании с неполной очисткой canvas), но этот метод слишком тяжёлый и сильно сажает производительность

Я начал искать библиотеки, которые могут сделать такой эффект, но более лёгким способом. Нашёл такую


Однако во-первых, внешне это выглядит как-то не очень. Во-вторых, это также слишком тормозит игровой процесс (явно это не 60FPS)

Может есть какой-то способ добиться эффекта motion blur, но с хорошей производительностью? Есть ли какие-то библиотеки? Или на canvas это невозможно сделать?
  • Вопрос задан
  • 203 просмотра
Решения вопроса 1
twobomb
@twobomb
Чуть подправил функцию рисования сетки (оставил один beginPath и один stroke) и по крайней мере у меня фпс с 30 вырос до максимально возможных для requestAnimationFrame 60 фпс. Всё это на родном blur фильтре
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы