基于WebGL的动态地形实时绘制

2018-01-09 13:46郑顾平白若林

软件导刊 2017年12期

郑顾平+白若林

摘要：在3D场景绘制中，需要安装插件才能够实现绘制效果，WebGL作为无须考虑插件的绘图标准将3D场景带入浏览器。针对动态地形绘制中由插件造成的实用性与灵活性问题，采用WebGL标准进行动态地形绘制。使用JavaScript文件格式实现几何剪切图算法的绘制过程，改进there.js库中的固有类实现物体之间的碰撞检测问题，再通过顶点着色器与片元着色器在GPU中完成地形绘制。实验结果证明，在WebGL上能够实现实时性与真实感并存的动态地形效果。

关键词：WebGL；地形绘制；Geometry Climaps

DOIDOI：10.11907/rjdk.172506

中图分类号：TP317.4

文献标识码：A 文章编号：1672-7800（2017）012-0202-03

Abstract：3D scene rendering need to install the plug-in to be able to achieve the rendering effect. WebGL is a drawing standard that does not have to worry about plug-in and brings 3D into the browser.WebGL standard is used to map the dynamic terrain aimed at the problem of practicability and flexibility in dynamic terrain rendering. Through the study of Geometry Clipmaps， it is implemented using JavaScript file format. Improved the existing class in there.js to achieve the collision detection between objects， and then through the vertex shader and chip shader to complete the terrain rendering. The experiments show WebGL is able to achieve dynamic terrain with real-time and realism coexist.

Key Words：WebGL；terrain rendering；Geometry Climaps

0 引言

地形環境下的动态地形绘制技术是3D场景建模中的一个重要分支，在军事仿真、经济、生活、娱乐等领域获得了普遍应用，例如军事中战场环境的三维视景仿真、三维游戏、影视特效制作等[1]。对军事战场的视景仿真而言，物理模型与地形状态有直接或间接的相互作用，例如车辆运行时在地面留下车辙印、炮弹弹坑等。现在使用较多的Web3D技术在使用时需要安装插件，对3D体验的实用性、灵活性造成了负面影响。WebGL技术作为一种3D绘图标准，解除了插件带来的困扰，将3D内容带入浏览器，并通过JavaScript与电脑中的图形硬件进行交流。本文针对在3D建模场景中，如何快速有效地使用WebGL标准实现动态地形的绘制展开研究。

1 相关技术

本文主要采用的编程技术是HTML，3D绘图标准是WebGL，地形算法是几何剪切图法（Geometry Clipmaps），并通过JavaScript、CSS等技术来实现3D网页界面的编写。

WebGL是在OpenGL ES 2.0 基础上发展而来的，是一个跨平台、免费用于在Web浏览器创建三维图形的API[2]。WebGL结合了JavaScript和HTML5，可以直接在HTML5的

由于WebGL是一种低等级的原生API，只有经验丰富的3D程序员才可以完美驾驭WebGL，所以衍生出了一系列WebGL框架，应用最广泛的是there.js[4]。在there.js中，通过设置场景、对象、着色器、摄像机进行图形绘制。在图形绘制过程中，用GLSL这一着色器语言完成着色器工作。WebGL支持的着色器只有顶点着色器与片元着色器。Three.js允许不定义着色器，而是采用默认方法渲染，但在需要时，又可以使用自定义着色器。在绘制大规模地形时，可以通过there.js的默认方法渲染，当地形发生变化时，再通过设置顶点着色器和片元着色器进行渲染。

2 基于WebGL的动态地形绘制设计

2.1 算法描述

Geometry Clipmap算法是由斯坦福大学的Losasso和微软研究组的Hoppe首次引入的、基于GPU的地形算法[5]。Geometry Clipmap算法是基于网格的LOD技术，将高程图过滤成共有L层的Clipmap金字塔，如图1所示。选择层次是依据视点距离，同一距离的地形缓存进同一层次当中，组成一组嵌套的规则网格，然后以视点为中心，随视点移动而移动。在渲染过程中，随着视点的移动，将更新的数据送入显卡进行渲染。按照规则，层数L越小，系统渲染效率越高；相反，层数L越大，系统效率越低。通过GPU的顶点着色器对高度图进行顶点纹理采样，获得高程数据后，使用GPU的光栈管道处理高程数据[6-7]。

Geometry Clipmap算法使用的数据结构存储在顶点纹理中，在金字塔每层中有N*N个几何数据采样点，每个点包含3个数据（x，y，z），x、y为常量顶点数据，z为高程图高度存储值。

地形的初始绘制利用Three.js提供的THREE.PlaneBufferGeometry加以实现[8]。在WebGL标准中采用右手笛卡儿坐标系，所以三维地形的高程效果由THREE.PlaneBufferGeometry顶点数组vertices 中的y值决定，对应Geometry Clipmap算法中的z高程图高度存储值，实时检测地形与其它模型发生的碰撞，根据其受力大小可推算出地形发生的形变大小，进而更新平面顶点数组vertices 中的y值大小，代码如下：

