WebGl 旋转矩阵

1. 旋转矩阵的计算

在三维空间中，绕x轴、y轴和z轴的基本旋转矩阵分别为：

1.1 绕x轴旋转矩阵 Rx(θ)Rx​(θ)

| 1     0        0         0 |
| 0     cosθ     -sinθ     0 |
| 0     sinθ     cosθ      0 |
| 0     0        0         1 |

1.2 绕y轴旋转矩阵 Ry(θ)Ry​(θ)

| cosθ     0      sinθ     0 |
| 0        1      0        0 |
| -sinθ    0      cosθ     0 |
| 0        0      0        1 |

1.3 绕z轴旋转矩阵 Rz(θ)Rz​(θ)

| cosθ  -sinθ  0           0 |
| sinθ   cosθ  0           0 |
| 0      0     1           0 |
| 0      0     0           1 |

其中，θ 是旋转的角度，通常以弧度为单位。

2.使用旋转矩阵流程

• 在顶点着色器中声明一个uniform变量来接收旋转矩阵。
• 通过gl.uniformMatrix4fv函数将旋转矩阵传递给着色器。
• 旋转矩阵的列主序存储在一个Float32Array中，并传递给gl.uniformMatrix4fv函数的第三个参数。

3.示例代码

以下是一个简单的WebGL示例，展示了如何创建一个绕z轴旋转的旋转矩阵，并将其应用到顶点着色器中：

// 假设已经有了WebGL上下文gl和已初始化的着色器程序program

// 创建绕z轴旋转矩阵
function getTranslateMatrix(deg) {
    return new Float32Array([
        Math.cos(deg), -Math.sin(deg), 0.0, 0.0,
        Math.sin(deg), Math.cos(deg), 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        0.0, 0.0, 0.0, 1.0
    ])
}

// 获取顶点着色器中的uniform矩阵变量的位置
const mat = gl.getUniformLocation(program, 'mat');

const matrix = getRotateMatrix(x);
// 将旋转矩阵传递给着色器
gl.uniformMatrix4fv(mat, false, matrix);

// 继续其他渲染流程...

4.效果如下