WebGL与Vue结合连续绘制彩色点

本文在上篇文章的基础上，将连续绘制的点改为随机的彩色点。直接上代码。

<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: `precision mediump float;
                        uniform vec4 u_flagColor;
                        void main(){
                        gl_FragColor = u_flagColor;
                        }`,
      points: [],
      ptcolors:[],
      colorArr:[[1.0,0.0,0.0,1.0],[0.0,1.0,0.0,1.0],[0.0,0.0,1.0,1.0]],
      gl: null,
      a_Position: null,
      u_flagColor:null
    };
  },
  methods: {
    //点击canvas事件
    clickCanvas: function(ev) {
      //屏幕坐标系转WebGL坐标系
      let x = ev.clientX; //鼠标点击处的X坐标
      let y = ev.clientY; //鼠标点击处的Y坐标
      let rect = ev.target.getBoundingClientRect();
      // this.resize(this.$refs.myglCanvas);
      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,y]);

      let colorindex = Math.floor((Math.random()*this.colorArr.length)); 
      this.ptcolors.push(this.colorArr[colorindex]);

      this.gl.clear(this.gl.COLOR_BUFFER_BIT); //清除之前绘制的点
      for (let i = 0; i < this.points.length; i += 1) {
        let xy =  this.points[i];
        let rgba = this.ptcolors[i];
        
        //重新绘制点
        this.gl.vertexAttrib3f(
          this.a_Position,
          xy[0],
          xy[1],
          0.0
        );
        //设置点的颜色
        this.gl.uniform4f(
          this.u_flagColor,
          rgba[0],
          rgba[1],
          rgba[2],
          rgba[3],
        );

        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.u_flagColor = this.gl.getUniformLocation(this.gl.program, "u_flagColor");
    //设置背景色
    this.gl.clearColor(0.0, 0.0, 0.0, 1);
    //设置缓冲区颜色
    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
  }
};
</script>

<style scoped>
</style>

接下来主要说明与上篇文章不同的地方：

24行  定义点的颜色数组；

25行  定义随机选择的颜色数组，有红绿蓝三种颜色；

28行  定义与片元着色器交互的变量u_flagColor；

45-46行  随机选取红绿蓝中的一种加入到点的颜色数组中；

60-67行  设置点的颜色

81行  获取片元着色器中的u_flagColor变量，建立与自定义变量u_flagColor的联系；

 

运行效果如下

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