基于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)