WebGL 是 HTML 5 草案的一部分，可以驱动 Canvas 渲染三维场景。WebGL 虽然还未有广泛应用，但极具潜力和想象空间。本文是我学习 WebGL 时梳理知识脉络的产物，花点时间整理出来与大家分享。
示例
WebGL 很酷，有以下 demos 为证：
寻找奥兹国
赛车游戏
划船的男孩(Goo Engine Demo)
本文的目标
本文的预期读者是：不熟悉图形学，熟悉前端，希望了解或系统学习 WebGL 的同学。
本文不是 WebGL 的概述性文章，也不是完整详细的 WebGL 教程。本文只希望成为一篇供 WebGL 初学者使用的提纲。
Canvas
熟悉 Canvas 的同学都知道，Canvas 绘图先要获取绘图上下文：
|
1 |
var context = canvas.getContext('2d'); |
在context上调用各种函数绘制图形，比如：
|
1 2 |
// 绘制左上角为(0,0)，右下角为(50, 50)的矩形 context.fillRect(0, 0, 50, 50); |
WebGL 同样需要获取绘图上下文：
|
1 |
var gl = canvas.getContext('webgl'); // 或 experimental-webgl |
但是接下来，如果想画一个矩形的话，就没这么简单了。实际上，Canvas 是浏览器封装好的一个绘图环境，在实际进行绘图操作时，浏览器仍然需要调用 OpenGL API。而 WebGL API 几乎就是 OpenGL API 未经封装，直接套了一层壳。
Canvas 的更多知识，可以参考：
- JS 权威指南的 21.4 节或 JS 高级程序设计中的 15 章
- W3CSchool
- 阮一峰的 Canvas 教程
矩阵变换
三维模型，从文件中读出来，到绘制在 Canvas 中，经历了多次坐标变换。
假设有一个最简单的模型：三角形，三个顶点分别为(-1,-1,0)，(1,-1,0)，(0,1,0)。这三个数据是从文件中读出来的，是三角形最初始的坐标(局部坐标)。如下图所示，右手坐标系。
模型通常不会位于场景的原点，假设三角形的原点位于(0,0,-1)处，没有旋转或缩放，三个顶点分别为(-1,-1,-1)，(1,-1,-1)，(0,1,-1)，即世界坐标。
绘制三维场景必须指定一个观察者，假设观察者位于(0,0,1)处而且看向三角形，那么三个顶点相对于观察者的坐标为(-1,-1,-2)，(1,-1,-2)，(0,1,-2)，即视图坐标。
观察者的眼睛是一个点(这是透视投影的前提)，水平视角和垂直视角都是90度，视野范围(目力所及)为[0,2]在Z轴上，观察者能够看到的区域是一个四棱台体。
将四棱台体映射为标准立方体(CCV，中心为原点，边长为2，边与坐标轴平行)。顶点在 CCV 中的坐标，离它最终在 Canvas 中的坐标已经很接近了，如果把 CCV 的前表面看成 Canvas，那么最终三角形就画在图中橙色三角形的位置。
上述变换是用矩阵来进行的。
局部坐标 –(模型变换)-> 世界坐标 –(视图变换)-> 视图坐标 –(投影变换)–> CCV 坐标。
以(0,1,0)为例，它的齐次向量为(0,0,1,1)，上述变换的表示过程可以是：
上面三个矩阵依次是透视投影矩阵，视图矩阵，模型矩阵。三个矩阵的值分别取决于：观察者的视角和视野距离，观察者在世界中的状态(位置和方向)，模型在世界中的状态(位置和方向)。计算的结果是(0,1,1,2)，化成齐次坐标是(0,0.5,0.5,1)，就是这个点在CCV中的坐标，那么(0,0.5)就是在Canvas中的坐标(认为 Canvas 中心为原点，长宽都为2)。
上面出现的(0,0,1,1)是(0,0,1)的齐次向量。齐次向量(x,y,z,w)可以代表三维向量(x,y,z)参与矩阵运算，通俗地说，w 分量为 1 时表示位置，w 分量为 0 时表示位移。
WebGL 没有提供任何有关上述变换的机制，开发者需要亲自计算顶点的 CCV 坐标。
关于坐标变换的更多内容，可以参考：
比较复杂的是模型变换中的绕任意轴旋转(通常用四元数生成矩阵)和投影变换(上面的例子都没收涉及到)。
关于绕任意轴旋转和四元数，可以参考：
关于齐次向量的更多内容，可以参考。
着色器和光栅化
在 WebGL 中，开发者是通过着色器来完成上述变换的。着色器是运行在显卡中的程序，以 GLSL 语言编写，开发者需要将着色器的源码以字符串的形式传给 WebGL 上下文的相关函数。
着色器有两种，顶点着色器和片元(像素)着色器，它们成对出现。顶点着色器任务是接收顶点的局部坐标，输出 CCV 坐标。CCV 坐标经过光栅化，转化为逐像素的数据，传给片元着色器。片元着色器的任务是确定每个片元的颜色。
顶点着色器接收的是 attribute 变量，是逐顶点的数据。顶点着色器输出 varying 变量，也是逐顶点的。逐顶点的 varying 变量数据经过光栅化，成为逐片元的 varying 变量数据，输入片元着色器，片元着色器输出的结果就会显示在 Canvas 上。
着色器功能很多，上述只是基本功能。大部分炫酷的效果都是依赖着色器的。如果你对着色器完全没有概念，可以试着理解下一节 hello world 程序中的着色器再回顾一下本节。
关于更多着色器的知识，可以参考：
程序
这一节解释绘制上述场景(三角形)的 WebGL 程序。点这个链接，查看源代码，试图理解一下。这段代码出自WebGL Programming Guide，我作了一些修改以适应本文内容。如果一切正常，你看到的应该是下面这样：
解释几点(如果之前不了解 WebGL ，多半会对下面的代码困惑，无碍)：
- 字符串 VSHADER_SOURCE 和 FSHADER_SOURCE 是顶点着色器和片元着色器的源码。可以将着色器理解为有固定输入和输出格式的程序。开发者需要事先编写好着色器，再按照一定格式着色器发送绘图命令。
- Part2 将着色器源码编译为 program 对象：先分别编译顶点着色器和片元着色器，然后连接两者。如果编译源码错误，不会报 JS 错误，但可以通过其他 API(如gl.getShaderInfo等)获取编译状态信息(成功与否，如果出错的错误信息)。
123456789// 顶点着色器var vshader = gl.createShader(gl.VERTEX_SHADER);gl.shaderSource(vshader, VSHADER_SOURCE);gl.compileShader(vshader);// 同样新建 fshadervar program = gl.createProgram();gl.attachShader(program, vshader);gl.attachShader(program, fshader);gl.linkProgram(program); - program 对象需要指定使用它，才可以向着色器传数据并绘制。复杂的程序通常有多个 program 对 象，(绘制每一帧时)通过切换 program 对象绘制场景中的不同效果。
1gl.useProgram(program); - Part3 向正在使用的着色器传入数据，包括逐顶点的 attribute 变量和全局的 uniform 变量。向着色器传入数据必须使用 ArrayBuffer，而不是常规的 JS 数组。
1var varray = new Float32Array([-1, -1, 0, 1, -1, 0, 0, 1, 0]) - WebGL API 对 ArrayBuffer 的操作(填充缓冲区，传入着色器，绘制等)都是通过 gl.ARRAY_BUFFER 进行的。在 WebGL 系统中又很多类似的情况。
12345678945006716-5">56789整理出来与大家分享。示例
WebGL 很酷，有以下 demos 为证：
寻找奥兹国
赛车游戏
划船的男孩(Goo Engine Demo)本文的目标
本文的预期读者是：不熟悉图形学，熟悉前端，希望了解或系统学习 WebGL 的同学。
本文不是 WebGL 的概述性文章，也不是完整详细的 WebGL 教程。本文只希望成为一篇供 WebGL 初学者使用的提纲。
Canvas
熟悉 Canvas 的同学都知道，Canvas 绘图先要获取绘图上下文：
1var context = canvas.getContext('2d');在
context上调用各种函数绘制图形，比如：12// 绘制左上角为(0,0)，右下角为(50, 50)的矩形context.fillRect(0, 0, 50, 50);WebGL 同样需要获取绘图上下文：
1var gl = canvas.getContext('webgl'); // 或 experimental-webgl但是接下来，如果想画一个矩形的话，就没这么简单了。实际上，Canvas 是浏览器封装好的一个绘图环境，在实际进行绘图操作时，浏览器仍然需要调用 OpenGL API。而 WebGL API 几乎就是 OpenGL API 未经封装，直接套了一层壳。
Canvas 的更多知识，可以参考：
- JS 权威指南的 21.4 节或 JS 高级程序设计中的 15 章
- W3CSchool
- 阮一峰的 Canvas 教程
矩阵变换
三维模型，从文件中读出来，到绘制在 Canvas 中，经历了多次坐标变换。
假设有一个最简单的模型：三角形，三个顶点分别为(-1,-1,0)，(1,-1,0)，(0,1,0)。这三个数据是从文件中读出来的，是三角形最初始的坐标(局部坐标)。如下图所示，右手坐标系。
模型通常不会位于场景的原点，假设三角形的原点位于(0,0,-1)处，没有旋转或缩放，三个顶点分别为(-1,-1,-1)，(1,-1,-1)，(0,1,-1)，即世界坐标。
绘制三维场景必须指定一个观察者，假设观察者位于(0,0,1)处而且看向三角形，那么三个顶点相对于观察者的坐标为(-1,-1,-2)，(1,-1,-2)，(0,1,-2)，即视图坐标。
观察者的眼睛是一个点(这是透视投影的前提)，水平视角和垂直视角都是90度，视野范围(目力所及)为[0,2]在Z轴上，观察者能够看到的区域是一个四棱台体。
将四棱台体映射为标准立方体(CCV，中心为原点，边长为2，边与坐标轴平行)。顶点在 CCV 中的坐标，离它最终在 Canvas 中的坐标已经很接近了，如果把 CCV 的前表面看成 Canvas，那么最终三角形就画在图中橙色三角形的位置。
上述变换是用矩阵来进行的。
局部坐标 –(模型变换)-> 世界坐标 –(视图变换)-> 视图坐标 –(投影变换)–> CCV 坐标。
以(0,1,0)为例，它的齐次向量为(0,0,1,1)，上述变换的表示过程可以是：
上面三个矩阵依次是透视投影矩阵，视图矩阵，模型矩阵。三个矩阵的值分别取决于：观察者的视角和视野距离，观察者在世界中的状态(位置和方向)，模型在世界中的状态(位置和方向)。计算的结果是(0,1,1,2)，化成齐次坐标是(0,0.5,0.5,1)，就是这个点在CCV中的坐标，那么(0,0.5)就是在Canvas中的坐标(认为 Canvas 中心为原点，长宽都为2)。
上面出现的(0,0,1,1)是(0,0,1)的齐次向量。齐次向量(x,y,z,w)可以代表三维向量(x,y,z)参与矩阵运算，通俗地说，w 分量为 1 时表示位置，w 分量为 0 时表示位移。
WebGL 没有提供任何有关上述变换的机制，开发者需要亲自计算顶点的 CCV 坐标。
关于坐标变换的更多内容，可以参考：
比较复杂的是模型变换中的绕任意轴旋转(通常用四元数生成矩阵)和投影变换(上面的例子都没收涉及到)。
关于绕任意轴旋转和四元数，可以参考：
关于齐次向量的更多内容，可以参考。
着色器和光栅化
在 WebGL 中，开发者是通过着色器来完成上述变换的。着色器是运行在显卡中的程序，以 GLSL 语言编写，开发者需要将着色器的源码以字符串的形式传给 WebGL 上下文的相关函数。
着色器有两种，顶点着色器和片元(像素)着色器，它们成对出现。顶点着色器任务是接收顶点的局部坐标，输出 CCV 坐标。CCV 坐标经过光栅化，转化为逐像素的数据，传给片元着色器。片元着色器的任务是确定每个片元的颜色。
顶点着色器接收的是 attribute 变量，是逐顶点的数据。顶点着色器输出 varying 变量，也是逐顶点的。逐顶点的 varying 变量数据经过光栅化，成为逐片元的 varying 变量数据，输入片元着色器，片元着色器输出的结果就会显示在 Canvas 上。
着色器功能很多，上述只是基本功能。大部分炫酷的效果都是依赖着色器的。如果你对着色器完全没有概念，可以试着理解下一节 hello world 程序中的着色器再回顾一下本节。
关于更多着色器的知识，可以参考：
程序
这一节解释绘制上述场景(三角形)的 WebGL 程序。点这个链接，查看源代码，试图理解一下。这段代码出自WebGL Programming Guide，我作了一些修改以适应本文内容。如果一切正常，你看到的应该是下面这样：
解释几点(如果之前不了解 WebGL ，多半会对下面的代码困惑，无碍)：
- 字符串 VSHADER_SOURCE 和 FSHADER_SOURCE 是顶点着色器和片元着色器的源码。可以将着色器理解为有固定输入和输出格式的程序。开发者需要事先编写好着色器，再按照一定格式着色器发送绘图命令。
- Part2 将着色器源码编译为 program 对象：先分别编译顶点着色器和片元着色器，然后连接两者。如果编译源码错误，不会报 JS 错误，但可以通过其他 API(如gl.getShaderInfo等)获取编译状态信息(成功与否，如果出错的错误信息)。
123456789// 顶点着色器var vshader = gl.createShader(gl.VERTEX_SHADER);gl.shaderSource(vshader, VSHADER_SOURCE);gl.compileShader(vshader);// 同样新建 fshadervar program = gl.createProgram();gl.attachShader(program, vshader);gl.attachShader(program, fshader);gl.linkProgram(program); - program 对象需要指定使用它，才可以向着色器传数据并绘制。复杂的程序通常有多个 program 对 象，(绘制每一帧时)通过切换 program 对象绘制场景中的不同效果。
1gl.useProgram(program); - Part3 向正在使用的着色器传入数据，包括逐顶点的 attribute 变量和全局的 uniform 变量。向着色器传入数据必须使用 ArrayBuffer，而不是常规的 JS 数组。
1var varray = new Float32Array([-1, -1, 0, 1, -1, 0, 0, 1, 0]) - WebGL API 对 ArrayBuffer 的操作(填充缓冲区，传入着色器，绘制等)都是通过 gl.ARRAY_BUFFER 进行的。在 WebGL 系统中又很多类似的情况。
