徐 穎，林 定，黃國新

(福州大學(xué) 福建省空間信息工程研究中心，福建 福州 350116)

基于WebGL的參數(shù)化三維樹木建模*

徐 穎，林 定，黃國新

(福州大學(xué) 福建省空間信息工程研究中心，福建 福州350116)

以網(wǎng)絡(luò)作為平臺，綜合考慮樹木的拓撲結(jié)構(gòu)和分枝結(jié)構(gòu)，建立層級型樹木形態(tài)結(jié)構(gòu)參數(shù)，實現(xiàn)了基于WebGL的交互式參數(shù)化三維樹木模型在線實時構(gòu)建，解決了現(xiàn)有在線樹木建模軟件難以控制樹木整體形態(tài)的問題，在三維場景中通過旋轉(zhuǎn)、縮放、移動等交互操作多視角地展示樹木模型。實驗表明，基于WebGL的交互式參數(shù)建模方法直觀靈活、交互性強、操作便捷、用戶體驗流暢。

WebGL；參數(shù)化建模；三維可視化；樹木

0 引言

樹木的三維可視化建模在林業(yè)相關(guān)的數(shù)據(jù)分析和模擬中得到廣泛的應(yīng)用，較為成熟的植物三維建模軟件包括：美國交互數(shù)據(jù)可視化公司IDV的SpeedTree，德國GreenWork公司的Xfrog 建模軟件，法國Bionatics公司的虛擬植物系列產(chǎn)品等，然而大部分實時渲染的植物建模軟件面向單機應(yīng)用而不是在線應(yīng)用，因為三維模型數(shù)據(jù)加載緩慢，網(wǎng)頁端渲染技術(shù)不成熟，依賴插件的安裝，用戶體驗差，所以在線三維實時繪制一直是傳統(tǒng)瀏覽器的軟肋。隨著互聯(lián)網(wǎng)的飛速發(fā)展，網(wǎng)絡(luò)及移動應(yīng)用能夠提供更方便、快捷的服務(wù)，已經(jīng)成為人們生活中不可分割的一部分，如何將樹木三維建模過程形成大眾化的網(wǎng)絡(luò)應(yīng)用或移動應(yīng)用將成為互聯(lián)網(wǎng)+環(huán)境下不可或缺的發(fā)展環(huán)節(jié)。

早期的網(wǎng)絡(luò)三維圖形繪制通過Ajax提供的異步通信技術(shù)，依賴插件安裝型應(yīng)用實現(xiàn)；隨后，F(xiàn)lash技術(shù)成為瀏覽器中交互式圖形表達的主流，VRML插件仍然是三維渲染中必不可少的部分。其中插件程序用于處理特定類型的文件，完成三維渲染，但是插件的安裝使客戶端存在安全隱患，隨著插件數(shù)量的增多，終端運行速度緩慢，體積龐大，用戶體驗越來越差。然而，Web2.0所倡導(dǎo)的“網(wǎng)絡(luò)即平臺”的理念，擺脫了三維在線繪制的瓶頸，促使Web3D替代了三維的最終用戶軟件。OpenGL的演變和HTML5的出現(xiàn)，減少了瀏覽器對插件的需求，實現(xiàn)了跨平臺訪問與離線網(wǎng)絡(luò)應(yīng)用，有力地推動了在線三維圖形渲染的發(fā)展。特別地，WebGL技術(shù)與JavaScript語言能夠使網(wǎng)頁界面調(diào)用本地高性能的OpenGL實時渲染，以用戶為核心的交互式虛擬在線建模迅猛發(fā)展。

WebGL[1]由Khronos Group公開發(fā)布，是一個跨平臺的低級三維圖形應(yīng)用編程接口(API)，無需安裝任何插件，以HTML5Canvas元素作為渲染繪制的上下文，由著色器語言(GLSL)組織客戶端本地的GPU進行三維加速繪制，使瀏覽器更加流暢地展示三維模型和場景，其客戶端的體系架構(gòu)如圖1所示。

圖1 使用WebGL的客戶端架構(gòu)

鑒于WebGL在網(wǎng)頁實時渲染中所表現(xiàn)的優(yōu)勢，在線WebGL應(yīng)用得到了廣泛關(guān)注與迅速發(fā)展?，F(xiàn)階段較為成熟的應(yīng)用主要有：谷歌公司研發(fā)的Google Earth、Google Map等地理信息服務(wù)，在線賽車游戲HexGL，亞洲動物基金會與微軟合作推廣的保護瀕危動物的項目月熊志以及被稱為“人體地圖”的ZygoteBody等，應(yīng)用范圍從網(wǎng)頁游戲到數(shù)據(jù)可視化，從在線服務(wù)到三維展示平臺。相比之下，在線虛擬樹木建模的發(fā)展還有很大的空缺，目前公開的應(yīng)用主要是以L-系統(tǒng)開發(fā)SnappyTree和3DFlora，不僅要求用戶具有植物學(xué)相關(guān)的專業(yè)知識，理解規(guī)則語義如何應(yīng)用于樹木的形態(tài)控制，而且建模過程中局部形態(tài)的微小改變可能會改變整個樹木輪廓。為了解決上述問題，本文結(jié)合樹木的拓撲結(jié)構(gòu)，建立了樹木的形態(tài)結(jié)構(gòu)參數(shù)，通過參數(shù)化建模方法，實現(xiàn)了基于WebGL的交互式三維樹木模擬。

