WebGL入门(十)-通过矩阵相乘实现图形(三角形)的组合变换

03363160

通过矩阵相乘实现图形的组合变换

1.组合变换效果展示

在这里插入图片描述
在这里插入图片描述
如上，图一是变换前，图二是Y轴放大1.5倍，绕Z轴旋转45度，沿X轴平移0.2组合变换后的效果

2.知识点梳理

2.1组合变换原理

我们已经了解了通过矩阵可以实现图形的平移、旋转和缩放的变换，今天我们了解一下组合变换，有了之前的基础学习组合变换就会容易的多，其实很简单就是把矩阵相乘。例如：

先平移再旋转=平移矩阵*旋转矩阵
先平移再缩放=平移矩阵*缩放矩阵
先平移再缩放在旋转=平移矩阵*缩放矩阵*旋转矩阵

2.2组合变换实现要点

2.2.1顶点着色器声明uniform变量u_ModelMatrix

//顶点着色器
var VSHADER_SOURCE = '' +
  'attribute vec4 a_Position;\\n' + //声明attribute变量a_Position，用来存放顶点位置信息
  'uniform mat4 u_ModelMatrix;\\n' + //声明uniform变量u_ModelMatrix，用来存放组合变换矩阵
  'void main(){\\n' +
  '  gl_Position = u_ModelMatrix * a_Position;\\n' + //将组合变换矩阵与顶点坐标相乘赋值给顶点着色器内置变量gl_Position
  '}\\n';

2.2.2声明模型矩阵Matrix4对象及其属性方法介绍

为了方便使用平移、旋转和缩放矩阵组合，我们将它们整合到一个对象（类）上，它有一个私有属性和有三个方法：

