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

[Oliver Zhou]

Here's my pixi playground.

https://www.pixiplayground.com/#/edit/huvn96zZqn-UfdrhsUXv7

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?

 

[ivan.popelyshev]

> 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 January 21, 2020 by ivan.popelyshev

[ivan.popelyshev]

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.

[Oliver Zhou]

Okay, thanks.

I think I use wrong abstraction for my purpose?

[Oliver Zhou]

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.

[ivan.popelyshev]

yeah, that should do it. Btw, if you want to make shader for graphics or sprite, here's an example: https://www.pixiplayground.com/#/edit/zmDpwnZkvbb1b-aWaO9S8 Its batch shader .

If you want to make gradients, I can help with that too.