Drawing lines in WebGL is pretty hard. Here's my Schrödinger wavefunction visualizer (http://ridiculousfish.com/wavefiz/) where I learned too much about it.

Note these lines are in actual 3d space: you can rotate the scene using the circle control towards the bottom.

WebGL supports lines natively, but Windows Chrome ignores the thickness (https://bugs.chromium.org/p/chromium/issues/detail?id=60124) so I had to find a different approach on Chrome.

The approach I used is per Matt Deslauriers (https://mattdesl.svbtle.com/drawing-lines-is-hard) . The essential idea is to construct a zero-width line, then use a vertex shader to push each vertex along the line's normal in screen space (not model space). Now represent each vertex twice, and push each one in opposite directions, and you get a nice width.

A fragment shader is used to soften the edges.

Here's my vertex shader, which is the meat of the drawing: https://github.com/ridiculousfish/wavefiz/blob/master/ts/pol...