Page 173 - 测绘与空间地理信息研究

第六章 基于 WebGL 的地理信息数据三维可视化方法

相结合的 3D 绘图协议。OpenGL ES 是 OpenGL 3D ImageAPI 的一个子集，支持
嵌入式设备环境，如手机，平板电脑和游戏机。通过 JavaScript 绑定 OpenGLES
中之后，HTML5Canvas 就可以通过 WebGL 进行 3D。这种方式，可以让 Web 开

发人员能够更轻松的构建 3D 场和景模型，并能够让图形图像更流畅地显示出来。
总而言之，WebGL 技术大大提高了网页开发渲染插件的效率，它可用于设计构
建大型网络 3D 网游。
WebGL（Web Graphics Library）是一种 3D 绘图协议，这种绘图技术标准允

许把 JavaScript 和 OpenGLES 结合在一起。OpenGLES 是 OpenGL 3D ImageAPI
的一个子集，支持嵌入式设备环境，如手机，平板电脑和游戏机。通过增加
OpenGLES 的一个 JavaScript 绑定，WebGL 为 HTML5Canvas 提供 3D 渲染加速。
通过这种方式，Web 开发人员可以充分利用计算机显卡在浏览器中更流畅地显示

3D 场景和模型。可见 WebGL 技术消除了开发某些特定网页需要下载渲染插件的
不便，广泛地用于构建具有 3D 效果的动态网站页面，设计逼真的 3D 网页游戏等。
WebGL1.0 基于 OpenGLES2.0，并提供了 3D 图形的 API。它使用 HTML5 的
Canvas 并允许利用文档对象模型接口。WebGL2.0 基于 OpenGLES3.0，确保了提

供许多选择性的 WebGL1.0 扩展，并引入新的 API。可利用部分 JavaScript 实现
自动存储器管理。目前支持 WebGL 的浏览器有：Firefox4+、GoogleChrome9+、
Opera12+、Safari5.1+ 和 InternetExplorer11+，如图 6-3 所示（绿色表示支持，红
色表示不支持）：

图 6-3 WebGL 浏览器版本支持一览

（二）WebGL 渲染机理
渲染管线（也称为图形流水线）类似于提高工厂生产率和效率的流水线，用

来提高计算机图形显卡的工作效率。WebGL 继承了 OpenGL 界面的大部分设计
思想和功能，主要思想是将各种复杂的图形分解成点、线和三角形三种几何图元。
通过渲染管线以并行的方式进行图形硬件加速，最后在 canvas 上绘制。具体过
程如图 6-4 所示。

·163·