javascript - WebGL color buffer issue: [GL_INVALID_OPERATION : glDrawArrays] -

i trying starting learning webgl; got proof of concept working without color, tried added color adding

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); 

where

• gl webglrenderingcontext,
• program compiled program vertex , fragment shader attached
• colorbuffer, colorattribute null variables

in main code, , changing

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

to

gl_fragcolor = vcolor;     

in fragment shader source(commenting shader body not make error go away); got following error:

[.offscreen-for-webgl-0000000005bb7940]gl error :gl_invalid_operation : gldrawarrays: attempt access out of range vertices in attribute 1

which strange because color buffer has 3 colors in it, 1 each vertex of triangle:

gl.bufferdata (gl.array_buffer, new float32array(     1, 0, 0, 1,     0, 1, 0, 1,     0, 0, 1, 1, ), gl.static_draw); 

and vertex buffer has 3 vertices in it:

gl.bufferdata(gl.array_buffer, new float32array([     0, 0, 0,     0, 1, 0,     1, 1, 0 ]), gl.static_draw); 

i made sure set item size of color buffer 4, , item size of vertex buffer 3 in calls vertexattribpointer, not sure out of range.

below code works, color changes commented out, followed 1 doesn't work color changes in. both samples work pasting browser developer console on window, screenshots taken in "about:blank".

both snippets self contained, tested in chrome.

this working version:

