CN115659445A

CN115659445A - 一种基于Open Cascade的CAD模型在网页轻量化渲染显示的方法

Info

Publication number: CN115659445A
Application number: CN202211342966.4A
Authority: CN
Inventors: 孙亮; 吕远行; 曹聪; 何彦龙; 苏潇迪; 吴星辉
Original assignee: Shenzhen Gongzhiyi Technology Co ltd; Dalian University of Technology
Current assignee: Shenzhen Gongzhiyi Technology Co ltd; Dalian University of Technology
Priority date: 2022-10-31
Filing date: 2022-10-31
Publication date: 2023-01-31

Abstract

本发明提出一种基于Open Cascade的CAD模型在网页轻量化渲染显示的方法，属于三维软件开发平台Open Cascade、三维可视化和CAD模型渲染技术领域。本发明解决了生产制造上某些模型在用Open Cascade进行网格生成和渲染显示后出现问题以及查看复杂CAD模型需要安装复杂软件，占用系统资源较大等现实工程问题。

Description

一种基于Open Cascade的CAD模型在网页轻量化渲染显示的方法

技术领域

本发明属于三维软件开发平台Open Cascade、三维可视化和CAD模型渲染技术领域，具体涉及一种基于Open Cascade和WebGL技术的CAD模型在网页轻量化渲染显示的方法。

背景技术

数字化、网络化和智能化是工业4.0的主要特征，将在机械设计中数字化的CAD模型在网站端上实现展示，可以使产品的方案设计、产品制作与应用都显得更加灵活、方便与有效。传统的基于CAD模式的演示都必须配置大量复杂的CAD软件，而且操作繁琐、成本昂贵。同时随着生产力和生产需求的不断进步，图像构造也变得越来越复杂，传统的二维平面数据图已经无法满足公众的需求，数据三维可视化技术通过构建基于现实的三维数字场景，让数据展现更为直观易用。

Open Cascade是一款为实体建模、数据交换和模型可视化提供服务的软件开发平台，由于其开源特性和强大功能，在诸多领域如车辆、建筑、航空航天等都得到了广泛的应用。三维可视化技术可以提升用户的直观感受、提供精准的数据模型，使用户可以在网页客户端进行产品交互；在模拟仿真技术层面，三维可视化技术能够将仿真效果直观的展现出来，有助于更好地开发产品。三维可视化的处理过程涵盖了大量的图形渲染和交互式控制，需要浏览器插件提供支撑，同时对计算机的配置有一定的要求，依赖CPU的核心渲染速度，在使用过程中会占用大量系统内存。

WebGL是一个开源的跨平台API，它被用于在浏览器中创建实时的交互图形，通过编写WebGL程序即可完成三维动画的制作，免去了插件；同时它运用底层的图形硬件加速功能执行图像渲染，能够逼真的映现3D效果，为展示复杂机械结构提供了保障。

发明内容

本发明针对现有部分模型渲染存在问题和查看CAD模型操作复杂，提出一种基于Open Cascade和WebGL技术的CAD模型在网页渲染显示的方法，解决了生产制造上某些模型在用Open Cascade进行网格生成和渲染显示后出现问题以及查看复杂CAD模型需要安装复杂软件，占用系统资源较大等现实工程问题。

本发明的技术方案为：

一种基于Open Cascade的CAD模型在网页轻量化渲染显示的方法，该方法应用Open Cascade进行模型读取和网格剖分，基于WebGL进行网页显示；具体包括以下步骤：

S1：将复杂CAD模型文件导出为特定格式

采用第三方CAD造型软件将CAD模型导出为STEP或IGES格式。

S2：基于Open Cascade的数据交换模块和建模算法模块，对CAD模型进行读取并实现网格剖分

开源软件开发平台Open Cascade(简称OCC)共有六个模块，其中数据交换模块提供了符合各种CAD格式的接口，如IGES、STEP、STL、VRML等，这些接口允许基于Open Cascade的软件与各种CAD软件进行数据交换，并能够查询和检查输入文件，将其内容转换为CAD模型，并对转换后的数据文件进行检查。

针对步骤S1导出的STEP和IGES文件，Open Cascade提供了特定的方法和函数来实现读取和写入，执行时首先调用Control_Reader功能来加载文件；其次对文件进行一致性检验；接着设置转换参数，包括用户定义精度(precision.val)、形状的最大允许公差(maxprecision.val)、形状单位(cascade.unit)、产品形状的表示类型(step.shape.repr)等；最后执行转换，通过调用Transfer或TransferRoots来检查转换是否正确执行，并获取最终结果——拓扑形状和几何形状。

