Three.js渲染卡顿怎么解决？LOD、Instancing与WebGL2优化详解

前置说明

本文记录的优化策略主要基于AI辅助建议整理而成。部分方法已在实际项目中验证，另一些仍处于探索阶段，供读者参考。

一、模型面数过多引发的渲染卡顿

针对高面数模型，最直接的手段是降低几何体面数，或者引入（Level of Detail）技术，即根据观察距离动态切换模型细节等级，从而平衡画质与性能。

技术允许在不同距离下加载不同精度的模型，有效提升Three.js的渲染效率。具体实施步骤如下：

首先准备同一对象的多个版本，分别对应低、中、高不同面数与细节程度。
随后，将这些模型按细节从低到高的顺序依次添加到同一个LOD实例中，参考代码如下：

const lod = new THREE.LOD();
const lowDetailModel = ... // 低细节模型
const midDetailModel = ... // 中细节模型
const highDetailModel = ... // 高细节模型
lod.addLevel(lowDetailModel, 0); // 添加低细节模型，距离为0
lod.addLevel(midDetailModel, 100); // 添加中细节模型，距离为100
lod.addLevel(highDetailModel, 200); // 添加高细节模型，距离为200

最后，将配置好的LOD对象添加至场景中。

scene.add(lod);

在渲染循环中，系统会根据相机与THREE.LOD实例的距离，自动调用update方法选择当前应显示的模型层级，实现无缝切换。

function render() {
  requestAnimationFrame(render);
  lod.update(camera);
  renderer.render(scene, camera);
}

二、材质贴图过大导致的性能瓶颈

解决贴图过大问题，可采取缩小贴图尺寸、压缩格式或采用纹理集（Texture Atlas）合并策略。

纹理集技术能将多张小图合并为一张大图，减少渲染时的状态切换次数。具体操作步骤如下：

首先创建一张大尺寸纹理图，将多张小纹理图拼接其中，确保这些小图属于同一对象的不同部分。

const texture = new THREE.TextureLoader().load('atlas.png');
const material = new THREE.MeshBasicMaterial({ map: texture });

接着，计算每个物体UV坐标在大图区域中的映射关系，需根据小图在大图中的位置与尺寸进行换算，示例如下：

const geometry = new THREE.BoxGeometry(1, 1, 1);
const uvAttribute = geometry.attributes.uv;
for (let i = 0; i < uvAttribute.count; i++) {
  const u = uvAttribute.getX(i);
  const v = uvAttribute.getY(i);
  // 根据小纹理图在大纹理图中的位置和大小计算出UV坐标
  uvAttribute.setXY(i, u * smallTextureWidth / bigTextureWidth + smallTextureX / bigTextureWidth, v * smallTextureHeight / bigTextureHeight + smallTextureY / bigTextureHeight);
}

在渲染循环中，需动态更新大纹理图的偏移量（offset）与缩放值（repeat），以正确显示对应部分。

function render() {
  requestAnimationFrame(render);
  const time = Date.now() * 0.001;
  texture.offset.x = time * 0.1; // x方向偏移量
  texture.offset.y = time * 0.2; // y方向偏移量
  texture.repeat.set(2, 2); // 横向和纵向缩放值
  renderer.render(scene, camera);
}

三、着色器复杂度过高引发的卡顿

优化着色器性能，可简化计算逻辑、使用预编译着色器，或采用Instancing（Instancing）技术。

技术允许多个相同物体复用同一几何体与材质，通过单次绘制调用渲染大量物体，显著降低Draw Call。具体步骤如下：

首先创建基础几何体与材质，作为后续多个物体的原型。

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

接着创建InstancedBufferGeometry对象，并将原型几何体的属性复制至该对象中。

const instances = 10000; // 实例数量
const instancedGeometry = new THREE.InstancedBufferGeometry();
instancedGeometry.copy(geometry); // 复制几何体属性
const translations = new Float32Array(instances * 3); // 实例位置数组
for (let i = 0; i < instances; i++) {
  translations[i * 3] = Math.random() * 100 - 50;
  translations[i * 3 + 1] = Math.random() * 100 - 50;
  translations[i * 3 + 2] = Math.random() * 100 - 50;
}
instancedGeometry.setAttribute('translation', new THREE.InstancedBufferAttribute(translations, 3));

然后，实例化对象，传入原型材质与实例化几何体作为参数。

const instancedMesh = new THREE.InstancedMesh(instancedGeometry, material, instances);
scene.add(instancedMesh);

