Shaderback

What's the Point?

Infinitely varying^*, procedurally-generated patterns

Rendered on the GPU for efficiency

Easy to include JavaScript library

^{*Well, really not infinitely at all. Quite a lot though.}

Javascript Usage

Simply add the following Javscript to the header

<script type="text/javascript" src="js/shaderback.js"></script>
<script type="text/javascript">
window.onload = shaderback_loadURL("shader.txt");
</script>

where shader.txt is the URI to your GLSL fragment shader code.

Shader Implementation

Applies fragment shader to body area

Texture is scaled 2:1 pixels for efficiency

No vertex shader needed; this is done for you

These variables are passed to the fragment shader

• Screen coordinates as texture coordinates
• Time as float
• Height and width or render area

Fragment Shader Example

// High precision is needed for the time variable
precision highp float;
// The following variables are passed in automatically
varying vec2 vTextureCoord;
uniform float time;
uniform float width;
uniform float height;

void main(void) {
    // Perform whatever per-pixel calculations you want
    vec4 colour = vec4(0.6, 0.6, 0.6, 1.0);

    // Return the colour to be rendered
    // Alpha blends with page background
    gl_FragColor = colour;
}

Development and Testing

Tested on multiple platforms

• Firefox 36, Chromium 41 on Linux
• Firefox 36, Chrome 41, IE 11 on Windows
• Chrome 40 on Android 4.4.2
• Mozilla 1.0 on Jolla Sailfish 1.1.2

There are some things still to be implemented

• Passing textures as signals to the shader
• Backgrounds for arbitrary block elements
• Choice of resolution