WebGL 画一个模型

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模型使用基元类型绘制。使用模式,程序员必须选择一种基本类型。此选项的可能值列表为:gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN和gl.TRIANGLES.

  count—此选项指定要呈现的元素的数量。

  type—此选项指定必须是无符号或无符号的索引的数据类型。

  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)