基于Web 的大规模三维空间模型高效可视化关键技术

刘 刚，陈根深，陈麒玉，吴雪超

（1.中国地质大学（武汉）计算机学院，湖北 武汉 430074；2.智能地学信息处理湖北省重点实验室，湖北 武汉 430074；3.智慧地质资源环境技术湖北省工程研究中心，湖北 武汉 430074）

对于一个城市级或以上的基于网络的三维空间模型可视化系统，其渲染数据量非常巨大，可以达到TB以上的数量级。在网络环境下进行大规模场景渲染的过程中，模型的渲染部分会随着用户视角的改变而改变，浏览器需要快速地切换渲染场景，释放上一帧的同时需要加载当前帧[1-2]。网络浏览器客户端比较常用的模型可视化技术有Construct 2、WebGL、WebGL2、WebGPU 等，可以直接通过浏览器加载模型，不需要安装其他的插件。但是面对大规模的三维空间模型时，进行实时交互可视化仍面临着一些技术难点，主要体现在以下几个方面：浏览器绘制性能弱、交互显示延迟、数据传输速度瓶颈等，导致数据加载慢、渲染时间长等诸多问题。为此，前人引入了一系列的渲染加速方法，包括遮挡剔除、隐面剔除和视锥体剔除、空间分割、动态加载[3-10]等。

在基于网络的模型可视化技术方面，2011年2月首次发布了Construct 2，元素只能支持2D，绘制功能非常有限，其速度主要取决于CPU向GPU发出绘图命令的效率[11]。WebGL 首次出现在2011 年初发布的Chrome9和Firefox4中。WebGL2最早出现在2017年的Chrome56 和Firefox51，WebGL2 是将WebGL 的功能提高到与OpenGL ES 3.0同等水平的更新[12]。WebGPU是一种新的图形渲染技术，被认为是当前的图形渲染技术中的一种高性能、跨平台的API[13]。相比于WebGL等上层API，WebGPU 是一个更加精确的图形渲染API，完全开放了整个显卡的能力，使其具有更高的性能和效率。此外，WebGPU 可以减少CPU 的开销、对多线程有良好的支持、使用计算着色器可以将通用计算的功能引入Web、以及拥有全新的着色器语言等。

网络环境下遮挡剔除技术的研究起步较晚，研究重点主要放在对特定的遮挡剔除技术进行改进，以提高其性能、可用性和正确性[14-18]。近年来得益于GPU 在图形计算方面的出众表现，使得将图形计算任务从CPU 转移至GPU 成为可能。Schütz[19]等就基于GPU 进行点云渲染计算，这样既减轻了CPU 繁重的计算负担，又提高了整体的渲染效率，其性能相较于硬件管道要高出一个数量级。网络环境下遮挡剔除有以下主流方案：①基于视点的遮挡剔除；②基于场景图的遮挡剔除；③基于图像处理的遮挡剔除；④基于深度排序的遮挡剔除；⑤基于矢量化的遮挡剔除；⑥基于面向对象的遮挡剔除；⑦基于光线追踪的遮挡剔除等。

对于局部小范围空间模型的可视化，地上建筑、地质模型等模型数据的数据量较小，一般不超过1 GB。此时，计算机可以一次性地载入并处理全部数据，使其得到更好的渲染效果。但对于海量模型，渲染数据会达到几十GB到几百GB[20-23]。因此，如何利用计算机有限的处理能力实现海量模型数据实时调度和渲染已成为面临的一个重要问题。杜莹[24]、Zhang L[25]和Ren Z[26]等对全球多分辨率虚拟地形仿真的关键技术进行了研究，初步实现了全球大规模地形数据的实时调度和渲染。Lebiedz J[27]等提出了基于计算机集群的虚拟地形并行化方案，有效提高了地形数据调度和渲染的性能，并实现了地形的网络化调度和渲染。赵建斌[28]根据Win32线程库和DirectX的多线程支持，提出了一种渲染帧的线程级并行化方法。李喆[29]根据线程数等于CPU核数的原则，提出了一种设置线程数量的方法等。虽然在基于网络环境下二维、三维空间信息可视化的方面已有较多的成果[23-26,30-32]，目前多线程异步调度方法能提高CPU的利用率，但是该方法存在着对复杂场景渲染效率优化效果不明显，或者能提升三维场景的并行渲染效率，但却未提出相应的策略调度来保证负载平衡等问题。

