基于WebGL的參數化三維樹木建模*

徐 穎，林 定，黃國新

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

基于WebGL的參數化三維樹木建模*

徐 穎，林 定，黃國新

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

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

WebGL；參數化建模；三維可視化；樹木

0 引言

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

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

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

圖1 使用WebGL的客戶端架構

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

1 相關工作

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

3DFlora可以創建樹木、盆景、農作物等各類植物模型，提供多種植物模板簡化建模過程，支持實時調節參數改變模型的形態結構特征，模型數據可導出為OBJ格式。

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

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

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

2 參數化樹木建模

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

2.1應用程序框架

為了實現交互式參數化三維建模原型系統，本文采用如圖2所示的建模架構。

圖2 基于WebGL的參數化樹木建模框架

2.2拓撲結構

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

圖3 樹模型的拓撲結構

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

2.3幾何形態參數

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

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

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

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

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

(1)枝條的構建

鑒于枝條直接影響樹木的形態，本文采用廣義的圓柱體表達樹木枝干，將其分枝分節構建，提取形態結構參數。

首先，根據分枝模式計算和設置相關的拓撲結構參數，由樹木模型的初始值或界面滑動條交互控制生成樹木的枝干骨架，如圖4所示。

圖4 枝干分解模型

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

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

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

(2)葉的構建

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

3 實驗與討論

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

(1)實驗結果

靈活的交互式模型設計：控制參數化三維樹木建模的原型系通過默認的參數集生成樹木模板，用戶可以調節相關的參數，實時渲染模型，創建滿意的效果。圖5為本文生成的樹模型及其參數信息。

圖5 樹模型及其參數

系統支持場景的縮放、模型的平移與旋轉、相機控制及光照紋理等效果。

(2)討論

由實驗結果可知，本文實現的基于WebGL的交互式參數化三維樹木建模原型系統能夠靈活地調節樹木的姿態，分層控制樹木的結構，交互簡單、直觀，易于構建豐富多樣的樹木模型。

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

[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] 李志杰, 林定, 宋輝,等. 一種符合植物生理學的快速落葉模擬方法[J]. 微型機與應用, 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]. 計算機學報, 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] 林定, 陳崇成, 唐麗玉,等. 基于參數曲線及其所圍面積的三維樹木建模[J]. 福州大學學報(自然科學版),2011(3):367-374.

2017-03-31)

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

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

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

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的參數化三維樹木建模J.微型機與應用，2017,36(22)：109-111，114.

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