一种基于WebGL技术的虚拟化学实验教学平台的制作方法

本发明涉及教学设备技术领域，具体为一种基于webgl技术的虚拟化学实验教学平台。

背景技术：

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

最近几年，有关3d内容交付的软硬件技术不断改善。首先，强大的并行gpu减轻了cpu的处理负荷，其次是新一代的web浏览器采用的tracemonkey、v8及squirrelfish编译器显著改善了javascript的执行性能。尤其是由khronos最近提出的webgl标准，将web浏览器和cpuc紧密地关联在一起了。这一切使得在web上呈现复杂3d图形环境成为了可能，也是得基于web的虚拟3d化学实验教学平台的设计有了新的选择。

基于webgl技术的网络虚拟现实技术利用它在技术上的优势，能够充分展示知识内容，激发学生的创造性，开展虚拟实验和进行廉价的技能训练，使得采用网络虚拟现实技术的网络教学可以取得很好的教学效果。传统虚拟实验教学平台中web3d应用中插件、专用客户端软件安装所带来的安全及用户体验效果差。

基于此，本发明设计了一种基于webgl技术的虚拟化学实验教学平台，可直接通过浏览器访问，具有较强沉浸体验的实验场景，进行相关化学实验操作的体验和学习，以解决上述问题。

技术实现要素：

本发明的目的在于提供一种能够给学生提供真实体验，安全地重复执行，使学生更充分地理解理论概念，通过高度逼真的具有沉浸感及交互特性的3d仿真，能促进学习过程的基于webgl技术的虚拟化学实验教学平台，以解决上述背景技术中提出的问题。

为实现上述目的，本发明提供如下技术方案：一种基于webgl技术的虚拟化学实验教学平台，包括：

对象数据库，包括以xml文档形式存储容量分析化学实验虚拟场景模型的数据库；

web服务器，采用mvc框架，根据ajax请求模型信息请求所述容量分析化学实验虚拟场景模型，并从所述数据库中调取；

浏览器客户端，用于接收用户的访问请求，并将该访问请求发送至所述web服务器，并接收所述web服务器反馈的信息，并将其进行显示。

优选的，所述web服务器包括：

模型层，由xml标记语言组成，用于定义信息及信息的可视化；

显示层，包括光照xml文档、文本xml文档、视觉效果xml文档；

控制层，还包括结合模型层和显示层内xml文档的场景属性xml文档，用于导入模型层和显示层内容，控制整个实验场景的建立，实现与浏览器客户端的交互，负责处理事件及转换表示；

xml服务器，用于响应xml文档的请求，对xml文档进行存储和生成。

优选的，所述模型层包括用于建立实验webgl对象基本形式的模型xml文档和用于建立实验webgl对象的纹理属性的材质xml文档。

优选的，所述基本形式包括顶点、标准坐标、纹理坐标和索引，所述纹理属性包括纹理的源路径和纹理坐标。

优选的，所述光照xml文档用于建立场景中的光照，包括位置、颜色和方向，所述文本xml文档用于存储文本的属性和键值，包括文本字型、大小、位置、颜色、旋转和区域，所述视觉效果xml文档包括对象的颜色、着色和动画。

优选的，所述场景属性xml文档还包括背景颜色、摄像机和雾化。

优选的，所述web服务器还包括：

解析xml文档，用于解析模型层、显示层和控制层的整个场景对象的数据结构；

渲染处理xml文档，采用javascript语言实现webgl的3d图形渲染和内存管理。

优选的，所述浏览器客户端包括：

ui接口模块，通过协议和技术与web服务器实现通讯连接；

ajax框架引擎模块，包括：

event监听器，用于监听用户加载页面；

鼠标、键盘，用于与用户操作实现交互处理；

显示界面，用于显示请求的所述容量分析化学实验虚拟场景模型。

与现有技术相比，本发明的有益效果是：本发明一方面能够给学生提供真实体验，另一方面能够安全地重复执行，使学生更充分地理解理论概念，通过高度逼真的具有沉浸感及交互特性的3d仿真，能促进学习过程，为基础设施匮乏的高校提供一个具有成本优势的实验教学解决方案。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明结构示意图；

图2为本发明渲染处理xml文档工作流程图；

图3为本发明工作流程图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。

请参阅图1-3，本发明提供一种技术方案：一种基于webgl技术的虚拟化学实验教学平台，包括：对象数据库，包括以xml文档形式存储容量分析化学实验虚拟场景模型的数据库；

web服务器，采用mvc框架，根据ajax请求模型信息请求所述容量分析化学实验虚拟场景模型，并从所述数据库中调取；所述web服务器包括：

模型层，由xml标记语言组成，用于定义信息及信息的可视化，包括用于建立实验webgl对象基本形式的模型xml文档和用于建立实验webgl对象的纹理属性的材质xml文档，所述基本形式包括顶点、标准坐标、纹理坐标和索引，所述纹理属性包括纹理的源路径和纹理坐标；

模型xml文档在webgl中用drawelement（*）或者drawarray（*）函数来绘制对象，具体如下：

<shapeid=“shapeid”type=“triangles”>

<vertices>verticescoordinate</vertices>

