49. HTML5 WebGL教程：从零开始学习几何变换和矩阵运算

WebGL是一种用于在Web浏览器上进行高性能3D图形渲染的JavaScript API。它提供了一种使用OpenGL ES 2.0或更高版本进行3D图形编程的方式，并允许开发者使用HTML、CSS和JavaScript创建复杂的3D场景和动画效果。

在本教程中，我们将介绍WebGL中的几何变换和矩阵运算的基本概念和用法。几何变换是改变图形位置、旋转、缩放和投影等属性的操作。而矩阵运算则是一种在计算机图形学中常用的数学方法，用于对向量、点、线段和三角形等几何对象进行变换和操作。

首先，让我们来了解一些基本的几何变换和矩阵运算的概念。

1. 平移（Translation）：将一个图形沿着某个方向移动一定的距离。

   // 平移矩阵表示为 [1, 0, x, 0]，其中x为平移的距离
   var translationMatrix = [1, 0, 100, 0]; // 将图形沿x轴正方向平移100个单位

2. 旋转（Rotation）：将一个图形绕着某个轴旋转一定的角度。

   // 绕x轴旋转θ度后的点的坐标可以通过以下公式计算：
   // cos(θ) * (x - x0) + sin(θ) * (y - y0) + (z - z0) = 0
   // 其中(x0, y0, z0)为旋转前的点的坐标，(x, y, z)为旋转后的点的坐标，θ为旋转角度（弧度制）
   var rotationMatrix = [Math.cos(theta), Math.sin(theta), 0, 0]; // 绕x轴旋转θ度

3. 缩放（Scaling）：将一个图形按照一定的比例进行放大或缩小。

   // 缩放矩阵表示为 [[sx, 0, 0], [0, sy, 0], [0, 0, 1]]，其中sx和sy为缩放比例
   var scalingMatrix = [2, 0, 0, 2]; // 将图形放大2倍

4. 投影（Projection）：将一个图形投影到另一个平面上，通常用于将三维场景投影到二维屏幕上。

   // 透视投影矩阵表示为 [[f_x, 0, c_x], [0, f_y, c_y], [0, 0, 1]]，其中f_x和f_y为焦距，c_x和c_y为视场角的一半的余弦值的一半
   var projectionMatrix = [1, Math.tan(45 * Math.PI / 180), 1, -window.innerWidth / window.innerHeight]; // 透视投影矩阵，用于将场景投影到屏幕中央

接下来，让我们来看一些具体的示例代码，演示如何使用这些几何变换和矩阵运算来实现一些常见的图形操作。

1. 平移：我们可以使用平移矩阵来将一个图形沿着某个方向移动一定的距离。例如，下面的代码将创建一个沿x轴正方向平移100个单位的平移矩阵：

   var translationMatrix = [1, 0, 100, 0]; // 沿x轴正方向平移100个单位