1 相關(guān)工作

三維樹木建模的方法主要有基于規(guī)則的建模方法[2-6]、基于圖像的建模方法[7-8]、基于草圖的建模方法[9-10]等。基于規(guī)則的建模方法是通過直接在三維空間中定義樹木的幾何參數(shù)以此構(gòu)建其幾何形態(tài)，是目前應(yīng)用最廣泛的虛擬樹木建模方式。此方法又可以細分為三類：基于參考軸的建模[2]、基于參數(shù)集的建模[3-5]和基于L-系統(tǒng)的建模[6]。L-系統(tǒng)的建模方法遵循特定的語法規(guī)則，便于網(wǎng)頁開發(fā)語言的解析，所以現(xiàn)有的建模軟件多采用此方法構(gòu)建樹木模型。

3DFlora可以創(chuàng)建樹木、盆景、農(nóng)作物等各類植物模型，提供多種植物模板簡化建模過程，支持實時調(diào)節(jié)參數(shù)改變模型的形態(tài)結(jié)構(gòu)特征，模型數(shù)據(jù)可導(dǎo)出為OBJ格式。

SnappyTree是Paul Brunt開發(fā)的開源在線樹木模擬應(yīng)用，使用WebGL+GLGE開發(fā)框架實現(xiàn)，提供20多個參數(shù)進行樹木的枝條形態(tài)控制、生長模擬，具備模型的精度控制和紋理貼圖的功能。其中建模引擎Proctree.js具有較好的移植性，能夠作為庫文件加載到其他網(wǎng)頁應(yīng)用中生成樹木模型，系統(tǒng)支持導(dǎo)出json、wavefront、collada格式的文件，便于其他軟件的加載與展示。

上述在線三維樹木建模軟件需要理解應(yīng)用中定義的樹木參數(shù)，交互過程繁瑣，無論是樹木的各級分支器官，還是全局形態(tài)，都難以通過參數(shù)的調(diào)節(jié)進行控制。基于參數(shù)的建模采用從整體到局部的建模方法，由WEBER J[3]等人提出，通過多個參數(shù)對樹木的三維形態(tài)進行控制，建成與某個樣本模型相似、豐富多樣的復(fù)雜樹木模型，快速直接，形象易懂，易于調(diào)節(jié)模型的輪廓結(jié)構(gòu)。

可見，基于WebGL的在線樹木建模應(yīng)用具有較多的參數(shù)信息、實時交互性、動態(tài)控制等特點，因此，本文結(jié)合樹木的拓撲結(jié)構(gòu)，建立幾何參數(shù)集，構(gòu)建三維樹木模型，即使用一組參數(shù)作為各個器官及其拓撲組合的形態(tài)約束條件，適用性廣泛，技術(shù)成熟。

2 參數(shù)化樹木建模

從構(gòu)筑要素的角度可將樹木劃分為樹冠、樹莖及樹根。即樹木的宏觀結(jié)構(gòu)都是由主干、分枝和樹葉構(gòu)成的。枝條是樹木形態(tài)結(jié)構(gòu)的重要構(gòu)件，枝條在主干上的分枝角度、分枝半徑、分枝層級等是決定分枝空間格局以及樹冠形態(tài)的重要因素。參數(shù)化的樹木建模是通過給定約束樹木多級組成部分空間關(guān)系的一組參數(shù)集，直接生成滿足參數(shù)集的樹木模型。

2.1應(yīng)用程序框架

為了實現(xiàn)交互式參數(shù)化三維建模原型系統(tǒng)，本文采用如圖2所示的建模架構(gòu)。

圖2 基于WebGL的參數(shù)化樹木建模框架

2.2拓撲結(jié)構(gòu)

樹木的拓撲結(jié)構(gòu)是指構(gòu)成樹木的各個部分之間的連接關(guān)系，從不同的角度出發(fā)具有不同的含義，分析樹木各器官的空間分布可得到其幾何拓撲結(jié)構(gòu)[11]。本文采用樹木的幾何拓撲結(jié)構(gòu)，如圖3所示，將樹木結(jié)構(gòu)分為多級，其中主干為第0級，生長于主干的器官屬于第1級，如一級枝條；生長在第1級枝條上的器官為第2級，如二級枝條或葉。依此類推，生成樹木的層級結(jié)構(gòu)。依據(jù)拓撲結(jié)構(gòu)的劃分，可以確定主干、枝條及葉的取值范圍分別為1～N、0～N、0～N。

