在 pixi.js 中应用阴影过滤器时，抗锯齿不起作用

Question

我打开了抗锯齿并将阴影过滤器应用于基于 Graphics 类实例化的圆形。但是，在应用阴影后，圆形抗锯齿似乎不起作用。我想在应用阴影过滤器时使抗锯齿工作。

我正在使用 pixi.js-v5.0.4 和 pixi-filters-v3.0.3。我打开了抗锯齿并将分辨率提高了一倍。阴影过滤器和抗锯齿单独工作正常。

这是代码：

app = new PIXI.Application({width: 300, height: 200, antialias: true, resolution: 2, autoResize: true})
document.body.appendChild(app.view)
app.renderer.backgroundColor = 0xffe7b9

function createCircle(x, y) {
  circle = new PIXI.Graphics()
  circle.beginFill(0xFFFFFF)
  circle.lineStyle(3, 0x000000, 1)
  circle.drawCircle(x, y, 60)
  circle.endFill()
  app.stage.addChild(circle)
  return circle
}

circle1 = createCircle(80, 100)
circle2 = createCircle(220, 100)
circle2.filters = [new PIXI.filters.DropShadowFilter()]

Answer 1

@chris-hayes的扩展答案

抗锯齿仅适用于主帧缓冲区。任何过滤器，renderTexture都会毁掉它及其webgl问题，而不是pixi。在 WebGL2 中，可以在创建的帧缓冲区上使用 AA，但 pixi-v5 尚不支持。

好吧，如果比例接近 1，您可以尝试在卡片周围添加透明框架作为纹理。

另一种方法是将阴影 Photoshop 转换为 PNG 文件，并使用额外的精灵来显示它们，这是最快的方法。

来自www.html5gamedevs.com