Jump to content

How to fix the issue of Rotating an image creates edges with step function curve.


Recommended Posts

You could also do it by creating a rendertexture that is 2 pixels larger (2 is considered safe in pretty much all cases with webgl). on all sides. Render the sprite to that with 2px offset. Create a new texture from that basetexture with 2px padding on sides. Use that texture as the sprites texture. Destroy the data that is no longer needed.

Link to comment
Share on other sites

Well you can hack orig/trim combination

const baseTexture = Texture.from(canvas);

const frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height);
const orig = new Rectangle(0, 0, baseTexture.width-2, baseTexture.height-2);
const trim = new Rectangle(-1, -1, baseTexture.width-2, baseTexture.height-2);

const texture = new Texture(baseTexture, frame, orig, trim);

Bear in mind that i invented the hack just now.

Link to comment
Share on other sites

Hi @ivan.popelyshev

I was able to generate a texture from padding canvas. 

But I am stuck at generating the correct texture whose dimensions would be same as image's, using the correct frame, orig and trim. 

 Here is the Playground.

Can you please suggest some detail documentation on what frame,orig and trim are?

Edited by a-c-sreedhar-reddy
Link to comment
Share on other sites


Because when a sprite-mask is applied to a sprite the antialias did not work.

so wanted to test this approach with the mask.


When I tried the same padding approach to the mask(using renderTexture instead of canvas) it worked. 

Do you think this is a good way to proceed?

Edited by a-c-sreedhar-reddy
Link to comment
Share on other sites

OK, so we fixed lines inside maks but not on its border.

Theoretically its possible, I see how it can be done, in SpriteMaskFilter shader: https://github.com/pixijs/pixijs/blob/dev/packages/core/src/filters/spriteMask/spriteMaskFilter.frag#L12 , however we need to take scale of sprite into account.

However, that's one of things that no one implemented in other 2d renderers. You want someone else to do that - post a bounty in https://github.com/pixijs/pixijs/issues , ask @bigtimebuddyfor details.

Welcome to WebGL, all anti-aliasing is *ucked.

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...