怎么在html5中加三角形,使用HTML5 WebGL绘制三角形和矩形

本文章从绘制一个具有3D效果的三角形与一个具有3D效果的矩形着手，向大家介绍一些使用webgl进行绘图的基础知识。

首先，我们要先下载gIMatrix-0.9.5．min.js脚本文件，可以从“https://github.com/gpjt/webgl-lessons"这个网址上下载该脚本文件，该文件的主要功能是用来处理矩阵操作与vector动态数组操作。

最终页面效果：

该页面中只有一个简单的canvas元素，但是在页面打开时调用了一个webGLStart()函数。

本示例页面中只使用了一个canvas元素来显示使用WebGL制作出来的图像。在使用WebGL制作3D图形和动画的时候，都是使用canvas元素来进行显示的。

页面代码简要介绍：

在页面打开时调用了一个webGLStar函数，该函数首先获取页面上的canvas元素，然后调用initGL函数并将页面上的canvas元素作为initGL函数的参数来初始化WebGL上下文对象，调用initShaders函数来初始化渲染器，之后调用initBuffers方法初始化几个缓冲区。

在本示例中，使用缓冲区来存放将要绘制的三角形与矩形的细节信息。接下来，在代码中进行’WebGL上下文对象的基本设置，设定每次清除canvas元素中的内容时都将该canvas元素填充为黑色．然后开启深度测试(在三维场景中，绘制在后面的物体由于被绘制在前面的物体遮盖而不可见)。最后调用drawScene函数，利用缓冲区中的信息来绘制图形(三角形与矩形)。

接下来看一下initGL函数中的内容。

该函数使用页面上的canvas元素作为参数，函数功能为初始化WebGL上下文对象，在使用canvas元素进行2D图形图像绘制的时候，使用canvas.getContext(’2d’)方法获取canvas元素的图形上下文对象，但是在使用canvas元素进行3D图形、图像和动画绘制的时候，使用canvas.getContext(¨experimental-webgl¨)方法获取canvas元素的WebGL土下文对象，  其中“experimental-webgl”只用于目前WebGL尚未完全成熟的阶段，将来WebGL正式版发布后该参数可能会改为“webgl”或者其他名称。

在获取WebGL上下文对象之后，就像使用canvas元素的图形上下文对象一样，可以使用WebGL上下文对象的各种属性与方法来进行各种3D图形、图像的绘制。

在这段示例代码中，首先将3D图形、图像的视图尺寸设置为与canvas元素的尺寸完全相等。最后，在代码中实现如果WebGL上下文对象初始化失败，则弹出一个提示信息，告诉用户不能初始化WebGL上下文对象。

接下来，在查看initShaders(初始化渲染器)函数代码之前，为了更好地理解这个函数，先来看一下initBuffers(初始化缓冲区)函数与drawScene(绘制图形)函数中的代码。

一个缓冲区实际上代表了显卡中的一小块内存。将图形各顶点位置信息先存放在内存中，之后使用drawScene函数进行绘制的时候，只需通知WebGL上下文对象按照缓冲区中存放的各顶点位置信息进行绘制，这样WebGL上下文对象就可以自行从缓冲区中(即从内存中)取出预先存放好的各顶点位置信息进行绘制。这种做法可以使代码的运行变得更加高效，尤其是在制作动画(例如让某个图形每秒钟重绘十次以使其产生动画效果)的时候。当然，在本示例中，只有有限的几个顶点信息，所以在绘制时所花费的成本也相当少，但是在处理比较庞大的图形(比如有l万个顶点)的时候，使用这种方法将真正体现其性能优势。

接下来的一行代码如下所示。

gl. bindBuff er (gl. ARRAY—BUFFER,    triangleVertexPositionBuf fer);

这行代码的意思是将刚刚创建的triangle'VertexPositionBuffer缓冲区绑定到一个buffer对象上，并且把这个buffer对象赋值给WebGL上下文对象的ARRAY—BUFFER属性。经过这个绑定与赋值操作之后，接下来绘图时所使用的缓冲区就是triangleVertexPositionBuffer缓冲区。

接下来的两行代码如下所示。

triangleVertexPositionBuf fer . itemSize  =   3 ;

triangleVertexPositionBuf fer _ numltems  =  3 ;

