1.平移效果展示

在这里插入图片描述
如上图，三角形沿着(0.5,0.5,0.0) 进行了平移，与上一次平移的效果一样，但是这次是通过平移矩阵实现平移。接下来阐述一下实现原理与实现过程

2.平移矩阵原理

在这里插入图片描述
如上，平移矩阵的推理过程分为三步：
第一步介绍矩阵变换的形式。
第二步由平移等式类比矩阵变换推出平移矩阵(行主序)。
第三步由行主序的平移矩阵推出列主序的平移矩阵，也就是WebGL中用的矩阵。

3.使用平移矩阵要点

3.1声明平移矩阵

与其他的uniform变量一样，首先要在顶点着色器的代码中声明需要的uniform变量，在这里需要注意的是这次声明的uniform变量u_TranslateMatrix的类型是mat4，之后就是将平移矩阵u_TranslateMatrix与顶点坐标a_Position相乘，然后将结果赋值给内置变量gl_Position

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

3.2获取平移矩阵u_TranslateMatrix的存储地址

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

3.3向平移矩阵u_TranslateMatrix传值

这里需要做两件事，一件是根据要平移的坐标创建平移矩阵，另一件是把创建的平移矩阵传输给顶点着色其中uniform变量u_TranslateMatrix。
这里说明一下向着色器中传输4*4矩阵的方法gl.uniformMatrix4fv()

调用示例：gl.uniformMatrix4fv(location, transpose, array)
----------------------------------------------------------------------------------
函数功能：将array表示的4*4矩阵分配给由location指定的uniform变量
----------------------------------------------------------------------------------
参数		
			location			uniform变量的存储地址
			transpose			在WebGL中必须指定为false
			array				待传输的类型化数组，4*4矩阵按列主序

----------------------------------------------------------------------------------			
返回值		无
----------------------------------------------------------------------------------
错误		INVALID_OPERATION	不存在当前程序对象	
			INVALID_VALUE		transpose不为false，或者数组的长度小于16

示例代码

//在 x、y、z轴方向上平移的距离
var Tx = 0.5
var Ty = 0.5
var Tz = 0.0

//创建平移矩阵的类型化数组
var translateMatrix = 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,
  Tx, Ty, Tz, 1.0
])

//向顶点着色器uniform变量u_TranslateMatrix传值
gl.uniformMatrix4fv(u_TranslateMatrix, false, translateMatrix)

4.demo代码

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

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

<body>
  <!--通过canvas标签创建一个400px*400px大小的画布-->
  <canvas id="webgl" width="400" height="400"></canvas>

  <script>
    //顶点着色器
    var VSHADER_SOURCE = '' +
      'attribute vec4 a_Position;\\n' + //声明attribute变量a_Position，用来存放顶点位置信息
      'uniform mat4 u_TranslateMatrix;\\n' + //声明uniform变量u_TranslateMatrix(类型是mat4)，用来存放平移矩阵
      'void main(){\\n' +
      '  gl_Position = u_TranslateMatrix * 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_TranslateMatrix(平移矩阵)的存储地址
      var u_TranslateMatrix = gl.getUniformLocation(gl.program, 'u_TranslateMatrix')

      //在 x、y、z轴方向上平移的距离
      var Tx = 0.5
      var Ty = 0.5
      var Tz = 0.0

      //创建平移矩阵的类型化数组
      var translateMatrix = 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,
        Tx, Ty, Tz, 1.0
      ])

      //向顶点着色器uniform变量u_TranslateMatrix传值
      gl.uniformMatrix4fv(u_TranslateMatrix, false, translateMatrix)

      //绘制三角形
      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.5,
        -0.5, -0.5,
        0.5, -0.5
      ])

      //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

    }
    init()
  </script>
</body>

</html>