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

頂點屬性的意思

上次的文章中，介紹了一下從著色器的生成，編譯，到程序對象的生成和著色器的連接。這次，簡單的說一下模型數據的定義和頂點屬性的處理。

另外，介紹一下依據模型數據生成VBO的方法。
VBO的使用要比生成難理解一些。可是不要操心，后面會慢慢說明。
接下來看一下頂點屬性。
頂點屬性，說的簡單點，就是頂點包括的各種元素。WebGL中。頂點至少要包括的元素是位置情報。這個之前已經說過非常多遍了。
頂點是三維空間中的隨意一個點，所以一定要有位置情報，假設沒有位置情報。則無法在三維空間中定義這個點，由于每一個點都不一樣，所以位置情報是必須的。lufy：感覺好羅嗦啊，作者是為了強調吧。可是真的好羅嗦啊，好羅嗦啊，啰嗦啊，嗦啊，啊.....
可是，頂點里還有可能包括其它屬性，舉個樣例來說的話，比方頂點的顏色等等。

依據頂點的顏色屬性，來對多邊形進行著色，或者透明等各種各樣的處理。
另外的，還有頂點的法線，紋理坐標等相關的情報，這些都能夠在頂點屬性中自由的定義。DirectX中依據所謂的頂點格式來實現這些，可是在WebGL中頂點的各種屬性都能夠定義在頂點屬性中。

頂點屬性和VBO

既然頂點屬性是能夠自由定義的，那么詳細應該怎樣來實現呢？
看過曾經的文章的話，應該知道頂點屬性的個數和生成VBO的個數是一致的。假設頂點中有三個屬性，那么就須要三個VBO。由于頂點屬性必須通過VBO來傳給頂點著色器。

VBO也叫做頂點緩存，和它的名字一樣，就是將頂點相關的情報緩存起來。

頂點屬性和VBO一對一進行分配，然后傳給頂點著色器。
為了生成VBO，首先準備好和頂點個數相對應的矩陣。這里用的就是普通的javascript數組，當然Array對象也能夠。可是不能夠使用關聯數組。要使用一維數組。

舉個樣例，由三個頂點定義多邊形的時候，寫成以下這樣。

>保存模型數據的數組的樣例

var vertex_position = [// X, Y, Z0.0, 1.0, 0.0,1.0, 0.0, 0.0,-1.0, 0.0, 0.0 ];為了讓大家看的更easy些，中間加了換行，能夠看到這是一個一維數組。包括有9個元素，三個頂點都分別包括了X，Y。Z的坐標。頂點數x要素的數，就是3x3=9，所以數組中元素的個數是9。

VBO的生成

用矩陣準備好頂點數據之后，就能夠使用這個矩陣來生成VBO了，生成VBO的時候使用WebGL的createBuffer函數，這個函數就是用來生成緩存的。可是這個函數并非用來直接生成VBO的，它僅僅是生成了一個緩存對象，依據它里面保存的內容不同。用途也是不用的。
要操作緩存，首先必須跟WebGL進行綁定。就是說。要向“緩存”這個“光盤”中寫入數據的時候，必須連接到WebGL這個“光驅”上。
綁定了緩存之后。使用bufferData函數來向緩存中寫入數據，把這些處理寫成一個函數。就是以下這樣。

>生成VBO的函數

function create_vbo(data){// 生成緩存對象var vbo = gl.createBuffer();// 綁定緩存gl.bindBuffer(gl.ARRAY_BUFFER, vbo);// 向緩存中寫入數據gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);// 將綁定的緩存設為無效gl.bindBuffer(gl.ARRAY_BUFFER, null);// 返回生成的VBOreturn vbo; }這個函數。接受一個矩陣作為參數，最后返回生成的VBO。首先使用createBuffer生成緩存對象。接著綁定緩存，然后寫入數據。

綁定緩存的時候使用bindBuffer函數，這個函數有兩個參數。第一個參數是緩存的類型。第二個參數是指定緩存對象。

將第一個參數指定為gl.ARRAY_BUFFER就能夠生成VBO。
另外，bufferData函數的第二個參數中出現的Float32Array對象，是javascript的類型數組。和一般的Array對象相似，是處理浮點型小數的時候使用的數組對象。3D世界里小數的準確度非常重要，所以使用類型數組來傳遞數據。而第三個參數中的gl.STATIC_DRAW這個常量，定義了這個緩存中內容的更新頻率。

VBO的話，模型數據基本上就是直接這么重復用，所以使用這個常量。

能夠綁定WebGL的緩存，一次僅僅能綁定一個。所以要操作其它的緩存的時候。必須要綁定對應的緩存。

所以在函數的最后，再次使用bindBuffer函數。設定第二個參數為null，來將上次的綁定無效化，這是為了防止WebGL中的緩存一致保留。而出現和預想不一致的情況。

總結

頂點中的屬性是由程序猿來自由加入的，須要的VBO的個數就是加入的屬性個數。
頂點屬性的各個數據，使用純粹的一維數組，當然，數組的元素個數要依據想要繪制的頂點個數來定義。
生成VBO的時候。首先要把緩存綁定到WebGL。然后對應的數據，要轉換為對應的類型，然后使用指定的常量來寫入數據。

而為了避免預想之外的發生錯誤，數據寫入結束之后，要將WebGL中綁定的緩存無效化。
這樣，一連串的處理之后，模型數據就能夠被頂點著色器利用了。下一回以后。說一下將VBO傳給著色器的步驟，首先先把VBO的準備部分好好理解一下吧。

下次，說一下怎樣準備坐標變換矩陣。

轉載請注明：轉自lufy_legend的博客http://blog.csdn.net/lufy_legend

總結

以上是生活随笔為你收集整理的[WebGL入门]十二，模型数据和顶点属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。