请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 WebGL 查看内容

使用HTML5 WebGL绘制三角形和矩形

2013-10-16 23:15| 发布者: admin| 查看: 1823| 评论: 0

摘要: 本文章从绘制一个具有3D效果的三角形与一个具有3D效果的矩形着手,向大家介绍一些使用WebGL进行绘图的基础知识。 首先,我们要先下载gIMatrix-0.9.5.min.js脚本文件,可以从“https://github.com/gpjt/webgl-less ...
      本文章从绘制一个具有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)。

      本实例代码下载:
本文来源于html5星空

鲜花

握手

雷人

路过

鸡蛋

相关阅读

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-11-21 08:59 , Processed in 0.068950 second(s), 26 queries .

返回顶部