Shader-generated backgrounds for the Web.
You can see some examples of Shaderback.js usage here:
- My website with a simple background: http://www.flypig.co.uk
- impress.js presentation slides
- Shaderback.js testing page.
The code for these is in the examples folder.
Simply add the following code inside the header of the webpage you want the background on.
shader.txt is the URL of the fragment shader file on your webserver.
Alternatively, you can include the shader code in a script element on your page, and tell shaderback.js to use this instead by passing the ID of the script:
In this second case
shader-id is the element ID of the script tag containing the fragment shader code.
Finally, if you have your shader code stored as a string, you can use:
text is a string containing the fragment shader code.
When creating a fragment shader for use with shaderback.js, you need to include three variables to accept state values, as detailed below. The output colour of the current fragment is returned in
gl_FragColor as usual.
uniform highp float iGlobalTime
Current time in seconds since midnight January 1, 1970 (GMT), modulo 18000. The use of world time allows synchronisation across separate instances. The modulo is to avoid float overflow/innacuracy errors and essentially means the time will loop back to zero every 5 hours.
uniform vec3 iResolution
Viewport resolution, with x, y being width and height respectively, and z being the pixel aspect ratio (currently always 1). Note that the height and width will be half the pixel resolution of the current visible body area of the page (since the resultion is set to half this for performance reasons).
varying vec2 fragCoord
Coordinate of the current fragment to be rendered. The x and y values will be in the range [0, iResolution.x) and [0, iResolution.y) respectively. If you want to convert them to texture uv coordinates in the range [0, 1), simply dividte by iResolution.xy.
Use this to output the colour of the current fragment. The alpha channel is used to blend with the background of thee page. All colour values are in the range [0, 1], including alpha.
However, during development it can be helpful to receive error notifications. To this end, you can turn on error messages with the
setDebug(active) method. Ensure you call it before attempting to load your shader, as follows:
shaderback.setDebug(true); window.onload = shaderback.loadURL("shader.txt");
It's been tested on the following browsers, and seems to work fine on all of them:
- Firefox 36.01 under Linux and Windows
- Chrome 41.something on Windows
- Chromium 41.something on Linux
- IE 11 on Windows
- Jolla Sailfish browser 1.0 (Mozilla based)
- Android 4.4.2 Chrome 40.something
However, it's only been tested in pretty limited circumstances (only on a few Web pages), so don't expect too much of it.
Shaderback.js is released under an MIT License. See the LICENSE file for the full details.
Contact and Links
More information will eventually be added to: http://www.flypig.co.uk/?to=shaderback
The source code can be obtained from GitHub: https://github.com/llewelld/shaderback.js
I can be contacted via one of the following.