在相关联的缓冲器与着色之后，最后的步骤是画出所需的原语。 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);
