三维标注在Web环境下的显示浏览方法研究

汪 耀，盛步云

（武汉理工大学机电工程学院，湖北 武汉 430070）

1 引言

目前，随着经济全球化的发展，机械制造业面临的是一个协同设计与分布式制造的时代。传统的CAD软件正在面临挑战，发展三维浏览摆脱大型软件安装，实现CAD模型的显示Web化是一种时代趋势[1]。

现代互联网的发展十分迅猛，网络传输速度节节攀升以及近年的5G技术革新，则都为传统的三维CAD软件走出PC束缚实现Web三维创造了条件。近年来，三维产品模型开始利用Web3D技术来实现Web浏览，以实现设计人员的协同合作以及非设计人员的交流沟通、模型共享等功能。目前，当在Web环境下显示三维CAD模型时，其相应的产品制造信息（如尺寸、表面粗糙度、形位公差等标注信息）便会丢失，这与信息化社会对制造业产品设计提出的基于信息共享的可视化、集成化、协同化的发展要求不相符合[2]。

为了解决三维产品模型在Web环境的显示时三维标注信息丢失的问题，提出三维标注在Web环境下的显示浏览方法。选择以UG平台下的三维标注为例，通过使用WebGL技术实现三维标注在web环境下的信息重构和实时显示。经实例验证，该三维标注的信息重构与实时显示方法实现了三维标注在web环境下的显示，并能在模型位姿变化等情形时使三维标注信息得到正确的实时显示控制。

2 三维标注在Web环境下的显示浏览系统的总体结构设计

为了在Web环境中实现三维标注的显示浏览系统，首先分析系统需求，并设计得出解决方案，Web环境下的三维标注显示浏览系统的整体架构框架，如图1所示。

图1 系统整体结构设计Fig.1 Overall Structure Design of the System

如图1，在对UG平台下的MBD模型的三维标注信息进行深入的分析研究后，通过UG/Open工具，提取模型的三维标注信息，在服务器端进行Web环境下的三维标注显示浏览系统的开发。根据所提出的系统设计思路，实现Web环境中三维标注的显示浏览，主要分为三个部分进行研究。

2.1 模型的三维标注信息提取

UG软件的三维标注是通过PMI模块实现的，标注信息封装在MBD模型对象的标注信息集中，传统三维模型通过Web3D技术进行显示时会丢失MBD模型的标注信息，更不可能实现三维标注信息在Web环境下的图形渲染，综合分析后决定采用UG提供的UG/Open工具对模型的三维标注信息进行提取，并在提取完成后将所有三维标注对象封装为JSON文件，便于前端浏览器的信息传递和解析。

2.2 三维标注在Web环境的信息重构

结合HTML5和JavaScript语言，加载传输三维标注对象数据，以便浏览器可以读取服务器上的标注信息JSON文件，调用Web绘图标准，以Three.js作为3D引擎，在HTML5的Canvas上实现三维标注的静态信息重构。

2.3 三维标注在Web环境的实时显示

三维标注在Web环境下的显示位置和显示姿态（包括标注平面法向量方向、文字书写方向等）应随着三维模型位姿的变化而变化。为了实现三维标注的动态准确显示，研究了三维场景对象的每个渲染循环中三维标注的动态准确显示方法，通过计算每一个渲染循环中，三维模型姿态变化对应的三维标注的实时变换矩阵来确保三维标注的实时显示控制。

3 三维标注在Web环境下的信息重构与实时显示方法

3.1 三维标注信息提取

UG软件的三维标注功能，可以实现在三维空间中将产品制造信息（即，诸如产品尺寸、表面粗糙度、形位公差等三维标注信息）直接标注在三维CAD模型上。三维标注一般分为五种类型的标注：尺寸标注、基准标注、几何公差标注、粗糙度标注和技术要求注释。

