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>