Javascript 为什么在WebGL中添加颜色属性时代码会中断？

出于某种原因，我的代码中没有显示任何内容，尽管我希望它绘制9999（出于测试原因）矩形

const canvas=document.getElementById（“canvas”）；
常量顶点代码=`
精密中泵浮子；
属性向量4位置；
一致mat4矩阵；
属性向量4颜色；
可变vec4列；
void main（）{
col=颜色；
gl_位置=矩阵*位置；
}
`;
常量碎片代码=`
精密中泵浮子；
可变vec4列；
void main（）{
gl_FragColor=vec4（1,0,0,1）；
}
`;
const width=canvas.width；
const height=canvas.height；
const gl=canvas.getContext（“webgl”）；
如果（！gl）{
console.log（“不支持WebGL”）；
}
常量投影矩阵=[
2/宽度，0，0，0，
0，-2/高度，0,0，
0, 0, 1, 0,
-1, 1, 0, 1
];
const vertexShader=gl.createShader（gl.VERTEX\u着色器）；
gl.shaderSource（vertexShader，vertexCode）；
gl.compileShader（顶点着色器）；
const fragmentShader=gl.createShader（gl.FRAGMENT\u着色器）；
gl.shaderSource（fragmentShader，fragmentCode）；
gl.compileShader（碎片着色器）；
const program=gl.createProgram（）；
gl.attachShader（程序，顶点着色器）；
gl.attachShader（程序、碎片着色器）；
总账链接程序（程序）；
gl.useProgram（程序）；
const positionBuffer=gl.createBuffer（）；
const colorBuffer=gl.createBuffer（）；
const positionLocation=gl.getAttriblLocation（程序，“位置”）；
const colorLocation=gl.getAttribLocation（程序，`color`）；
常量projectionLocation=gl.getUniformLocation（程序，`matrix`）；
gl.EnableVertexAttributeArray（位置位置）；
常数顶点=[
0, 0, 0, 1,
0, 0, 0, 1,
0, 0, 0, 1,
0, 0, 0, 1
]
常量floatArray=新的Float32Array（顶点）；
gl.bindBuffer（gl.ARRAY\u BUFFER，positionBuffer）；
gl.VertexAttribute指针（位置位置，4，gl.FLOAT，false，0，0）；
gl.EnableVertexAttributeArray（colorLocation）；
常量颜色=[
1, 0, 0, 1,
1, 0, 0, 1,
1, 0, 0, 1,
1, 0, 0, 1
]
const colorArray=新的Float32Array（颜色）；
gl.bindBuffer（gl.ARRAY\u BUFFER，colorBuffer）；
gl.VertexAttribute指针（colorLocation，4，gl.FLOAT，false，0，0）；
gl.uniformMatrix4fv（projectionLocation，false，projectionMatrix）；
函数rect（x，y，w，h）{
floatArray[0]=x；
floatArray[1]=y；
浮动数组[4]=x+w；
floatArray[5]=y；
floatArray[8]=x；
浮动阵列[9]=y+h；
浮动阵列[12]=x+w；
浮动阵列[13]=y+h；
gl.bufferData（gl.ARRAY\u BUFFER、colorArray、gl.DYNAMIC\u DRAW）；
gl.bufferData（gl.ARRAY\u BUFFER、floatArray、gl.DYNAMIC\u DRAW）；
总图.绘图阵列（总图.三角带，0,4）；
}
功能填充（r、g、b、a）{
colorArray[0]=r；
彩色阵列[1]=g；
colorArray[2]=b；
colorArray[3]=a；
//gl.bufferData（gl.ARRAY\u BUFFER、colorArray、gl.DYNAMIC\u DRAW）；
}
设lastTime=0；
让fpsText=document.getElementById（“fps”）；
函数动画（currentTime）{
fpsText.textContent=（1000/（当前时间-上次时间））.toFixed（1）；
lastTime=当前时间；
对于（让i=0；i当我运行代码时，JavaScript控制台中会出现一个明显的错误

[.WebGL-0x7fae86814200]GL错误：GL_无效_操作：glDrawArrays:尝试访问属性0中超出范围的顶点

查看代码，在调用
gl.bufferData
上传数据之前，需要绑定正确的缓冲区

你有这个

  gl.bufferData(gl.ARRAY_BUFFER, colorArray, gl.DYNAMIC_DRAW);
  gl.bufferData(gl.ARRAY_BUFFER, floatArray, gl.DYNAMIC_DRAW);

但必须是这样

  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, colorArray, gl.DYNAMIC_DRAW);
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, floatArray, gl.DYNAMIC_DRAW);


