本文是WebGL电子书的2.16节内容。
WebGL着色器和javascript语言、C语言一样 可以声明数组类型变量，不过WebGL着色器的数据仅仅支持一维数组，不支持多维数组。
声明语法结构
数组元素的数据类型 数组变量名[数组元素个数]
// 声明一个数组变量fArr，数组变量fArr有100个元素，元素的数据类型是浮点数
float arr[100];
// 声明一个长度20的三维向量数组变量v3Arr
vec3 v3Arr[20];
访问数组变量元素,直接通过数组下标就可以，比如arr[0]表示数组第一个元素，arr[1]表示数组第二个元素。
gl_Position =vec4(arr[1],0.0,0.0,1.0)
数组变量数据传递
WebGL顶点或片元着色器的数组变量需要传递数据，声明数组变量的时候，需要使用关键词uniform。
uniform float arr[12];
调用WebGL API给数据变量传递数据
uniform float arr[12];
// 传递数组的某个元素 一次传递一个
var arr0 = gl.getUniformLocation(program, "arr[0]")
// 传递数组第1个元素的值
gl.uniform1f(arr0, 0.3);
var arr1 = gl.getUniformLocation(program, "arr[1]")
// 传递数组第2个元素的值
gl.uniform1f(arr1, -0.3);
// 批量传递数组元素值
var arr =gl.getUniformLocation(program, "arr")
var typeArr = new Float32Array([
0.6,-0.3,0.6,0.4,
-0.8,-0.3,0.6,0.4,
0.7,0.7,0.6,0.99,
])
gl.uniform1fv(, typeArr);
结构体声明数组元素
自定义结构体用来声明数组元素的数据类型。
// 自定义一个方向光结构体
struct DirectionalLight {
vec3 direction;//光的方向
vec4 color;//光的颜色
};
// 声明一个数组变量dirLight，可以存入3个方向光元素
// DirectionalLight声明数组元素的数据类型
uniform DirectionalLight dirLight[3];
// 通过WebGL API给数组中第二个方向光的颜色成员传递值
var lightColor = gl.getUniformLocation(program,'dirLight[1].color');
gl.uniform4f(lightColor, 1.0, 0.0, 1.0,0.7);