Flash vs. HTML5 Stage3D vs. WebGL
對於今天的測試，還是使用本系列前面測試中的位圖，我已經準備好了新的基於WebGL的HTML5版本。我使用基於Starling像Pixi.js 2D層。Pixi.js的一大優勢是，當WebGL不可用時，它會自動回落到普通的“2D”canvas。這可以讓我輕鬆地測試瀏覽器，不處理WebGL在各種環境中得到一個完整的性能。
只是在這麼多設備和這麼多瀏覽器上運行這些測試已經教了我很多。例如，在Android上的Firefox（我已經加入到今天的測試）顯示了幾個“未響應”對話框後，最後才運行了幾秒鐘，完全停止幾秒鐘，顯示“未響應”對話框，然後才穩定運行。一直以來UI是奇慢無比的，瀏覽器經常死機。啟動的過程是痛苦的，但它最終運行了。在HTC Evo V 4G中儘管無數次的嘗試，仍不會運行任何Alpha圖像。
Android上的Google Chrome沒有默認啟用WebGL。你必須進行一些神秘的"實驗" 來啟用它或使用默認的緩慢的“2D”canvas。最終實際上會有多少用戶啟用它？我不知道，但我猜，幾乎沒人會懶得弄。
Android瀏覽器在LG Optimus G上聲稱有一個WebGL環境，顯示腳本超時對話框，然後呈現約20個白色sprite。我已經取消它，因為其輸出從未正確。HTC EVO V 4G它只是簡單的在2D環境中渲染。試著測試一下，看看自己的結果，然後再看下面我的結果。Flash測試沒有變，還是上次的Stage3D版本。
可以直接打開HTML文件獲取HTML5版本的源碼。它包含的是在img標籤中的base64編碼圖片
下面是測試的設備：
[tr]
| Name | CPU | GPU | OS |
| MacBook Pro Retina | 2.3 GHz Intel Core i7 | NVIDIA GeForce GT 650M | OS X 10.8.3 |
| Windows Desktop | 3.4 GHz Intel Core i7 2600 | Nvidia GeForce GTX 550 Ti | Windows 7 SP 1 |
| iPad 2 | 1 GHz ARM Cortex-A9 | PowerVR SGX543MP2 | iOS 6.1.3 |
| LG Optimus G | 1.5 GHz Qualcomm Krait | Qualcomm Adreno 320 | Android 4.1 |
| HTC Evo V 4G | 1.2 GHz Qualcomm Snapdragon | Qualcomm Adreno 220 | Android 4.0 |
| Device | Opaque Rotation | Opaque Scaling | Opaque Rotating & Scaling | Alpha Rotating | Alpha Scaling | Alpha Rotating & Scaling |
| HTC Evo V 4G – Android 4 Browser (2D) | 0.7 | 0.8 | 0.6 | 0.7 | 0.8 | 0.6 |
| HTC Evo V 4G – Firefox 21 (WebGL) | 5.6 | 9.8 | 6.1 | n/a | n/a | n/a |
| HTC Evo V 4G – Google Chrome 27 (2D) | 0.4 | 0.4 | 0.3 | 0.3 | 0.4 | 0.3 |
| HTC Evo V 4G – Google Chrome 27 (WebGL) | 8.1 | 10.2 | 5.5 | 7.9 | 9.6 | 7.8 |
| Apple iPad 2 – Safari (2D) | 2.6 | 2.6 | 2.5 | 2.6 | 2.6 | 2.5 |
| Apple iPad 2 – Google Chrome 27 (2D) | 1.5 | 1.6 | 1.5 | 1.5 | 1.6 | 1.5 |
| LG Optimus G – Android Browser (WebGL) | n/a | n/a | n/a | n/a | n/a | n/a |
| LG Optimus G – Firefox 21 (WebGL) | 4.3 | 12.1 | 5.2 | 7.3 | 10.8 | 7.5 |
| LG Optimus G – Google Chrome 27 (2D) | 0.7 | 0.7 | 0.7 | 0.7 | 0.7 | 0.6 |
| LG Optimus G – Google Chrome 27 (WebGL) | 12.7 | 13.8 | 12.3 | 11.7 | 12.7 | 9.6 |
| Motorola Xoom – Android 4 Browser (2D) | 0.9 | 0.9 | 0.7 | 0.9 | 0.8 | 0.7 |
| Motorola Xoom – Firefox 21 (WebGL) | 5.3 | 5 | 4.4 | 5.1 | 5.1 | 4.6 |
| Motorola Xoom – Google Chrome 27 (2D) | 0.7 | 0.7 | 0.7 | 0.7 | 0.7 | 0.7 |
| Motorola Xoom – Google Chrome 27 (WebGL) | 7.2 | 7.5 | 6.5 | 7.6 | 7.8 | 6 |
| MacBook Pro Retina – Google Chrome 27 (WebGL) | 60 | 60 | 60 | 60 | 60 | 60 |
| MacBook Pro Retina – Firefox 21 (WebGL) | 60 | 60 | 60 | 60 | 60 | 60 |
| MacBook Pro Retina – Safari 6 (WebGL) | 20 | 20 | 20 | 20 | 20 | 20 |
| MacBook Pro Retina – Flash Player 11.7 | 60 | 60 | 60 | 60 | 60 | 60 |
| Windows Desktop – Google Chrome 27 (WebGL) | 60 | 60 | 60 | 60 | 60 | 60 |
| Windows Desktop – Firefox 21 (WebGL) | 60 | 60 | 60 | 60 | 60 | 60 |
| Windows Desktop – Internet Explorer 10 (2D) | 18.1 | 19.7 | 12.6 | 21.8 | 19.1 | 13.3 |
| Windows Desktop – Flash Player 11.7 | 60 | 60 | 60 | 60 | 60 | 60 |
這些結果能說明什麼呢？HTML5與往常一樣，結果都是紙上談兵。一般來說，2D環境下的性能在Android上是1FPS,IOS上是1-3FPS.如果你足夠幸運，有WebGL，那麼你可以預期4-10 FPS。當然，你要在移動設備上使用WebGL的唯一方法是，用戶正在使用Firefox或者通過不情願的步驟在Chrome上啟用WebGL。根據2013年6月的統計，這意味著只有不到1.65%的用戶會在移動設備上使用WebGL。當然，這些結果來自於從低（如ipad1）到高（如ipad4）的設備.
桌面完全是另外一回事。當一切順利的話，它們真的很好。Flash在Chrome,和Firefox上輕鬆達到60FPS .事實上，我曾嘗試在MacBook Pro Retina的Chrome中測試40,000個sprite而不是10,000個，它仍然可保持60FPS.Safari瀏覽器在所有測試中莫名其妙的為20FPS 。IE甚至IE10中，沒有WebGL的，會回落到令人沮喪的12-21PFS.總而言之，約40%的桌面瀏覽器可使用WebGL。
HTML5是極不穩定的。如果你突破這種限制，你的玩家/用戶可能會忍受瀏覽器崩潰，用戶界面反應遲鈍，莫名其妙地性能不佳。有很大的可能，如果不使用WebGL將會造成桌面瀏覽器中性能下降20倍，移動設備中下降3-15倍。即使這樣，有很多3D性能只是繪製一堆2Dsprite。目前2D遊戲很流行，尤其是移動和社交休閒市場。但今天的測試中不強調大型的三角網格，複雜的著色器等。
如果你想製作一個想運行在瀏覽器中的遊戲，不要期望其渲染超過紅白機遊戲。或許不是。Super Mario 移植版本在HTC Evo V 4G的Chrome上運行很慢。即使Pong 移植似乎運行約1FPS,所有的都無法使用。同時，大量的本地安裝應用程序很複雜。如果你想需要WebGL,你也許能夠處理非常簡單的遊戲，Run Pixie Run ，Pixi.js的一個Demo,不太穩定但在HTC EVO V 4G開啟了WebGL的Chrome上勉強可玩。關閉WebGL的大多數用戶會看到什麼，你回到了1FPS：無法播放。
另一方面，Flash's Stage3D是穩定的，無論在什麼操作系統什麼瀏覽器上運行。你能在現代Windows和Mac計算機上達到60 FPS上限。因為它不在作為瀏覽器的插件了，所以不能直接比較。你需要AIR來安裝app，在這種情況下，肯定不能和HTML5比較了。這將導致一個不幸的結論：基於瀏覽器的遊戲隨處可見，並沒有一個高性能的解決方案。對移動端來說，不同型號對應不同性能。IOS甚至都有5種不同型號的iPad，6種不同的iPhone以及5種不同的itouch和ipod。Android設備更是數不勝數。因此很難得到全面的手機性能測試，因為很少有人有那麼多手機。我當然沒有。但是看到此文章的人可能會打開手機上的瀏覽器然後運行上述的測試。想發表自己的測試結果嗎？發表評論吧，要帶上手機設備名字，圖片的alpha值，以及透明度，如果願意還可以加上CPU與GPU數據。
原文鏈接：http://jacksondunstan.com/articles/2289
沒有留言:
張貼留言