在 pixi.js 中应用投影滤镜时抗锯齿不起作用

Question

我打开抗锯齿并将投影滤镜应用于基于图形 class.However 实例化的圆圈，应用投影后，圆形抗锯齿似乎不起作用。我想在应用投影滤镜时使抗锯齿工作。

我正在使用 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

在 pixi.js 中应用投影滤镜时抗锯齿不起作用

Antialias does not work when applying drop shadow filter in pixi.js

javascript

antialiasing

pixi.js