基于WebGL 大規(guī)模3D 場景加載渲染優(yōu)化算法的研究與實現(xiàn)

方杰

(浙江工業(yè)職業(yè)技術(shù)學(xué)院,浙江 紹興312000)

目前,我國信息技術(shù)高速發(fā)展,新型應(yīng)用層出不窮。人們對特定軟件產(chǎn)品的關(guān)注點,逐漸從基礎(chǔ)功能轉(zhuǎn)向視覺沖擊,傳統(tǒng)的2D 展示模式已經(jīng)不能滿足需要,3D 實景項目孕育而生。從智慧城市、BIM到VR/AR,都要用到3D 實景。

本文研究主要依托目前比較成熟的WebGL 框架展開。WebGL 框架主要依托瀏覽器把3D 實景展示在網(wǎng)頁上,具體強大的擴展性,其中內(nèi)置的部分三維空間算法也比較經(jīng)典,受到廣泛使用。基于WebGL 框架的工具逐漸誕生,比較常見的有Three.js、Babylon.js 及PlayCanvas 等。這些工具在WebGL 的基礎(chǔ)上做了二次開發(fā),使之能夠用于場景搭建及項目開發(fā),但功能并不完整。如有特定需求,還需進(jìn)行定制開發(fā)。而在三維空間算法上面,這些工具只是做了簡單的封裝,并不能支持大型或超大型模型和場景在瀏覽器中運行。并且,受限與計算機的基礎(chǔ)性能,很多3D 場景在瀏覽器中運行業(yè)會受到諸多問題。

因此,本文主要在WebGL 框架的基礎(chǔ)上,結(jié)合本地計算機性能參數(shù),對3D 場景的渲染算法進(jìn)行深入研究、優(yōu)化,以達(dá)到最終效果,使得大規(guī)模3D 場景能在低配置、短時間內(nèi)加載并渲染成功。同時,本文的研究成果可應(yīng)用于智慧社區(qū)、智慧校園、智慧景區(qū)等3D 實景項目中,也能成為大型VR 場景渲染算法的基礎(chǔ)參考。

1 國內(nèi)外研究現(xiàn)狀和發(fā)展趨勢

二十一世紀(jì)以來,隨著計算機性能的逐步增強,3D 場景的應(yīng)用慢慢投入到生活、娛樂、工作中,特別是游戲產(chǎn)業(yè)的爆發(fā),一定程度帶動了3D 可視化場景技術(shù)的發(fā)展。與此同時,技術(shù)層面也在不斷更新迭代,透視圖法、3D 模型法、仿真法等技術(shù)也漸漸成熟并完善；自適應(yīng)網(wǎng)格算法、地形分割法等算法也應(yīng)用于實際項目中。之后,Web 端興起,BS 開發(fā)模式成為主流,有大量的需求迫使3D 場景從應(yīng)用程序端轉(zhuǎn)向瀏覽器端。新的需求產(chǎn)生了新的技術(shù)及算法,出現(xiàn)WebGL 等優(yōu)質(zhì)框架。WebGL 解決了3D 場景在瀏覽器端展示及與用戶簡單交互的問題,基于WebGL 的3D 實景項目逐漸流行起來,但受限于載體性能,大規(guī)模的3D 實景不是很常見,國內(nèi)外少有成熟的案例。相較而言,小型的3D 模型在瀏覽器端的展示相對成熟,即便在國內(nèi),很多平臺都有實景展示模塊,如3D 實景看房、收藏品3D 建模展覽等等。因此,如何在瀏覽器端展示大規(guī)模3D 實景成了一個公認(rèn)的難題,本文旨在基于WebGL 框架的基礎(chǔ)上,通過數(shù)據(jù)分析,找到一條能在瀏覽器端展示大規(guī)模3D 實景的合理途徑。

2 研究路徑及渲染優(yōu)化算法解析

本文章主要在WebGL 框架的基礎(chǔ)上,通過對海量地圖切片數(shù)據(jù)及貼圖切片數(shù)據(jù)做真機測試,捕捉其整體加載過程中的CPU、內(nèi)存、加載時間、渲染時間等多項性能指標(biāo),分析數(shù)據(jù)與性能指標(biāo)之間存在的關(guān)系,設(shè)定權(quán)重,推導(dǎo)相關(guān)性,并完成加載及渲染算法的實現(xiàn)。同時,結(jié)合終端設(shè)備性能參數(shù),設(shè)計一個合理的效率指標(biāo)來整合上述各項性能指標(biāo),最終可針對不同性能的終端設(shè)備提供自適應(yīng)的數(shù)據(jù)加載和渲染。

