PIXI js как оптимизировать фильтры (motion blur filter)?

Question

[Magneto903]

У меня есть упрощённая реализация игры "астероиды" (в ней вместо астероидов зелёные круги). Я использовал PIXIJS motion blur filter чтобы имитировать размытие при движении.
Лететь вперёд - стрелка вперёд или W.
Направление движение - мышка

На примере выше - 10 астероидов и это 60 FPS

Но когда я хочу добавить побольше астероидов, например 150 штук.


Производительность резко падает до 20 FPS

Я выяснил, что проблема заключается в фильтрах, я применяю их к каждому астероиду.
Если убрать фильтры к астероидам, то производительность снова возрастает до 60 FPS при том же количестве астероидов


Но естественно эффект размытия при движении пропадает.

Возможно ли как-то оптимизировать эти фильтры? Или может есть более лёгкий способ добиться желаемого эффекта - эффекта размытия при движении?

Comments

[RAX7]

Так нормально? https://jsfiddle.net/RAX7/2jcLd673/

[Magneto903]

RAX7, Размытие производится не у всех астероидов в том направлении, в котором они двигаются

[RAX7]

Magneto903, да, там ошибка в том, что скорость для фильтра задается последним обработанным астероидом. Наверное направление размытия лучше рассчитывать в зависимости от скорости игрока, а не астероида. Эффект правда получается другой https://jsfiddle.net/RAX7/2jcLd673/1/

[Magneto903]

RAX7, Да, но он вполне работает если астероиды медленно двигаются, что к сожалению не подходит в моём случае. Но всё равно спасибо!

Answer 1

[Magneto903]

Один из вариантов - накладывать фильтр только на те астероиды, которые видны через камеру (viewport)

if (asteroids[i].x + 100 > viewport.left && asteroids[i].x - 100 < viewport.right && 
			asteroids[i].y + 100 > viewport.top && asteroids[i].y - 100 < viewport.bottom) {
// накладываем фильтр
 } else {
// снимаем фильтр
}

Answer 2

[twoone]

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

Но прежде нужно посмотреть доки, вдруг там галачка есть кеширования фильтров. Просто я фильтры никогда не использовал и поэтому не знаю.

Comments

[Magneto903]

А если у меня случайная генерация астероидов, т.е. генерируется случайный полигон, то я для каждого поворота полигона должен сохранить фильтр для каждого направления и силы (сила варьируется от скорости камеры, а также направление размытия зависит от направления камеры)? Это ведь будет очень много картинок...

[twoone]

Magneto903, во первых крутой графон, это всегда компромисы. Вы думаете крутые игры делаются вот таким образом который вы описали? Глаз игрока не сможет заметить разницы между реалтам эффектами и пререндером + маски. А то скорее всего второй вариант покажется более атмосферным. Во вторых можно попробовать шейдеры, которые все будут в одном делать. Фильтры, по факту это тоже шейдеры, но менее оптимизированные. Вариантов очень много и выбор зависит от конечной картинки у вас в голове.

Или вот можно сделать два вида - обычная скорость и ускорение при взрыве. Компенсировать масками и\или прозрачностью. Поскольку геометрия астеройддов динамическая, то картинки не нужны, нужно свою систему пререндера писать. И все это рендерить в один канвас.

[Magneto903]

twoone, Ох, спасибо! Буду учиться создавать свои шейдеры и маски)) Я правильно понял, что шейдеры быстрее фильтра, потому что шейдеры на графическом процессоре работает, а фильтр на центральном?

[twoone]

Magneto903, честно сказать я не уверен на все сто, но мне кажется, что у pixi фильтры с поомщью шейдеров сделаны. Вообще да, фильтры расчитываются на cpu, так как они почти всегда векторные. Но поскольку pixi это растровый движок рендера, то есть он не имеет ничего векторного, то скорее всего и фильтры у него за счет шейдеров реализуются. Вот только вы напишите один большой шейдер включающий и блур и опасити и смещение, а у них для этого будет несколько шейдеров. Хотя по хорошему, они все должны в один группероваться, но это уже тонкости, которые мне не известны. Я избегаю подобных ситуаций. Игры делать нужно так чтобы получать удовольствия, а не создавать монстров, от которых голова будет болеть, как-будто палкой ударили.

[Magneto903]

twoone, Я попробовал написать свой шейдер (пока очень простой, просто убирает красный цвет)

Ну теперь держится в районе 40-50 FPS, но это не то, на что я расчитывал. Мне кажется, что производительность выше стала исключительно из-за простоты шейдера, если попробовать написать полноценный шейдер motion blur, то будет также, 20 FPS...

[twoone]

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