Your browser doesn't support the features required for this presentation, so you are presented with a simplified version.

For the best experience please use the latest Chrome, Safari or Firefox browser.


Shader-generated backgrounds for the Web

David Llewellyn-Jones

12 March 2015

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");

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

Use a spacebar or arrow keys to navigate