0 概述
在学校教学中，大量的实验经常因为学校基础设施匮乏以及安全因素而没有开展[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
视觉效果、摄像机及动画等XML文件的设计的方式如此类推。
3.1.3 控制层
在控制层，将模型层及表示层的所有的XML文件组合在一起形成一个单一的site.xml文件。除此之外，一个场景结构包括场景属性（如背景颜色、摄像机及雾化等）。对于一个对象，可能包括来自模型层的形状和材质数据，同时也包括来自表示层的动画及视觉效果数据。形成的场景的结构示例如下：
3.2 XML解析
由上文可知，我们创建了一个实验场景的模型层、表示层及控制层的整个场景对象的数据结构。只需要解析site.xml文件就可以得到整个场景的数据结构。XML文件的解析示例过程如下：
xhr = new XMLHttpRequest （）;
xhr.open （“GET”, url, false）;
xhr.send （“”）;
var xmlDoc = xhr.responseXML;
var root = xmlDoc.documentElement.childNodes;
XMLHttpRequest（）函数发送XML http请求，然后通过open（“GET”，url，false）函数打开xml文件。Send（“”）函数将终止请求。这样我们就可以通过xhr.responseXML得到XML文档的内容。从而通过xmlDoc.documentElement.childNodes获得文档的根，应用解析函数就可以从根解析整个xml文档树。
3.3 渲染处理
3.3.1 WebGL渲染流水线
WebGL支持OpenGL ES2.0，因此WebGL的渲染管道与OpenGL渲染流水线类似。在WebGL中，HTML5的canvas成员及内存管理使用JavaScript语言来实现，图2示例了WebGL的渲染管道过程。
图2 渲染流水线示意图
3.3.2 渲染处理
在Html5中，新增了一个canvas成员。WebGL利用才成员进行3D图形的渲染。首先，WebGL通过canvas.getContext（“experimental-webgl”）函数获取OpenGL ES2.0上下文。根据上下文，可以灵活使用OpenGL图形API进行场景渲染。整个3D场景都在canvas中渲染。渲染过程如下：
var canvas = document.getElementById（“canvas id”）;
initGL （canvas）;
initShaders （）;
initBuffers （）;
gl.clearColor （0.0, 0.0, 0.0, 1.0）;
gl.clearDepth （1.0）;
gl.enable （gl.DEPTH_TEST）;
gl.depthFunc （gl.LEQUAL）;
drawScene （）;
3.4 交互处理
为了实现与用户的交互，可以使用web页面中内置的DOM Events的基本功能。DOM Events通过注册一个event监听器来实现，一般在页面加载的时候触发该监听器，可以实现对鼠标、键盘等用户操作事件的交互处理。
4 系统实现实例
应用本文建议的虚拟实验平台设计与实现方案，开发了一个虚拟化学实验平台示例。图3是虚拟3D化学实验室场景及容量分析实验场景示意图，学生通过该入口进入虚拟实验室，选择进行容量分析化学实验操作的学习，学生通过鼠标或键盘交互控制仪表操作按钮及量杯，混合注入不同液体，观察注入量与PH值的关系。
图3 虚拟化学实验平台实例示意图
5 总结与展望
化学实验在教学中起着关键作用，虚拟化学实验平台是解决学校基础设施匮乏的有效解决方案。本文提出了基于WebGL标准的虚拟化学实验平台的实现技术，讨论了这个技术实现的可能性，描述了可获得的组件以及如何用这些组件创建一个交互式虚拟化方案。因为WebGL标准还在进一步发展过程中，这个技术方案还需要进一步的完善。
