WebGL在大数据可视化系统中的方法研究

摘 要：近年来，随着汽车行业的飞速发展，汽车行业的信息正以日新月异的速度迅速增长，利用相关可视化技术并结合人的视觉优点和主观认知，把信息以直观和可交互的形式展现在用户面前成了研究重点。本文重点研究了WebGL3D可视化技术，建立汽车模型，将信息以动态的画面效果展示出来，通过直观的动态画面不仅容易理解，而且能从中挖掘出更有价值的信息。并且信息的展示植入汽车元素，形成汽车行业独树一帜的信息可视化展示风格。

关键词：汽车；信息展示；可视化；WebGL

中国分类号：TP393.0；TP391.41

随着计算机和互联网的快速发展，不仅改变了人们的生产模式，更是改变了人们的生活方式。互联网以其便利、快捷等现代特性，正成为人们获取信息最重要的途径[1]，因此提高人们的上网体验就是提高人们的生活品质。而浏览器是打开信息的大门，以前的2D网页不再满足人们的需求，3D页面已然成为未来的趋势，再加上信息量爆炸式的增长，信息的可视化成为了研究的重点。

实际上，在日益增长的数据背后，隐藏着许多重要的信息，通过对数据信息更高层次的分析，挖据数据背后潜在的应用价值[2]，借助WebGL三维可视化技术，以形象直观的3D动态图像来检索信息，提高用户的体验。

1 关键技术

1.1 WebGL

传统的Web3D解决方案主要依赖Flash，Java3D以及微软的Silverlight等技术[3]。然而上述技术都存在一个共同的缺陷，难以支持Web端GPU加速，因而难以胜任大规模复杂3D场景的渲染。WebGL的出现解决了这一难题，WebGL是一种3D绘图标准，通过结合JavaScript和OpenGL ES2.0来提供一种类似于OpenGL的API[4]，并在Web端提供3D加速渲染功能，它完美地解决了现在Web交互式三维动画对插件的依赖和不支持GPU加速两个问题[3]。

1.2 Three.js库

three.js是JavaScript编写的WebGL第三方库，提供了非常多的3D显示功能。Three.js是一款运行在浏览器中的3D引擎，可以用它创建各种三维场景，包括摄影机、光影、渲染器、材质等各种对象，可以很轻松地创建3D动态画面。

1.3 SSH框架

SSH为Struts、Spring、Hibernate的一个集成框架，是目前较流行的一种Web应用程序开源框架。SSH框架分为四层：表示层、业务逻辑层、数据持久层和域模块层，通过此框架能在短时间内搭建出结构清晰、维护方便的Web应用程序。Struts作为系统的整体基础架构，负责MVC分离，Hibernate架构实现数据库的访问，Spring对Struts和Hibernate进行管理。

2 系统的总体框架设计

本系统采用MyEclipse8.5的JavaEE集成开发环境作为开发平台，系统架构为B/S，采用SSH作为Web框架，选用Apache Tomcat 6.0为Web服务器，后台数据库为Oracle，在以上环境中完成整个系统开发，系统的框架设计如图1所示：

3 物理建模

建模是本系统的核心部分，在确定要显示的内容后，借助Three.js第三库建立模型。模型是以JavaScript脚本为载体，通过建立模型矩阵、视图矩阵、投影矩阵来模拟事物，从数据库中加载数据到模型中，再通过支持HTML5的浏览器渲染出来，得到动态的三维画面。例如我们要模拟一个汽车和汽车周围的景色，要编写JavaScript脚本代码创建Three.js提供的摄影机、光影、渲染器、材质等对象，建立汽车和周边的景色模型。

3.1 汽车信息可视化模型

要把汽车信息通过可视化的界面展示给用户，建模是相当关键的一步，将汽车元素和数据信息结合在一起是本论文可视化的标准。

3.1.1 零部件结构模型设计

汽车零部件是汽车的组成部分，零部件的性能最终影响到整个汽车的性能，所以零部件在汽车中占很重要的地位。把零部件结构以三维动态画面展示出来，不仅让用户能对零部件有详细的了解，而且为汽车专业人员提供方便快捷的学习条件，不用现场操作零部件就能轻松地了解零部件内部的结构。所以零部件的建模要以三维动态图为主，小零件能支持拆解和安装，把整个安装和拆解的过程展示出来，给用户全新的体验。

3.1.2 汽车模型设计

模型的建立与可视化展示数据的需求相关，当要展示汽车表面和内部结构时，将对整个汽车进行建模，把汽车虚拟化成网页图像，并且能实现开车门、旋转、开车启动等功能，当点击汽车零部件时可以展示零部件参数，把整个汽车以三维的可交互页面展示给用户，用户想了解该品牌的汽车时，只要打开该品牌汽车的页面，就能查看到汽车所有的参数，从各个视角欣赏汽车的外形和内部结构，为用户提供有效信息，模型主要功能如图2所示：

4 数据库设计

模型矩阵是用数据来填充的，这些数据从数据库中获取，模型对象对获取的数据进行分析和处理。数据库的E-R图如图3所示，用户权限表规定用户只能根据权限访问汽车信息表，汽车信息表中记录了汽车模型的外形和位置坐标，零部件表记录汽车零件的位置坐标信息，图表展示信息表是点击某零件弹出对应参数图表的数据源。

5 可视化信息展示

可视化是采用计算机图形学和图形处理技术将数据转换成图形或者图像显示出来的技术，本文是基于WebGL可视化技术开发的。可视化数据信息的展示要通过客户端和服务器，客户端发出请求时先通过模型框架，模型框架判断用户点击事件，通过HTTP协议向服务器发出请求。服务端接收到请求信息交由SSH框架进行处理，由框架向数据库访问数据，再把数据返回给客户端，客户端把数据填充到模型中，得到数据填充的模型要通过支持HTML5的浏览器渲染，整个可视化过程如图4所示。

6 结束语

本论文借助WebGL三维可视化技术和Three.js框架，建立了汽车信息可视化系统，通过3D动态汽车模型对汽车数据信息进行了可视化展示，使汽车信息数据的展示融入了汽车元素，形成了汽车行业独树一帜的汽车数据展示平台，不仅提高了用户的视觉体验，而且把有效的信息直观的传达给了用户，即利于用户理解，又能挖掘出数据背后潜在的应用价值。

参考文献：

[1]韩义.Web3D及Web三维可视化新发展――以WebGL和O3D为例[J].科技广场，2010，12（05）：81.

[2]金玮，孙艳，张克君.Web信息检索技术中关联规则挖掘算法应用研究[J].情报杂志，2007，26（1）：39.

[3]殷周平，吴勇.基于WebGL和AJAX的WEB3D应用研究――以在线3D协作交互式设计为例[J].安庆师范学院学报（自然科学版），2013，19（1）：58.

[4]刘爱华，韩勇，张小垒.基于WebGL技术的网络三维可视化研究与实现[J].地理空间信息，2012，10（5）：79.

作者简介：朱向雷（1981-），男，河北人，高级工程师，研究方向：汽车行业数据应用与研究。

作者单位：中国汽车技术研究中心 数据资源中心，北京 100167

基金项目：中国汽车技术研究中心科研项目（13130135）。