Create reprogrammable WebGL shader module

[jywarren]

If we manage #216 to make WebGL runnable on Node.js, or even if not, I was thinking about the speed of Infragram.org/sandbox?webgl=true and how it can do live video compositing. There are a few ways to do this --

Infragram is pretty clever; it inserts a shader.frag WebGL script into an element on the DOM as a template, and then writes up a simple WebGL program and inserts it into the "template"

https://github.com/publiclab/infragram/blob/eb9fc19f993616caf9aa0311f7468d33c4529253/src/processors/webgl.js#L152-L157

The substituted areas are:

https://github.com/publiclab/infragram/blob/eb9fc19f993616caf9aa0311f7468d33c4529253/dist/shader.frag#L121-L123

So this is almost identical to the Dynamic module (makes sense bc it was based on Infragram):

https://github.com/publiclab/image-sequencer/blob/master/src/modules/Dynamic/Module.js

---

Simplest

The simplest idea is to create a WebGL-capable variant of the Dynamic module, called DynamicGL, that's identical except that it does this webgl script generation. Then if the original Dynamic detects inBrowser, or after #216 hasWebGl, it can pass along values to DynamicGL.

This kind of integration could be repeated for some other modules that could use WebGL -- mostly things performing simple math on each pixel, so perhaps Contrast, Saturation, Brightness, Invert, things like that.

---

More advanced

A follow-up idea -- not sure if it's possible -- is to see how much of modules' function could be passed to WebGL entirely -- like, could more complex things be done in the GLSL language, assembled on the fly by JavaScript? No idea. https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html and maybe http://twgljs.org/

Basically the advanced idea is probably not worth looking into until we've completed the simplest idea, above it, and #216. But just to put the thought out there!