第1章 WebGL概述

WebGL的优势

使用文本编辑器开发三维应用

轻松发布三维图形程序

充分利用浏览器的功能

学习和使用WebGL很简单

WebGL的起源

WebGL程序的结构

总结

第2章 WebGL入门

Canvas是什么？

使用＜canvas＞标签

DrawRectangle.js

最短的WebGL程序：清空绘图区

HTML文件（HelloCanvas.html）

JavaScript程序（HelloCanvas.js）

用示例程序做实验

绘制一个点（版本1）

HelloPoint1.html

HelloPoint1.js

着色器是什么？

使用着色器的WebGL程序的结构

初始化着色器

顶点着色器

片元着色器

绘制操作

WebGL坐标系统

用示例程序做实验

绘制一个点（版本2）

使用attribute变量

示例程序（HelloPoint2.js）

获取attribute变量的存储位置

向attribute变量赋值

gl.vertexAttrib3f()的同族函数

用示例程序做实验

通过鼠标点击绘点

示例程序（ClickedPoints.js）

注册事件响应函数

响应鼠标点击事件

用示例程序做实验

改变点的颜色

示例程序（ColoredPoints.js）

uniform变量

获取uniform变量的存储地址

向uniform变量赋值

gl.uniform4f()的同族函数

总结

第3章 绘制和变换三角形

绘制多个点

示例程序（MultiPoint.js）

使用缓冲区对象

创建缓冲区对象（gl.createBuffer()）

绑定缓冲区（gl.bindBuffer()）

向缓冲区对象中写入数据（gl.bufferData()）

类型化数组

将缓冲区对象分配给attribute变量（gl.vertexAttribPointer()）

开启attribute变量（gl.enableVertexAttribArray()）

gl.drawArrays()的第2个和第3个参数

用示例程序做实验

Hello Triangle

示例程序（HelloTriangle.js）

基本图形

用示例程序做实验

