WebGL 技术储备指南

WebGL 是 HTML 5 草案的一部分，可以驱动 Canvas 渲染三维场景。WebGL 虽然还未有广泛应用，但极具潜力和想象空间。本文是我学习 WebGL 时梳理知识脉络的产物，花点时间整理出来与大家分享。

示例

WebGL 很酷，有以下 demos 为证：

寻找奥兹国
赛车游戏
划船的男孩(Goo Engine Demo)

本文的目标

本文的预期读者是：不熟悉图形学，熟悉前端，希望了解或系统学习 WebGL 的同学。

本文不是 WebGL 的概述性文章，也不是完整详细的 WebGL 教程。本文只希望成为一篇供 WebGL 初学者使用的提纲。

Canvas

熟悉 Canvas 的同学都知道，Canvas 绘图先要获取绘图上下文：

var context = canvas.getContext('2d');

在context上调用各种函数绘制图形，比如：

// 绘制左上角为(0,0)，右下角为(50, 50)的矩形
context.fillRect(0, 0, 50, 50);

WebGL 同样需要获取绘图上下文：

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轴上，观察者能够看到的区域是一个四棱台体。