0

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.

Ben Zuill-Smith
  • 3,504
  • 3
  • 25
  • 44
  • See if this helps: http://threejs.org/examples/webgl_lines_dashed.html. And search for 'dashed' in `ShaderLib.js`. – WestLangley Mar 24 '14 at 23:25
  • Yeah, I already looked into that. It is a very basic shader with just a gapSize and dashSize and it doesn't meet any of my requirements. Thanks though – Ben Zuill-Smith Mar 26 '14 at 16:16
  • Your project sounds interesting. If you are willing to share your result that would be great! But be careful, shaders can grow on you. :-) – WestLangley Mar 26 '14 at 16:54

1 Answers1

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.

Kevin Reid
  • 37,492
  • 13
  • 80
  • 108
  • Thanks for confirming my suspicions and for the suggestions. I'll probably go the route of all the data in a uniform array or texture and use an attribute to look up the desired pattern. Thanks again! – Ben Zuill-Smith Mar 26 '14 at 16:18