README
component <shader-art>
The <shader-art>
component is a web component that creates a WebGL canvas, running a shader animation.
Getting started
npm i shader-art
JS:
import { ShaderArt } from 'https://cdn.skypack.dev/shader-art';
ShaderArt.register();
CSS:
shader-art {
display: block;
width: 100vmin;
height: 100vmin;
}
HTML:
<shader-art autoplay>
<script type="vert">
precision highp float;
attribute vec4 position;
void main() {
gl_Position = position;
}
</script>
<script type="frag">
precision highp float;
uniform float time;
uniform vec2 resolution;
void main() {
float t = time * 1e-3;
vec2 p = gl_FragCoord.xy / resolution;
vec3 color = vec3(1.0, sin(p.x + t * 2.), sin(p.y + t));
gl_FragColor=vec4(color, 1.0);
}
</script>
</shader-art>
attributes <shader-art>
autoplay
immediately starts playingplay-state="running|stopped"
get/set current play-state (it is set to running automatically when autoplay is enabled)- regardless of the
play-state
the component respects the user'sprefers-reduced-motion
settings dpr="auto|number"
get/set device pixel ratio (default is "auto", which useswindow.devicePixelRatio
)
Provided uniforms
uniform float time
: number of ticks passeduniform vec2 resolution
: resolution of the canvas
Adding textures
Texture support can be added via a TexturePlugin.
You can load the texture plugin by importing the TexturePlugin and adding it to the ShaderArt.register
call like this:
import { TexturePlugin } from 'https://cdn.skypack.dev/shader-art/plugins/texture-plugin';
ShaderArt.register([() => new TexturePlugin()]);
Building your own plugins
You can build your own plugins by implementing this interface:
export interface ShaderArtPlugin {
name: string;
setup(
hostElement: HTMLElement,
gl: WebGLRenderingContext | WebGL2RenderingContext,
program: WebGLProgram,
canvas: HTMLCanvasElement
): void | Promise<void>;
dispose(): void;
}
If the setup method returns a promise, the shader-art component will wait until the promise resolves.