是否有任何理由使用WebGL代替2D遊戲/應用的2D Canvas？

是否有任何理由，除了性能，使用WebGL而不是2D-Canvas的2D遊戲/應用程序？是否有任何理由使用WebGL代替2D遊戲/應用的2D Canvas？

換句話說，WebGL提供哪些2D功能是2D-Canvas無法輕鬆實現的功能？

2014-02-06 Ali Shakiba

順便說一句：雖然你不能用2D和3D API方面同樣畫布上，你仍然可以通過使用多個畫布合併它們。 WebGL可以使用2d畫布作爲紋理，2d畫布可以使用WebGL畫布作爲drawImage的源。 – Philipp

那麼，性能將是最大的原因之一，因爲當你編寫遊戲時，它必須是快速的。但還有其他一些原因可能會導致您在畫布上選擇WebGL。它提供了編碼着色器，照明和縮放的可能性，如果您正在製作商業遊戲應用程序，這非常重要。在50個精靈之後，畫布也會變得遲鈍。

來源

2014-02-06 12:50:51 Xk0nSid

尤其是在像android平板電腦這樣的設備中，CPU在JavaScript中快速超載，使用WebGL的主要原因是將渲染負載轉移到GPU上。 – Curtis

@ Xk0n，Re「提供了編碼着色器，光照和縮放的可能性」，但是它不會變成GPU依賴的嗎？ – Pacerier

Canvas無法用Canvas做任何事情，你無法使用webGL：canvas允許使用get/putImageData來壓縮字節，並且可以用webGL以編程方式繪製線條，圓圈......。
但是，如果你正在尋找一些圖紙，並且在60 fps下還有一些效果，那麼性能差距會非常大，以至於在canvas上運行良好時，無法使用canvas。性能是一項根本功能。

然而，WebGL是相當複雜的程序：看看帆布是對你不夠好或尋求將緩解疼痛庫...
其他的缺點：它不能在IE瀏覽器（但到底是什麼？），還有一些手機。
看到這裏的兼容性：http://caniuse.com/webgl

來源

2014-02-06 13:26:57 GameAlchemist

在這個問題看從另一個側面：
如何開發者選擇其中一個技術比另一個？

集成在他們的已建系統更好
更容易使用
更快
具有更多功能或更適合他們的需求
成本
更多洗車臺，獨立的

所以我會討論canvas和webGL API之間的區別r摒棄這些特質。

canvas和webGL都是JavaScript API。所以它們在集成（綁定）方面幾乎相同。他們都有一些庫/引擎可以加速你的編碼。不同的庫爲您提供了不同的方式來組織代碼，因此它不同於如何在繪製API的基礎上構建代碼的方式，但它仍然是非常相同的東西（其餘代碼如何與其綁定在一起）。

如果您使用庫，編寫代碼的難易程度取決於庫本身。
但是，如果您從零開始編寫代碼，那麼canvas'API更容易學習和理解，它只需要最少的數學知識。發展是快速和直接的。 WebGL需要一名具有強大數學技能的開發人員，他們完全理解渲染管道並知道他在做什麼。這些人很難找到，生產速度較慢（因爲代碼的大小和將其整合到其餘部分的複雜性），因此 - 成本更高。

WebGL速度更快，功能更多。毫無疑問。這是一個本地的3d API，可以讓您完全訪問渲染管道，並且所有代碼和效果都可以更快速，更可調整地執行。使用webGL真的沒有限制。

canvas和webGL都是html5的好東西。通常支持一個的設備將支持另一個。

所以，總結一下：

合併繪圖API和其他相關代碼（集成）：類似
易用性：
- （帶庫）帆布= WebGL的
- （從頭開始）webGL < < canvas
speed：webGL> canvas
功能：WebGL的>帆布
成本：WebGL是昂貴得多
平臺：非常相似

希望這有助於。

P. S.公開討論。

來源

2014-02-08 23:41:01

...非常感謝，這對我很有幫助。 –

@Abstract，Web GL的好教程在哪裏，需要多少個小時？ – Pacerier

