flypig.co.uk

Shaderback.js

Shader-generated backgrounds for the Web

Shaderback.js is a simple Javascript library that leverages WebGL and HTML5 to allow animated backgrounds to be added to any Web page.

The backgrounds are generated procedurally using fragment-shaders on the GPU, so some impressive effects can be created without impacting heavily on browser performance.

As yet, I don't have any impressive effects, but the default style for this site has some gently waving background stripes that uses the technique.

I've put together a brief presentation about Shaderback.js with a simple animated background to give another example of how it could be used and there's also a simple testing page.

The most recent version is now compatible with many of the shaders on Shadertoy.com (as long as they don't rely on channel inputs). You can try some of them out on the Shadertoy test page.

The library is super-simple to integrate into a site (just a few lines in the page header), after which you can play around with fragment shader backgrounds to your hearts content. For example, to put the effect on this page, I just added these lines to the header:

<script type="text/javascript" src="shaderback.js"></script>
<script type="text/javascript">
window.onload = shaderback.loadURL("shaders/wavylines.txt");
</script>

The shader code for the effect looks like this

To get hold of the library, grab the code from GitHub.