前言

WebGL是一项用以在浏览器中绘制、显示三维计算机图形（“三维图形”），并与之交互的技术。曾经只有高端的计算机或专门的游戏终端才能渲染三维图形，因为这需要大量复杂的编程才能实现，然而随着个人计算机，以及——更重要的——浏览器的性能的提高，使用网页技术渲染三维图形也已经成为可能。本书全面讲授了WebGL技术，带领读者一步一个脚印地编写WebGL程序。和OpenGL与Direct3D不同，WebGL程序存在于网页中，可以在浏览器里直接执行，而不必安装任何特殊的插件或库。因此，你只需要最普通的计算机环境，就可以开始进行开发或运行示例程序；而且，一切都是基于网页的，你可以方便地将WebGL程序作为网页发布出去。此外，由于WebGL是基于网页的，所以该技术的愿景之一，就是同一个程序能够通过浏览器运行在多种设备上，比如智能手机、平板电脑、游戏终端等。这份远大的野心，意味着WebGL技术期望对开发者社区产生深远的影响，并在不久的将来成为图形开发的最佳选择之一。

本书的读者群

在写本书时，我希望本书的读者群主要由两类人构成：希望在网页中加入三维图形的Web开发者，以及希望将三维图形搬上网页环境的三维图形开发者。如果你是前一类读者，即Web开发者，你可能对标准的Web技术，如HTML和JavaScript，已经很熟悉了，你希望知道如何向网页或Web程序中插入三维图形，那么WebGL将会向你提供简单且强大的解决方案，你可以使用三维图形来增强Web程序的用户界面（UI），或者开发更复杂的三维程序，比如运行在浏览器中的三维网页游戏。

如果你是第二类目标读者群中的一员，你可能已经具有使用主流三维应用程序接口（API），如Direct3D或OpenGL进行开发的经验，你希望知道如何在网页环境中应用这些知识。我想你一定对开发出能够在现代浏览器中运行的复杂三维程序更感兴趣。

然而，这本书也适用于更加广泛的读者群。因为本书假定读者不具有任何关于二维或三维图形编程的背景，所以几乎是手把手地向读者传授WebGL的特性。因此，我想以下读者可能也会对本书感兴趣：

●所有希望了解网页技术与图形技术交集的程序员；

●学习二维或三维图形学的学生，因为WebGL只需要一个浏览器即可上手，无须安装一整套开发环境。

●探索最前沿技术，试图在安卓手机、iPhone等移动设备的最新版浏览器中有所作为的Web开发者。

本书涵盖的内容

本书涵盖了WebGL 1.0 API包含的几乎所有的JavaScript方法，你可以学到WebGL、HTML、JavaScript是如何联系的，如何建立和运行WebGL程序，如何使用JavaScript控制复杂的三维“着色器”程序。本书详细讲述了如何编写顶点着色器和片元着色器，如何实现该机的渲染技术，如逐顶点光照、阴影、基本的交互操作（如选中三维物体）等。本书的每一章将开发若干个可用的，具有一定功能的WebGL示例程序，并通过这些示例程序介绍WebGL的关键特性。在读完本书之后，你就能够编写出能够充分利用浏览器的编程能力和图形硬件的WebGL程序。

本书的结构

本书一步一步地介绍了WebGL API以及相关的Web API，以帮助你建立起关于WebGL的知识结构。

第1章——WebGL概述

这一章简要介绍了WebGL，讨论了WebGL的历史起源，概括了它的一些关键特性和优点。这一章还介绍了WebGL与HTML5以及 JavaScript的关系，介绍了我们可以使用哪些浏览器开始探索WebGL。

第2章——WebGL入门

这一章通过建立几个示例程序，依次介绍了＜canvas＞元素和WebGL的核心函数。每个示例都是用JavaScript编写的，并使用WebGL在网页上绘制一个简单的形状。示例程序突出了以下几点：（1）WebGL如何使用＜canvas＞元素并在其上绘图；（2）HTML文件和用JavaScript编写的WebGL代码文件的连接；（3）简单的WebGL绘图函数；（4）着色器程序在WebGL中的地位。

第3章——绘制和变换三角形

这一章在之前的基础上，探索了如何绘制较为复杂的图形，如何操作三维空间中的这些图形。这一章主要包括：（1）三角形的关键作用，以及WebGL对绘制三角形的支持；（2）使用多个三角形绘制出其他图形；（3）使用方程对三角形进行基本的变换，如平移、旋转和缩放等；（4）矩阵可以简化变换的运算。

第4章——高级变换和动画基础

这一章将更加深入地探索变换的原理，并开始将变换用于动画中。你将：（1）了解一个矩阵变换库，该库将矩阵变换的数学运算细节隐藏了起来；（2）使用矩阵库将多次变换组合起来；（3）在矩阵库的帮助下，探索如何实现简单的动画。这些技术是构建复杂WebGL程序的基石，在后面几章的示例程序中都会用到。

第5章——颜色和纹理

这一章在之前几章的基础上，进一步深入研究了以下三个问题：（1）除了顶点坐标数据，我们还可以将颜色信息等其他数据传入顶点着色器；（2）顶点着色器和片元着色器之间的光栅化过程，将图形转化为了片元；（3）如何将图像（或纹理）贴到图形或模型的表面。这一章是有关WebGL核心功能的最后一章。

第6章——OpenGL ES着色器语言（GLSL ES）

