Decouple shaders from source code

[00c1]

This PR moves inline shader source code into separate files located in the glsl directory.

Filters now specify their vertex and fragment shaders with a relative URL instead:

"Hop": {
    "transparent": 0x00FF00,
    "duration": 0.85 * 2,
    "vertex": "glsl/hop.vs",
    "fragment": "glsl/hop.fs"
}

The shader sources are now fetched from network and are cached by the browser like any other resource. Usual caching rules apply and clients should have their caches invalidated when the Github Pages cache times out.

The render button is disabled while any shader is being loaded to prevent half of the gif being rendered with one shader and half with another if the shader is updated while gif is still being rendered.

Here's a demonstration of loading shaders with a very slow network connection. Note that switching to a cached shader is instant and does not show the placeholder:

demo.mp4

[rexim]

I do not particularly understand what exactly is the problem we are solving here, sorry.

[00c1]

@rexim The filter shaders are currently all defined in the same file, inline as strings.

I think it would be much more easier and convenient to add new filter effects and overall maintain this project if the shaders were defined separately as standalone files.

Some of the problems with inline definition (that this PR solves) are:

• Difficulty making edits to the application (shader code is in the middle of the file)
• Difficulty writing GLSL code (no syntax highlighting, no linter/tooling available)
• Difficulty maintaining the project (multiple source edits to different shaders create merge conflicts)

As much as I would love to avoid requesting each shader over the network this is the easiest way to achieve this without adding a build step and extra complexity.