WebGL - 绘制三角形

WebGL绘制三角形 - 从简单和简单的步骤学习WebGL，从基本到高级概念，包括简介，Html5画布概述，基础知识，图形管道，示例应用程序，上下文，几何，着色器，关联属性和缓冲对象，绘制模型，绘图点，绘制三角形，绘图模式，绘制四边形，颜色，翻译，缩放，旋转，立方体旋转，交互式立方体。

在上一章(第11章)中，我们讨论了如何使用WebGL绘制三个点.在第5章中，我们采用了示例应用程序来演示如何绘制三角形.在这两个例子中，我们仅使用顶点绘制了图元.

要绘制更复杂的形状/网格，我们也将几何的索引与顶点一起传递给着色器.在本章中，我们将看到如何使用索引绘制三角形.

绘制三角形所需的步骤

创建时需要执行以下步骤用于绘制三角形的WebGL应用程序.

步骤1 : 准备画布并获取WebGL渲染上下文

在此步骤中，我们使用 getContext()获取WebGL渲染上下文对象.

第2步和第2步;定义几何并将其存储在缓冲区对象中

由于我们使用索引绘制三角形，我们必须传递三角形的三个顶点，包括索引和存储它们在缓冲区中.

  var vertices = [ -0.5,0.5,0.0， -0.5，-0.5 ，0.0， 0.5，-0.5,0.0，];  indices = [0,1,2];

第3步和第3步;创建和编译着色器程序

在此步骤中，您需要编写顶点着色器和片段着色器程序，编译它们，并通过链接这两个程序来创建组合程序.

var vertCode =   'attribute vec3 coordinates;' +   'void main(void) {' +      ' gl_Position = vec4(coordinates, 1.0);' +   '}';

var fragCode = 'void main(void) {' +   ' gl_FragColor = vec4(1, 0.5, 0.0, 1);' +'}';

步骤4 : 将着色器程序与缓冲区对象相关联

在此步骤中，我们将缓冲区对象与着色器程序相关联.

第5步 : 绘制必需对象

由于我们使用索引绘制三角形，我们将使用 drawElements().对于这种方法，我们必须传递索引的数量. indices.length 的值表示索引的数量.

  gl.drawElements(gl.TRIANGLES，indices .length，gl.UNSIGNED_SHORT，0);

以下程序代码显示如何使用索引和减号在WebGL中绘制三角形;

如果你运行这个例子，它将产生以下输出 :