分类：tuo-visual

1 简述

tuo-visual是由北京拓扑拓科技有限公司研发的一款3维CAD模型线上浏览和分析系统。它能将通用的3维CAD格式(.step)批量地转化为我们公司独立研发的TuoVisual数据格式。而TuoVisual格式是我们专门针对网络传输，webgl渲染和3维CAD模型边界描述法的几何特征等情况特别优化的一种数据格式。基于这种数据我们可以在pc浏览器，移动端应用，或者小程序等多种应用环境下为用户提供高性能和多功能的3维CAD模型预览服务或者基于此功能的其他综合应用服务。

下面，我们将分别介绍tuo-visual系统的后端模块和前端模块。

2 后端STEP文件自动解析运算

step是3维工业软件之间比较通用的一种交互格式。它一般可以用在不同3维工业软件之间做数据的传递。但是，step文件本身不能被显卡直接渲染成可视化图形，因为它不像stl, ply,gltf 等直接记录顶点，和顶点分组等可以直接注入显卡设备的信息，而是记录着各种基本3维几何体及其边界和拓扑关联等信息。因此，tuo-visual系统解决的第一个问题就是对step文件做预渲染的问题。它能读取step文件中的几何关系和数据将其转化成顶点，法线和顶点分组等信息，除此以外我们还将3D预览时需要的一些几何特征数据一起打包成2进制数据并结合一些针对网络传输和gpu渲染的优化方案形成了我们专有的数据格式TuoVisual。

2.1 解析信息

前文提到step不能像stl, ply, gltf等格式可以很容易的被显卡设备渲染成图形，但它的优点是能比较全面而且较高精度的存储3D模型的几何体信息。有这些信息，我们就可以作出更多的3D交互应用的功能，例如我们可以允许用户较高精度地分析模型的几何体数据，又或者是把这些信息交给CAE软件做工程动力学模拟仿真等。目前的tuo-visual系统1.0版本除了能将所有几何体的可视化信息传给前端应用外，还能够比较完好的将以下几何体的构造信息传给前端应用。

1. 顶点
2. 线段
3. 圆弧
4. 平面
5. 圆柱面
6. 球面

在后文我们提到的几何体分析工具，正是利用了这些信息，允许用户在预览3D模型的同时，可以对模型的各方面尺寸做精确测量。

2.2 优化方案

当前tuo-visual系统1.0版本针对3维CAD文件的线上预览问题做了4个方面的优化。

1. 渲染数据的保存形式。TuoVisual存储数据结构的设计充分参考了科纳斯组织设计gltf格式，让需要被导入显卡设备的数据以不做任何修改的2进制形式直接“灌入”显存。
2. 对模型渲染部分做恰当的合并运算。单独的一个3维CAD模型通常包含数个面，边和顶点，在做交互操作的时候，我们希望一个模型的颗粒化程度高，让这些几何元素能独立存在。但做渲染的时候就恰恰相反，对于显卡设备，它希望能够尽可能的减少对整体模型的渲染周期所执行的次数。被渲染的模型，颗粒化越高，整体模型渲染一次所执行的渲染周期的越多，从而渲染性能也就会越低。tuo-visual系统很好的权衡了交互和渲染两个方面对整体模型颗粒度要求的矛盾，它能在保证交互操作功能的同时对3维模型做尽可能多的合并操作。
3. 对装配体模型进行体积排序。一般情况下体积越大的模型对人类视觉影响所占的比重越大。对于大型装配体，我们会对所有子零件按照体积大小做一个排序，以便于更好的支持后面对模型实时加载实时渲染的功能。
4. 文件大小的控制。为了更好的支持网络传输的特点，tuo-visual系统会恰当的对模型渲染数据按照一定配置，进行自动分块，分别保存。以此来配合实时加载实时渲染的功能，达到模型还没有加载完，但加载的部分已经先渲染给用户进行应用的目的。

3 前端CAD模型预览模块

前文已经描述了我们结合了几种优化方案将step文件的多种信息做了转化和提取，接下来将要介绍的tuo-visual的前端模块能读取这些数据做3D渲染和交互应用。我们将分别对tuo-visual前端模块的功能和界面做详细说明。

