基于WebGL的虚拟实验教学研究

　　 在学校教学中，大量的实验经常因为学校基础设施匮乏以及安全因素而没有开展[1]。然而，实验教学在概念的理解及实践技能的掌握方面至关重要[2]。因此，需要一种替代的教学方式克服上述问题。虚拟现实技术已经在教学中得到广泛的应用，尤其是在实验教学中。最近，有大量的提供虚拟实验环境相关的虚拟现实及Web3D技术研究，如CSU Chemlab[3]、VRLUP[4]及Lab 3D[5]等。

　　 最近几年，有关3D内容交付的软硬件技术不断改善。首先，强大的并行GPU减轻了CPU的处理负荷，其次是新一代的Web浏览器中采用的TraceMonkey、V8及SquirrelFish编译器显著改善了JavaScript的执行性能。尤其是由Khronos新近提出的WebGL[6]标准，将Web浏览器和GPU紧密地关联在一起了。这一切使得在Web上呈现复杂3D图形环境成为了可能，也使得基于Web的虚拟3D实验教学平台的设计有了新的选择。

　　 基于WebGL的网络虚拟现实技术利用它在技术上的优势，能够充分展示知识内容，激发学生的创造性，开展虚拟实验和进行廉价的技能训练，使得采用网络虚拟现实技术的网络教学可以取得很好的教学效果。

　　 本文提出了一种基于WebGL标准的虚拟实验教学平台的设计与实现方案。这在国内还是一个新的尝试。该方案避免了以往Web3D应用中插件/专有客户端软件安装所带来的安全及用户体验差的问题，可直接通过浏览器访问，具有较强沉浸体验的实验场景，进行相关实验操作的体验和学习。

　　1 WebGL

　　 WebGL是Khronos组织提出的，如名称所暗示的，定义JavaScript类似针对C++的OpenGLAPI。WebGL紧紧结合OpenGL/ES2.0，并且使用GLSL作为着色器语言，意味着现有的应用的着色器核心可以在JavaScript/WebGL中重用。由于WebGL是一个规范，它由Web浏览器开发者实现它。目前，在最新的常用浏览器（Firefox、Chrome、Safari）都实现了现有WebGL版本。而且已有大量的JavaScript库正在开发以提供高级功能以创建3D图形应用。如WebGLU，它是WebGL与GLU的结合，提供封装，在场景中放置Camera或者提供简单的几何图形元素，其他的库如GLGE或SceneJS使用WebGL实现场景图形基于渲染及动画引擎。

　　2 系统设计

　　 本文选用的基于WebGL的虚拟实验学习环境是化学实验。虚拟化学实验平台采用B/S架构设计，由具有WebGL解析能力的浏览器、Web服务器组成。系统采用Ajax架构设计，服务器端遵循MVC设计模式。

　　图1 虚拟化学实验平台体系架构示意图

　　 客户端使用具有WebGL解析能力的浏览器客户端软件构成，包括UI接口模块及Ajax框架引擎模块。

　　 Web服务器由模型层、表示层及控制层及XML服务器及后端数据库构成。其中模型层由XML标记语言组成，定义了信息及信息的可视化，又分为模型XML和材质XML。模型XML定义了使用WebGL基元（如线、点、多边形等）构成的球体、立方体、圆锥体等对象。材质XML定义了对象的纹理属性。

　　 为了创建一个显示，需要大量的JavaScipt解析器来组合和渲染实验模型（数据文件）。在显示层定义的XML文件是光照、文本、及视觉效果XML文件。光照XML定义了光照类型、位置及方向。文本文件定义了对象匹配的文本，包括文本内容、大小和位置。视觉效果XML包括对象的颜色、着色以及一些基本的动画（如平移、旋转和缩放）。

　　 控制层为了实现与站点的交互，负责处理事件及转换表示。在控制层定义的XML文件是site.xml。该文件可以导入模型层和展示层内容，将所有的XML文件聚合到site.xml文件，因此，它可以控制整个实验场景的创建。开发者只需控制site.xml，通过创建相关的XML文件，如模型、摄像机、光照等，随后渲染site.xml文件，就可在网页中输出三维场景。

　　3 系统实现

　　3.1 架构设计的实现

　　3.1.1 模型层

　　 在模型层，需要创建两个XML文件。一个是Shape.xml，另一个是material.xml。

　　 Shape.xml创建对象的基本形状。在WebGL中用drawElement（*）或drawArray（*）函数来绘制对象。为了绘制一个形状，开发者需要包括不同的关联：定点、标准坐标、纹理坐标及索引。XML文件如下：

　　 vertices coordinate

　　 vertices normals

　　 texture coordinates

　　 index of the vertices

　　 Material.xml存储纹理数据及表面颜色。包括纹理的源路径及纹理坐标。文件结构如下：

　　3.1.2 表示层

　　 表示层包括光照、文本、视觉效果、摄像机及动画XML文件，动画XML定义实验场景中的对象的运动方式。

　　 光照XML定义场景中的光照，包括位置、颜色及方向。文件示例如下：

　　 1.0,1.0,1.0

　　 #FFFFFF

　　 1.0,1.0,1.0

　　 文本XML存储了文本的属性及键值。在文本XML中，包括有文本的字型、大小、位置、颜色、旋转及内容等。示例如下：

　　 1,0,0

　　 #FFFFFF

　　 1.0,1.0,1.0

　　 input the text content

　　 视觉效果、摄像机及动画等XML文件的设计的方式如此类推。

　　3.1.3 控制层

　　 在控制层，将模型层及表示层的所有的XML文件组合在一起形成一个单一的site.xml文件。除此之外，一个场景结构包括场景属性（如背景颜色、摄像机及雾化等）。对于一个对象，可能包括来自模型层的形状和材质数据，同时也包括来自表示层的动画及视觉效果数据。形成的场景的结构示例如下：