WebGL教程

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.
第一个 : 此选项指定已启用阵列中的起始元素.它不能是负值.
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);

它将生成一个三角形，如下所示.

Triangle

假设您要绘制连续的三角形，那么您必须在顶点缓冲区中按顺序传递接下来的三个顶点，并提及要渲染的元素数量为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);

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

三角形1

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.
计数 : 此选项指定要呈现的元素数.
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);

它将产生以下输出 :

Triangle

如果你想使用 drawElements()方法绘制传染性三角形，只需添加其他顶点并提及剩余顶点的索引./p>

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

它将产生以下输出 :

三角形1

所需操作

在绘制基元之前，需要执行一些操作，如下所述.

清除画布

首先，您应该使用 clearColor()方法清除画布.您可以将所需颜色的RGBA值作为参数传递给此方法.然后WebGL清除画布并使用指定的颜色填充它.因此，您可以使用此方法设置背景颜色.

请查看以下示例.这里我们传递灰色的RGBA值.

 
 gl.clearColor(0.5,0.5，.5,1);

启用深度测试

使用 enable()方法启用深度测试，如下所示.

 
 gl.enable(gl.DEPTH_TEST);

清除颜色缓冲位

使用清除清除颜色和深度缓冲区()方法，如下所示.

 
 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

设置视图端口

视口表示一个矩形可视区域，其中包含绘图缓冲区的渲染结果.您可以使用 viewport()方法设置视口的尺寸.在以下代码中，视图端口尺寸设置为画布尺寸.

gl.viewport(0,0,canvas.width,canvas.height);