Appearance
Three.js 性能面板必备指标：9 个核心指标与阈值解释
做性能面板最容易走偏：指标太多、解释太少，最后“看得见但看不懂”。本文把三维实时渲染最关键的 9 个指标收敛为一套可落地的面板规范，并给出阈值与诊断逻辑，适合直接抄到面板里做规则提示。
一、先看结论：9 个指标 + 阈值汇总
| 指标 | 优秀 | 正常 | 警告 | 严重 | 主要影响 |
|---|---|---|---|---|---|
| 三角面数（Triangles） | ＜ 10 万 | 10 万 ~ 30 万 | 30 万 ~ 60 万 | ＞ 60 万 | GPU 算力、帧率 |
| 顶点数（Vertices） | ＜ 20 万 | 20 万 ~ 50 万 | 50 万 ~ 100 万 | ＞ 100 万 | GPU 顶点计算 |
| 纹理数量（Textures Count） | ≤ 5 张 | 6 ~ 10 张 | 11 ~ 20 张 | ＞ 20 张 | 显存、带宽 |
| 最大纹理尺寸（Max Texture Size） | ≤ 1024 px | 1024 ~ 2048 px | 2048 ~ 4096 px | ＞ 4096 px | 单张显存占用 |
| 材质数量（Materials Count） | ≤ 5 个 | 6 ~ 15 个 | 16 ~ 30 个 | ＞ 30 个 | DrawCall、稳定性 |
| DrawCall（桌面） | ＜ 100 | 100 ~ 300 | 300 ~ 600 | ＞ 600 | CPU 提交开销 |
| DrawCall（移动） | ＜ 50 | 50 ~ 150 | 150 ~ 300 | ＞ 300 | CPU 提交开销 |
| FPS | 55 ~ 60 | 40 ~ 54 | 25 ~ 39 | ＜ 25 | 体验与综合压力 |
| JS Heap | ＜ 300 MB | 300 ~ 600 MB | 600 MB ~ 1 GB | ＞ 1 GB | 卡顿、崩溃、加载卡死 |
| 显存估算（VRAM Estimate） | ＜ 150 MB | 150 ~ 300 MB | 300 ~ 600 MB | ＞ 600 MB | 闪退、黑屏、掉帧 |
说明：
- 表格阈值是“经验阈值”，用于面板提示与早期诊断，不等同于硬性指标；不同机型、分辨率、后处理强度都会影响最终体验
- 若面板只能放 5 个指标，优先：FPS、DrawCall、三角面数、显存估算、JS Heap
二、指标详解：每项要解释清楚“口径 + 影响 + 阈值”
1）三角面数（Triangles）
口径：
- 常用估算：
position.count / 3（一个三角面通常由 3 个顶点组成）
影响：
- GPU 每帧要对三角面做光栅化与片元着色计算
- 面数越多，GPU 压力越大，帧率越容易下滑
阈值：
- 优秀：＜ 10 万
- 正常：10 万 ~ 30 万
- 警告：30 万 ~ 60 万
- 严重：＞ 60 万（移动端更容易直接不可用）
2）顶点数（Vertices）
口径：
- 顶点数一般可从几何体属性统计得到（与面数强相关）
影响：
- 顶点变换、法线计算、蒙皮等主要在顶点着色器阶段执行
- 顶点数偏高会放大 GPU 顶点计算压力，尤其在骨骼动画/实例较多时更明显
阈值：
- 优秀：＜ 20 万
- 正常：20 万 ~ 50 万
- 警告：50 万 ~ 100 万
- 严重：＞ 100 万
3）纹理数量（Textures Count）
影响：
- 纹理需要上传 GPU 并占用显存；数量越多，显存占用与采样开销越高
- 多纹理场景在镜头快速旋转、频繁切换材质时更容易出现掉帧
阈值：
- 优秀：≤ 5 张
- 正常：6 ~ 10 张
- 警告：11 ~ 20 张
- 严重：＞ 20 张
4）最大纹理尺寸（Max Texture Size）
口径：
- 取当前场景中纹理宽高的最大值（宽或高任意一边超标即降级）
影响：
- 单张纹理尺寸决定显存占用与带宽压力，是“显存爆炸”的高频根因
阈值：
- 优秀：≤ 1024 px
- 正常：1024 ~ 2048 px
- 警告：2048 ~ 4096 px
- 严重：＞ 4096 px
显存经验值（RGBA8）：
- 4096 × 4096 ≈ 64 MB / 张
- 2048 × 2048 ≈ 16 MB / 张
- 1024 × 1024 ≈ 4 MB / 张
5）材质数量（Materials Count）
影响：
- 材质越多，越难被合批，往往直接推高 DrawCall
- 材质数量偏高时，帧率更容易出现“忽高忽低”的不稳定体验
阈值：
- 优秀：≤ 5 个
- 正常：6 ~ 15 个
- 警告：16 ~ 30 个
- 严重：＞ 30 个
6）DrawCall 数量（DC）
影响：
- WebGL 每个 DrawCall 都伴随状态切换与 CPU→GPU 命令提交
- DrawCall 偏高会首先压垮 CPU 主线程，导致帧率不稳甚至输入卡顿
阈值（桌面）：
- 优秀：＜ 100
- 正常：100 ~ 300
- 警告：300 ~ 600
- 严重：＞ 600
阈值（移动）：
- 优秀：＜ 50
- 正常：50 ~ 150
- 警告：150 ~ 300
- 严重：＞ 300
7）渲染帧率（FPS）
影响：
- 最直观的体验指标，综合反映 CPU 与 GPU 的整体压力
- 低 FPS 往往意味着：三角面/纹理/DrawCall/后处理至少有一项已超标
阈值：
- 优秀：55 ~ 60
- 正常：40 ~ 54
- 警告：25 ~ 39
- 严重：＜ 25
8）内存占用（JS Heap）
影响：
- 影响模型解析、资源缓存、运行时对象数量与 GC 压力
- JS Heap 偏高常见表现：页面切换卡、按钮响应延迟、崩溃或加载卡死
阈值：
- 优秀：＜ 300 MB
- 正常：300 ~ 600 MB
- 警告：600 MB ~ 1 GB
- 严重：＞ 1 GB
9）显存占用估算（VRAM Estimate）
口径：
- 面板可按纹理解压后的体积做近似估算：显存 ≈ 所有纹理解压后总和（实际还包含几何体、FBO、后处理等占用）
影响：
- 显存是三维应用的“生死线”：超限会出现黑屏、贴图丢失、闪退、频繁掉帧
阈值：
- 优秀：＜ 150 MB
- 正常：150 ~ 300 MB
- 警告：300 ~ 600 MB
- 严重：＞ 600 MB
三、快速诊断规则（面板内置提示可以直接用）
- 面数高 → GPU 压力高 → 掉帧、旋转卡
- 纹理大 / 多 → 显存/带宽压力高 → 掉帧、黑屏、闪退
- 材质 / DrawCall 高 → CPU 提交压力高 → 帧率不稳、忽高忽低、交互不跟手
- JS Heap 高 → 解析/缓存/对象过多 → 卡顿、加载卡死、崩溃
- FPS 低 → 综合压力已超标 → 优先排查 DrawCall 与纹理/面数
架构思考
性能面板的价值不在“展示更多数字”，而在“把问题定位成本降下来”。一套好的指标体系必须同时满足三点：口径一致（可比）、影响可解释（可行动）、阈值可落地（可告警）。只要围绕这 9 个核心指标做统一口径与提示规则，团队就能用同一套语言讨论性能问题，减少争论与反复试错。