无需插件，用WebGL就可以达到将网页3D化的目的，尤其是在游戏、用户交互和可视化信息等方面表现的十分出色。即使你没有任何HTML5、JavaScript、3D 图像制作、数学或 OpenGL知识，也可以通过学习本书内容的对交互式WebGL 3D编程快速上手。
这是HTML5的优势之一，也是游戏及其他Web开发外来方向，国外已有大量图书，目前我们已经落后，但作为第一本，选择AWP风险可控。
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） 预处理过程和编程准则。在这一章的最后，你将对GLSLES 有很好的理解，并学会使用该语言来编写各种着色器。
第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 的浏览器中，这些程序也应当能够正确运行。
表P.1 PC 环境
浏览器 Chrome（25.0.1364.152 m）
操作系统 Windows7 & 8
显卡 NVIDIA Quadro FX 380，NVDIA GT X 580，NVDIA GeForce GTS 450，Mobile Intel4 Series Express Chipset Family，AMD Radeon HD 6970
参考这个页面，以获取最新的、关于可能导致问题的硬件列表。
为了不受阻碍地开始学习本书，你应该去下载Chrome（或者你中意的其他浏览器）。
在第3 章，点击示例程序文件HelloTriangle.html，如果你看到如图P.1 所示的红色三角形，就说明WebGL 正常工作了。
图P.1 加载HelloTriangle 显示红色三角形
如果你没有看到红色三角形，那么请参考附录H，改变你的浏览器设置以加载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） 预处理过程和编程准则。在这一章的最后，你将对GLSLES 有很好的理解，并学会使用该语言来编写各种着色器。
第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 的浏览器中，这些程序也应当能够正确运行。
表P.1 PC 环境
浏览器 Chrome（25.0.1364.152 m）
操作系统 Windows7 & 8
显卡 NVIDIA Quadro FX 380，NVDIA GT X 580，NVDIA GeForce GTS 450，Mobile Intel4 Series Express Chipset Family，AMD Radeon HD 6970
参考这个页面，以获取最新的、关于可能导致问题的硬件列表。
为了不受阻碍地开始学习本书，你应该去下载Chrome（或者你中意的其他浏览器）。
在第3 章，点击示例程序文件HelloTriangle.html，如果你看到如图P.1 所示的红色三角形，就说明WebGL 正常工作了。
图P.1 加载HelloTriangle 显示红色三角形
如果你没有看到红色三角形，那么请参考附录H，改变你的浏览器设置以加载WebGL 程序。
35 页：“Y 轴是垂直的（正方向为下）”应为“Y 轴是垂直的（正方向为上）”
36 页：上边缘和下边缘：（-1,0,0.0,0.0）和（1,0,0.0,0.0）应为“上边缘和下边缘：（0.0,-1,0,,0.0）和（0.0,1.0,0,0.0,0.0）
左边缘和右边缘：（0.0,-1,0,,0.0）和（0.0,1.0,0,0.0,0.0）应为“左边缘和右边缘：（-1,0,0.0,0.0）和（1,0,0.0,0.0）”
代码第56 57行
canvas.height 应为 canvas.width。
canvas.width 应为 canvas.height。
struct light {
vec4 color;
vec3 position; // “广元位置” 应为 “光源位置”
}