Three.js粒子精灵示例性能为何随数量激增大幅下降？

嘿，这个问题我之前折腾Three.js粒子系统时也踩过坑！官方那个精灵粒子示例其实是用来演示THREE.Sprite的基础用法，根本没考虑大规模粒子的性能优化——它的性能瓶颈完全在于逐个创建独立的Sprite对象，具体来说：

核心性能瓶颈 #

• Draw Call爆炸：每个Sprite都是独立的Object3D，意味着GPU要为每个粒子执行一次绘制调用。10000个粒子就是10000次draw call，CPU要处理大量的渲染状态切换、对象矩阵更新，GPU也要频繁上下文切换，这是帧率暴跌的头号原因。
• CPU端对象过载：10000个独立的Sprite实例会占用大量内存，而且每一帧场景遍历、矩阵更新都会消耗大量CPU资源，尤其是在粒子需要动画时，CPU要逐个更新每个Sprite的位置/旋转，开销极高。
• 资源冗余：如果所有粒子用的是相同的纹理和材质，逐个创建Sprite会导致重复的资源绑定，浪费显存和带宽。

扩展到10000/100000个粒子的解决方案 #

要搞定大规模粒子，必须放弃逐个创建Sprite的思路，改用批量渲染方案，下面是具体步骤：

1. 用THREE.Points + BufferGeometry实现批量渲染 #

这是Three.js处理大规模粒子的标准方案，所有粒子数据（位置、颜色、大小等）都存储在GPU缓冲区中，只需要一次draw call就能渲染所有粒子，性能提升几个数量级。

示例代码大致如下：

// 创建BufferGeometry，存储所有粒子的位置
const geometry = new THREE.BufferGeometry();
const particleCount = 100000;
const positions = new Float32Array(particleCount * 3); // 每个粒子3个坐标值

// 填充粒子位置数据
for (let i = 0; i < particleCount * 3; i += 3) {
  positions[i] = Math.random() * 100 - 50; // x
  positions[i + 1] = Math.random() * 100 - 50; // y
  positions[i + 2] = Math.random() * 100 - 50; // z
}

// 将位置数据添加到几何体
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));

// 创建PointsMaterial，支持精灵纹理、大小控制
const material = new THREE.PointsMaterial({
  color: 0xffffff,
  size: 2,
  sizeAttenuation: true, // 开启近大远小
  map: yourSpriteTexture, // 替换成你的精灵纹理
  transparent: true, // 如果纹理有透明通道
  alphaTest: 0.1 // 优化透明渲染性能
});

// 创建Points对象并添加到场景
const particles = new THREE.Points(geometry, material);
scene.add(particles);

2. 优化粒子动画（CPU/GPU二选一） #

如果需要粒子动起来：

• GPU端动画（推荐）：用ShaderMaterial自定义顶点着色器，直接在GPU中计算粒子的位置偏移，完全避免CPU端的循环更新。比如用时间变量驱动粒子运动，性能拉满。
• CPU端动画：如果必须在CPU更新粒子位置，要给BufferAttribute设置动态使用标记：

  geometry.attributes.position.setUsage(THREE.DynamicDrawUsage);
  // 每一帧更新数据后，标记需要更新
  geometry.attributes.position.needsUpdate = true;
  

3. 进阶：用InstancedMesh处理需要独立变换的粒子 #

如果你的粒子需要不同的旋转、缩放或者独立的矩阵变换（比如每个粒子有自己的朝向），可以用InstancedMesh——它同样是一次draw call渲染所有实例，但每个实例可以有独立的矩阵，比逐个Sprite高效太多，适合中等规模（几万到几十万）的粒子场景。

其他小优化 #

• 确保精灵纹理是幂次方尺寸（比如256x256、512x512），WebGL对这种纹理的处理效率更高。
• 如果不需要每个粒子不同大小，就不要添加size属性，用material.size统一控制，减少数据传输。
• 开启frustumCulling（默认开启），让Three.js自动剔除视野外的粒子。

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