在iPad 2上繪製HTML5中粒子的最有效方式

我正在嘗試爲iPad 2創建一個HTML5網站/應用程序的移動燈光。我想知道最好的方法是使用HTML5完全可行。我選擇了HTML5，因爲開發和部署比使用Objective C的原生iOS應用更簡單，更便宜。當然，如果事實證明HTML5不能提供足夠的性能，我可能不得不忍受苦藥。在iPad 2上繪製HTML5中粒子的最有效方式

反正給你的印象是什麼我說的，這是我走到這一步：

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

或者你可以在行動here看到它（僅適用於基於WebKit瀏覽器）。

起初，我嘗試使用HTML5畫布，並以類似的方式將上述徑向漸變繪製爲粒子。它工作，但即使在我的臺式電腦上，幀速率也很糟糕！

因此，經過一番閱讀後，我發現CSS3轉換可能是硬件加速的，所以我構建了您在上面看到的版本。每個「粒子」是一個64x64 PNG圖像。對於每個燈光來說，都有「頭燈」（一個img），後面是一個由115個img元素組成的路徑。每個img元素都使用「translate3d」（以及縮放和旋轉）進行轉換。而且每個元素的不透明度都是動態調整的。

這樣做提供了更好的我的電腦framerate，但我懷疑iPad 2將處理它。

如果有人能提供一些關於如何提高這一般性能並考慮目標平臺的提示，我將不勝感激。

感謝您提前提供任何幫助！

來源

2012-03-14 Bunkerbewohner

而不是懷疑表現，爲什麼不實際嘗試呢？您可能會感到驚訝... – Alnitak 2012-03-14 15:45:33

在iPad2上測試過雅。它有點生澀而緩慢。此外，您還沒有正確設置視口縮放，因爲它有一個奇怪的縮放事情發生。 – Armstrongest 2012-03-14 20:05:19

非常感謝！這證實了我的擔憂，我猜。 @Alnitak我現在只有iPad 1在這裏進行測試，這當然是不理想的...... – Bunkerbewohner 2012-03-14 20:53:24

這應該建立在畫布上。看看EaselJS和這個演示。

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

來源

2012-03-28 14:13:34 CharlesTWall3

您可以通過使用WebGL的優化性能的LOT（，這是支持iPad2的。）......這不支持ios safari上的基本html頁面，如NisonMaël所述...

目前，您只有canvas作爲解決方案。這仍將會給你更好的性能...

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

隨着一點點的信心和時間，你會驚奇地發現）

來源

2012-08-09 10:25:22

我讀過iOS沒有WebGL，除了廣告。但是，如果您可以使用WebGL，那絕對是您的選擇。我寫了一個粒子庫：http://arcanis.github.com/js.spark/test/ – 2012-08-09 10:27:56

如果您接受大意的微小變化，其它的方法可能會奏效快：

而是通過許多粒子的方法繪製光的小道，只繪製出當前位置的燈光在Canvas元素。
然後，您可以通過填充頂部具有非常低不透明度的黑色矩形，在幀開始處將整個圖像變暗。這樣，這些痕跡就會變暗，但不會像現在這樣改變它們的顏色。
然而，繪圖操作的數量將大大減少。最昂貴的操作是填充每幀的漸變矩形。

來源

2012-08-14 19:50:07 dronus

在iPad 2上繪製HTML5中粒子的最有效方式

回答

相關問題