Vue与WebGL结合--绘制彩色点和三角形

上篇文章中的点的颜色都为红色，其中的颜色变量直接在片元着色器中设置完成。本文介绍将颜色数据与点的坐标数据一起传入着色器中进行点的颜色设置，需要用到varying类型变量。本文部分代码源自《WebGL编程指南》。

代码如下：

<template>
  <div>
    <canvas ref="myglCanvas" 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;
                        attribute float a_pointSize;
                        attribute vec4 a_Color;
                        varying vec4 v_Color;
                        void main(){
                          gl_Position = a_Position;
                          gl_PointSize = a_pointSize;
                          v_Color = a_Color;
                        }`,
      FSHEADER_SOURCE: `precision mediump float;  
                        varying vec4 v_Color;                   
                        void main(){
                          gl_FragColor = v_Color;
                        }`,
      gl: null   
    };
  },
  methods: {
    setBuffer: function(gl) {
      //第一个点，前两个数字表示位置，第三个数字表示大小,接下来三个数字表示颜色
      let vertices = new Float32Array([0, 0.5, 10.0, 1.0,0.0,0.0, 
                                       -0.5, -0.5,20.0, 0.0,1.0,0.0,
                                       0.5, -0.5,30.0, 0.0,0.0,1.0 ]);
      let n = 3; // 点的个数     
      const fSize = vertices.BYTES_PER_ELEMENT;  //每个元素占的大小
      // 创建缓冲区
      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);

      this.initBuffer(gl,"a_Position",2,fSize*6,0);
      this.initBuffer(gl,"a_pointSize",1,fSize*6,fSize*2);
      this.initBuffer(gl,"a_Color",3,fSize*6,fSize*3);

      // Unbind the buffer object
      gl.bindBuffer(gl.ARRAY_BUFFER, null);

      return n;
    },
    /**
     * 初始化缓冲区
     * paramStr  变量名
     * count     对象个数
     * stride    步长
     * offset    偏移量
     */
    initBuffer:function(gl,paramStr,count,stride,offset){
      let a_param = this.gl.getAttribLocation(gl.program,paramStr);
      if (a_param < 0) { 
        console.log(paramStr+" failed");          
        return -1;
      }
      //  将缓冲区对象分配给attribute对象
      gl.vertexAttribPointer(a_param, count, gl.FLOAT, false, stride, offset);
      // 开启attribute对象
      gl.enableVertexAttribArray(a_param);

    },

    setGL: function() {
      this.gl = this.$refs.myglCanvas.getContext("webgl");
    }
  },
  mounted() {
    this.setGL();

    Tools.initShaders(this.gl, this.VSHEADER_SOURCE, this.FSHEADER_SOURCE);
    let pointCount = this.setBuffer(this.gl);
    if(pointCount < 0 ){
      console.log("set points failed");
      return;
    }
    
    //设置背景色
    this.gl.clearColor(0.0, 0.0, 0.0, 1);
    //设置缓冲区颜色
    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
    //绘制点
    this.gl.drawArrays(this.gl.POINTS, 0, pointCount);
 
  }
};
</script>

<style scoped>
</style>

15-16行 创建attribute类型变量 a_Color，并将其赋值给varying类型变量v_Color，用于将颜色数据传至片元着色器中；

33-35行 初始化顶点数据，共3个点。这里z默认为0，前两个值表示点的x、y坐标，第三个值为点的尺寸大小；随后3个数字表示该点的颜色；

50-52行 设置缓冲区数据；

98行 绘制点

运行代码，效果如下图

将98行代码改成绘制三角形，代码如下

this.gl.drawArrays(this.gl.TRIANGLES, 0, pointCount);

运行代码，可以看到效果

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