  WebGL，是一项用来在网页上绘制和渲染复杂三维图形（3D 图形），并允许用户与之进行交互的技术。传统意义上来说，只有高配置的计算机或专用的游戏机才能渲染三维图形。而现在，随着个人计算机和浏览器的性能越来越强，使用便捷通用的 Web 技术创建渲染三维图形已经成为可能。WebGL 技术结合了HTML5和 JavaScript，允许开发者在网页（Web 页面）上创建和渲染三维图形。这项技术将在开发下一代易用直观用户界面和生产互联网内容上发挥重要作用，图 1.1 中展示了例子。可以预见，在接下来的若干年中，WebGL 技术将在传统的个人计算机、消费电子产品（如智能手机、平板电脑等）等多种电子设备上有所应用。 
图1.1

HTML5 作为最新的 HTML 标准，扩展了传统 HTML 的特性，如二维图形、网络传输，本地数据存储等。HTML5 时代的到来使浏览器正在迅速地从简单的展示工具转变为复杂的应用平台，人们希望网页不仅仅由二维图形组成。WebGL 被设计出来的目的，就是在网页上创建三维的应用和用户体验。 从传统意义上来说，为了显示三维图形，开发者需要使用 C 或 C++ 语言，辅以专门的计算机图形库，如 OpenGL 或 Direct3D，来开发一个独立的应用程序。现在有了WebGL，我们只需要向已经熟悉的（如果你是一名 Web 前端开发者）HTML 和 JavaScript 中添加一些额外的三维图形学的代码，就可以在网页上显示三维图形了。 WebGL 是内嵌在浏览器中的，你不必安装插件和库就可以直接使用它。而且，因为它是基于浏览器（而不是基于操作系统）的，你可以在多种平台上运行 WebGL 程序，如高配置的个人计算机，或消费类电子产品（如平板电脑和智能手机）。

1. WEBGL的优势

这些年，随着 HTML 的发展，网页变得越来越复杂。最初，HTML 仅仅是静态的内容，后来引入了 JavaScript 等脚本语言，HTML 开始能提供一些动态的内容，并具有一定的交互性。现在出现了更强大的 HTML5，它可以使用 canvas 标签在网页上绘制二维图形，以呈现更丰富的内容，如跳舞的卡通小人、根据输入实时更新的地图等等。 WebGL 则走得更远，它允许 JavaScript 在网页上显示和操作三维图形。有了 WebGL的帮助，开发三维的客户界面、运行三维的网页游戏、对互联网上的海量数据进行三维可视化都成为了可能。虽然 WebGL 强大到令人惊叹，但使用这项技术进行开发却异常简单∶

●你只需一个文本编辑器和一个浏览器，就可以开始编写三维图形程序了。

●你可以使用通用的 Web 技术发布三维图形程序，展示给你的朋友和其他开发者。

● 你可以充分利用浏览器的功能。

● 互联网上有大量现成的资料，它们可以帮助你学习 WebGL，编写三维程序。 使用文本编辑器开发三维应用

开发 WebGL 应用的一个方便之处在于，你不用去搭建开发环境。如前文所述， WebGL 是内嵌在浏览器中的，你不需要常规的开发工具，如编译器、连接器，就能编写 WebGL 程序。最低要求是，你只需要一个支持 WebGL 的浏览器来运行本书中的示例程序。如果你想修改示例程序或编写你自己的程序，仅仅还需要一个通用的文本编辑器（比如 Notepad 或 TextEdit）。图 1.2 展示了 Chrome 浏览器中运行的 WebGL 程序，和在 Notepad 中打开的 HTML 文件。包含 WebGL 代码的 JavaScript 文件（Rotateobject.js）会通过HTML 文件载入，你也需要用文本编辑器来修改和编写 JavaScript代码。

2. 开发 WebGL 程序用到的工具

轻松发布三维图形程序 传统的三维图形程序通常使用C或C++ 等语言开发，并为特定的平台被编译成二进制的可执行文件。这意味着程序不能跨平台运行，比如说，Mac 版本的程序无法在 Windows 或Linux 上运行。而且，为了运行三维图形程序，用户通常不仅需要安装程序本身，还需要安装程序所依赖的库，这无疑提高了分享成果的门槛。 相比之下，WebGL 程序由 HTML 和 JavaScript 文件组成，你只需将它们放在 Web服务器上，或者通过电子邮件发送 HTML 和 JavaScript 文件（就像发送普通的网页一样），就能方便地分享你的程序。

$LXKTI5FET(%}TJQXW{4YPO.png

3. WebGL的起源

WebGL 的技术规范继承自免费和开源的 OpenGL 标准，而后者在计算机图形学、电子游戏、计算机辅助设计等领域已被广泛使用多年。在某种意义上，WebGL 就是"Web版的 OpenGL"。而 OpenGL在过去的 20年中被用于各种平台，你可以找到数不尽的参考书籍、材料和示例程序来帮助你加深对 WebGL 的理解。

在个人计算机上使用最广泛的两种三维图形渲染技术是 Direct3D 和 OpenGL。 Direc3D 是微软 DirectX 技术的一部分，是一套由微软控制的编程接口（API），主要用在 Windows平台;而 OpenGL由于其开放和免费的特性，在多种平台上都有广泛地使用∶它可以在 Macintosh 或 Linux 系统的计算机、智能手机、平板电脑、家用游戏机（如 PlayStation和 Nintendo）等各种电子设备上使用。Windows 对 OpenGL 也提供了良好的支持，开发者也可以用它来代替 Direct3D。从 2.0 版本开始，OpenGL 支持了一项非常重要的特性，即可编程着色器方法（programmable shader functions）。该特性被 OpenGL ES 2.0继承，并成为了 WebGL 1.0 标准的核心部分。

着色器方法，或称着色器，使用一种类似于C 的编程语言实现了精美的视觉效果。本书将一步步阐述着色器，帮助你快速掌握 WebGL。编写着色器的语言又称为着色器语言（shading language），OpenGL ES 2.0 基于 OpenGL 着色器语言（GLSL），因此后者又被称为 OpenGL ES 着色器语言（GLSL ES）。WebGL 基于 OpenGL ES 2.0，也使用 GLSL ES 编写着色器。

OpenGL 规范的更新和标准化由 Khronos 组织（一个非盈利的行业协会，专注于制定、发布、推广多种开放标准）负责。2009年，Khronos 建立了WebGL 工作小组，开始基于 OpenGL ES 着手建立 WebGL 规范，并于 2011 年发布了WebGL 规范的第1个版本。本书主要基于第 1版的 WebGL 规范编写，后续更新目前都是以草案的形式发布，如有需要，也可参考 '。

在 HTML 中，动态网页包括 HTML 和 JavaScript 两种语言。引入 WebGL 后，还需要加入着色器语言 GLSL ES，也就是说，WebGL 页面包含了三种语言∶HTML5（超文本标记语言）、JavaScript，和 GLSL ES。

我们来看一个超简单的GLSL顶点着色器实例

attribute vec3 aColor;
varying vec4 vColor;
void main(void) {
    vColor = aColor;
    gl_Position = aPosition;
}

一个简单的片元着色器实例

void main(void){
    gl_FragColor = vColor;
}

webgl的概述就先到这里，下一章节为WebGl的入门

WebGL概述

1. WEBGL的优势

2. 开发 WebGL 程序用到的工具

3. WebGL的起源

WebGL概述 