用途:面向 Three.js 项目的性能优化指南,覆盖 WebGPU 渲染器迁移、资源压缩、绘制调用优化、内存管理、着色器优化、光照阴影、React Three Fiber 与后处理等主题。
主要能力:给出以绘制调用为核心的原则(黄金法则为每帧绘制调用少于 100 次,超过 500 次即使强 GPU 也吃力),并提供基于 renderer.info.render.calls、triangles 与 memory.geometries、memory.textures 的监控诊断方式,数值持续增长即存在内存泄漏。WebGPU 部分说明迁移时机(绘制调用密集掉帧、需要计算着色器做物理或粒子模拟、复杂后处理链卡顿)、WebGPURenderer 基础设置与 await renderer.init() 的必要性,以及 TSL 一次编写自动编译为 WGSL 或 GLSL、计算着色器粒子系统。绘制调用优化包含 InstancedMesh、BatchedMesh、共享材质与 mergeGeometries 合并静态几何体。资源优化给出 gltf-transform 的 Draco 与 KTX2 压缩命令及 DRACOLoader、KTX2Loader 解码器配置。内存管理强调 Three.js 不自动回收 GPU 资源,需手动 dispose 几何体、材质与纹理,并给出对象池模式。着色器优化涉及移动端精度、无分支写法与数据打包;光照阴影建议活动光源不超过 3 个、控制阴影贴图尺寸与静态场景烘焙。React Three Fiber 部分强调在 useFrame 中直接修改而非触发 React 重渲染、按需渲染与切换可见性而非重新挂载。后处理区分 WebGL 的 pmndrs/postprocessing 与 WebGPU 原生 TSL 后处理,并列出 stats-gl、lil-gui、Spector.js、three-mesh-bvh、r3f-perf 等调试工具。
使用方式:按资料中的诊断清单监控渲染指标,再依据场景选择对应优化手段;压缩与解码器配置需按给出的命令与加载器路径设置。
适用场景:Three.js 项目性能调优、WebGPU 迁移、绘制调用与内存泄漏治理、着色器与光照优化、R3F 应用优化。
限制:资料未提供具体版本兼容细节、各优化手段的实测收益数据与完整部署步骤,部分内容需结合项目实际验证。