Vue与WebGL结合---旋转平移矩阵

本文在上文的基础上加上旋转平移矩阵，以达到对图像进行基本的旋转平移操作的目的。文中部分代码源自《WebGL编程指南》

代码如下：

<template>
  <div>
    <canvas ref="myglCanvas" width="400" height="400"></canvas>
  </div>
</template>

<script>
import Tools from "../lib/tools";
import {mat4} from "../lib/glMatrix/index";
import {glMatrix} from "../lib/glMatrix/index";

export default {
  name: "glCanvas",
  data() {
    return {
      VSHEADER_SOURCE: `attribute vec4 a_Position;
                        uniform mat4 u_modelMatrix;
                        void main(){
                        gl_Position = u_modelMatrix * a_Position;
                        }`,
      FSHEADER_SOURCE: `void main(){
                        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
                        }`,
    
      gl: null
    };
  },
  methods: {
    initBuffer: function(gl) {
      let vertices = new Float32Array([0, 0.3, -0.3, -0.3, 0.3, -0.3]);
      let n = 3; // The number of vertices

      //旋转角度
      const angle = 60;
      //x方向平移距离
      const transx = 0.5;

      //将角度转为弧度
      const angleRad = glMatrix.toRadian(angle)
      //创建旋转平移矩阵
      let modelMatrix = mat4.create();
      //绕z轴旋转
      mat4.rotateZ(modelMatrix, modelMatrix, angleRad);
      //沿x轴平移
      mat4.translate(modelMatrix, modelMatrix, [transx,0,0]);
      //将模型矩阵传入到顶点着色器
      let u_modelMatrix = gl.getUniformLocation(gl.program,"u_modelMatrix");

      // 创建缓冲区
      let vertexBuffer = gl.createBuffer();
      if (!vertexBuffer) {
        console.log("Failed to create the buffer object");
        return -1;
      }

      // 绑定缓冲区
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
      // 将数据写入缓冲区
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

      let a_Position = gl.getAttribLocation(gl.program, "a_Position");
      if (a_Position < 0) {
        console.log("Failed to get the storage location of a_Position");
        return -1;
      }
      //  将缓冲区对象分配给attribute对象
      gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
      gl.uniformMatrix4fv(u_modelMatrix,false,modelMatrix);
      // 开启attribute对象
      gl.enableVertexAttribArray(a_Position);

      return n;
    },
    setGL: function() {
      this.gl = this.$refs.myglCanvas.getContext("webgl");
    }
  },
  mounted() {
    this.setGL();
    Tools.initShaders(this.gl, this.VSHEADER_SOURCE, this.FSHEADER_SOURCE);
    let n = this.initBuffer(this.gl);
    if (n < 0) {
      console.log("Failed to set the positions of the vertices");
      return;
    }

    //设置背景色
    this.gl.clearColor(0.0, 0.0, 0.0, 1);
    //设置缓冲区颜色
    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
    // Draw the rectangle
    this.gl.drawArrays(this.gl.TRIANGLES, 0, n);
  }
};
</script>

<style scoped>

</style>

9-10行  引入gl-matrix库；

16-20行  顶点着色器，这里点的位置有旋转平移矩阵与点的坐标相乘得到；

39行 将角度转为弧度；

43行  矩阵绕z轴旋转；

45行 矩阵沿x轴平移；

47行  获取顶点着色器变量u_modelMatrix；

68行  给modelMatrix分配给u_modelMatrix；

效果如下：

更多内容请扫码关注我的微信公众号，或者在微信里搜索公众号webgis学习，我会不定期更新自己的webgis方面的学习心得。