-1

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);
}
M -
  • 26,908
  • 11
  • 49
  • 81
Simonobi
  • 11
  • 4
  • 2
    Is there any way you can make a working demo with a [snippet](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/) or a [JSFiddle](https://jsfiddle.net/)? It's hard to know where the mistake is taking place, but essentially one of the attribute counts isn't matching up. There might be more indices than attributes. – M - Jul 30 '20 at 04:31
  • 1
    Is `vert_x` an array? As you use `vert_x.length`. – prisoner849 Jul 30 '20 at 07:05
  • Here is a fiddle: https://jsfiddle.net/Simonobi/7zx1dj5q/64/ – Simonobi Jul 31 '20 at 12:57
  • As you can see, it basically works without any warnings. I was able to test the original code on several machines, and only on Arch Linux with intel hd 630, with optimus drivers enabled ( optimus-manager --switch intel) I encounter the following warning: WebGL warning: drawElementsInstanced: Indexed vertex fetch requires 61024 vertices, but attribs only supply 7628. – Simonobi Jul 31 '20 at 13:05
  • Here is a fiddle with r97 https://jsfiddle.net/Simonobi/7zx1dj5q/67/ – Simonobi Jul 31 '20 at 13:05

1 Answers1

0

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

Simonobi
  • 11
  • 4