四、js与着色器传递数据--uniform变量

一、介绍

js与着色器传递片元着色器数据时，多会使用到uniform变量，uniform变量的使用与attribute变量在使用上类似，不同之处在于uniform变量传输对于所有顶点都相同（与顶点无关）的数据。下面通过一个例子了解一下。

二、关键代码

···

#片元着色器
var FSHADER_SOURCE =
    #precision为精度限定词，指定变量范围（最大值和最小值）和精度
    #mediump表示中等精度
    'precision mediump float;\n' +
    'uniform vec4 u_FragColor;\n' +  // uniform変数
    'void main() {\n' +
    '  gl_FragColor = u_FragColor;\n' +
    '}\n';
    
function main() {
    
    ···
    
    # 获取u_FragColor变量的存储位置
    # 出错时返回null而非-1
    var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
    # 将顶点颜色传输给u_FragColor变量
    gl.uniform4f(u_FragColor, 0.0, 0.0, 0.0, 1.0);
    gl.drawArrays(gl.POINTS, 0, 1);
}

内置方法说明

1、声明uniform变量

语法

    uniform  vec4   u_FragColor
     存储限定符  类型   变量名

2、

gl.getUniformLocation(program, name)
类似于上节
gl.getAttributeLocation(program, name)

gl.uniform4f(location, v0, v1, v2, v3)
类似于上节
gl.vertexAttrib3f(location, v0, v1, v2);

3、gl.uniform4f()的同族函数

gl.uniform4f(location, v0)
gl.uniform4f(location, v0, v1)
gl.uniform4f(location, v0, v1, v2)
gl.uniform4f(location, v0, v1, v2, v3)

注：

（1）如果未设值，v0, v1, v2的默认值为0.0， v3的默认值为1.0