基于WebGL 的船舶分段信息模型看板系统设计

叶统

（江苏科技大学船舶与海洋工程学院，江苏 镇江 212003）

分段的建造过程是船舶建造过程中重要的一环，设计和制造紧密联系是建造高质量船舶的关键，通过调研我国分段车间，目前分段车间工艺指导文件以纸质文件为主[1]，纸质图纸中数据繁琐且不易保存，各部分装配关系也不能直观展现，导致焊接装配过程出现错误，从而造成大量时间浪费，降低了作业效率。为了改善船舶分段车间的生产效率和信息交流，提出了基于WebGL的分段信息模型看板系统。该系统使用OBJ 格式文件作为基本文件，并利用HTML5、Three.js 和jQuery 等技术开发分段三维模型的可视化看板[3]。通过三维模型的可视化展示，直观展现各部分的装配关系，使作业人员更容易理解和识别。

1 核心技术简介

随着船舶建造的信息化、数字化和智能化发展，纸质指导文件已经无法满足生产管理需求。在船舶制造过程中，推动指导文件的三维化设计变得至关重要。然而，当前存在多种三维模型格式，缺乏统一标准。大部分三维模型浏览技术需要特定插件的支持，操作复杂且显示精度各异[4]。为解决这些问题，可利用支持GPU 加速的浏览器中的WebGL 技术，通过JavaScript 应用API对船舶分段三维模型进行交互式渲染，提高数据利用率[5]。WebGL 能够在Web 上渲染3D 模型和2D 场景，利用GPU 加速性能，使用户能够通过浏览器与三维模型进行交互操作，方便作业人员的沟通交流。

为实现此目标，首先需要为三维模型属性提供机制，使其在Web 端实现可视化。然后将属性信息嵌入HTML 和JS 文件中，通过WebGL 内置的着色器语言进行渲染和可视化。

如图1 所示。

图1 基于WebGL 的三维可视化过程

2 基于WebGL 的三维模型数据格式设计

2.1 三维模型数据需求分析

船舶分段建造涉及复杂的零部件和组件，数据庞大。为了在Web 上高效进行三维模型渲染显示，需要简易的模型格式。WebGL 结合OpenGL ES 2.0 和JavaScript，在Web 上显示三维模型，其三维模型由三角面片组成，因此需要提供每个模型的三角面片信息。

目前主流的三维模型格式有STL、VRML、X3D、FBX 和OBJ。STL 格式简单，用封闭的面和立方体构建模型，无属性信息，常用于三维打印。VRML 和X3D是类C 语言的结构化数据，通过外观属性和几何属性构建模型，相较于STL，它们可定义模型的材质、颜色和光照，但兼容性较低，需要插件支持。FBX 和OBJ 是通用格式，在主流三维软件中广泛使用，FBX 支持动画和骨骼动画；OBJ 是字典结构的文本文件，可直接编辑，主要支持多边形模型，支持面的三个点以上，便于后续处理。大部分三维软件支持OBJ 文件导入导出，方便交流分享。综合考虑兼容性、功能性和数据存储等因素，选择OBJ 作为三维看板系统的基本模型格式

2.2 OBJ 格式文件解析

OBJ 文件主要由顶点、纹理坐标、法线、三角索引和材质信息组成。材质信息保存在相应的MTL 文件中，OBJ 文件使用关键字"mtllib"指定MTL 文件。OBJ 文件可以由多个子模型（网格）组成，每个网格由object、v、vn、vt 和f 等数据组成。其中包含数据如图2 所示。

图2 OBJ 文件解析

2.3 MTL 格式文件解析

MTL 格式文件是OBJ 文件的附属文件，用于存储材料相关信息。每个OBJ 文件都会附带一个MTL 文件，其中包含数据如图3 所示。

图3 MTL 文件解析

2.4 三维模型格式设计

为了更好地实现数据交互，减小浏览器用户端的压力，通过服务器端对OBJ 格式的三维模型文件进行解析重组。根据WebGL 的三维模型格式要求将模型几何属性及材料定义等信息重组，组成新的数据交换格式返回到服务器端，便于人的阅读编写和机器的解析生成。OBJ 格式三维模型文件与新数据交换格式的数据信息映射关系如图4 所示。

图4 OBJ 格式三维模型文件与新数据交换格式映射关系

3 基于WebGL 的分段信息模型可视化

3.1 分段信息模型可视化

在JavaScript 环境下，通过WebGL 技术可以实现分段模型的三维可视化。这主要依靠WebGL 函数库中的顶点着色器和片元着色器来实现。如下图5 所示。

图5 三维模型可视化过程

其中顶点着色器对单个顶点对象进行操作，通过用户定义的属性（如顶点位置坐标、法线向量坐标和纹理坐标）对顶点进行处理；片元着色器的主要功能是对三维模型进行光栅化，生成片元，并对每个片元进行处理；事件响应函数可以异步响应用户在网页上进行的操作；模型的移动、旋转变换主要通过改变视图矩阵实现。

3.2 Web 中OBJ 格式三维模型显示方法

OBJ 格式三维模型文件基于Web 的可视化主要分为以下四个步骤：

（1）在 WebGL 中，通 过 JavaScript 的initVertexBuffers()方法创建空的缓冲区对象，用于存储三维模型的顶点坐标、颜色、法线、纹理和索引等属性。

（2）针对OBJ 格式的三维模型文件进行解析，将其转换为JavaScript 支持的文本格式。

（3）创建XMLHttpRequest 对象，用于与Web 服务器或本地代理服务器进行数据交互。

（4）将三维模型的属性信息写入缓冲区对象中。

4 系统技术实现及运行实例

4.1 系统架构及技术实现

为了使用户能够更好的浏览到船舶分段模型及相关信息，将该系统分为三层：用户层、中间层和基础层。用户层实现人机交互功能，是应用接口模块在用户界面的集成。基础层为开源数据库，存储船舶分段模型和相关数据。中间层是服务器层，处理用户界面传来的请求，根据分析结果连接不同功能模块做出响应。如图6 所示。

图6 船舶分段三维模型可视化系统架构

4.2 运行实例

将符合要求的二维图纸转化为三维模型，并导出为OBJ 格式文件。通过HTML、JS 和WebGL 技术，如图7。在用户端实现模型的三维可视化，并使用模型视图矩阵实现旋转、放大和缩小等操作，如图8。该系统无需插件，在主流浏览器中浏览船舶分段三维模型及相关信息。用户能够通过客户端了解组件的属性、形状和加工信息，提高加工车间的无纸化程度。

图7 船舶分段三维模型可视化系统运行实例

图8 Web 端三维模型的旋转放缩功能演示

5 结语

针对船舶分段制造车间纸质图纸数量多、数据繁杂的问题，综合考虑了三维模型格式的数据结构、兼容性、功能性和数据存储大小等因素，选择了OBJ 格式作为系统基本文件。利用HTML5、Three.js、jQuery 等技术开发基于WebGL 的船舶分段三维模型可视化系统，实现了分段三维模型的可视化。该系统提高了生产加工数据信息的流动速度，减少了数据流失和传输错误的风险，推动了无纸化生产车间的建设，提高了船舶生产企业的精益化水平。