基于Open Cascade对所得的拓扑和几何形状进行网格剖分，在剖分时，首先遍历模型的所有表面，对于每个表面，遍历其所有的线，对于每条线遍历其全部的边；再根据边和面得到所需的参数空间曲线。接着对参数空间曲线所围成的参数区域进行三角剖分，通过设置线性偏差和角度偏差的大小来控制三角网格化的精度，将剖分结果通过曲面方程映射到三维空间，最终生成每个面的网格剖分，得到网格数据。

基于云端的显示需要较少的网格数量，因此为了实现模型网格的轻量化和流畅的网页显示需要减少网格数量，本发明在Open Cascade默认剖分算法BRepMesh_IncrementalMesh的基础上进行了改进，具体剖分过程如下：

首先，采用默认剖分算法遍历模型的拓扑和几何形状得到参数空间曲线；

其次，在对参数空间曲线所围成区域进行网格剖分时，增加内部节点控制，具体实现为：

1)创建一个Mesher，并为Mesher指定要划分网格的区域；

2)创建网格生成控制参数，网格生成控制参数中包括总体的线性偏差和角度偏差(即默认剖分算法的线性偏差和角度偏差)、所增加的内部节点的线性偏差和角度偏差以及考虑模型尺寸、使用并行计算同时控制曲面偏差；其中，内部节点的角度偏差相对简单，使用默认值(12～20度)；为了减少网格数量，内部节点的线性偏差应大于总体线性偏差，设置过小网格数量减少不明显，设置过大网格质量会变差，通过大量实验得到内部节点的线性偏差设置为总体线性偏差的10～20倍时效果较好，网格数量大量减少的同时不影响渲染质量；

3)将设置好的网格生成控制参数传给Mesher；

4)根据Mesher创建网格生成环境并进行网格剖分。

S3：编写网格数据转换接口，搭建Open Cascade与WebGL间的桥梁

编写转换程序，将Open Cascade得到的网格数据转换成方便计算机解析和生成的JSON格式的文件，再将其传到WebGL中进行渲染显示。编写转换程序的过程如下：首先添加第三方依赖库Boost库和rapidjson库；其次在程序中创建一个用来存储数据的树结构，并为树结构中的各个结点添加标签(Lable)和属性(Attribute)，标签便于查看双亲，属性用于存放信息；接着调用Boost库中的IOStream的流处理框架对步骤S2得到的Open Cascade网格数据进行解析，首先遍历模型的Compound，其次遍历Solid，接着是Shell，层层递进下去，直到遍历完所有的Vertex，将得到的点、线、面、面的法向量以及拓扑和几何信息通过Open Cascade的TDF_Label::Add函数存放到树结构中；最后通过调用rapidjson库中的Writer函数，得到JSON格式的文件，完成网格数据的转换。

S4：搭建CAD模型网页显示环境

S4.1：采用开源WebGL下的Three.js框架，对场景、光照、相机、渲染器等进行设置：通过THREE.Scene来创建场景；光照采用渲染效果更加真实的平行光线；相机设置为贴近现实的透视投影相机；渲染器采用WebGL渲染器。为方便观察和区分零件，对装配体下的不同零件设置不同的颜色。

S4.2：编写网页显示程序

(1)创建一个空白的html网页，使用UTF-8字符编码，导入Three.js框架，同时引入Vue.js和Vite.js来优化网页；

(2)编写JS语句，调用步骤S4.1中设置的场景、光照、相机、渲染器并添加交互，如鼠标左键旋转、右键移动等；采用ParseBuffer函数来编写JSON数据解析的程序，将JSON字符串解析成CJSON结构体，从中提取信息，包括名字、材质、颜色、点、线、面等，用以实现最终的网页显示；

(3)编写HTML语句来设计网页内容，为网页添加文字如上方居中显示项目标题、左侧显示几何体数和网格数、中心用以显示的画布、以及左侧一些实现特定功能的按钮如显示/隐藏线框、显示/隐藏着色、不同角度查看模型显示结果以及拍照功能等，同时设置好字体、大小和颜色等，使其比较美观。

S5：检查CAD模型网页显示效果

检查模型显示是否完整以及功能是否正常，并对模型各个角度进行拍照，使用MobileNet深度神经网络提取图像特征，与改进之前网格密度较大的图像结果进行相似性比较，验证本发明是否保证了渲染质量，并完成整个网页显示过程。

本发明的有益效果为：

