WebGL性能真相

HTML5的Canvas提供了两种绘图上下文(Graphic Context):一种是”2d”用于绘制二维矢量图,一种是”webgl”用于绘制三维图形。二维矢量图API提供的函数非常人性化,10分钟时间就能入门,所以cantk当初选择了使用二维矢量图API。”webgl”的接口和OpenGL ES 2.0差不多,用起来相当繁琐(我折腾了以整天才搞清除怎么画一张图)。

大家都知道”webgl”是硬件加速的,我和很多人一样认为”webgl”会比”2d”快。http://jsperf.com/也有证据证明这种想法: ”webgl”的drawArrays比”2d”的drawImage快一个数量级。前段时间我决定用webgl实现一套”2d”接口,让cantk不做修改的情况下也能利用webgl的性能优势。

在github也找到了webgl实现”2d”API的库,不过在chrome上用不了,它也几年没有更新了,所以我决定趁此机会学习一下WebGL,自己动手写这样一个库。在软件性能方面我做过不少工作,通常失望的时候比较多,所以在实现drawImage后,先做了一下性能测试,免得做完后才发现性能没有预期的好。

测试结果让人惊讶,仔细一想又在预料之中:

  • 1.对于Android 4.4之前的手机,我没有支持WebGL的手机,欢迎提供测试数据(测试程序见后面)。
  • 2.对于Android 4.4的低端手机(如红米),WebGL的实现反而更慢,不论图片多少,WebGL的实现总是要慢一拍。
  • 3.对于Android 4.4的中高端手机(如Nexus 5),WebGL的实现在图片超过100个(256x256)后才有微弱优势。

为什么jsperf里的案例与实际情况差别这么大呢?我分析了一下,有几个原因:

  • 1.WebGL的矩阵运算是JS实现的,在对象较多时,计算量不容忽视。而jsperf里的案例根本没有矩阵运算,与实际情况完全不符。
  • 2.WebGL的矩阵等状态保存和恢复是JS实现的,在对象较多时,计算量不容忽视。而jsperf里的案例也没有考虑,与实际情况完全不符。
  • 3.drawImage和drawArrays直接对比没有意义,即使不考虑纹理创建和Shader的创建,甚至不考虑多个纹理的切换,不考虑GL Program的切换,要绘制一张图片,在drawArrays之前要调用一大堆函数,才能完成一次贴图。

总的说来,在Android 4.4之后的手机上,”2d”API已经开启了硬件加速,此时WebGL在开发2D游戏上并无明显优势。在iPhone上,”2d”API非常高效,用WebGL开发2D游戏也无必要。WebGL的性能与原生GL ES没法比,所以我觉得WebGL在短时间内不会有太大用途。

附测试程序,欢迎测试和改进:https://github.com/drawapp8/webgl-2d-perfomance

时间: 2024-10-21 05:58:33

WebGL性能真相的相关文章

Chromium Graphics Update in 2014(幻灯片)

摘要:Chromium图形栈在2014年有多项改进,在图形性能和资源消耗方面做了进一步提升,例如ubercompositor的使用,GPU加速的光栅化,零拷贝(zero-copy)的支持,Android WebView的渲染模型改进等.这个幻灯片尝试列举Chromium在图形栈方面一些变化,以及Chromium渲染流水线的总体框架,并对WebGL性能慢于OpenGL原生应用的原因做了一定的推测.

JavaScript Gerden概述

1.对象 1.1 对象使用和属性 JavaScript中所有变量都是对象,除了null和undefined 1.2 对象作为数据类型 JavaScript对象可以作为哈希表使用,主要用来保存命名的键和值的对应关系 1.3 访问属性 点操作符和中括号操作符 中括号操作符在下面2种情况下依然有效 1.动态设置属性 2.属性名不是一个有效的变量名 1.4 删除属性 删除属性的唯一方法是使用delete操作符:设置属性为undefined或者null并不能真正的删除属性,只是移除了属性和值的关联 1.5

JavaScript 秘密花园

? 对象 o 对象使用和属性 o 原型 o hasOwnProperty 函数 o for in 循环 ? 函数 o 函数声明与表达式 o this 的工作原理 o 闭包和引用 o arguments 对象 o 构造函数 o 作用域与命名空间 ? 数组 o 数组遍历与属性 o Array 构造函数 ? 类型 o 相等与比较 o typeof 操作符 o instanceof 操作符 o 类型转换 ? 核心 o 为什么不要使用 eval o undefined 和 null o 自动分号插入 ?

160426、JavaScript 秘密花园

简介 关于作者 这篇文章的作者是两位 Stack Overflow 用户, 伊沃·韦特泽尔 Ivo Wetzel(写作) 和 张易江 Zhang Yi Jiang(设计). 贡献者 贡献者 中文翻译 三生石上 此中文翻译由三生石上独立完成,博客园首发,转载请注明出处. 许可 JavaScript 秘密花园在 MIT license 许可协议下发布,并存放在 GitHub 开源社区. 如果你发现错误或者打字错误,请新建一个任务单或者发一个抓取请求. 你也可以在 Stack Overflow 的 J

JavaScript 基础之: JavaScript 秘密花园

简介 关于作者 这篇文章的作者是两位 Stack Overflow 用户, 伊沃·韦特泽尔 Ivo Wetzel(写作) 和 张易江 Zhang Yi Jiang(设计). 贡献者 贡献者 中文翻译 三生石上 此中文翻译由三生石上独立完成,博客园首发,转载请注明出处. 许可 JavaScript 秘密花园在 MIT license 许可协议下发布,并存放在 GitHub 开源社区. 如果你发现错误或者打字错误,请新建一个任务单或者发一个抓取请求. 你也可以在 Stack Overflow 的 J

Mysql 自定义HASH索引带来的巨大性能提升----[真相篇]

推倒重来 俗话说no zuo no die why you try,这时候我又忍不住zuo了,吭哧吭哧的把解决过程发上博客,向全世界宣布,哥又搞定个难题. 剧情的发展往往是看起来主角完全掌握了局势的情况下,会突然跳出来一个很牛的反面人物,然后搞得主角很惨,搞的过程中主角开始小宇宙爆发,然后逆袭.这次也不例外.踢场子的人该出现了 一顿狂侃之后,发现我原来牛逼的分析,完全经不起推敲.几个问题 1)  在未做HASH索引之前,为什么大表的ROWS那么大,相当于全表扫描 2)  既然SN是唯一索引,那么

WebGL入门教程(二)-webgl绘制三角形

前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用webgl画出一个三角形. 效果图: 在WebGL入门教程(一)-初识webgl中,知道如何绘制一个点 //绘制一个点 gl.drawArrays(gl.POINTS, 0, 1); 但是图形是有多个点组成,那么就应该考虑如何绘制多个点,WebGL提供了一种很方便的机制,缓冲区对象(buffer obje

移动H5前端性能优化指南

概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点6. 基于第五点,要合理处理代码减少渲染损耗7. 基于第二.第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置8. 加载完成后用户交互使用时也需注意性能优化指南 [加载优化] 加载过程

unity内部:内存 和 性能(以及Unity5的升级优化)

      我们的脚本代码里经常会需要访问gameObject引用或者某个组件的引用,最好的方式当然是在脚本Awake的时候就把这些可能访问的东西都缓存下来:如果需要访问临时gameObject实例的某属性或者临时某组件的gameObject实例,在能够确保组件一定存在(可以使用[RequireComponent( typeof(AudioSource ))] 如果没有自动添加移除不了!)的情况下,可以用属性访问,毕竟属性访问比GetComponent要快上一倍,但是如果不能确定组件是否存在,甚