介绍
开始学习webgl一些简单demo的时候,看到是使用gl.getAttribLocation
可以获取当前着色器程序某个attribute变量的系统自动分配的默认位置
如果使用gl.bindAttribLocation
就可以自定义指定位置,根据allAttrInfo中attribute顺序指定对应索引位置,方便后续调用
使用意义
手动属性分配: 在默认情况下,WebGL会自动分配顶点属性索引,但有时开发者希望手动指定这些索引。gl.bindAttribLocation 允许开发者控制属性索引,从而更好地适应特定的着色器程序。
多个着色器程序: 在使用多个着色器程序时,每个程序的属性索引可能会相互冲突。通过使用 gl.bindAttribLocation,可以确保不同的着色器程序使用相同的属性索引,从而简化代码。
案例
// 创建顶点着色器程序和片段着色器程序
// 在顶点着色器中,将顶点位置属性关联到变量名称 'position'
const vertexShaderSource = `
attribute vec4 position;
void main() {
gl_Position = position;
}
`;
// 在片段着色器中进行其他着色器代码的编写
// 创建着色器程序并附加顶点和片段着色器
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
// 使用 gl.bindAttribLocation 将顶点位置属性关联到索引 0
gl.bindAttribLocation(shaderProgram, 0, 'position');
// 链接着色器程序
gl.linkProgram(shaderProgram);
// 使用着色器程序
gl.useProgram(shaderProgram);
// 后续的顶点缓冲、uniform 设置等操作