WebGLのuniformで構造体の配列をシェーダーに渡す方法

WebGLのシェーダー上で構造体の配列として宣言されたuniformに値を渡す方法です。
JavaScriptから配列のインデックスと構造体のプロパティを一つずつ指定して値を指定していきます。

sample.js

gl.uniform3f(gl.getUniformLocation(program, 'u_mystruct[0].color1'), 1, 0, 0);
gl.uniform3f(gl.getUniformLocation(program, 'u_mystruct[0].color2'), 0, 1, 0);
gl.uniform3f(gl.getUniformLocation(program, 'u_mystruct[1].color1'), 0, 0, 1);
gl.uniform3f(gl.getUniformLocation(program, 'u_mystruct[1].color2'), 0, 0, 0);

sample.glsl

struct MyStruct {
    vec3 color1;
    vec3 color2;
};

uniform MyStruct u_mystruct[2];

void main(void) {
    gl_FragColor = vec4(u_mystruct[0].color1 + u_mystruct[0].color2 + u_mystruct[1].color1+ u_mystruct[1].color2, 1.0);
}

　参考

• WebGLでuniform変数に配列を指定する | 生存日記
• WebGLのシェーダーとGLSL