跟月影学可视化
月影
前奇虎 360 奇舞团团长,可视化 UI 框架 SpriteJS 核心开发者,《JavaScript 王者归来》作者
30206 人已学习
新⼈⾸单¥68
登录后,你可以任选4讲全文学习
课程目录
已完结/共 54 讲
跟月影学可视化
15
15
1.0x
00:00/00:00
登录|注册

30|怎么给WebGL绘制加速?

其他优化手段
优化方法
性能优化原则
Shader的效率
透明度与反锯齿
项目经验
综合考虑
复杂问题
Shader的效率
透明度与反锯齿
动态批量绘制
静态批量绘制
多实例渲染
减少每一帧的绘制次数
减少CPU计算次数
尽量发挥GPU的优势
性能优势
直接操作GPU
要点总结
其他优化手段
动态批量绘制
静态批量绘制
减少CPU计算次数
常规绘图方式的性能瓶颈
性能优化总结
其他优化手段
优化方法
性能优化原则
GPU优势
性能瓶颈
WebGL
性能优化

该思维导图由 AI 生成,仅供参考

你好,我是月影。这节课,我们一起来讨论 WebGL 的性能优化。
WebGL 因为能够直接操作 GPU,性能在各个图形系统中是最好的,尤其是当渲染的元素特别多的时候,WebGL 的性能优势越明显。但是,WebGL 整体性能好,并不意味着我们用 WebGL 就能写出高性能代码来。如果使用方式不当,也不能充分发挥 WebGL 在性能方面的优势。
这节课,我们就重点来说说,怎么充分发挥 WebGL 的优势,让它保持高性能。

尽量发挥 GPU 的优势

首先,我们来想一个问题,WebGL 的优势是什么?没错,我强调过很多遍,就是直接操作 GPU。因此,我们只有尽量发挥出 GPU 的优势,才能让 WebGL 保持高性能。但这一点是很多习惯用 SVG、Canvas 的 WebGL 初学者,最容易忽视的。
为了让你体会到发挥 GPU 优势的重要性,我们先来看一个没有进行任何优化的绘图例子,再对它进行优化。

常规绘图方式的性能瓶颈

假设,我们要在一个画布上渲染 3000 个不同颜色的、位置随机的三角形,并且让每个三角形的旋转角度也随机。
常规的实现方法当然是用 JavaScript 来创建随机三角形的顶点,然后依次渲染。我在创建随机三角形顶点的时候,是使用向量角度旋转的方法创建了正三角形,我想这个方法你应该也不会陌生。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

WebGL是一种性能优秀的图形系统,能够直接操作GPU,因此在渲染大量元素时具有明显的优势。为了充分发挥WebGL的性能,需要注意几个关键点。首先,减少CPU计算次数,可以通过在顶点着色器中进行矩阵运算,从而降低顶点计算的次数。其次,采用静态批量绘制(多实例绘制)技术,将相同几何图形的顶点数据传入一次性渲染,利用GPU并行处理,从而大幅提升性能。另外,透明度与反锯齿以及Shader效率也会对性能产生影响。在处理半透明图形时,开启混合模式会带来一定的性能开销,而反锯齿则可以避免图形边缘出现锯齿,但也会带来性能开销。因此,根据实际需求,需要权衡是否开启这些功能以达到性能和效果的平衡。 总的来说,批量绘制是WebGL绘制最大的优化手段,能够充分发挥GPU的优势,因此在实际的WebGL项目中,应该优先考虑批量渲染来减少一帧中的绘制次数。同时,需要避免WebGLProgram切换和uniform的频繁修改,以提升性能。 此外,Shader的效率也是需要注意的关键点。为了尽可能合并数据,动态批量绘制图形,需要尽量使用不同的着色器代码,并在绘制过程中根据不同元素进行切换。此外,Shader代码的特性是并行计算,因此需要避免使用if语句,而是使用函数代替分支,避免一些耗时的计算,多使用简单的加法和乘法,以保证着色器的高效率运行。 综上所述,WebGL的性能优化原则是尽量发挥出GPU的优势,减少CPU计算次数,减少每一帧的绘制次数,并注意Shader的效率。在实际项目中,需要综合考虑项目需求、数据特征、技术方案等因素,才能得出最适合的优化方案。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《跟月影学可视化》
新⼈⾸单¥68
立即购买
登录 后留言

全部留言(1)

  • 最新
  • 精选
  • l_j_dota_1111
    如果几何图形都一样,但是位置不是随机的,而是从数据中获取的,是不是也不能使用静态批量渲染方式?

    作者回复: 只是位置和大小不同,其实都可以批量渲染,把transform参数作为attribute传进去,我代码里面因为是随机位置,所以是只传了一个id

    2021-08-13
    2
收起评论
显示
设置
留言
1
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部