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

[a-c-sreedhar-reddy]

https://www.pixiplayground.com/#/edit/S7NG33DBu7qaiWSj0Br3R

The rotated image edges are not smooth. Why does this happen and how can I fix this?

Edited May 24, 2021 by a-c-sreedhar-reddy
grammar

[ivan.popelyshev]

Add a transparent pixel on border of whole image

[a-c-sreedhar-reddy]

Hey @ivan.popelyshevHow can I add the transparent pixel of border?

[ivan.popelyshev]

Open png in photoshopand add a border. Welcome to webgl.

Edited May 24, 2021 by ivan.popelyshev

[a-c-sreedhar-reddy]

But that would not work for my usecase. Because these images would not be static .

[ivan.popelyshev]

Well, there are solutions that require you to make custom shader, enlarge sprite frame and some other things, but so far people who made it didnt share the code, so you have to put request to pixijs team or someone else.

Its the usual OpenGL shit, it exists on all GL-like platforms.

[Exca]

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.

[ivan.popelyshev]

lets go threejs way: for every image you download, create a canvas with +padding, make "new Texture(new BaseTexture(canvas))" . You can use the same canvas if you turn off pixi texture gc , and call "renderer.texture.bind(tex)" each time you do that

[a-c-sreedhar-reddy]

Hi @ivan.popelyshev

After this the final sprite's dimensions would not be same as the image dimensions right?

It would me more by +padding.

Edited May 26, 2021 by a-c-sreedhar-reddy

[ivan.popelyshev]

Well you can hack orig/trim combination

const baseTexture = Texture.from(canvas);
renderer.texture.bind(baseTexture);

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.

[a-c-sreedhar-reddy]

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 May 27, 2021 by a-c-sreedhar-reddy

[ivan.popelyshev]

modified your playground. looks good to me.

[ivan.popelyshev]

oh, it has a mask.. why do you need a mask there?

[a-c-sreedhar-reddy]

@ivan.popelyshev

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 May 28, 2021 by a-c-sreedhar-reddy

[ivan.popelyshev]

Look at playground, it works fine.

[a-c-sreedhar-reddy]

@ivan.popelyshev

It worked fine because the mask was not rotated. If the mask is rotated then we can see the jagged lines. When I padded the mask using renderTexture it works. 

Edited May 28, 2021 by a-c-sreedhar-reddy

[ivan.popelyshev]

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.