currentMatrix 属性用来存放当前矩阵
translate(x, y, z) 方法根据参数生成平移矩阵，并与原矩阵相乘得到在原矩阵的基础上平移后的矩阵
rotate(rad, x, y, z) 方法根据参数生成旋转矩阵，并与原矩阵相乘得到在原矩阵的基础上旋转后的矩阵
scale(xScale, yScale, zScale) 方法用来根据参数生成缩放矩阵，并与原矩阵相乘得到在原矩阵的基础上缩放后的矩阵

    //初始化模型矩阵
    function Matrix4() {
      this.currentMatrix = new Float32Array([
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        0.0, 0.0, 0.0, 1.0,
      ])
    }

    // 设置平移
    Matrix4.prototype.translate = function (x, y, z) {
      var mat = new Float32Array([
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        x, y, z, 1.0,
      ])
      this.currentMatrix = matrix44Multiply(mat, this.currentMatrix)
    }

    // 设置旋转
    Matrix4.prototype.rotate = function (rad, x, y, z) {
      var mat = []
      if (x > 0) {
        // 绕x轴的旋转矩阵
        mat = new Float32Array([
          1.0, 0.0, 0.0, 0.0,
          0.0, Math.cos(rad), -Math.sin(rad), 0.0,
          0.0, Math.sin(rad), Math.cos(rad), 0.0,
          0.0, 0.0, 0.0, 1.0,
        ]);
      } else if (y > 0) {
        // 绕y轴的旋转矩阵
        mat = new Float32Array([
          Math.cos(rad), 0.0, -Math.sin(rad), 0.0,
          0.0, 1.0, 0.0, 0.0,
          Math.sin(rad), 0.0, Math.cos(rad), 0.0,
          0.0, 0.0, 0.0, 1.0,
        ]);
      } else if (z > 0) {
        // 绕z轴的旋转矩阵
        mat = new Float32Array([
          Math.cos(rad), Math.sin(rad), 0.0, 0.0,
          -Math.sin(rad), Math.cos(rad), 0.0, 0.0,
          0.0, 0.0, 1.0, 0.0,
          0.0, 0.0, 0.0, 1.0,
        ]);
      } else {
        // 单位矩阵
        mat = new Float32Array([
          1.0, 0.0, 0.0, 0.0,
          0.0, 1.0, 0.0, 0.0,
          0.0, 0.0, 1.0, 0.0,
          0.0, 0.0, 0.0, 1.0,
        ]);
      }
      this.currentMatrix = matrix44Multiply(mat, this.currentMatrix)
    }

    // 设置缩放
    Matrix4.prototype.scale = function (xScale, yScale, zScale) {
      var mat = new Float32Array([
        xScale, 0.0, 0.0, 0.0,
        0.0, yScale, 0.0, 0.0,
        0.0, 0.0, zScale, 0.0,
        0.0, 0.0, 0.0, 1.0,
      ])
      this.currentMatrix = matrix44Multiply(mat, this.currentMatrix)
    }

    //4*4矩阵乘法
    function matrix44Multiply(mat1, mat2) {
      var dest = new Float32Array([
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        0.0, 0.0, 0.0, 1.0,
      ])
      var a = mat1[0],
        b = mat1[1],
        c = mat1[2],
        d = mat1[3],
        e = mat1[4],
        f = mat1[5],
        g = mat1[6],
        h = mat1[7],
        i = mat1[8],
        j = mat1[9],
        k = mat1[10],
        l = mat1[11],
        m = mat1[12],
        n = mat1[13],
        o = mat1[14],
        p = mat1[15],
        A = mat2[0],
        B = mat2[1],
        C = mat2[2],
        D = mat2[3],
        E = mat2[4],
        F = mat2[5],
        G = mat2[6],
        H = mat2[7],
        I = mat2[8],
        J = mat2[9],
        K = mat2[10],
        L = mat2[11],
        M = mat2[12],
        N = mat2[13],
        O = mat2[14],
        P = mat2[15];
      dest[0] = A * a + B * e + C * i + D * m;
      dest[1] = A * b + B * f + C * j + D * n;
      dest[2] = A * c + B * g + C * k + D * o;
      dest[3] = A * d + B * h + C * l + D * p;
      dest[4] = E * a + F * e + G * i + H * m;
      dest[5] = E * b + F * f + G * j + H * n;
      dest[6] = E * c + F * g + G * k + H * o;
      dest[7] = E * d + F * h + G * l + H * p;
      dest[8] = I * a + J * e + K * i + L * m;
      dest[9] = I * b + J * f + K * j + L * n;
      dest[10] = I * c + J * g + K * k + L * o;
      dest[11] = I * d + J * h + K * l + L * p;
      dest[12] = M * a + N * e + O * i + P * m;
      dest[13] = M * b + N * f + O * j + P * n;
      dest[14] = M * c + N * g + O * k + P * o;
      dest[15] = M * d + N * h + O * l + P * p;
      return dest;
    }

2.2.3模型矩阵组合变换及传值给着色器

//获取顶点着色器uniform变量u_ModelMatrix(缩放矩阵)的存储地址
var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix')

//初始化模型矩阵
var modelMatrix = new Matrix4()

//定义要旋转的角度
var ANGLE = 45.0
var rad = Math.PI * ANGLE / 180.0 //将角度转换为弧度
modelMatrix.scale(1.0, 1.5, 1.0) //Y轴放大1.5倍
modelMatrix.rotate(rad, 0.0, 0.0, 1.0) //绕Z轴旋转45度
modelMatrix.translate(0.2, 0.0, 0.0) //沿X轴平移0.2个单位

//向顶点着色器uniform变量u_ModelMatrix传值
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.currentMatrix)

3.demo代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
</head>

