How to apply PIXI.Filter on polygon PIXI.Graphics.

[Ravindu89]

Is there a way to apply PIXI.Filter on PIXI.Graphics Polygon.?   When I applied a gradient filter on area chart (PIXI.Graphics Polygon),  that filter was applied on some rectangular space, not on polygon shape.

before applying gradient filter (Polygon is colored in blue color):-

 

after applying gradient filter:-

Would like to hear any advice on the subject.

Thanks in advance!

 

 

Edited May 2, 2018 by Ravindu89

[ivan.popelyshev]

Filter draws everything inside a container to a temporary buffer, than draws that buffer. 

https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters

You have to make your filter to depend on alpha channel of that temporary buffer. Multiply resulting RGBA by alpha of the channel, for example

[ivan.popelyshev]

Alternative : there are ways to extract vertices/uvs , and those ways will be available in v5 in nearby future. In v4 it requires deep knowledge of both webgl and pixi architecture.

Alternative: you can make custom renderer for Graphics, the one that cares about gradient. Requires knowledge and experience in making renderer plugins: https://github.com/pixijs/pixi-plugin-example

Anyway, filter is easier than other approches, however its also not safe for newbies.

[ivan.popelyshev]

ACtually, i can write you some code if you make a fiddle with your current results.

[Ravindu89]

Thank you, Ivan.  I have done sample area chart on fiddle. Please support me. 

https://jsfiddle.net/ravindu89/vsvL9knj/6/

[jonforum]

did you try to put all your chart element in a container, and generate a new textures with the container.
+After add your filter ?

i see also you seem use pixi 4.0, what about the 4.7? https://github.com/pixijs/pixi.js/releases

const texture = Renderer.generateTexture(chartContainer);

const rendered_Chart = new PIXI.Sprite(texture);

rendered_Chart ._filters = [filter]

[Ravindu89]

I need to decorate my area chart look like below.  I've tried jonforum suggestion. But it didn't work. @ivan.popelyshev Would you mind check my sample fiddle and give some suggestion to overcome this problem. 

 

Edited May 4, 2018 by Ravindu89
post update

[ivan.popelyshev]

Its fine, i will check it

[ivan.popelyshev]

https://jsfiddle.net/vsvL9knj/8/

1. update pixi to 4.7.3

2.  gl_FragColor = mixCol * fg.a; - that's how i use alpha component of drawn thingy, i just multiply everything on it.

3. if something goes wrong with "vFilterCoord.y" , you should read this: https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters#filter-area , and use mapCoord trick on vTextureCoord, that way it'll be stable.

I'm sorry, but if you want to use it as a filter, you have to read extra material and explanations

[Ravindu89]

@ivan.popelyshev  Thanks for taking your valuable time to support me.