Javascript WebGL颜色缓冲区问题：[GL\u无效\u操作：glDrawArrays]

我正在尝试开始学习WebGL；我在没有颜色的情况下得到了概念证明，但当我尝试通过添加颜色来添加颜色时

colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);

gl.bufferData (gl.ARRAY_BUFFER, new Float32Array(
    1, 0, 0, 1,
    0, 1, 0, 1,
    0, 0, 1, 1,
), gl.STATIC_DRAW);

ColorAttribute = gl.getAttribLocation(program, 'color');
gl.enableVertexAttribArray(ColorAttribute);
gl.vertexAttribPointer(ColorAttribute, 4, gl.FLOAT, false, 0, 0);

在哪里

• gl

  是WebGLRenderingContext

• program

  是一个成功编译的程序，附带一个顶点和一个片段着色器

• colorBuffer

  ，

  ColorAttribute

  是空变量

在主代码中，并更改

gl_FragColor = vec4(0.2, 0.4, 0.6, 1);

到

在片段着色器源中（注释着色器主体不会使错误消失）；我得到了以下错误：

[.Offscreen-For-WebGL-000000000 5BB7940]GL错误：GL_无效_操作：glDrawArrays:尝试访问属性1中超出范围的顶点

这很奇怪，因为我的颜色缓冲区中有3种颜色，三角形的每个顶点都有一种颜色：

gl.bufferData (gl.ARRAY_BUFFER, new Float32Array(
    1, 0, 0, 1,
    0, 1, 0, 1,
    0, 0, 1, 1,
), gl.STATIC_DRAW);

我的顶点缓冲区中有3个顶点：

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    0, 0, 0,
    0, 1, 0,
    1, 1, 0
]), gl.STATIC_DRAW);

在调用

VertexAttributePointer

时，我确保将颜色缓冲区的项目大小设置为4，将顶点缓冲区的项目大小设置为3，因此我不确定哪些内容超出了范围

下面是一个可以工作的代码，注释掉了颜色变化，然后是一个在中不工作的颜色变化。这两个示例都是通过粘贴到任何窗口上的browser developer控制台来工作的，但是截图是在“about:blank”中拍摄的

这两个代码段都是自包含的，但仅在Chrome中测试

这是工作版本：

（函数（）{
“严格使用”；
var-hWnd；
var src_vertexShader；
var src_fragmentShader；
var帆布；
var-gl；
var程序；
var顶点着色器；
var片段着色器；
var顶点缓冲区；
颜色缓冲区；
var属性；
var属性；
//|帆布容器。
hWnd=document.createElement（“div”）；
hWnd.style.position=“固定”；
hWnd.style.top=“0px”；
hWnd.style.left=“0px”；
hWnd.style.border=“1px solid#000000”；
addEventListener（“单击”，函数（）{
this.outerHTML=''；
});
//|顶点着色器源。
src_vertexShader=`
属性向量3位置；
属性向量4颜色；
可变vec4颜色；
void main（）{
gl_位置=vec4（位置，1.0）；
vcolor=颜色；
}`;
//|片段着色器源。
src_fragmentShader=`
可变低通vec4彩色；
void main（）{
gl_FragColor=vec4（0.2,0.4,0.6,1）；
//gl_FragColor=vcolor；
}`;
//|我们的WebGL画布。
canvas=document.createElement（'canvas'）；
画布宽度=320；
画布高度=200；
//|我们的WebGLRenderingContext。
gl=canvas.getContext（'webgl'，{antialas:false}）；
//|使用顶点和碎片着色器设置程序。
program=gl.createProgram（）；
vertexShader=gl.createShader（gl.VERTEX\u着色器）；
fragmentShader=gl.createShader（gl.FRAGMENT\u着色器）；
gl.shaderSource（vertexShader，src_vertexShader）；
gl.shaderSource（fragmentShader，src_fragmentShader）；
gl.compileShader（顶点着色器）；
log（'着色器已成功编译：'+gl.getShaderParameter（vertexShader，gl.COMPILE_STATUS））；
console.log（'Shader编译器日志：'+gl.getShaderInfoLog（vertexShader））；
gl.compileShader（碎片着色器）；
log（'Shader编译成功：'+gl.getShaderParameter（fragmentShader，gl.COMPILE_STATUS））；
log（'Shader编译器日志：'+gl.getshaderingfolog（fragmentShader））；
gl.attachShader（程序，顶点着色器）；
gl.attachShader（程序、碎片着色器）；
总账链接程序（程序）；
gl.useProgram（程序）；
log（gl.getShaderParameter（fragmentShader，gl.COMPILE_STATUS））；
//|使用一个三角形的数据创建并附加顶点缓冲区。
vertexBuffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，vertexBuffer）；
gl.bufferData（gl.ARRAY\u BUFFER，新Float32Array([
0, 0, 0,
0, 1, 0,
1, 1, 0
])、总图、静态图）；
PositionAttribute=gl.GetAttriblLocation（程序“位置”）；
gl.EnableVertexAttributeArray（PositionAttribute）；
gl.VertexAttribute指针（PositionAttribute，3，gl.FLOAT，false，0，0）；
/*
//|为我们的三角形创建并附加带有颜色数据的颜色缓冲区。
colorBuffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，colorBuffer）；
gl.bufferData（gl.ARRAY\u BUFFER，新Float32Array(
1, 0, 0, 1,
0, 1, 0, 1,
0, 0, 1, 1,
)、总图、静态图）；
ColorAttribute=gl.getAttributeLocation（程序“颜色”）；
gl.EnableVertexAttributeArray（ColorAttribute）；
gl.VertexAttribute指针（ColorAttribute，4，gl.FLOAT，false，0，0）；
*/
//|清除屏幕。
gl.clearColor（0.93,0.93,0.93,1）；
总账清除（总账颜色缓冲位）；
//|画三角形。
总图数组（总图三角形，0,3）；
hWnd.appendChild（画布）
文件.正文.附件（hWnd）；
})();问题在于定义颜色时代码缺少方括号

 gl.bufferData (gl.ARRAY_BUFFER, new Float32Array(
    1, 0, 0, 1,
    0, 1, 0, 1,
    0, 0, 1, 1,
  ), gl.STATIC_DRAW);

对这个

 gl.bufferData (gl.ARRAY_BUFFER, new Float32Array([
    1, 0, 0, 1,
    0, 1, 0, 1,
    0, 0, 1, 1,
 ]), gl.STATIC_DRAW);


（函数（）{
“严格使用”；
var-hWnd；
var src_vertexShader；
var src_fragmentShader；
var帆布；
var-gl；
var程序；
var顶点着色器；
var片段着色器；
var顶点缓冲区；
颜色缓冲区；
var属性；
var属性；
//|帆布容器。
hWnd=document.createElement（“div”）；
hWnd.style.position=“固定”；
hWnd.style.top=“0px”；
hWnd.style.left=“0px”；
hWnd.style.border=“1px solid#000000”；
addEventListener（“单击”，函数（）{
this.outerHTML=''；
});
//|顶点着色器源。
src_vertexShader=`
属性向量3位置；
属性向量4颜色；
可变vec4颜色；
void main（）{
gl_位置=vec4（位置，1.0）；
vcolor=颜色；
}`;
//|片段着色器源。
src_fragmentShader=`
可变低通vec4彩色；
void main（）{
gl_FragColor=vcolor；
}`;
//|我们的WebGL画布。
 gl.bufferData (gl.ARRAY_BUFFER, new Float32Array([
    1, 0, 0, 1,
    0, 1, 0, 1,
    0, 0, 1, 1,
 ]), gl.STATIC_DRAW);