综上所述，针对网络环境下大规模三维空间模型应用需求，本文的主要研究目标是使得网络浏览器客户端的大规模三维空间模型可视化系统能够快速、高质量地渲染模型，采用面向网络的三维模型遮挡剔除、渲染优化、并行加载等策略，解决网络环境下大规模三维空间模型可视化高效渲染及数据调度效率提升等相关问题。

1 总体技术路线

针对网络环境下浏览器客户端大规模三维空间模型高效可视化需求，主要开展3个方面的研究：

1）网络环境下多类型三维模型遮挡剔除策略。针对不同三维模型的结构和数据差异性，可以采用不同粒度的剔除策略，包括对象级剔除（Object-level Culling）、面级剔除（Face-level Culling）和像素级剔除（Pixel-level Culling）等。对于具有复杂结构的三维模型和结构简单的三维模型，需要开展相应的不同规模的剔除与渲染实验，通过网络环境下的实际测试确定合适的遮挡剔除策略，以提升整体剔除计算效率。

2）基于WebGPU 计算管线的渲染优化方法。传统遮挡剔除算法（TOCA）中，视点发射的每条光线都需要与场景中的每个包围盒BVH（层次包围体，Bounding Volume Hierarchy）进行一次相交测试并计算该包围盒到视点的距离，从而导致遮挡剔除原始方法的计算量十分的巨大。将遮挡剔除原始方法中大量重复的计算单元由CPU移入GPU中做并行计算，通过并行计算的方式来减少时间消耗。随着WebGPU的计算管线API的开放，运用GPU在网络浏览器客户端进行并行计算成为可能，可以直接把所有的计算单元放入GPU 中进行计算。WebGPU 提供的管线技术，大大降低了CPU和GPU之间频繁通信带来的时间损耗，使得GPU算力能够更好地体现出来。

3）基于多线程的大规模数据异步并行加载和渲染方法。针对大规模三维空间模型的在可视化和人机交互场景中的计算效率问题，通过创建渲染线程的方法，进一步提升渲染和交互的流畅性（图2 中PVS 为潜在可见集potentially visible sets）。此外，可在内存中开辟多级缓存区，以减少硬盘读取，降低加载时间，并将异步并行加载数据量大的三维空间模型数据添加到渲染队列中等待渲染。

2 关键技术方法

2.1 大规模三维空间模型剔除粒度的选择方法

三维模型渲染剔除粒度指的是在三维渲染过程中，用于减少不必要的渲染计算的一种优化技术，其粒度表示为3 种不同的级别：对象级剔除、面级剔除和像素级剔除。不同的剔除粒度可以通过结合使用来达到更好的优化效果，减少不必要的渲染操作，提高渲染效率。对象剔除和面剔除在三维模型渲染使用中，对象剔除通过检测模型包围盒与相机视锥体的相交来判断模型是否需要被渲染，从而减少不必要的渲染操作。面剔除则通过检测模型的每个面与相机视锥体的相交来判断面是否需要被渲染，同样也能减少不必要的渲染操作。对象剔除和面剔除的结合使用可以更有效地剔除不需要渲染的对象和面，从而提高渲染性能和效率。

2.2 基于WebGPU 计算管线的三维模型遮挡剔除优化方法

对于Web端的遮挡剔除算法，传统的CPU离线预处理方法计算缓慢，占用了大量的资源，渲染时间消耗较大。本文将传统离线预处理中的计算部分从CPU端移植到GPU端执行，提出了基于WebGPU计算管线的改进算法（improved algorithm based on the computing pipeline of WebGPU，IACPW）。并针对IACPW 中计算管线创建开销过大的问题引入了离线遮挡剔除的思想和BVH 场景树的改进算法（introduced BVH tree improvement algorithm，IBTIA），提出了调整计算策略的改进算法（Adjusted Computing Improvement Algorithm，ACIA）。3 种方法的处理流程图见图2，基于WebGPU 计算管线的改进算法主要将所有包围盒与射线的计算过程放入GPU 中进行并行计算，引入BVH场景树的改进算法，在CPU中剔除掉了一部分不必要的计算过程，随后将剔除结果传入GPU中进行后续的计算，调整计算策略的改进算法在引入BVH场景树的改进算法的基础上将在CPU中剔除部分不必要计算过程的也放入GPU中进行剔除。由于相交测试计算是三维模型遮挡剔除过程中计算量最多的环节之一，这种调整策略可显著降低CPU的负载，提高了GPU的利用率，整体计算效率将得到有效提升。

