fragment-canvas

Easily render a GLSL fragment shader on an HTML canvas.

fragment-canvas is a small package used for rendering fragment shaders on an HTML canvas, similar to those built with Shadertoy.

Examples

Stars (CodePen)

Installation

yarn add fragment-canvas or npm install fragment-canvas

Usage

To render a fragment shader to an existing canvas, create a new instance of FragmentCanvas:

new FragmentCanvas(canvas, options);

Options

The options object accepts the following options: | Option | Description | Default | | ------------- | ------------------ | ------- | | fragmentShader | GLSL fragment shader string | A basic color changing shader | | uniforms | Custom uniforms to pass to the shader. See example below. | {} | | autoRender | Whether to automatically render the shader with requestAnimationFrame. If you set this to false, you'll have to call FragmentCanvas.render manually | true | | blendFunc | WebGL context blending function | [WebGLRenderingContext.SRC_ALPHA, WebGLRenderingContext.ONE] | | vertexShader | GLSL vertex shader string | A basic vertex shader setting gl_Position. You probably don't need to change this! |

Built-in uniforms

The following uniforms are built in and available for you to use in your shader: | Uniform | Type | Description | | ------------- | ---- | ----------- | | iResolution | vec2 | Canvas resolution | | iTime | float | Elapsed time in seconds |

Custom uniforms

To use custom uniforms, provide them via the uniform option. Here's an example of passing a custom offset uniform, dependent on elapsed time:

new FragmentCanvas(canvas, {
  fragmentShader: customFragmentShader,
  uniforms: {
    offset: (gl, location, time) => gl.uniform1f(location, Math.cos(time / 1000) * 1.0),
  },
});