3.1 功能介绍

前端应用的功能分布在2个阶段：加载模型阶段和浏览模型阶段。在加载模型阶段，我们实现的功能主要是针对加载模型时的整体流畅度和模型加载过程的用户交互体验。在浏览模型阶段，我们主要设计的功能是去辅助用户更好的分析和浏览3维零件。

在展开介绍各种功能之前，我们需要先介绍前端应用的3个操作模式：普通浏览模式，移动操作模式和几何体分析模式。

1. 普通浏览模式。这是我们打开应用时首先进入的模式，在此模式下，我们通过3D视图界面可以直接选中一个或者多个独立完整的3D模型，并执行对整个独立模型或分组的操作。
2. 移动操作模式。移动操作模式是通过在普通浏览模式下，选中一个独立的3D对象或分组后，再点击底部工具栏所展开的移动按钮中任意一种移动操作后进入。在移动操作模式下，我们只能对被选中对象做移动操作，并无法再对除了被选中对象外的其他对象做操作。
3. 几何体分析模式。几何体分析模式可以通过普通模式下的几何体分析工具提供的入口进入。在几何体分析模式下，用户不再允许选中独立的3D对象或分组，而是可以选择3D视图中独立的几何特征(点，线和面)。

在后文提到的一些功能或界面操作时，都会提到以上3种操作模式。这里将作为参照供读者参考。

下面我们将对前端应用的功能展开介绍。

3.1.1 分步加载实时渲染

得利与tuo-visual系统后端对CAD文件数据的分块解析和存储，我们可以实现实时加载和渲染的功能。这一点对于大型装配体的cad文件来说尤其重要。设想一下，一个有1000+以上零件的装配体，如果等完全加载后才能让用户浏览模型的话，那这个页面的3D浏览部分每次从打开到看得见东西都需要等很长一段时间。我们所提出的“加载实时渲染”就能解决这个矛盾。在tuo-visual系统打开大型装配体时，大体积的零件将会被优先加载过来，并立刻被渲染到3D视图，用户可以立刻执行各种浏览和分析模型的操作。在有一些情况下，可能用户都不需要等到模型加载完就足够用了。（例如，有时候，一些小螺丝，螺母之类的零件根本不是用户本次打开模型的浏览或分析的目标）

下图演示了分步加载实时渲染一个发动机的过程：

3.1.2 控制加载的运算负荷

尽管TuoVisual文件中的数据在程序运行时能够像gltf一样直接不作任何解释地“灌入”显卡设备，如果用户所打开的模型很大，其加载运算也是十分耗费计算资源的。如果这里不做处理，将很容易导致用户所处页面出现卡顿现象。tuo-visual系统人为的控制了大型模型加载的速度，以此来保证系统所处页面流畅度不受影响，用户可以放心地在模型加载的同时执行分析模型或其他操作。

3.1.3 实时反应模型的加载状态

tuo-visual项目使用了实时加载实时渲染的技术，相配套的，用户有时候需要知道哪一个装配体中哪些子模型已经被加载，哪些子模型还没有加载，更甚至，哪些模型加载失败了。tuo-visual的前端应用提供了很好的响应式界面来实时传递子模型的加载状态。请看如下动图：

上图中左侧树形结构视图，每一条项目的颜色能够标识其所对应零件的加载状态。红色表示未加载，黄色表示正在加载，绿色表示已经加载。当模型加载完毕时，系统会有弹窗提示模型加载完成。如下图所示：

3.1.4 实时监控渲染性能并主动调整应用状态

我们知道人类眼睛普遍能接受的最慢更新画面频率大约是24帧每秒，低于这个速度，人们看到的电影或者画面就能感觉到卡顿了。一般设备上在渲染普通模型时都能做到60帧每秒，但当一个设备渲染资源有限（如手机上），或者在渲染一个比较大的模型时，这个设备渲染模型的帧率就达不到60帧每秒了，有时候甚至低于24帧每秒。为了保证用户能在多种设备状态下都能较好的浏览大型CAD模型，在模型加载过程中，tuo-visual将会实时监控设备的渲染状态，一旦发现渲染状态低于一定预警值时，它将会主动关掉剩下未加载部分模型的可视性，以此来保证渲染画面和交互的流畅度。当然，在此之后，用户也可以手动重新打开被关掉的那些模型的可视性。

