Vue与WebGL结合--绘制不同大小的点

本文将点的尺寸变量传入顶点着色器，并将顶点坐标和尺寸数据存放在同一个缓冲区中进行渲染，达到绘制不同大小的点的目的，本文部分代码源自《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;
                        void main(){
                        gl_Position = a_Position;
                        gl_PointSize = a_pointSize;
                        }`,
      FSHEADER_SOURCE: `precision mediump float;                      
                        void main(){
                        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
                        }`,
      gl: null   
    };
  },
  methods: {
    setBuffer: function(gl) {
      let vertices = new Float32Array([0, 0.5, 10.0,  //第一个点，前两个数字表示位置，第三个数字表示大小
                                       -0.5, -0.5,  20.0,
                                       0.5, -0.5,  30.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);

      let a_Position = gl.getAttribLocation(gl.program, "a_Position");
      if (a_Position < 0) {
         console.log("a_Position failed");       
        return -1;
      }

      let a_pointSize = this.gl.getAttribLocation(gl.program,"a_pointSize");
      if (a_pointSize < 0) { 
        console.log("a_pointSize failed");          
        return -1;
      }

      //  将缓冲区对象分配给attribute对象
      gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, fSize*3, 0);
      gl.vertexAttribPointer(a_pointSize, 1, gl.FLOAT, false, fSize*3, fSize*2);
    
      // 开启attribute对象
      gl.enableVertexAttribArray(a_Position);
      gl.enableVertexAttribArray(a_pointSize);

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

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

14行 在顶点着色器中定义点的尺寸变量 a_pointSize，数据类型为float；

28-30行  初始化顶点数据，共3个点。这里z默认为0，前两个值表示点的x、y坐标，第三个值为点的尺寸大小；

34行 获取点数组中每个元素所占的大小；

35-57行 创建缓冲区、绑定缓冲区、将数据写入缓冲区；

60-61行 将缓冲区对象分配给attribute，这里采用了vertexAttribPointer的步进和偏移。vertexAttribPointer函数的各参数含义如下：

68行 解绑缓冲区；

92行  绘制点；

运行代码，效果如下：

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