大家好，我是日拱一卒的攻城师不浪，致力于前沿科技探索，摸索小而美工作室，这是2025年输出的第20/100篇文章。
能在浏览器里跑三维，那是最方便的，这种方案使用成本比较低，且更新方便，不想UE等游戏引擎，相对来说比较重，还吃电脑配置。
但是能在浏览器端丝滑的渲染三维（特别是大场景下），并不是一件容易的事情。因此，性能优化就成了关键。
今天我们就结合浏览器环境来聊一下，影响三维渲染的核心性能指标都有哪些。
一、帧率（FPS）
帧率 ：每秒渲染的画面帧数，英文全称：Frames Per Second。例如60 FPS ，表示每秒播放60帧动画。
一般情况下，三维渲染的帧率要保持在30FPS以上，才能保证通过人的肉眼观看不会感觉到卡顿。如果低于30FPS，则会感觉到画面明显卡顿，动画不连贯。
如果帧率在60FPS以上，那么标明你的三维场景已经非常丝滑了。
例如在Cesium里，开启帧率检测，就可以看到帧率的实时变化了。
有人会问，FPS上边还有一个15.62MS，这个是什么意思呢？这个叫做帧时间：代表每帧的渲染时间，这个数字表示每一帧在渲染完成之前所花费的平均时间，单位是毫秒（ms）。所以帧时间越低代表流畅度越好，因为较低的帧时间意味着系统可以更频繁地更新屏幕。
影响FPS的因素
1. Draw Call
在计算机图形学中，**Draw Call（绘制调用）**是指 CPU 向 GPU 发送的一个指令，要求它渲染某个对象（如模型、网格、粒子等）。
每次执行 draw 命令（如 OpenGL 的 glDrawElements() 或 WebGL 的 drawElements()），都会触发一次 Draw Call。
当draw call数量越多，就代表CPU和GPU之间的通信越频繁，进而会导致显著降低帧率（如 WebGL 下超过 1000 次/帧可能导致卡顿）。
2. 材质与着色器复杂度
例如动态光照、阴影、PBR 材质都会增加片元着色器的计算量。
3. 主线程阻塞
估计做Web3D的，大部分都写过前端，因为我认识的朋友中很多都是从前端转三维的。
所以应该都对JavaScript有一定的认识，JS它是单线程 运行的， 当有逻辑（如物理模拟、数据解析）等任务占用了主线程 时间，就会导致无法及时触发 requestAnimationFrame动画函数从而导致卡顿。
小结一下，针对以上几个阻碍性能的因素，我们应该从哪方面着手优化呢？
-
使用 实例化渲染（Instancing） 合并相同模型的 Draw Call。
-
通过 离线烘焙光照贴图 减少实时计算。
-
将计算密集型任务移至 Web Worker 或使用 OffscreenCanvas 分离渲染线程。
以上每一个优化方案拿出来，都能写上一篇万字的文章，因此，让我们后边慢慢的来，一个一个的啃下来。
二、CPU/GPU 负载均衡
不知道CPU和GPU的自行搜索下吧，这里我就不过多解释了。由于三维渲染非常依赖电脑的配置，也主要就是CPU和GPU。
频繁的 JavaScript 计算（如动画逻辑）、未优化的数据序列化（如 JSON 解析模型数据）等操作，都会导致CPU占用率飞速飙升，达到瓶颈。
而高分辨率渲染、复杂片元着色器（如 SSAO）、过度 Overdraw（透明物体多层叠加）等行为则会导致GPU运行过载。
那么我们如何能知道计算机的硬件运行达到瓶颈期了呢？这里推荐几个WEB端的检测工具：
- Chrome Performance面板 分析主线程任务耗时，查看
火焰图等，更多关于谷歌性能分析插件的教程请参考：developer.chrome.com/docs/devtoo...
-
通过 WebGL 调试工具（如 Spector.js）查看 GPU 指令耗时。
-
使用性能监测工具
stats.js，用于实时监测Web端的性能指标，包括帧率，渲染一帧所需的毫秒数以及占用的内存
针对以上问题，我们可以使用以下优化手段：
- LOD（Level of Detail）：根据距离动态切换模型细节层级，如下图，视距越大，物体越模糊，三角面就越少，越近则越清晰，三角面越多。
-
视锥体裁剪（Frustum Culling）：避免渲染不可见物体。
-
使用 压缩纹理格式 （如
ASTC、ETC2）减少显存带宽占用。
三、内存管理
-
WebGL 资源泄漏 ：未释放的
纹理、Buffer和Shader占用显存，导致页面崩溃（尤其在移动端）。 -
JavaScript 堆内存 ：大型几何数据（如
Float32Array）未及时回收。 -
优化建议：
-
显式调用
gl.deleteTexture()和gl.deleteBuffer()释放资源。 -
使用 对象池（Object Pooling） 复用内存（如粒子系统）。
-
启用 纹理压缩 和 Draco 几何压缩 减少内存占用。
-
四、网络与资源加载
-
性能指标 ：
-
首屏渲染时间（FCP）：从页面加载到首次渲染三维内容的时间。
-
资源加载峰值：同时下载的纹理、模型文件数量。
-
-
优化手段 ：
-
分块加载（Chunked Loading） ：优先加载可视区域内的资源，避免不需要渲染的资源占用
http请求，因为浏览器http同时请求有数量限制。 -
使用 glTF 格式 ：支持
二进制存储、内置Draco 压缩，比传统 OBJ+PNG 节省30%以上体积。 -
HTTP/2 多路复用：减少模型资源的加载延迟。
-
高带宽 ：三维渲染，带宽建议百兆以上。
-
最后
知己知彼方能百战不殆，想要优化Web3D性能，首先得对浏览器有足够的了解，对性能监控工具以及性能优化工具也得熟知，这样才能更精准的去解决对应的问题。
如果您对三维性能优化有更多更好的建议，欢迎评论区留言讨论。
也可以进
可视化&Webgis交流群，大家共同探讨，加我：brown_7778（备注来意）。