WebGL 小註解

WebGL 正如其名, 具有 Web + GL 兩種性質. 它是一個 3D rendering 的 API, 修改自 OpenGL ES 2.0, 而且它使用 Web browser 當作 middleware. 只要有 browser, 就可以用 HTML 來畫 3D.

當然, 此時 WebGL 需要借助 HTML 的 CANVAS. 下面是 CANVAS 的一個例子, 說明 canvas {} 可以畫出圖來. 只不過這個例子是 2D 的, 而不是 3D 的.

大家可以發現, canvas 需要先做一個類似宣告的動作. 以便取得 ID (假設是 xxx 或是上面例子中的 tutorial.

var canvas = document.getElementById(‘xxx’);

然後再用這個 ID 取得 context, 有了 context  就有 drawing buffer. 和其他語言一樣, 第二次用同樣的名字去 getContext, 只會傳回同樣的內容, 不會再 create 新的  object . 

var ctx = canvas.getContext(’yyy’);

至於 drawing buffer 的內容, 主要是 color (8 bit), depth (16 bit), 和 stencil (模板 8 bit).

那麼 view point 呢? 表示方法如下, 由四點所組成的矩形構成四個參數:

ctx.viewport(0, 0, canvas.width, canvas.height);

 在陰影處理的部分, WebGL 支援 GLSL (OpenGL ES Shading Language). 

最後要提一下 DOM (document object model), WebGL 也會用到它. 因為 DOM 是跨 HTML, XHTML, XML 的資料表示方法. 所以 WebGL 的 function 和 interface 是用 DOM 來描述的.

對了! 據說所有知名的 browser 都打算支援 WebGL, 除了 IE9 不想放棄自家的 DirectX 之外.

[ref] WebGL Specification V1.0