[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的準備部分好好理解一下吧。
下次,說一下如何準備座標變換矩陣。
轉載請註明:轉自lufy_legend的部落格http://blog.csdn.net/lufy_legend
相關文章
- [WebGL入門]六,頂點和多邊形Web
- [WebGL入門]九,頂點快取的基礎Web快取
- 第三個OpenGL程式,shaders _ 後續 之 moreAttribute (設定頂點位置屬性 顏色位置屬性),從頂點資料中傳入頂點資料,頂點顏色
- webgl入門(2)-初識webgl和著色器Web
- WebGL載入本地模型Web模型
- vue 基礎入門筆記 19:計算屬性和偵聽屬性Vue筆記
- webgl入門(1)-什麼是webglWeb
- webgl世界 matrix入門Web
- Flutter入門進階之旅(十二)Flutter 資料儲存Flutter
- 屬性動畫 58同城資料載入動畫動畫
- Flutter 入門 — Container 屬性詳解FlutterAI
- [WebGL入門]十,矩陣計算和外部庫Web矩陣
- flex入門—瞭解這些flex屬性Flex
- [WebGL入門]四,渲染準備Web
- [WebGL入門]十一,著色器的編譯和連線Web編譯
- [WebGL入門]八,著色器的說明和基礎Web
- defer 屬性和 async 屬性
- Laravel 5.7 模型常用屬性Laravel模型
- MySQL入門--匯出和匯入資料MySql
- Angular2入門系列(四)————ngModel和表單元素name屬性Angular
- JavaScript物件的資料屬性與訪問器屬性JavaScript物件
- session屬性的清除和非法登入Session
- 36個頂級資料分析方法與模型!模型
- [WebGL入門]二,開始WebGL之前,先了解一下canvasWebCanvas
- GPU程式設計入門(8) GPU ASM 頂點渲染初步GPU程式設計ASM
- VS2005入門之建立物件和使用方法以及屬性物件
- C#快速入門教程(5)——欄位與屬性C#
- [WebGL入門]十三,minMatrix.js和座標變換矩陣WebJS矩陣
- JavaScript私有屬性和靜態屬性JavaScript
- 微信使用者屬性資料:性別比例和年齡比例
- [WebGL入門]十四,繪製多邊形Web
- 明晚8點資料探勘入門指引(免費)
- javascript基礎(物件,物件屬性,屬性基本和引用資料型別,字面量建立物件,垃圾回收,屬性的列舉)(十三)JavaScript物件資料型別
- WEBGL學習【十二】滑鼠操作場景Web
- 深入理解物件的資料屬性與訪問器屬性物件
- Khronos Group的WebGL工作組主席Ken Russell為《WebGL入門指南》作序Web
- Oracle DG管理資料庫屬性Oracle資料庫
- Elasticsearch資料型別及其屬性Elasticsearch資料型別