定義所需的幾何體

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

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

var indices = [ 0,1,2 ]

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

注意 ?

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

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

緩沖區(qū)對象

• 頂點緩沖區(qū)對象 (VBO) ? 它保持所述圖形模型，要被渲染的每個頂點的數(shù)據(jù)。我們使用頂點緩沖對象中的WebGL存儲和處理關(guān)于頂點諸如頂點坐標，法線，色彩，紋理坐標數(shù)據(jù)。

• 索引緩沖區(qū)對象(IBO) ? 它保持所述圖形模型的索引(索引數(shù)據(jù))，這是要被渲染的。

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

注?

• 通常，用于存儲頂點數(shù)據(jù)，我們用Float32Array; 要存儲索引數(shù)據(jù)，我們使用Uint16Array。
• 可以創(chuàng)建類型數(shù)組就像使用new關(guān)鍵字JavaScript數(shù)組。

創(chuàng)建緩沖區(qū)

var vertex_buffer = gl.createBuffer();

注 ? gl 是參考變量的當前的 WebGL 的上下文。

綁定緩沖

語法

bindBuffer()方法的語法如下 ?

void bindBuffer (enum target, Object buffer)

target ? 第一變量是一個枚舉值，表示我們要綁定到空緩沖器的緩沖的類型。有兩個預(yù)定義枚舉值作為該參數(shù)選項。他們是-

• ARRAY_BUFFER  表示頂點的數(shù)據(jù)。

• ELEMENT_ARRAY_BUFFER 表示索引數(shù)據(jù)。

Object buffer ? 第二個是參考變量，在上一步中創(chuàng)建的緩沖區(qū)對象。參考變量可以是一個索引緩存對象或頂點緩沖對象。

示例

//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);

數(shù)據(jù)傳遞到緩沖區(qū)

語法

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

target ? 第一個參數(shù)是一個枚舉值，表示我們使用了數(shù)組中緩沖的類型。它們可以是ARRAY_BUFFER或ELEMENT_ARRAY_BUFFER。

Object data ? 第二個參數(shù)是包含數(shù)據(jù)寫入到緩沖對象的對象的值。在這里，我們使用類型數(shù)組來傳遞數(shù)據(jù)。

Usage ? 該方法的第三個參數(shù)是一個枚舉變量，來指定如何使用緩沖區(qū)對象的數(shù)據(jù)(存儲的數(shù)據(jù))來繪制形狀。有三種選擇此參數(shù)如下表所示。

• gl.STATIC_DRAW ? 數(shù)據(jù)將指定一次，多次使用。

• gl.STREAM_DRAW ? 數(shù)據(jù)將指定一次，使用幾次。

• gl.DYNAMIC_DRAW ? 數(shù)據(jù)將被重復(fù)指定和多次使用。

示例

//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);

取消綁定緩沖區(qū)

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);