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