Sign in to follow this  
And390

How does PixiJS transform sprites?

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.