基于WebGL 大规模3D 场景加载渲染优化算法的研究与实现

方杰

(浙江工业职业技术学院,浙江 绍兴312000)

目前,我国信息技术高速发展,新型应用层出不穷。人们对特定软件产品的关注点,逐渐从基础功能转向视觉冲击,传统的2D 展示模式已经不能满足需要,3D 实景项目孕育而生。从智慧城市、BIM到VR/AR,都要用到3D 实景。

本文研究主要依托目前比较成熟的WebGL 框架展开。WebGL 框架主要依托浏览器把3D 实景展示在网页上,具体强大的扩展性,其中内置的部分三维空间算法也比较经典,受到广泛使用。基于WebGL 框架的工具逐渐诞生,比较常见的有Three.js、Babylon.js 及PlayCanvas 等。这些工具在WebGL 的基础上做了二次开发,使之能够用于场景搭建及项目开发,但功能并不完整。如有特定需求,还需进行定制开发。而在三维空间算法上面,这些工具只是做了简单的封装,并不能支持大型或超大型模型和场景在浏览器中运行。并且,受限与计算机的基础性能,很多3D 场景在浏览器中运行业会受到诸多问题。

因此,本文主要在WebGL 框架的基础上,结合本地计算机性能参数,对3D 场景的渲染算法进行深入研究、优化,以达到最终效果,使得大规模3D 场景能在低配置、短时间内加载并渲染成功。同时,本文的研究成果可应用于智慧社区、智慧校园、智慧景区等3D 实景项目中,也能成为大型VR 场景渲染算法的基础参考。

1 国内外研究现状和发展趋势

二十一世纪以来,随着计算机性能的逐步增强,3D 场景的应用慢慢投入到生活、娱乐、工作中,特别是游戏产业的爆发,一定程度带动了3D 可视化场景技术的发展。与此同时,技术层面也在不断更新迭代,透视图法、3D 模型法、仿真法等技术也渐渐成熟并完善；自适应网格算法、地形分割法等算法也应用于实际项目中。之后,Web 端兴起,BS 开发模式成为主流,有大量的需求迫使3D 场景从应用程序端转向浏览器端。新的需求产生了新的技术及算法,出现WebGL 等优质框架。WebGL 解决了3D 场景在浏览器端展示及与用户简单交互的问题,基于WebGL 的3D 实景项目逐渐流行起来,但受限于载体性能,大规模的3D 实景不是很常见,国内外少有成熟的案例。相较而言,小型的3D 模型在浏览器端的展示相对成熟,即便在国内,很多平台都有实景展示模块,如3D 实景看房、收藏品3D 建模展览等等。因此,如何在浏览器端展示大规模3D 实景成了一个公认的难题,本文旨在基于WebGL 框架的基础上,通过数据分析,找到一条能在浏览器端展示大规模3D 实景的合理途径。

2 研究路径及渲染优化算法解析

本文章主要在WebGL 框架的基础上,通过对海量地图切片数据及贴图切片数据做真机测试,捕捉其整体加载过程中的CPU、内存、加载时间、渲染时间等多项性能指标,分析数据与性能指标之间存在的关系,设定权重,推导相关性,并完成加载及渲染算法的实现。同时,结合终端设备性能参数,设计一个合理的效率指标来整合上述各项性能指标,最终可针对不同性能的终端设备提供自适应的数据加载和渲染。

在研究过程中,主要有个5 个关键步骤,分别如下：

2.1 对大规模3D 场景进行多次无规则切片,并进行算法的初步测试,形成大量的基础测试数据

通常,3D 场景是由无人机拍摄,并生成及导出整个模型或常规的切片模型数据的。对于大型3D 场景而言,制作整个模型的方式不是很合理,一次性导入会导致效率问题甚至设备卡死。因此,通常会使用常规切片模型数据进行操作。同时,切片数据通常包含模型数据和贴图数据,并且是一对一对应。在终端上载入模型数据是加载的过程,在终端上载入贴图数据是渲染的过程。

本文研究的大型3D 场景的加载渲染优化算法需要使用大量的切片模型数据和切片贴图数据,并且需要根据不同大小的切片模型数据和切片贴图数据进行后续计算。因此,需要把常规的切片模型数据和切片贴图数据进行多次、随机的二次分割,或合并整合成较大的切片模型数据和切片贴图数据,以获得更多的不同大小规模的基础数据。

本文使用无人机拍摄了当地一个社区,并导出常规3D 场景模型,然后把常规模型切割和整合成8 种不同大小规模的基础数据,其数据大小的比例分别是1 到8,同时根据这些数据大小进行分组,组号为M1 至M8,M8 最大,为整个社区3D 场景的1/20 左右。

2.2 上述数据应用于终端设备进行测试,对CPU、内存、加载时间、渲染时间等性能指标进行捕捉,形成结构化数据

