基于X3DOM的3D虚拟实验室①

刘 景,刘 豪,王夷非

1(河海大学 物联网工程学院,常州 213022)

2(常州市图形图像与骨科植入物数字化技术重点实验室,常州 213022)

实验教学作为学生获取和掌握知识的主要手段之一,是现代教学中不合或缺的一部分.传统的实验室由于建设成本较高、场地不足、实验设备易损坏和开放性受到较大限制等问题,难以满足实验教学的需要.如何构建出内容丰富、训练效果高和不受时间空间限制的开放式实验环境是高等院校当前需要解决的重要问题之一.近年来,随着计算机技术、通信技术与虚拟现实技术的快速发展,虚拟实验室作为一种崭新的教学方式越来越受到人们的关注.虚拟实验室让学生可以随时随地的完成实验任务.并通过丰富的虚拟实验内容,让学生的学习方式由被动转为主动,提高学习效果.

当前,虚拟实验室主要分为远程控制和软件仿真两种形式.远程控制虚拟实验室需要提供真实的实验仪器,实验人员通过远程计算机控制这些实验仪器来完成实验.如武汉大学[1]开发了三维网络化控制系统实验室NCSLab3D,通过浏览器来远程控制实验设备,实现了实验教学设备的共享.在这类实验中,一个实验仪器无法被多人同时操作,实验资源利用率低,其发展受到了一定的限制.软件仿真实验室是通过计算机技术和软件技术对实验过程、实验操作、实验现象和实验结果进行模拟和分析.希腊国立大学[2]开发了B/S架构的MASTERS VLab,对MATLAB进行了二次开发,构建了图形用户界面,无需编程,用户通过拖拽就可完成实验.卡内基梅隆大学[3]建造了虚拟工程学习实验室(VESLL),通过可视化、在线游戏的方式来帮助用户学习STEM(科学、技术、工程、数学)知识.浙江大学[4]网络实验室陈仲明、朱善安等开发了虚拟电工电子网络实验室,该平台采用Modelica进行统一建模,将每个实验设计成一个Flex插件,可以灵活的扩展实验.大连理工大学[5]提出了采用Virtools平台来构建三维高仿真HPLC虚拟实验室,在三维环境下动态模拟各种参数的色谱数据.软件仿真实验室采用虚拟的仪器设备来进行实验,开发方式灵活,开发成本低,成为了虚拟实验室开发的主要方向.近年来,随着网络技术和虚拟现实技术研究的不断深入,虚拟实验室正朝着网络化、高度仿真化和专业化的方向发展.

本文采用B/S(浏览器/服务器)结构,基于开源三维渲染引擎X3DOM,以X3D作为三维数据描述格式.采用Javascript开发组件库,设计并实现了三维在线虚拟实验室系统.

1 虚拟实验室系统需求

为了达到实验教学目标的要求,该系统应能满足如下要求:

(1)用户可以随时随地使用PC机通过浏览器进入实验室,无需下载插件;

(2)仿真度高,实验场景逼真度高,实验设备外观、功能应与真实设备基本一致,三维环境中的光照、材质符合实际情况;

(3)方便使用,能够多角度观察实验设备,实验设备具有放大、缩小、平移和旋转功能,能够场景漫游;

(4)实验设备具有一定的智能性,如用户可以通过点击电源开关来打开或关闭灯光,漫游走到门面前时门能够自动打开或关闭等.

(5)实时性高,能够及时响应用户请求,实验过程中帧数稳定在每秒30帧以上.

2 系统设计

根据虚拟实验室的特点和开发需要,采用B/S(浏览器/服务器)的体系架构,如图1所示.服务器端分为Web服务器和数据库服务器.Web服务器为用户提供网上信息浏览服务,存储了HTML、CSS、Javascript和图片等文件.Web服务器通过“请求-响应”的方式与客户端进行通信,浏览器发出请求,Web服务器做出响应.数据库服务器用于存储三维模型文件,场景配置文件.用户通过局域网或Internet网访问Web服务器,再通过Web服务器访问数据库服务器.

图1 系统架构

客户端是虚拟实验系统的核心,客户端仿真实验采用MVC(模型-视图-控制器)的设计模式.模型用来存放所有的数据对象,如一个虚拟仪器模型,可以存放属性以及所有与模型相关的逻辑(模型的读、取等),当控制器从服务器上获取数据或有新的数据产生时,产生的数据就被封装成模型实例.视图中的三维场景通过X3DOM渲染.X3DOM是X3D的扩展,可以直接以HTML的形式显示3D内容,集成了CSS样式并支持HTML5事件,X3DOM引入了WebGL,可以通过硬件加速(GPU)渲染,无需插件[6].控制器用于处理和响应事件,三维场景加载时,控制器会为场景添加监控事件,监控场景中数据的变化并处理,实时更新场景.另外,为了避免数据的重复创建,减少服务器请求次数,提高系统实时性,客户端具有缓存机制,将需要重复使用的数据(如三维模型,图片)进行存储,当再次需要时,可直接在浏览器缓存区取数据,无需再次发送请求.

