Rotation produces jagged edges

[CityLights]

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:

3° angle (jagged edges visible)

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)

FXAAFilter (background change to better demonstrate weird artifacts)

Edited April 21, 2021 by CityLights

[ivan.popelyshev]

classic OpenGL/WebGL. Many ways to solve that. You can try to solve it with texture filtering: add 1px or 2px transparent border to that texture.

[CityLights]

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 April 21, 2021 by CityLights

[ivan.popelyshev]

> 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 April 22, 2021 by ivan.popelyshev

[epifab]

Hello! I have the same issue here, and I wonder since this is a couple of years old if a new workaround has been implemented? @ivan.popelyshev thank you!

[ivan.popelyshev]

sorry, the only solution for that is still 1px-2px border of transparent pixels around texture )

[ivan.popelyshev]

actually, there's https://codesandbox.io/s/pixi-round-mask-e3moe2 but i didnt make it into a plugin yet, and i dont think i'll make it into pixi plugin, im researching new webgpu analogue ) 

you can copy necessary code, and turn off round corners. Whole sprite is AA-ed

Edited April 25, 2023 by ivan.popelyshev

[epifab]

hi @ivan.popelyshevthanks for the super quick reply!

I had a look at your round mask, and I must admit that this is way beyond my expertise for me to copy-paste and then own any of that 😅

I did try adding a transparent margin to my svg, but that didn't make any difference, in fact, I'm now noticing that it's not just the outside border to be jagged, but straight line in the inside too - would it make any difference if this wasn't an SVG? is there something else I could try with the SVG file itself?

thanks again!

 

 

[ivan.popelyshev]

good resizing shader problem is still opened.

that looks like downscale fail, did you downscale it too much? If so, maybe enabling mipmaps on this baseTexture should help, though you have to make it always ON , because usually those textures aren't pow2. Sorry, dont have time to explain it (

 

[epifab]

good catch! downscale was definitely playing a role there, looks much better now (still jagged edges, but at least it's just on the borders).

what's the canonical way of handling this? as a noob, I thought using an SVG would protect me from scaling related issues, but I was clearly wrong. would you rather amend width and height of the svg on the fly before trying to render it?

not sure what mipmaps is.. do you have an example I can look at?