基于WebGL技术的三维自动化可视系统设计

周 萌

（四川宜宾学院，宜宾 644000）

0 引言

在三维可视化研究中，可视化技术逐渐从静态的可视化转变为动态的可视化，为各行各业的人员提供了更好的用户体验[1]。目前研究的三维可视系统具有非常高的艺术性和震撼力，能够处理的数据类型非常多，生成的三维图形精细度也非常高，在很多领域中得到了充分应用。但是，由于可视化系统的使用者知识背景差异比较大，系统专业性太强，很多时候不利于用户操作，对于三维可视系统还需要更进一步[2]。

现阶段，技术人员和学术专家对三维可视系统的研究更多的是考虑数据时代大数据的特征，加深三维可视系统的研究深度，逐渐研发了上手简单、操作难度小的系统[3]。现行有很多成熟的三维可视系统应用在各个领域中，常见的三维可视系统注重技术实现和算法优化，注重大数据技术的结合，从单一的数据逐渐转向了多维数据，实现数据的三维可视化[4]。但是，在实际操作中，三维可视化的处理涉及到图像渲染和大量交互操作，需要浏览器插件作为支持，在渲染时仅通过软件部分支撑，系统整体的鲁棒性需要进一步提高[5]。因此，提出基于WebGL技术的三维自动化可视系统，利用WebGL技术的特点解决上述常见的三维可视系统中存在的问题。

1 基于WebGL技术的三维自动化可视系统硬件设计

在系统硬件设计中，以原有的系统结构作为基础，将WebGL应用到系统硬件结构中，从系统硬件上优化系统的运算速度。原有的系统结构如图1所示。

图1 系统总体结构示意图

将WebGL应用到构建层中，形成的技术架构如图2所示。

图2 优化后的系统技术架构图

在WebGL的支持下，使用可进化FDP-2SoPC芯片作为加速芯片，将其与系统内的FPGA配置控制器连接在一起，实现加速芯片对FPGA IP核位流配置，由FIFO接口和共享接口ROM组成两者之间的数据接口，同时在模块中加入了使能寄存器，降低系统硬件功耗。

上述FPGA配置控制器是为系统核心控制器控制FPGA和加速芯片的专用接口，核心控制器采用嵌入式结构，通过外部的激励实现内部的配置和控制。核心控制器与FPGA之间数据传输命令字示意图如图3所示。

图3 核心控制器和FPGA数据传输命令示意图

从图中可以看出，读命令字分为三个步骤实现，写命令字分为两个步骤实现，通过读命令字采集数据，通过写命令字传输数据，上述操作均在WebGL的支持下实现，从系统底层的硬件设计上实现数据的加速处理。

2 基于WebGL技术的三维自动化可视系统软件设计

2.1 三维模型处理引擎设计

三维模型处理中针对不同的功能需要不同的引擎作为支撑，在设计中，对于几何处理引擎的设计，如图4所示。

图4 几何处理引擎内部结构示意图

在用户与三维可视系统交互时，几何处理引擎在读取到用户的操作后，就会将参数保存到局部寄存器中，在处理完成后，经过全局寄存器堆向用户提供几何数据读取服务，从而完整三维模型几何的渲染和设计。

在三维模型的光照和颜色引擎设计上，计算三维模型在环境下的环境光、反射光、顶点颜色等参数。计算公式如下：

式(1)是环境光计算公式，其中Ma和La分别表示环境光属性和分量；式(2)是散射光计算公式，其中Md和Ld分别表示模型材质的散射光分量和光源的散射光分量，L和N分别表示光源向量和法向量，max{L·N，0}表示L和N之间的夹角；式(3)是三维模型镜面反射光的计算公式，其中max{S·N，0}表示观察向量与法线的夹角，右上角标记的S表示材质的镜面指数，反映三维模型表面的光滑程度，S表示模型的观察向量与光源方向向量的归一化结果，Ls表示光源镜面反射分量，Ge表示材质的发射光RGB值，Ms表示光源镜面的法向量，color表示最终的顶点颜色，是多个光源的累加结果。在计算过程中，如果，max{L·N，0}夹角大于90°，三维模型的顶点颜色没有变化，无法观测到正确的三维模型，因此在计算时使用0代替。当max{S·N，0}等于入射角时，取最大值，接收完整的入射光。

在三维视图送入到光栅化引擎前，需要将视图顶点坐标转换为设备坐标，这就需要用到投影引擎，由于模型变换和观察变换之间存在等效性，在投影引擎设计中，假设投影棱台中的点为Q（x，y，z），经过投影，在观察平面上的点为P（xp，yp，zp），计算可得：

得到的透视投影矩阵为：

公式中sz表示规范化中的比例因子，tz表示平移因子。利用观察目标体内的任意一点以及原点距近平面和远平面的距离，求解比例因子和平移因子，再将得到的结果代回到变换矩阵中，即可完成三维投影，得到模型视图矩阵。

由上述的光源参数和投影参数确定三维模型的表现形式，在确定三维模型后，通过WebGL技术设计的可视化功能展示在用户面前。

2.2 基于WebGL技术的可视化功能设计