2.3 基于多线程的三维模型数据动态调度策略

大规模模型数据读取时，通过单线程对大量的数据读写然后建立包围盒使得速度缓慢。本文提出基于多线程的大规模空间模型数据快速调度的方法，引入WebWorker 的方法来实现多线程的功能，能够在JavaScript 中创建多线程的机制。在多线程的机制中，主线程正在运行时，WebWorker线程在后台运行，并且两者可以并行工作不会相互受到干扰，等到Web-Worker线程完成计算任务后将结果返回给主线程。主线程可以创建WebWorker 线程并为其分配一些任务。这样可以把一些高计算量型或延迟较高的任务由Web-Worker线程来负担，让主线程来处理一些界面上的交互功能，以免受到其他线程的影响。

在模型加载的过程中主要分为主线程和渲染线程。主线程主要完成场景数据的读取，对应用户的操作进行响应，根据相机的变化获取相应的PVS。子线程（渲染线程）主要是完成数据的加载和模型的渲染，以及模型数据资源的释放。在主线程向渲染线程的数据传递过程中，本文采用了一种新的数据传输方法，即WBufferC （WBuffer-based Conveying），来减少时间消耗。WBufferC 会在内存中开辟一块buffer，且其长度可以动态增长，利用buffer 自动管理内存长度的优点，可以对其重复利用以及解析不同长度的数据，而不需要自行申请并管理这些内存。

在数据的渲染过程中为防止数据的二次读取和二次渲染，在加载当前视角的可见集后释放上一视角的缓存数据，在确定当前视角的可见集合后计算场景中已有模型与前视角的可见集合的差集，然后剔除不可见的部分。这样做可以先行清空缓存区的数据，有足够的空间对后面的数据进行加载。同时对于场景中已有部分，计算当前视角的可见集与场景中已有模型的差集，在渲染进程中只需要加载计算后的差集，实现模型数据的动态调度。

3 实验与结果

实验系统总体框架如图3，开发测试环境为Windows 11 和Node16，硬件环境是核心处理器Intel Core-i7，显卡3090 Ti，内存64.0 GB。存储模块由MinIO、MySQL及Redis组成，在Windows 11上面部署MinIO 用以存储模型的原始文件。采用MySQL 存储模型的元数据并建立索引，引入Redis作为缓存。用户可以通过不同的端口访问该系统，该系统目前推荐的浏览器是Google Chrome Canary和Microsoft Edge Canary。

我们分别使用5 种尺度三维地质体模型数据进行测试，设置从小到大的模型梯度，5种模型的比例尺分别为1∶5 000、1∶25 000、1∶50 000、1∶250 000、1∶500 000，其基本信息如表1所示。

在遮挡剔除粒度选择策略实验中，本文结合典型的三维地上建筑模型和三维地质模型进行了实验，选择适合的剔除方式。总体模型剔除粒度选择流程如图1所示，以实验区5 000栋，10 000栋，50 000栋和100 000栋三维建筑模型以及五指山地质模型（406 MB），五指山地层体（1.22 GB）和黔东北地质模型（10.6 GB）为实验对象。通过不同的渲染方法对不同数量的建筑物渲染后以mesh级别为剔除对象的结果和三角形级别进行剔除结果对比，发现以mesh 级别为剔除对象时CPU、GPU 利用率低，内存的使用量会大，加载时间长。在渲染不同规模大小地质模型后，三角形级别剔除的CPU、GPU利用率比mesh级别剔除结果高，内存的使用量和加载时间减小。这是由于建筑模型结构相对规范和简单，加载后以mesh级模型对象为剔除对象总体效率较高。对于地质体模型，由于其形态随机变化、结构复杂，加载后以三角形面片级别进行剔除总体效率较高。

