在HTML5 <canvas>上最大化粒子渲染的速度

Question

我正在做一个实验,试图在HTML5 Canvas中帧率开始下降之前改善最大粒子数.

我正在使用requestAnimationFrame,我正在使用画布中的drawImage,因为这似乎是渲染图像的最快方法(在jsPerf上测试).

这里有一个有效的jsFiddle:http://fiddle.jshell.net/bewYC/5/

您可能需要刷新或重新运行几次才能使其工作(不知道为什么,但它只是不想在第一页加载时运行.)

As is, my computer running Chrome 22 can maintain 60FPS with about 5,000 particles. With every step above that, FPS starts to drop. If I remove drawImage() and just calculate the particles' positions, my processor doesn't max out until well over 10X as many particles.

What I want to know: Is there is a faster way to render a large amount of particles (say 40,000 for example) than using a loop with drawImage in it? I especially want to know this about JavaScript/Canvas, but if you only have knowledge about another language such as Java or C#, then please share anyway.

Answer 1

对于这个问题,使用WebGL(或适用于您的平台的其他"3D"API)几乎总是最好的方法.在移动位置合成大量图像("纹理",而不是)正是图形硬件设计的好处.现代浏览器确实使用GPU加速来执行2D-Canvas绘图操作,但仍然有JavaScript请求绘制每个单独的图像,这就是问题所在.

我建议您查看WebGL - 对于像粒子系统这样的简单事情,它根本不难编程,并且您可以轻松渲染数千个粒子.您的JavaScript只提供一个包含所有粒子位置的数组.

一种先进的技术是将粒子的模拟也放在GPU上,因此根本不需要JavaScript来执行每个粒子.我自己在GLToy中编写了一个GPU粒子模拟器.在这里,它配置了80,000个粒子,在我的笔记本电脑上实现了60 FPS.实际上,该特定配置的限制是光滑颗粒的填充率; 如果我们只使用点,我可以将它推到300,000粒子.而且我不是图形编程的向导; 我确信知道该做什么的人可以进一步推动它.

(PS链接可能很脆弱,因为我修改了GLToy;如果你没有得到命名效果,请告诉我,以便我可以修复链接.)