What is the common cause of a range outside the buffer bounds in WebGL

Question

I am engaged in a webgl project. When I call gl.DrawElements, a "range outside the buffer bounds" is displayed.

I am sure that I have passed the correct length or offset of the buffer. But still an error is displayed.

I think there are several reasons that can cause an error. So I want to ask if you had the same problem in your project, what are you checking to fix this problem?

Answer 1

There are only 3 reasons why you will get this error when calling gl.drawElements

• Your indexes reference vertices outside the range of your buffers

  For example, you create a buffer and put 3 position values ​​in it

  var buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  var data = [1,2,3,4,5,6,7,8,9]; // 3 (3 value) positions
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
  

  3 , 0, 1 2. , , .

  var indexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buf);
  var indices = [0,1,3]; // ERROR! That 3 is out of range
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
  
  // This will generate an out of bounds error because
  // the 3 index we put in the index buffer is out of range
  // as the only valid indices are 0, 1, and 2.
  gl.drawElements(gl.TRIANGLE, 3, gl.UNSIGNED_SHORT, 0);
  

• ,

  gl.drawElements(gl.TRIANGLE, 4, gl.UNSIGNED_SHORT, 0); 
  

  , 3 , 4. ,

  gl.drawElements(gl.TRIANGLE, 3, gl.UNSIGNED_SHORT, 1);
  

  3 , 1,2 3 0, 1 2.

• , , . , 4 , ,

  var size = 4; // ERROR! There are only 3 value per position
  gl.vertexAttribPointer(location, size, gl.FLOAT, false, 0, 0);
  

  12 ( , ), 9 . 3

  , ( 2 gl.vertexAtrribPointer) . WebGL 0, 0. - , , .

Answer 2

, . Javascript .

( gman):

var buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
var data = [1,2,3,  4,5,6,  7,8,9,  10,11,12];  // 4 3-D positions
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
//                             ^^^^^^^^^^^^^^^^
// Failure to explicitly construct a typed array here can give this WebGL error,
// if you bind this array to an attribute:
//   GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0

var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buf);
var indices = [3,2,1];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
//                                     ^^^^^^^^^^^^^^^
// Failure to explicitly construct a typed array here gives this WebGL error:
//   GL_INVALID_OPERATION : glDrawElements: range out of bounds for buffer

gl.drawElements(gl.TRIANGLE, 3, gl.UNSIGNED_SHORT, 0);

Javascript Number, 64- IEEE , , , indices, 3, 64 :

0000 0000 0001 1000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000

Javascript , , gl.drawElements() unsigned shorts (16- ints), 64 4 16 , :

0000 0000 0001 1000  =  24
0000 0000 0000 0000  =   0
0000 0000 0000 0000  =   0
0000 0000 0000 0000  =   0

, , 24 4- .