GLSL ES中的布局限定符（layout）

一、存储限定字

首先需要了解存储限定字才能正确认识布局限定符。
在webGL中要实现着色器和JS代码之间的数据交互，主要靠三类变量（分类的依据是存储限定字），分别是：attribute,uniform,varying，其中attrbute和uniform变量负责JS程序和两种着色器（顶点着色器和片元着色器）之间的交互，varying变量负责顶点着色器和片元着色器之间的交互。
而着色器和JS之间数据的交互主要是靠webGL上下文（var canvas=document.createElement(“canvas”);var gl=canvas.getContext(‘2d’)）中自定义的函数实现的。

函数	函数的作用
gl.getUniformLocation()	获得uniform变量的存储位置
gl.getAttribLocation()	获得attribute变量的存储位置
gl.uniform4321f() 说明：4321中的任一个数字均可以	给uniform变量赋值
gl.vertexAttrib1234f() 说明：4321中的任一个数字均可以	给attribute变量赋值，一次只能赋值一个顶点
gl.vertexAttribPointer()	将缓冲区对象赋值给attribute变量，将缓冲区中的所有点赋值给attribute变量

上述的函数的具体参数及使用方法参考网址：点击这里

二、布局限定符

在上述存储限定字的基础上，进一步了解布局限定符layout。这里的着重点放在gl.getAttribLocation(shaderProgram,“XX”)函数上

参数	含义
shanderProgram	即用gl.createProgram()函数创建的染色器程序
“XX”	染色器程序中定义的attribute变量的变量名

正如上述函数所示，如果想要获得一个uniform变量的存储地址，需要知道这个变量在着色器程序中的变量名。有了layout，事情就发生改变了。先来看一下下面这段包含layout的代码。

//js代码
const int ATTRIB_POS = 0;
const int ATTRIB_UV   = 1;
gl.vertexAttribPointer( ATTRIB_POS, 4, GL_FLOAT, GL_FALSE, 0, 0 );
glVertexAttribPointer( ATTRIB_UV, 2, GL_FLOAT, GL_FALSE, 0, 0 );

//着色器代码
layout(location = 0) in vec4 vertexPosition;
layout(location = 1) in vec2 vertexUV;

在上述的代码只对attribute变量进行了赋值的操作，而省略了获得其存储位置的过程，主要的功臣就是layout(location=0)，在js中直接可以操作location=0,即上述代码中的ATTRIB_POS。到这里就是现阶段我对layout的理解，菜鸟一只，欢迎批评指正。