圖3 樹模型的拓撲結(jié)構(gòu)

采用上述分級拓撲結(jié)構(gòu)表達樹木，可將不同級別的同類功能器官抽象為：主干(Trunk)、枝條(Branch)、樹葉(Leaf)等，其中，樹的主干和枝條具有相似的屬性、行為及形態(tài)結(jié)構(gòu)，簡化了模型的數(shù)據(jù)組織方式，實現(xiàn)了分層的枝條控制。此外，層次結(jié)構(gòu)為樹木的雙向查詢提供了依據(jù)，不僅可以通過枝條查找其葉片分布、屬性、密度等，也可以根據(jù)單個葉片找到其歸屬的樹木分枝，提高了數(shù)據(jù)表達的效率。

2.3幾何形態(tài)參數(shù)

樹木的分枝結(jié)構(gòu)決定了整棵樹的總體形態(tài)，不但確定了樹冠的大小和形狀，而且影響葉的空間分布。因此，從枝條參數(shù)及葉參數(shù)兩個方面分別控制樹木器官的形態(tài)。具體來說，可用如下樹木結(jié)構(gòu)偽代碼表示：

lt;樹gt;：：=lt;主干gt; lt;枝條gt; lt;葉子gt;

lt;主干gt;：：=lt;長度gt; lt;半徑gt;lt;橫向分節(jié)數(shù)gt; lt;縱向分節(jié)數(shù)gt;lt;起始位置gt; lt;終止位置gt;lt;生長頻率gt;

lt;枝條gt;：：=lt;長度gt; lt;半徑gt;lt;橫向分節(jié)數(shù)gt; lt;縱向分節(jié)數(shù)gt;lt;起始位置gt; lt;終止位置gt;lt;枝條起始角度gt;lt;生長頻率gt;

lt;葉gt;：：=lt;大小gt; lt;密度gt;lt;葉柄距離gt;

(1)枝條的構(gòu)建

鑒于枝條直接影響樹木的形態(tài)，本文采用廣義的圓柱體表達樹木枝干，將其分枝分節(jié)構(gòu)建，提取形態(tài)結(jié)構(gòu)參數(shù)。

首先，根據(jù)分枝模式計算和設(shè)置相關(guān)的拓撲結(jié)構(gòu)參數(shù)，由樹木模型的初始值或界面滑動條交互控制生成樹木的枝干骨架，如圖4所示。

圖4 枝干分解模型

然后，以枝條半徑為母線圍繞枝干骨架旋轉(zhuǎn)一周構(gòu)建廣義圓柱體作為枝段，將枝段首尾連接形成整根枝條。

最后，通過紋理映射貼圖表達樹皮，增強模型的真實感。

因此，構(gòu)建枝條主要使用的控制參數(shù)有：①枝條的長度及其分布規(guī)律：枝條的長度及相應(yīng)長度的著枝位置；②枝條的基徑：枝條的起始半徑大小及半徑分布情況；③枝條的疏密度：由枝條的生長頻率控制，分配每級枝條的數(shù)量；④枝條的精度控制參數(shù)：即枝干的分節(jié)數(shù)量，又分為橫、縱兩個方向的精度控制，其中橫向控制枝條的光順程度，縱向控制枝條的彎曲復(fù)雜度；⑤枝條分枝級數(shù)：描述包括主干在內(nèi)的不同層次枝干的總層數(shù)；⑥枝條的起始角度：描述分枝軸與主干軸的初始夾角；⑦枝條生長的起始位置和終止位置：采用[0，1]之間的相對數(shù)表示子級枝條相對父級枝條基部的生長位置。

(2)葉的構(gòu)建

樹木的葉一般由葉片、葉柄及葉托組成，葉片是葉的主要組成部分。葉的密度、大小及排列順序都是影響樹木形態(tài)特征的重要因素。為了描述葉的幾何形態(tài)及其在樹體上的分布特征，本文歸納出以下控制參數(shù)用于葉的建模：①葉的密度：描述葉的疏密分布狀況；②葉的大?。嚎刂迫~片的大??；③葉柄距離：描述葉鑲嵌在枝條上的距離分布。

3 實驗與討論

本文基于WebGL采用JavaScript語言開發(fā)實現(xiàn)了在線實時三維建模的原型系統(tǒng)，系統(tǒng)支持三維網(wǎng)絡(luò)展示、實時渲染、交互編輯，用戶通過Firefox4.0+，Chrome9.0+，Internet Explorer11+等支持WebGL的瀏覽器可以訪問原型系統(tǒng)。