<normals>verticesnormals</normals>

<texcoords>texturecoordinate</texcoords>

<indices>indexofthevertices</indices>

</shape>；

材质xml文档如下：

<materialid=“treematerial”specular=“0”color=“ffffff”transparence=“0.5”>

<textureid=“treetexture”src=“url”/>

</material>；

显示层，包括光照xml文档、文本xml文档、视觉效果xml文档，所述光照xml文档用于建立场景中的光照，包括位置、颜色和方向，所述文本xml文档用于存储文本的属性和键值，包括文本字型、大小、位置、颜色、旋转和区域，所述视觉效果xml文档包括对象的颜色、着色和动画；

光照xml文档如下：

<lightid=“#spotlight”>

<position>1.0,1.0,1.0</position>

<color>#ffffff</color>

<direction>1.0,1.0,1.0</direction>

</light>；

文本xml文档如下：

<textid=“#text1”font=“fonttype”size=“textsize”>

<position>1,0,0</position>

<color>#ffffff</color>

<rotation>1.0,1.0,1.0</rotation>

<textarea>inputthetextcontent</textarea>

</text>；

视觉效果xml文档如下：

<visual_styleid=“##visual1”>

<color>#ffffff</color>

<colour>1.0,1.0,1.0</colour>

<ranimation>1.0,1.0,1.0</ranimation>

</visual_style>；

控制层，还包括结合模型层和显示层内xml文档的场景属性xml文档，所述场景属性xml文档还包括背景颜色、摄像机和雾化，用于导入模型层和显示层内容，控制整个实验场景的建立，实现与浏览器客户端的交互，负责处理事件及转换表示；

场景属性xml文档结合模型层和显示层文档如下：

<sceneid=“#scene1”camera=“#camera1”ambien_color=“ffffff”fog_type=“fog”>

<objectid=“#object1”shape=“#triangle”animate=“#animationl1

material=“#wallmaterial”visual_style=“#visual0”/>

<objectid=“#object2”shape=“#triangle”animate=“#animationl1”material=“#wallmaterial”visual_style=“#visual0”/>

<lightid=“##light1”light=“#mainlight”/>

<lightid=“##light2”light=“#mainlight”/>

<textid=“##text1”text=“#text1”/>

<textid=“##text2”text=“#text1”/>

<visual_styleid=“##visual1”visual=“#visual1”/>

<visual_styleid=“##visual2”visual=“#visual1”/>

</scene>；

xml服务器，用于响应xml文档的请求，对xml文档进行存储和生成。

web服务器还包括：解析xml文件，用于解析模型层、显示层和控制层的整个场景对象的数据结构；渲染处理xml文档，采用javascript语言实现webgl的3d图形渲染和内存管理；

解析xml文档如下：

xhr=newxmlhttprequest（）；

xhr.open（“get”,url,false）；

xhr.send（“”）；

varxmldoc=xhr.responsexml；

varroot=xmldoc.documentelement.childnodes；

xmlhttpreques（）函数发送xmlhttp请求，然后通过open（“get”,url,false）函数打开xml文件，send（“”）函数将终止请求，通过xhr.responsexml得到xml文档的内容，通过xmldoc.documentelement.childnodes获得文档的根，应用解析函数就可以从根解析整个xml文档树。

渲染处理xml文档如下：

varcanvas=document.getelementbyld（“canvasid”）；

initgl（canvas）；

initshaders（）；着色器

initbuffers（）；缓冲器

gl.clearcolor（0.0，0.0，0.0，1.0）；清晰颜色

gl.cleardepth（1.0）；清晰深度

gl.enable（gl.depth_test）；

gl.depthfune（gl.lequal）；

drawscene（）；

浏览器客户端，用于接收用户的访问请求，并将该访问请求发送至所述web服务器，并接收所述web服务器反馈的信息，并将其进行显示，所述浏览器客户端包括：ui接口模块，通过协议和技术与web服务器实现通讯连接；

ajax框架引擎模块，包括：event监听器，用于监听用户加载页面；鼠标、键盘，用于与用户操作实现交互处理；显示界面，用于显示请求的所述容量分析化学实验虚拟场景模型。

学生通过登陆web网页，浏览器客户端接收用户的访问请求，并将该访问请求发送至所述web服务器，web服务器根据ajax请求模型信息请求所述容量分析化学实验虚拟场景模型，并从所述数据库中调取，学生进入到该虚拟实验室内，可选择进行容量分析化学实验操作的学习，通过鼠标或者键盘交互控制仪表操作按钮和量杯，混合注入不同液体，观察注入量与ph值的关系。

在本说明书的描述中，参考术语“一个实施例”、“示例”、“具体示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

以上公开的本发明优选实施例只是用于帮助阐述本发明。优选实施例并没有详尽叙述所有的细节，也不限制该发明仅为所述的具体实施方式。显然，根据本说明书的内容，可作很多的修改和变化。本说明书选取并具体描述这些实施例，是为了更好地解释本发明的原理和实际应用，从而使所属技术领域技术人员能很好地理解和利用本发明。本发明仅受权利要求书及其全部范围和等效物的限制。