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 WebGL2its possible to use AA on created framebuffers but pixi-v5 doesntsupport that yet.

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

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

来自 www.html5gamedevs.com