2.1 系统功能模块设计

实验中涉及的实验设备较多,功能较为复杂,对仿真平台的渲染效果、实时性和交互性有较高的要求.为了降低代码的耦合度,实现代码复用,提高系统的可扩展性,采用模块化的开发方式,自顶向下将一个复杂的系统逐步划分为若干模块,系统的功能模块主要分为三部分:通信模块、三维仿真模块和实验仿真模块,每个模块又可分为多个功能独立的模块.其中,网络通信模块负责客户端与服务器之间的信息交流,通过对Javascript脚本和CSS样式文件进行合并,减少HTTP请求数,提高页面响应速度,保证系统实时性.如图2所示.

图2 功能模块设计

三维仿真模块主要是实现三维实验场景的构建、渲染、调度与管理.用户可以通过鼠标键盘对虚拟环境中的实验设备进行实时控制.具体包含模型的调入、合成、编辑与渲染,交互控制,场景文件的生成等功能.该模块分为三个部分:场景管理、图形渲染和交互控制.场景管理负责创建和管理三维场景,实验中断和结束时提供存储功能;图形渲染负责浏览器中场景的展示与模型的优化;交互控制负责处理交互事件,提供方便快捷的交互方式.

虚拟实验室中虚拟实验的种类较多,不同实验的实验原理、实验过程和实验的展示方式等有所同,实验仿真模块为不同的实验提供了统一的接口,对虚拟实验进行统一管理.该模块又可分为实验设备仿真模块、实验任务管理模块、仿真结果展示模块;实验设备仿真模块实现设备的视觉属性和逻辑功能[7]的仿真,视觉属性描述了设备的三维属性,包括名称、材质、大小和位置等,逻辑功能主要描述了设备的逻辑结构,包括设备的数据信息、交互控制信息和设备的功能属性等.实验任务管理模块负责实验指导,实验视屏的管理,用户在进入实验前,可以根据实验指导做好技术准备,了解实验原理,实验过程等相关信息.仿真结果展示模块提供可视化的数据显示.

2.2 人机交互

在虚拟实验室中用户可以多角度的观察实验器件,控制实验器件(平移、旋转、放大、缩小等),查看实验器件的属性.因此良好的交互体验对虚拟实验室尤为关键.如何提供持续的、稳定的和实时的交互方式是虚拟实验室开发的重点.实现方式主要有两种:静态方式和动态方式.

静态方式是根据X3D提供的Script节点,通过节点间的结合来达到交互效果,不使用外部程序.这种方式的交互代码一般包含在X3D文件中,交互的逻辑比较简单,可操控性不强,不适合在复杂的交互场景中使用.

动态方式是通过外部的逻辑来控制交互事件的产生,X3DOM将X3D场景内容作为HTML5的DOM节点直接嵌入页面中,通过Javascript脚本语言为DOM节点添加交互事件.当用户与三维场景之间产生交互事件时,浏览器捕获事件并做出响应.为了满足数据实时更新的需要,采用AJAX技术.如图3所示,AJAX充当客户端和服务器端文件传送的工具,基于X3D标准编码的 3D文件可以通过AJAX在异步条件下由服务器端传送到客户端,在客户端通过Javascript脚本语言并利用X3DOM标准提供的接口将 3D文件插入三维场景中,这样通过浏览器就可以看到三维的物体[8].同时为了避免用户出现操作失误的情况,采用堆栈的方式存储了用户的操作步骤,让用户可以方便的撤销当前操作.

图3 基于AJAX的交互架构

2.3 虚拟仪器的组件化封装

组件是对数据和方法的简单封装.系统运行过程中需要通过解析模型文件来获取数据变量.系统的交互控制模块,场景的载入与存储,虚拟仪器的参数配置模块都从建立的数据模型中获取数据来完成各自的功能.采用解析XML模板文件产生数据源来进行变量封装.在实验中,将模型的基本信息如ID、大小、位置和旋转等存储在XML中,统一管理,方便传输.

方法的封装是虚拟仪器逻辑功能的封装,在虚拟实验室中虚拟仪种类多,功能复杂,因此封装过程中应尽量保持共同封闭原则,避免因组件中一个类的变化而影响其他组件的变化.封装的具体过程如下:

(1)初始化(init).包括变量名的创建,DOM节点的定义,XML模板解析数据的传入,相关类的引入;

