Photo.gl
Example of how common photo manipulation operations can be achieved using JavaScript and WebGL. The focus is on writing GLSL code.
This demo app is used as part of my talk on WebGL. You can see a recording of the talk here
Running
Just host this directory with a webserver of your choice. You can also use the webserver.sh script included (provided you have Python) to set up a simple development server.
Then visit http://localhost:3131 in your browser.
Shaders
Custom shaders are put in /js/shaders and are saved as .vert or .frag files, for ease of editing. Shaders are loaded into the app using a Require.js plugin which can be found at js/lib/shader. This allow you to get the shader code in a module like so:
define( ["shader!simple.frag"], function ( simpleFrag ) {
// Value of shader is now in simpleFrag.value
// The shader object also supports redefinition of #define statements
simpleFrag.define( "faceColor", "vec3(1.0, 0, 0)" );
...
#include support
The shader plugin also supports #include statements, allowing you to split up your shader code - or share common code.
Shader validation
You may want to validate your shaders during development, for this you can use the GLSL validator tool, which also supports #include statements.