1、本发明无需安装复杂的造型软件及网页插件即可实现复杂CAD模型渲染显示。通过云端显示，设计者可以做到多终端和云端的协同设计，制造者可以在工厂车间查看设计模型并进行生产制造，用户可以随时随地地在移动端浏览产品，了解产品相关的信息，提高了人们的工作效率；

2、本发明只需通过使用兼容的浏览器即可查看复杂CAD模型，相比于传统方法占用的系统资源大大减少，加载、显示速度大幅度提升，同时降低了能耗，更加省电，提高电池供电的电子产品的使用时间，并在一定程度上能够提高设备可靠性，做到节能减排、绿色环保；

3、本发明在Open Cascade源程序基础上进行改进优化，通过基于bounding box的动态检测和设置内部节点控制的方式，解决部分模型渲染出错的问题，在保证了渲染质量的前提下减少了网格数量，同时为用户提供更多可设置的参数，用户可根据需求生成不同精度的网格。

附图说明

图1为“相机”模型在SolidWorks中的显示结果。

图2为“相机”模型经Open Cascade网格生成后的渲染结果。

图3为“Hub”模型在SolidWorks中的显示结果。

图4为“Hub”模型经Open Cascade网格生成后的渲染结果。

图5为优化算法下“相机”模型的渲染结果。

图6为启动Web服务及网页显示网址。

图7为“Hub”模型的网页显示界面图。

图8为“相机”模型的网页显示界面图。

图9为“Hub”模型的线框显示图。

图10为“相机”模型的线框显示图。

图11为“相机”模型用于相似度比较的不同角度显示图。

具体实施方式

为使本发明的目的、内容和优点有更进一步的了解与认识，下面结合实施例与附图，对本发明的具体实施方式作进一步详细说明。

本实施例对手柄按压工具模型进行了网页显示，该显示方法在大幅减少模型网格单元数量的同时能够保证模型的渲染质量，减少系统资源的占用，免去了安装复杂软件及插件，该显示方法具体包括如下步骤；

S1：建立三维模型

采用第三方CAD造型软件，创建名称分别为“相机”和“Hub”的模型，以上两个模型在经Open Cascade网格划分后的渲染结果会出现问题：相机模型会出现“破面”现象，如图1、2所示；Hub模型在中间多生成了一个圆面，如图3、4所示。

S2：导出模型文件

采用第三方CAD造型软件将模型导出为STEP和IGES格式文件。

S3：基于Open Cascade进行模型读取和网格剖分

基于Open Cascade数据交换模块的STEP和IGES接口，调用STEPControl_Reader和IGESControl_Reader函数，对手柄按压工具的STEP和IGES格式进行读取并转换，转换参数采用Open Cascade默认参数，从而得到“相机”和“Hub”的拓扑和几何模型。

对所得的模型数据，在使用源程序基础上增加基于bounding box动态检测和设置内部节点的优化算法，通过大量实验得出初始值的合理范围，本例中将线性偏差初始值设置为0.01，角度偏差初始值设置为π/12，内部节点的线性偏差系数设置为10，角度偏差系数设置为2，同时考虑模型尺寸并控制曲面偏差，进行剖分得到模型的网格数据。

使用改进后算法进行网格剖分和渲染显示，“相机”模型的“破面”现象得到解决，模型完整无缺，如图5所示；“Hub”模型多出的圆面也消失了，如果6所示。

S4：基于WebGL实现网页显示

首先将Open Cascade得到的网格数据传入转换程序中，读取网格数据后将得到JSON格式的文件；其次调用搭建好的CAD模型网页渲染显示环境，解析JSON字符串，使用Three.js组件，接着导航到安装文件夹并从中启动Web服务器；接着打开兼容的Web浏览器并输入http://localhost:3000/路径获取所创建的网页，选择文件打开，实现模型在网页的渲染显示。“Hub”模型和“相机”模型的显示结果分别如图7和图8所示。单机左侧的显示线框按钮得到线框显示结果，如图9和图10所示，单机其他视图按钮得到不同角度的视图。

S5：检查模型网页显示结果

观察模型是否正常显示，同时检查功能是否正常，如鼠标左键控制模型旋转、右键拖动模型移动、滚轮用来放大和缩小，完成模型在网页的渲染显示。

本发明方法剖分后得到的“相机”模型的网格数量为181780，与修改前算法得到的401060相比大幅度减少了网格数量，同时分别使用修改前的算法和本发明方法进行网页渲染显示，通过拍照功能截取模型各个角度的图像后使用深度神经网络进行图像相似度比较，如图11所示，通过比较得出二者渲染效果的相似度超过99.9％，认为渲染质量没有差别，验证了本发明实现了网格的轻量化。

