Appearance
Three.js 低配设备自适应渲染降级策略：分级配置 + 动态监控（含客户告知项）
低配办公设备（集成显卡、老笔记本、低配置平板等）在 3D 场景中常见问题是：掉帧、卡顿、黑屏甚至崩溃。单纯“优化某一个模型”无法覆盖全链路，本方案把降级工程化为一条自动化闭环：启动前识别设备档位，运行时持续监控，按策略动态降级或回升，确保核心功能优先可用。
配套阅读（统一指标口径与阈值）：/thoughts/threejs/threejs-performance-panel-core-metrics-analysis
一、核心目标（先定边界）
- 覆盖面：尽可能保障更多终端设备可稳定运行核心 3D 功能（模型加载、交互操作、核心业务逻辑）
- 原则：功能可用优先，其次是画质；必要时主动让步渲染质量避免卡死/崩溃
- 预期：明确降级后的可感知变化，并形成可复用的客户沟通话术
二、整体框架：探测 → 分级 → 配置 → 监控 → 降级/回升
自适应降级不是“单次决策”，而是一个持续控制系统：
- 启动时：设备能力探测 → 设备分级（L1~L4）→ 应用分级渲染配置
- 运行时：周期性采样指标 → 触发降级/回升 → 记录策略命中与收益
建议将设备分级与运行时策略做成可配置，避免引擎层强制默认开启任何降级动作。
三、启动阶段：设备能力探测与分级（L1~L4）
3.1 探测维度（建议最小集）
- GPU 与 WebGL：渲染器信息、WebGL1/2、最大纹理尺寸等
- 设备资源：CPU 核心数、设备内存（可用则采集）
- 轻量压力测试：快速渲染固定规模几何体（如 10 万三角面）得到首帧耗时与瞬时 FPS
3.2 分级定义（可直接落地）
- L1（高配）：独显/高性能设备，可承载高分辨率纹理与复杂后处理
- L2（中配）：普通办公本（中等集显），支持 2K 纹理与基础阴影
- L3（低配）：老旧办公本/入门平板（低端集显），仅建议 1K 纹理与简化特效
- L4（极限低配）：超老旧设备，优先保障“能用”，关闭高负载特性
四、分级渲染配置矩阵（含客户可感知变化）
下表给出一套第一版可落地配置，项目可根据业务目标与客户容忍度调整。
| 渲染参数 | L1（高配） | L2（中配） | L3（低配） | L4（极限低配） | 客户可感知变化 |
|---|---|---|---|---|---|
| 模型面数 | ≤ 50 万 | ≤ 20 万 | 自动减面 30%~50% | 自动减面 60%~70% | 细节减少、棱角更圆滑，复杂模型轮廓更简洁 |
| 纹理分辨率 | 4K（4096） | 2K（2048） | 1K（1024） | 512 | 贴图逐步变糊，文字/图案不清晰 |
| 纹理通道 | 全开 | 全开 | 关闭法线/金属等 | 仅保留基础色（或无贴图） | 质感下降，出现塑料感；极限低配可能纯色 |
| 渲染分辨率 | 100% | 80% | 60% | 50% | 画面更模糊、锯齿更明显 |
| 后处理特效 | Bloom + 抗锯齿 | 关闭 Bloom | 仅保留基础抗锯齿 | 全部关闭 | 无辉光，边缘锯齿增强 |
| 阴影质量 | 2048 软阴影 | 1024 硬阴影 | 512 硬阴影 | 关闭阴影 | 阴影逐步变差，极限低配无阴影立体感下降 |
| 帧率策略 | 60fps | 30fps | 30fps | 30fps | 中低配更稳但不丝滑，极限低配仅保证不卡 |
五、运行时动态监控：采样指标与触发条件
5.1 监控指标（与面板对齐）
运行时建议把监控分成两层：体验层（卡不卡）与归因层（为什么卡），并尽量与性能面板口径一致：
- 体验层：FPS、帧时间分位（p95/p99）
- CPU 提交：DrawCall、Materials Count
- GPU 算力：Triangles、Vertices
- 显存/带宽：Textures Count、Max Texture Size、VRAM Estimate
- 稳定性：JS Heap、GC 频次/耗时（可选）
5.2 触发规则（建议第一版）
- 降级触发：FPS ＜ 25 持续 2 秒 → 降一级
- 回升触发：FPS ＞ 50 持续 3 秒 → 升一级（逐步恢复）
- 稳定停止：FPS 稳定在 30+ 一段时间后可降低调整频率
建议做“防抖与冷却时间”，避免频繁抖动。
5.3 诊断到动作：把“监控”变成“对症降级”
单纯用 FPS 触发降级容易出现“降了但不见效”。建议在触发后做一次快速归因，优先打在大头瓶颈上：
| 主要异常 | 典型表现 | 优先动作（从上到下） |
|---|---|---|
| GPU 填充/片元压力 | 降低分辨率效果立竿见影 | 降低渲染分辨率（PixelRatio）→ 关闭/降低后处理 → 降低阴影 |
| CPU 提交压力（DrawCall 高） | 降分辨率收益不大，但仍卡 | 关闭阴影/后处理 → 资产侧合批/实例化（必要时）→ 限制动态物体数量 |
| 显存压力（VRAM 高/纹理大） | 黑屏、贴图丢失、频繁掉帧 | 降纹理分辨率 → 启用纹理压缩（KTX2）→ 精简贴图通道 |
| GPU 算力（Triangles 高） | 旋转/缩放时掉帧明显 | LOD → 适度减面 → 降低动态光源/阴影复杂度 |
| JS Heap/GC 压力 | 间歇性卡顿、交互不跟手 | 限制缓存上限 → 释放不用资源 → 降低更新频率 |
5.4 防抖、冷却与上限（避免抖动与过度降级）
- 冷却时间：每次降级后至少等待一段时间再允许下一次降级
- 降级上限：一次会话中最多降到 L4，且同一动作不要重复执行
- 回升更严格：回升门槛应高于降级门槛，并要求更长的稳定时间
- 关键动作保护：有“客户可感知强”的动作（例如减面、通道精简）建议仅在 L3→L4 或显存超标时触发
六、降级执行顺序（先动大头，再动体验）
建议从“高收益、低风险、可回退”的动作开始，避免画质一次性暴跌：
- 关闭 Bloom/辉光等后处理
- 降低阴影分辨率 → 关闭阴影
- 降低渲染分辨率（建议通过 PixelRatio 实现）
- 降纹理（分辨率/压缩，如 KTX2）
- 模型减面
- 精简贴图通道（关闭法线/金属等）
- 启用实例化/视锥体裁剪等（适用时）
- 锁定 30fps（作为兜底稳定器）
七、客户告知项：可感知变化与不影响项
7.1 可感知变化（必须提前同步）
- 模型质量：细节丢失、边缘更圆、远处更简化；极端情况下小零件可能被简化
- 贴图/纹理：清晰度下降，文字/细节模糊；质感下降（塑料感）
- 整体画面：模糊与锯齿更明显；辉光与阴影效果减弱或关闭；帧率更稳定但不丝滑
7.2 不影响项（重点保证与强调）
- 核心业务功能与交互逻辑不受影响（旋转/平移/缩放/选中/数据绑定等）
- 降级仅作用于渲染质量与性能配置，不改变业务结果
八、客户沟通说明（可直接复用）
- 目标：优先保证核心 3D 功能在更多设备上稳定可用，避免卡顿/崩溃
- 机制：系统会根据设备性能自动调整渲染质量，性能越好画质越高，性能越差画质越低
- 正常现象：低配设备出现贴图模糊、模型细节减少、特效关闭等属于正常降级表现
- 承诺边界：降级不影响业务逻辑与核心功能，仅影响视觉体验
九、落地保障：验收、灰度与参数治理
- 设备覆盖：按 L1~L4 档位准备样机/远程设备池做回归
- 指标验收：至少满足 FPS 分档稳定在目标区间（例如 30+），且不崩溃/不黑屏
- 灰度策略：先在小流量或特定页面启用，监控策略触发率与回退比例
- 参数治理：阈值、档位配置、降级顺序必须可配置，并支持一键关闭降级
9.1 兜底与异常处理（建议纳入方案）
- WebGL Context Lost：必须有恢复与提示策略，避免用户认为“系统坏了”
- 显存预算：为纹理/后处理预留预算上限，超过上限优先触发“显存类降级”（降纹理/关后处理/降分辨率）
- 白名单与禁用规则：关键文字贴图、关键模型、关键交互对象应允许配置为“不降级/不减面/不精简通道”
9.2 与单模型优化链路联动（建议作为同一套体系）
自适应降级解决的是“运行时场景压力”问题，单模型优化解决的是“资产准入与模型体质”问题，两者建议复用同一套指标与阈值分层：
- 性能面板指标口径：/thoughts/threejs/threejs-performance-panel-core-metrics-analysis
- 单模型优化策略：/thoughts/threejs/threejs-model-optimization-comprehensive-solutions
- 工程落地清单（体检门禁/策略/可度量项）：/thoughts/threejs/threejs-model-optimization-engineering-implementation-checklist
架构思考
自适应降级的关键不在“列出一堆降级手段”，而在于把它做成可配置的控制系统：有分级、有指标、有触发、有顺序、有回退、有可观测。这样才能在不同客户、不同机型、不同资产质量下持续迭代，而不是每次上线靠人工兜底。