Three.js 性能优化指南

黄金法则

绘制调用 < 100 次/帧。 三角形数量不如绘制调用数量重要；超过 500 次绘制调用，强大 GPU 也会吃力。用 renderer.info.render.calls 监控（完整监控代码见 references/examples.md）。

诊断决策树

各领域规则速查

WebGPU：何时迁移

绘制调用密集掉帧 / 需要计算着色器做物理粒子（CPU 约 5 万上限，GPU 可达数百万）/ 复杂后处理链卡顿。 WebGPURenderer 必须 await renderer.init()。TSL 写一次自动编译 WGSL/GLSL。 浏览器支持下限（记录时点数据，现查 caniuse 为准）：Chrome/Edge 113+，Firefox 141+，Safari 26+。 初始化回退、TSL 完整指南、计算着色器示例：references/webgpu.md。

绘制调用优化

• 大量相同几何体（树、石头）→ InstancedMesh：1000 棵树 = 1 次绘制
• 多个不同几何体共享材质 → BatchedMesh
• 静态小物件 → mergeGeometries 合并
• 材质共享复用，永远不要在循环里 new Material

资源压缩（收益数字）

• Draco 几何体压缩：体积减 90-95%
• KTX2 纹理：GPU 内存约降 10 倍
• 一条命令：gltf-transform optimize model.glb out.glb --texture-compress ktx2 --compress draco
• 解码器路径配置与 Meshopt/Draco 选型：references/assets.md

内存铁律

Three.js 不会自动回收 GPU 资源。 移除对象必须：geometry.dispose() + 遍历 material 的所有 texture 属性逐个 dispose + material.dispose()；GLTF 的 ImageBitmap 还要 texture.source.data.close()。频繁增删对象用对象池。完整代码：references/examples.md。

着色器三规则

① 移动端 precision mediump float（约快 2 倍）② 用 mix/step 替代 if 分支（分支破坏 GPU 并行）③ 数据打包进 vec4，一次纹理取 4 个值。

光照阴影预算

活动光源 ≤3；PointLight 阴影 = 每光源 6 次阴影贴图渲染；贴图尺寸移动端 512-1024、桌面 1024-2048；静态场景 shadowMap.autoUpdate = false 手动触发 + 烘焙光照。

React Three Fiber 三规则

① 动画走 useFrame 直改 ref，永远不在 useFrame 里 setState ② 静态场景用 frameloop="demand" + invalidate() 按需渲染 ③ 显隐切 visible 属性，不要条件挂载 {show && <Model/>}（重挂载重建资源）。完整优化模板：references/examples.md。

后处理选型

WebGL → pmndrs/postprocessing（多效果合并 EffectPass）；WebGPU → 原生 TSL 后处理管线。两者完整设置：references/examples.md。

验收标准（优化任务完成前自查）

• renderer.info.render.calls < 100（超出需给出场景理由）
• renderer.info.memory 计数在增删对象后回落，无单调增长
• 目标设备实测帧率达标（移动端也要测，不只桌面）
• 发布资源经过 Draco/KTX2 压缩管线
• 每条优化建议都对应用户场景的实测症状，不是清单式全量套用

不做什么

• React 组件层的通用性能问题（memo/useMemo/bundle）→ vercel-react-best-practices
• Three.js 基础教学、场景搭建入门
• 模型/贴图美术制作本身（只管加载与渲染性能）
• 未量测先优化：没有 renderer.info 或帧率数据时，先装监控再动手

已知陷阱

调试工具

stats-gl（FPS/CPU/GPU）· lil-gui（实时调参）· Spector.js（WebGL 帧捕获）· three-mesh-bvh（8 万+ 面 @60fps 射线检测）· r3f-perf（R3F 监控）

参考文档（按需加载）