以上实施例描述了本发明的基本原理、主要特征和本发明的优点。本行业的技术人员应该了解，本发明不受上述实施例的限制，在不脱离本发明技术原理的前提下，本发明还可以做出若干变形和改进，这些变形与改进都落入本发明的保护范围内。

Claims

1.一种基于Open Cascade的CAD模型在网页轻量化渲染显示的方法，其特征在于，该方法包括以下步骤：

S1：将复杂CAD模型文件导出为特定格式

采用第三方CAD造型软件将CAD模型导出为STEP或IGES格式；

S2：基于Open Cascade的数据交换模块和建模算法模块，进行CAD模型读取和网格剖分

S2.1：模型读取

针对步骤S1导出的STEP和IGES文件，Open Cascade先调用Control_Reader功能来加载文件；其次对文件进行一致性检验；接着设置转换参数；最后执行转换，通过调用Transfer或TransferRoots来检查转换是否正确执行，并获取最终的拓扑形状和几何形状；

S2.2：网格剖分

首先，遍历模型的拓扑和几何形状得到参数空间曲线；

其次，在对参数空间曲线所围成区域进行网格剖分时，增加内部节点控制；

S3：编写网格数据转换接口，搭建Open Cascade与WebGL间的桥梁

编写转换程序，将Open Cascade得到的网格数据转换成方便计算机解析和生成的JSON格式的文件，再将其传到WebGL中进行渲染显示；

S4：搭建CAD模型网页显示环境

S5：检查CAD模型网页显示效果

检查模型显示是否完整以及功能是否正常，并对模型各个角度进行拍照，使用MobileNet深度神经网络提取图像特征，与改进之前网格密度较大的图像结果进行相似性比较，验证是否保证了渲染质量，并完成整个网页显示过程。

2.根据权利要求1所述的方法，其特征在于，所述步骤S2.2的增加内部节点控制过程，具体实现为：

1)创建一个Mesher，并为Mesher指定要划分网格的区域；

2)创建网格生成控制参数，网格生成控制参数中包括总体的线性偏差和角度偏差、所增加的内部节点的线性偏差和角度偏差以及考虑模型尺寸、使用并行计算同时控制曲面偏差；

3)将设置好的网格生成控制参数传给Mesher；

4)根据Mesher创建网格生成环境并进行网格剖分。

3.根据权利要求2所述的方法，其特征在于，所述步骤S2.2中，内部节点的角度偏差使用默认值；内部节点的线性偏差设置为总体线性偏差的10～20倍。

4.根据权利要求1、2或3所述的方法，其特征在于，所述步骤S3中，编写转换程序的过程如下：首先添加第三方依赖库Boost库和rapidjson库；其次在程序中创建一个用来存储数据的树结构，并为树结构中的各个结点添加标签和属性，标签便于查看双亲，属性用于存放信息；接着调用Boost库中的IOStream的流处理框架对步骤S2得到的Open Cascade网格数据进行解析，首先遍历模型的Compound，其次遍历Solid，接着是Shell，层层递进下去，直到遍历完所有的Vertex，将得到的点、线、面、面的法向量以及拓扑和几何信息通过OpenCascade的TDF_Label::Add函数存放到树结构中；最后通过调用rapidjson库中的Writer函数，得到JSON格式的文件，完成网格数据的转换。

5.根据权利要求1、2或3所述的方法，其特征在于，所述步骤S4具体如下：

S4.1：采用开源WebGL下的Three.js框架，对场景、光照、相机、渲染器进行设置：通过THREE.Scene来创建场景；光照采用平行光线；相机设置为透视投影相机；渲染器采用WebGL渲染器；

S4.2：编写网页显示程序

(2)编写JS语句，调用步骤S4.1中设置的场景、光照、相机、渲染器并添加交互；采用ParseBuffer函数来编写JSON数据解析的程序，将JSON字符串解析成CJSON结构体，从中提取信息，用以实现最终的网页显示；

(3)编写HTML语句来设计网页内容，为网页添加文字。

6.根据权利要求4所述的方法，其特征在于，所述步骤S4具体如下：

S4.2：编写网页显示程序

(3)编写HTML语句来设计网页内容，为网页添加文字。

7.根据权利要求1、2、3或6所述的方法，其特征在于，所述步骤S2.1中，所述转换参数包括用户定义精度precision.val、形状的最大允许公差maxprecision.val、形状单位cascade.unit和产品形状的表示类型step.shape.repr。