在 iPad 2 上用 HTML5 绘制粒子的最有效方法答案

【问题标题】：Most efficient way to draw particles in HTML5 on iPad 2在 iPad 2 上用 HTML5 绘制粒子的最有效方法
【发布时间】：2012-03-31 02:24:33
【问题描述】：

我正在尝试为针对 iPad 2 的 HTML5 网站/应用程序创建带有轨迹的移动灯光。我想知道最好的方法是什么，以及使用 HTML5 是否可行。我选择 HTML5 是因为它比使用 Objective C 的原生 iOS 应用程序更容易、更便宜地开发和部署。当然，如果事实证明 HTML5 根本无法提供足够的性能，我可能不得不吞下苦果。

无论如何，为了让您对我在说什么，这就是我到目前为止所得到的印象：

screenshot http://devdali.no-ip.org/mathias/test-lights/screenshots/1.jpg

或者您可以在here 中看到它（仅适用于基于 webkit 的浏览器）。

起初我尝试使用 HTML5 画布并以与您在上面看到的类似方式绘制径向渐变作为粒子。它有效，但即使在我的台式电脑上，帧速率也很糟糕！

所以经过一番阅读后，我发现 CSS3 转换可能是硬件加速的，所以我构建了您在上面看到的版本。每个“粒子”都是 64x64 png 图像。对于每盏灯，都有一个“头”灯（一个 img），后面跟着一个由 115 个 img 元素组成的轨迹。每个 img 元素都使用“translate3d”（以及缩放和旋转）进行转换。每个元素的不透明度也是动态调整的。

这样做可以在我的计算机上提供更好的帧速率，但我怀疑 iPad 2 会处理它。

如果有人能给我一些关于如何提高总体性能并考虑目标平台的提示，我将不胜感激。

提前感谢您的帮助！

【问题讨论】：

与其怀疑性能，不如实际尝试一下？你可能会感到惊讶...
在 iPad2 上为你测试过。它有点生涩和缓慢。此外，您还没有正确设置视口缩放，因为它发生了奇怪的缩放事情。
非常感谢！我想这证实了我的担忧。 @Alnitak 我现在只在这里得到了 iPad 1 进行测试，这当然不是最理想的......
我真的认为画布会是更好的解决方案。糟糕的帧率是因为它每次都必须重新计算相同的径向渐变，但如果你缓存它（即使用精灵），并在每一步对画布应用变暗过滤器，这有可能比3x115 imgs（我真的很惊讶它的工作原理）。

标签： javascript html animation css ipad-2

【解决方案1】：

如果您接受对效果的微小更改，其他一些程序可能会很快工作：

不是通过许多粒子来绘制灯光的轨迹，而是在 Canvas 元素中的当前位置绘制灯光。
然后，您可以通过填充顶部不透明度非常低的黑色矩形来使整个图像在帧的开头变暗。这样，小径会逐渐变暗，但不会像现在这样改变它们的颜色。
然而，绘图操作的数量将大大减少。最昂贵的操作是为每一帧填充渐变矩形。

【讨论】：

【解决方案2】：

这应该在画布中构建。查看 EaselJS 和这个演示。

http://easeljs.com/ http://easeljs.com/demos/MusicVisualizer/index.html

【讨论】：

【解决方案3】：

您可以通过使用 WebGL（在 iPad2 上受支持）来优化性能很多...正如 Nison Maël 所述，ios safari 上的基本 html 页面不支持此功能...

目前您只有画布作为解决方案。这仍然会给你带来更好的表现......

（您可以查看此博客以获取更多信息： http://learningwebgl.com/blog/

只要有一点信心和时间，你就会惊叹不已！）

【讨论】：

我读到iOS除了广告没有WebGL。但是，如果您可以使用 WebGL，那绝对是可行的方法。我写了一个粒子库：arcanis.github.com/js.spark/test