整理 WebGL2 與 WebGL1 的差異

整理 WebGL2 與 WebGL1 的差異

前言

  WebGL2 已經推出有一段時間了，自己學 WebGL2 也有一段時間了，這裡就把 WebGL2 與 WebGL1 的差異做個比較，順便做個紀錄。

內容

  在 WebGL1 的時候取得 Context 的程式碼如下

var context =  canvas.getContext( 'webgl') ||
               canvas.getContext( 'webkit-3d') ||
               canvas.getContext( 'experimental-webgl')||
               canvas.getContext( 'moz-3d');

WebGL2在取得 Context 的程式碼如下

var context =  canvas.getContext( 'webgl2');

WebGL2 在這部分比較簡單，因為沒有歷史的包袱。WebGL2 相容於 WebGL1，所以舊的程式應該能沿用，要注意的是依據 Extension 來執行的程式碼，有些 Extension 在WebGL1會出現，但在 WebGL2 卻不會再顯示，如 Ext_sRGB 與 WEBGL_depth_texture。

  根據  [ WiKi ] WebGL 裡所說WebGL2是基於 OpenGLES3 ，但在 Shader model 方面差相當的多， OpenGLES3 的 Shader mpdel 如下

OpenGLES3 的 Shader model

而 WebGL1 與 WebGL2 的 Shader model 如下

WebGL 的 Shader model

這裡可以看到 WebGL2 在 Shader model 是沒有改變的，所以不支援 Geometry shader 與 Tessellation shader。

  WebGL2 開始支援 UBO (Uniform buffer object)與 Sampler Object，用法跟 OpenGL 的用法一樣沒改，但 Sampler Object 使用要注意之前我發現的 Electron搭配WebGL使用的Bug。WebGL2 支援 Transform feedback ，但這個功能我沒用過以後再研究。

  最後介紹一下一些實用的網站，在 查詢瀏覽器支援 WebGL2 的狀況 可以查詢各個瀏覽器對於 WebGL2 的支援狀況，如果要查詢目前瀏覽器的支援狀況可以到 WebGL Report，網址是 查詢目前瀏覽器是否支援 WebGL2，開啟後可以看到下圖

查詢目前瀏覽器對於 WebGL 的支援狀況

不只可以查 WebGL2 ，WebGL1也可以順便查， Extension 的部分也會整個列印出來，用起來相當方便。

參考資料

查詢瀏覽器支援 WebGL2 的狀況
查詢目前瀏覽器是否支援 WebGL2
[ WiKi ] WebGL
[ MDN ] WebGL2RenderingContext