【webgl】自定义attribute位置gl.bindAttribLocation

介绍

开始学习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 设置等操作