一、存储限定字
首先需要了解存储限定字才能正确认识布局限定符。
在webGL中要实现着色器和JS代码之间的数据交互，主要靠三类变量（分类的依据是存储限定字），分别是：attribute,uniform,varying，其中attrbute和uniform变量负责JS程序和两种着色器（顶点着色器和片元着色器）之间的交互，varying变量负责顶点着色器和片元着色器之间的交互。
而着色器和JS之间数据的交互主要依靠webGL上下文中自定义的函数实现。
//获取WebGL上下文
var canvas=document.createElement(“canvas”);
var gl=getWebGLContext(canvas)
| 函数 |
函数的作用 |
| 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 ATTRIB_POS = 0;
const 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的理解，菜鸟一只，欢迎批评指正。