图2 三种模型遮挡剔除方法的处理流程图

图3 实验系统总体框架

在遮挡剔除实验中，表2为不同方法及不同大小模型实验的时间统计结果，其中-表示算法时间消耗过长。从中可以看出，基于WebGPU计算管线的改进算法的效果相较于原始方法有很大的提升，但是略差于离线遮挡剔除方法，引入BVH场景树的改进算法将基于WebGPU计算管线的改进算法与离线遮挡剔除方法结合后效果较好，再次对引入BVH场景树的改进算法进行改进的调整计算策略的改进算法效果最好。虽然实验模型的规模从小到大设置了一个梯度，但是基于WebGPU计算管线的改进算法的总耗时基本不变。总体而言，从计算速率来看，调整计算策略的改进算法在渲染大体量三维模型时为速率最快的遮挡剔除方法，而基于WebGPU计算管线的改进算法则为最为稳定的改进方法。

表2 遮挡剔除实验的不同方法时间消耗数据/ms

图4 为表2 中的数据柱状图显示，展示了不同方法对表中模型的计算时间消耗。其中TOCA 为未经过任何优化的遮挡剔除原始方法，BOCA 指经前人优化过后的离线遮挡剔除方法，而IACPW、IBTIA、ACIA为本文依次提出的3 种改进遮挡剔除算法。从中我们可以直观地看出，IACPW 渲染时间消耗较为平稳，IBTIA 效果较差，甚至在部分模型的渲染上较前人提出的方法时间消耗更长，ACIA 总体上而言计算时间消耗最小，效果最好。

图4 遮挡剔除实验的计算时间消耗柱状图

在动态调度实验中，通过上述方法完成对5 种不同尺度和不同大小的模型加载，本文方法均获得更高的加载速度（如图5）。以贵州省1∶500 000整体模型（8.12 G）为例，用传统方法的加载帧率为13 fps，使用本文方法的加载帧率达到40 fps。

图5 地上建筑及地下地质体的联合实验

采用实验区的100 000余栋三维建筑模型和典型三维地质模型（930 MB，面片数19，246，398个）为实验对象，进行地上下三维模型的渲染实验。较之传统方法，本文方法均取得了可视化性能的提升，加载帧率60 fps，总加载时间为2.6 s，达到预期效果。

4 结 论

针对网络浏览器端大规模三维空间模型绘制性能弱、交互显示延迟等问题，在模型遮挡剔除粒度选择方法、遮挡剔除算法及动态调度等方面进行了优化设计，以提升三维模型的渲染效率和交互体验。

1）针对不同类型的空间模型选择的适合剔除粒度。我们根据建筑模型和地质模型的特点，分别优化确定了对象级和面片级的剔除粒度，在保证显示细节的前提下提高了整体三维模型渲染的效率。

2）提出了基于WebGPU 计算管线的遮挡剔除算法。在CPU中构建BVH场景树，用WebGPU渲染管线进行相交计算并计算视点到筛选后包围盒的距离，有效减轻CPU 的计算负担，充分利用GPU 的计算能力，降低了离线遮挡剔除方法的预处理时间消耗。

3）基于多线程技术提出了一种大规模三维空间模型数据快速调度方案。引入WebWorker 线程技术，使用主线程和渲染进程分别处理数据加载、剔除过程和场景资源的更新遍历，可以充分利用系统的多核资源，从而提高了渲染效率。

开发了基于WebGPU的大规模三维空间模型展示系统，系统综合利用了上面描述的关键技术，实现了不同尺度和规模的地质模型和地上建筑模型的快速加载和渲染，在实际工程中得到了较好的表现。

未来工作中，可以在硬件层面上继续发展，优化配置算法来提升网络环境下的数据读取和传输性能。目前WebGPU的管线配置存在着大量的参数，配置过程较为复杂，其计算时间消耗也部分依赖于场景树的深度，未来可以对场景树的结构进行优化，或者引入机器学习的方法对视角所见的模型部分进行预测。