前言
这篇文章不说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画点
这里直接贴上全部代码了,如下所示:
<template>
<div class="point-wrapper">
<div style="margin-bottom: 20px">绘制点</div>
<canvas id="point" width="100" height="100"></canvas>
</div>
</template>
<script>
export default {
name: "point",
};
</script>
<script setup>
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 < 0.5) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
} else {
discard;
}
}
`;
onMounted(() => {
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);
});
</script>
<style lang="scss" scoped>
.point-wrapper {
width: 200px;
height: 200px;
background-color: gray;
}
</style>
myGL.js中放的是初始化着色器initShaders 接口。文章来源:https://www.toymoban.com/news/detail-670159.html
大家可以拷贝代码运行一下,刚开始出现一个正方形点,5秒后变成圆点文章来源地址https://www.toymoban.com/news/detail-670159.html
到了这里,关于WebGL 绘制圆点的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!