(2)事件绑定(bind).在实验过程中,用户只关心如何通过鼠标键盘对虚拟实验器件进行操作,而事件如何与HTML元素进行绑定以及事件触发后如何处理是事件绑定关注的重点.通过动态绑定为一个节点同时绑定多个事件,在事件触发的时候按照一定的顺序执行.

(3)渲染(render).将脚本文件中的数据渲染到HTML页面上.为了产生最快的渲染速度,页面渲染时应尽量减少下载所有关键资源所需要的网络往返的数量,减少关键资源的大小.采用异步执行Javascript脚本文件的方式,避免因浏览器解析阻塞强迫浏览器等待CSSOM (CSS Object Model View)并且停止DOM的构造.

(4)销毁现场(distory).销毁不再引用的对象,释放内存.

3 系统实现与测试

本节以计算机网络课程中的Ping实验作为展示实例.介绍虚拟实验室的仿真过程.仿真流程图如图4所示.

图4 仿真流程图

具体仿真步骤如下:

(1)仿真开始:解析XML模板数据文件,根据XML中的参数,从虚拟仪器组件库中预加载实验所需的组件,导入三维模型,UI组件渲染场景初始信息,实验室场景如图5所示,可以通过漫游观察实验室全景.

图5 实验场景

(2)虚拟仪器组件载入:用户根据实验需要,加载实验所需的虚拟仪器组件,Web浏览器解析Javascript脚本文件,将虚拟仪器的三维坐标,大小,旋转角度等信息显示在页面上.用户调整视角,通过鼠标键盘调整虚拟仪器位置.

(3)参数配置:根据实验目标设置实验参数(如IP地址),如图6所示.

图6 路由器参数设置

(4)仿真运行:检测参数配置是否正确,根据系统参数运行实验.

(5)仿真结果显示:动态显示实验结果,智能提示错误信息,如图7所示.

(6)实验存储:可以在实验的任何时候保存实验信息,避免因突发状况不能完成实验.

图7 Ping实验

在实验过程中模型的加载速度是系统实时性的集中体现,本文以计算机网络实验过程中常用的模型为例,对单个模型在不同浏览器中的载入时间进行了测试.测试PC机采用Inter(R)Core(TM)i5-2450的CPU,NVIDIA GeForce 610M的GPU,8G内存.采用x3d文件格式进行网络传输.为了避免偶然因数对模型加载速度的影响,采用相同环境下同一模型加载10次后取平均值的方式进行实验测试,测试结果如表1所示.从表中可以看出,当前4种常用的浏览器都可以对虚拟实验系统进行访问,且模型的加载速度.

表1 模型的加载时间

4 结束语

为了实现开放实验室建设的目标,本文提出了基于X3DOM虚拟实验室的方法和建设思路,采用X3DOM作为三维渲染引擎,无需插件,沉浸性强.以组件的方式对实验设备进行封装,易于扩展.经过实验测试表明,该系统交互性好,实时性高,能够达到实验教学的目的,同时也体现了虚拟实验室在实验教学上的优势.下一步的工作是完善实验设备组件库,丰富虚拟实验内容.

1周洪,任正涛,胡文山,等.基于NCSLab 3D的虚拟远程实验系统设计与实现.计算机工程,2016,42(10):20-25,31.[doi:10.3969/j.issn.1000-3428.2016.10.004]

2Alexiadis DS,Mitianoudis N.MASTERS:A virtual lab on multimedia systems for telecommunications,medical,and remote sensing applications.IEEE Transactions on Education,2013,56(2):227-234.[doi:10.1109/TE.2012.2210224]

3August SE,Hammers ML,Murphy DB,et al.Virtual engineering sciences learning lab:Giving STEM education a second life.IEEE Transactions on Learning Technologies,2016,9(1):18-30.[doi:10.1109/TLT.2015.2419253]

4施正寅,朱善安.基于Modelica的虚拟电工电子网络实验室设计.计算机工程,2012,38(11):287-289.[doi:10.3969/j.issn.1000-3428.2012.11.087]

5刘志广,王艳嫱,王姣姣,等.三维高仿真HPLC虚拟实验室的构建与研究.计算机与应用化学,2012,29(12):1483-1487.[doi:10.3969/j.issn.1001-4160.2012.12.018]

6Birr S,Mönch J,Sommerfeld D,et al.The liveranatomyexplorer:A WebGL-based surgical teaching tool.IEEE Computer Graphics and Applications,2013,33(5):48-58.[doi:10.1109/MCG.2013.41]

7乔卉,龚庆武,江传文.面向电力培训的三维交互仿真平台的设计与实现.电力自动化设备,2013,33(6):157-162.

8杨俊峰,黎建辉,杨风雷.深层网站Ajax页面数据采集研究综述.计算机应用研究,2013,30(6):1606-1610,1616.