许昊天
摘要：WebGL技术使得网页具有了利用GPU进行三维绘制和渲染的能力，从而使得我们可以在二维网页上展示三位内容。然而网页的计算和存储资源十分有限，而且所有的数据需要在打开网页后通过网络获取。对于大规模三维虚拟场景模型，其在网络上传输效率是一个瓶颈问题，极大地限制了应用的规模。本文针对性地提出了一套模型轻量化策略，同时还提出了一个基于WebRTC的对等覆盖网络用于传输三维虚拟场景数据，大幅提升了传输效率和网页可以支持的三维应用规模上限。
关键词：WebGL，WebRTC，Web3D
中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2019）03-0215-03
引言
得益于Web技术的快速发展，网页可以作为一个载体去表达越来越丰富的内容。随着近年来VR技术的火热，WebVR得以快速发展。我们需要将一些规模较大的三维场景模型在Web上可视化，这中间就涉及许多技术难题。首先，一个Web3D应用首先要通过网络下载模型文件，而大规模的三维场景在网络上的传输需要耗费很长时间，这就导致了因等待时间过长而带来的用户体验的下降。其次，Web应用能获取到的浏览器的计算资源和存储资源远不及运行在操作系统上的应用程序，而三维绘制和渲染又十分依赖于这些资源。这些极大限制了目前Web3D应用的规模大小。
本文目标是将大规模城市级三维场景在Web上进行可视化，主要做了以下工作。首先，为了减少三维模型在网络上的传输时间，使用基于WebRTC的对等网络来传输三维模型。其次，结合对现有三维模型格式的分析，提出了一套模型轻量化预处理策略和一种适用于网络传输的三维模型格式。最后，提出了一套基于用户行为和视觉贡献度的渐进式加载策略和浏览器缓存策略，以保证用户打开网页时的首屏加载速度，以及后续用户在三维场景的漫游过程中，不会因为模型过大而导致浏览器崩溃。
1 模型轻量化预处理
1.1 拉伸体参数化
三维模型通常都是由三角网格组成。随着模型精度和复杂度的提升，存储这些密集的三角网格数据需要消耗大量的存储资源，进而导致模型文件体积变大，网络传输时间提高。我们首先对三角网格的存储方式进行优化。
这些在三维场景模型中，存在大量的可以看作拉伸体的三维物体。拉伸体是通过一个平面在一个方向上平移的轨迹形成的三维物体，圆柱体就是一个典型的拉身体。在三维场景尤其是城市，建筑场景中，存在大量的拉伸体，如管道，墙体等。我们通过对这些拉身体进行参数化表示，如图1所示。这样我们就可以不用存储复杂的三角网格信息，只需要存储几个参数即可，进而大幅降低模型文件的体积。
1.2 复杂模型三角带化
为了达到很好的兼容性和通用型，模型的三角网格数据通常是以三角面为单位进行存储的，也就是说每一个三角面都需要存储三个顶点。这种看似合理的方式实际上存在数据冗余。如图2所示，对于两个有重叠边的三角形，直观来说只需要四个顶点即可表示，但实际存储了六个顶点。
我们可以将以三角面为单位进行存储的三角网格数据转换成以三角带为单位存储，这个过程叫做三角带化（Stripification）。这样可以大大减少存储冗余的顶点数据，进而减小文件体积。[1]中对比了常见的模型三角带化算法。WebGL中支持基于三角带的绘制，只需将绘制参数设置成gl.TRIANGLE_STRIP。图3是一个复杂三角网格经过三角带化后生成的数个三角带的前后对比图。
1.3 三维数据的无损压缩
Google的Chrome Media团队于2017年7月发布并开源了Draco。Draco是一个开源压缩库，用于改善3D图形的存储和传输。Draco主要用于三角网格网格数据和点云数据的无损压缩，可以使三维模型文件体积显着减小，有效降低了数据传输对网络带宽的依赖，同时并没有牺牲渲染的速度和质量。我们使用Draco对前文轻量化处理策略处理后的模型进一步压缩。图4给出轻量化处理前后的模型使用ZIP压缩和Draco压缩的结果对比，可以看出Draco可以带来更高的压缩率，且不与前文的轻量化策略冲突。
压缩后的文件在浏览器中进行解压的速度也是一个重要的参考指标，图5可见在浏览器中通过JavaScript进行解压的速度虽低于使用C++进行解压的速度，但也在可以接受的范围内。
2 对等覆盖网
2.1 基于WebTorrent的集中式内容路由与分发
现如今WebRTC技术已被主流浏览器所支持，但是这些应用大多是将WebRTC技术应用于流媒体播放、即时通信系统、在线视频通话等领域。WebRTC技术赋予了浏览器与另一个浏览器的点对点通信的能力，我们可以基于WebRTC技术，将用户组成一个P2P的对等覆盖网络，并以此来传输三维虚拟场景模型，提高传输效率。这样当用户在三维场景中漫游时，对于当前位置下需要加载的模型，可以从具有这些模型数据的其他用户那里获取，而不需要从服务器获取。这样就大大降低了服务器的压力，同时，随着用户数量的增加，网络规模的扩大，P2P网络传输模型的速度会高于从单台服务器下载模型的速度。
WebTorrent是运行在WebRTC之上的一种浏览器之间文件对等传输技术，通过构建出一个集中式的P2P拓扑网络，来实现网络中为文件共享。我们在WebTorrent的基础之上，进一步构建出一套适用于大规模城市级三维模型渐进式传输的路由与分发模式，在浏览器上构建出高效的P2P网络，如图6所示。当多个人同时使用WebTorrent下载一个三维模型时，每个人都可以为其他人提供三维模型文件的部分片段，每一个下载模型文件的节点在下载的同时都可以为其他节点提供服务。当下载完毕后，可以一直为其他节点提供服务，直到用户关闭浏览器。
2.2 基于超级节点的层次组网
如图7，我们通过引入超级节点（Super Peer）并构建出一个复合式的P2P网络拓扑结构，来进一步缓解中心Tracker服务器的压力，同时尽可能地缩短内容路由的时间，提高P2P网络整体的传输效率。我们将一个完整的三维场景进一步细分成数个子场景，将处在同一个子场景下的用户再单独构建出一个子P2P网络，超级节点是这个子P2P网络中的Tracker服务器，同时也包含这个子场景内的全部模型信息。如此一来，当用户处在一个自场景中时，如果需要获取此子场景中的模型文件，只需要向这个子场景对应的子P2P网络中的中心Tracker服务器发出请求即可。如果需要获取其他子场景内的三维模型文件，再向其他子场景的Tracker服务器请求即可。这种策略将原先集中式Tracker服务器的负载分担到各个子场景的Tracker服务器上，提高了P2P网络可容纳的对等节点的数量和网络的可靠性。
2.3 实验结果
我们在阿里云上部署不同数量节点并模拟多个用户同时在三维虚拟场景中进行漫游的情况，得到图8所示是实验结果。可以看出，当节点数很少时，对等传输的效率并比不上原先的集中式传输效率。原因是使用对等传输机制需要进行内容路由和WebRTC建立连接的过程，这个过程会耗费一定的时间。随着节点数量的提升，传统中心式的服务器渐渐不能承担如此高的负载，服务器的带宽不能满足这幺多节点的需要，导致模型传输速度大幅下降。而WebRTC对等覆盖网的传输效率越来越高，浏览器节点之间可以互相为其他浏览器节点提供资源传输服务。
3 结论
本文针对WebVR应用中三维虚拟场景的网络传输瓶颈问题，提出了解决方案。首先通过对三维虚拟场景模型进行轻量化预处理来减小模型文件的体积。轻量化手段主要包括拉伸体模型参数化，复杂模型三角带化，以及无损压缩这三个步骤。经过这三个步骤后可以大幅降低模型文件的体积，减小网络传输的数据量。其次，提出了一种基于WebRTC的对等覆盖网络，并将其应用于三维虚拟场景模型传输，经过实验测试，在模型数据的分发方面优于传统集中式的分发模式。
参考文献：
[1] Vaně?ek P， Kolingerová I. Comparison of triangle strips algorithms[J]. Computers & Graphics， 2007， 31（1）： 100-118.
[2] Hu Y ， Chen Z ， Liu X ， et al. WebTorrent based fine-grained P2P transmission of large-scale WebVR indoor scenes[C]// International Conference on 3d Web Technology. ACM， 2017.
[3] 刘小军，贾金原.面向手机网页的大规模WebBIM场景轻量级实时漫游算法[J].中国科学：信息科学，2018，48（3）：274-292.
【通联编辑：唐一东】