在研究過程中,主要有個5 個關(guān)鍵步驟,分別如下：

2.1 對大規(guī)模3D 場景進(jìn)行多次無規(guī)則切片,并進(jìn)行算法的初步測試,形成大量的基礎(chǔ)測試數(shù)據(jù)

通常,3D 場景是由無人機拍攝,并生成及導(dǎo)出整個模型或常規(guī)的切片模型數(shù)據(jù)的。對于大型3D 場景而言,制作整個模型的方式不是很合理,一次性導(dǎo)入會導(dǎo)致效率問題甚至設(shè)備卡死。因此,通常會使用常規(guī)切片模型數(shù)據(jù)進(jìn)行操作。同時,切片數(shù)據(jù)通常包含模型數(shù)據(jù)和貼圖數(shù)據(jù),并且是一對一對應(yīng)。在終端上載入模型數(shù)據(jù)是加載的過程,在終端上載入貼圖數(shù)據(jù)是渲染的過程。

本文研究的大型3D 場景的加載渲染優(yōu)化算法需要使用大量的切片模型數(shù)據(jù)和切片貼圖數(shù)據(jù),并且需要根據(jù)不同大小的切片模型數(shù)據(jù)和切片貼圖數(shù)據(jù)進(jìn)行后續(xù)計算。因此,需要把常規(guī)的切片模型數(shù)據(jù)和切片貼圖數(shù)據(jù)進(jìn)行多次、隨機的二次分割,或合并整合成較大的切片模型數(shù)據(jù)和切片貼圖數(shù)據(jù),以獲得更多的不同大小規(guī)模的基礎(chǔ)數(shù)據(jù)。

本文使用無人機拍攝了當(dāng)?shù)匾粋€社區(qū),并導(dǎo)出常規(guī)3D 場景模型,然后把常規(guī)模型切割和整合成8 種不同大小規(guī)模的基礎(chǔ)數(shù)據(jù),其數(shù)據(jù)大小的比例分別是1 到8,同時根據(jù)這些數(shù)據(jù)大小進(jìn)行分組,組號為M1 至M8,M8 最大,為整個社區(qū)3D 場景的1/20 左右。

2.2 上述數(shù)據(jù)應(yīng)用于終端設(shè)備進(jìn)行測試,對CPU、內(nèi)存、加載時間、渲染時間等性能指標(biāo)進(jìn)行捕捉,形成結(jié)構(gòu)化數(shù)據(jù)

由于實驗數(shù)據(jù)為切片數(shù)據(jù),因此使用異步加載的方式加載切片模型數(shù)據(jù)到終端,加載完成切片模型數(shù)據(jù)后加載切片貼圖數(shù)據(jù)直接進(jìn)入渲染流程。異步在初步實驗過程中,不設(shè)置任何控制算法,由終端自行異步加載數(shù)據(jù)及完成渲染。在所有基礎(chǔ)數(shù)據(jù)進(jìn)行分組加載渲染過程中,捕捉終端CPU、內(nèi)存使用的峰值,捕捉模型平均加載時間,捕捉模型平均渲染時間等性能參數(shù)。記錄所得結(jié)果如下表1：

表1 運行性能參數(shù)表

其中,當(dāng)貼圖切片數(shù)據(jù)渲染內(nèi)存使用率接近或達(dá)到100%時,終端設(shè)備已處于卡死狀態(tài)。

2.3 對上述結(jié)構(gòu)化數(shù)據(jù)進(jìn)入深入分析,尋找內(nèi)在聯(lián)系

在默認(rèn)異步加載的實驗中,經(jīng)過大量數(shù)據(jù)搜集并計算后,分析其特征,得出大致的結(jié)論如下：

2.3.1 在默認(rèn)異步加載過程中,不考慮終端的設(shè)備承受能力,會導(dǎo)致部分模型加載及渲染過程中出現(xiàn)卡死甚至藍(lán)屏的情況。

2.3.2 在整個加載和渲染過程中,渲染過程明顯比加載過程對設(shè)備性能要求高。

2.3.3 在不控制加載及渲染的情況下,會使得前期集中加載切片模型,后期集中加載切片貼圖,導(dǎo)致同時加載切片貼圖是出現(xiàn)卡死等情況。

2.3.4 從切片角度考慮,切片模型數(shù)據(jù)和切片貼圖數(shù)據(jù)都不應(yīng)過大,也不應(yīng)過小。過大導(dǎo)致終端設(shè)備無法承受或計算資源浪費影響效率；過小雖不影響計算效率,但在切片過程中會增加工作量。

2.3.5 切片模型數(shù)據(jù)的平均加載時間較長,主要原因是文件較大或者網(wǎng)速太慢。切片貼圖數(shù)據(jù)加載時間較短,但會使內(nèi)存承受高壓。

