WebGL着色器GLSL矩阵mat

WebGL着色器GLSL矩阵mat

本文是WebGL教程(电子书)的2.5节内容

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

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

声明变量

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

mat4 matrix4;

构造函数赋值

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

注意行列对应关系，按照列的先后顺序，从上到下依次传入mat构造函数参数中。

// 需要表示的矩阵
// 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;