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

Question

I turned on antialias and applied the drop shadow filter to a circle instantiated based on the Graphics class.However, after applying drop shadows, circular antialias does not appear to work. I want to make antialias work while applying drop shadow filters.

I am using pixi.js-v5.0.4 and pixi-filters-v3.0.3. I turned on antialias and doubled the resolution. Drop shadow filters and antialias work fine on their own.

Here's the code:

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

Extended answer of @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.

From www.html5gamedevs.com