这两行代码的意思是为缓冲医添加两个属性，这两个属性不是WebGL API中的内置属性，但会在实际绘图时起到作用o JavaScript中一个比较有用的特性是可以自行为某个对象添加属性。这两行代码为triangleVertexPositionBuffer对象添加了一个itemSize属性与一个numltems属性，这两个属性的作用是声明triangle'VertexPositionBuffer对象中有三个顶点( numltems)信息，每个顶点由三个数据(三维)构成。在剩余几行代码中，使用同样方法创建一个用来存放矩形顶点位置信息的缓冲区，并且创建一个JavaScript列表，其中存放了一个矩形的一组顶点位置信息，并将这个JavaScript列表填充到存放矩形顶点位置信息的缓冲区中。

代码如下所示：

quareVertexPositionBuf fer=gl．createBuf fer()；//创建矩形顶点位I缓冲区

在默认情况下，在使用WebGL上下文对象绘制的3D图像中，无论是近距离的物体还是远距离的物体，其大小都是一样的(称为垂直投影)为了使远距离的物体能够看起来小一些，需要设置一个视图的投影角度。

在本例中，将投影角度设置为45度，同时，将员面中canvas元素的宽度与高度的比例通知WebGL上下文对象，能够将在该视图中看见的图形的最近距离必须大于O.I个单位(默认为像素)，最远距离必须在100个单位以内的要求通知WebGL上下文对象。在设置视图时，使用一个名为mat4的模块的perspective方法，同时使用了一个变量pMatrix绘制图形的第一步是将绘制位置移动到3D视图的中央。

在OpenGL中，在进行图形绘制的时候，需要通知OpenGL当前的绘制位置与旋转角度。例如，声明“向前移动20个单位，旋转32度，然后绘制一个机器人”这种绘制方式是比较有用的，因为可以把绘制机器人的代码封装在一个函数里，只要在绘制前改变当前位置和当前旋转角度，然后直接调用绘制机器人的函数，就可以在任何位置上使用任何角度来绘制机器人了。

当前位置与当前旋转角度都被保存在一个矩阵中。以前学过矩阵可以用来实现移动、旋转与其他几何变形。可以使用一个4×4的矩阵来实现任何3D空间上的变形操作。在一开始，使用一个恒等矩阵(identity matrix)进行初始化。使用恒等矩阵的含义是不执行任何变形，先将它乘以第一个用来变形的矩阵，再乘以第二个用来变形的矩阵，如果还要执行其他变形，再继续乘以其他用来变形的矩阵，最终得到的矩阵中包含了所有的变形操作，这个矩阵被称为模型一视图矩阵。

在本示例中，变量mvMatrix代表了模型一视图矩阵，而mat4．identity方法就是使用恒等矩阵来将模型一视图矩阵初始化(绘制位置在视图中央)，接下来就可以使用这个矩阵来进行移动与旋转操作了，换句话谠，该矩阵将设置绘制图形时的绘制

位置。

细心的读者可能已经注意到，在讨论矩阵的时候说的是“在OpenGL"中，而不是“在WebGL"中，这是因为WebGL API中没有这个功能，本示例使用了一个第三方的矩阵库-gIMatrix，然后加上了一些WebGL API中的功能，才得到本示例中的效果。

mat4.translate(mvMatrix,  卜1.5, 0.0,  -7.0);

使用恒等矩阵将变形矩阵初始化，将绘制位置设置在3D视图中央后，将绘制位置左移1.5个单位(在X轴方向上使用负数来设置左移)，向后移动7个单位(在Z轴方向上使用负数来设置向后移动)。

接下来的两行代码如下所示。

gl. bindBuf fer (gl. ARRAY   BUFFER,    triangleVertexPositionBuf fer);

gl.vert exAttribPointer(shaderProgram. vertexPositionAttribute,triangleVertexP08itionBuffer.itemSize,  gI.FLOAT,  false,  0,  0);

前面已经介绍过，为了要使用一个缓冲区，需要调用WebGL土下文对象的bindBuffer方法来指定当前所使用的缓冲区，然后使用该缓冲区来进行有关操作。这里首先指定存放了三角形顶点数组的triangleVertexPositionBuffer缓冲区作为当前缓冲区。

WebGL上下文对象的vertexAttribPointer方法及其使用参数的具体含义：

在WebGL API中，使用vertexAttribPointer方法来设置WcbGL上下文对象在绘图时所’使用的每个顶点的顶点信息。该方法有六个参数，第一个参数用来指定一个顶点属性数组，该数组中的每一项用来指定绘制图像时每一个顶点的属性，同时将缓冲区中的每个顶点的顶点位置信息设置为该属性值。第二个参数表示缓冲区中每个顶点位置信息所使用数据的个数(绘制三维图像时每个顶点使用三维信息，所以该值为3)。