大规模Web3D轻量级展示系统设计

李雅敬

摘要：目前Web3D技术应用广泛，但展示的模型数据量大时，由于网络带宽和浏览器性能有限，数据传输时长较长、用户浏览卡顿甚至客户端无法显示等问题限制了Web3D的应用。对以上问题提出了模型后端预处理和前端场景管理结合的方案，对总体模型构建层次包围盒，并由此进行模型分割和前端浏览时的模型剔除，从而进行LPM（Lightweight Progressive Mesh）轻量化处理；实现了基于WebSocket和Web Worker的多线程模型数据传输，并提出了一套较为完整的前端模型管理技术，形成了相较传统技术具有轻量级优势的解决方案。

关键词：Web3D；模型轻量化；Web数据传输；场景管理；Web前端

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2019）06-0270-03

A Design of a Large-scale Web3D Lightweight Display System

LI Ya-jing

（School of Software Engineering， Tongji University， Shanghai 201804， China）

Abstract： At present， Web3D technologies are widely used， but when the amount of model data is large， due to insufficient network bandwidth and browser capacity， the applications of Web3D have been limited by resulting long time data transfer， browsing lag and even client display failure. Based on the above problems， this paper combines back-end model pretreatment with front-end scene management. With a hierarchy bounding box for the overall model， the system can split the model， remove certain sub-models in front-end browsing， and carry out LPM （Lightweight Progressive Mesh） processing. This system uses multi-threaded model data transfer based on WebSocket and Web Worker and completes a set of front-end model management technologies. At last， a solution with lightweight advantages over traditional technology is formed.

Key words： web3d； lightweight model； web data transfer； scene management； web frontend

1 背景

近年來，3D技术在越来越多的领域得到应用。网页应用天然具有跨平台和轻量化的特性，因此Web3D技术有了广泛的需求，也得到不断完善和发展。但由于Web平台的特殊性，在线3D模型的展示与传统平台展示相比仍有诸多问题。首先，3D模型体量较大时客户端带宽仍较为有限，需要优化传输机制，减少用户等待时间以提高在线模型加载的可用性；其次，Web展示受浏览器性能限制，对于体量巨大的模型需要一定的加载策略，以保证在有限系统资源的条件下，尽可能展示出视觉和交互体验良好的模型[1]。最后，对于模型的前端加载和管理，以及用户的交互反馈，都需要进行轻量化处理，以保证在用户查看、浏览时的体验有较好的连续性和稳定性。

本文针对上述问题，提出了在线3D模型展示各环节的关键技术，形成了一套具有一定可行性的技术链。主要工作有：

1）对模型进行聚类、分割等预处理；

2）将分割模型进行必要的轻量化预处理；

3）结合局部模型索引信息的拣选逻辑；

4）实现渐进式加载与模型拣选配合的场景调度方法；

5）对数据的网络传输进行优化。

2 系统技术实现

3D展示系统主要包含Web后端预处理和前端加载和渲染两方面。在后端预处理阶段，首先对模型生成包围盒层次（Bounding Volume Hierarchy， BVH），将其树结构数据保存。然后基于BVH树数据进行子模型索引与分割，生成与BVH叶子节点对应的局部模型的文件。得到局部模型文件之后，对局部模型文件进行轻量化处理，确定模型不同的精度等级，同时在收到请求后通过其关注度等参数选择要传输的模型，计算模型的传输次序和精度。

在前端加载和渲染阶段，首先实现基于BVH的高效模型拣选方案。在拣选算法中，首先要基于关注度，结合视锥剔除和遮挡剔除的方案进行模型拣选算法的优化。选出需要渲染的模型之后，传输此部分局部模型的基网格。然后进行渐进式数据传输，同时前端会对缓存进行优化，选择保留部分模型数据，以及新增或剔除部分模型数据。

2.1 轻量级模型预处理

2.1.1 BVH构建与模型分割

对总体模型构建BVH层次包围盒，模型的三角面片可以视作其基本元素。基于基本元素对总体模型构建包围盒有两种方法可供选择：自顶向下和自底向上方法。自底向上方法从模型的构件出发，先取得模型所有构件的包围盒，然后根据生成新包围盒最小的目标来求取包含多个构件包围盒的大包围盒作为前述多个构件的父节点。如此递归直到场景中只剩下一个包围盒[2]。

C. Lauterbach等人基于多核GPU的构建方法[3]使用自底向上方法与一种线性排序算法的结合，可以以较低成本快速构建模型的BVH结构。使用此方法得到结构数据后，模型依据BVH树叶子节点划分进行细粒度分割，保持了在树中的拓扑结构，可以供随后的模型管理和渲染策略使用。

2.1.2 LPM渐进式加载处理