<body>
  <!--通过canvas标签创建一个400px*400px大小的画布-->
  <canvas id="webgl" width="800" height="800"></canvas>
  <script>
    //顶点着色器
    var VSHADER_SOURCE = '' +
      'attribute vec4 a_Position;\\n' + //声明attribute变量a_Position，用来存放顶点位置信息
      'uniform mat4 u_ModelMatrix;\\n' + //声明uniform变量u_ModelMatrix，用来存放组合变换矩阵
      'void main(){\\n' +
      '  gl_Position = u_ModelMatrix * a_Position;\\n' + //将组合变换矩阵与顶点坐标相乘赋值给顶点着色器内置变量gl_Position
      '}\\n';

    //片元着色器
    var FSHADER_SOURCE = '' +
      'precision mediump float;\\n' + // 设置精度
      'uniform vec4 u_FragColor;\\n' + //声明uniform变量u_FragColor，用来存放顶点颜色信息
      'void main(){\\n' +
      //通过u_FragColor变量设置片元颜色
      ' gl_FragColor = u_FragColor;\\n' +
      '}\\n';

    //初始化着色器函数
    function initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE) {
      //创建顶点着色器对象
      var vertexShader = gl.createShader(gl.VERTEX_SHADER);
      //创建片元着色器对象
      var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
      //引入顶点、片元着色器源代码
      gl.shaderSource(vertexShader, VSHADER_SOURCE);
      gl.shaderSource(fragmentShader, FSHADER_SOURCE);
      //编译顶点、片元着色器
      gl.compileShader(vertexShader);
      gl.compileShader(fragmentShader);

      //创建程序对象program
      var program = gl.createProgram();
      //附着顶点着色器和片元着色器到program
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      //链接program
      gl.linkProgram(program);
      //使用program
      gl.useProgram(program);
      gl.program = program
      //返回程序program对象
      return program;
    }

    function init() {
      //通过getElementById()方法获取canvas画布
      var canvas = document.getElementById('webgl');
      //通过方法getContext()获取WebGL上下文
      var gl = canvas.getContext('webgl');
      //初始化着色器
      initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE);

      // 设置canvas的背景色
      gl.clearColor(0.0, 0.0, 0.0, 1.0);

      //清空canvas
      gl.clear(gl.COLOR_BUFFER_BIT);

      //给片元着色器uniform变量u_FragColor赋值
      setFragColor(gl)

      //初始化顶点
      var n = initVertexBuffers(gl)

      //获取顶点着色器uniform变量u_ModelMatrix的存储地址
      var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix')

      //初始化模型矩阵
      var modelMatrix = new Matrix4()

      //定义要旋转的角度
      var ANGLE = 45.0
      var rad = Math.PI * ANGLE / 180.0 //将角度转换为弧度
      modelMatrix.scale(1.0, 1.5, 1.0) //Y轴放大1.5倍
      modelMatrix.rotate(rad, 0.0, 0.0, 1.0) //绕Z轴旋转45度
      modelMatrix.translate(0.2, 0.0, 0.0) //沿X轴平移0.2个单位

      //向顶点着色器uniform变量u_ModelMatrix传值
      gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.currentMatrix)

      //绘制三角形
      gl.drawArrays(gl.TRIANGLES, 0, n)

    }

    //给片元着色器uniform变量u_FragColor赋值
    function setFragColor(gl) {
      //获取片元着色器uniform变量u_FragColor的存储地址
      var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
      //向片元着色器uniform变量u_FragColor传值
      gl.uniform4f(u_FragColor, 0.0, 1.0, 0.0, 1.0) //绿色
    }

    //初始化顶点
    function initVertexBuffers(gl) {
      var vertices = new Float32Array([
        0.0, 0.2,
        -0.2, -0.2,
        0.2, -0.2
      ])

      //1.创建缓冲区对象
      var vertexBuffer = gl.createBuffer();
      if (!vertexBuffer) {
        console.log('创建缓冲区对象失败！')
        return -1
      }

      //2.将缓冲区对象绑定到目标
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)

      //3.向缓冲区对象中写入数据
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

      var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); //获取着色器attribute变量a_Position的存储地址

      //4.将缓冲区对象分配给a_Position变量
      gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)

      //5.连接a_Position变量与分配给它的缓冲区对象
      gl.enableVertexAttribArray(a_Position)

      return vertices.length / 2

    }

    //初始化模型矩阵
    function Matrix4() {
      this.currentMatrix = new Float32Array([
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        0.0, 0.0, 0.0, 1.0,
      ])
    }

    // 设置平移
    Matrix4.prototype.translate = function (x, y, z) {
      var mat = new Float32Array([
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        x, y, z, 1.0,
      ])
      this.currentMatrix = matrix44Multiply(mat, this.currentMatrix)
    }

    // 设置旋转
    Matrix4.prototype.rotate = function (rad, x, y, z) {
      var mat = []
      if (x > 0) {
        // 绕x轴的旋转矩阵
        mat = new Float32Array([
          1.0, 0.0, 0.0, 0.0,
          0.0, Math.cos(rad), -Math.sin(rad), 0.0,
          0.0, Math.sin(rad), Math.cos(rad), 0.0,
          0.0, 0.0, 0.0, 1.0,
        ]);
      } else if (y > 0) {
        // 绕y轴的旋转矩阵
        mat = new Float32Array([
          Math.cos(rad), 0.0, -Math.sin(rad), 0.0,
          0.0, 1.0, 0.0, 0.0,
          Math.sin(rad), 0.0, Math.cos(rad), 0.0,
          0.0, 0.0, 0.0, 1.0,
        ]);
      } else if (z > 0) {
        // 绕z轴的旋转矩阵
        mat = new Float32Array([
          Math.cos(rad), Math.sin(rad), 0.0, 0.0,
          -Math.sin(rad), Math.cos(rad), 0.0, 0.0,
          0.0, 0.0, 1.0, 0.0,
          0.0, 0.0, 0.0, 1.0,
        ]);
      } else {
        // 单位矩阵
        mat = new Float32Array([
          1.0, 0.0, 0.0, 0.0,
          0.0, 1.0, 0.0, 0.0,
          0.0, 0.0, 1.0, 0.0,
          0.0, 0.0, 0.0, 1.0,
        ]);
      }
      this.currentMatrix = matrix44Multiply(mat, this.currentMatrix)
    }

    // 设置缩放
    Matrix4.prototype.scale = function (xScale, yScale, zScale) {
      var mat = new Float32Array([
        xScale, 0.0, 0.0, 0.0,
        0.0, yScale, 0.0, 0.0,
        0.0, 0.0, zScale, 0.0,
        0.0, 0.0, 0.0, 1.0,
      ])
      this.currentMatrix = matrix44Multiply(mat, this.currentMatrix)
    }

    //4*4矩阵乘法
    function matrix44Multiply(mat1, mat2) {
      var dest = new Float32Array([
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        0.0, 0.0, 0.0, 1.0,
      ])
      var a = mat1[0],
        b = mat1[1],
        c = mat1[2],
        d = mat1[3],
        e = mat1[4],
        f = mat1[5],
        g = mat1[6],
        h = mat1[7],
        i = mat1[8],
        j = mat1[9],
        k = mat1[10],
        l = mat1[11],
        m = mat1[12],
        n = mat1[13],
        o = mat1[14],
        p = mat1[15],
        A = mat2[0],
        B = mat2[1],
        C = mat2[2],
        D = mat2[3],
        E = mat2[4],
        F = mat2[5],
        G = mat2[6],
        H = mat2[7],
        I = mat2[8],
        J = mat2[9],
        K = mat2[10],
        L = mat2[11],
        M = mat2[12],
        N = mat2[13],
        O = mat2[14],
        P = mat2[15];
      dest[0] = A * a + B * e + C * i + D * m;
      dest[1] = A * b + B * f + C * j + D * n;
      dest[2] = A * c + B * g + C * k + D * o;
      dest[3] = A * d + B * h + C * l + D * p;
      dest[4] = E * a + F * e + G * i + H * m;
      dest[5] = E * b + F * f + G * j + H * n;
      dest[6] = E * c + F * g + G * k + H * o;
      dest[7] = E * d + F * h + G * l + H * p;
      dest[8] = I * a + J * e + K * i + L * m;
      dest[9] = I * b + J * f + K * j + L * n;
      dest[10] = I * c + J * g + K * k + L * o;
      dest[11] = I * d + J * h + K * l + L * p;
      dest[12] = M * a + N * e + O * i + P * m;
      dest[13] = M * b + N * f + O * j + P * n;
      dest[14] = M * c + N * g + O * k + P * o;
      dest[15] = M * d + N * h + O * l + P * p;
      return dest;
    }

    init()
  </script>
