webGL数据类型之矩阵元素

着色器语言中通过关键字 mat2 、 mat3 、 mat4 分别声明一个 2x2 矩阵、 3x3 矩阵、 4x4 矩阵，通过内置函数mat2()、mat3()、mat4()分别创建一个2x2矩阵、3x3矩阵、4x4矩阵。

WebGL着色器 GLSL 矩阵 mat

关键字	数据类型
mat2	2x2矩阵，4个元素
mat3	3x3矩阵，9个元素
mat4	4x4矩阵，16个元素

声明变量

关键字 mat4 声明一个4x4矩阵

mat4 matrix4;

构造函数赋值

矩阵类型数据需要通过相应的构造函数创建，下面代码mat4()构造函数创建一个4x4矩阵赋值给matrix4变量。

// 需要表示的矩阵
// 1.1 1.2 1.3 1.4
// 2.1 2.2 2.3 2.4
// 3.1 3.2 3.3 3.4
// 4.1 4.2 4.3 4.4

mat4 matrix4 = mat4(
1.1, 2.1, 3.1, 4.1,
1.2, 2.2, 3.2, 4.2,
1.3, 2.3, 3.3, 4.3,
1.4, 2.4, 3.4, 4.4
);

快速创建对角矩阵

创建普通的矩阵，需要传入多个元素，比如mat2需要传入4个参数，mat4需要传入16个参数，如果是对角矩阵，可以直接传入一个参数就可以。

可以通过 mat4(2.0) 写法快速创建一个4x4对角矩阵

// 2.0 0.0 0.0 0.0
// 0.0 2.0 0.0 0.0
// 0.0 0.0 2.0 0.0
// 0.0 0.0 0.0 2.0

mat4 matrix = mat4(2.0)

访问矩阵元素([]运算符)

mat4 matrix4 = mat4(
1.1, 2.1, 3.1, 4.1,
1.2, 2.2, 3.2, 4.2,
1.3, 2.3, 3.3, 4.3,
1.4, 2.4, 3.4, 4.4
);

// 访问矩阵matrix4的第二列

vec4 v4 = matrix4[1]; // 返回值vec4(1.2,2.2,3.2,4.2)

// 访问矩阵matrix4的第三列第四行对应的元素
float f = matrix4[2][3]; // 返回4.3

数学运算(矩阵和浮点数)

矩阵乘一个系数，相当矩阵的每个元素都乘以该系数，加法、减法、除法同样逐元素操作。

mat4 matrix4 = mat4(1.1,2.1,3.1...);
mat4 m2 = matrix4 * 10; // 结果是mat4(11.0,21.0,31.0...)

数学运算(矩阵乘向量)

mat4 * vec4: 矩阵mat4左乘向量vec4，矩阵和向量的乘法运算规则，参考线性代数中矩阵和列向量的乘法运算

// 声明一个四维向量 pos, xyz的坐标是0.8,3.2,6.8，假设表示一个顶点位置坐标
vec4 pos = vec4(0.0, 3.2, 6.8, 1.0);
// 创建平移矩阵(表示沿x轴平移-0.4)
// 1   0   0  -0.4
// 0   1   0    0
// 0   0   1    0
// 0   0   0    1
mat4 m4 = mat4(
    1, 0, 0 ,0 ,  
    0, 1, 0 ,0 ,  
    0, 0, 1 ,0 ,  
   -0.4, 0, 0, 1
);
// 平移矩阵m4左乘顶点坐标pos(vec4类型数据可以理解为线性代数中的nx1矩阵，即列向量)
// 顶点位置坐标pos进行平移变换
vec4 newPos= m4 * pos; // 平移后结果: newPos = vec4(-0.4,3.2,6.8,1.0)

数学运算(矩阵乘矩阵)

mx * my: 表示矩阵 mx 左乘矩阵 my ,着色器中矩阵之间乘法运算规则和线性代数中规则一致

假设mx、my都是旋转矩阵, 下面代码表示旋转矩阵mx和旋转矩阵my的乘积, 然后对顶点进行变换, 相当顶点旋转执行mx和my两次旋转

// 顶点齐次坐标pos
vec4 pos = vec4(0.0, 3.2, 6.8, 1.0);
// 角度转弧度
float radian = radians(30.0);
// 求解旋转角度余弦值
float cos = cos(radian);
// 求解旋转角度正弦值
float sin = sin(radian);

//旋转矩阵mx，创建绕x轴旋转矩阵
mat4 mx = mat4(
    1, 0, 0, 0,
    0, cos, -sin, 0, 
    0, sin, cos, 0,  
    0, 0, 0, 1
);
//旋转矩阵my，创建绕y轴旋转矩阵

mat4 my = mat4(
    cos, 0, -sin, 0, 
    0, 1, 0, 0,
    sin, 0, cos, 0,
    0, 0, 0, 1
);
//两个旋转矩阵、顶点齐次坐标连乘
vec4 newPos = mx * my * pos;

bajiu