基于PIXI.js绘制数千条动态线段的优化方案问询

嘿，我来帮你解决PIXI.js里批量动态线段绘制的性能问题！

1. 复用单个Graphics对象（最易上手的优化） #

你现在每次新建Graphics的做法会带来不必要的对象创建/销毁开销，频繁添加/移除子元素也会拖慢性能。更好的方式是只初始化一次Graphics，每一帧清空后批量重绘所有线段：

// 初始化阶段（只执行一次）
this.lineBatch = new PIXI.Graphics();
// 统一设置线段样式，避免帧内反复切换状态
this.lineBatch.lineStyle(1, 0x3F51B5, 0.75);
this.container.addChild(this.lineBatch);

// 帧更新逻辑（每一帧执行）
function updateSegments() {
  // 清空之前的绘制内容，比新建对象开销小得多
  this.lineBatch.clear();
  
  // 遍历所有线段批量绘制
  for (const seg of yourSegmentArray) {
    this.lineBatch.moveTo(seg.startX, seg.startY);
    this.lineBatch.lineTo(seg.endX, seg.endY);
  }
  
  requestAnimationFrame(updateSegments);
}

2. 用Mesh+Geometry实现超高效批量绘制（适合数千级线段） #

如果线段数量真的达到数千级，单个Graphics的drawCall可能还是不够高效。这时候可以用PIXI.Mesh+自定义Geometry，把所有线段合并成一个drawCall，性能会有质的提升：

// 初始化阶段
const segmentPositions = [];
const yourSegmentArray = []; // 你的线段数据数组，每个元素包含startX, startY, endX, endY

// 初始化Geometry，存储所有线段的顶点数据
const lineGeometry = new PIXI.Geometry()
  .addAttribute('aVertexPosition', segmentPositions, 2);

// 自定义着色器（实现基础线段绘制）
const vertexShader = `
precision mediump float;
attribute vec2 aVertexPosition;
uniform mat3 translationMatrix;
uniform mat3 projectionMatrix;
void main() {
  gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
}
`;

const fragmentShader = `
precision mediump float;
uniform vec4 uLineColor;
void main() {
  gl_FragColor = uLineColor;
}
`;

const lineShader = PIXI.Shader.from(vertexShader, fragmentShader);
const lineMesh = new PIXI.Mesh(lineGeometry, lineShader);
// 设置线段颜色和透明度（注意要转成0-1的浮点值）
lineMesh.uniforms.uLineColor = [0x3F/255, 0x51/255, 0xB5/255, 0.75];
this.container.addChild(lineMesh);

// 帧更新逻辑
function updateSegments() {
  let posIndex = 0;
  // 更新顶点数组
  for (const seg of yourSegmentArray) {
    segmentPositions[posIndex++] = seg.startX;
    segmentPositions[posIndex++] = seg.startY;
    segmentPositions[posIndex++] = seg.endX;
    segmentPositions[posIndex++] = seg.endY;
  }
  // 通知Geometry更新数据
  lineGeometry.getAttribute('aVertexPosition').update();
  
  requestAnimationFrame(updateSegments);
}

3. 额外性能小技巧 #

• 视锥体剔除：只绘制当前屏幕视口内的线段，过滤掉超出视野的部分，能大幅减少绘制量。
• 分组绘制：如果线段有不同的样式（颜色、宽度），把同样式的线段归为一组，每组用一个Graphics/Mesh，减少状态切换的开销。
• 避免过度clear：如果部分线段是静态的，可以单独用一个Graphics绘制，只动态更新变化的线段部分。

内容的提问来源于stack exchange，提问作者Rikku121