最近Michael Chaize使用HTML 5和Flash等技术实现了同样一个粒子系统,并对其在不同浏览器,不同操作系统,不同平台(桌面和移动设备)的性能进行了一个评测。可以看到,当粒子数达到4000时,Flash的性能已经是HTML 5的3倍。 但是这个评测没有使用到HTML 5 最新的WebGL Canvas。于是在原测试程序基础上新加了基于WebGL的测试功能。
为了公平起见,粒子系统的计算采用原javascript 实现,没有放到 GPU的shader中计算。
测试网页地址在这里。
结果见下图
这个粒子系统测试在使用HTML和2D Canvas时瓶颈完全在图形的绘制上,而在使用WebGL后瓶颈转移到了javascript对粒子系统的计算上。以上测试均基于Chrome 5 Dev版,通过添加 –enable-webgl 启动参数启用了WebGL功能。同时使用了Firefox Dev 版进行了比较,与Chrome有较大差距,甚至没有与Chrome的普通图形绘制方式拉开差距。
此测试中Flash是否启用了GPU加速还不得而知。今 后浏览器使用GPU加速技术后,可以对HTML和2D Canvas的绘制进行加速,从而不用采用复杂的WebGL就能获得较快的绘制速度。