为了在WebGL标准上实现Geometry Clipmap算法，创建Terrain函数，通过高程数据创建地图大小、Clipmap层次与分片数绘制地形，其中高程数据从高度图数据中进行采集。

2.2 碰撞检测算法

碰撞检测在游戏设计、3D电影特效制作、机器人等领域有着广泛应用[9]。导弹在落到地面后才会生成弹坑现象，人在地面走过之后才会在经过处留下脚印，在实现动态地形绘制时，需要检测物体与地面是否发生过碰撞。本文采用THREE.Raycaster类在WebGL中实现碰撞检测。

THREE.Raycaster是there.js库中用来实现對象拾取的类，通过Raycaster获得鼠标事件发生位置的图形对象。Raycaster从字面上即可理解其工作原理是：从某个方向发射一条射线，穿过鼠标所在的点，则这条射线经过的对象即是鼠标点击的对象。在使用Raycaster检测碰撞时，考虑方向不止一条。以需要进行碰撞检测的物体A中心为起点，向各个顶点（vertices）发出射线，然后检查射线是否与其它物体相交。若射线与其它物体相交，检查最近的一个交点与射线起点间的距离，如果该距离比射线起点至物体顶点间的距离小，则说明发生了碰撞。如上文所述的碰撞检测只适用于中心物体形状为球形的状况，因此在绘制车辙时选取车辆为中心物体，可避免出现车辆碰到墙面导致无法检测的情况。如图2所示，当d≤r时，物体与地面发生碰撞。为了解决物体与物体之间的碰撞，首先需要将车辆的本地坐标乘以变换矩阵，得到车辆在世界坐标系中的坐标值，然后使用THREE.Raycaster创建检测射线，通过.intersectObject检测光线是否与物体相交，若相交，返回交点处坐标。具体代码如下：

3 动态地形实现

动态地形绘制流程如图3所示。

通过上述内容，在计算机端完成了Web端动态地形的实现。硬件配置为：CPU Intel Core i5 450 2.4 GHz，GBRAM，ATI Mobility Radeon HD 5450显卡，4G内存。软件环境为：Windows 7，WebGL，Html5。

图4为通过WebGL使用Geometry Clipmaps算法实现的地形绘制效果，本实验使用一张1 024*1 024的dds格式高程图。将L设为4，N设为255。为了更方便地实现动态地形绘制，图5是在平面中实现的车辙效果。由于模型的数据量较大，载入模型的绘制帧频率（如车辙绘制效果图）平均在45PFS左右，静态地形绘制时，帧频率能够保证在60PFS左右，都能成功地进行图形绘制。

4 结语

本文实现了基于WebGL的动态地形渲染与绘制，通过Geometry Clipmaps算法在Web上完成了车辙地形绘制的效果。首先对Geometry Clipmaps算法及车辆与地形的碰撞检测进行了研究，通过对THREE.Raycaster的改进，使其能够完成物体之间的碰撞检测并返回碰撞点坐标，进而通过“压力沉陷”公式得到下陷深度，改进对应点的高程值，再通过顶点着色器与片元着色器完成地形绘制。由于there.js的开放性，整个绘制过程具有开放、免插件、跨平台的优势，为用户带来了全新的良好体验。

参考文献：

[1] 牛艺博.基于WebGL的地理信息三维可视化技术研究[D].兰州：兰州交通大学，2015.

[2] 刘爱华，韩勇，张小垒，等.基于WebGL技术的网络三维可视化研究与实现[J].地理空间信息，2012，10（5）：79-81.

[3] 黄若思，李传荣，冯磊，等.基于几何的WebGL矢量数据三维渲染技术研究[J].遥感技术与应用，2014，29（3）：463-468.

[4] ALEXEY DEMIN，代沅兴，李新，等.基于HTML5与WebGL的机器人3D环境下的运动学仿真[J].东北大学学报：自然科学版，2014，35（4）：564-568.

[5] LOSASSO F， HOPPE H. Geometry clipmaps： terrain rendering using nested regular grids [C].Proceedings of ACM Transactions on Graphics. New York： ACM Press， 2004：769-776.

[6] 蔡兴泉，李凤霞，李立杰，等.基于三角带模板的车辙实时可视化方法[J].系统仿真学报，2006，18（10）：2843-2846，2851.

[7] 郑顾平，邢玥，张荣华.一种基于GPU的弹坑实时绘制方法[J].图学学报，2016，37（4）：451-456.

[8] 任宏康，祝若鑫，李风光，等.基于Three.js的真实三维地形可视化设计与实现[J].测绘与空间地理信息，2015，38（10）：51-54.

[9] 张荣华，郑顾平.高逼真动态地形实时绘制中碰撞检测的设计与实现[J].计算机应用，2006，26（11）：2773-2774，2777.

[10] BEKKER M G. Introduction to terrain-vehicle systems [M]. Michigan： The University of Michigan Press， 1969.

（责任编辑：黄健）endprint