码迷,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
迷上了代码!