(1)實驗結(jié)果

靈活的交互式模型設(shè)計：控制參數(shù)化三維樹木建模的原型系通過默認的參數(shù)集生成樹木模板，用戶可以調(diào)節(jié)相關(guān)的參數(shù)，實時渲染模型，創(chuàng)建滿意的效果。圖5為本文生成的樹模型及其參數(shù)信息。

圖5 樹模型及其參數(shù)

系統(tǒng)支持場景的縮放、模型的平移與旋轉(zhuǎn)、相機控制及光照紋理等效果。

(2)討論

由實驗結(jié)果可知，本文實現(xiàn)的基于WebGL的交互式參數(shù)化三維樹木建模原型系統(tǒng)能夠靈活地調(diào)節(jié)樹木的姿態(tài)，分層控制樹木的結(jié)構(gòu)，交互簡單、直觀，易于構(gòu)建豐富多樣的樹木模型。

然而，本文的原型系統(tǒng)在真實感表達方面還有待增強，后續(xù)將從樹皮凹凸、樹葉光照、陰影等方面進一步開展工作以獲得絢麗的渲染效果。

[1] MATSUDA K, LEA R. WebGL programming guide: interactive 3D graphics programming with WebGL[M]. U.S. Corporate and Government Sales: Addison Wesley, 2013.

[2] De REFFYE P, EDELIN C, FRANCON J, et al. Plant models faithful to botanical structure and development[C]. Proceedings of SIGGRAPH’88, 1988: 151-158.

[3] WEBER J,PENN J.Creation and rendering of realistic trees[C]. Proceedings of SIGGRAPH 1995, 1995: 119-128.

[4] PRUSINKIEWICZ P, MüNDERMANN L, KARWOWSKI R, et al. The use of positional information in the modeling of plants[C]. Proceedings of the 28th Annual Conference on Computer Graphics and Interactive Techniques,2001:289-300.

[5] 李志杰, 林定, 宋輝,等. 一種符合植物生理學(xué)的快速落葉模擬方法[J]. 微型機與應(yīng)用, 2015,34(13):77-79.

[6] BOUDON F, PRUSINKIEWICZ P, FEDERL P, et al. Interactive design of bonsai tree models[J]. Computer Graph Forum (S0167-7055), 2003, 22(3): 591-600.

[7] 劉彥宏, 王洪斌, 杜威,等. 基于圖象的樹類物體的三維重建[J]. 計算機學(xué)報, 2002, 25(9)：1-6.

[8] Quan Long, Tan Ping, Zeng Gang, et al. Image-based plant modeling[J]. ACM Transactions on Graphics (S0730-0301), 2006, 25(3): 599-604.

[9] ZAKARIA M N, SHUKRI S R M. A sketch-and-spray interface for modeling trees[J]. Lecture Notes in Computer Science, 2007: 23-35.

[10] LONGAY S, RUNIONS A, BOUDON F, et al. TreeSketch: interactive procedural modeling of trees on a tablet[C]. Eurographics Symposium on Sketch-Based Interfaces and Modeling, 2012: 107-120.

[11] 林定, 陳崇成, 唐麗玉,等. 基于參數(shù)曲線及其所圍面積的三維樹木建模[J]. 福州大學(xué)學(xué)報(自然科學(xué)版),2011(3):367-374.

2017-03-31)

徐穎(1991-)，通信作者，女，碩士研究生，主要研究方向：地理信息系統(tǒng)工程。E-mail：mandy19126@126.com。

林定(1977-)，女，博士，助理研究員，主要研究方向：虛擬地學(xué)可視化。

黃國新(1994-)，男，碩士研究生，主要研究方向：地理信息系統(tǒng)工程。

Parametric modeling of 3D tree based on WebGL

Xu Ying, Lin Ding, Huang Guoxin

(Fuzhou University Spatial Information Research Center, Fuzhou 350116, China)

In this research, a WebGL-based prototype for parametric modeling of tree was introduced, and topology and branch structure of tree was considered to establish a hierarchy parameter set, providing the flexible and intuitive operation to explore the 3D scene, which can model tree based on morphological characteristics. This method solved the problem that the existing online tree modeling applications are difficult to control tree silhouette. The experiments proved our prototype is intuitive, flexible and interactive, meanwhile, through the convenient operation it provides fluent user experience.

WebGL; parametric modeling; 3D visualization; tree

TP391.9

A

10.19358/j.issn.1674- 7720.2017.22.029

徐穎，林定，黃國新.基于WebGL的參數(shù)化三維樹木建模J.微型機與應(yīng)用，2017,36(22)：109-111，114.

國家自然科學(xué)基金項目(31200430)；福建省科技引導(dǎo)性項目(2016Y0058)