WebGL三维技术、建模分析及优化研究

马 亮，王 彬

(1.南京交通职业技术学院信息化建设与管理办公室，江苏 南京 211188；2.河海大学海洋学院，江苏 南京 210024)

0 引言

近年来，软件正从桌面端向Web端、移动端发展，为了提升用户体验，软件数据的呈现和交互方式一直处于快速变化之中。二维的数据呈现和交互方式越发不能满足日益提高的用户体验的需求，基于三维模型的数据呈现和交互更符合用户的认知特点。计算机技术与网络技术的发展使面向网络的三维可视化成为计算机领域的重要发展方向[1]。利用Web三维技术相关理论及研究成果，实现跨平台、全方位三维场景展示以及具备丰富、易扩充的交互操作，已经成为三维应用开发的一种趋势[2]。

1 WebGL技术分析

Web三维技术通过Web 浏览器呈现虚拟场景，主要包含三维建模、人机交互以及实时渲染[3]，是在网页中实现虚拟现实技术的总称，Web三维场景中的模型，可以实现多角度观察，并能通过键盘、鼠标等输入设备与场景和单体模型进行交互，让浏览者产生更多的操作自主感。Web三维实现技术有Java3D、VRML、X3D、shockwave3D、WebGL等。上述大部分技术选型运行于浏览器需要安插插件，存在着各种缺陷，已被逐步淘汰。

1.1 WebGL技术概述

2010年以来，WebGL三维技术逐渐成熟，为Web三维技术领域带来了划时代的改变。WebGL技术完美解决了以往Web三维技术的几乎全部缺陷。尽管目前WebGL还处于发展中，但是其发展的潜力巨大，它为Web三维技术应用开发指明了新的方向，具有明显强劲的发展势头[4]，是构建基于Web的虚拟仿真实验室的首选三维技术。

1.1.1 WebGL技术起源及优势

OpenGL ES是OpenGL的一个子集，此套标准的推出是为了满足嵌入式设备开发需求和设备环境；而WebGL是基于OpenGL ES标准编制，用于网页端渲染三维画面。2011年3月，多媒体技术标准化组织Khronos基于OpenGL ES 2.0发布了WebGL 1.0标准规范；2017年1月，基于OpenGLES 3.0发布了WebGL 2.0规范。WebGL的功能是通过增加OpenGL ES的一个JavaScript绑定而实现的。WebGL运行于html5的canvas标签中，通过操作canvas标签支持的WebGLRenderingContext3D绘制实例对象，向GPU传输绘制数据、绘制参数、着色器代码(GLSL ES语言编写)，经过GPU全流程渲染管线的计算，最终渲染出三维画面，并与Web网页版式进行合成。WebGL网页客户端技术组成如图1所示。

图1 WebGL网页客户端技术组成

WebGL具有四大优点：(1)不需要安装插件，大部分移动端、PC端浏览器都原生支持WebGL，2013年微软IE11也支持了WebGL；(2)三维场景渲染速度较快，WebGL可调用用户终端GPU硬件渲染三维场景；

(3)具有 HTML5官方支持的标准；(4)基于OpenGL标准开发，基础牢固，标准成熟。虽然WebGL面世时间较短，但WebGL发展很快，是顺应技术趋势、适应性广泛的三维技术选型。

1.1.2 WebGL编程原理

1.1.2.1 图形流水管线

目前GPU主要采用图形流水管线结构处理绘制数据，完成三维场景的渲染。整个处理过程分多步骤、多阶段进行，绘制数据逐步从流水管线的上一个阶段传送到下一阶段。进入图形流水管线的数据主要包含三维模型数据和着色器指令，数据主要依次经过以下图形流水管线：(1)顶点着色器；(2)图元装配；(3)光栅化；(4)片段着色器；(5)像素处理(①裁剪测试，②多重采样片段运算，③模板测试，④尝试缓存测试，⑤融合，⑥抖动)；(6)绘制缓存。只要采用了GPU硬件加速，硬件内的渲染过程就必须遵循上述步骤，无论OpenGL、WebGL、DirectX。因此，WebGL处理图形数据也遵循和围绕上述处理步骤和流程，对应GPU的物理流水管线的各阶段。

1.1.2.2 WebGL编程技术

