Drawing lines in WebGL is pretty hard. Here's my Schrödinger wavefunction visualizer (<a href="http://ridiculousfish.com/wavefiz/" rel="nofollow">http://ridiculousfish.com/wavefiz/</a>) where I learned too much about it.<p>Note these lines are in actual 3d space: you can rotate the scene using the circle control towards the bottom.<p>WebGL supports lines natively, but Windows Chrome ignores the thickness (<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=60124" rel="nofollow">https://bugs.chromium.org/p/chromium/issues/detail?id=60124</a>) so I had to find a different approach on Chrome.<p>The approach I used is per Matt Deslauriers (<a href="https://mattdesl.svbtle.com/drawing-lines-is-hard" rel="nofollow">https://mattdesl.svbtle.com/drawing-lines-is-hard</a>) . 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.<p>A fragment shader is used to soften the edges.<p>Here's my vertex shader, which is the meat of the drawing: <a href="https://github.com/ridiculousfish/wavefiz/blob/master/ts/polyline.ts#L306" rel="nofollow">https://github.com/ridiculousfish/wavefiz/blob/master/ts/pol...</a>
"it might be weird to store the same point 4 times in a buffer, but I could not find a better way"<p>Couldn't you use a geometry shader to convert points into triangles (or quads)?
I am a flash guy. I used to do BitmapData fun (wonderfl) which was offly related to “processing”. How can I enter webgl?<p>Webgl and “shadertoy” is why I am in computing, I am not here for Angular but this is how I make money.<p>My fascination is pointless processing of pixels and without it I feel bored.<p>I need to learn webgl but there seems no definite guide.
I find this post intriguing not just for the actual effect, but as yet another little signal of the slow and steady mixing of serious-ish mathematics (though mostly applied maths) into engineering culture; which there was almost no trace of only a few years ago.
Works really well even on my old-ish smartphone (2014). WebGL is really interesting, too bad I still have yet to find the time to get a grasp of it. But blog posts like this are very inspiring!
I don't understand why'd you do it this way. I would draw a full screen quad and evaluate if a pixel should be lit or not in screen space in a frag/pixel shader.