Photo.gl

Example of how common photo manipulation operations can be achieved using JavaScript and WebGL. The focus is on writing GLSL code.

[Live demo] - coming

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.