本人是三维可视化方向的研究生，最近因为时间比较多，想深入学习下webgl。
案例效果
varying 同时在顶点着色器和片元着色器中定义，用于在两者之间传递数据。

shader编写

var vertexShaderSource =
            "precision lowp float;\n" +
            "attribute vec3 vertexPos;\n" +
            "attribute vec4 inColor;\n" +    定义变量inColor用于传递给outColor
            "varying vec4 outColor;\n" +     定义变量outColor
            "    void main(void) {\n" +
            "outColor = inColor;\n" +        将inColor传递给outcolor
            "	// Return the transformed and projected vertex value\n" +
            "    gl_Position = " +
            "   vec4(vertexPos, 1.0);\n" +
            "    }\n";
var fragmentShaderSource =
            "precision lowp float;\n" +
            "varying vec4 outColor;\n" +    定义outColor 用于接收vertexshader中out
            "void main(void){\n" +           Color中的值
            "gl_FragColor = outColor;\n" +   将outColor的值赋值给gl_FragColor
            "}\n";

注意：需要定义精度变量precision lowp float；

varying的使用

var inColor = 1; //一定要设定初始值
var verts = [
                0.5, 0.5, 0.0, 1.0, 0.0, 1.0, 1,
                -0.5, 0.5, 0.0, 0.0, 1.0, 1.0, 1,
                0.5, -0.5, 0.0, 0.0, 1.0, 0.0, 1,
                -0.5, -0.5, 0.0, 1.0, 0.0, 1.0, 1,
            ]
function initShader(gl, obj) {
            var fragmentShader = createShader(gl, fragmentShaderSource, 'fragment');
            var vertexShader = createShader(gl, vertexShaderSource, 'vertex');
            shaderProgram = gl.createProgram();
            
            gl.attachShader(shaderProgram, vertexShader);
            gl.attachShader(shaderProgram, fragmentShader);
            
gl.bindAttribLocation(shaderProgram,shaderVertexPositionAttribute,'vertexPos');
//与定义的inColor进行关联
            gl.bindAttribLocation(shaderProgram, inColor, 'inColor');
            gl.linkProgram(shaderProgram);
            if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
                console.log(gl.getProgramInfoLog(shaderProgram));
                // alert("Could not initialise shaders");
            }

function draw(gl, obj) {
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer);
            gl.useProgram(shaderProgram);
            // gl.uniformMatrix4fv(shaderProjectMatrixUniform,false,projectionMatrix);
 gl.uniformMatrix4fv(shaderModelViewMatrixUniform,false,modelViewMatrix);
            gl.enableVertexAttribArray(shaderVertexPositionAttribute);
            gl.enableVertexAttribArray(inColor);
            gl.vertexAttribPointer(shaderVertexPositionAttribute, obj.vertSize, gl.FLOAT, false,28, 0);
            //第一个参数是与shader对应的js变量，第二个变量是需要几个数值（agba）总共四个，倒数第二个参数是一组数据的个数乘以字符大小（7*4）倒数第一个从第几个开始才对应agba（3*4）
            gl.vertexAttribPointer(inColor, 4, gl.FLOAT, false, 28, 12);
            
            gl.drawArrays(obj.primtype, 0, obj.nVerts)
        }

补充

getProgramInfoLog 支持这几种状态
getShaderInfoLog支持这几种状态