Pixi.js 缩放/不重新渲染精灵？

Question

我正在学习pixi.js，打算用它来渲染一个有很多节点的大型有向图。我分叉了一个有类似东西的代码笔，但是当我为精灵使用简单的圆形纹理时，当我放大时，边缘变得模糊：

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;
}

这是代码笔：https://codepen.io/mfbridges/pen/xxRqGRz

如何让 pixi.js 在此新的缩放级别重新光栅化圆，以便在放大时圆的边缘清晰？

我见过很多这种情况似乎自动发生的例子（例如这里：https://bl.ocks.org/pkerpedjiev/cf791db09ebcabaec0669362f4df1776）所以我很困惑为什么它在上面的代码笔中不起作用。

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

它在那里工作，因为他们只绘制“图形”对象（没有纹理）：

var graphics = new PIXI.Graphics();

graphics.beginFill(0xe74c3c); // Red
d3.range(numCircles).map(function() {
    graphics.drawCircle(randomX(), randomY(), 1);
});

stage.addChild(graphics);

“图形”始终正确“缩放”，因为它们是在每次渲染时计算的（我认为）。但是纹理生成一次，然后重复使用。

对您的代码有何帮助：

制作更大的纹理，然后缩放从中创建的 Sprite

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);

^ 参见：https://www.html5gamedevs.com/topic/16601-resize-texture/

增加纹理的“分辨率”（“正在生成的纹理的分辨率/设备像素比。” - https://pixijs.download/dev/docs/PIXI.AbstractRenderer.html#generateTexture）：

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

您需要进行实验并决定使用哪种方式:)

Pixi.js 缩放/不重新渲染精灵？

Pixi.js zoom / not re-rendering sprites?

javascript

webgl

pixi.js