準備WebGL Canvas - OpenHome.cc

透過WebGL，瀏覽器可以將大部份的繪圖渲染運算，送進專司影像運算的圖形處理器（Graphics Processing Unit，GPU），從而增加瀏覽器上的繪圖效率，若對HTML5 Canvas ... 回WebGL 最近玩3D建模發現了SculptGL，一個簡單、基於瀏覽器的雕塑應用程式，執行之流暢令人驚奇。

SculptGL的底層是基於WebGL，WebGL則是基於OpenGLES（OpenGLforEmbeddedSystems），這是OpenGL（OpenGraphicsLibrary）的嵌入式系統特化版本，至於OpenGL應該不用多做解釋了，玩2D、3D渲染的開發者，都知道的高效程式庫。

透過WebGL，瀏覽器可以將大部份的繪圖渲染運算，送進專司影像運算的圖形處理器（GraphicsProcessingUnit，GPU），從而增加瀏覽器上的繪圖效率，若對HTML5CanvasAPI、SVG繪圖等在效率上不滿意的話，可以試著使用基於WebGL的程式庫，像是PixiJS、Three.js等，或者直接玩WebGL。

WebGL常被誤解為一套JavaScriptAPI，確實地，開發者可以透過JavaScript來處理HTML頁面、與使用者的互動等，並呼叫WebGL制訂的JavaScriptAPI與著色器程式進行溝通，然而，撰寫著色器程式需要GLSL（OpenGLShadingLanguage），這是一個類似C語言的程式語言。

開發者需要使用GLSL撰寫著色器（Shader），透過JavaScriptAPI編譯、為Canvas繫結、建立著色器並送入GPU，之後透過JavaScript將繪圖需要的資料透過API送給著色器程式來渲染，也就是說，想要認識WebGL，對GLSL的認識也是不可少的。

圖像最後是在Canvas上渲染的，因此起手式就是準備一個Canvas，就WebGL第一個範例來說，目標就設定在令Canvas使用整個瀏覽器視埠（viewport），背景為黑色，暫時不會涉及GLSL與著色器！ 無論如何，先有個Canvas再說：