Three.js 渲染优化处理

基于项目经验和最佳实践，以下是渲染优化的具体处理方法：

1. 几何体与材质优化

使用 BufferGeometry

// 推荐：使用 BufferGeometry 替代 Geometry
const geometry = new THREE.BufferGeometry();

合并几何体

// 将多个几何体合并为一个以减少绘制调用
const mergedGeometry = THREE.BufferGeometryUtils.mergeBufferGeometries(geometries);

实例化渲染

// 对于大量相同对象，使用 InstancedMesh
const instancedMesh = new THREE.InstancedMesh(geometry, material, count);

2. 渲染策略优化

视锥体剔除

// Three.js 默认启用视锥体剔除
// 确保对象的 frustumCulled 属性为 true（默认值）
object.frustumCulled = true;

LOD（细节层次）

// 根据距离使用不同细节级别的模型
const lod = new THREE.LOD();
lod.addLevel(detailGeometry, 0);
lod.addLevel(simplifiedGeometry, 20);
lod.addLevel(verySimplifiedGeometry, 50);
scene.add(lod);

动态批处理

// 合并静态对象
const staticObjects = [];
// ...收集静态对象...
const mergedGeometry = THREE.BufferGeometryUtils.mergeBufferGeometries(staticObjects);
const batchedMesh = new THREE.Mesh(mergedGeometry, sharedMaterial);

3. 动画与更新优化

控制更新频率

// 只在对象变换时更新矩阵
object.matrixAutoUpdate = false;
// 当对象变换时手动更新
object.updateMatrix();

使用对象池

class ObjectPool {
  constructor(createFn, resetFn) {
    this.createFn = createFn;
    this.resetFn = resetFn;
    this.pool = [];
  }
  
  acquire() {
    return this.pool.pop() || this.createFn();
  }
  
  release(object) {
    this.resetFn(object);
    this.pool.push(object);
  }
}

4. 内存管理

资源释放

// 及时释放不需要的几何体和材质
geometry.dispose();
material.dispose();
texture.dispose();

纹理压缩

// 使用压缩纹理格式
const loader = new THREE.CompressedTextureLoader();
const texture = loader.load('texture.dds');

5. 性能监控

使用 Stats.js

// 添加性能监控面板
const stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb
document.body.appendChild(stats.dom);

function animate() {
  stats.begin();
  // 渲染代码
  stats.end();
  requestAnimationFrame(animate);
}

渲染器信息查看

// 查看渲染器统计信息
console.log(renderer.info);

6. 特定优化技术

遮挡剔除

// 使用查询对象进行遮挡剔除
const query = renderer.getContext().createQuery();
// 实现遮挡剔除逻辑

按需渲染

// 只在场景变化时渲染，而不是每帧渲染
let needsUpdate = false;

function animate() {
  if (needsUpdate) {
    renderer.render(scene, camera);
    needsUpdate = false;
  }
  requestAnimationFrame(animate);
}

使用 Web Workers

// 将复杂计算放到 Web Worker 中
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (event) => {
  // 处理计算结果
};

7. 渲染器优化

启用 WebGL 特性

const renderer = new THREE.WebGLRenderer({
  antialias: true,
  powerPreference: "high-performance",
  stencil: false,
  depth: false
});

使用 WebGL 2.0

// 检查并使用 WebGL 2.0 上下文
const context = canvas.getContext('webgl2') || canvas.getContext('webgl');