3.1.5 3D的对象选中

在普通浏览模式下，很多的操作例如控制可视性，控制视图定位都需要选中一个独立的3D对象。在普通浏览模式下，tuo-visual提供了两个界面来选中3D对象。一个是通过3D视图直接选中对象，一个是通过对象树形结构视图来选中对象。

通过3D视图选择对象的优点是直观，容易理解。而通过树形结构视图来选中对象的优点是可以从结构层面上选择3D对象或者对象分组。这两个视图的都会通过一定ui的效果来表示一个对象被选中的状态。

在3D视图中，tuo-visual的前端应用会用黄色轮廓线来表示一个对象被鼠标hover的状态，并会用绿色外轮廓线来表示一个对象被选中的状态。这些外轮廓能把一个对象被隐藏的轮廓也标识出来，让用户能够更好观察一个对象在整体上所处的空间位置。请看如下动图：

同样我们可以通过树形结构视图来选择对象或分组，树形结构视图与3D视图ui效果也是同步的，请看下图演示：

在移动端的3D视图中做选中操作时，我们通过单指点触屏幕来实现。即在触摸屏上单指点一下屏幕后立刻松开。操作方式如下图所示：

3.1.6 可视性控制

浏览大型装配体时，我们通常需要将一些零件隐藏掉。tuo-visual系统提供了两个方式来控制零件的可视性。第一是通过底部工具栏的形式，第二是通过树形结构视图的控制按钮。在底部工具栏当我们选中过对象时，或者存在被隐藏对象时就会出现一个可视性控制图标，通过此图标展开后的子按钮，即可控制零件的可视性。

下面是通过树形结构视图来操作对象的可视性：

可以看到，通过树形结构视图，我们除了能以一个3D对象为操作单位外，还能以一个分组为操作单位。

3.1.7 视图控制

浏览大型装配体时，定位视图的浏览角度和中心是非常重要的。tuo-visual为此也提供了直观有效的视图控制方案。

第一，可以通过tuo-visual底部工具栏的视图控制图标所展开的按钮来控制3D视图定位中心。如下图所示：

第二，我们还可以通过3D视图右上的小立方体控件来控制视图方向。操作示例如下图所示：

3.1.8 对象移动功能

浏览大型装配体时，为了更好的分析装配体结构，用户时常需要移动一些零件的位置。tuo-visual前端应用允许用户在移动操作模式下可以通过鼠标或者触摸屏做装配体的拆解操作：

触摸屏下操作也十分便利：

3.1.9 操作历史记录回溯功能

tuo-visual的历史记录缓存会记录最多128次可记录的操作，目前可记录操作包括3D对象的移动操作和可视性操作。并提供对这些操作的回溯和返回下一步操作。

3.1.10 几何元素分析功能

tuo-visual除了提供对3D模型的各种浏览工具以外，还提供了高精度的分析工具。我们可以通过这些工具对模型做在线的分析。tuo-visual提供的模型分析是基于CAD文件中几何原型实现的，目前tuo-visual1.0版本的分析功能已经能支持6种几何原型，它们包括：点，直线，圆弧，平面，圆柱面和球面。通过tuo-visual提供的分析功能，我们能分析这些几何体之间和其自身的一些数据。下表列出了当前所支持的所有分析功能

	点	直线	圆弧	平面	圆柱面	球面	其他
点	距离	距离	点到中心距离	距离	点到中轴线距离	点到球心距离	无
直线	距离	距离	直线到中心距离	直线到平行平面的距离	直线到中轴线的距离	直线到球心距离	线段长度
圆弧	点到中心距离	中心到直线距离	中心到中心距离	中心到平面距离	中心到中轴线的距离	中心到球心距离	半径长度
平面	距离	直线到平行平面的距离	中心的距离	平行间平面的距离	平面到中轴线的距离	平面到球心的距离	无
圆柱面	点到中轴线距离	直线到中轴线距离	中心到中轴线距离	平面到平行中轴线的距离	中轴线到中轴线距离	中轴线到球心距离	半径长度
球面	点到球心距离	直线到球心距离	中心到球心的距离	平面到球心的距离	中轴线到球心距离	球心到球心距离	半径长度

