廊坊市建设银行网站,手机软件开发,自然搜索优化,西安最好的室内设计公司前言
这篇文章不说WebGL相关概念了#xff0c;初学者先到网上看看WebGL相关概念。这里着重写一下在vue3前端框架下#xff0c;如何通过webGL绘制圆点。
着色器代码(画点)
画点相关的着色器代码有顶点着色器和片元着色器#xff0c;代码如下#xff1a;
顶点着色器…前言
这篇文章不说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画点
这里直接贴上全部代码了如下所示
templatediv classpoint-wrapperdiv stylemargin-bottom: 20px绘制点/divcanvas idpoint width100 height100/canvas/div
/templatescript
export default {name: point,
};
/scriptscript 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);
});
/scriptstyle langscss scoped
.point-wrapper {width: 200px;height: 200px;background-color: gray;
}
/style
myGL.js中放的是初始化着色器initShaders 接口。
大家可以拷贝代码运行一下刚开始出现一个正方形点5秒后变成圆点
