WebGLWebGL

给一张 3D 商品卡跑三项验收

面板顶部已经检测出你这台设备的 WebGL 情况。下面的音箱是真的在用你的显卡渲染。先换成「关了硬件加速的旧电脑」，再模拟「显卡被回收」，看同一张商品卡会怎样；然后勾上「写了降级与恢复」重跑，让三行验收都变成通过。

知识点：底座会缺席，页面不能跟着倒

刚才商品卡上出现过的几种结果，对应下面四件事。

• WebGL 是浏览器调用显卡（GPU）画图的接口；three.js、Babylon.js、Spline 导出的网页都建立在它上面。
• 不支持 WebGL 的情况真实存在：关闭硬件加速、远程桌面、老旧显卡驱动、部分企业浏览器策略。
• 运行中还会「上下文丢失」：切后台太久、驱动重置、同时开了太多 3D 页面，画面会冻住或变黑。
• 降级只替换 3D 区域：价格、文案和主按钮不能依赖 WebGL 才渲染出来。

什么时候用、怎么验收

只要页面里有 three.js、Spline 或任何 canvas 3D，就要把降级写进需求。

• 信号：AI 的报告里出现 WebGLRenderer、canvas、three，或你的页面要放 3D 模型、3D 地球、3D 背景。
• 验收一：在浏览器设置里关闭「使用硬件加速」后重开页面，应看到静态图和说明，而不是白屏。
• 验收二：Chrome 地址栏打开 chrome://gpu，能看到 WebGL 是否被禁用；手机上用一台旧机器真机打开。
• 验收三：让 AI 加一个调试按钮或在控制台触发上下文丢失，确认页面会提示并能恢复。
• 不适用：纯装饰的 3D 背景可以直接隐藏不显示，但仍不能让报错打断整页。

正反例：同一个 3D 商品页

需求只差一句话，旧电脑用户看到的完全不同。