2.3.6 切片模型數(shù)據(jù)和切片貼圖數(shù)據(jù)較小或適中時,平均加載和渲染時間相差不多,但較小時對CPU 和內(nèi)存要求較高。

2.4 加載和渲染的效率指標(biāo)設(shè)計及優(yōu)化算法設(shè)計

基于WebGL 框架及原有的加載渲染算法,結(jié)合測試終端的性能參數(shù)設(shè)計,評價切片模型數(shù)據(jù)和切片貼圖數(shù)據(jù)加載和渲染的效率指標(biāo),該指標(biāo)主要結(jié)合計算所使用的終端資源,衡量不同模型大小之間整體加載和渲染的效率,大致如下：

效率值X=T/C

效率值X 越大表明,3D 場景模型加載渲染效率越高,反之則越低。上述公式中,C 是加載渲染過程中的設(shè)備資源消耗峰值,C 越大則整體效率指標(biāo)值越低,T 是總加載渲染時間,設(shè)計算法如下：

涉及參數(shù)含義如下：T 是總加載渲染時間；m 是切片模型數(shù)據(jù)的大小；c 是切片貼圖數(shù)據(jù)大小；x 是切片模型加載系數(shù)；y 是貼圖渲染系數(shù)。

原加載渲染方式是通過異步的方式自動實現(xiàn)的,無法做到根據(jù)切片數(shù)據(jù)大小進(jìn)行動態(tài)調(diào)整,也沒有對終端設(shè)備CPU、內(nèi)存用量進(jìn)行合理分配使用,文章通過研究設(shè)計并計算合理的系數(shù),在控制CPU、內(nèi)存使用峰值的情況下,調(diào)整加載渲染順序,優(yōu)化原有的加載渲染算法,提高整體加載和渲染效率。

原加載渲染方式使用系數(shù)x,y 均為一后,計算效率值如下表2 所示：

表2 各組效率值表

2.5 完成地圖切片數(shù)據(jù)加載及貼圖切片數(shù)據(jù)渲染算法的優(yōu)化與實現(xiàn)

在加載過程中,同步捕捉了上述性能參數(shù),結(jié)果如表3 所示：

表3 優(yōu)化后性能參數(shù)表

最終通過效率指標(biāo)的計算,比較優(yōu)化算法使用前后的區(qū)別,具體如表4 所示：

通常在實際項目中,開發(fā)者無法針對特定的模型制定合理的切片方式,因此會出現(xiàn)大型3D 場景無法加載的問題。通過模型切片數(shù)據(jù)加載及貼圖切片數(shù)據(jù)渲染的優(yōu)化,使得效率有一定程度的提升,特別對于大型的切片方式及小型的切片方式。算法提高了各種不同大小切片方式下的效率值,并使得在加載大型的切片和小型的切片時,終端運行正常,不會出現(xiàn)卡死等情況,運行得到保障。

3 結(jié)論

目前類似于智慧社區(qū)的大規(guī)模型3D 場景基本都是基于客戶端程序,大多使用U3D 工具開發(fā),開發(fā)周期長,且移植性和擴展性不是很好。本課題通過算法研究,使大型3D 場景能以網(wǎng)頁的形式展示,通過加載渲染優(yōu)化算法,方便了產(chǎn)品的部署和維護,并能和其他網(wǎng)頁直接交互,有更強的適應(yīng)性和交互性。通過研究,使得大型3D 實景能通過WebGL 框架展現(xiàn)在任意載體上,達(dá)到自適應(yīng)效果。同時使得實景加載渲染效率有大幅度的提升,從而能更好地與其他頁面完美交互,節(jié)省了大量的接口開發(fā)成本,從而獲得一定的經(jīng)濟價值。

目前的初步研究成果雖然能應(yīng)用于大多數(shù)的3D 場景,但還不是非常完美,在今后有進(jìn)一步的提升空間,主要包含如下方面：目前的研究主要在保持加載渲染時間穩(wěn)定的基礎(chǔ)上,避免了終端資源的利用超負(fù)荷,今后可以進(jìn)一步通過算法節(jié)省加載和渲染時間；在研究過程使用的社區(qū)案例具有一定的規(guī)模,在加載和渲染過程需要等待,今后可考慮設(shè)計預(yù)加載的技術(shù)來提高用戶體驗；目前的模型和貼圖切割方法可以進(jìn)一步優(yōu)化,在保證質(zhì)量的情況下進(jìn)行壓縮,控制模型切片數(shù)據(jù)加載及貼圖切片數(shù)據(jù)大小。