WebGL幾何體

定義所需的幾何體

var vertices = [
   0.5,0.5,  //Vertex 1
   0.5,-0.5, //Vertex 2
  -0.5,-0.5, //Vertex 3
];

同樣，可以創建一個數組的索引。指數為上述三角形索引將是[0，1，2]，可以定義為 -

var indices = [ 0,1,2 ]

var indices = [0,3,1,3,1,2];

注意 −

• drawArrays() − 當使用這種方法，我們通過原語使用JavaScript數組的頂點。

• drawElements() − 當使用這種方法，我們通過這兩個頂點和原語使用JavaScript數組的索引。

緩衝區對象

• 頂點緩衝區對象 (VBO) − 它保持所述圖形模型，要被渲染的每個頂點的數據。我們使用頂點緩衝對象中的WebGL存儲和處理關於頂點諸如頂點座標，法線，色彩，紋理座標數據。

• 索引緩衝區對象(IBO) − 它保持所述圖形模型的索引(索引數據)，這是要被渲染的。

  限定所需的幾何形狀和它們存儲在JavaScript數組，需要將這些陣列傳遞給對象緩衝器，數據將被傳遞到著色器程式。下麵的步驟是在緩衝器要遵循數據存儲。
• 創建一個空的緩衝區。
• 綁定相應的數組對象為空緩衝區。
• 傳遞數據(頂點/索引)使用類型數組的一個緩衝區。
• 取消綁定緩存(可選)。

注−

• 通常，用於存儲頂點數據，我們用Float32Array; 要存儲索引數據，我們使用Uint16Array。
• 可以創建類型數組就像使用new關鍵字JavaScript數組。

創建緩衝區

var vertex_buffer = gl.createBuffer();

注 − gl 是參考變數的當前的 WebGL 的上下文。

綁定緩衝

語法

bindBuffer()方法的語法如下 −

void bindBuffer (enum target, Object buffer)

target − 第一變數是一個枚舉值，表示我們要綁定到空緩衝器的緩衝的類型。有兩個預定義枚舉值作為該參數選項。他們是-

• ARRAY_BUFFER  表示頂點的數據。

• ELEMENT_ARRAY_BUFFER 表示索引數據。

Object buffer − 第二個是參考變數，在上一步中創建的緩衝區對象。參考變數可以是一個索引緩存對象或頂點緩衝對象。

示例

//vertex buffer
var vertex_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

//Index buffer
var Index_Buffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);

數據傳遞到緩衝區

語法

void bufferData (enum target, Object data, enum usage)

target − 第一個參數是一個枚舉值，表示我們使用了數組中緩衝的類型。它們可以是ARRAY_BUFFER或ELEMENT_ARRAY_BUFFER。

Object data − 第二個參數是包含數據寫入到緩衝對象的對象的值。在這裏，我們使用類型數組來傳遞數據。

Usage − 該方法的第三個參數是一個枚舉變數，來指定如何使用緩衝區對象的數據(存儲的數據)來繪製形狀。有三種選擇此參數如下表所示。

• gl.STATIC_DRAW − 數據將指定一次，多次使用。

• gl.STREAM_DRAW − 數據將指定一次，使用幾次。

• gl.DYNAMIC_DRAW − 數據將被重複指定和多次使用。

示例

//vertex buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

//Index buffer
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

取消綁定緩衝區

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);