本文在上篇文章的基础上,将连续绘制的点改为随机的彩色点。直接上代码。
<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方面的学习心得。