WebGL VS Canvas 2D硬件加速

Question

現在，我需要在畫布上繪製許多圖像。畫布大小爲800x600px，我有很多256x256px（有些小）的圖像來繪製，這些小圖像將在畫布上組成一個完整的圖像。我有兩種方法來實現這一點。首先，如果我使用canvas 2D上下文，即context = canvas.getContext('2d')，那麼我可以使用context.drawimage()方法將每個圖像放在畫布的正確位置。

另一種方法，我使用WebGL在畫布上繪製這些圖像。這樣，對於每個小圖像，我需要繪製一個矩形。矩形的大小與此小圖像相同。此外，矩形位於畫布的正確位置。然後我使用圖像作爲紋理填充它。

然後，我比較這兩種方法的性能。他們的fps都將達到60，而動畫（當我點擊或移動鼠標時，畫布會重繪多次）看起來非常平滑。所以我比較他們的CPU使用率。我期望當我使用WebGL時，CPU將使用較少，因爲GPU將確保很多繪圖工作。但結果是，CPU使用率看起來幾乎相同。我試着優化我的WebGL代碼，我認爲它夠好。通過谷歌，我發現默認情況下，Chrome，Firefox等瀏覽器將啓用硬件加速。所以我試圖關閉硬件加速。然後第一種方法的CPU使用率變得更高。所以，我的問題是，因爲canvas 2D使用GPU加速，所以我需要使用WebGL來進行2D渲染嗎？畫布2D GPU加速和WebGL有什麼不同？他們都使用GPU。也許有其他方法可以降低第二種方法的CPU使用率？任何答案將不勝感激！

Answer 1

Canvas 2D仍然支持比WebGL更多的地方，所以如果你不需要任何其他功能，那麼使用Canvas 2D就意味着你的頁面可以在那些具有畫布但不具有WebGL的瀏覽器（如舊的Android設備）上工作。當然，在這些設備上它會很慢，並且可能由於其他原因而失敗，例如，如果有很多圖像，則會耗盡內存。

從理論上講，WebGL可以更快，因爲canvas 2d的默認值是保存了drawingbuffer，而WebGL則不是。這意味着如果您在WebGL上關閉消除鋸齒功能，瀏覽器可以選擇雙緩衝區。它不能用canvas2d做的事情。 WebGL中的另一個優化是關閉alpha，這意味着瀏覽器可以在將WebGL合成到頁面時關閉混合選項，這也是它無法使用canvas 2d的選項。 （有計劃能夠關閉阿爾法帆布2D但截至2017年6月它不是廣泛支持）

但是，通過選項我的意思就是這樣。瀏覽器決定是否進行優化。

否則，如果你不選擇這些優化，那麼2將會是相同的速度。我沒有親自發現這種情況。我試圖用canvas 2d做一些drawImage的事情，並沒有像我使用WebGL那樣獲得平滑的幀率。這是沒有意義的，但我認爲在瀏覽器內部發生了一些我不知道的事情。

我想這會帶來最後的區別。 WebGL是低級並且衆所周知的。瀏覽器沒有太多東西可以搞砸了。或者換句話說，你是100％控制的。

另一方面，Canvas2D取決於瀏覽器做什麼以及做出哪些優化。他們可能會在每個版本中進行更改我知道Chrome在256x256下的任何畫布都不是硬件加速的。另一個例子是畫布在繪製圖像時的功能。在WebGL中製作紋理。你決定你的着色器有多複雜。在畫布中，你不知道它在做什麼。也許它使用了複雜的着色器，支持所有各種畫布globalCompositeOperation，蒙版和其他功能。也許對於內存管理來說，它會將圖像分割成卡盤並將其渲染爲片段。對於每個瀏覽器以及同一個瀏覽器的每個版本，它決定做的事情都取決於該團隊，與WebGL一樣，它幾乎是100％。中間沒有太多的東西可以搞亂WebGL。

供參考：這裏是an article detailing how to write a WebGL version of the canvas2d drawImage function，其次是an article on how to implement the canvas2d matrix stack。