WebGL - 繪製模型

在將緩衝區與著色器關聯後，最後一步是繪製所需的圖元。WebGL 提供了兩種方法，即 drawArrays() 和 drawElements() 來繪製模型。

drawArrays()

drawArrays() 方法用於使用頂點繪製模型。其語法如下：

void drawArrays(enum mode, int first, long count)

此方法採用以下三個引數：

mode - 在 WebGL 中，模型使用圖元型別繪製。使用 mode，程式設計師必須選擇 WebGL 提供的圖元型別之一。此選項的可能值為：gl.POINTS、gl.LINE_STRIP、gl.LINE_LOOP、gl.LINES、gl.TRIANGLE_STRIP、gl.TRIANGLE_FAN 和 gl.TRIANGLES。
first - 此選項指定已啟用陣列中的起始元素。它不能為負值。
count - 此選項指定要渲染的元素數量。

如果使用 drawArrays() 方法繪製模型，則 WebGL 在渲染形狀時會按照定義頂點座標的順序建立幾何體。

示例

如果要使用 drawArray() 方法繪製單個三角形，則必須傳遞三個頂點並呼叫 drawArrays() 方法，如下所示。

var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5,];
gl.drawArrays(gl.TRIANGLES, 0, 3);

它將生成如下所示的三角形。

假設要繪製連續的三角形，則必須按順序將接下來的三個頂點傳遞到頂點緩衝區，並將要渲染的元素數量指定為 6。

var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5, 0.0,-0.5, 0.25,0.5, 0.5,-0.5,];
gl.drawArrays(gl.TRIANGLES, 0, 6);

它將生成如下所示的連續三角形。

drawElements()

drawElements() 方法用於使用頂點和索引繪製模型。其語法如下：

void drawElements(enum mode, long count, enum type, long offset)

此方法採用以下四個引數：

mode - WebGL 模型使用圖元型別繪製。使用 mode，程式設計師必須選擇 WebGL 提供的圖元型別之一。此選項的可能值為：gl.POINTS、gl.LINE_STRIP、gl.LINE_LOOP、gl.LINES、gl.TRIANGLE_STRIP、gl.TRIANGLE_FAN 和 gl.TRIANGLES。
count - 此選項指定要渲染的元素數量。
type - 此選項指定索引的資料型別，必須是 UNSIGNED_BYTE 或 UNSIGNED_SHORT。
offset - 此選項指定渲染的起點。通常是第一個元素 (0)。

如果使用 drawElements() 方法繪製模型，則還應與頂點緩衝區物件一起建立索引緩衝區物件。如果使用此方法，則頂點資料將被處理一次，並根據索引中提到的次數重複使用。

示例

如果要使用索引繪製單個三角形，則需要傳遞索引和頂點，並呼叫 drawElements() 方法，如下所示。

var vertices = [ -0.5,-0.5,0.0, -0.25,0.5,0.0, 0.0,-0.5,0.0 ];
var indices = [0,1,2];

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

它將產生以下輸出：

如果要使用 drawElements() 方法繪製連續的三角形，只需新增其他頂點併為其餘頂點指定索引。

var vertices = [
   -0.5,-0.5,0.0,
   -0.25,0.5,0.0,
   0.0,-0.5,0.0,
   0.25,0.5,0.0,
   0.5,-0.5,0.0 
];

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

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

它將產生以下輸出：

所需操作

在繪製圖元之前，需要執行一些操作，如下所述。

清除畫布

首先，應使用 clearColor() 方法清除畫布。您可以將所需顏色的 RGBA 值作為引數傳遞給此方法。然後，WebGL 清除畫布並使用指定的顏色填充它。因此，您可以使用此方法設定背景顏色。

請檢視以下示例。這裡我們傳遞灰色顏色的 RGBA 值。

gl.clearColor(0.5, 0.5, .5, 1);

啟用深度測試

使用 enable() 方法啟用深度測試，如下所示。

gl.enable(gl.DEPTH_TEST);

清除顏色緩衝區位

使用 clear() 方法清除顏色和深度緩衝區，如下所示。

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

設定視口

視口表示包含繪圖緩衝區渲染結果的矩形可視區域。您可以使用 viewport() 方法設定視口的尺寸。在下面的程式碼中，視口尺寸設定為畫布尺寸。

gl.viewport(0,0,canvas.width,canvas.height);

列印頁面