我们使用渐进式网格进行模型的层级压缩[4]。所谓渐进式网格，即模型数据传输中采用渐进式的方法，先传输保持模型特征的必要数据，再传输细节数据，客户端就可根据这些数据渐进地将模型进行重建[5]。同时进行数据重用，将重复模型的其中一个进行一次传输加载，然后深拷贝已经加载的模型数据，并对其位置等参数进行修改，即可利用已有數据转换得到一个重复三维模型。

2.2 轻量级数据传输

服务器维护资源索引，包括一个下载URL和文件MD5值的映射表，和一个文件MD5值和文件的实际可用下载地址映射表。服务器接收到客户端发来的资源请求后，解析请求URL并根据URL查询URL-文件MD5值的大小映射表，找到此URL对应的文件MD5值；再根据结果查询文件MD5值和文件的实际可用下载地址映射表，获得多个可用下载地址并返回给客户端，为后续的Web Works多线程下载提供链接。

客户端根据下载地址数量和文件大小决定创建Worker子线程的数量，即将文件分为几段。然后创建Worker子线程，并使用postMessage函数分配下载文件的地址、偏移和总大小，开始通过已创建的WebSocket连接下载，使用onMessage函数接受workers返回的下载完成或失败信息。下载完成后，将模型数据写入磁盘[6]。

2.3 轻量级场景管理

2.3.1 基于BVH的视锥剔除

视锥体（frustum）代表场景对用户的可见范围。在本文中，仅绘制包围盒全部处于视锥体或与视锥体相交的模型。由于在模型预处理阶段已经得出了模型的层次包围盒，因此可以使用分层剔除法（Hierarchy Culling Method）[7]得到可见模型集。该算法依赖于总体模型划分的树形结构，一旦我们剔除掉一个节点，那么剔除节点的子节点就也被一并剔除了。依据BVH二叉树对遍历方法进行优化，如包围盒完全处于视锥中的节点就不需遍历其左右子树，从而可以实现总体层数较低的节点遍历，提高模型拣选的效率。

2.3.2 基于关注度的视锥剔除

关注度即用户对场景中的某个模型分块的关注程度，我们可以以用户关注程度的主要因素：模型大小（模型包围盒占据的空间大小）以及距离（模型距离视点的距离）来量化。也就是说可以认为模型AABB包围盒体积越大，距离摄像机位置越近，用户对模型的关注度越高。如下公式所示。

[ConcernDegree=Volume（AABBm）Distance（Model， Camera）]

依据关注度，在视锥体内部未进行视锥剔除的模型，我们进行进一步的剔除。对于关注度相对较低的模型，我们认为其对于用户查看整体场景是价值不大的[8]，因此可以设定一个阈值，如关注度处于后10%的模型我们不进行渲染，可以降低资源占用同时保证用户体验。

3 结束语

本文针对Web3D平台开发相关的难点，在前人相关技术经验的基础上，提出一套大型3D模型在线展示的平台化方案。在相关的流程中本文实现了从预处理到渲染等相关阶段的轻量化，如图5所示，在具体实现中相较传统平台实现了模型的轻量化预处理优势、场景数据的轻量化传输优势、场景浏览的轻量化加载优势，可以有效地提升前端模型查看和用户交互性能，同时提高了Web页面的稳定性和可用性。

参考文献：

[1] 王伟， 贾金原， 张晨曦， 等. 大规模虚拟场景渐进式传输的研究进展[J]. 计算机科学， 2010， 37（2）： 38-43.

[2] Larsson T， Akenine-M?ller T. A dynamic bounding volume hierarchy for generalized collision detection[J]. Computers & Graphics， 2006， 30（3）： 450-459.

[3] Lauterbach C， Garland M， Sengupta S， et al. Fast BVH construction on GPUs[C]. Oxford， UK： Blackwell Publishing Ltd， 2009， 28（2）： 375-384.

[4] Hoppe H. Efficient implementation of progressive meshes[J]. Computers & Graphics， 1998， 22（1）： 27-36.

[5] 温来祥， 贾金原. 基于单元重用机制的轻量化建模算法[J]. 系统仿真学报， 2012， 24（1）： 69-73.

[6] 任双君， 周旭， 任勇毛， 等. 基于HTML5的浏览器端多线程下载技术[J]. 计算机系统应用， 2017（11）.

[7] Bittner J， Wimmer M， Piringer H， et al. Coherent hierarchical culling： Hardware occlusion queries made useful[C]. Oxford， UK and Boston， USA： Blackwell Publishing， Inc， 2004， 23（3）： 615-624.

[8] 贾金原， 王伟， 王明飞， 等. 基于多层增量式可扩展扇形兴趣区域的大规模DVE场景对等渐进式传输机制[J]. 计算机学报， 2014， 37（6）： 1324-1334.

【通联编辑：谢媛媛】