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