webgl学习二--从外部向着色器传值<head> <title> webgl程序之从外部向着色器传值 </title>

一、代码：

<html>
    <head>
        <title>
            webgl程序之从外部向着色器传值
        </title>
        <script type="text/javascript" src="./lib/webgl-debug.js"></script>
        <script type="text/javascript" src="./lib/webgl-utils.js"></script>
        <script type="text/javascript" src="./lib/cuon-utils.js"></script>
    </head>
    <body>
        <canvas id='canvas' width="800" height="800"></canvas>
        <script type="text/javascript">

            //定义变量存储位置
            //attribute：存储顶点位置，经常变的，无精度限定
            //uniform:存储不变的值，有精度限定
            var VShader="attribute vec4 a_position;\n"+
            "void main(){\n"+
            "gl_Position=a_position;"+
            "gl_PointSize=10.0;\n"+
            "}"
    
    
            var FShader="precision mediump float;\n"+
            "uniform vec4 u_color;\n"+
            "void main(){\n"+
            "gl_FragColor=u_color;\n"+
           
            "}"

            //
            var canvas=document.getElementById("canvas");
            var gl=getWebGLContext(canvas);
            if(!gl){
                console.log("获取webgl上下文失败")
            }
          

            
            if(!initShaders(gl,VShader,FShader)){
                console.log("初始化着色器失败")        
            }

            //获取着色器中的变量的地址
            var a_position=gl.getAttribLocation(gl.program,'a_position')
            var u_color=gl.getUniformLocation(gl.program,'u_color')
            if(a_position<0){
                console.log("获取a_position变量地址失败")
            }
            if(u_color<0){
                console.log("获取f_color变量地址失败")
            }

            //将顶点位置赋给a_position变量,传4个float类型的值则为4f，或者3f...
            gl.vertexAttrib4f(a_position,0,0,0,1)
            //传给颜色值
            var color=[255,0,0,1];
            //有四个分量的矢量，float类型
            gl.uniform4fv(u_color,color)
            gl.clearColor(0,0,0,1)
            gl.clear(gl.COLOR_BUFFER_BIT)
            gl.drawArrays(gl.POINTS,0,1)

        </script>
    </body>
  
</html>
效果：

图片.png