4

I use Pixi.js for my work project to draw simple shapes — circles and segments, and make some interaction between them. I work on Mac running El Capitan and test my prototype in Google Chrome. I use PIXI.autoDetectRenderer() method to set renderer and usually it is set to WebGL in latest browsers. I don't have any experience in WebGL, so might not know some important details.

When testing my application in Firefox I've noticed thin black border around shapes.

Anti-aliasing applied

Turned out that antialias property set to true caused this effect:

renderer = new PIXI.autoDetectRenderer(width, height, {backgroundColor: 0xffffff, antialias: true})

I've done some investigation. On Pixi.js forums and on some other resources it's said that PIXI.Graphics() objects do not support anti-aliasing because of using the stencil buffer. On practice they do support anti-aliasing. Guess, something has changed since discussions took place. I don't like the result I get with switched off anti-aliasing, here it is on images below.

No anti-aliasing apllied

I and my colleague had a talk about that, and we discovered that when any other graphic object lays behind, there is no black border around original one. So we added white rectangle behind other elements in case Firefox browser is used.

That solved problem of black border. Still I get far neater image in Google Chrome. There are lots of artifacts around segments and circles in Firefox.

Anti-aliasing with rectangle behind

They become more visible once elements get smaller.

Anti-aliasing with rectangle, small circles

In console I get following warning:

FXAA antialiasing being used instead of native antialiasing.

Is there a way to improve anti-aliasing quality in this case?

Terbiy
  • 576
  • 5
  • 14
  • Do you have the latest version of Firefox? Also, are you seeing the bad antialiasing on PIXI.Graphics objects or only image assets like PNG sprites and textures? – jered Feb 26 '16 at 19:27
  • if you can afford it: super sampling – LJᛃ Feb 28 '16 at 00:00
  • @JCD, I use Firefox 44.0.2. It is written that I've the latest one. I see bad anti-aliasing on PIXI.Graphics (segments and circles on images are PIXI.Graphics object) and on PIXI.Sprite also. Here is example: [Sprite anti-aliasing](http://i.imgur.com/Hod5BY2.png) (image). – Terbiy Feb 29 '16 at 06:59
  • @LJᛃ is it available using some properties when creating renderer or in other way? – Terbiy Feb 29 '16 at 07:02

0 Answers0