愿你出走半生,归来仍是少年!
1.知识点
1.1.画布
Canvas对象是在网页中的画布对象,具有2D和3D绘图功能。
canvas.getContext('2d')可获取画布的二维绘制对象(CanvasRenderingContext2D);canvas.getContext('webgl') canvas.getContext('webgl2')可获取画布的三维绘制对象(WebGLRenderingContext | WebGL2RenderingContext);
1.2.WebGL2RenderingContext
WebGL2RenderingContext接口提供基于 OpenGL ES 3.0 的绘图上下文,用于在 HTML <canvas> 元素内绘图。
1.2.1.createShader(Type)
用于创建一个 WebGLShader 着色器对象,该对象可以使用shaderSource()和 complileShader()方法配置着色器代码。参数为gl.VERTEX_SHADER
或 gl.FRAGMENT_SHADER
两者中的一个。
1.2.2.shaderSource(shader,source)
用于设置 WebGLShader 着色器(顶点着色器及片元着色器)的 GLSL 程序代码。
1.2.3.compileShader(shader)
用于编译一个 GLSL 着色器,使其成为为二进制数据,然后就可以被WebGLProgram对象所使用。
1.2.4.createProgram()
用于创建和初始化一个 WebGLProgram 对象。
1.2.5.attachShader(program, shader)
负责往 WebGLProgram 添加一个片段或者顶点着色器。
1.2.6.linkProgram(program)
链接给定的WebGLProgram,从而完成为程序的片元和顶点着色器准备 GPU 代码的过程。
1.2.7.useProgram(program)
将定义好的WebGLProgram 对象添加到当前的渲染状态中
1.2.8.drawArrays(mode, first, count)
用于从向量数组中绘制图元
2.代码
<script setup lang="ts">
import { onMounted, ref } from "vue";
onMounted(() => {
const canvas = document.getElementById("canvas") as HTMLCanvasElement;
//通过方法getContext()获取WebGL上下文
const gl = canvas.getContext('webgl');
const canvans2d=canvas .getContext("2d")
//顶点着色器源码
const vertexShaderSource = `
void main(){
//给内置变量gl_PointSize赋值像素大小
gl_PointSize=20.0;
//顶点位置,位于坐标原点
gl_Position =vec4(0.0,0.0,0.0,1.0);
}
`;
const fragShaderSource = `
void main(){
//定义片元颜色
gl_FragColor = vec4(1.0,1.0,1.0,1.0);
}
`;
//创建顶点着色器对象
const vertexShader=gl.createShader(gl.VERTEX_SHADER);;
//创建片元着色器对象
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
//引入顶点、片元着色器源代码
gl.shaderSource(vertexShader, vertexShaderSource);
gl.shaderSource(fragmentShader, fragShaderSource);
//编译顶点、片元着色器
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);
//创建程序对象program
const program = gl.createProgram();
//附着顶点着色器和片元着色器到program
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
//链接program
gl.linkProgram(program);
//使用program
gl.useProgram(program);
gl.drawArrays(gl.POINTS,0,1)
});
</script>
<template>
<div class="demo_main">
<canvas id="canvas"></canvas>
</div>
</template>
<style scoped>
#canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: blue;
}
.demo_main {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>