1.demo效果

在这里插入图片描述

如上，图一是在视点观察到的原始图像，图二是在视点观察到旋转90的效果。

2.相关知识点

2.1 从视点观察变换后图形的模型

我们已经知道，如果你想让图形旋转，就可以用旋转矩阵乘以原始顶点坐标即
<旋转后的顶点坐标>=<旋转矩阵>x<原始顶点坐标>
如果想获得从视点出发看到旋转后图形的顶点坐标，那么用视图矩阵乘以旋转后顶点坐标即可
<从视点上观察旋转后的顶点坐标>=<视图矩阵>x<旋转后的顶点坐标>
有以上两个关系代入，得到
<从视点上观察旋转后的顶点坐标>=<视图矩阵>x<旋转矩阵>x<原始顶点坐标>
在这里我们只特殊的指定是旋转操作，其实我们是可以同时进行旋转、缩放、平移的任何组合变换，我们这时把组合变换的矩阵称为 模型矩阵 ，把旋转矩阵替换为模型矩阵后，我们就可以得出从视点观察任何组合变换后的顶点坐标的表达式，即
<从视点上观察组合变换后的顶点坐标>=<视图矩阵>x<模型矩阵>x<原始顶点坐标>

2.2 Matrix4对象的图形变换相关方法和属性

这里我们介绍一下cuon-matrix.js 中的 Matrix4对象的图形变换相关方法和属性

方法/属性名称	描述
Matrix4.setIdentity()	将Matrix4实例初始化为单位矩阵
Matrix4.setTranslate(x,y,z)	将Matrix4实例设置为平移矩阵，参数x，y，z分别代表在X轴，Y轴，Z轴上平移的距离
Matrix4.setRotate(angle,x,y,z)	将Matrix4实例设置为旋转矩阵，旋转的角度为angle，旋转轴为(x,y,z)
Matrix4.setScale(x,y,z)	将Matrix4实例设置为缩放矩阵，在三个轴上的缩放因子分别是x，y，z
Matrix4.translate(x,y,z)	将Matrix4实例乘以一个平移矩阵，该平移矩阵在X轴上平移x，Y轴上平移y，Z轴上平移z，相乘的结果还是储存在Matrix4中
Matrix4.rotate(angle,x,y,z)	将Matrix4实例乘以一个旋转矩阵，该旋转矩阵旋转的角度为angle，旋转轴为(x,y,z)，相乘的结果还是储存在Matrix4中
Matrix4.scale(x,y,z)	将Matrix4实例乘以一个缩放矩阵，该缩放矩阵在三个轴上的缩放因子分别是x，y，z 。相乘的结果还是储存在Matrix4中
Matrix4.set(m)	将Matrix4实例设置为m，m必须也是一个Matrix4实例
Matrix4.elements	保存了Matrix4实例的矩阵元素的类型化数组，该类型化数组的种类为Float32Array

从上表中发现，包含set前缀的方法会更加参数计算出变换矩阵，并将该矩阵写入到自身中，即你可以通过Matrix4.elements获取该矩阵的内容，而不包含set前缀的方法，会先根据参数计算出变换矩阵，然后将自身和得到的变换矩阵相乘，最后把相乘后的矩阵写入到自身中，也就是说如果你需要对一个图形进行复合变换需要使用没有set前缀的方法。

3.demo代码

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

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

<body>
  <!--通过canvas标签创建一个800px*800px大小的画布-->
  <canvas id="webgl" width="800" height="800"></canvas>
  <script type="text/javascript" src="./lib/cuon-matrix.js"></script>
  <script>
    //顶点着色器
    var VSHADER_SOURCE = '' +
      'attribute vec4 a_Position;\\n' + //声明attribute变量a_Position，用来存放顶点位置信息
      'attribute vec4 a_Color;\\n' + //声明attribute变量a_Color，用来存放顶点颜色信息
      'uniform mat4 u_ViewMatrix;\\n' + //声明uniform变量u_ViewMatrix，用来存放视图矩阵
      'uniform mat4 u_ModelMatrix;\\n' + //声明uniform变量u_ModelMatrix，用来存放模型矩阵
      'varying vec4 v_Color;\\n' + //声明varying变量v_Color，用来向片元着色器传值顶点颜色信息
      'void main(){\\n' +
      '  gl_Position = u_ViewMatrix * u_ModelMatrix * a_Position;\\n' + //将视图矩阵与顶点坐标相乘赋值给顶点着色器内置变量gl_Position
      '  v_Color = a_Color;\\n' + //将顶点颜色信息传给片元着色器，
      '}\\n';

    //片元着色器
    var FSHADER_SOURCE = '' +
      '#ifdef GL_ES\\n' +
      ' precision mediump float;\\n' + // 设置精度
      '#endif\\n' +
      'varying vec4 v_Color;\\n' + //声明varying变量v_Color，用来接收顶点着色器传送的片元颜色信息
      'void main(){\\n' +
      //将varying变量v_Color接收的颜色信息赋值给内置变量gl_FragColor
      ' gl_FragColor = v_Color;\\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');
      //初始化着色器
      if (!initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('初始化着色器失败');
        return;
      }

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

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

      //初始化顶点坐标和顶点颜色
      var n = initVertexBuffers(gl)

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

      //初始化视图矩阵
      var viewMatrix = new Matrix4()

      //设置视点、视线和上方向
      viewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0)

      //将视图矩阵传给顶点着色器uniform变量u_ViewMatrix
      gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements)

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

      //设置旋转矩阵
      modelMatrix.setRotate(-20, 0, 0, 1)

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

      //将模型矩阵传给顶点着色器uniform变量u_ModelMatrix
      gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements)

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

    }

    //初始化顶点坐标和顶点颜色
    function initVertexBuffers(gl) {
      var verticesColors = new Float32Array([
        //最后面的三角形
        0.0, 0.5, -0.4, 0.4, 1.0, 0.4,
        -0.5, -0.5, -0.4, 0.4, 1.0, 0.4,
        0.5, -0.5, -0.4, 1.0, 0.4, 0.4,

        //中间的三角形
        0.5, 0.4, -0.2, 1.0, 0.4, 0.4,
        -0.5, 0.4, -0.2, 1.0, 1.0, 0.4,
        0.0, -0.6, -0.2, 1.0, 1.0, 0.4,

        //最前面的三角形
        0.0, 0.5, 0.0, 0.4, 0.4, 1.0,
        -0.5, -0.5, 0.0, 0.4, 0.4, 1.0,
        0.5, -0.5, 0.0, 1.0, 0.4, 0.4,
      ]);

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

      //将顶点坐标和顶点颜色信息写入缓冲区对象
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer)
      gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW)

      //获取类型化数组中每个元素的大小
      var FSIZE = verticesColors.BYTES_PER_ELEMENT

      //获取顶点着色器attribute变量a_Position的存储地址, 分配缓存并开启
      var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
      gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0)
      gl.enableVertexAttribArray(a_Position)

      //获取顶点着色器attribute变量a_Color(顶点颜色信息)的存储地址, 分配缓存并开启
      var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
      gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3)
      gl.enableVertexAttribArray(a_Color)

      // 解绑缓冲区对象
      gl.bindBuffer(gl.ARRAY_BUFFER, null);

      return verticesColors.length / 6

    }

    init()
  </script>
</body>

</html>