前言

这篇文章不说WebGL相关概念了，初学者先到网上看看WebGL相关概念。这里着重写一下在vue3前端框架下，如何通过webGL绘制圆点。

着色器代码(画点)

画点相关的着色器代码有顶点着色器和片元着色器，代码如下：

顶点着色器：

const vertexShaderSrc = `void main() { gl_Position = vec4(0, 0, 0, 1.0); gl_PointSize = 20.0;}`;

片元着色器：

const fragmentShaderSrc = `void main() {gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);}`;

初始化着色器

在网上找的一个通用的初始化着色器代码，如下所示：

function loadShader(gl, type, source) {//根据着色类型，建立着色器对象const shader = gl.createShader(type);//将着色器源文件传入着色器对象中gl.shaderSource(shader, source);//编译着色器对象gl.compileShader(shader);//返回着色器对象return shader;}export function initShaders(gl, vsSource, fsSource) {//创建程序对象const program = gl.createProgram();//建立着色对象const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);//把顶点着色对象装进程序对象中gl.attachShader(program, vertexShader);//把片元着色对象装进程序对象中gl.attachShader(program, fragmentShader);//连接webgl上下文对象和程序对象gl.linkProgram(program);//启动程序对象gl.useProgram(program);//将程序对象挂到上下文对象上gl.program = program;}

代码中注释蛮详细的。

vue3框架使用webGL画点

这里直接贴上全部代码了，如下所示：

绘制点export default {name: "point",};import { onMounted } from "vue";import { initShaders } from "@/utils/myGL.js";const vertexShaderSrc = `void main() { gl_Position = vec4(0, 0, 0, 1.0); gl_PointSize = 20.0;}`;const fragmentShaderSrc = `void main() {gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);}`;const fragmentShaderSrcCircle = `precision mediump float;void main() {float d = distance(gl_PointCoord, vec2(0.5, 0.5));if(d  {const canvas = document.getElementById("point");// webgl画笔const gl = canvas.getContext("webgl");// 初始化着色器initShaders(gl, vertexShaderSrc, fragmentShaderSrc);// 指定将要用来清理绘图区的颜色gl.clearColor(0.0, 0.0, 0.0, 1.0);// 清理绘图区gl.clear(gl.COLOR_BUFFER_BIT);// 绘制顶点gl.drawArrays(gl.POINTS, 0, 1);setTimeout(() => {initShaders(gl, vertexShaderSrc, fragmentShaderSrcCircle);// 指定将要用来清理绘图区的颜色gl.clearColor(0.0, 0.0, 0.0, 1.0);// 清理绘图区gl.clear(gl.COLOR_BUFFER_BIT);// 绘制顶点gl.drawArrays(gl.POINTS, 0, 1);}, 5000);});.point-wrapper {width: 200px;height: 200px;background-color: gray;}

myGL.js中放的是初始化着色器initShaders 接口。

大家可以拷贝代码运行一下，刚开始出现一个正方形点，5秒后变成圆点