Three.JS r97 Issue GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2

Question

I'm posting this issue as a last resort. I have read ALL similar topics from the site. Here is the problem:

I'm using an older version of Three.JS (r97) and updating to latest is not an option. I'm working on a voxel generator which receives as input a list of coordinates (x,y,z) which represent the centers of the voxels.

For every center coordinate I append 8 new vertices and 12*3 indices (12 triangles) to vertex & index buffers. The "blueprint" for every voxel is a THREE.BoxGeometry, but the code should work for other THREE.Geometry.

I encounter the following error: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2 . There is definitely something wrong with how I set up the buffers, but I wasn't able to get to the bottom of this. Any help is appreciated. Thank you!

Here is the code:

//vert_x, vert_y, vert_z have the same size
let vert_x = this.model.get("x")[0];
let vert_y = this.model.get("y")[0];
let vert_z = this.model.get("z")[0];
let voxel_geometry = new THREE.BoxGeometry(1, 1, 1);
vertices = new Float32Array(voxel_geometry.vertices.length * vert_x.length * 3);
indices = new Uint32Array(voxel_geometry.faces.length * vert_x.length * 3);
let faceOffset = 0;
let vIndex = 0;
let fIndex = 0;

for(let v=0; v<vert_x.length; v++) {
    for (let x=0; x<voxel_geometry.vertices.length; x++) {
        vertices[vIndex++] = voxel_geometry.vertices[x].x + vert_x[v];
        vertices[vIndex++] = voxel_geometry.vertices[x].y + vert_y[v];
        vertices[vIndex++] = voxel_geometry.vertices[x].z + vert_z[v];
    }
    for (let b=0; b<voxel_geometry.faces.length; b++) {
        indices[fIndex++] = voxel_geometry.faces[b].a + faceOffset;
        indices[fIndex++] = voxel_geometry.faces[b].b + faceOffset;
        indices[fIndex++] = voxel_geometry.faces[b].c + faceOffset;
    }
    faceOffset += voxel_geometry.vertices.length;
}

const geometry = new THREE.BufferGeometry();
geometry.addAttribute("position", new THREE.BufferAttribute(vertices, 3));
geometry.addAttribute("color", new THREE.BufferAttribute(colors, 4));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
geometry.setDrawRange(0, indices.length-1);
}

Answer 1

Big mistake on my part! I did not check if colors array is the correct size. Thank you. This issue can be closed.