Can I call a shader with a different array for each call or should I make multiple shaders?

Question

I'm trying to determine the best way to handle custom dashed lines using shaders in Three.js (webgl). There are different patterns these dashed lines could have. I hope I am able to write a single shader that could handle any kind of dash pattern. The pattern would be given by an array of values (eg [0.125, -0.125, 0.250, -0.250]), where a negative value is the length of a space, and positive is the length of a dash.

I'm new to shaders and I'm not sure if the above is possible. If I understand correctly, a uniform array would not be appropriate because I want this array to change according to the pattern being drawn on a particular line entity. But I don't think an attribute array would be appropriate because that seems to be an array of values that associate with vertices. So is what I want to do possible or do I have to dynamically make shaders for each pattern?

Am I understanding this correctly so far? Any suggestions? This is my first (and hopefully only) need to work with shaders.

Answer 1

You have to use either a uniform or an attribute; there is nothing “in between” the two in WebGL, and other possible implementations are in the end going to depend on uniform or attribute (or constant) data.

• If you use a uniform, you can set the dash pattern for all the lines in a draw call, but not individual lines within it.

• If you use an attribute, you must duplicate the selection of dash pattern for each vertex in the line. This is no different than the usual handling of e.g. colored lines, where you must give the (same) color at each vertex.

  If your concern is total data size, you could do an indirection such as storing several dash patterns in a uniform array or a texture, and then using an attribute to lookup the desired pattern. This would allow you to use one number instead of four per vertex.