本文主要介绍《WebGL编程指南》中连续绘制点功能的学习,并将代码改造在Vue框架中运行。部分代码源自https://blog.csdn.net/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方面的学习心得。