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.
Stars (CodePen)
yarn add fragment-canvas or npm install fragment-canvas
To render a fragment shader to an existing canvas, create a new instance of FragmentCanvas:
new FragmentCanvas(canvas, 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! |
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 |
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),
},
});