Three.js中文网 Three.js中文网
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • 文章
WebGPU教程
  • WebGL教程
  • ES GLSL着色器语言
  • WebGL教程(旧版本)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原官网文档 (opens new window)
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • 文章
WebGPU教程
  • WebGL教程
  • ES GLSL着色器语言
  • WebGL教程(旧版本)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原官网文档 (opens new window)
Web3D系统课程视频
  • 1. 声明一个变量
  • 2. 声明一个常量const
  • 3. 数据类型—基本类型
  • 4. 数据类型-向量
  • 5. 数据类型-矩阵
    • 6. if-else语句和for语句
    • 7. 内置变量
    • 8. attribute、uniform、varying
    • 9. 顶点和片元着色器
    • 10. 取样器sampler2D
    • 11. 内置函数
    • 12. 着色器计算精度precision
    • 13. 函数
    • 14. 结构体
    • 15. discard舍弃片元
    • 16. 数组
    • 17. 预处理
    • ES GLSL着色器语言
    郭隆邦
    2026-05-22
    目录

    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;
    
    4. 数据类型-向量
    6. if-else语句和for语句

    ← 4. 数据类型-向量 6. if-else语句和for语句→

    Theme by Vdoing | Copyright © 2016-2026 豫ICP备16004767号-2
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式