flypig.co.uk

Location

Shaderback.js

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:

Shaderback.js news

5 most recent items

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.

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!

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!

Download

shaderback.jsVersion 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.