Saturday 2 January 2021

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

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.

two circle

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()]


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

No comments:

Post a Comment