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.

10 thoughts on “Pixi.js zoom / not re-rendering sprites?”

  1. 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.

    It works there because they just draw "Graphics" object (no texture):

    var graphics = new PIXI.Graphics();
    
    graphics.beginFill(0xe74c3c); // Red
    d3.range(numCircles).map(function() {
        graphics.drawCircle(randomX(), randomY(), 1);
    });
    
    stage.addChild(graphics);
    

    "Graphics" are always "scaling" correctly because they are calculated on each render (i think). But textures are generated once and then reused.

    What can help in your code:

    • make bigger Texture and then scale the Sprite that is created from it
    gfx.drawCircle(props.size / 2, props.size / 2, 3)
    // make radius bigger:
    gfx.drawCircle(props.size / 2, props.size / 2, 30)
    
    //then in "makeSprites" function add this line somewhere after Sprite is created:
    sprite.scale.set(0.1, 0.1);
    

    ^ see: https://www.html5gamedevs.com/topic/16601-resize-texture/

    const texture = app.renderer.generateTexture(gfx, PIXI.SCALE_MODES.LINEAR, 2);
    // change to:
    const texture = app.renderer.generateTexture(gfx, PIXI.SCALE_MODES.LINEAR, 20);
    

    You need to exepriment and decide which way to use 🙂

    Reply

Leave a Comment