由于实验数据为切片数据,因此使用异步加载的方式加载切片模型数据到终端,加载完成切片模型数据后加载切片贴图数据直接进入渲染流程。异步在初步实验过程中,不设置任何控制算法,由终端自行异步加载数据及完成渲染。在所有基础数据进行分组加载渲染过程中,捕捉终端CPU、内存使用的峰值,捕捉模型平均加载时间,捕捉模型平均渲染时间等性能参数。记录所得结果如下表1：

表1 运行性能参数表

其中,当贴图切片数据渲染内存使用率接近或达到100%时,终端设备已处于卡死状态。

2.3 对上述结构化数据进入深入分析,寻找内在联系

在默认异步加载的实验中,经过大量数据搜集并计算后,分析其特征,得出大致的结论如下：

2.3.1 在默认异步加载过程中,不考虑终端的设备承受能力,会导致部分模型加载及渲染过程中出现卡死甚至蓝屏的情况。

2.3.2 在整个加载和渲染过程中,渲染过程明显比加载过程对设备性能要求高。

2.3.3 在不控制加载及渲染的情况下,会使得前期集中加载切片模型,后期集中加载切片贴图,导致同时加载切片贴图是出现卡死等情况。

2.3.4 从切片角度考虑,切片模型数据和切片贴图数据都不应过大,也不应过小。过大导致终端设备无法承受或计算资源浪费影响效率；过小虽不影响计算效率,但在切片过程中会增加工作量。

2.3.5 切片模型数据的平均加载时间较长,主要原因是文件较大或者网速太慢。切片贴图数据加载时间较短,但会使内存承受高压。

2.3.6 切片模型数据和切片贴图数据较小或适中时,平均加载和渲染时间相差不多,但较小时对CPU 和内存要求较高。

2.4 加载和渲染的效率指标设计及优化算法设计

基于WebGL 框架及原有的加载渲染算法,结合测试终端的性能参数设计,评价切片模型数据和切片贴图数据加载和渲染的效率指标,该指标主要结合计算所使用的终端资源,衡量不同模型大小之间整体加载和渲染的效率,大致如下：

效率值X=T/C

效率值X 越大表明,3D 场景模型加载渲染效率越高,反之则越低。上述公式中,C 是加载渲染过程中的设备资源消耗峰值,C 越大则整体效率指标值越低,T 是总加载渲染时间,设计算法如下：

涉及参数含义如下：T 是总加载渲染时间；m 是切片模型数据的大小；c 是切片贴图数据大小；x 是切片模型加载系数；y 是贴图渲染系数。

原加载渲染方式是通过异步的方式自动实现的,无法做到根据切片数据大小进行动态调整,也没有对终端设备CPU、内存用量进行合理分配使用,文章通过研究设计并计算合理的系数,在控制CPU、内存使用峰值的情况下,调整加载渲染顺序,优化原有的加载渲染算法,提高整体加载和渲染效率。

原加载渲染方式使用系数x,y 均为一后,计算效率值如下表2 所示：

表2 各组效率值表

2.5 完成地图切片数据加载及贴图切片数据渲染算法的优化与实现

在加载过程中,同步捕捉了上述性能参数,结果如表3 所示：

表3 优化后性能参数表

最终通过效率指标的计算,比较优化算法使用前后的区别,具体如表4 所示：

通常在实际项目中,开发者无法针对特定的模型制定合理的切片方式,因此会出现大型3D 场景无法加载的问题。通过模型切片数据加载及贴图切片数据渲染的优化,使得效率有一定程度的提升,特别对于大型的切片方式及小型的切片方式。算法提高了各种不同大小切片方式下的效率值,并使得在加载大型的切片和小型的切片时,终端运行正常,不会出现卡死等情况,运行得到保障。

3 结论

目前类似于智慧社区的大规模型3D 场景基本都是基于客户端程序,大多使用U3D 工具开发,开发周期长,且移植性和扩展性不是很好。本课题通过算法研究,使大型3D 场景能以网页的形式展示,通过加载渲染优化算法,方便了产品的部署和维护,并能和其他网页直接交互,有更强的适应性和交互性。通过研究,使得大型3D 实景能通过WebGL 框架展现在任意载体上,达到自适应效果。同时使得实景加载渲染效率有大幅度的提升,从而能更好地与其他页面完美交互,节省了大量的接口开发成本,从而获得一定的经济价值。

目前的初步研究成果虽然能应用于大多数的3D 场景,但还不是非常完美,在今后有进一步的提升空间,主要包含如下方面：目前的研究主要在保持加载渲染时间稳定的基础上,避免了终端资源的利用超负荷,今后可以进一步通过算法节省加载和渲染时间；在研究过程使用的社区案例具有一定的规模,在加载和渲染过程需要等待,今后可考虑设计预加载的技术来提高用户体验；目前的模型和贴图切割方法可以进一步优化,在保证质量的情况下进行压缩,控制模型切片数据加载及贴图切片数据大小。