AI 改了几行说「已优化」。你在电脑上看还是 60 帧,觉得没问题就上线;客户手机上照样卡成幻灯片,还发烫。
网页 3D · 交互与性能
3D 性能3D Performance
网页 3D 的负担来自面数、贴图尺寸、绘制次数(draw call)和像素比。电脑流畅不代表手机流畅:验收要用这四个数字对照预算,再在真机上看帧率。
把一个 3D 展厅调进手机预算
这是 AI 第一版:300 把椅子每把都是独立网格,雕塑 60 万面,贴图 4K,像素比跟随设备,还开着阴影。左上角是你这台电脑的真实读数(renderer.info 与帧率)。逐个调整下面的开关,看旁边的手机预算表哪一行变成 ✓,直到四行都达标。
任务把这个展厅调进中端手机预算:旁边四行全部变成 ✓(0/4)
| 项目 | 现在 | 预算 | 结果 |
|---|---|---|---|
| 每帧三角形含阴影那一遍:投影物体会再画一次,面数接近翻倍 | 测量中 | ≤ 50 万 | … |
| draw call(绘制次数)每把椅子 2 个网格,各画一次:光椅子就 600 次 | 测量中 | ≤ 100 | … |
| 单张贴图最大4096×4096 一张就要 85 MB 显存,手机内存吃紧 | 4K · 约 — MB | ≤ 2K | ✗ 超出 |
| 像素比(手机上)3 倍屏每帧要画 9 倍像素,是 1 倍的 9 倍工作量 | 3(跟随设备) | ≤ 2 | ✗ 超出 |
正在按需加载 three.js,并生成 4K 贴图……
知识点:四个数字决定手机卡不卡
刚才预算表的每一行,都是 AI 报告里你应该看到的一个数字。
- 面数(三角形数):模型越精细越多;中间档肉眼常常看不出差别,却能省下九成以上。开阴影会让投影物体再画一遍。
- draw call(绘制次数):每个独立网格都要单独画一次。大量重复的物体(椅子、树、灯)合并或用实例化(InstancedMesh),几百次能降到个位数。
- 贴图尺寸决定显存:4K 一张约 85 MB,2K 约 21 MB;手机上贴图通常不超过 2K。
- 像素比:3 倍屏每帧要画的像素是 1 倍的 9 倍,上限设到 2 几乎看不出模糊。
- 帧率要在真机上看:你的电脑一直 60 帧不代表手机流畅;还要持续运行 5 分钟,看会不会发烫降频。
什么时候用、怎么验收
3D 页面要给手机用户看,就要在需求里写预算,而不是事后说「优化一下」。
- 信号:客户说「手机上卡」「发烫」「耗电」,或页面里有大量重复物体、高精度模型、4K 贴图。
- 需求里写数字:总面数 50 万以内、draw call 100 以内、贴图最大 2K、像素比上限 2,目标中端手机 50 帧以上。
- 验收一:让 AI 给出改前改后的 renderer.info(三角形、draw call、贴图数)和帧率截图。
- 验收二:拿一台中端安卓机真机打开,开着页面 5 分钟,帧率不明显下降、机身不烫手。
- 不适用:只在电脑大屏展示的内部演示,可以放宽预算,但仍要写清目标设备。
正反例:同一个「展厅有点卡」
区别在于有没有给 AI 一个可以核对的预算。
AI 交回一张对照表,四个数字都能核对;你再用真机跑 5 分钟确认,验收有依据。
快速自测
AI 报告:「展厅已优化,在我的 MacBook 上稳定 60 帧。」报告里 draw call 还是 850。你该怎么判断?
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。
用到这个知识点的案例
看看真实的项目蓝图里,3D 性能是怎么被用上的。