WebGL标准与OpenGL、OpenGL ES核心标准是一样的，只是为了适配不同的应用环境，在非核心标准上有一定的区别，OpenGL适用于桌面应用，OpenGL ES适用于嵌入式设备应用，WebGL适用于网页应用。WebGL采用的是可编程的图形流水管线，在整个图形流水管线中，顶点着色器、片段着色器的功能是可以使用GLSL ES编程语言编程介入，以控制GPU渲染的效果，其它图形流水管线阶段不能编程，均有固定处理方式。WebGL渲染流程如图2所示。

基于WebGL绘制三维画面，三维模型部分数据通过JS脚本从模型文件中加载入顶点缓冲区，后由GPU调用，三维模型数据一般包含顶点坐标、绘制索引、顶点颜色、法线、纹理图像、纹理坐标、光线数据等；坐标变换所需要的变换矩阵及其它数据也是由JS脚本计算并传入GPU；顶点着色器、片段着色器需要的GLSL ES指令，一般也是由JS脚本从文件中读取，然后以字符串的形式传入GPU。

顶点着色器主要执行与顶点相关的操作，如：(1)调用缓冲区的顶点坐标数据，结合传入的模型变换矩阵，对顶点坐标进行变换；(2)计算并分配顶点法线；(3)计算并分配顶点颜色等。片元着色器主要对纹理、光照等进行逐片元计算。

图2 WebGL渲染流程

1.2 WebVR技术

目前虚拟现实应用大概分四种类型：(1)桌面虚拟现实系统，显示器直接显示三维画面，无其它辅助交互和显示设备；(2)沉浸式虚拟现实系统，通过头戴显示器(HMD)或者VR盒子观看三维画面，通过数据手套等虚拟交互设备完成与虚拟场景的互动；(3)分布式虚拟现实系统，基于网络的虚拟环境，将沉浸式虚拟现实与分布式交互结合，把不同方位的用户连接在同一个虚拟现实环境中；(4)增强现实系统，将真实环境与虚拟环境结合，使用者透过显示画面可以看到真实世界，并叠加虚拟场景。

普通Web三维应用，实现了桌面式虚拟现实，不能满足浏览者对沉浸式体验的要求。2014年Mozilla基金会的Vladimir Vukicevic提出WebVR，2017年万维网联盟(W3C)发布了WebVR 1.0规范初稿，WebVR 2.0也在积极次修订之中，WebVR目前还是一种实验性Web功能。WebVR关键优势在于，同一个WebVR应用能跨设备、免安装、轻量化、体验一致。用户在PC端使用主流的VR头戴式显示器(HMD)，手机端使用VR盒子，就能获得一致的沉浸式虚拟现实体验。

2 WebGL应用中的建模

开发WebGL三维应用，建模三维模型是关键环节之一。目前主要有两种WebGL三维场景构建类型，即360°全景照片式的三维场景和基于三维模型的三维场景。

2.1 360°全景照片式的三维场景的建模

360°全景照片式的三维场景，类似身处球形或柱形照片墙之内进行浏览。照片采用现场拍摄的实景照片拼接而成。三维页面渲染摄像机视角，通过操作键盘、鼠标、数据手套等，模拟摄像机的各种操作，以实现对虚拟场景进行360°浏览。基于全景照片的三维场景并不会对场景中的物体进行三维建模，此处所谓建模是指拍照及拼接，不能对三维场景中物体进行单独操作，也并不能实现真正任意全景无死角漫游，虚拟场景的观察点通过预设，已经固定，并且浏览只能原地360°观看。

由于360°全景照片式的虚拟现实，虚拟场景的展示效果依托于对360°实景照片的拼接，所以开发成本低、开发时间短，能满足部分虚拟场景展示需求，是目前虚拟现实产品中应用较多的模式[5]。

2.2 基于三维模型的三维场景的建模

对于浏览体验要求高、交互较复杂的三维场景，360°全景照片虚拟现实显然不能满足需求。为了在虚拟空间实现全视角浏览，进行真正的全景无死角任意漫游，实现对虚拟空间中单个模型物体的交互，需要通过构建三维模型来构造虚拟场景。现阶段三维建模主要方式有几何人工建模、图片建模、激光建模、航空倾斜摄影建模等，一般地，根据建模对象的特征和设备条件来选择建模方式。

2.2.1 几何人工建模

几何人工建模是指使用建模软件从零开始建模，如3Ds Max、Maya、Blender等，几何人工建模方式生成的模型几何精度高、纹理精细，但是建模工作量较大、时间较长、模型不够真实。

2.2.2 图片建模

