在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