</body>

</html>

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
显示渲染器
# WebGL入门
喜欢就支持一下吧
点赞160 分享
点燃火柴的头像-卡核
WebGL入门(四十一)-使用帧缓冲区对象（FBO）实现将渲染结果作为纹理绘制到另一个物体上-卡核
WebGL入门(四十一)-使用帧缓冲区对象（FBO）实现将渲染结果作为纹理绘制到另一个物体上
WebGL入门(四十一)-使用帧缓冲区对象（FBO）实现将渲染结果作为纹理...
2年前 1W+
WebGL-Shader入门（3.着色器语言的限定词-参数限定词/存储限定词/精度限定词）-卡核
WebGL-Shader入门（3.着色器语言的限定词-参数限定词/存储限定词/精度限定词）
WebGL-Shader入门（3.着色器语言的限定词-参数限定词/存储限定词/精...
2年前 1W+
WebGL入门(四十四)-WebGL上下文丢失事件与上下文恢复事件处理-卡核
WebGL入门(四十四)-WebGL上下文丢失事件与上下文恢复事件处理
WebGL入门(四十四)-WebGL上下文丢失事件与上下文恢复事件处理
2年前 9998
WebGL入门(十四)-用加载纹理图片在矩形表面上创建纹理贴图/实现纹理映射-卡核
WebGL入门(十四)-用加载纹理图片在矩形表面上创建纹理贴图/实现纹理映射
WebGL入门(十四)-用加载纹理图片在矩形表面上创建纹理贴图/实现纹理...
2年前 9948
WebGL入门(三十一)-每个部件使用不同的缓冲区对象实现机械臂模拟动画-卡核
WebGL入门(三十一)-每个部件使用不同的缓冲区对象实现机械臂模拟动画
WebGL入门(三十一)-每个部件使用不同的缓冲区对象实现机械臂模拟动画
2年前 9765
三维模型反射光照射实现、物体表面高光实现（WebGL进阶04）-卡核
三维模型反射光照射实现、物体表面高光实现（WebGL进阶04）
三维模型反射光照射实现、物体表面高光实现（WebGL进阶04）
2年前 9755
相关推荐
卡核3DView在线可视模型，支持18种数据格式，免费使用！-卡核
卡核3DView在线可视模型，支持18种数据格式，免费使用！
卡核3DView在线可视模型，支持18种数据格式，免费使用！
28天前 5.4W+
显示渲染器HOOPS介绍-卡核
显示渲染器HOOPS介绍
显示渲染器HOOPS介绍
2年前 3.1W+
WebGL入门(四十一)-使用帧缓冲区对象（FBO）实现将渲染结果作为纹理绘制到另一个物体上-卡核
WebGL入门(四十一)-使用帧缓冲区对象（FBO）实现将渲染结果作为纹理绘制到另一个物体上
WebGL入门(四十一)-使用帧缓冲区对象（FBO）实现将渲染结果作为纹理绘制到另一个物体上
2年前 1W+
WebGL-Shader入门（3.着色器语言的限定词-参数限定词/存储限定词/精度限定词）-卡核
WebGL-Shader入门（3.着色器语言的限定词-参数限定词/存储限定词/精度限定词）
WebGL-Shader入门（3.着色器语言的限定词-参数限定词/存储限定词/精度限定词）
2年前 1W+
WebGL入门(四十四)-WebGL上下文丢失事件与上下文恢复事件处理-卡核
WebGL入门(四十四)-WebGL上下文丢失事件与上下文恢复事件处理
WebGL入门(四十四)-WebGL上下文丢失事件与上下文恢复事件处理
2年前 9998
WebGL入门(十四)-用加载纹理图片在矩形表面上创建纹理贴图/实现纹理映射-卡核
WebGL入门(十四)-用加载纹理图片在矩形表面上创建纹理贴图/实现纹理映射
WebGL入门(十四)-用加载纹理图片在矩形表面上创建纹理贴图/实现纹理映射
2年前 9948
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片

    暂无评论内容