WebGL教學 » WebGL繪製模型

WebGL繪製模型

在相關聯的緩衝器與著色之後，最後的步驟是畫出所需的原語。 WebGL 提供了兩種方法，即：drawArrays()和 drawElements()來繪製模型。

drawArrays()

drawArrays()是用於使用頂點來繪製模型方法。下面是它的語法 - 
void drawArrays(enum mode, int first, long count)
此方法採用以下三個引數 -

  • mode ? 在WebGL中，模型採用原始型別繪製。使用模式，程式員不得不選擇通過WebGL提供的原始型別。該選項的可能值為 ? gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, 和 gl.TRIANGLES.

  • first ? 此選項指定啟用陣列開始元素。它不能是負值。

  • count ? 此選項指定要呈現的元素數。

如果您使用drawArray()方法s繪製模型，那麼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模型使用的是原始型別繪製。使用模式，程式員必須選擇WebGL提供的原始型別之一。對於此選項可能值的列表是- l.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);

它會產生下面的輸出 -

所需的操作

繪製一個原語之前，您需要執行一些操作，這說明如下。

清除Canvas

首先，應該用clearColor()方法清除canvas。可以傳遞所需顏色的RGBA值作為引數傳遞到這個方法。然後WebGL清除canvas，並使用指定的顏色進行填充。因此，你可以用這個方法來設定背景顏色。
看看下面的例子。在這裡，我們傳遞一個灰色的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);