WebGL如何在任何设备上流畅运行：nothing-to-watch的GPU检测分级与FPS性能优化技巧清单-平芜编程栈

【免费下载链接】nothing-to-watch

An experimental webgl gallery that can visualize tens of thousands of film posters as a voronoi diagram

项目地址：https://gitcode.com/gh_mirrors/no/nothing-to-watch

nothing-to-watch 是一个实验性 WebGL 画廊项目，能把数万张电影海报实时渲染成交互式的 Voronoi（泰森多边形）力导向图谱。为了在不同硬件上保持稳定帧率，它采用了一套完整的GPU 检测分级 + FPS 动态降级策略：先用 detect-gpu 探测显卡档位，再根据运行时的 FPS 采样自动调低画质。这篇文章带你拆解这套 WebGL 性能优化机制，并整理出一份实用的性能调优清单。

一、先给设备"分级"：GPU 检测与四档设备体系

在加载任何重负载内容之前，nothing-to-watch 会先判断当前设备属于哪一档。四档体系定义在 consts.ts 中：

档位	代号	典型设备
📱 Mobile	`DEVICE_CLASS.mobile`	手机
🥔 Potato（低配）	`DEVICE_CLASS.low`	小屏笔记本、平板
😐 Mid-range（中端）	`DEVICE_CLASS.mid`	中端独显桌面机
💪 High-end（高端）	`DEVICE_CLASS.high`	高端独立显卡

判定逻辑在 device-class.ts 的estimateDeviceClass中，优先级如下：

移动端优先：用 UA 解析判断是否为手机，直接归入 mobile 档；
小屏/平板降档：命中小屏媒体查询或平板特征时，归入 low 档；
桌面端探测 GPU：调用 detect-gpu 的getGPUTier()，映射为——
- 第 3 档 →high
- 第 2 档 →mid
- 其他 →low

分级结果会展示给用户，并允许手动修正，入口在 device-class-widget.tsx。

二、分级如何映射到画质：预设与海报数量上限

设备档位不是摆设，它会直接决定两个关键参数：渲染预设（Preset）和海报格子数量（Cell Limit），映射规则集中在 core-settings-widget.tsx。

渲染预设

预设定义在 presets/ 目录下，每个预设对应不同的着色器与模拟配置：

Mobile（mobile.ts）：仅 5000 个格子，关闭后期特效，禁用多线程模拟，使用 KTX 压缩纹理——专为移动 GPU 打造；
Minimal（minimal.ts）：默认预设，50000 格子，走最轻的渲染路径，推荐给 low 档设备；
Depth（depth.ts）：开启后期深度着色器与多分辨率纹理动态加载，仅推荐给 high 档设备。

海报数量上限

CELL_LIMIT提供从 5,000 到 100,000 的 5 档选择，每个档位都标注了推荐设备等级：

low 档 → 最多推荐 25,000
mid 档 → 50,000
high 档 → 100,000（标记为不主动推荐）

设备越强，允许渲染的海报越多；设备越弱，格子数量越低，这是控制 WebGL 填充率与内存的第一道闸门。

三、FPS 监控器：动态调质的"心跳传感器"

静态分级只解决了"起步"问题，运行时性能还要靠 FPS 监控器实时兜底。核心实现在 performance-monitor.ts：

采样：每 250ms 统计一次帧率，维护 10 个滚动平均值；
动态阈值：根据探测到的屏幕刷新率设定上下界（高刷屏为 60~100，普通屏为 50~60），给判断留出"安全带"，避免误触发；
升降档：当超过 75% 的样本低于下界时触发onDecline（降质），高于上界时触发onIncline（升质），每次以 0.1 的步长在 0~1 之间调整性能因子factor；
防抖与兜底：单帧间隔超过 500ms 视为休眠/节流，样本直接作废；反复抖动超过阈值后触发onFallback，锁定固定基线防止画质震荡。

监控器通过 ticker.ts 挂到 Voroforce 引擎的渲染循环上，每个 tick 调用onTick()，并在页面切换可见性时重置样本，保证统计干净。

四、低帧率自动降级：用户无感知的"保流畅"流程

当 FPS 持续走低，low-fps-alert.tsx 会接管体验：

订阅performanceMonitor的onDecline事件；
一旦触发，冻结渲染循环并弹出 "Low FPS detected" 提示窗；
自动把设备预估档位下调一级（high → mid → low），同时提供一键降配置面板；
设置面板应用后自动刷新页面，以更低预设和更少格子重启；
内置 30 秒冷却时间与弹出次数上限（已是最低配置时上限降为 1 次），避免反复打扰。

这套"检测 → 提醒 → 降级 → 冷却"的闭环，让弱设备用户不用手动折腾也能获得可接受的帧率。

五、纹理压缩与多分辨率图集：省显存的关键

除了分级和降级，nothing-to-watch 在资源层面也下了功夫，配置见 media.ts：

压缩纹理格式：默认使用 DDS/KTX 格式的 GPU 压缩纹理（如 ASTC/ETC2 类），比原始 RGBA 大幅降低显存占用与带宽；
三级分辨率图集：海报被预烘焙进网格纹理图集（Texture Atlas），分为 low / mid / high 三个版本——缩略远景用低清层，拉近后才加载高清层；
按需加载版本：Depth 等预设会在模拟步骤中根据单元格邻接度动态请求更高分辨率的海报层（见 depth.ts 中的requestMediaVersions），只把显存花在看得见的地方；
批量分块加载：JSON 数据与媒体资源分块加载，避免一次性压垮网络与内存。