@Pacerier只是谷歌它，前幾個點擊可能夠好。但是，一般來說，要花好幾周甚至幾個月的時間才能熟練使用webgl和圖形編程，多年的工作會非常出色。這不僅僅是一些你需要學習API的隨機「庫」，就是這樣。 –

最大的優勢是流水線的可編程性和性能。例如，假設您正在繪製兩個盒子，一個是隱藏的，一些GL實現可以放棄隱藏盒子。

至於比較，由於在這裏沒有創建表的快速方法，所以我只是上傳了下面比較表的圖片。僅爲完整性添加Three.js。

Table

來源

2014-02-09 13:51:17 prabindh

「一些GL實現有放棄隱藏框的範圍」，但是你不能在JS中檢測到重寫的部分，因此不會重繪不需要的部分嗎？ – Pacerier

從經驗來說我own applications，圖形着色器一直我需要WebGL的支持的唯一原因。易用性對我來說沒什麼影響，因爲這兩個框架都可以用three.js抽象出來。假設我不需要着色器，我允許使用任一框架來最大化瀏覽器/機器支持。

來源

2014-02-11 16:16:54 16807

嘿很酷，任何其他使用canvas vs webgl的演示代碼？ – Pacerier

WebGL爲2D畫布提供了哪些2D功能？最大的一個恕我直言是圖形硬件上的可編程片段着色器。例如，在WebGL的，一個可以實現康威生命遊戲的着色器上的3D硬件：

http://glslsandbox.com/e#207.3

這種2D顯示的將只有CPU，而不是GPU上運行，用2D畫布。所有的計算都將在JavaScript中實現，即使在網絡工作人員的幫助下，也不會像GPU那樣平行。這僅僅是一個例子，各種有趣的2D效果可以通過着色器來實現。

來源

2014-02-12 18:27:39 emackey

因此與canvas相比，WebGL對OS更多或更少徵稅？ – Pacerier

我很好奇，無論如何，所有的畫布最終都會做webgl;如果它使用預編譯的通用用例webgl，這將比直接webgl更有效;或者如果它沒有以任何方式與opengl進行交互，除非你使用webgl。 – Dmitry

@Dmitry很好的問題，不同的瀏覽器可以自由地採取不同的方法來解決這個問題。但是，無論他們如何加速Canvas 2D API，Canvas 2D API本身都不提供可編程着色器或頂點陣列緩衝區。這是一個「chatty」API（每個元素繪製一個JavaScript到Native調用），而WebGL的API允許批量數據加載和基於GPU的自定義處理。 – emackey

當你特別想一些經典的2D的東西，不與帆布很好地工作：

顏色變換（如閃爍精靈）
重複位圖填充下旋轉
平鋪圖（下帆布一些實現將創建接縫）
深分層（非常實施相關）
乘法或加法混合

...但當然你有像素訪問，所以你可以做任何事情，包括上述手動。但那可能確實很慢。理論上你可以編寫Mesa openGl來渲染畫布。

使用webGL的另一個重要原因是結果很容易移植到其他地方。這也使得技能更有價值。

使用畫布的原因是，它仍然得到更好的支持，並且如果您學習像素逐像素地做事，這也是非常有價值的教訓。

來源

2014-02-14 05:56:16 starmole

Btw是WebGL多線程？你可以有兩個線程同時畫出屏幕的兩個部分嗎？ – Pacerier

由於WebGL是特別新的技術和HTML5畫布更建立你想要什麼

使用取決於你的用戶。如果你認爲你的用戶會使用移動設備，那麼我會建議

HTML5畫布，但如果你想更好的2D渲染，我會使用WebGL。所以你可以做什麼，如果

使用移動渲染與HTML5否則，如果他們在一個支持WebGL的平臺上。

例如：

if (window.WebGLRenderingContext) { 
    webGLcanvasApp() 
     } else if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
    html5CanvasAppFMobile() 
    } else { 
    html5CanvasApp() 
    }

來源：
Proper way to detect WebGL support?
What is the best way to detect a mobile device in jQuery?

來源

2014-02-14 20:58:08 MayorMonty

是否有任何理由使用WebGL代替2D遊戲/應用的2D Canvas？

回答

相關問題