Jump to content

How custom filter works with a sprite that has rotation is set ?

Oliver Zhou

Recommended Posts

Here's my pixi playground.



The shader I've written is from "The book of shader, chapter five".

Basically it draws a line and a nice gradient from black to white. You can see right top one on the above screenshot.

And then I rotated the sprite by 45, then as you can see, my expectation is it only draws pixels inside the blue rectangle I marked on the bottom right.

But somehow it draws pixels on the whole bounding box.

The question is how to achieve my goal when rotation is applied to the sprite?


Link to comment
Share on other sites

And then I rotated the sprite by 45, then as you can see, my expectation is it only draws pixels inside the blue rectangle I marked on the bottom right.

How filters work: container is rendered into temporary texture. It doesn't matter what is the shape of container - filter area is rectangular parallel to screen axises.

Then the quad drawn on screen: shader has that old temporary texture as an input "uSampler".

Your "gl_FragColor = vec4(color, 1.0)" means that alpha is always 1.0. 

If you do not use input from "uSampler" and you are asking the question - you are using wrong abstraction. You do not need filter. You need mesh shader: https://pixijs.io/examples/#/mesh-and-shaders/triangle-color.js Its the basic abstraction of webgl, If you read https://webgl2fundamentals.org/, you'll understand how webgl is all about those shaders.

Why pixi books contain only filters? Because v4 didnt have a good way to define shader for mesh. It had only https://github.com/pixijs/pixi-plugin-example and it didnt exist just after v4 release, I had to make it.

Why filters even needed if they are good not solution for your case?  Why were they main solution for PixiJS v4 and v3? Because of need to apply shader to SEVERAL sprites at once, without need to think of their rotations, scales, e.t.c. - main case is BlurFilter. 

Filters can work with several passes and be much more effective than just mesh shaders - blur uses horizontal blur, then vertical, several times, to get desired effect - its very hard to do with just one shader pass.

How to fix your example easily? Well, use `uSampler`. Take a "texture2D(vTextureCoord, uSampler);`. Take alpha from it.

Here's another example for mesh shader: https://www.pixiplayground.com/#/edit/6ThqOOz-SVJe3AyvkbnaU


Edited by ivan.popelyshev
Link to comment
Share on other sites

Why is "outputMatrix" needed in filters? To position a texture over it, for masking or displacement. Filter area is defined by container bounds, but to define texture coords relative to that area its better to do so through sprite, we can put calculated sprite transform matrix inside filter for it.

Link to comment
Share on other sites

My requirement can be achieved by:

1) create a graphic and apply my filter on it

2) call renderer.generateTexture to generate a texture

3) create a sprite to use the generated texture and then apply rotation.

There's no need to use "outputMatrix", as you have told, not the right abstraction.

Thanks again, Ivan.

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.

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.


  • Recently Browsing   0 members

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