7.4性能优化 (Performance Optimization)

7.4性能优化 (Performance Optimization)

Three.js 高级技术与特效：7.4 性能优化 (Performance Optimization)

7.4.1 几何体优化 (Geometry Optimization)

几何体是 Three.js 中最基本的构建块。优化几何体可以显著提升渲染性能。

• 减少顶点数量 (Reducing Vertex Count): 顶点数量直接影响渲染时间。尽可能使用低多边形模型，或者使用 THREE.LOD (Level of Detail) 对象，根据物体与摄像机的距离动态调整模型的复杂度。

  // 使用 LOD 对象
  const lod = new THREE.LOD();
  // 创建不同精度的模型
  const lowPolyGeometry = new THREE.SphereGeometry(5, 16, 8); // 低精度
  const mediumPolyGeometry = new THREE.SphereGeometry(5, 32, 16); // 中精度
  const highPolyGeometry = new THREE.SphereGeometry(5, 64, 32); // 高精度
  const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
  const lowPolyMesh = new THREE.Mesh(lowPolyGeometry, material);
  const mediumPolyMesh = new THREE.Mesh(mediumPolyGeometry, material);
  const highPolyMesh = new THREE.Mesh(highPolyGeometry, material);
  lod.addLevel(lowPolyMesh, 50);  // 距离小于 50 时切换到低精度
  lod.addLevel(mediumPolyMesh, 25); // 距离小于 25 时切换到中精度
  lod.addLevel(highPolyMesh, 0);  // 距离小于 0 时切换到高精度
  lod.position.set(0, 0, 0);
  scene.add(lod);
  camera.position.set(0, 0, 100);
  function animate() {
    requestAnimationFrame(animate);
    lod.update(camera); // 更新 LOD 对象
    renderer.render(scene, camera);
  }
  animate();
  ​

  解释: THREE.LOD 允许你为同一个物体创建多个不同精度的模型，并根据物体到摄像机的距离自动切换。addLevel() 方法接受一个网格和一个距离值。当摄像机到物体的距离小于该值时，对应的网格将被渲染。lod.update(camera) 函数必须在每一帧调用，以便更新 LOD 对象。

• 合并几何体 (Merging Geometries): 如果场景中有多个使用相同材质的小型几何体，可以将它们合并成一个大的几何体，减少 draw calls。

  const geometry1 = new THREE.BoxGeometry(1, 1, 1);
  const geometry2 = new THREE.SphereGeometry(0.5, 32, 32);
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const mesh1 = new THREE.Mesh(geometry1, material);
  const mesh2 = new THREE.Mesh(geometry2, material);
  mesh1.position.set(-1, 0, 0);
  mesh2.position.set(1, 0, 0);
  // 合并几何体
  const mergedGeometry = new THREE.BufferGeometry();
  mergedGeometry.merge(geometry1);
  mergedGeometry.merge(geometry2, mesh2.matrix); // 应用 mesh2 的变换矩阵
  const mergedMesh = new THREE.Mesh(mergedGeometry, material);
  scene.add(mergedMesh);
  ​

  解释: BufferGeometry.merge() 方法可以将两个几何体合并成一个。 mesh2.matrix 参数用于将 mesh2 的变换（位置、旋转、缩放）应用到 geometry2 上，确保合并后的几何体的位置正确。 请注意，合并后的几何体只能使用相同的材质。

• 使用 BufferGeometry: BufferGeometry 比 Geometry 更高效，因为它直接使用 WebGL 的缓冲区对象。尽可能使用 BufferGeometry 代替 Geometry。 现代 Three.js 版本已经默认使用 BufferGeometry。

7.4.2 材质优化 (Material Optimization)

材质定义了物体的外观。选择合适的材质并优化其参数可以提高渲染性能。

• 减少着色器复杂度 (Reducing Shader Complexity): 复杂的着色器会消耗大量的 GPU 资源。尽可能使用简单的材质，例如 MeshBasicMaterial 或 MeshLambertMaterial。避免使用过于复杂的自定义着色器。

• 使用纹理图集 (Texture Atlases): 将多个小纹理合并成一个大的纹理图集可以减少纹理切换次数，提高渲染性能。

  // 创建纹理图集
  const textureLoader = new THREE.TextureLoader();
  const textureAtlas = textureLoader.load('textures/texture_atlas.png');
  // 创建材质
  const material = new THREE.MeshBasicMaterial({ map: textureAtlas });
  // 创建几何体，并设置 UV 坐标
  const geometry = new THREE.PlaneGeometry(1, 1);
  const uvAttribute = geometry.attributes.uv;
  // 设置第一个纹理的 UV 坐标
  uvAttribute.setXY(0, 0, 0);
  uvAttribute.setXY(1, 0, 0.5, 0);
  uvAttribute.setXY(2, 0, 0, 0.5);
  uvAttribute.setXY(3, 0, 0.5, 0.5);
  // 创建网格
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  ​

  解释: 使用纹理图集需要修改几何体的 UV 坐标，以便将不同的区域映射到不同的纹理。 在这个例子中，我们将一个 1x1 的平面几何体映射到纹理图集的左上角四分之一区域。 你需要根据你的纹理图集和几何体调整 UV 坐标。

• 使用压缩纹理 (Compressed Textures): 压缩纹理可以减少纹理的内存占用和加载时间。Three.js 支持多种压缩纹理格式，例如 DDS、PVRTC 和 ETC。

  // 检测是否支持压缩纹理
  const renderer = new THREE.WebGLRenderer();
  const supportsS3TC = renderer.extensions.has('WEBGL_compressed_texture_s3tc');
  if (supportsS3TC) {
    // 加载压缩纹理
    const textureLoader = new THREE.DDSLoader();
    const texture = textureLoader.load('textures/compressed_texture.dds');
    const material = new THREE.MeshBasicMaterial({ map: texture });
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
  } else {
    console.warn('不支持 S3TC 压缩纹理');
  }
  ​

  解释: 首先需要检测浏览器是否支持所需的压缩纹理格式。 然后，使用相应的加载器加载压缩纹理。 Three.js 提供了多种压缩纹理加载器，例如 DDSLoader、PVRLoader 和 ETCLoader。

