WebGL2 Fundamentals矩阵数学详解：从2D变换到3D投影
【免费下载链接】webgl2-fundamentals WebGL 2 lessons starting from the basics 
项目地址: https://gitcode.com/gh_mirrors/we/webgl2-fundamentals
WebGL2 Fundamentals是学习WebGL 2基础的优质开源项目，通过矩阵数学实现从2D变换到3D投影的核心功能，帮助开发者轻松掌握3D图形编程的关键技术。
为什么矩阵数学是WebGL的核心？
在WebGL中，矩阵是实现图形变换的数学基础。无论是简单的2D位移、旋转和缩放，还是复杂的3D投影，都离不开矩阵运算。矩阵能够将多个变换组合成单一操作，极大简化了图形渲染流程。
2D矩阵变换的魔力 ✨
2D变换中最常用的是3×3矩阵，它可以同时表示平移、旋转和缩放三种基本变换。例如：
- 平移矩阵：通过设置第三行元素实现位置偏移
- 旋转矩阵：利用正弦和余弦函数计算旋转角度
- 缩放矩阵：通过对角线元素控制缩放比例
从2D到3D的跃迁 🚀
扩展到3D空间时，我们使用4×4矩阵来处理x、y、z三个维度的变换。与2D相比，3D矩阵增加了：
- 绕X轴、Y轴的旋转矩阵
- 透视投影矩阵
- 相机视角矩阵
2D矩阵变换实战指南
基本变换矩阵构建
以下是构建2D基本变换矩阵的JavaScript代码：
const m3 = {
// 平移矩阵
translation: (tx, ty) => [
1, 0, 0,
0, 1, 0,
tx, ty, 1
],
// 旋转矩阵
rotation: (angleInRadians) => {
const c = Math.cos(angleInRadians);
const s = Math.sin(angleInRadians);
return [
c, -s, 0,
s, c, 0,
0, 0, 1
];
},
// 缩放矩阵
scaling: (sx, sy) => [
sx, 0, 0,
0, sy, 0,
0, 0, 1
]
};
矩阵组合的艺术
矩阵乘法允许我们将多个变换组合成一个矩阵：
// 先缩放，再旋转，最后平移
let matrix = m3.scaling(2, 1);
matrix = m3.multiply(matrix, m3.rotation(30 * Math.PI / 180));
matrix = m3.multiply(matrix, m3.translation(100, 0));
注意：矩阵乘法的顺序非常重要，不同的顺序会产生完全不同的结果！
3D矩阵与投影技术
4×4矩阵的强大之处
3D变换使用4×4矩阵，除了x和y轴外，还增加了z轴变换：
const m4 = {
// X轴旋转矩阵
xRotation: (angleInRadians) => {
const c = Math.cos(angleInRadians);
const s = Math.sin(angleInRadians);
return [
1, 0, 0, 0,
0, c, s, 0,
0, -s, c, 0,
0, 0, 0, 1
];
},
// Y轴旋转矩阵
yRotation: (angleInRadians) => {
const c = Math.cos(angleInRadians);
const s = Math.sin(angleInRadians);
return [
c, 0, -s, 0,
0, 1, 0, 0,
s, 0, c, 0,
0, 0, 0, 1
];
}
};
透视投影的奥秘
透视投影让3D场景产生近大远小的视觉效果，这是通过透视矩阵实现的：
// 透视投影矩阵
m4.perspective = (fieldOfViewRadians, aspect, near, far) => {
const f = Math.tan(Math.PI * 0.5 – 0.5 * fieldOfViewRadians);
const rangeInv = 1.0 / (near – far);
return [
f / aspect, 0, 0, 0,
0, f, 0, 0,
0, 0, (near + far) * rangeInv, -1,
0, 0, near * far * rangeInv * 2, 0
];
};
矩阵在WebGL中的应用
着色器中的矩阵运算
在顶点着色器中，我们通过矩阵乘法将物体坐标转换到裁剪空间：
#version 300 es
in vec4 a_position;
uniform mat4 u_matrix;
void main() {
// 应用矩阵变换
gl_Position = u_matrix * a_position;
}
相机视图矩阵
通过相机矩阵可以模拟真实世界中的相机视角：
// 创建相机矩阵
const cameraPosition = [0, 0, -200];
const target = [0, 0, 0];
const up = [0, 1, 0];
const cameraMatrix = m4.lookAt(cameraPosition, target, up);
// 视图矩阵是相机矩阵的逆矩阵
const viewMatrix = m4.inverse(cameraMatrix);
实用技巧与最佳实践
深入学习资源
- 官方矩阵数学教程：webgl-2d-matrices.md
- 3D投影示例代码：webgl-3d-perspective.html
- 相机变换教程：webgl-3d-camera.md
通过掌握矩阵数学，你将能够创建出令人惊叹的3D图形效果。无论你是游戏开发者、数据可视化专家还是WebGL爱好者，矩阵都是你工具箱中不可或缺的强大工具！
要开始你的WebGL之旅，只需克隆项目仓库：
git clone https://gitcode.com/gh_mirrors/we/webgl2-fundamentals
立即探索矩阵的奇妙世界，开启你的3D编程之旅吧！ 🎮
【免费下载链接】webgl2-fundamentals WebGL 2 lessons starting from the basics 项目地址: https://gitcode.com/gh_mirrors/we/webgl2-fundamentals
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