在渲染循环中，需持续更新实例化几何体的属性，包括位置、旋转与缩放等变换信息。

function render() {
  requestAnimationFrame(render);
  const time = Date.now() * 0.001;
  for (let i = 0; i < instances; i++) {
    const translation = instancedMesh.geometry.attributes.translation;
    translation.setXYZ(i, Math.sin(time + i * 0.5) * 5, Math.cos(time + i * 0.3) * 5, i * 0.1);
  }
  instancedMesh.geometry.attributes.translation.needsUpdate = true; // 更新实例位置属性
  renderer.render(scene, camera);
}

五、CPU与GPU资源分配不均导致的卡顿

优化渲染方式，推荐使用WebGL2渲染器或引入Web Worker进行任务分流。

Ⅰ、启用WebGL2利用现代浏览器图形能力： ① 在初始化渲染器时指定WebGL2上下文。

const renderer = new THREE.WebGLRenderer({ canvas: canvas, context: canvas.getContext('webgl2') });

② 利用WebGL2支持的新特性，如transform feedback与instanced arrays等。例如，以下代码展示了如何使用transform feedback记录顶点位置变化：

const transformFeedback = new THREE.WebGL2TransformFeedback();
const bufferGeometry = new THREE.BufferGeometry();
const positions = new Float32Array([0, 0, 0]);
bufferGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
const shader = new THREE.ShaderMaterial({
  vertexShader: `
    out vec3 transformedPosition;
    void main() {
      transformedPosition = position;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    void main() {
      gl_FragColor = vec4(1.0);
    }
  `,
  transformFeedback: {
    // 将顶点位置记录到transformedPosition变量中
    varyings: ['transformedPosition'],
    // 开启transform feedback
    enabled: true,
    // 设置bufferGeometry的位置属性为transform feedback的输出属性
    bufferGeometry: bufferGeometry
  }
});
const mesh = new THREE.Mesh(bufferGeometry, shader);
scene.add(mesh);
function render() {
  requestAnimationFrame(render);
  renderer.setRenderTarget(null);
  // 开始transform feedback
  transformFeedback.begin();
  renderer.render(scene, camera);
  // 结束transform feedback，并将变化后的顶点位置存储到bufferGeometry中
  transformFeedback.end();
  // 更新顶点位置
  positions.set(bufferGeometry.getAttribute('position').array);
  bufferGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
  renderer.render(scene, camera);
}

---------------------------------------------------------------分隔线-----------------------------------------------------------------

Ⅱ、使用Web Worker分流计算密集型任务：为避免主线程阻塞，可将复杂计算移至后台线程。具体步骤如下：

① 创建一个Web Worker实例，专门用于处理高负载计算任务。

const worker = new Worker('worker.js');

② 在Worker内部定义具体的处理函数逻辑。

// worker.js
function process(data) {
  // 计算密集型的任务
  return result;
}
onmessage = function(event) {
  const result = process(event.data);
  postMessage(result);
};

③ 在主线程中向Worker发送任务数据，并注册回调函数以处理返回结果。

function render() {
  requestAnimationFrame(render);
  // 发送任务到Web Worker
  worker.postMessage(data);
  worker.onmessage = function(event) {
    const result = event.data;
    // 处理返回结果
  };
  renderer.render(scene, camera);
}

通过上述步骤，利用Web Worker将计算任务隔离至独立线程，有效避免主线程阻塞。需注意，Worker环境无法直接访问DOM或Three.js对象，必须通过消息传递机制进行通信。

5、CPU与GPU负载不均引发的渲染帧率下降

通过性能分析工具监控资源占用，优化代码逻辑，并合理使用requestAnimationFrame来平衡CPU与GPU负载。

机制能让浏览器根据屏幕刷新率自动调整动画帧率，防止过度渲染。具体实施步骤如下：

将渲染函数注册为的回调函数。

function render() {
  // 渲染代码
  renderer.render(scene, camera);
  // 请求下一帧动画
  requestAnimationFrame(render);
}

在初始化阶段调用一次以启动动画循环。

var animationId = requestAnimationFrame(render);

动画停止时，务必取消注册，避免不必要的资源消耗。

function stop() {
  cancelAnimationFrame(animationId);
}

需注意，在渲染循环中应避免执行大量计算逻辑，以免拖累渲染性能。

总结

本文介绍了Three.js渲染模型卡顿的多种优化方案，更多Three.js相关技巧请参阅本站其他文章或继续浏览后续内容，感谢支持。

Three.js模型渲染卡顿优化指南：LOD、实例化与WebGL2实战