2.绘制一个点(参数)

愿你出走半生,归来仍是少年！

1.知识点

        通过Attribute变量传输与顶点相关的数据，实现通过Ts设定顶点动态数据的效果。

1.1.gl2.getAttribLocation(program, a_PositionName)

        返回了给定WebGLProgram对象中某属性的下标指向位置。

1.2.vertexAttrib3f

        为顶点 attibute 变量赋值。

2.代码

<script setup lang="ts">
    import { onMounted, ref } from "vue";
    import Gl2Utility from "../../Gl/Gl2Utility";

    const a_PositionName = "a_Position";

    onMounted(() => {

       

        const gl2 = Gl2Utility.GetGl2("canvas");

        if (gl2 == null) {
            console.error("初始化失败！");

            return;
        }

       

        //顶点着色器源码
        const vertexShaderSource = `

        attribute vec4 ${a_PositionName};

            void main(){

                //给内置变量gl_PointSize赋值像素大小
                 gl_PointSize=20.0;

                 //顶点位置，位于坐标原点
                  gl_Position =a_Position;
            }

        `;

        const fragShaderSource = `
            void main(){
                //定义片元颜色
                gl_FragColor = vec4(1.0,1.0,1.0,1.0);
            }
        `;


        const program= Gl2Utility.InitShaders(gl2, vertexShaderSource, fragShaderSource);

        if (program == null) {
            return;
        }
        //获取参数位置
        const a_PositionLocation = gl2.getAttribLocation(program, a_PositionName);

        if (a_PositionLocation < 0) {
            console.error("获取参数失败！");

            return;
        }

        //参数传入
        gl2.vertexAttrib3f(a_PositionLocation, 0., 0., 0.);

        //设置清除时的背景色
        gl2.clearColor(0., 0., 0., 1.);

        //清除
        gl2.clear(gl2.COLOR_BUFFER_BIT);

        //绘制点
        gl2.drawArrays(gl2.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>