WebGL 教程
本教程从基础开始，介绍如何使用 <canvas> 元素绘制 WebGL 图形。提供的示例应能让您清晰地了解 WebGL 的功能，并提供代码片段，帮助您开始创建自己的内容。
WebGL 使 Web 内容能够使用基于 OpenGL ES 2.0 的 API，在支持它的浏览器中，在 HTML <canvas> 中执行 3D 渲染，而无需使用插件。WebGL 程序由用 JavaScript 编写的控制代码和在计算机图形处理单元 (GPU) 上执行的特效代码（着色器代码）组成。WebGL 元素可以与其他 HTML 元素混合，并与其他页面部分或页面背景合成。
开始之前
使用 <canvas> 元素并不难，但您需要对 HTML 和 JavaScript 有基本了解。<canvas> 元素和 WebGL 在一些旧浏览器中不支持，但在所有主要浏览器的最新版本中都支持。为了在画布上绘制图形，我们使用一个 JavaScript 上下文对象，该对象可以即时创建图形。
本教程内容
- WebGL 入门
-
如何设置 WebGL 上下文。
- 向 WebGL 上下文添加 2D 内容
-
如何使用 WebGL 渲染简单的平面形状。
- 使用着色器在 WebGL 中应用颜色
-
演示如何使用着色器为形状添加颜色。
- 使用 WebGL 动画对象
-
展示如何通过旋转和移动对象来创建简单的动画。
- 使用 WebGL 创建 3D 对象
-
展示如何创建和动画化一个 3D 对象（在此例中是一个立方体）。
- 在 WebGL 中使用纹理
-
演示如何将纹理映射到对象的面上。
- WebGL 中的光照
-
如何在您的 WebGL 上下文中模拟光照效果。
- 在 WebGL 中动画纹理
-
展示如何动画化纹理；在此例中，通过将 Ogg 视频映射到旋转立方体的面上。