码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-02-28 21:26:12      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:get   idt   背景   init   坐标   ini   指定   osi   div   

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

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



    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>

 

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

标签:get   idt   背景   init   坐标   ini   指定   osi   div   

原文地址:https://www.cnblogs.com/tongyuzhe/p/10452969.html

踩
(0)
赞
(0)
   
举报
评论 一句话评论(0)
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!