逆向建模已存在的实物。建模流程如下：拍照，照片修饰，照片导入，逆向重建，模型修复。此类软件有ImageModeler、Agisofe photoScan等。进行图片建模，材质反光性、拍照角度、拍照环境、照片数量等因素，对建模质量都有影响，模型生成后一般需要导入3Ds max之类的建模软件，对模型进行改进和修复。图片建模方式适合小规格物体的建模，若硬件条件充足，应优先使用精度更高的激光建模方式替代照片建模。

2.2.3 激光建模

激光建模模式有两种：激光三维扫描和激光雷达建模。这两类建模采用了不同类型的激光，建模适用不同的现场。

2.2.3.1 激光三维扫描建模

激光三维扫描采用相位激光与脉冲激光，多应用于工业领域。获取空间点云数据，可建立结构不规则物体、复杂场景的三维模型。激光三维扫描仪主要应用于建筑物、小型物体、保护文物、零件、隧道的逆向建模。

2.2.3.2 激光雷达建模

激光雷达采用可见光波段和红外波段，是一种集激光扫描仪、全球定位系统(GPS)、惯性导航系统(INS)、高分辨率数码相机等技术于一身的光机电一体化集成系统。激光雷达建模多使用于城市等大区域的三维建模、绘制地形等，可获得激光点云数据并生成精确的数字高程模型(DEM)、数字表面模型(DSM)，同时获取物体DOM(数字正射影像)信息，通过对激光点云数据的处理，可得到真实的三维场景图[6]。激光雷达建模的优点：(1)可穿透植被，能完整测量被覆盖的地形；(2)获取的数据精度高；(3)单次扫描获取数据的面积大。激光雷达建模的不足：(1)设备昂贵；(2)物体纹理图像不能同时被获取，需后期采集纹理图像进行贴图。

2.2.3.3 航空倾斜摄影建模

航空倾斜摄影是航空摄影建模中最流行的，航空倾斜摄影普遍用于对大范围场景进行建模，比如一个社区、一个城市等，航空倾斜摄影能自动对大范围、复杂的场景数据进行高效率的采集，然后由专业软件对数据进行自动化处理、自动贴图，极大地提升了模型生成效率。航空倾斜摄影一般通过无人机搭载五镜头相机进行操作，从四个倾斜角度、一个垂直角度采集影像数据、定位信息、纹理信息，如图3所示。航空倾斜摄影建模具有建模成本低、自动化处理数据、可量测性强、模型逼真等特点[7]。

图3 航空倾斜摄影方式

但是，航空倾斜摄影一旦无法拍摄到被遮挡的物体表面，会导致模型有破面。实际生产中，会将三维激光扫描和航空倾斜摄影相结合，通过航空倾斜摄影来获取空中视角下能拍摄的物体表面的数据，通过三维激光扫描来获取空中视角下触及不到的物体的表面数据。

3 WebGL应用优化

基于WebGL的三维场景载入网页，画面都是由显卡在中央处理器的协助下实时运算并渲染出来的。三维模型数据量大，运行时经常出现加载慢、画面卡顿的情况，加载速度与硬件性能已成为限制Web三维效果的瓶颈，如何快速从服务器获取模型并解析、加载、渲染仍然是一个需要优化的问题。本文认为在不确定用户客户端设备性能和网络性能的情况下，可以从单体三维模型、三维场景、网络加载机制三方面进行优化。

3.1 单体三维模型的优化

单体三维模型优化一般是在模型构建阶段完成，目标是在符合WebGL数据加载格式标准、不影响或较少影响渲染质量、满足功能的情况下，通过对模型数据进行有损或无损方式的预处理，实现三维模型轻量化、模型数据内部组织结构优化。单体三维模型的优化，一般通过对模型文件格式的选择和模型几何数据优化来完成。

3.1.1 文件格式

三维模型的文件格式代表了模型数据标准，对模型数据组织结构的优化，部分是通过选择模型数据文件格式来完成的。由于建模软件众多，导致生成的格式众多，如3Ds、dae、obj、stl、glTF等。对于单体模型，本文推荐使用glTF格式文件。所有WebGL框架和引擎都提供对glTF文件格式的支持，跨平台特点显著，已成为Web的三维模型的事实标准。glTF文件由JSON文件和二进制文件组成。