const canvas=document.getElementById（“canvas”）；
常量顶点代码=`
精密中泵浮子；
属性向量4位置；
一致mat4矩阵；
属性向量4颜色；
可变vec4列；
void main（）{
col=颜色；
gl_位置=矩阵*位置；
}
`;
常量碎片代码=`
精密中泵浮子；
可变vec4列；
void main（）{
gl_FragColor=vec4（1,0,0,1）；
}
`;
const width=canvas.width；
const height=canvas.height；
const gl=canvas.getContext（“webgl”）；
如果（！gl）{
console.log（“不支持WebGL”）；
}
常量投影矩阵=[
2/宽度，0，0，0，
0，-2/高度，0,0，
0, 0, 1, 0,
-1, 1, 0, 1
];
const vertexShader=gl.createShader（gl.VERTEX\u着色器）；
gl.shaderSource（vertexShader，vertexCode）；
gl.compileShader（顶点着色器）；
const fragmentShader=gl.createShader（gl.FRAGMENT\u着色器）；
gl.shaderSource（fragmentShader，fragmentCode）；
gl.compileShader（碎片着色器）；
const program=gl.createProgram（）；
gl.attachShader（程序，顶点着色器）；
gl.attachShader（程序、碎片着色器）；
总账链接程序（程序）；
gl.useProgram（程序）；
const positionBuffer=gl.createBuffer（）；
const colorBuffer=gl.createBuffer（）；
const positionLocation=gl.getAttriblLocation（程序，“位置”）；
const colorLocation=gl.getAttribLocation（程序，`color`）；
常量projectionLocation=gl.getUniformLocation（程序，`matrix`）；
gl.EnableVertexAttributeArray（位置位置）；
常数顶点=[
0, 0, 0, 1,
0, 0, 0, 1,
0, 0, 0, 1,
0, 0, 0, 1
]
常量floatArray=新的Float32Array（顶点）；
gl.bindBuffer（gl.ARRAY\u BUFFER，positionBuffer）；
gl.VertexAttribute指针（位置位置，4，gl.FLOAT，false，0，0）；
gl.EnableVertexAttributeArray（colorLocation）；
常量颜色=[
1, 0, 0, 1,
1, 0, 0, 1,
1, 0, 0, 1,
1, 0, 0, 1
]
const colorArray=新的Float32Array（颜色）；
gl.bindBuffer（gl.ARRAY\u BUFFER，colorBuffer）；
gl.VertexAttribute指针（colorLocation，4，gl.FLOAT，false，0，0）；
gl.uniformMatrix4fv（projectionLocation，false，projectionMatrix）；
函数rect（x，y，w，h）{
floatArray[0]=x；
floatArray[1]=y；
浮动数组[4]=x+w；
floatArray[5]=y；
floatArray[8]=x；
浮动阵列[9]=y+h；
浮动阵列[12]=x+w；
浮动阵列[13]=y+h；
gl.bindBuffer（gl.ARRAY\u BUFFER，colorBuffer）；
gl.bufferData（gl.ARRAY\u BUFFER、colorArray、gl.DYNAMIC\u DRAW）；
gl.bindBuffer（gl.ARRAY\u BUFFER，positionBuffer）；
gl.bufferData（gl.ARRAY\u BUFFER、floatArray、gl.DYNAMIC\u DRAW）；
总图.绘图阵列（总图.三角带，0,4）；
}
功能填充（r、g、b、a）{
colorArray[0]=r；
彩色阵列[1]=g；
colorArray[2]=b；
colorArray[3]=a；
//gl.bufferData（gl.ARRAY\u BUFFER、colorArray、gl.DYNAMIC\u DRAW）；
}
设lastTime=0；
让fpsText=document.getElementB