不同类型的三维标注信息形成CAD模型的标注信息集合，如图2所示。每种类型的一个三维标注集合都可以抽象成由一个三维标注对象与相关标注平面对象组成，其中三维标注对象代表的是标注信息的组成元素，标注平面对象代表的是标注信息的位置信息。UG软件的模型三维标注信息提取流程可分为3大步骤：获取各类型三维标注信息集合；遍历标注信息集合，提取标注信息元素并封装成标注对象；进一步封装标注对象集合为JSON格式文件，如图3所示。

图2 三维标注信息集合Fig.2 3D Annotation Information Collection

图3 三维标注信息提取流程Fig.3 3D Annotation Information Extraction Process

（1）应用程序初始化，输入带用三维标注信息的MBD模型文件，通过UG/Open提供的相关API获取各类型三维标注信息集合。

（2）针对在Web环境下对三维标注进行信息重构时所需要的标注元素，提取各标注信息集合内的指定信息，并将每个三维标注封装成独立的对象。

（3）对所获取的标注对象进一步封装，得到便于web传输的JSON格式文件。

3.2 三维标注在Web环境下的信息重构方法

作为一种3D绘图标准，WebGL将JavaScript和OpenGL ES2.0结合在一起，可以为HTML5 Canvas提供硬件3D加速渲染，能在网页上创建复杂的3D场景、模型[3]。

Three.js是通过对底层WebGL图形接口进行封装，形成的一个优秀的第三方库，完全支持三维标注在web环境下的图形文字及线条样式的绘制。它支持外部各种字体及文字的导入，提供三维数据渲染的虚拟平台。采用WebGL技术，以Three.js作为3D引擎从而实现三维标注在Web环境下的信息重构，以直线尺寸标注为例，其在Web环境下的信息重构算法流程图，如图4所示。

图4 Web环境的三维标注信息重构算法流程图Fig.4 Flow Chart of 3D Annotation Information Reconstruction Algorithm in Web Environment

首先，根据标注信息JSON文件，读取当前标注样式（即，诸如尺寸线长度、粗细；箭头大小、形状；文字字体、大小等信息）以及标注平面对象（平面法向量norV、文字书写位置d′、文字书写方向向量writeV）等尺寸标注对象信息。然后根据尺寸标注样式进行三维尺寸标注的绘制，绘制完成后，再根据标注平面对象信息计算出三维尺寸标注的初始显示矩阵M。最后根据尺寸初始显示矩阵M，在三维场景中渲染出尺寸标注对象。此时，尺寸标注对象的位置、姿态是由原始标注平面对象确定的，并不会随着模型位姿的改变而改变。

算法实现具体步骤如下：

Step1：确定文字书写坐标系；

Step1.1：读取JSON文件，获取标注平面法向量norV（c1，c2，c3）和文字书写方向向量writeV（ɑ1，ɑ2，ɑ3）并且单位化

Step1.2：根据右手定则，计算书写坐标系第三个分量（b1，b2，b3）=（c1，c2，c3）×（ɑ1，ɑ2，ɑ3）

Step1.3：单位化向量（b1，b2，b3）

Step2：计算文字偏移量（dx，dy，dz）；

Step2.2：计算文字偏移量（dx，dy，dz）=-（d1，d2，d3）

Step3：得到文字变换矩阵M

Step4：计算标注文字在三维空间的显示位置

norV代表标注平面法向量，writeV代表文字书写方向向量，d（d1，d2，d3）代表文字创建时文字书写位置代表文字实际书写时文字位置，如图5所示。

图5 文字书写示意图Fig.5 Text Writing Diagram

3.3 三维标注在Web环境下的实时显示方法

在操作者与三维场景的交互过程中，三维标注的位置、姿态并不是一成不变的，根据JSON文件读取的标注平面对象只能确定当前三维标注对象在当前相机视角下的位置及姿态。而在每一个渲染循环中，由于三维CAD模型在平移、旋转时位置姿的改变，三维标注的实时显示矩阵需要重新计算。

为了解决实际情形中三维标注需要随着CAD模型位姿变化而旋转、颠倒等问题，主要对以下3个因素进行了考虑：三维标注的实时正确位置、标注文字的正反面以及标注文字的正确书写顺序，最终决定采用通过计算每个渲染循环中三维标注的实时变换矩阵的方法来实现三维标注位姿的动态改变。

