Question

在着色器语言GLSL ES前面内容介绍过浮点数float、整形数int、三维向量vec3、4x4矩阵mat4等各种数据类型，关于结构体主要功能就是利用WebGL着色器已经提供的常见数据类型，自定义一个新的数据类型。

WebGL着色器语言中结构体和C语言类似，结构体是由多个同类或不同类的数据类型构成的一个集合。

// 首先定义一个结构体，也就是自定义一个数据类型
struct DirectionalLight {
  vec3 direction;
  vec4 color;
  float shadowBias;
};
// 使用自定义的结构体，或者说使用自定义的数据类型DirectionalLight声明一个变量
uniform DirectionalLight dirLight;

struct是声明结构体的关键字，DirectionalLight是自定义结构体的名称，可以根据表达的含义自由命名，你可以把自定义的结构体DirectionalLight理解为自定义的数据类型，自定义的数据类型DirectionalLight就像浮点数float、三维向量vec3一样可以用来声明一个变量。

访问分量(点符号.)

三维向量vec3、4x4矩阵mat4等数据类型可以通过点符号.访问自身的变量或元素，对于结构体关键字struct自定义的数据类型也一样可以通过点符号访问自身的变量或元素，你可把webgl着色器的结构体类比javascript的对象，对象可以通过点符号访问对象自身的属性。

vec3 dir = vec3(1.0,0.0,0.0);
dir.x = 100.0// x分量赋值
float x = dir.x;// 访问x分量，赋值给其它变量

struct DirectionalLight {
  vec3 direction;
  vec4 color;
};
uniform DirectionalLight dirLight;
// 结构体成员赋值
dirLight.color = vec4(0.8,0.6,0.1,1.0);
// 访问成员，赋值给其它变量
vec4 newcol = dirLight.color;

结构体uniform变量数据传递

// 获得结构体位置
var lightColor = gl.getUniformLocation(program,'directionalLight.color');
// 结构体的一个属性传递数据
gl.uniform4f(lightColor, 1.0, 0.0, 1.0,0.7);