[PIXI] WebGL antialiasing

[d13]

Hello!

 

Setting `antialiasing` to `true` in the `WebGLRenderer` has no effect on graphics.

Does anyone know if this normal, and if there is anyway to switch on antialiasing for WebGL? 

[alex_h]

Yeah I've seen this discussed before, apparently the absence of anti-aliasing is due to the graphics shapes having to be drawn using the stencil buffer.

It would be great if there was a way to have anti-aliased graphics objects in webgl, but presumably this would mean using some other means than the stencil buffer to draw them.

I don't know enough about webgl to know how realistic an expectation this might be 

[digibo]

I remember that .cacheAsBitmap used to help with aliased Graphics in PIXI v2. Using .generateTexture() will probably have the same effect, so you can try it in v3. For graphics, I'm currently drawing to a canvas and then creating a Texture from it. You can try this approach, if you don't need to change the Graphics each frame.

[d13]

It would be great if there was a way to have anti-aliased graphics objects in webgl,

Yes, it sure would!

In fact, I would say it's essential.

I love my Commodore VIC-20, but it's 2015 now!

 

I will look into those hacks you guys mentioned  - thanks so much!!

[xerver]

Yes, it sure would!

In fact, I would say it's essential.

I love my Commodore VIC-20, but it's 2015 now!

 

I will look into those hacks you guys mentioned  - thanks so much!!

 

Unfortunately the stencil buffer doesn't do anti-aliasing. If you want it to be anti-aliased, then generate a texture from it.

[d13]

 If you want it to be anti-aliased, then generate a texture from it.

var texture = shape.generateTexture();var shapeSprite = new PIX.Sprite(texture);

[ricklamers]

I was looking into this exact same topic. The generateTexture() worked for me. However, could Mat maybe explain why the cacheAsBitmap does not support antialiasing? Couldn't it use the generateTexture under the hood?

 

- Rick

[xerver]

I was looking into this exact same topic. The generateTexture() worked for me. However, could Mat maybe explain why the cacheAsBitmap does not support antialiasing? Couldn't it use the generateTexture under the hood?

 

- Rick

Because generateTexture renders it to a canvas (which has antialiasing) and generates a texture from that. cacheAsBitmap instead uses normal rendering techniques to render to a renderbuffer and uses that.

[Yukidama]

Sorry for bumping this thread, but felt unnecessary to create a new thread to a similar follow up question.

I have a Graphics with two child Graphics on it, and when I create a texture with generateTexture() on the parent Graphics, it does not include the two child Graphics, and my questions is if this is the intended behaviour, and if it is, how would I be able to generate a texture including all children to that Graphics.

 

Best regards,

Viktor

[ivan.popelyshev]

@Yukidama

Graphics object is determined by its "graphicsData" field, which is array. I think you can create fourht Graphics, and join all three "graphics.graphicsData" in it.

[brunoimbrizi]

I've been using sketch.js for my canvas projects. It is pretty good, but I thought I might be missing out by not using Pixi.js.
On my first attempt with graphics and bezier curves I bumped into this thread.
If all I need is to draw smooth curves that are updated on every frame, is there any point in using Pixi.js?

In other words, can canvas -> texture -> gpu -> screen perform better than canvas -> screen?

 

[ivan.popelyshev]

Better use canvas2d. The only thing in pixi that have some kind of smooth curves is Adobe Animate export plugin which is in alpha stage, I think.

If you need to use smooth curves with a lot of PIXI sprites, you can wrap your curves canvas into PIXI.BaseTexture and update it regularly. Otherwise, canvas2d will perform better.

[Giedrius]

Very similar WebGL renderer question: we have lots of circle graphics, converted to texture and generated lots of sprites from it. When scaled down they still look pixelated compating to canvas renderer. We did set antialias: true, roundPixels: true and are using resolution of 2. It helped a little, but we still need more of antialiasing (see pics). Does anybody have an idea of how to achieve something similar to canvas renderer? Thanks!

Canvas:

WebGL:

[ivan.popelyshev]

Oh, that's .. a big problem. I cant even describe everything, its really huge, I can consult people all day about that and they wont understand it in the end.

General solution: generate several textures, of different sizes for the circle (different RESOLUTION field maybe). Change between them based on scale. Better to generate it somewhere else than webgl.

If you are using pixi-v5 and you know what webgl texImage2d and miplevel is, you can use https://pixijs.io/examples/?v=v5.0.0-rc.3#/textures/gradient-resource.js to generate circle for DIFFERENT LEVELS OF TEXTURE.

Colors can be achieved with tinting the sprites, not changing the texture.

[Giedrius]

Thank you @ivan.popelyshev!

We used three different sized SVG's, created textures from base64. and changed them dynamically based on scale. And yes, we are tinting the sprites.