基于WebGL技术的医学虚拟实验室的设计与实现

李琨　贾立伟　石晓明

摘要：目前，在我国医学高职高专院校的教学过程中，存在着诸如教学模具不足、实物标本稀缺、实验器材昂贵以及医学实验操作存在风险等问题，使得医学高职高专院校的实验教学效果难以达到预期。为了解决上述问题，基于WebGL技术设计并实现符合我国医学高职高专院校教育教学需要的医学虚拟实验室系统。基于WebGL技术的医学虚拟实验室系统的实施必将在提高医学教育技术、改善教学实验环境和优化教学过程、培养具有创新意识和创新能力的人才以及减少教学成本等方面发挥重要作用。

关键词：Web3D；WebGL；医学虚拟实验室；虚拟人体三维模型；网页交互技术

1概述

目前，在我国医学高职高专院校的教学过程中，存在着诸如教学模具不足、实物标本稀缺、实验器材昂贵以及医学实验操作存在风险等问题，而且许多实操练习都是通过观看教学视频来进行的，医学生的实际动手能力并没有得到训练。对于以培养高素质医学技能型人才为目标的高职高专院校来说，实验教学效果难以达到预期。随着“互联网+”时代的到来，以网络技术和虚拟现实技术为基础的Web3D技术，以其逼真的场景模拟功能、友好的交互能力在提高学生学习兴趣、强调教学的重难点内容，培养学生实操技能等方面能够起到积极的作用；特别是其良好的網络传输性能，使得不受时间、场所、内容等因素限制的“线上学习”活动成为可能。

当然，国外许多商业公司和科研机构已经开发出了技术比较成熟的用于教学的虚拟现实产品。但是，这些产品对于国内大部分医学院校来说还是具有很大的局限性（比如产品价格太高，操作系统语言环境陌生等）。医学高职高专院校的学生要想熟练操作这些产品并不是一件容易的事。因此非常有必要开发出适合我国医学高职高专院校教学实情的医学仿真实验系统。本文将基于WebGL技术对符合我国医学高职高专院校教育教学需要的医学虚拟实验室进行设计与实现。

2Web3D技术与WebGL技术概述

Web 3D技术是互联网与虚拟现实技术相结合的产物，让人们利用网页浏览器与三维虚拟世界进行交互性操作，以达到身临其境的视觉体验。当前，主流的Web3D技术有Java3D、Flash3D、VRML等技术。但是，由于这些Web3D技术的应用开展较早，往往自身存在着一些固有的缺点（如兼容性低、不能完全支持硬件加速、技术复杂且开发周期长、浏览器需要安装播放插件等问题）。在“互联网+”时代下，人们希望随时随地都可以通过移动终端设备快速便捷地访问互联网资源。由于智能移动设备间存在着差异性，使得这些主流Web3D技术难以适应所有操作系统平台的运行要求。因此，迫切需要一些新的技术能够解决“互联网+”时代下Web3D技术的应用难题。

