material map error : glDrawElements: attempt to access out of range vertices in attribute 2

Question

I have an algorithm that lets users enter data or a function and then graphs the function. Essentially, its a surface map just like here. The graphing works fine. However, I want to add a mapping to add in black lines going from point to point just like in the example. However, I keep getting the standard error of : GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2. I know that this error means that I am trying to draw something that is out of the range of the buffer, but I can't see where I am doing that. I have confirmed that the variables used for the x and y lengths given to the mapping are indeed the number of x and y indices. For example, I am setting the repeat to 76 and 76 for a mesh that has 76 x entries and 76 y entries and therefore 5776 points.

In the example, they use a parametric geometry and i have to use a standard THREE.Geometry since I am sometimes taking in data and not a function. Other than that, I have followed the example and still get the error. I may be confused about the mapping numbers required for the repeat on the texture. I believe that they are supposed to represent the number of X and Y points and maybe it is supposed to be something else.

Here is the method where I set my meshes:

Surface.prototype.setMeshes =function(DataID, callback)
{   var graphMesh={};
    var PlotID=this.Format_id;
    if (PlotID['Chart_dataobj'][DataID]['type']=="Surface")
    {   if (PlotID['Chart_dataobj'][DataID]['sWireFrame']=="Solid")
        {       
            var wireTexture = new THREE.ImageUtils.loadTexture( 'http://www.cadwolf.com/Images/square.png' );
            wireTexture.wrapS = wireTexture.wrapT = THREE.RepeatWrapping; 
            wireTexture.repeat.set( parseInt(PlotID['Chart_dataobj'][DataID].xLength), parseInt(PlotID['Chart_dataobj'][DataID].yLength) );
            wireMaterial = new THREE.MeshBasicMaterial( { map: wireTexture, vertexColors: THREE.VertexColors, side:THREE.DoubleSide } );
            wireMaterial.map.repeat.set( parseInt(PlotID['Chart_dataobj'][DataID].xLength), parseInt(PlotID['Chart_dataobj'][DataID].yLength) );
            graphMesh = new THREE.Mesh( window[PlotID]['Chart_dataobj'][DataID].surfaceGeometry, wireMaterial );            
            graphMesh.doubleSided = true;                                                       
        }
    }
    graphMesh.id = DataID;
    graphMesh.name = DataID;
    window[PlotID].Scene.add(graphMesh);
    if (typeof(callback)=="function") { callback(); }
}

I know that everything is correct with the surface geometry, there is just an error with the number of elements I have matching the numbers for the repeat. Also, if anyone knows what attribute 2 is, that would be helpful.

Thanks

Yes, it has vertices and faces, and all the proper stuff. It works fine as long as I don't try to map an image to it. Is that what you meant by UVs? — Joshua Foxworth
I just meant that it had the correct number of vertices, faces, colors, and other stuff needed to draw a geometry. — Joshua Foxworth
You need to learn what uv coordinates are, and then you need to inspect your geometry's data structure. Does your geometry have UVs defined? — WestLangley

WestLangley WestLangley · Accepted Answer · 2015-07-20T18:46:53

Check your geometry to see if you have UVs defined. If not, then the lack of UVs is likely the cause of your error message.

A mesh cannot have a texture applied if the mesh's geometry is missing UVs.

For THREE.Geometry, UVs are specified in the property faceVertexUVs.

For THREE.BufferGeometry, UVs are specified as a geometry attribute.

three.js r.71

material map error : glDrawElements: attempt to access out of range vertices in attribute 2

1 Answers