How can I implement glow filter on shapes

[Gorgi Kakasevski]

I want to use glow filter in my pixi project. I found implementation in v2 which don't work in v3 (http://codepen.io/mishaa/pen/raKzrm). Also when I try the filter on circle (in v2), the filter is only shown in the rectangle in which the circle is placed (see the image bellow). 

I try to use pixi extra filters (https://github.com/pixijs/pixi-extra-filters) but I can't include in my project. Some help or simple example pls

[ivan.popelyshev]

pixi-extra-filters was updated for v4. Can you build v4 from sources?

[Gorgi Kakasevski]

I'm not advanced user of pixi, I just add <script src="/public/js/pixi.min.js"></script> to my projects. I try to add <script src="/public/js/pixi-extra-filters.min.js"></script> after pixi.min js and then I try to use the filter: shape.filters = [GlowFilter(renderer.width, renderer.height, 15, 2, 1, 0xFF0000, 0.5)]; or PIXI.filters.GlowFilter but as I see this is not the right way.

[Fatalist]

You can use this for v3: https://pixi-glow-v3.netlify.com/

[Gorgi Kakasevski]

Tnx, this is what I need.

But I have a little problem when I apply the filter on shape. In this case the filter is applied only in rectangle in which the shape is drawn. To solve this problem I made a trick, I put the shape in container and add invisible circles (with 0px radius) on the four edges. I can't find other solution.

 

[Fatalist]

Use filterArea: https://pixijs.github.io/docs/PIXI.Container.html#filterArea

[Gorgi Kakasevski]

Tnx. Now everything is ok

[danneu]

How does it perform?

Maybe my implementation was too naive, but my attempt at a programatic glow filter turned out to be too expensive for what I wanted. I replaced my glows with a .png gradient sprite and colored it with `sprite.tint`.

Here's the gradient image: https://github.com/danneu/p2-space-arena/blob/4f89d3c2bb0e36a7abc3e7495135f3e246f3aa40/static/img/circle-gradient16.png It's a white circle that fades to opacity 0 at the edges.

I found no decrease in quality as I kept halving the .png size, but stopped at 16x16 pixels. Maybe it could be made even smaller.

[Gorgi Kakasevski]

I also implement glow with .png as alternative, but I didn't test the two scenarios in real case yet. But, however, for more complex scenarios / moving objects / animations you cannot use .png.