How does PixiJS transform sprites?

[And390]

When I create a custom fragment shader and attach it to some sprite, the fragment shader works with some bounding rectangle of the sprite but not with the transformed quad.
When sprited rotated, this rectangle remains perpendicular to the coordinate axis. You can take a look at this example: https://jsfiddle.net/q2rux5wc/ (the red zone is this "bounding rectangle").
In my understanding, when we rotate the sprite, a different matrix should be passed into the vertex shader, it should transform the input quad, then the fragment shader works with transformed quad.
But looks like PixiJS uses another approach. So can somebody explain (or give some links) how it's implemented in PixiJS and why?

[ivan.popelyshev]

Its seems you use filters - they are applied to temporary framebuffer where container is rendered, thus the rectangle thing. Its good when you want to work with big container that has many images inside, its like a post-process in 3d engines. That's selling point of PixiJS for JS front-enders, that's why you see that as shader example everywhere. Not every renderer can give you rich functionality for filters.

That doesnt mean we dont have common shader capabilities that other renderers posess.

Of course you can use shaders for sprites or custom geometry. In pixijs examples there is "mesh&shaders" section: https://pixijs.io/examples/#/mesh-and-shaders/triangle.js

And if you want to make shader with batching support, you can use renderer plugin: https://www.pixiplayground.com/#/edit/xWHIv7nCu0_X5xpA93jM7

Here the shader is applied to all graphics and sprites with "pluginName = 'yourPlugin'". There are only a few examples for batch renderers , but we are working on both new docs and new functionality for them.

Here's one of plugins that use custom batch renderer: https://github.com/pixijs/pixi-projection/ , it uses shader for 3d vertices.

 

Edited October 25, 2019 by ivan.popelyshev

[ivan.popelyshev]

Welcome to the forums!

I like it when people ask questions about shaders

[ivan.popelyshev]

Also, in case you know good webgl libs like https://twgljs.org/  - pixi also has that kind of low-level API, but we dont have much examples for it, you have to look in library sources to see how its used. We just didnt work on making tutorials for those parts.

[And390]

Thank you for the answer, I hope I got the idea right. "mesh&shaders" looks like what I need. As I understand it, If I just want to use my shader for some quads (for example, effects) it's better to use PIXI.Mesh. But if I want to apply a shader to a lot of images, then it's better to use filters, which can give me a performance boost in that case.

[ivan.popelyshev]

No, filters are completely different, its not just applying shader to many elements, its applying it to RESULT of rendering those elements. Btw, meshes are good for 500 items per frame, batch for 10k.