search

pixijs / lights

Adds dynamic lighting via deferred shading to PixiJS
https://pixijs.io/lights/docs/index.html
MIT License
205 stars 29 forks source link

Jagged edges (aliasing) on graphics objects #33

Open jazzyjeff5 opened 5 years ago

jazzyjeff5 commented 5 years ago

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!

ivanpopelyshev commented 5 years ago

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

jazzyjeff5 commented 5 years ago

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

ivanpopelyshev commented 5 years ago

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.

jazzyjeff5 commented 5 years ago

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