lights Jagged edges (aliasing) on graphics objects

https://i.imgur.com/wvEmB1N.jpg

I'm using PIXI.Graphics to draw basic shapes. I'm drawing them twice, once in the correct color and then adding that to PIXI.lights.diffuseGroup, and then again in color 0x7f7fff to create a flat normal, and then adding that to PIXI.lights.normalGroup. First of all is this the correct way to get flat, colored shapes rendering?

Second, see the image I've linked above, the shapes are badly aliased. This goes away when I render the scene normally without pixi-lights. Is there any way to fix this? Thanks!

Oct 26 '18 14:10 jazzyjeff5

We need MSAA framebuffers to fix that, they exist only in webgl2

Oct 26 '18 14:10 ivanpopelyshev

Shame, are there any workarounds available? Unfortunately this may be a dealbreaker for my project :(

Oct 26 '18 15:10 jazzyjeff5

Graphics has method generateCanvasTexture() . If you dont change that figure in runtime you may use sprites with generated textures instead. Dont forget to use getLocalBounds to know the offset for a sprite, calculate anchor based on it.

Oct 26 '18 15:10 ivanpopelyshev

Interesting, I wont be changing the shape itself but I will be rotating and translating it, is that ok?

Oct 26 '18 15:10 jazzyjeff5