<shader-art>
component
The <shader-art>
component is a web component that creates a WebGL canvas, running a shader animation.
Getting started
npm i shader-art
JavaScript
import { ShaderArt } from 'https://cdn.skypack.dev/shader-art';
ShaderArt.register();
CSS
You can style your shader-element according to your needs. Just provide a display: block
(default would be display: inline) and specify a width and height according to your needs.
shader-art {
display: block;
width: 100vmin;
height: 100vmin;
}
HTML
The HTML structure of a shader-art component looks like this:
<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>
Using WebGL2
Provide the #version 300 es
pragma inside your fragment and vertex shader code.
<shader-art>
attributes
-
autoplay
immediately starts playing -
play-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 passed -
uniform 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.