Pixi.js zoom / not re-rendering sprites?

I am learning pixi.js, intending to use it to render a large directed graph with many nodes. I forked a codepen that had something similar, but when I use a simple circle texture for sprites, and when I zoom in, the edges get blurry:

enter image description here

function makeParicleTexture(props) {
  const gfx = new PIXI.Graphics();
  gfx.beginFill(props.fill);
  gfx.lineStyle(props.strokeWidth, props.stroke);
  gfx.drawCircle(props.size / 2, props.size / 2, 3)
  gfx.endFill();

  const texture = app.renderer.generateTexture(gfx, PIXI.SCALE_MODES.LINEAR, 2);
  return texture;
}

Here is the codepen: https://codepen.io/mfbridges/pen/xxRqGRz

How can I ask pixi.js to re-rasterize the circle at this new zoom level so that edges of the circle are crisp when you zoom in?

I have seen many examples where this happens seemingly automatically (e.g. here: https://bl.ocks.org/pkerpedjiev/cf791db09ebcabaec0669362f4df1776) so I’m confused why it’s not working in the codepen above.

1 thought on “Pixi.js zoom / not re-rendering sprites?”

Leave a Comment