WebGL-绘制模型

将缓冲区与着色器关联之后,最后一步是绘制所需的图元。WebGL提供了两种方法,分别是drawArrays()drawElements()来绘制模型。

drawArrays()

drawArrays()是用于使用顶点绘制模型的方法。这是它的语法:

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

此方法采用以下三个参数。

  • 模式-在WebGL中,使用原始类型绘制模型。使用模式,程序员必须选择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);

它将产生一个三角形,如下所示。

WebGL-绘制模型

假设您要绘制连续的三角形,那么必须在顶点缓冲区中依次传递下三个顶点,并提及要渲染为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);

它将产生一个连续的三角形,如下所示。

WebGL-绘制模型

drawElements()

drawElements()是用于使用顶点和索引绘制模型的方法。它的语法如下-

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

此方法采用以下四个参数-

  • 模式-使用原始类型绘制WebGL模型。使用模式,程序员必须选择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);

它将产生以下输出:

WebGL-绘制模型

如果要使用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);

它将产生以下输出:

WebGL-绘制模型

所需的操作

在绘制基本体之前,您需要执行一些操作,下面将对其进行说明。

清除画布

首先,您应该使用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);

作者:terry,如若转载,请注明出处:https://www.web176.com/webgl/815.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2020年10月30日 下午2:32
下一篇 2020年10月30日 下午2:43

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注