Jump to content

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


Ravindu89
 Share

Recommended Posts

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):-

 area.thumb.png.a353749557618cf69323ecdd776a2612.png

after applying gradient filter:-

gradient.thumb.png.86850aa5214c903561817c7c5da901dd.png

Would like to hear any advice on the subject.

Thanks in advance!

 

 

Edited by Ravindu89
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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]
Link to comment
Share on other sites

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 ;)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...