返回知识库

网页 3D · 交互与性能

3D 性能3D Performance

网页 3D 的负担来自面数、贴图尺寸、绘制次数(draw call)和像素比。电脑流畅不代表手机流畅:验收要用这四个数字对照预算,再在真机上看帧率。

把一个 3D 展厅调进手机预算

这是 AI 第一版:300 把椅子每把都是独立网格,雕塑 60 万面,贴图 4K,像素比跟随设备,还开着阴影。左上角是你这台电脑的真实读数(renderer.info 与帧率)。逐个调整下面的开关,看旁边的手机预算表哪一行变成 ✓,直到四行都达标。

任务把这个展厅调进中端手机预算:旁边四行全部变成 ✓(0/4)

正在按需加载 3D 引擎(three.js)…

雕塑细分
300 把椅子
贴图尺寸
像素比上限
阴影
中端手机预算对照
项目现在预算结果
每帧三角形含阴影那一遍:投影物体会再画一次,面数接近翻倍测量中≤ 50 万…
draw call(绘制次数)每把椅子 2 个网格,各画一次:光椅子就 600 次测量中≤ 100…
单张贴图最大4096×4096 一张就要 85 MB 显存,手机内存吃紧4K · 约 — MB≤ 2K✗ 超出
像素比(手机上)3 倍屏每帧要画 9 倍像素,是 1 倍的 9 倍工作量3(跟随设备)≤ 2✗ 超出
中端手机 · 按预算规则估算测量中…等第一批真实数据这是估算,不是测量:最后一定要在真机上看帧率,并持续运行 5 分钟看是否发烫。

正在按需加载 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 一个可以核对的预算。

反例「3D 有点卡,优化一下」

AI 改了几行说「已优化」。你在电脑上看还是 60 帧,觉得没问题就上线;客户手机上照样卡成幻灯片,还发烫。

正例「中端手机 50 帧以上:面数 50 万内、draw call 100 内(椅子用 InstancedMesh)、贴图最大 2K、像素比上限 2;给我改前改后的 renderer.info 和帧率」

AI 交回一张对照表,四个数字都能核对;你再用真机跑 5 分钟确认,验收有依据。

快速自测

AI 报告:「展厅已优化,在我的 MacBook 上稳定 60 帧。」报告里 draw call 还是 850。你该怎么判断?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。

看看真实的项目蓝图里,3D 性能是怎么被用上的。