Three.js 工程向：GPU Overdraw 诊断与前端渲染优化

文章目录

• • [一、什么是 Overdraw](#一、什么是 Overdraw)
  • 二、诊断思路
  • 三、优化策略
  • 四、工程实践
  • 五、结语

一、什么是 Overdraw

像素被多次重复绘制会浪费带宽和 fillrate，透明物体叠加场景尤为明显。

二、诊断思路

通过简化材质、关闭后处理、分层隐藏对象，逐步定位主要 overdraw 区域。

三、优化策略

• 减少大面积半透明叠层。
• 优先前后排序，尽量让不透明物体先写入深度。
• 粒子和特效做分辨率降级与数量上限控制。

四、工程实践

将 UI 特效、体积雾、粒子系统拆预算管理，按设备档位动态启停。

五、结语

Overdraw 优化本质是"每个像素少画几次"，对移动端收益最明显。