基于webGL和HTML5的网页3D动画的设计与实现

摘要：该文介绍了webGL如何把JavaScript和OpenGL ES 2.0结合在一起，对网页中的三维可视化图像进行实现，讲述了基于webGL和HTML5的应用程序回调函数的具体用法与实现，并通过具体的应用实例验证了设计的正确性。

关键字：webGL；JavaScript；OpenGL ES 2.0；HTML5

中图分类号：TP311文献标识码：A文章编号：1009-3044(2011)28-6981-03

Web-3D animation Design and Implementation Based on webGL and HTML5

TAN Wen-wen, DING Shi-yong, LI Gui-ying

(Shandong University of Science and Technology, Qingdao 266071, China)

Abstract: In this paper，it introduces how webGL combines JavaScript with OpenGL ES 2.0 for the web of 3D visualization image. It tells the specific usage and implement based on the application callback functions of webGL and HTML5 ,and shows the correctness of the design through an application example.

Key words: webGL; JavaScript; OpenGL ES 2.0; HTML5

WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

HTML5将成为HTML、XHTML以及HTML DOM的新标准。HTML的上一个版本诞生于1999年。自从那以后，Web世界已经经历了巨变。HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持[4]。

1 程序设计中所引用的关键技术介绍

1.1 HTML 5的Canvas元素

HTML5的canvas元素使用JavaScript 在网页上绘制图像。相当于画布，它是一个矩形区域，您可以控制其每一像素，canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。我们可以通过下面语句创建并规定canvas元素的id、宽度和高度：

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript 内部完成：

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

上述这段语言完成了在canvas中绘制一个红色的矩形。

1.2 webGL中的可编程处理器

WebGL中引用了OpenGL es2.0的可编程处理器，这也是webGL的关键所在，即顶点着色器和片元着色器，所以接下来本文详细论述了可编程管线是如何对数据进行处理的。

1.2.1 可编程管线的具体流程

图1描述了顶点着色器和片元着色器在可编程管线中的具置以及整个API的调用顺序，这个示意图也向我们展示了可编程管线的流处理本质：数据流从应用程序到达顶点处理器，然后到达片元处理器 ，最后到达帧缓冲区[3]。

1.2.2 着色器的数据处理

首先来介绍一下着色器中所使用到的几种限定符：

Attribute：用于经常更改的信息，用于从应用程序到顶点着色器所传的数据。

Uniform：用于不经常更改的信息，用于顶点着色器和片元着色器。

varying：用于从顶点着色器传递到片元着色器。

Const：用来声明非可写的编译时常量变量。跟C语言相同。

顶点着色器所操作的是输入的顶点值与其相关联的数据。它可以用来执行顶点变换，发现变换以及规格化，纹理坐标生成，纹理坐标变换，光照等。

比较简单的顶点着色器程序代码如下：

attribute vec3 aVertexPosition;

attribute vec4 aVertexColor;

uniform mat4 uMVMatrix;

uniform mat4 uPMatrix;

varying vec4 vColor;

void main(void) {

gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);

vColor = aVertexColor

}

片元着色器是一个处理片元值及其相关数据的可编程单元。片元着色器用来执行传统的图形操作，例如在插值得到的值上的操作，访问纹理，应用纹理，雾化，颜色汇总等等。此外光照也可以选择在片元着色器上进行，而且效果会比顶点着色器要好一些。片元着色器不会取代在webGL像素处理管道的后端发生的固定功能图形操作，例如覆盖、像素所有权测试、剪切、点画、alpha测试、深度测试、模板测试、逻辑操作等等。对片元着色器的主要输入是插值得到的易变变量（内置的及用户定义的），它们是栅格化的结果。用户定义的易变变量必须被定义在片元着色器中，并且它们的类型必须在顶点着色器中定义的类型相符。此外，需要注意的是再片元着色器中是没有属性变量的定义的[5]。

