WebGL与Vue结合连续绘制点

本文主要介绍《WebGL编程指南》中连续绘制点功能的学习，并将代码改造在Vue框架中运行。部分代码源自https://blog.youkuaiyun.com/GISuuser/article/details/82224057以及《WebGL编程指南》。

1、在src/components中新建canvas.vue文件。

2、代码如下：

<template>
  <div>
    <canvas ref="myglCanvas" @mousedown="clickCanvas($event)" width="400" height="400"></canvas>
  </div>
</template>

<script>
import Tools from "../lib/tools";
export default {
  name: "glCanvas",
  data() {
    return {
      VSHEADER_SOURCE: `attribute vec4 a_Position;
                        void main(){
                        gl_Position = a_Position;
                        gl_PointSize = 10.0;
                        }`,
      FSHEADER_SOURCE: `void main(){
                        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
                        }`,
      points: [],
      gl: null,
      a_Position: null
    };
  },
  methods: {
    //点击canvas事件
    clickCanvas: function(ev) {
      //屏幕坐标系转WebGL坐标系
      let x = ev.clientX; //鼠标点击处的X坐标
      let y = ev.clientY; //鼠标点击处的Y坐标
      let rect = ev.target.getBoundingClientRect();      
      let canvasWidth = this.$refs.myglCanvas.width;
      let canvasHeight = this.$refs.myglCanvas.height;
      x = (x - rect.left - canvasWidth / 2) / (canvasWidth / 2);
      y = (canvasHeight / 2 - (y - rect.top)) / (canvasHeight / 2);
      this.points.push(x);
      this.points.push(y);

      this.gl.clear(this.gl.COLOR_BUFFER_BIT); //清除之前绘制的点
      for (let i = 0; i < this.points.length; i += 2) {
        //重新绘制点
        this.gl.vertexAttrib3f(
          this.a_Position,
          this.points[i],
          this.points[i + 1],
          0.0
        );
        this.gl.drawArrays(this.gl.POINTS, 0, 1);
      }
    },
    setGL: function() {
      this.gl = this.$refs.myglCanvas.getContext("webgl");
    },

  },
  mounted() {    
    this.setGL();
    Tools.initShaders(this.gl, this.VSHEADER_SOURCE, this.FSHEADER_SOURCE);
    this.a_Position = this.gl.getAttribLocation(this.gl.program, "a_Position");
    //设置背景色
    this.gl.clearColor(0.0, 0.0, 0.0, 1);
    //设置缓冲区颜色
    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
  }
};
</script>

<style scoped>
</style>

1-5行  vue的template模板中新建canvas节点，并设置ref属性为myglCanvas目的是能够在代码中获取canvas对象；添加mousedown点击事件；设置canvas的宽高，注意这里的width和height，而不是在style中设置宽高。两者的区别，请自行百度。

8行引入Tools进行webgl的基本设置，代码内容参见前期的文章。

13-20行设置顶点着色器和片元着色器，这里使用的是模板字符串（``）。与之前不同的是这里在顶点着色器中引入了a_Position变量给顶点的位置赋值；

attribute变量用于传输与顶点相关的数据；

uniform变量用于传输与顶点无关的数据，即所有顶点都相同的数据；

21行定义绘制的点的数组；

22行定义webgl上下文；

23行定义a_Position变量；

43-47行这只顶点的位置；

53行建立gl上下文；

60行获取顶点着色器中的a_Position，并建立与data中a_Position的联系；

3、运行效果

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