[WebGL入門]九，頂點緩衝的基礎

標籤：webgl

註：文章譯自http://wgld.org/，原作者杉本雅広(doxas)，文章中如果有我的額外說明，我會加上［lufy：］，另外，鄙人webgl研究還不夠深入，一些專業詞語，如果翻譯有誤，歡迎大家指正。

局部座標

使用WebGL可以繪製各種各樣的3D模型，而且，還可以繪製點和線，決定繪製什麼肯定需要頂點。
沒有頂點的話，也就沒有多邊形了，因為沒有辦法進行點和線的繪製了。所以，WebGL的編程中一定要處理頂點情報。而且，頂點中有必須要包含的情報，那就是頂點的位置座標。
既然頂點的位置座標是必須的，那麼要如何定義這些資訊呢？
頂點最終在畫面上繪製的時候，要經過模型座標變換，視圖座標變換和投影座標變換，這個已經說過好多遍了。但是，在使用座標情報之前，首先必須定義這些頂點群的構成，否則就沒有辦法開始了。
定點群放到什麼位置，就表現為座標，一般叫做局部座標。局部座標就是模型的各個頂點相對於原點（x，y，z都為0）的座標。
比如，一個局部座標為（1.0,0.0,0.0）的頂點，x軸方向距離原點的距離是1.0。同樣，各個頂點都依次定義了局域座標，這樣頂點的位置就形成了。

儲存頂點的情報

這些頂點的局部座標，必須在WebGL程式中進行變換，然後傳給頂點著色器。在WebGL中，為了處理這些頂點的資訊，並將這些頂點資訊儲存，則需要使用頂點緩衝。
緩衝（buffer），是表示資料儲存空間的一般的電腦用語。WebGL中還有幀緩衝，索引緩衝等各種緩衝，但是不管哪種緩衝，你只需要把它想成儲存資料的一塊兒空間就行了。頂點緩衝是其中的一種，就是用來儲存頂點資訊的，WebGL中的頂點緩衝叫做VBO（vertex buffer object）。


頂點緩衝必須，且不是唯一的頂點緩衝的作用，不光是儲存頂點的位置，位置以外跟頂點相關的資訊都可以用頂點緩衝來儲存。
比如，頂點的法線，顏色，文理座標等所有跟頂點相關的資訊都可以用頂點緩衝來儲存和管理。但是需要注意一點的是，向頂點資訊中追加資訊的時候，需要使用相應的VBO。


頂點緩衝和attribute上次的文章裡，已經介紹了頂點著色器接收資料的機制，attribute修飾符定義的變數。
其實，擔任向這個attribute變數裡傳入資料的任務的就是VBO。WebGL的程式中，先把頂點的資訊儲存到VBO中，接著，通知著色器哪個VBO和哪個attribute變數相關，然後頂點著色器就可以正確的處理這些頂點了。
根據前面的內容，頂點緩衝相關的處理的具體流程如下。
?頂點的各種資訊儲存到數組裡
?使用WebGL的方法產生VBO
?使用WebGL的方法將數組中的資訊傳給VBO
?頂點著色器中的attribute函數和VBO結合
VBO的產生過程中，首先在最初的時候必須把資料儲存到數組中，因為頂點的資訊（位置）中必須有x，y，z，所以數組的長度必須是頂點數x3，這個時候需要注意，數組不可以使用多維陣列，VBO的產生需要使用一維數組。
準備好儲存頂點資訊的數組之後，使用WebGL的context的方法產生VBO，當然產生的時候VBO是空的，然後將頂點資訊的數組傳給它。
然後，比如把頂點著色器中的attribute函數和VBO關聯起來。上面也說了，VBO中不是只能儲存一種資訊，位置情報以外的法線和顏色等資訊存在的時候，要準備合適的VBO，然後通知WebGL哪個VBO和哪個attribute變數相關聯。


總結這樣，頂點緩衝應該理解了吧。
頂點裡添加怎樣的情報，程式員是可以自由決定的，DirectX中有一種叫做［靈活頂點格式］的機制，WebGL中頂點格式是沒有的，程式員必須自己處理所有的頂點情報。
只需要添加你想要添加的頂點資訊的VBO就行了，VBO的產生方法以及怎樣把數組資訊傳遞給VBO等等，以後的文章中會詳細的介紹。首先，把大概的流程理解一下。
最難理解的是怎樣把attribute變數相關聯，這個以後肯定會詳細的介紹的。這次，只需要瞭解了頂點緩衝的作用就足夠了。


下次，講一下座標變換中不能缺少的矩陣的計算方法，把這些講完之後，就可以在畫面上繪製多邊形了，期待吧。

轉載請註明：轉自lufy_legend的部落格http://blog.csdn.net/lufy_legend