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.

Shaderback.js

5 most recent items

1 Apr 2015 : Shadertoy API testing #
There's now a page where you can test the shaders from Shadertoy.com with shaderback.js. Only shaders not reliant on channel inputs will work, so you may need to click through a few before finding one that renders correctly.
Comment
21 Mar 2015 : Shadertoy to shaderback #
It turns out many of the shaders on Shadertoy (at least those not using channel inputs) can be used by shaderback.js with surprisingly little conversion. Take a look at this really rather amazing example by Inigo Quilez.
Comment
21 Mar 2015 : Shaderback.js is go #
There don't appear to have been any ill-effects from using shaderback.js, so the default is now to have the animated background enabled. It can still be removed if needs-be. The lack of abstraction using GPU code on the Web is really refreshing; it feels like the '90s, poking colour values direct into the screenbuffer again!
Comment
14 Mar 2015 : Shaderback page #
There's now a quick 'n dirty page up with the details about Shaderback. Eventually I'll tidy it up and put some more useful info there.
14 Mar 2015 : GPU generated web backgrounds #
WebGL brings so much potential to the Web, with one of the neatest being its ability to harness GPU performance, effectively bypassing the Javascript bottleneck. I'm currently testing this using some GPU-generated procedural backgrounds for the site. The first version is browsable for testing and I'm hoping to bring it over to the main site if all goes well. I've wrapped the Javascipt needed to get it to work into a simple library so it can be put on any site; available from GitHub. I've also put together a brief set of slides to test its use with impress.js and am really pleased with the results so far. Hope you like it too!
Comment

Download

  • shaderback.js
    Version 0.03 (29 Mar 2015) for HTML5-compatible browsers.
    Shader-generated backgrounds for the web. A small MIT-licensed Javascript library for procedurally generating textures rendered using the GPU and set as animated backgrounds for a Web pages. Uses WebGL and HTML5 but has no Javascript dependencies. More info...
    Download: source.

Comments

Uncover Disqus comments