Pixi.js: Polygon cacheAsBitmap - antialias do not work (smoth)

[Qriva]

_WebGL Pixi 4.7_

I can't fix antialias of polygon shape after setting cacheAsBitmap.
I am using WebGLRenderer and antialias: true to smoth shapes on canvas and as I know, using many shapes can slow down pixi so added cacheAsBitmap to polygons on the canvas.

After setting it to true, antialias stopped working for these shapes so I made simple fiddle for rectangle and I was very surprised because it worked well. It looks like that for some reason shapes made with drawPolygonmethod lose their smoothness when cacheAsBitmap is set to true.
Fiddle with simple exmaple: https://jsfiddle.net/mtdh9vr7/20/

How to fix it?

Screenshot from fiddle:

[ivanpopelyshev]

Easiest way is to draw it on canvas using 2d context, then make a texture from it. Its also possible to do it through extra CanvasRenderer.

[ivanpopelyshev]

Are you sure that you need that optimization for your game? Do you have many graphics instances that look the same?

[bigtimebuddy]

From the best we can tell, antialiasing doesn't work for non-rectangular Graphics primitives (like circles and polygons). The reason (based on the conversation that @ivanpopelyshev and I had on Slack) is that PixiJS has a fastRect optimization that's used for all rectangles. This is pre-cached (unlike other shapes) to make it faster to do things like masks. Because it's already cached, we're seeing the transform applied after, so it looks nice and aliased. Other shapes do not get this benefit.

If you require antialiasing on cached shapes, there are some workarounds, like using CanvasRenderer, like Ivan suggested. Hope that helps.

[Qriva]

Understand. It is hard to say how many polygons can be on the stage in my project but I think 100 can be reached easily, also they are not the same, every shape is different.
Using cache would be nice option because my shapes don't change all the time but still there would be possiblity to do any modifications to them by setting false and true again.

So. I need to draw separated shape on additional canvas and transform it to texture or method like generateTexture is enough to do this? I mean I need to create not antialiased texture and then pixi can apply smoth after adding sprite to stage or I need to prepare smoth shape made in separated source?
What is the easiest way to create smoth sprite from shape?

_By the way_

From the best we can tell, antialiasing doesn't work for non-rectangular Graphics primitives (like circles and polygons).

Would be helpful to see exactly this line somewhere in the docs - drawPolygon or other correct place

[ivanpopelyshev]

Then this optimization wont help you.

Antialiasing doesnt work on extra FrameBuffers - cacheAsBitmap, filters, e.t.c.

[Qriva]

As I understood, the goal of cacheAsBitmap is to avoid rendering graphics because they are slow compared to sprites. Thats why I decided to transform shapes into sprites in general.
Am I right, if I transform shapes into sprites, everything should work well because antialias is aplied at the end?

[ivanpopelyshev]

Sorry, but I dont feel like explaining webgl and what exact shaders we use, I just say that in your case Graphics is faster. 100 Graphics objects are fine. If you want 1000 circles, sprites might be faster but it has to be benchmarked for your particular case. 10000 circles - certainly sprites are better.

Am I right, if I transform shapes into sprites, everything should work well because antialias is aplied at the end?

No. Graphics geometry gets rendered without antialias to temporary framebuffer. That framebuffer is used as a base for a sprite. Those sprites are not batching in your case because they all have different framebuffers.

[Qriva]

Hm, so it just make no sense to do it. I seen here this line:

Using 100s of graphics objects can be slow, in this instance use sprites (you can create a texture)

That is why I wanted to use cacheAsBitmap but if you say I need really a lot of graphics to slow down then it's probably not the case. Thank you then!

[ivanpopelyshev]

Oh, you are right. That's my line! Lets make it 300.

[soimy]

@Qriva There is a workaround for your goal. I used to draw complex gear shape and manually generate RenderTexture at doubled POT size. Then you can scale down the sprite with mipmap enabled.

But I think each RenderTexture will have its own drawcall under the hood. I'm not sure if they can be dynamically batched. Maybe it's not a good idea to use hundreds of them.

[ivanpopelyshev]

The primary optimization for your case is chunk optimization. Just use 10 graphics instead of 100. Do it only if you have problems with performance.

[Qriva]

I got additional question then.
Let say I have 500 but not moving (independently from each other) shapes.
How big difference in performence is if I make 500 separate PIXI.Graphics objects, compared to creating only one single object with all 500 shapes drawn on it?

[ivanpopelyshev]

499 extra drawElements and bindBuffer calls are comparable to the actual rendering time. Go benchmark it.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.