基于WebGL的动车部件模型三维可视化技术的研究与应用

王川 牟琳 张珍文 安帅

摘要：基于WebGL的动车部件模型的三维可视化技术的研究涉及WebGL技术、Html+JS+CSS技术、AJAX技术、JSON技术等，本文综合运用上述技术提出了一套动车部件的三维立体展示、部件搜索及定位系统、关联信息呈现的解决方案，并给出整套构建方案的代码实现，论证了该方案的可行性。

关键词：WebGL;AJAX;JSON;动车部件模型;三维数据可视化

中图分类号：TP311        文献标识码：A        文章编号：1009-3044（2018）31-0208-02

動车部件构成复杂，数据量大、部件之间的关联关系复杂并涉及大量的工业数据。采用三维模型建模展示比传统的可视化技术可以更加直观有效地获得部件的相关信息。

基于WebGL的动车部件模型三维可视化技术是将3D可视化技术和信息管理技术相结合，渲染出动车部件的整体三维模型场景，并提供简洁直观的UI让用户能快速搜索，定位模型并查看模型的重要信息。

1  核心技术简介

1.1WebGL技术

WebGL基于OpenGL ES 2.0，是一个Javascript 的 API，用于在浏览器里渲染交互式3D图形，无须任何插件。

WebGL 分为两大部分：控制端部分和着色器部分。控制端部分由Javascript 实现，着色器部分由 GLSL 实现。

使用WebGL的web应用程序工作模式如图1所示。

1.2 HTML5+ JavaScript +CSS技术

HTML5 主要有三大特点：第一，增加了本地数据库等 Web 功能;第二，强化了Web 页面的展示性能;第三，实现了对离线应用的支持。HTML5 使得开发人员可以基于 HTML5 原生方法为用户提供更多更好的交互功能。

JavaScript是一种广泛用于客户端网页开发的脚本语言，通常不能直接像普通程序那样运行，只能通过 Web 浏览器进行解译和执行。

CSS技术层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

1.3 AJAX技术

AJAX可以创建更好、更快且交互性更强的

web 应用程序。AJAX 使用 JavaScript 在幕后与 web 浏览器与 web 服务器之间来发送和接收数据，而不是每当用户做出改变时重载整个 web 页面，可以使网页更迅速地响应。

1.4 JSON

JSON是一种轻量级的数据交换格式。它用于表示简单的数据结构和对象。JSON 是基于文本的，容易被人阅读、理解和编写，同时也容易被计算机解译和生成。

2 系统架构与技术实现

2.1系统架构

系统采用三层结构，应用服务器提供用于与其他系统关联信息获取的数据接口，并将客户端发出的请求的结果以Json等数据方式返回给客户端。系统架构图如图2所示：

2.2 技术实现

2.2.1三维场景呈现

系统通过Json格式配置文件描述模型的名称、类型等属性信息及模型间的上下级关系，前端使用JS方式Json配置文件，并根据配置文件生成树状元素，该树形元素通过解析配置文件直观呈现模型之间的父子关系，显示模型的名称并通过图标区分不同类型的模型，同时基于WebGL将整个三维场景渲染在前端页面中。

2.2.2部件双向定位

提供模糊搜索用户接口，通过输入关键词，进行模糊搜索匹配并定位到模型树中的相关模型，通过JS操作树形结构展开并高亮显示匹配模型，同时三维场景中的相应模型通过模型产生高亮显示效果，实现从模型树到三维模型的定位。

用户也可直接点击部件模型，后台通过响应事件定位该模型，展开树形结构并高亮显示模型名称，实现从模型到模型树的定位。

2.2.3信息展示

系统支持对模型的固有属性信息和扩展信息的展示。

所谓固有属性信息是指模型的名称、尺寸信息、厂家、出厂日期等自带的属性信息。这些信息被组织在模型描述的Json文件中，当模型被选中时，利用JS的响应事件调取相关的信息进行呈现。

所谓扩展信息是指非模型本身属性，而是在生产运用过程中的业务数据。系统采用webservice数据接口按照指定的形式进行数据的组织，并通过Web传输或者AJAX异步传输的方式给予响应，从而展示在前端。

3 系统运行实例

进入系统后，首先可以看到基于WebGL渲染的整个三维场景。

界面左侧是三维场景对应的模型组织关系树。

输入模糊匹配关键词，可以看到高亮显示的模糊匹配结果，点击选中一项，则三维模型场景中的响应模型被高亮居中显示。同时下方的信息栏目展示了模型的固有属性和扩展属性信息。

系统运行示例图如图3所示：

4 结语

本文所设计的基于WebGL的动车部件模型三维可视化系统充分利用了三维模型的直观、准确的优势和信息管理系统对数据组织、扩展、管理的优势将动车部件三维模型通过WebGL渲染出来，并使用Html、Javascript、CSS、AJAX、JSON等技术构造出模型的组织关系树使得系统更直观的呈现模型间的架构关系，同时支持双向选择定位模型，支持模型的固有属性和拓展属性的呈现，为三维工业数据可视化的实际应用提供解决方案和示范参考。

参考文献：

[1] 牛艺博. 基于WebGL的地理信息三维可视化技术研究[D].兰州交通大学，2015.

[2] 孔静. 基于WebGL技术的物联展示系统的设计与实现[D].电子科技大学，2014.

[3] 王维敏. Web3D技术探索及几种Web3D技术的比较选择[D].武汉大学，2004.