当用户通过底部工具栏的几何分析图标进入几何分析模式后，每当用户选中一定数量的几何特征，底部工具栏的几何分析图片就能展开当前可以分析的数据按钮。用户只需要点击相应按钮即可分析相应几何数据。如下图所示：

在上图演示中，我们选中了两个圆柱面，下面的测量图标展开按钮就出现了3个分析按钮：半径长度，圆柱中轴线距离和点到点距离（点到点距离是指一开始点击到的圆柱面上的空间位置），然后我们点了“圆柱中轴线距离”的按钮后成功的测量出了发动机内部两个相临气缸的中心距离。

为了配合几何分析功能，我们还提供了相应的选择过滤工具来帮助用户更好的选择几何单位。如下图所示：

当我们点击几何选择过滤工具上的一个按钮时，该按钮就会变色。当其变为灰色时，其所对应的几何元素就无法被选中。这里的工具栏从上到下所对应的几何元素分别是点，线和面。上图中，对应“线”的按钮为灰色，即表示3D视图中的“线”无法被用户选中。

3.2 界面介绍

tuo-visual的前端应用界面从区块上大致分3个部分，模型树形结构视图，模型3D视图和底部工具栏。如下图所示：

在屏幕较小的设备（如手机），左侧的模型树形结构视图会成为可收缩的样式，如下图所示：

3.2.1 模型树形结构视图

模型的树形结构视图通过有层次的树形结构来表达模型装配体的组成结构。原CAD文件中的模型名称会也在这里表示出来。这些树形结构都是可展开可回收的，如下图所示：

树形结构视图中，每个条目含有两个元素，一个是其所指模型的名称，一个是该模型的可视性。我们可以用鼠标点击可视性控制图标切换该模型的可视性。如下图所示：

上图也演示了我们可以通过树形结构对不同层级分组的模型进行可视性操作。

对于树形结构视图还有一个特征就是，当我们鼠标放在某个条目上时，其父元素也会表示性ui效果提示，这个功能可以帮助我们快速区分模型的分组情况。如下图所示：

3.2.2 模型3D视图

模型的3D视图部分除了显示对模型的3D渲染视图外还提供视角控制操作，3D视角导航工具，和右侧选择控制工具栏。

对于3D视图的视角控制，在移动端（触摸屏操作）和pc端（鼠标操作）分别提供了不同的方案，说明如下：

鼠标操作：

1. 鼠标右键点击后并进行拖拽可以控制浏览模型的角度。
2. 鼠标中键点击后(按下鼠标滚轮)并进行拖拽可以控制浏览模型的聚焦中心点。
3. 滚动鼠标中键(滚动鼠标滚轮)可以控制模型视图的放缩比例。

操作演示如下图所示：

• 

• 

• 

触摸屏操作：

1. 单指触摸滑动手指可以控制浏览模型的角度。
2. 双指触摸并向相同方向滑动双指可以控制浏览模型的聚焦中心点。
3. 双指触摸并向相反方向滑动双手指可视控制模型视图的放缩比例。

操作演示如下图所示：

• 

• 

• 

3D视图中的视图导航工具是我们独立研发的交互引擎tuo-three2的一个插件，它能一方面直观的表达当前浏览模型的角度另一方面用户也能通过它来设定当前视角。请看如下演示动态图片。

• 

• 

当我们的前端应用处于几何体分析模式下时，3D视图的右侧还会出现选择控制工具栏。通过这个选择控制工具栏，我们可以过滤选中3D视图中的几何元素。例如根据用户实际操作需求，我们可以设定只允许选择点，线或者面。

我们通过以下动图来描述此选择过滤操作。

• 

• 

• 

3.2.3 底部工具栏

