Displays GLSL Fragment Shading Background Of The Website

Displays GLSL fragment shading as the background of the website. Supports Shadertoy, multi-track shader – off-screen ping-pong stores, feedback loops, floating-point texture.

Whether with WebGL 1 or 2, it will attempt to operate wherever it is technically feasible.

Features:

Simplicity: It’s just presenting the canvas background as a sliver shading.
Speed: Designed to be embedded in HTML and start rendering before other page resources are downloaded.
Scalability: Adding interactivity and controls is trivial
Convenience: Clear API, specific errors will inform you of the ones that are difficult to correct.
Minimum footprint: Converted from JavaScript to JavaScript using Google Closure Compiler.
Pixel feedback loops: Preserve timely movement on buffers off-screen with floating-point accuracy.
Shadertoy support: including multass shader
Cross-browser / cross-device: On Chrome, Safari, Firefox, or Edge, either with WebGL 1 or 2 or on Linux, Windows, Mac, iPhone, or Samsung phone – it will use the optimal strategy to extract what’s possible from the browser and devices.

How to make use of it:

1. Load the shader-web-background.js JavaScript library within the doc.

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

2. Add your fragment shaders to the head part of the doc.

<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 web page.

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

5. Available configurations and occasion 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
});

GLSL Fragment Shader Background, Shader Web Background Plugin/Github, glsl fragment shader example, glsl shaders examples, glsl shaders, shadertoy, glsl download, glsl viewer, glsl shader library