基于WebGl的海洋样品三维可视化研究

摘要：随着计算机和互联网的发展，人们的生活工作环境将越来越向互联网靠拢，当然三维可视化也不例外。在Web2.0的今天，Web三维可视化必然在未来的浏览器程序中占有重要的地位。本文设计实现了大洋样品馆的样品可视化系统，为样品馆的工作人员和申请样品的科学家带来了很大的方便，同时给出了笔者对于该系统今后发展的思考和思路。

关键词：Web3D；WebGL；HTML5；Extjs 4.2 MVC；Restful WebService；样品三维可视化

中图分类号：P209 文献标志码： A

0 引言

大洋样品馆样品仓库是在2000年5月由“国际海地区域研究开发‘十五’计划”提出的项目，并主要用于对于我们大洋样品进行保管。

样品主要来源就是中国大洋调查从对应的调查海域通过一定的取样仪器采集上来的海洋样品。样品的类型和形态都不尽相同，通过不用方式采集的样品的存储方式都会不通。在存储大洋样品的同时，在每件样品初次入馆时，其对应的属性信息也必须随着库存样品存储，以便于对样品进行更加科学化、细致化的管理。

随着国家不断加大对海洋研究的投入，中国大洋样品馆需要对大洋样品管理能够更提上一层楼，而在原来样品类型多样化、专业化，样品操作复杂化，样品存储的多元化、多角色化，完全靠人工进行处理已经变得非常困难。如果不能很好的对入馆、入库样品进行详细的管理和存储，将会使得耗费大量财力物力获得的大洋样品无法发挥其最大的价值。

在实际工作当中，由于目前的样品管理系统尚不能直观的对样品进行管理使大洋样品仓库的管理花费了很大的精力，同时申请样品的科学家也无法获得真实样品的直观信息，所以对于申请的样品的真实需求无法做出准确的判断。

1 Web3D的发展趋势

在信息化发展越来越迅速的今天，浏览器起到的作用越来越大，人们对于互联网的丰富应用越来越依赖。诸如Facebook、Twitter和人人网等各大社交网络的迅速推广，使附加于其上的网络应用得到了极大的发展。Google的Gmail以其简洁的风格获得了极大的成功，Gmail的用户纷纷抛弃了传统的单机Email客户端，转而使用功能强大的网络版Gmail。

在网络应用越来越流行的情况下，开发3D的网络应用也越来越成为了迫切的需要，Web3D应运而生。目前Web3D并没有准确的定义，我们可以把它理解为网络的3D图形技术。目前比较成熟的创建丰富Web3D浏览器应用程序主流解决方案有3种：

Adobe公司的Stage3D API结合flash player

基于OpenGL ES 2.0的WebGL技术，使用HTML5 Canvas元素并允许利用文档对象模型接口

Unity Web Player

1.1 WebGL

WebGL是Khronos协会正在制定的一种3D绘图标准，它是一个跨平台的、开源的Web浏览器3D绘图API。它是由Mozilla基金会原创，目前由Khronos协会下由Google、Opera、Mozilla和Apple等主流浏览器公司开发人员和其他三维图形开发者形成的WebGL Working Group开发。

WebGL基于OpenGL ES 2.0标准，并使用OpenGL着色语言GLSL，而且还提供了类似于标准的OpenGL的API。WebGL运行与HTML 5的Canvas元素中，WebGL与HTML中所有的DOM接口集成，它也是一个DOM API，这就是说它可以被任何与DOM兼容的编程语言如JavaScript、Java、Object-C等调用。

因为WebGL是基于OpenGL的，将在主流浏览器中集成，所有拥有一些核心优势：

它是一个基于被广泛熟悉和接受的三维图形标准API

它具有跨平台、跨语言、跨浏览器的特性

它有与HTML内容紧密集成，包括分层合成，与其他HTML元素和交互和HTML事件处理机制的使用

它提供浏览器环境中的3D图形硬件加速

2 系统设计