(function() {      "use strict";        var hwnd;      var src_vertexshader;      var src_fragmentshader;      var canvas;      var gl;      var program;      var vertexshader;      var fragmentshader;      var vertexbuffer;      var colorbuffer;      var positionattribute;      var colorattribute;        // | canvas container.      hwnd = document.createelement("div");      hwnd.style.position = "fixed";      hwnd.style.top = "0px";      hwnd.style.left = "0px";      hwnd.style.border = "1px solid #000000";      hwnd.addeventlistener("click", function() {          this.outerhtml = '';      });        // | vertex shader source.      src_vertexshader = `  attribute vec3 position;  attribute vec4 color;    varying vec4 vcolor;    void main() {      gl_position = vec4(position, 1.0);      vcolor = color;  }`;        // | fragment shader source.      src_fragmentshader = `         varying lowp vec4 vcolor;    void main() {      gl_fragcolor = vec4(0.2, 0.4, 0.6, 1);        //gl_fragcolor = vcolor;      }`;        // | our webgl canvas.      canvas = document.createelement('canvas');      canvas.width = 320;      canvas.height = 200;               // | our webglrenderingcontext.      gl = canvas.getcontext('webgl', {antialias: false});        // | setting our program using vertex , fragment shader.      program = gl.createprogram();      vertexshader = gl.createshader(gl.vertex_shader);      fragmentshader = gl.createshader(gl.fragment_shader);        gl.shadersource(vertexshader, src_vertexshader);      gl.shadersource(fragmentshader, src_fragmentshader);        gl.compileshader(vertexshader);      console.log('shader compiled successfully: ' + gl.getshaderparameter(vertexshader, gl.compile_status));      console.log('shader compiler log: ' + gl.getshaderinfolog(vertexshader));            gl.compileshader(fragmentshader);      console.log('shader compiled successfully: ' + gl.getshaderparameter(fragmentshader, gl.compile_status));      console.log('shader compiler log: ' + gl.getshaderinfolog(fragmentshader));            gl.attachshader(program, vertexshader);      gl.attachshader(program, fragmentshader);      gl.linkprogram(program);      gl.useprogram(program);        console.log(gl.getshaderparameter(fragmentshader, gl.compile_status));            // | create , attach vertex buffer data 1 triangle.      vertexbuffer = gl.createbuffer();      gl.bindbuffer(gl.array_buffer, vertexbuffer);      gl.bufferdata(gl.array_buffer, new float32array([          0, 0, 0,          0, 1, 0,          1, 1, 0      ]), gl.static_draw);        positionattribute = gl.getattriblocation(program, 'position');      gl.enablevertexattribarray(positionattribute);      gl.vertexattribpointer(positionattribute, 3, gl.float, false, 0, 0);        /*      // | create , attach color buffer color data our triangle.      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);      */        // | clear screen.      gl.clearcolor(0.93, 0.93, 0.93, 1);      gl.clear(gl.color_buffer_bit);        // | draw triangle.      gl.drawarrays(gl.triangles, 0, 3);        hwnd.appendchild(canvas)      document.body.appendchild(hwnd);  })();

this version complains:

(function() {      "use strict";        var hwnd;      var src_vertexshader;      var src_fragmentshader;      var canvas;      var gl;      var program;      var vertexshader;      var fragmentshader;      var vertexbuffer;      var colorbuffer;      var positionattribute;      var colorattribute;        // | canvas container.      hwnd = document.createelement("div");      hwnd.style.position = "fixed";      hwnd.style.top = "0px";      hwnd.style.left = "0px";      hwnd.style.border = "1px solid #000000";      hwnd.addeventlistener("click", function() {          this.outerhtml = '';      });        // | vertex shader source.      src_vertexshader = `  attribute vec3 position;  attribute vec4 color;    varying vec4 vcolor;    void main() {      gl_position = vec4(position, 1.0);      vcolor = color;  }`;        // | fragment shader source.      src_fragmentshader = `         varying lowp vec4 vcolor;    void main() {      gl_fragcolor = vcolor;      }`;        // | our webgl canvas.      canvas = document.createelement('canvas');      canvas.width = 320;      canvas.height = 200;               // | our webglrenderingcontext.      gl = canvas.getcontext('webgl', {antialias: false});        // | setting our program using vertex , fragment shader.      program = gl.createprogram();      vertexshader = gl.createshader(gl.vertex_shader);      fragmentshader = gl.createshader(gl.fragment_shader);        gl.shadersource(vertexshader, src_vertexshader);      gl.shadersource(fragmentshader, src_fragmentshader);        gl.compileshader(vertexshader);      console.log('shader compiled successfully: ' + gl.getshaderparameter(vertexshader, gl.compile_status));      console.log('shader compiler log: ' + gl.getshaderinfolog(vertexshader));            gl.compileshader(fragmentshader);      console.log('shader compiled successfully: ' + gl.getshaderparameter(fragmentshader, gl.compile_status));      console.log('shader compiler log: ' + gl.getshaderinfolog(fragmentshader));            gl.attachshader(program, vertexshader);      gl.attachshader(program, fragmentshader);      gl.linkprogram(program);      gl.useprogram(program);        console.log(gl.getshaderparameter(fragmentshader, gl.compile_status));            // | create , attach vertex buffer data 1 triangle.      vertexbuffer = gl.createbuffer();      gl.bindbuffer(gl.array_buffer, vertexbuffer);      gl.bufferdata(gl.array_buffer, new float32array([          0, 0, 0,          0, 1, 0,          1, 1, 0      ]), gl.static_draw);        positionattribute = gl.getattriblocation(program, 'position');      gl.enablevertexattribarray(positionattribute);      gl.vertexattribpointer(positionattribute, 3, gl.float, false, 0, 0);        // | create , attach color buffer color data our triangle.      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);        // | clear screen.      gl.clearcolor(0.93, 0.93, 0.93, 1);      gl.clear(gl.color_buffer_bit);        // | draw triangle.      gl.drawarrays(gl.triangles, 0, 3);        hwnd.appendchild(canvas)      document.body.appendchild(hwnd);      })();

thanks ahead of time.

the issue code missing square brackets when defining colors

 gl.bufferdata (gl.array_buffer, new float32array(     1, 0, 0, 1,     0, 1, 0, 1,     0, 0, 1, 1,   ), gl.static_draw); 

vs this

 gl.bufferdata (gl.array_buffer, new float32array([     1, 0, 0, 1,     0, 1, 0, 1,     0, 0, 1, 1,  ]), gl.static_draw); 

(function() {      "use strict";        var hwnd;      var src_vertexshader;      var src_fragmentshader;      var canvas;      var gl;      var program;      var vertexshader;      var fragmentshader;      var vertexbuffer;      var colorbuffer;      var positionattribute;      var colorattribute;        // | canvas container.      hwnd = document.createelement("div");      hwnd.style.position = "fixed";      hwnd.style.top = "0px";      hwnd.style.left = "0px";      hwnd.style.border = "1px solid #000000";      hwnd.addeventlistener("click", function() {          this.outerhtml = '';      });        // | vertex shader source.      src_vertexshader = `  attribute vec3 position;  attribute vec4 color;    varying vec4 vcolor;    void main() {      gl_position = vec4(position, 1.0);      vcolor = color;  }`;        // | fragment shader source.      src_fragmentshader = `         varying lowp vec4 vcolor;    void main() {      gl_fragcolor = vcolor;      }`;        // | our webgl canvas.      canvas = document.createelement('canvas');      canvas.width = 320;      canvas.height = 200;               // | our webglrenderingcontext.      gl = canvas.getcontext('webgl', {antialias: false});        // | setting our program using vertex , fragment shader.      program = gl.createprogram();      vertexshader = gl.createshader(gl.vertex_shader);      fragmentshader = gl.createshader(gl.fragment_shader);        gl.shadersource(vertexshader, src_vertexshader);      gl.shadersource(fragmentshader, src_fragmentshader);        gl.compileshader(vertexshader);      console.log('shader compiled successfully: ' + gl.getshaderparameter(vertexshader, gl.compile_status));      console.log('shader compiler log: ' + gl.getshaderinfolog(vertexshader));            gl.compileshader(fragmentshader);      console.log('shader compiled successfully: ' + gl.getshaderparameter(fragmentshader, gl.compile_status));      console.log('shader compiler log: ' + gl.getshaderinfolog(fragmentshader));            gl.attachshader(program, vertexshader);      gl.attachshader(program, fragmentshader);      gl.linkprogram(program);      gl.useprogram(program);        console.log(gl.getshaderparameter(fragmentshader, gl.compile_status));            // | create , attach vertex buffer data 1 triangle.      vertexbuffer = gl.createbuffer();      gl.bindbuffer(gl.array_buffer, vertexbuffer);      gl.bufferdata(gl.array_buffer, new float32array([          0, 0, 0,          0, 1, 0,          1, 1, 0      ]), gl.static_draw);        positionattribute = gl.getattriblocation(program, 'position');      gl.enablevertexattribarray(positionattribute);      gl.vertexattribpointer(positionattribute, 3, gl.float, false, 0, 0);        // | create , attach color buffer color data our triangle.      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);        // | clear screen.      gl.clearcolor(0.93, 0.93, 0.93, 1);      gl.clear(gl.color_buffer_bit);        // | draw triangle.      gl.drawarrays(gl.triangles, 0, 3);        hwnd.appendchild(canvas)      document.body.appendchild(hwnd);      })();