以直线尺寸标注为例，由上述三维标注的初始显示矩阵M可知尺寸标注的初始位置、标注平面法向量和文字书写方向。所以，三维标注在web环境下的实时显示需要考虑的问题主要为两点：（1）CAD模型位姿改变时标注平面法向量的变化；（2）CAD模型位姿改变时文字书写方向的变化。三维标注的实时显示算法流程，如图6所示。

图6 Web环境的三维标注实时显示算法流程图Fig.6 Flow Chart of 3D Annotation Real-Time Display Algorithm in Web Environment

算法实现具体步骤如下：

Step1：标注点在屏幕上左右判断；

Step1.1：标注的起点与终点的对应屏幕位置转化，T1为转化矩阵

Step1.2：判断标注点在屏幕上的左右

Step1.3：得到文字变换矩阵M1

Step2：标注平面是否需要反向判断；

Step2.1：计算当前渲染循环中标注平面法向量norV与相机向量camV的夹角Angle（0～180°）

Step2.2：保证标注平面处于视角正向

Step2.3：得到文字变换矩阵M2

Step3：得到文字实时变换矩阵M

Step4：计算标注文字在三维空间的实时显示位置InPt′

模型旋转过程中，标注文字书写顺序反向示意图，如图7所示。

图7 文字书写方向反向Fig.7 Reverse Writing Direction

模型旋转过程中，标注平面法向量与相机向量的夹角关系示意图，如图8所示。

图8 标注平面法向量与相机向量夹角关系Fig.8 The Relationship Between the Plane Normal Vector and the Camera Vector

以上算法通过三维标注的实时变换矩阵保证了三维标注的正确显示。在不同的渲染循环中，当CAD模型位姿发生改变时，世界坐标与对应投影的设备屏幕坐标发生改变，相机向量发生改变，更新三维标注信息集合中的每一个三维标注的位置信息（即实时变化矩阵），即可实现三维标注的动态显示控制。

4 应用实例

为了验证所提的三维标注在Web环境下的信息重构与实时显示方法的有效性。基于WebGL技术，选择Three.js作为3D引擎，搭建一个基于Web的三维标注显示浏览系统，并导入基于UG的带标注信息的三维模型，运行实例以测试算法的有效性。原始模型，如图9所示。

图9 实验原模型Fig.9 Experimental Original Model

使用所提三维标注信息重构方法的三维模型标注信息在Web环境下的显示效果图，经多次实验证明该方法能很好在Web环境下实现出三维标注的初始姿态显示，如图10所示。另外，为验证模型翻转、旋转时标注信息的实时动态显示的准确性。在Web虚拟三维场景中对三维模型进行旋转等交互操作，使用所提方法的三维标注实时显示效果图，如图11所示。

图10 Web环境的三维标注信息重构Fig.10 3D Annotation Information Reconstruction in Web Environment

图11 模型旋转过程中三维标注实时显示Fig.11 Real-Time Display of 3D Annotation During Model Rotation

从左到右分别为，在侧面视角下模型位姿不断变换时，三维标注在Web环境中的显示效果图，经过多次改变模型位姿，证明所提方法能够很好的实现三维标注在Web环境中的动态正确显示。

5 结论

从系统整体结构设计出发，结合应用实验，可知Web环境下的三维标注显示浏览系统设计满足预期结果，解决了CAD模型在浏览器端进行显示时，三维标注信息丢失的问题，保证了设计人员协同合作过程中，对CAD模型信息的直观获取。

具体体现在：

（1）与传统CAD模型Web显示技术相比，系统使用WebGL技术实现，直接使用底层的图形硬件进行图形渲染，避免了浏览器端插件的安装。

（2）通过Web端的标注信息重构与实时显示方法，实现了Web环境下的三维标注完整显示，完全解决以前存在的三维标注丢失问题，便于设计人员实时浏览。