WebGL通过getAttribLocation向顶点坐标器传递信息

Posted 2021-02-11 tongyuzhe

<canvas style="border: red solid 3px;" id=‘webgl‘ width=‘500‘ height=‘500‘>不支持</canvas>
<script>
    //顶点着色器程序
    var VSH =
        ‘attribute vec4 a_Position;
‘ +
        ‘attribute float a_PointSize;
‘ +
        ‘void main(){
‘ +
            ‘gl_Position = a_Position;
‘ + //坐标
            ‘gl_PointSize = a_PointSize;
‘ + //尺寸
        ‘}
‘;

    //片元着色器程序
    var FSH =
        ‘void main(){
‘ +
            ‘gl_FragColor = vec4(1.0,0.5,0.9,1.0);
‘ + //颜色
        ‘}
‘;



    var canvas = document.getElementById(‘webgl‘);
    var gl = getWebGLContext(canvas);
    initShaders(gl, VSH, FSH); //初始化着色器

    var a_Position = gl.getAttribLocation(gl.program, ‘a_Position‘); //获取attribute -> a_Position变量的存储地址
    gl.vertexAttrib3f(a_Position, 0.5, 0.0, 0.0);    //将顶点的位置传给attribute变量

    var a_PointSize = gl.getAttribLocation(gl.program, ‘a_PointSize‘); //获取attribute -> a_PointSize变量的存储地址
    gl.vertexAttrib1f(a_PointSize, 150.0);    //将顶点的位置传给attribute变量

    gl.clearColor(0.0, 0.0, 1.0, 1.0); //指定背景色
    gl.clear(gl.COLOR_BUFFER_BIT); //填充
    gl.drawArrays(gl.POINTS, 0, 1); //绘制一个点
    /*
        因为绘制的是单独的点，所以是gl.POINTS
        第二个参数为0，表示从第一个顶点画起
        第三个参数为1，表示在程序中只绘制了一个点
    */

</script>