How to draw oscilloscope lines with WebGL

http://m1el.github.io/woscope-how/index.html

by noch • 9 years ago

143 20 9 years ago

m1el.github.io

absrnd• 9 years ago

"it might be weird to store the same point 4 times in a buffer, but I could not find a better way"

Couldn't you use a geometry shader to convert points into triangles (or quads)?

DSMan195276• 9 years ago

I thought the same thing, but a quick search [0] seems to indicate that geometry shaders aren't available in WebGL.

[0] https://stackoverflow.com/questions/8641119/webgl-geometry-s...

thethirdone• 9 years ago

With bloom turned on, it looks really good.

reificator• 9 years ago

Yeah the bloom should be on by default. Otherwise I don't think it captures the look they're going for.

tw1010• 9 years ago

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.

m1el2• 9 years ago

Author here.

I'm not sure if this a typical case, but the reason I use serious-ish math is my major in physics. When I see a simulation problem calculus comes to mind first.

In my experience there was not a single time calculus was applied in everyday engineering on my projects.

fest• 9 years ago

I disagree- maths has always been an essential tool of all engineering disciplines. Software engineering is not an exception (algorithms, control systems, graphics, simulations).

Of course, a lot of people can and do write useful software knowing little to no maths, but then again, I suppose one can build a working bridge based on gut feeling as well.

vidarh• 9 years ago

The difference is that one can do software engineering without much "explicit" math and without resorting to gut feeling (though admittedly much is written on gut feeling too).

By "explicit" I mean that e.g. a lot of things I work on for example certainly will use principles that you could write out formally using various mathematical disciplines, but I may or may not have been aware of the underlying maths when writing it, but that does not mean I'm not approaching it in a systematic way.

In a lot of CS papers, even, the use of maths often turns out to be less formal than code, in that I often see maths used to handwave away details you can't get away with not presenting if writing it out as code.

tonmoy• 9 years ago

You could build a bridge with gut feeling, but if you wanted a stable bridge with the least possible material then you have to use math. In most software engineering cases, I guess having an abundance of resources lets us get away without math

ridiculous_fish• 9 years ago

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...

banachtarski2• 9 years ago

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.

m1el2• 9 years ago

The cost of doing this would be enormous - program shader for each pixel would have to calculate this function for every line segment. Instead, only triangles that cover the segment are evaluated.

banachtarski2• 9 years ago

no... it really depends on the function being evaluated and frag shaders operate in warps. Furthermore, on certain CPUs, vertex shading is emulated on the CPU which is worse than a fragment shader.

grzm• 9 years ago

(2015)

Exuma• 9 years ago

This song is fucking incredible and unique... OMG

flannelhead• 9 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!

Pica_soO• 9 years ago

If you port this shader for rendering to texture, you can make quite nice rail-gun trails.

Fifer822• 9 years ago

I am a flash guy. I used to do BitmapData fun (wonderfl) which was offly related to “processing”. How can I enter webgl?

Webgl and “shadertoy” is why I am in computing, I am not here for Angular but this is how I make money.

My fascination is pointless processing of pixels and without it I feel bored.

I need to learn webgl but there seems no definite guide.

Fifer822• 9 years ago

Like in particular real time data. This idea of “uploading data” is classified as slow. I’m not interested in preloading. I want a mouse to churn 1k pixels. This “upload to gpu” seems a major bottleneck. Where’s 1000000 particles cannot be interactively controlled

How to draw oscilloscope lines with WebGL

Related Stories