Jump to content

Rotation produces jagged edges


Recommended Posts

Rotated sprites have jagged edges. I have tried enabling `antialias: true`, and while it had an effect on drawn graphics, it had no effect on the rotated sprites.

My application correctly responds to the device's resolution. To minimise the jagged edges I tried forcing a minimum resolution of 2, which significantly alleviates the issue. However, I would not like to render everything twice as large simply to get rid of jagged edges, not only because of performance concerns, but because of the WebGL Texture size limit on some devices.

I have also tried to to use the FXAAFilter but it produces some weird artifacts/ghost shadow. Attached below are images showing the different attempts.

What's an elegant way to go about this?

No rotation:
image.png.e5075333ebe4d43f1300ab706fd20b02.png

3° angle (jagged edges visible)

image.png.dfc9c1ef17844a545c7019e3eb2013e7.png

Force a minimum resolution of 2 (works but not ideal as it wastefully renders everything twice as large even on a device with a devicePixelRatio of 1)
image.png.7c30e4e4042488d5d1fab2cc251719d6.png

FXAAFilter (background change to better demonstrate weird artifacts)

image.png.200f3b36d2d0175b6ee2659b9bef955e.png

Edited by CityLights
Link to post
Share on other sites
Posted (edited)
3 hours ago, ivan.popelyshev said:

classic OpenGL/WebGL. Many ways to solve that.

Could you briefly describe some of the many ways, please?

3 hours ago, ivan.popelyshev said:

You can try to solve it with texture filtering: add 1px or 2px transparent border to that texture.

I am not sure what you mean. My textures are SVGs so adding a transparent border to the asset itself is not possible. I tried adding a transparent using Outline filter but setting an alpha value to the filter does not seem to be possible.

Edited by CityLights
Link to post
Share on other sites

My textures are SVGs so adding a transparent border to the asset itself is not possible

to use SVG, pixi actually draws it on canvas in SVGResource. You can try alter that by supplying width/height in svg element itself or altering the actual code in pixi. I dont remember whether there's "padding" parameter for resource, if not, we should defeinitely add it - you can ask it in pixijs issues.

I tried adding a transparent using Outline filter

that wont help, because filter uses temporary renderTexture, and your svg will be rendered there first.. with same geometry, without extra pixel bound

Edited by ivan.popelyshev
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...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...