比较简单的片元着色器程序代码如下：

void main(void) {

varying vec4 vColor;

gl_FragColor = vColor;

}

图2介绍了顶点着色器和片元着色器中的整个数据处理流程。

1.3 着色器与程序对象的链接

图3展示了在webGL的执行环境中是如何处理webGL着色器与应用程序的链接的。应用程序通过构建的对象调用API函数与webGL进行通信。利用gl.creatShader创建着色器对象，之后应用程序可以通过调用gl.shaderSource来提供着色器的源代码。使用这个命令可以向webGL提供包含着色器源代码的字符串。将着色器源代码加载到着色器对象中后，可以调用pileShader来编译它。“程序对象”是webGL管理的一种数据结构，它由gl.creatProgram创建，它充当了着色器对象的容器。应用程序需要使用命令gl.attachShader将着色器对象附加到一个程序对象上。之后通过调用gl.linkProgram可以将编译好的着色器对象链接到一起，链接步骤会解决着色器之间的外部引用，检查顶点着色器与片元着色器之间的兼容性，向一致变量指定内存位置等。其结果就是产生一个或多个可执行代码，通过调用gl.useProgram就可以将它们安装为webGL当前状态的一部分。这个命令会在顶点处理器和片元处理器上安装可执行代码，以便用它们来渲染之后的所有图形图元。

执行着色器的程序代码如下（以顶点着色器为例）：

var shader;

var shaderProgram;

shader = gl.createShader(gl.VERTEX_SHADER);//创建顶点着色器对象

gl.shaderSource(shader, str);//加载着色器源代码

pileShader(shader);//编译着色器源代码

shaderProgram = gl.createProgram();//创建程序对象

gl.attachShader(shaderProgram, shader);//将着色器对象附加到程序对象

gl.linkProgram(shaderProgram);//链接着色器对象

gl.useProgram(shaderProgram);//安装可执行代码

2 模拟太阳系的动画设计

绘制太阳系的动画图像大致流程图如图4。

其中前四个过程在前面讲的关键技术中已经详细阐述过，现在我们从初始化缓冲区开始阐明，初始化缓冲区时要给顶点位置，纹理坐标，法向量坐标，索引坐标分别设置缓冲区，比如初始化顶点位置缓冲区的代码如下：

sunVertexPositionBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, sunVertexPositionBuffer);

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexPositionData1), gl.STATIC_DRAW);

unVertexPositionBuffer.itemSize = 3;

sunVertexPositionBuffer.numItems = vertexPositionData1.length / 3;

初始化纹理时最重要的是要设置纹理环境，也就是设置合适的纹理参数，代码如下[1-2]：

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);

如何实现动态过程这一步是在绘制过程实现的，比如代码：

mat4.rotate(mvMatrix, degToRad(moonAngle), [0, 1, 0]);

这一命令实现的是让整个坐标系沿Y轴旋转moonAngle角度，moonAngle这个变量的值会随着系统时间的增加而逐渐增加，所以再次绘制时转动的角度又会变大，这样便实现了图像的动态过程。图5描述了在网页上运行的模拟太阳系动画图像。

3 结论

本论文通过描述webGL的工作流程介绍了如何基于webGL和Html5实现网页3D动画图像，通过论证，WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过Html脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持；第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的，可移植性好。所以webGL的发展前景是可想而知的[6]。

参考文献：

[1] Wright R S.OpenGL Super Bible[M].北京:人民邮电出版社,2010.

[2] Shreiner D.OpenGL Programming Guide[M].北京:机械工业出版社,2008.

[3] Rost R J.OpenGL Shading Language[M].北京:人民邮电出版社,2006.

[4] JavaScript 教程[EB/OL]..cn/js/index.asp.

[5] WebGL Lesson 1CA triangle and a square[DEB/OL].(2009-10-13)./blog/?p=28.

[6] web开发、网页编程――编程入门网[EB/OL]./webkf/.