[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
相關文章
- [WebGL入門]六,頂點和多邊形Web
- mybatis入門基礎(八)-----查詢快取MyBatis快取
- [WebGL入門]十二,模型資料和頂點屬性Web模型
- [WebGL入門]五,矩陣的基礎知識Web矩陣
- mybatis入門基礎(九)----逆向工程MyBatis
- [WebGL入門]八,著色器的說明和基礎Web
- JavaScript WebGL 基礎疑惑點JavaScriptWeb
- [WebGL入門]三,3D繪圖的基礎知識Web3D繪圖
- 快取基礎整理快取
- Dubbo基礎入門知識點
- Java入門基礎知識點Java
- 快取內功心法:快取基礎整理快取
- 快取的基礎概念解讀快取
- Python入門必知的知識點!Python基礎入門Python
- webgl入門(1)-什麼是webglWeb
- MyBatis基礎:MyBatis快取(5)MyBatis快取
- 分散式快取基礎教程分散式快取
- WebGL入門之基於WebGL的3D視覺化引擎介紹Web3D視覺化
- WebGL基礎(一): 從一個滑鼠畫點開始瞭解原生webGLWeb
- webgl世界 matrix入門Web
- JavaScript WebGL 基礎概念JavaScriptWeb
- RabbitMQ基礎入門MQ
- mongodb基礎入門MongoDB
- MySQL 基礎入門MySql
- ZooKeeper 基礎入門
- Elasticsearch 基礎入門Elasticsearch
- Vim 入門:基礎
- Bootstrap基礎入門boot
- Html基礎入門HTML
- ElasticSearch基礎入門Elasticsearch
- HTML 基礎入門HTML
- Dart 基礎入門Dart
- SQL入門基礎SQL
- Nginx 基礎入門Nginx
- Kafka基礎入門Kafka
- Redis入門基礎Redis
- Java 入門基礎Java
- Maven入門基礎Maven