WebGL关于着色器传值的几种方式总结

一、三个变量限定词的概念
1、Attribute
用途：传输那些和顶点数据有关的数据（例如，顶点位置、法向量、顶点颜色<每个顶点都对应一个颜色>）
2、uniform
用途：传输那些对于所有顶点都相同（或者与顶点无关数据）=》例如：旋转、平移、缩放的矩阵，每个顶点位置都要用到同样的矩阵来获取变换的位置，对于每一个顶点该矩阵都一样，或者光线的颜色，压根和顶点没有关系
3、varying
用途：从顶点着色器，像片源着色器传递数据 。例如：纹理坐标等，一般通过attribute传给varying
以上三个变量限定词都是全局属性。
二、单值传入（分别以顶点、入射光颜色）
（attribute 传值）
1、声明变量

//顶点着色器代码
var VSHADER_SOURCE =
‘attribute vec4 a_Position;\n‘ + // attribute variable
‘void main() {\n‘ +
‘ gl_Position = a_Position;\n‘ +
‘ gl_PointSize = 10.0;\n‘ +
‘}\n
1
2
3
4
5
6
7
2、获取attribute变量存储地址

var a_Position = gl.getAttribLocation(gl.program, ‘a_Position‘);
1
3、将顶点传给attribute变量（vertexAttrib3f为组函数）

gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);
1
(uniform 传值)
1、声明变量

‘uniform vec3 u_LightColor;\n‘
1
2、获取uniform变量存储地址

var u_LightColor = gl.getUniformLocation(gl.program, ‘u_LightColor‘);
1
3、将入射光颜色传给uniform（这里uniform3f也是组函数）

gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0);
1
（varying 传值）（http://www.amjmh.com/v/）

三、多值传入
（attribute 传值）
1、声明变量

‘attribute vec4 a_Position;\n‘
1
2、创建缓冲区对象

var vertexBuffer = gl.createBuffer();
1
3、绑定缓冲区对象

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
1
4、将数据写入缓冲区对象

gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
1
5、获取attribute变量存储地址

var a_Position = gl.getAttribLocation(gl.program, ‘a_Position‘);
1
6、将缓冲区对象分配给attribute变量

gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
1
7、开启attribute变量

gl.enableVertexAttribArray(a_Position);
1
(uniform 传值)
将第六步改成下面代码，第七步去掉即可

gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix.elements);
--------------------- 

WebGL关于着色器传值的几种方式总结

原文：https://www.cnblogs.com/liyanyan665/p/11304815.html