WebGL是一种基于OpenGL ES 2.0标准，可以通过HTML5的Canvas元素作为DOM接口访问的一种实现Web交互式3D图形渲染技术-引，它完美地解决了网页端的GPU硬件加速以及浏览器插件依赖两大难题。而基于WebGL技术开发项目，其源代码实现较为繁杂，常常采用第三方库来简化开发。常用的第三方库有Three.{s、SceneJS、BabylonJS、GLGE等，其中Three.js是JavaScript编写的一款运行在浏览器中，而且能够提供强大交互功能的3D引擎。本项目使用Three.js这个第三方库来创建基于WebGL技术的医学虚拟实验室。

3系统分析与设计

3.1系统需求

（1）虚拟实验室中包括数据库管理员、教师和学生三类用户，根据登录用户的类型来控制虚拟实验室前后台访问权限。其中数据库管理员拥有最高权限，可以增删改查数据库中的所有数据。

（2）教师用户通过虚拟实验室后台自行添加、设置课程章节划分，依据章节添加学习资源（主要包括三维模型文件、用于讲解所用的音频文件）。

（3）学生用户使用鼠标来完成对虚拟人体三维模型的交互操作。

（4）增加章节测试和实验考核模块，教师利用此模块用以检查学生对知识的掌握情况。

（5）数据库管理员可以对后台数据库中的数据进行备份、恢复、打印和导出。

3.2后台数据库的设计

本系统采用PHP+MYSQL的技术组合来实现虚拟实验室系统的开发。根据对系统需求的分析，该系统的后台数据库可以划分为用户管理、课程管理和实验测试三大模块。其中，用户管理和实验测试两个模块并不是本系统的技术难点，因此本节以课程管理模块为例，阐述后台数据库的设计方案。课程管理模块的数据库中主要包括cate、cottt'se、slteotl/'se、3dimg和music五张数据表（其关联关系如图1所示）。其中课程类别cate表中存放的是课程分类的基本信息，课程course表记录的是子课程（即对课程实现模块化后得到的基本教学单元）的基本信息，sltcourse表是选课表，3dimg表存放的是该子课程所用三维模型文件的存储信息，music表存放的是该子课程讲解所用音频文件的存储信息。

3.3系统功能模块

通过上述两方面内容的分析，可以按功能将系统结构分为用户管理、课程管理、测试和数据库备份四个模块（如图2所示）。

（1）用户管理模块：该模块包括数据库管理员、教师信息以及学生信息三个管理子模块。用以管理三类用户的基本信息和控制各类用户的使用权限。

（2）课程管理模块：该模块包括课程信息、选课信息、课程类别以及模型文件管理四个管理子模块。其中模型文件管理模块用以增删改查课程相关的三维图形文件信息（包括模型文件所需的.obj、.mtl和.jpg文件的存储位置信息）。

（3）测试模块：该模块包括单元测试和期末实验测试两个模块，用以设置每个子课程所布置的章节测试内容，还可用作学期末实验课程考核的测试。

（4）数据库备份模块：用于数据库管理员对数据库中的数据进行备份、恢复、统计等操作。

4医学虚拟实验室的实现

医学虚拟实验室的实现技术主要包括虚拟人体三维建模技术、网页端的显示技术、网页端的交互技术。虚拟人体三维建模技术是虚拟现实技术的基础。把建立的三维模型在网页端显示出来，即所谓的网页端的显示技术。网页端的交互技术是医学虚拟实验室所需要的关键技术。本节以耳的解剖模型为例，阐述医学虚拟实验室的实现过程。

4.1系统功能模块

虚拟三维人体器官或标本模型采用的是体模型建模，可以使用诸如3DSMAX、Blender等工具來实现建模。其中3DSMAX在三维建模领域开展较早，技术应用最成熟，可以利用的模型资源也最多。因此，本系统使用3DSMAX对虚拟人体三维模型进行建模。

按照人耳的解剖结构可将耳的结构分为外耳、中耳和内耳。利用多边形建模方式在3DSMAX软件中建立耳部解剖结构的完整模型（如图3所示）。为增强其可视性，参照解剖学图谱经过反复筛选和调整，选用合适材质文件为耳部结构进行着色。最后，将模型导出为3D模型文件（.obj格式文件）、材质文件（.mtl格式文件）和贴图文件（如.jpg.png文件等）这三类资源文件。在此阶段需要注意以下两点内容：

（1）由于建立模型时使用的坐标系单位并不统一，直接导出obi文件会影响模型在网页端的显示，所以在导出文件之前根据实际设置模型的缩放比例。

（2）在导出材质文件时常常出错或没有贴图文件，原因是使用了第三方插件渲染器（如VRay等）对模型进行了渲染，需要在导出文件之前将渲染器设置为默认扫描线渲染器，并使用标准材质重新贴图才能解决此问题。

4.2 WebGL技术实现模型在网页端的显示

WebGL技术实现三维虚拟模型在网页端显示的基本方法是：首先利用Three.is的Scene0函数创建视图场景；然后通过利用Three.js扩展库MTLLoader.i，s中的MTLLoaderO函数加载模型所需的材质文件（.mtl文件）；当MTLLoader对象使用loadO函数加载成功后，利用Three.is扩展库0BJLoader.is中的0BJLoaderO函数加载模型文件（.obj文件），将加载的模型加入Scene场景中。接下来，在场景中添加光源对象（多个点光源PointLight对象和自然光AmbientLight对象）、透视摄像机对象（PerspectiveCamera对象），并对这些对象设置光源位置和颜色，透视相机的角度、横纵比等参数，以使三维虚拟模型达到较为逼真的视觉效果。最后使用Three.is中的WebGL渲染器（WebGLRenderer），为场景、相机和模型等元素按每次一帧实施动画渲染，即可在网页端显示出人耳的三维虚拟模型（如图4所示）。