本系统采用B/S设计，由具有WebGL解析能力的浏览器、使用Extjs 4.2 MVC的前端界面与 MVC 4.0 WebAPI构建的WebService后台组成。

浏览器界面由Extjs 4.2 MVC构建而成，浏览器端主要负责业务逻辑的处理，组织实现用户界面，沟通客户端与服务端的数据交互。

服务端的WebService是使用 MVC 4.0 WebAPI实现的，使用了Restful的设计风格，负责沟通客户端和数据库的数据交互。实现了Repository资源库模式，使用了EntityFramework的ORM框架。

浏览器通过发起Ajax访问WebService提供的URL，WebService则处理后台数据，并将处理好的数据以Json格式发送给浏览器。

3 系统实现

3.1 模型的创建

UVs是驻留在多边形网格顶点上的二维纹理坐标点，它们定义了一个二维纹理坐标系统，称为UV纹理空间，这个空间用U和V两个字母定义坐标轴。用于确定如何将一个纹理图像放置在三维模型的表面。

图1 实际样品图片

本文中的3D模型使用3DMAX 2013工具创建，然后根据实际样品图片增加UV贴图以Open Collada格式导出。

图2 在3DMax中建立样品模型并添加UV贴图

3.2样品逻辑代码设计

在大洋馆系统中，样品类型是一个层次状的结构，包括8个基本类型，每个基本类型又分为很多特殊类型。样品的每个基本类型都对应一种模型，每个子类型的样品都继承该基本类型的模型，子类型的模型可以被重写。

Sample是所有样品的基类，它有所有样品基本的属性信息：样品类型和样品编码。但是不同的样品类型的属性信息并不相同，比如TubeSample（管装样品）的属性信息有长度但是没有重量，而RockSample（块状样品）的属性信息有重量但是没有长度。

因此8个基本样品类型对应8种基本样品类型模型，而各个样品类型又会根据具体样品的属性信息生成对应的样品模型。而工作人员可以为每个具体的样品上传特定的样品模型，如果上传了具体的样品模型，那么将使用上传的模型。

3.3 样品编码和属性信息

大洋馆对于样品的管理有一套样品的编码系统，每个样品都有唯一的样品编码，编码中体现了该样品的属性信息。那么通过解析样品编码我们会得到样品的属性信息，从而在界面正确显示样品的三维模型。

由于每个样品的属性信息都是不一样的，以管装样品为例，每件样品都有长度属性，那么100CM和50CM长度的样品在界面的显示是不一样的，所以需要对基本样品模型进行处理，才能在界面正确显示。

4 总结与展望

在样品的管理当中，样品的属性是非常重要的因素，然而在数据量越来越大的今天，如何去管理和发掘样品的属性给我们提出了非常大的挑战。本文提出了样品可视化的管理方式，给样品属性管理带了新的思路，让样品的管理更加直观，也给申请样品的科学家带了方便。

在接下来的工作展望当中，我认为主要有以下几个方面：

使样品的模型生成更加方便，例如通过不同角度的样品的照片自动生成样品的模型

增加样品的站位管理，每个站位都有经纬度，如果在地球模型上将站位显示出来，那么将会给工作人员带来了很大的方便

在样品3D模型场景中加入更多的用户交互的操作，给用户带来更加直观的体验

考虑样品属性信息的保密性和用户的权限

参考文献

[1]韩义Web3D及Web三维可视化新发展-以WebGL和O3D为例 科技广场 2010-05-30

[2]Diego Cantor； Brandon Jones，WebGL Beginner’s Guide， Packt Publishing， 2012-6-15

[3]程新丽 基于WebGL的虚拟实验教学研究，科技经济市场，2011年第9期

[4]马鑫.3ds Max2010超级手册.清华大学出版社.2010-08.

[5]OpenGL Architecture Review Board，Dave Shreiner，Mason Woo，Jackie Neider，Tom Davis.OpenGL编程指南（第六版）.机械工业出版社，2008-08

[6]韩义波.基于Ajax与REST的Web Services研究与实现.北京：中国地质大学，2009

[7]Ext JS 4.2.0 Sencha Docs API