PIXI js how to optimize filters (motion blur filter)?

Question

JavaScript

I have a simplified implementation of the "asteroids" game (it has green circles instead of asteroids). I used PIXIJS motion blur filter to simulate motion blur.
Fly forward - forward arrow or W.
Direction of movement - mouse

In the example above - 10 asteroids and this is 60 FPS

But when I want to add more asteroids, for example 150 pieces.


Performance plummets to 20 FPS

I found out that the problem is with the filters, I apply them to each asteroid.
If you remove filters for asteroids, then the performance increases again to 60 FPS with the same number of asteroids


But naturally the effect of motion blur disappears.

Is it possible to somehow optimize these filters? Or maybe there is an easier way to achieve the desired effect - the motion blur effect?

Answer 1

One option is to apply the filter only to those asteroids that are visible through the camera (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

In real games, filters are not used, everything is done on png. As a solution to your problem, you can try to make pre-render filters. That is, draw a shape, apply a filter to it, and then draw the shape with the filter into a sprite. Thus, you create a lot of sprites and combine them in the movie clip and, if necessary, render it as an animation.
But first you need to look at the docks, all of a sudden there is a checkbox for caching filters. It's just that I've never used filters, so I don't know.