性能优化
SceneV 3D 运行在浏览器中,性能受模型复杂度、贴图大小、灯光阴影、数据刷新和脚本逻辑共同影响。大屏常驻展示场景尤其需要提前做性能规划。
1. 优化目标
| 目标 | 说明 |
|---|---|
| 首屏快 | 用户进入页面后尽快看到主要场景 |
| 帧率稳 | 视角切换、模型动画、数据刷新时保持流畅 |
| 内存可控 | 长时间运行不明显增长 |
| 数据稳定 | 接口异常或网络波动不导致页面崩溃 |
| 易维护 | 模型、脚本、数据绑定结构清晰 |
2. 模型优化
- 删除模型中不可见的内部结构。
- 合并不需要单独交互的静态网格。
- 重复设备优先复用同一模型资产。
- 远景模型降低面数和贴图精度。
- 对需要点击的设备保留独立节点。
- 控制透明材质数量,透明对象会增加渲染成本。
3. 贴图优化
| 场景 | 建议尺寸 |
|---|---|
| 远景建筑 | 512 或 1024 |
| 近景设备 | 1024 或 2048 |
| 小图标和标识 | 256 或 512 |
| 大面积背景 | 按实际显示效果控制,不盲目使用超大图 |
贴图越大,加载和显存压力越高。大屏展示中,清晰度要结合观看距离判断。
4. 灯光与后期效果
- 环境光优先,点光源和聚光灯按需使用。
- 阴影只给关键对象开启。
- 大量自发光、辉光、景深、反射效果会增加渲染压力。
- 告警效果不要所有设备同时闪烁。
- 动态光源要谨慎使用,优先用材质颜色表达状态。
5. 数据刷新优化
| 数据类型 | 建议刷新方式 |
|---|---|
| 基础信息 | 页面加载时请求一次 |
| 统计指标 | 5 秒到 30 秒刷新 |
| 设备状态 | WebSocket 或 MQTT 实时推送 |
| 高频遥测 | 服务端聚合后再推送关键字段 |
| 告警数据 | 实时推送或短周期轮询 |
WARNING
不要把所有设备的所有遥测字段都实时推送到前端。前端只需要和当前场景表现相关的字段。
6. 脚本优化
- 高频脚本只做字段转换,不做复杂计算。
- 避免在脚本中频繁创建大型对象。
- 对异常数据做默认值处理。
- 对告警定位、视角切换等动作做节流。
- 复杂规则可以放到服务端计算,前端只接收结果。
7. 标签与面板优化
三维场景中标签和面板过多会影响可读性和性能。
建议:
- 总览视角只显示关键区域标签。
- 放大到局部视角后再显示设备级标签。
- 告警标签优先级高于普通标签。
- 同屏面板数量保持可控。
- 长文本放到详情面板,不直接铺在场景里。
8. 发布检查清单
发布前建议检查:
- 首屏是否能在可接受时间内显示主要场景。
- 视角切换是否卡顿。
- 数据断开后页面是否仍可操作。
- 长时间运行后内存是否持续增长。
- 大屏分辨率下模型、标签、面板是否清晰。
- 移动端或低性能电脑是否需要简化版本。
性能优化不是最后一步才做的事情。模型准备、数据结构、脚本设计和交互策略都会影响最终运行效果。