WebGL 概述

WebGL 是一项在网页上绘制和渲染复杂三维图形（3D 图形），并允许用户与之进行交互的技术，在传统上只有高配置的计算机或专用的游戏机才能渲染三维图形，而现在随着个人计算机与浏览器的性能越来越强，使用便捷通用的 Web 技术创建和渲染三维图形已经成为可能。HTML5 作为目前最新的 HTML 标准，扩展了传统 HTML 的特征，如二维图形、网络传输、本地数据储存等，HTML5 时代的到来使浏览器正在迅速地从简单的展示工具转变为复杂的应用平台，人们希望网页不仅仅由二维图组成，所以 WebGL就顺着时代的召唤到来了。

WebGL 的起源

在个人计算机上使用最广泛的两种三维图形渲染技术使 Direct3D 和 OpenGL。Direct3D 是微软DirectX 技术的一部分，是一套由微软控制的编程接口（API），主要用在 Windows 平台；而 OpenGL 由于其开放和免费的特征，在多种平台上都有广泛地使用，后来 Windows 对 OpenGL 也提供了良好的支撑，开发者也可以使用它来代替 Direct3D。

OpenGL 最初是由 SGI（Silicon Graphics Inc）开发，并在 1992 年发布为开源标准。多年以来，OpenGL 发展了数个版本，并对三维图形开发、软件产品开发、甚至电影制作产生了深远的影响。虽然 WebGL 根植于 OpenGL，但它实际上是从 OpenGL 的一个特殊版本 OpenGL ES 派生出来的，OpenGL ES 主要专用于嵌入式计算机、智能手机、家用用洗等设备。OpenGL ES 于 2003～2004 年被首次提出，并在 2007 年（ES 2.0）进行了两次升级，WebGL 是基于 OpenGL ES 2.0 的。这几年采用 OpenGL ES 技术的电子设备的数量大幅度增长，尤其是移动端设备。OpenGL ES 成功被这些设备采用的部分原因是，它在添加新特性的同时从 OpenGL 中移除了许多陈旧的旧特性，这使它在保持轻量级的同时，仍具有足够的能力来渲染出精美的三维图形。

WebGL 的优势

这些年随着 HTML 的发展，网页由最初简单的静态页面变得越来越复杂，从引入 JavaScript 等脚本语言，HTML 开始提供一些动态的内容，并具有一定的交互性。现在出现了更强大的 HTML5，它可以使用 canvas 或 svg 标签在网页上绘制二维图形，以呈现更丰富的内容如：在线的在线作图 ProcessOn、原型设计 墨刀 以及提供一整套的在线办公软件的 Zohu 等工具。

WebGL 则走的更远，它允许 JavaScript 在网页上显示和操作三维图形。有了 WebGL 技术，开发三维的客户端界面、运行三维的网页游戏，对互联网上的海量数据进行三维可视化都成了可能，无需考虑平台问题、无需繁琐的安装过程、无需经堂备份自己的文件到云端来实现共享。虽然 WebGL 强大到令人惊叹，但使用这项技术进行开发却异常简单，让我们一步步探索吧。

WebGL 程序结构

在写 WebGL 页面时需要三种语言：HTML5／（CSS）、JavaScript和 GLSL ES（着色器语言），因为通常 GLSL ES 是以字符串的形式在 JavaScript 中编写的，实际上在写 WebGL 页面时结构还是和平常一样。所以，虽然 WebGL 页面更加复杂了一些，但是仍然保持着和传统页面一样的风格。