使用WebGL技术创建可视化界面，在界面的左侧为用户权限下所有可视图按照一定顺序排列，以无限滚动的方式呈现在用户面前，通过HTML5的drop功能实现拖拽操作，将目标图像加入到可视化界面中。系统交互中，在拖拽开始时，使用ondragstart选中元素，当目标视图被拖动到目标位置时，执行ondragenter，当需要移除目标元素时，使用ondragleave执行指针操作，在拖拽结束后，执行ondragend。在可视化过程中，用户观察到的视图就是对各个事件的监测结果，通过dragstart事件的监测，可保证用户在操作视图元素时，原始视图内容不变，只改变目标元素属性；通过对leave事件的监测，在监听到拖拽目标离开目标区域后，可将可视化视图删除。

在构建可视化交互屏过程中，单击交互屏中的目标视图，在交互屏的左侧会显示出三维模型的样式配置和数据配置，利用样式配置改变视图元素的属性，通过数据配置可以对系统内的数据进行实时更新，从未达到实时更新三维视图的目的。具体的实现策略有两种，一种是直接修改和编辑原始的视图属性和数据，另一种是通过装饰者模式修改和编辑原始视图，在同时操作多个可视化交互屏时，实现对同一个视图元素复用的同时，不会改变视图内容，提高了自身的可操作性。至此，基于WebGL技术的三维自动化可视系统设计完成。

3 基于WebGL技术的三维自动化可视系统的测试与分析

3.1 多源数据连接功能测试

在三维自动化可视系统性能测试中，为了尽可能覆盖系统的全部功能，针对系统内的多个模块机进行数据连接测试，从系统的各个模块数据连接情况验证系统的扩展性，分析系统数据对接功能是否正常。具体的测试内容包括数据源连接、静态文件上传测试和实时数据表操作功能测试。

多源数据连接功能测试主要测试内容是数据源的增删改查四种操作；实时数据表的配置功能通过SQL语句实现，验证实时数据能够正常增加和删除，以及对数据的实时操作是否成功；在系统设计中，三维可视系统支持多源静态文件上传，在测试中，选择比较常见的txt、Excel文件作为测试文件，用于多源数据连接测试。具体测试内容与测试结果如表1所示

表1 多种数据源连接功能测试

通过表中的测试结果可以看出，设计的三维自动化可视系统多源数据连接功能测试结果均满足预期，系统可正常使用。

3.2 系统鲁棒性测试

在功能测试完成后，针对系统的应用性能展开研究与分析，从系统的鲁棒性出发，引入两种常见的三维可视系统，通过占用内存测试和实时大屏响应性能测试，验证系统的鲁棒性。

三维自动化可视系统在应用时，用户可能对多个可视化大屏进行编辑工作，随着系统运行时间的增加，浏览器内存也会不断增加，系统的响应时间将会随着内存的增加而减小，严重影响系统的运行效率。在测试中，运行三维可视系统，打开多个可视系统交互屏，在保持前一个交互屏处于播放状态的同时，打开后一个交互屏，在此过程中，观察随着可视化交互屏数目的增加，系统浏览器内存产生的变化。测试中使用的系统分别是基于3Dmine的可视系统和基于三维激光扫描的可视系统，各个可视系统的占用内存测试结果如图5所示。

图5 不同可视系统占用内存测试结果

观察图中结果可知，提出的可视系统在可视化大屏达到一定数量后，浏览器内存消耗基本持平，这是因为可视系统在设计中，融入了加速芯片，同时调用dispose()函数，清除了多余的可视化视图Dom元素，释放大量内存，达到了减少浏览器内存的目的。由此可见，提出的三维可视系统在应用中，减小了对浏览器内存的消耗，保证了系统在多个可视化交互屏操作时运行的稳定性。

在系统的实时大屏中，实时数据的改变会引起实时数据表的变化，用户在操作系统时数据更新间隔较长并且更新间隔时间不固定，在数据更新频繁的情况下，会严重损坏系统运行寿命。针对这一特性，测试时，使用计算机模拟系统实时数据频繁更新行为，观察系统在发送更新次数不断增加的情况下，可视系统实时更新响应时间的变化。设定的条件为1s内发送1000次数据更新请求，测试结果如图6所示。

图6 不同可视系统的可视化视图更新响应时间测试结果

由图中结果可以看出，随着测试时间的增加，基于3Dmine的三维可视系统和基于三维激光扫描的可视系统响应时间显著增加，同时系统内存消耗也有明显增加；提出的可视系统并没有出现响应时间增加明显的情况，这是因为在系统设计中增加了节流设计，在系统工作前，提前设定了一个周期阈值，与系统执行操作时刻相比，如果执行操作时刻大，则执行命令，限制系统流量，达到节流的目的。将上述两组实验结果结合在一起分析可知，设计的基于WebGL技术的三维自动化可视系统占用内存小，可视化视图响应时间短，整体鲁棒性优于常规的三维可视系统。

4 结语

信息可视化是目前社会发展必不可少的部分，随着用户需求的不断提高，对三维可视化系统提出了更高的要求。本文以三维自动化可视系统作为研究重点，借鉴大量研究文献和资料，将WebGL技术应用到可视系统设计中，在基于WebGL技术的三维可视系统设计完成后，以系统的鲁棒性作为研究指标，在多组实验数据的支持下，对比分析了不同三维可视系统的鲁棒性，证明了设计的基于WebGL技术的可视系统在实际应用中鲁棒性更好。虽然本文设计的可视系统取得了明显的进展，但是随着技术的更新迭代和用户需求的改变，三维可视系统仍然有进步和优化的空间，在后续研究中，将通过多方面优化可视系统的性能，提高系统的应用水平。