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

【问题标题】：Pixi.js zoom / not re-rendering sprites?Pixi.js 缩放/不重新渲染精灵？
【发布时间】：2021-05-18 11:11:25
【问题描述】：

我正在学习 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），所以我很困惑为什么它在上面的 codepen 中不起作用。

【问题讨论】：

标签： javascript webgl pixi.js

【解决方案1】：

我已经看到了许多看似自动发生这种情况的示例（例如，这里：https://bl.ocks.org/pkerpedjiev/cf791db09ebcabaec0669362f4df1776），所以我很困惑为什么它在上面的 codepen 中不起作用。

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

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

您需要尝试并决定使用哪种方式:)

【讨论】：