GLSL Fragment Shader Background In JavaScript

Preview:

Description:

This is a JavaScript library that enables you to use GLSL Fragment shaders as a pretty cool background for your webpage.

Basic Usage:

1. Load the shader-web-background.js JavaScript library in the document.

<script src="dist/shader-web-background.min.js"></script>

2. Add your fragment shaders to the head section of the document.

<script type="x-shader/x-fragment" id="image">
  precision highp float;
  uniform float iTime;
  void main() {
    gl_FragColor = vec4(
      mod(gl_FragCoord.x / 256., 1.),
      mod((gl_FragCoord.x + gl_FragCoord.y - iTime * 40.) / 256. , 1.),
      mod(gl_FragCoord.y / 256., 1.),
      1.
    );
  }
</script>

3. Enable the Fragment Shader Background.

shaderWebBackground.shade({
  shaders: {
    image: {
      uniforms: {
        iTime: (gl, loc) => gl.uniform1f(loc, performance.now() / 1000)
      }
    }
  }
});

4. Add a fallback background to the page.

.shader-web-background-fallback {
  background: url("fallback-bg.jpg");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;    
}

5. Available configurations and event handlers.

shaderWebBackground.shade({
  // canvas element on which the background should be rendered
  canvas: HTMLCanvasElement,
  // definition of shaders
  shaders: {
    image: {
      uniforms: {
        iTime: (gl, loc) => gl.uniform1f(loc, performance.now() / 1000)
      }
    }
  },
  // callbacks
  onInit: function(Context){},
  onResize: function(!number, !number, Context){},
  onBeforeFrame: function(Context){},
  onAfterFrame: function(Context){},
  onError: ErrorHandler
});

Changelog:

02/15/2021

• custom vertex shader support

01/12/2021

• getLineNumberedSource improvements