WebGL 教程
WebGL 使得网页在支持 HTML <canvas> 标签的浏览器中，不需要使用任何插件，便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行 3D 渲染。WebGL 程序由 javascript 的控制代码，和在计算机的图形处理单元（GPU, Graphics Processing Unit）中执行的特效代码 (shader code，渲染代码) 组成。WebGL 元素可以和其他 HTML 元素混合，并且会和页面的其他部分或页面背景相合成。
此教程从基础开始讲解如何使用<canvas> 元素来画 WebGL 图形。提供的例子会让你对 WebGL 有更清晰的认识，并且会提供代码片段方便你构建自己的内容。
开始之前
使用 <canvas> 元素并不困难，但你需要基本的 HTML 和 JavaScript 知识。一些老浏览器不支持<canvas> 元素和 WebGL，但所有最近的主流浏览器都支持它们。为了能在 canvas 中绘制图形，我们使用 Javascript 的上下文环境（context）对象，此对象可以动态创建图形。
在本教程中
- 开始 WebGL
-
如何设置 WebGL 上下文环境。
- 给 WebGL 的上下文环境添加 2D 内容
-
如何用 WebGL 渲染简单的平面化图形。
- 在 WebGL 中使用着色器 (shader) 去赋予颜色
-
演示如何使用着色器给图形添加颜色。
- 用 WebGL 让对象动起来
-
展示如何旋转移动物体来实现简单动画效果。
- 使用 WebGL 创建 3D 物体
-
展示如何创建并设置一个 3D 物体动画 (这里使用立方体).
- 在 WebGL 中使用纹理贴图 (texture)
-
展示如何投射纹理贴图到物体的各个面。
- WebGL 中的灯光
-
如何在 WebGL 上下文环境中模拟灯光效果。
- WebGL 中的动画纹理贴图
-
展示如何让纹理贴图动起来; 在此例中，会投射一个 Ogg 格式的视频在一个旋转立方体的各个面上。