通过减少 draw call 提升渲染性能

如果无法正常显示,请先停止浏览器的去广告插件。
分享至:
1. 通过减少 draw call 提升渲染性能 沧东 蚂蚁集团 AntV 工程师
2. 目录 01 场景介绍 02 什么是 draw call? 03 draw call 数量对渲染性能的影响 04 使用 Canvas2D 和 WebGL 减少 draw call 05 其他性能提升手段
3. /01 场景介绍
4. 一个典型的大规模图场景 渲染 2w 个 2D 图形(圆、直线、文本),支持平移、缩放、高亮等交互 优化前:15 FPS 交互卡顿 https://g6.antv.vision/zh/examples/performance/perf#eva 优化后:60 FPS 交互流畅 http://g-next.antv.vision/zh/examples/perf/#nodes-8k
5. /02 什么是 draw call?
6. 浏览器 渲染 API,操作系统级 调用 显卡 访问 … 浏览器是如何展示网⻚的? 浏览器通过系统级渲染 API 访问显卡,最终输出到屏幕 💻 输出到屏幕
7. Canvas2D API 浏览器 调用 一次 draw call 的产生 CPU 向 GPU 发出绘制命令,例如调用 Canvas2D API 2D 图形库 调用
8. /03 draw call 数量对渲染性能的影响 开头的场景包含约 2w 个 draw call
9. Rendering Loop Frame #1 Frame #2 CPU Frame #3 CPU CPU draw call GPU rendering Frame #1 Idle GPU rendering Frame #2 60 FPS 0 ms 45 FPS 16.66 ms CPU 准备 draw call 时间⻓ GPU 渲染快,大量空闲时间 21.34 ms 38 ms
10. /04 如何减少 draw call? 使用 Canvas2D 与 WebGL 实现
11. 减少 draw call 的有效手段 from @antv/g-canvas & g-webgl 剔除 脏矩形渲染 合批绘制 Canvas2D & WebGL Canvas2D WebGL CPU CPU GPU draw call 次数 CPU 求交次数 0 5000 10000 15000 20000
12. draw call 次数 CPU 求交次数 0 画布缩放 5000 10000 15000 被剔除图形 待渲染图形 4 5 6 每个图形包围盒与视口求交 2 视口 7 剔除 视口之外的图形无需渲染 1 8 3 draw call:8 求交次数: 8 3 20000
13. draw call 次数 CPU 求交次数 0 场景图 5000 10000 15000 被剔除图形 待渲染图形 4 5 6 2 视口 7 剔除如何加速? 利用场景图信息减少求交次数 1 8 3 draw call:3 求交次数: 8 5 20000
14. RBush draw call 次数 CPU 求交次数 0 https://github.com/mourner/rbush 5000 10000 15000 被剔除图形 RBush 节点 4 5 6 使用 STLT 算法 (Small-Tree-Large-Tree) 批量插入 1 2 视口 7 剔除如何加速? 使用空间索引对区域查询进行加速 待渲染图形 8 3 draw call:3 求交次数: 5 4 20000
15. draw call 次数 CPU 求交次数 0 5000 10000 15000 无需渲染图形 🔍 找出“脏矩形” 脏矩形 待渲染图形 🪥 无需清空整个画布,清空“脏矩形”区域 Canvas2D API:clearRect 1 🎨 重绘与“脏矩形”相交的所有图形 2 视口 “脏矩形”渲染 可类比 React Di ,找出真正发生变化的部分 draw call:4 1k Circles:30 FPS 2 60 FPS http://g-next.antv.vision/zh/examples/event#circles 2000
16. draw call 次数 CPU 求交次数 绘制 8k Circles 0 5000 10000 写入不同属性 GPU Buffer 上传顶点数组 合批渲染 将大量同类图形合并成一批渲染 • 8k Circles:1 draw call 15000 20000
17. /05 除了减少 draw call 还有哪些 性能提升手段?
18. 模型、贴图压缩 LOD(Level of Details) GPU 内存管理优化 减轻 CPU 计算压力,让 GPU 承担更多
19. Rendering Loop Frame #1 Frame #2 CPU Frame #3 CPU CPU draw call GPU rendering Frame #1 0 ms 利用 GPU 空闲时间做计算 Idle 16.66 ms GPU rendering Frame #2 21.34 ms Idle 38 ms
20. 每一帧计算 8k Circles 变换矩阵 视口 GPU 并行计算 配合相机,将计算压力从 CPU 转移到 GPU 中 GPU Driven Rendering 场景(画布)级变换 5.5w 图形 60 FPS 流畅交互 http://g-next.antv.vision/zh/examples/perf#nodes-5w
21. AntV G 渲染引擎 支持 Canvas2D / SVG / WebGL / WebGPU 服务 2D & 3D 可视化场景 https://g-next.antv.vision/zh/docs/guide/introduce
22. 谢谢观看

首页 - Wiki
Copyright © 2011-2024 iteam. Current version is 2.123.1. UTC+08:00, 2024-03-29 04:04
浙ICP备14020137号-1 $访客地图$