使用Pixi.js时如何修复Firefox中的抗锯齿效果不佳？

Question

我使用Pixi.js为我的工作项目绘制简单的形状 - 圆形和线段，并在它们之间进行一些交互。我在Mac上运行El Capitan并在Google Chrome中测试我的原型。我使用PIXI.autoDetectRenderer()方法设置渲染器，通常在最新的浏览器中设置为WebGL。我没有WebGL的经验，所以可能不知道一些重要的细节。

在Firefox中测试我的应用程序时，我注意到形状周围有细黑边框。

原来，antialias属性设置为true会导致此效果：

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

我做了一些调查。在Pixi.js论坛和其他一些资源上，据说PIXI.Graphics()对象因为使用模板缓冲区而不支持抗锯齿。在练习中，他们确实支持抗锯齿。猜猜看，自从讨论发生以来，情况发生了变化。 我不喜欢关闭抗锯齿的结果，这是在下面的图像上。

我和我的同事谈过这个问题，我们发现当任何其他图形对象落后时，原始图形周围没有黑色边框。因此，在使用Firefox浏览器的情况下，我们在其他元素后面添加了白色矩形。

解决了黑色边框的问题。我仍然可以在Google Chrome中获得更加整洁的图像。 Firefox中的细分和圆圈周围有很多工件。

一旦元素变小，它们就变得更加明显。

在控制台中，我收到以下警告：

FXAA antialiasing being used instead of native antialiasing.

在这种情况下，有没有办法提高抗锯齿质量？