• 减少透明度 (Reducing Transparency): 透明度渲染通常比不透明渲染更慢。尽量减少透明物体的数量，或者使用更高效的透明度渲染技术，例如 alpha blending 或 alpha testing。

7.4.3 渲染优化 (Rendering Optimization)

渲染过程是将 3D 场景转换为 2D 图像的过程。优化渲染过程可以提高帧率。

• 开启阴影 (Shadows): 阴影效果会消耗大量的 GPU 资源。只有在必要时才开启阴影，并调整阴影的质量，例如阴影贴图的大小。

• 控制 draw calls (Controlling Draw Calls): Draw calls 是 CPU 向 GPU 发送渲染指令的次数。 减少 draw calls 可以提高渲染性能。 可以通过合并几何体、使用 instancing 或使用材质属性来减少 draw calls。

• 使用 Instancing: Instancing 允许你使用相同的几何体和材质渲染多个物体，而只需要一个 draw call。 这对于渲染大量相同的物体非常有效，例如树木、草地或粒子。

  // 创建 instanced mesh
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
  const count = 1000; // 渲染 1000 个盒子
  const mesh = new THREE.InstancedMesh(geometry, material, count);
  // 设置每个盒子的变换矩阵
  const dummy = new THREE.Object3D();
  for (let i = 0; i < count; i++) {
    dummy.position.set(
      (Math.random() - 0.5) * 100,
      (Math.random() - 0.5) * 100,
      (Math.random() - 0.5) * 100
    );
    dummy.rotation.set(
      Math.random() * Math.PI,
      Math.random() * Math.PI,
      Math.random() * Math.PI
    );
    dummy.scale.set(
      Math.random() + 0.5,
      Math.random() + 0.5,
      Math.random() + 0.5
    );
    dummy.updateMatrix();
    mesh.setMatrixAt(i, dummy.matrix);
  }
  scene.add(mesh);
  ​

  解释: THREE.InstancedMesh 允许你使用相同的几何体和材质渲染多个物体。 你需要创建一个 THREE.InstancedMesh 对象，并指定几何体、材质和实例数量。 然后，你需要为每个实例设置变换矩阵。 setMatrixAt() 方法用于设置指定索引的实例的变换矩阵。

• 避免不必要的渲染 (Avoiding Unnecessary Rendering): 只渲染需要渲染的部分。例如，可以使用 frustum culling 来剔除视锥体之外的物体。

• 使用 WebGLRenderer 的参数: 创建 WebGLRenderer 时，可以设置一些参数来优化性能，例如 antialias 和 precision。

  const renderer = new THREE.WebGLRenderer({
    antialias: false, // 关闭抗锯齿
    precision: 'lowp' // 使用低精度浮点数
  });
  ​

  解释: 关闭抗锯齿可以提高性能，但会降低图像质量。 使用低精度浮点数可以减少内存占用和计算量，但可能会导致精度损失。

7.4.4 代码优化 (Code Optimization)

除了几何体、材质和渲染优化之外，还可以通过优化代码来提高性能。

• 避免在渲染循环中创建对象 (Avoiding Object Creation in the Render Loop): 在渲染循环中创建对象会频繁地分配和释放内存，导致性能下降。 尽可能在渲染循环之外创建对象，并在渲染循环中重用它们。

• 使用缓存 (Caching): 如果某个计算结果在多个帧中都需要使用，可以将它缓存起来，避免重复计算。

• 使用 requestAnimationFrame (Using requestAnimationFrame): 使用 requestAnimationFrame 来执行渲染循环，可以确保渲染与浏览器的刷新率同步，避免不必要的渲染。

7.4.5 使用性能分析工具 (Using Performance Analysis Tools)

使用性能分析工具可以帮助你找到性能瓶颈。

• Three.js Inspector: Three.js Inspector 是一个浏览器扩展，可以帮助你调试 Three.js 场景。它可以显示场景中的物体、材质、几何体和纹理，并提供性能分析功能。

• Chrome DevTools: Chrome DevTools 提供了强大的性能分析工具，可以帮助你找到 JavaScript 代码中的性能瓶颈。

7.4.6 总结

性能优化是一个持续的过程。你需要根据你的场景和目标平台选择合适的优化策略。以下是一些常见的优化策略：

• 减少顶点数量: 使用低多边形模型或 LOD 对象。

• 合并几何体: 减少 draw calls。

• 使用 BufferGeometry: 更高效的几何体格式。

• 减少着色器复杂度: 使用简单的材质。

• 使用纹理图集: 减少纹理切换次数。

• 使用压缩纹理: 减少纹理的内存占用。

• 减少透明度: 减少透明物体的数量。

• 控制 draw calls: 合并几何体、使用 instancing 或使用材质属性。

• 使用 Instancing: 渲染大量相同的物体。

• 避免不必要的渲染: 使用 frustum culling。

• 避免在渲染循环中创建对象: 在渲染循环之外创建对象。

• 使用缓存: 避免重复计算。

• 使用 requestAnimationFrame: 确保渲染与浏览器的刷新率同步。

• 使用性能分析工具: 找到性能瓶颈。

通过应用这些优化策略，你可以显著提高 Three.js 场景的性能，并为用户提供更流畅的体验。记住，性能优化是一个迭代的过程，需要不断地分析和调整。