WebGL卡顿主因常是假性高面数或渲染调度不当，需先验算真实三角面数、优化导出设置、分层加载、LOD切换及合理使用InstancedMesh。
WebGL 渲染卡顿？先确认是不是 THREE.Mesh 面数真超标了
浏览器里跑高面数模型（比如 500 万+ 三角面）卡顿，不一定是模型本身问题，更可能是没做分层加载或未触发 GPU 合理调度。先用 model.geometry.attributes.position.count / 3 算真实三角面数——很多“高面”模型其实是冗余顶点+未合并材质导致的假性高负载。
- Blender 导出前务必勾选
Apply Modifiers和Include > Normals，否则three.js会重复计算法线并膨胀顶点数 - 检查
model.children是否含大量THREE.Mesh实例：单个 100 万面模型比 100 个 1 万面模型更易触发 WebGL 绘制调用瓶颈 - 用
console.time()包裹renderer.render(scene, camera)，若单帧 > 16ms 且GPU Timeline显示 fragment shader 占比高，说明是着色器或面数双重压力
用 THREE.SimplifyModifier 做运行时简化，但别在主渲染线程调用
THREE.SimplifyModifier 是目前最轻量、兼容 GLTF 的运行时简化方案，但它会同步遍历顶点数组，直接在 requestAnimationFrame 里调用会导致掉帧。必须配合 Web Worker 或拆成微任务分片执行。
const modifier = new THREE.SimplifyModifier(); // ❌ 错误：直接在 render 循环里调用 // const simplified = modifier.modify(geometry, targetVertexCount);// ✅ 正确：分片处理，每帧只处理 5000 个顶点 function simplifyStep() { if (currentVertices > targetCount) { geometry = modifier.modify(geometry, Math.max(targetCount, currentVertices - 5000)); currentVertices = geometry.attributes.position.count / 3; requestIdleCallback(simplifyStep); // 利用空闲时间继续 } }
- 简化目标建议设为原面数的 30%~50%，低于 20% 容易丢失轮廓特征（尤其机械结构/建筑转角）
- 对带骨骼动画的模型，
SimplifyModifier不支持自动重映射蒙皮权重，需改用离线工具预处理 - 简化后务必调用
geometry.computeVertexNormals()，否则光照会异常发黑
真正省资源的方案：用 gltf-pipeline 离线压缩 + LOD 切换
运行时简化只是兜底，生产环境应优先用 gltf-pipeline 做离线优化。它能同时处理网格简化、纹理压缩、DRACO 编码、材质合并，比前端 JS 简化快两个数量级。
npm install -g gltf-pipeline gltf-pipeline -i model.glb -o model-optimized.glb \ --draco.compressionLevel 7 \ --meshopt.quantizePositionBits 14 \ --meshopt.quantizeNormalBits 10 \ --simplify.quadrics \ --simplify.targetPercentage 0.4
-
--simplify.quadrics比默认edge-collapse更保形，适合有机体模型（人物、动物） - 生成多级 LOD 时，用
gltf-transform的prune+dedupe命令清理重复材质和纹理引用，避免加载多个相同贴图 - LOD 切换逻辑别依赖距离：用
camera.getNear() / distance计算屏幕占比，比纯距离切换更稳定（尤其俯视/仰视场景）
Three.js 中 InstancedMesh 能否替代高面模型？看场景再决定
不是所有“高面”都该被简化。InstancedMesh 在重复结构（森林、城市、零件阵列）中可把百万级实例压到 1~2 次 draw call，此时保留单个模型面数反而比简化后分散绘制更高效。
立即学习“前端免费学习笔记（深入）”；
- 单个实例面数建议 ≤ 5000，超过后 instancing 的内存优势会被顶点上传开销抵消
- 必须用
instancedMesh.setMatrixAt(index, matrix)批量更新，不要循环调用position.set()—— 后者会触发每次更新都重建整个 instance buffer - 若需不同材质（如锈蚀程度差异），得用
THREE.InstancedBufferAttribute自定义 attribute 传入着色器，而非挂多个InstancedMesh
真正卡住的往往不是面数本身，而是没区分「视觉关键区域」和「次要区域」。比如建筑模型，窗户框线要保面，墙体大平面可大胆简化；角色模型，手指关节不能简，躯干背部可降级。这些判断没法靠工具自动完成，得打开模型对着视角手动标定。
