CSS-Shader is a wrapper that allows to easily set CSS shaders via JavaScript.
It leverages the possibility to define shaders via data URL so that you don't have to put the shader code into a separate file on the filesystem.
It allows you to set and modify shader properties conveniently, without having to forge that complicated CSS String yourself.
This, it enables to easily build tools like the CSS-Shader Playground.
In addition, it provides an animate() method, which executes the shaders in a loop using requestAnimationFrame.
For a demo, visit the CSS-Shader Playground, a tool where you can live edit vertex and fragment shaders.
Note that CSS Shaders require Chrome 25, and CSS Shaders enabled in chrome://flags/.
There's an API reference over here: http://jensarps.github.com/css-shader/jsdoc/CSSShader.html
You can create a local version of the reference using a terminal. Go into the CSSShader directory and run the following command:
$ make doc
Including the css-shader.js file will add an CSSShader constructor to the global scope.
Alternatively, you can use an AMD loader such as RequireJS, or a CommonJS loader to load the module, and you will receive the constructor in your load callback (the constructor will then, of course, have whatever name you call it).
For details on usage, please refer to the project's README.
Currently, only Chrome 25+ supports CSS Shaders. You need to enable CSS Shaders in chrome://flags/.
None.
MIT. For details, see the LICENSE file in the repository.
Jens Arps, jensarps.de
