WebGL attributes per element in drawElements

Question

Is there a way to specify attributes per element index in WebGL? Here's what I mean.

I want to draw shapes with lines at the edges and fat dots at vertices. So, here's the data structure I would have for a triangle:

Vertices: [0,0,0, 1,0,0, 0,1,0] Edges: [0,1, 1,2, 2,0]

The vertices are an ARRAY_BUFFER and edges are an ELEMENT_ARRAY_BUFFER. So when I call drawElements on the edges using LINES, I get an outline of a triangle. Now, I can also bind color attributes to the vertices. Suppose I make them all red:

Colors: [1,0,0, 1,0,0, 1,0,0]

If I want to highlight a particular vertex, I just write the bufferSubData over the colors before I draw the fat dots for vertices and change it back before drawing the edges. But what if I want to highlight an edge? I change the colors to [1,1,1, 1,1,1, 1,0,0] and wish for the best. The edge (0,1) will be white, but the other two edges will be colored with a gradient: red at vertex 2 and white at the other (0 or 1).

So, can I specify that I want to use a particular color for the elements at indices 0 and 1 and a different color for elements at indices 2, 3, 4, and 5? And all that without doubling up on every vertex (e.g. making each vertex data look like [x,y,z, r,g,b] and having two of them side by side in the buffer so that an edge can point to a regular or a highlighted version of the same vertex).

Answer 1

Sorry, but no, it doesn't work like that—you'll have to duplicate data somewhere. A vertex isn't just a position, it's the collection of all attributes associated with that position, and so in WebGL/OpenGL's view, they're different vertices.

The simplest solution is to just duplicate the vertices with the updated colors. You could do more elaborate things like having an array of colors, passing in an attribute that enumerates the vertices (e.g., vertex 0 gets '0', vertex 1 gets '1', etc.), and then having logic in your vertex shader to compensate. That's a lot of work and complexity, and may not be simpler or faster.