前端应用的底部工具栏是前端各种主要操作的接入点。它包括可视性工具，视图定位工具，历史操作记录控制工具，移动工具和几何分析工具。

底部工具栏拥有一个自身的按钮容器控制机制，每个按钮只有当它有效的时候才会出现。例如 ，移动，测量等一些专门针对3D零件的操作，在普通预览模式下，其所对应的按钮只会在有3D对象被选中时才会出现。如下图所示：

底部工具栏所有的控制按钮都是可以往上展开的树形拓展结构，采用这种设计主要是为了保持界面的简洁性。下文将分别介绍底部5个工具展开后的形态：

1. 可视性工具。当我们在普通浏览模式下选中某个3D对象时，此工具按钮就会出现在底部工具栏。随后，如果我们让鼠标光标停放在该按钮上或者触摸该按钮，其子操作按钮就会出现在该按钮的正上方。如下图所表示：

注：其中“显示所有已被隐藏对象”的按钮需要存在被隐藏对象时，才会出现。

2. 视图定位工具。此工具无论在什么模式下都会出现在底部工具栏。它能控制整体的视图定位。其子按钮介绍如下图所示：

注：其中“定位到被选中对象视图”按钮需要存在被选中对象时才会出现

3. 历史操作记录控制按钮。此按钮是操作历史记录的接入口，通过此按钮我们能够执行“撤销上一步”操作或者“返回下一步”操作。其子按钮分布情况如下图所示：

注：此按钮和其子按钮只有存在可以追溯的操作历史记录时才会出现

4 移动工具按钮。此按钮是进入“移动操作模式”和对3D对象进行移动操作的接口，通过此按钮我们可以对被选中的单一对象做平移，旋转和放缩变形。其子按钮分布情况如下图所示：

注：“退出移动模式”按钮，只会在进入移动模式后才会出现。

5. 几何分析按钮。此按钮是进入几何分析模式和提供各种几何分析操作的接入口。此按钮会在“普通浏览模式“和“几何分析模式”模式下出现。在“普通浏览模式”下，其子按钮只有一个，即“进入几何分析模式”按钮。如下图所示：

当进入“几何分析模式”后，其子按钮的分布情况如下图所示：

上图所表示的“当前可执行分析操作”的按钮是根据当前用户所选中的几何元素而定的，本系统支持的所有几何分析操作所对应图标如下：

几何分析的子按钮中，还可能出现一个“清除所有标注”的按钮，此按钮在应用中存在标注信息的时候会出现。如下图所示：

4 服务介绍

围绕着tuo-visual我们主要提供两个方面的服务：

1. 为已有软件或者系统增加工业模型的3D预览和分析模块。
2. 我们可以为用户提供包含CAD模型3D预览和分析模块部分的系统。

其实这两个方面的服务都是围绕着“基于云端3维CAD模型的应用”所展开，我们相信未来会有越来越多的工业设计企业，科技研发企业需要一个这样把3维CAD模型放到线上做分析和预览的模块。我们服务过的客户案例中，有设计企业利用我们的模块把3维CAD模型做成自己的线上模型库，以此来更好的服务他们的客户。也有研究院所利用我们的模块做成自己内部的模型预览系统，以此来方便内部研发人员做技术资料的交互和技术资料的传承。

对于工业设计企业或者科技研发企业需要把自己的服务或业务延伸到互联网上，我们的模块都将是他们不二的选择。

tuo-visual项目是专门用于本公司TuoVisual数据装载的前端库，它负责实现TuoVisual数据和算法应用的前端部分。tuo-visual还负责创建一层介于交互和直接用于webgl渲染数据的抽象层。一方面，它能接受用户的各种交互操作，另一方面能导出适用于webgl的最优渲染数据。本项目创立于2020/5/11日。

tuo-visual项目大事件记录：

2020/5/28 项目添加完成helloworld, objectSelect 和elementSelect示例

2020/5/23 项目更名为 tuo-visual。此项目增加TuoMesh, TuoLine, TuoPoint等抽象3D对象层，一方面接受用户的交互操作，一方面最优化webgl的渲染运算。

2020/5/11 项目创立 项目名称为tuo-visual-loader