javascript - 在 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 的扩展答案

antialiasing works only for main framebuffer. Any filter, renderTexture will ruin it and its webgl problem, not pixi. In WebGL2 its possible to use AA on created framebuffers but pixi-v5 doesnt support that yet.

Well, if scale is near 1 you can try adding a transparent frame around the card for the texture.

Another approach is to photoshop your shadows into PNG files and use extra sprites to show them, and its fastest approach.

来自 www.html5gamedevs.com