这一章不涉及WebGL示例程序，而是详细介绍了OpenGL ES着色器语言（GLSL ES）的核心特性，包括：（1）数据、变量、变量类型；（2）矢量、矩阵、结构体、数组和取样器；（3）运算符、流程控制和函数；（4）attribute变量、uniform变量和varying变量；（5）精度限定字；（6）预处理过程和编程准则。在这一章的最后，你将对GLSL ES有很好的理解，并学会使用该语言来编写各种着色器。

第7章——进入三维世界

这一章将带领读者首次进入三维世界，探索如何将以前学到的一切从二维空间搬到三维空间中。具体地，你将探索：（1）如何在三维空间中表示观察者；（2）如何控制可视的三维空间体积；（3）裁剪；（4）物体的前后关系；（5）绘制一个三维物体——立方体。所有这些问题都会对三维场景的渲染和最终呈现给用户的样子产生重大的影响。为了构建三维场景，深入理解并掌握它们是必须的。

第8章——光照

这一章主要研究如何实现光照，研究了不同类型的光源及其对三维场景产生的效果。如果想要使三维场景逼真，光照是必需的，因为光照会增强场景的深度感。

本章讨论了以下几个关键点：（1）着色、阴影和不同类型的光源产生的光，包括点光源光、平行光和环境光；（2）三维场景中两种主要的反射光类型：漫反射和环境反射；（3）着色的细节，以及如何实现光照效果时场景更像是三维的。

第9章——层次模型

这一章是关于如何使用WebGL的核心特性的最后一章。在这一章结束时，你将掌握WebGL的所有基础知识，并完全能够创建逼真和可交互的三维场景了。这一章的重点是层次模型。层次模型能够使复杂模型，如游戏角色、机器人，甚至是真人模型产生动作，而不仅仅是生硬的立方体。

第10章——高级技术

这一章在整本书的基础上，介绍了若干有用的高级技术，提供了一些关键的工具，帮助你构建出可交互的、令人惊叹的三维图形。每一项技术都通过一个完整的示例来展示，你可以在自己的WebGL程序中重用其中的代码。

附录A——WebGL无须交换缓冲区

这篇附录解释了为什么WebGL无须像OpenGL那样交换缓冲区。

附录B——GLSL ES 1.0内置函数

这篇附录提供了一份包含所有OpenGL ES着色器语言内置函数的参考列表。

附录C——投影矩阵

这篇附录提供了Matrix4.setOrtho（）函数和Matrix4.setPerspective（）函数生成的投影矩阵。

附录D——WebGL/OpenGL：左手还是右手坐标系？

这篇附录介绍了WebGL和OpenGL的内在坐标系统，并从技术上解释了为什么我们说WebGL和OpenGL对采取左手坐标系或右手坐标系是中立的。

附录E——逆转值矩阵

这篇附录解释了模型矩阵的逆转值矩阵为什么可以用来变换法向量。

附录F——从文件中加载着色器

这篇附录解释了如何从文件中加载着色器程序。

附录G——世界坐标系和本地坐标系

这篇附录介绍了两种不同的坐标系统，以及如何在三维图形中使用它们。

附录H——关于WebGL的浏览器设置

这篇附录介绍了浏览器的高级设置方法，以确保WebGL程序能够正确运行，以及程序不能正确运行时的应对方法。

支持WebGL的浏览器

在撰写本书之时，WebGL被Chrome、Firefox、Safari、Opera浏览器支持。遗憾的是，有一些浏览器如IE9（Microsoft Internet Explorer）并不支持WebGL。在本书中，我们使用Google发布的Chrome浏览器。Chrome不仅支持WebGL，还支持一些有用的特性，如调试WebGL的控制台函数。我们已经在以下环境中检查过本书的所有示例程序，都能够正确运行。在任何支持WebGL的浏览器中，这些程序也应当能够正确运行。

参考这个页面：www.khronos.org/webgl/wiki/BlacklistsAndWhitelists，以获取最新的、关于可能导致问题的硬件列表。

为了不受阻碍地开始学习本书，你应该去下载Chrome（或者你中意的其他浏览器），然后进入本书的帮助网站https://sites.google.com/site/webglbook/。

在第3章，点击示例程序文件HelloTriangle.html，如果你看到如图P.1所示的红色三角形，就说明WebGL正常工作了。

如果你没有看到红色三角形，那么请参考附录H，改变你的浏览器设置以加载WebGL程序。

示例程序和相关链接

本书所有的示例程序都可以在帮助站点上找到。出版社的官方站点位于www.informit.com/title/9780321902924，而作者的站点则位于https://sites.google.com/site/webglbook。

后一个站点包含了本书所有示例程序的链接，你可以点击链接并直接运行每个程序。

如果你想修改示例程序，可以从上述任意一个站点下载包含所有本书所有示例程序的压缩文件到你自己的磁盘上。你会发现每个程序都包含一个HTML文件和一个相应的JavaScript文件，二者在同一个文件夹下。比如，示例程序HelloTriangle，就包含HelloTriangle.html和HelloTriangle.js。双击HelloTriangle.html就可以运行该程序。

排版约定

本书遵循以下排版约定：

●粗体Bold——术语或重要词汇首次出现。

●斜体Italic——函数参数名、或引用名、程序名或文件名。

●Monospace字体——示例代码、方法、函数、变量、命令行选项、JavaScript对象名称、HTML标签名称。