[WebGL入門]十二，模型資料和頂點屬性，webgl頂點

[WebGL入門]十二，模型資料和頂點屬性，webgl頂點

註：文章譯自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,   Z     0.0, 1.0, 0.0,     1.0, 0.0, 0.0,    -1.0, 0.0, 0.0];

為了讓大家看的更容易些，中間加了換行，可以看到這是一個一維數組，包含有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);        // 返回產生的VBO    return 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的準備部分好好理解一下吧。

下次，說一下如何準備座標變換矩陣。

轉載請註明：