通过减少 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. 谢谢观看