Hello Rectangle (HelloQuad）

用示例程序做实验

移动、旋转和缩放

平移

示例程序（TranslatedTriangle.js）

旋转

示例程序（RotatedTriangle.js）

变换矩阵：旋转

变换矩阵：平移

4×4的旋转矩阵

示例程序（RotatedTriangle＿Matrixjs）

平移：相同的策略

变换矩阵：缩放

总结

第4章 高级变换与动画基础

平移，然后旋转

矩阵变换库：cuon-matrix.js

示例程序（RotatedTriangle＿Matrix4.js）

复合变换

示例程序（RotatedTranslatedTriangle.js）

用示例程序做实验

动画

动画基础

示例程序（RotatingTriangle.js）

反复调用绘制函数（tick()）

按照指定的旋转角度绘制三角形（draw()）

请求再次被调用（requestAnimationFrame()）

更新旋转角（animate()）

用示例程序做实验

总结

第5章 颜色与纹理

将非坐标数据传入顶点着色器

示例程序（MultiAttributeSize.js）

创建多个缓冲区对象

gl.vertexAttribPointer()的步进和偏移参数

示例程序（MultiAttributeSize＿Interleaved.js）

修改颜色（varying变量）

示例程序（MultiAttributeColor.js）

用示例程序做实验

彩色三角形（ColoredTriangle.js）

几何形状的装配和光栅化

调用片元着色器

用示例程序做实验

varying变量的作用和内插过程

在矩形表面贴上图像

纹理坐标

将纹理图像粘贴到几何图形上

示例程序（TexturedQuad.js）

设置纹理坐标（initVertexBuffers()）

配置和加载纹理（initTextures()）

为WebGL配置纹理（loadTexture()）

图像Y轴反转

激活纹理单元（gl.activeTexture()）

绑定纹理对象（gl.bindTexture()）

配置纹理对象的参数（gl.texParameteri()）

将纹理图像分配给纹理对象（gl.texImage2D()）

将纹理单元传递给片元着色器（gl.uniformli()）

从顶点着色器向片元着色器传输纹理坐标

在片元着色器中获取纹理像素颜色（texture2D()）

用示例程序做试验

使用多幅纹理

示例程序（MultiTexture.js）

总结

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

回顾：基本着色器代码

GLSL ES概述

你好，着色器！

基础

执行次序

注释

数据值类型（数值和布尔值）

变量

GLSL ES是强类型语言

基本类型

赋值和类型转换

运算符

矢量和矩阵

赋值和构造

访问元素

运算符

结构体

赋值和构造

访问成员

运算符

数组

取样器（纹理）

运算符优先级

程序流程控制：分支和循环

if语句和if-else语句

for语句

continue、break和discard语句

函数

规范声明

参数限定词

内置函数

全局变量和局部变量

存储限定字

const变量

Attribute变量

uniform变量

varying变量

精度限定字

预处理指令

总结

第7章进 入三维世界

立方体由三角形构成

视点和视线

视点、观察目标点和上方向

示例程序（LookAtTriangles.js）

LookAtTriangles.js与RotatedTriangle＿Matrix4.js

从指定视点观察旋转后的三角形

示例程序（LookAtRotatedTriangles.js）

用示例程序做实验

利用键盘改变视点

示例程序（LookAtTrianglesWithKeys.js）

独缺一角

可视范围（正射类型）

可视空间

定义盒状可视空间

示例程序（OrthoView.html）

示例程序（OrthoView.js）

JavaScript修改HTML元素

顶点着色器的执行流程

修改near和far值

补上缺掉的角（LookAtTrianglesWithKeys＿ViewVolume.js）

用示例程序做实验

可视空间（透视投影）

定义透视投影可视空间

示例程序（perspectiveviewjs）

投影矩阵的作用

共冶一炉（模型矩阵、视图矩阵和投影矩阵）

示例程序（PerspectiveView＿mvp.js）

用示例程序做实验

正确处理对象的前后关系

隐藏面消除

示例程序（DepthBuffer.js）

深度冲突

立方体

通过顶点索引绘制物体

示例程序（HelloCube.js）

向缓冲区中写入顶点的坐标、颜色与索引

为立方体的每个表面指定颜色

示例程序（ColoredCube.js）

用示例程序做实验

总结

第8章 光照

光照原理

光源类型

反射类型

平行光下的漫反射

根据光线和表面的方向计算入射角

法线：表面的朝向

示例程序（LightedCube.js）

环境光下的漫反射

示例程序（LightedCube ambient.js）

运动物体的光照效果

魔法矩阵：逆转置矩阵

示例程序（LightedTranslatedRotatedCube.js）

点光源光

示例程序（PointLightedCube.js）

更逼真：逐片元光照

示例程序（PointLightedCube＿perFragment.js）

总结

第9章 层次模型

多个简单模型组成的复杂模型

层次结构模型

单关节模型

示例程序（JointMode.js）

绘制层次模型（draw()）

多节点模型

示例程序（MultiJointModel.js）

绘制部件（drawBox()）

绘制部件（drawSegments()）

着色器和着色器程序对象：initShaders()函数的作用

创建着色器对象（gl.createShader()）

指定着色器对象的代码（gl.shaderSource()）

编译着色器（gl.compileShader()）

创建程序对象（gl.createProgram()）

为程序对象分配着色器对象（gl.attachShader()）

连接程序对象（gl.linkProgram()）

告知WebGL系统所使用的程序对象（gl.useProgram()）

initShaders()函数的内部流程

总结

第10章 高级技术

用鼠标控制物体旋转

如何实现物体旋转

示例程序（RotateObject.js）

选中物体

如何实现选中物体

示例程序（PickObject.js）

选中一个表面

示例程序（PickFace.js）

HUD（平视显示器）

如何实现HUD

示例程序（HUD.html）

示例程序（HUD.js）

在网页上方显示三维物体

雾化（大气效果）

如何实现雾化

示例程序（Fog.js）

使用w分量（Fog＿w.js）

绘制圆形的点

如何实现圆形的点

示例程序（RoundedPoint.js）

α混合

如何实现α混合

示例程序（LookAtBlendedTriangles.js）

混合函数

半透明的三维物体（BlendedCube.js）

透明与不透明物体共存

切换着色器

如何实现切换着色器

示例程序（ProgramObject.js）

渲染到纹理

帧缓冲区对象和渲染缓冲区对象

如何实现渲染到纹理

示例程序（FramebufferObject.js）

创建帧缓冲区对象（gl.createFramebuffer()）

创建纹理对象并设置其尺寸和参数

创建渲染缓冲区对象（gl.createRenderbuffer()）

绑定渲染缓冲区并设置其尺寸（gl.bindRenderbuffer()，gl.renderbufferStorage()）

将纹理对象关联到帧缓冲区对象（gl.bindFramebuffer()，gl.framebufferTexture2D()）

将渲染缓冲区对象关联到帧缓冲区对象（gl.framebufferRenderbuffer()）

检查帧缓冲区的配置（gl.checkFramebufferStatus()）

在帧缓冲区进行绘图

绘制阴影

如何实现阴影

示例程序（Shadow.js）

提高精度

示例程序（Shadow＿highp.js）

加载三维模型

OBJ文件格式

MTL文件格式

示例程序（OBJViewer.js）

自定义类型对象

示例程序（OBJViewer.js解析数据部分）

响应上下文丢失

如何响应上下文丢失

示例程序（RotatingTriangle＿contextLost.js）

总结

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

附录B GLSL ES 1.0内置函数

角度和三角函数

指数函数

通用函数

几何函数

矩阵函数

矢量函数

纹理查询函数

附录C 投影矩阵

正射投影矩阵

透视投影矩阵

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

示例程序（CoordinateSystem.js）

隐藏面消除和裁剪坐标系统

裁剪坐标系和可视空间

什么是对的？

总结

附录E 逆转置矩阵

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

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

本地坐标系

世界坐标系

变换与坐标系

附录H WebGL的浏览器设置