WebGL使支持HTML<canvas>標簽的瀏覽器不安裝任何插件，便可以使用基于OpenGL ES 2.0的API在canvas中進行3D渲染筒占。WebGL程序由js控制代碼和計算機的圖形處理單元(GPU,Graphics Processing Unit)中執(zhí)行的渲染代碼(shader code)組成妻献。webgl元素可以和其他HTML元素混合浮声，并且會和頁面的其他部分或頁面背景相合成。
- 需要理解的幾個概念
canvas: 畫布
vertex shader: 頂點著色器旋奢，用來存儲圖像的位置相關(guān)信息泳挥，如坐標、大小等
fragment shader: 片元著色器至朗，用來描述對象的顏色紋理等信息
buffer: 緩沖區(qū)屉符，通常情況下如果繪制多個點或復雜的紋理會特別使用到buffer object，其他情況下，圖形會在該區(qū)域進行緩沖矗钟，緩沖完成后顯示在屏幕上唆香。
- 協(xié)同工作過程
協(xié)同工作過程
通過canvas獲取webgl的上下文 > vartex shader和fragment shader指定圖形的形狀和樣式 > 將圖形數(shù)據(jù)放入相應緩沖區(qū) > 繪制
- 獲取webGL執(zhí)行環(huán)境
+ html
<canvas id="canvas"></canvas>
+ js
var canvas = document.getElementById('canvas');
// 獲取webgl執(zhí)行環(huán)境的上下文
var webgl = canvas.getContext('webgl');
// 實際上，getContext的參數(shù)可能為["webgl", "experimental-webgl","webkit-3d","moz-webgl"]中的任意一個吨艇，因此通常情況下在正式項目中躬它，需要對瀏覽器的兼容性進行處理。
- 坐標系統(tǒng)
webgl的三維坐標系統(tǒng)是笛卡爾坐標系中的右手坐標系东涡，具有x冯吓，y，z三個維度疮跑。右手坐標系如下圖：(箭頭指向為正軸方向)
右手坐標系
- canvas與webgl坐標系對應關(guān)系(默認下)
canvas的中心點：webgl的坐標原點(0.0, 0.0, 0.0)
canvas x軸左右邊緣：webgl中x軸的-1.0和1.0
canvas y軸上下邊緣：webgl中y軸的1.0和-1.0
- 關(guān)于-1.0和1.0
webGL本質(zhì)上是基于光柵化的API组贺，而不是基于3D的API。webGL只關(guān)注兩個方面祖娘，即投影矩陣的坐標和投影矩陣的顏色失尖。使用webGL程序的任務(wù)是實現(xiàn)具有投影矩陣坐標和顏色的webGL對象。頂點著色器提供投影矩陣的坐標渐苏，片段著色器提供投影矩陣的顏色掀潮。無論目標圖形尺寸多大，其投影矩陣的坐標范圍始終是從-1.0到1.0琼富。
笛卡爾坐標系以屏幕中心為原點胧辽，規(guī)范正交化后是-1到1，方便轉(zhuǎn)化為笛卡爾坐標計算公黑。
上一篇： WebGL學習(1) — 瀏覽器支持測試