glTF是由Khronos组织制订并推进，该组织正是OpenGL、WebGL等标准的制订者。glTF格式的制订迎合了网络传输、客户端解析的需要，实现了三维模型数据在浏览器中的动态、快速地加载和展示，该文件格式将客户端解析的部分计算压力前置到了建模软件的模型文件的生成阶段，最大程度地减少使用WebGL及其它API运行时的计算处理，可以不用额外解析而直接被加载到GL缓冲器中。glTF格式的优点：(1)文件被合理压缩；(2)直接加载入GL缓冲，不需要额外解析；(3)加载速度快；(4)三维场景描述完整，(5)可扩展。

3.1.2 单体三维模型几何数据优化

模型轻量化是通过对模型几何表面数据优化来完成，优化的方式包括：(1)在不影响展示效果和功能的情况下，将模型中的部分面进行删除，一般通过优化工具进行；(2)参数化处理有规则模型、拉伸体模型，以减少面的数量；(3)在不影响展示效果和功能的情况下，对低重要性的复杂模型表面，可以考虑使用纹理贴图替代多边形建模。

3.2 三维场景优化

三维场景优化是指大批量模型情形下的渲染优化。三维场景的优化主要通过以下两种方式完成：基于LOD层次模型的优化、场景管理优化。

3.2.1 基于多分辨率LOD技术的模型加载优化

目前，基于网络和计算终端现状，对三维场景数据进行简化和多分辨率的可视化渲染，已成现阶段三维数据传输、渲染的主流方法。LOD(Levels of Detail)是指多细节层次，用不同级别的几何体来表示物体，距离视点越远则加载的模型越粗糙，距离视点越近则加载的模型越精细，从而在不影响视觉效果的前提下提高显示效率并降低存储[8]。多分辨率LOD技术中，一般基于金字塔结构组织瓦片数据，如图4所示。用四叉树数据结构来组织瓦片金字塔，是较好的选择。对原始模型的结构，用四叉树结构分层、分块，能保证空间索引系统与层和块能严格统一。

本文推荐将3D Tiles 标准作为三维瓦片数据格，它继承了glTF的优点，添加了渐进 LOD方法，场景的复杂度根据视距进行调整。渐进LOD方法不是直接进行模型置换，而是随着视点靠近模型，在模型上不断地补充细节。3D Tiles适合大规模三维场景的传输、显示，支持对DEM地形、BIM、大规模建筑模型、倾斜摄影数据、点云数据等各种类型三维数据的瓦片化表达。

图4 瓦片金字塔模型

3.2.2 场景管理优化

如何有序管理包含大量三维模型的场景，建立较好的场景层次关系，为场景筛选、遮挡剔除、可视性处理、碰撞检测等提供条件。

有些三维场景非常复杂，基于Z缓冲方法处理可见性问题并不合理。有时，在绘制三维场景时CPU使用率已经接近百分之百，这种状况下运用遮挡剔除的效果并不明显。可以考虑使用一些预生成信息去降低渲染时遮挡剔除的计算复杂度，可以显著提高遮挡剔除的效率[9]。预生成信息，是指利用场景管理层次体系算法生成的辅助数据结构，可以将场景分层：先分区，再分物体，然后分割到多边形。场景管理中经常用到两个层次体系：(1)BSP树，用于加速剔除；(2)包围体树，用于碰撞检测。

3.3 三维模型的网络加载优化

网络加载优化主要利用现有网络技术特性，优化三维模型数据在网络中传速的速度。本文提出一种基于WebRTC的模型文件传输机制。

WebRTC(Web Real-Time Communications)，用于实现浏览器之间的音频、视频及数据共享，已被纳入万维网联盟的W3C推荐标准，目前主流浏览器均支持WebRTC技术。目前WebRTC技术主要应用于流媒体播放、即时通信系统、在线视频通话等领域。基于WebRTC技术，利用WebTorrent协议在浏览器之间建立一套文件对等传输机制，将浏览WebGL应用的终端用户组成一个P2P的对等网络，浏览器节点之间就可以互相提供资源传输服务，共享对等网络中的文件。

上述基于WebRTC的P2P网络，如果用于传输WebGL应用中的三维模型，将有效地提升模型加载的速度。当用户浏览三维场景需要加载模型时，不仅只从服务器端获取，还可以从具有这些模型数据的其他用户那里获取。随着在线用户数量的增加，传统中心式的服务器负载会越来越高，而WebRTC对等网的传输效率随着在线用户的增加越来越高。

4 结语

WebGL技术的出现有其必然性，WebGL技术的优点就是它要解决的问题：兼容各种浏览器、无插件、硬件加速、基于既有成熟标准的子集。通过上述优点几乎可以预见WebGL技术的未来。