fragment-shader v4.1.3
fragment-shader
This project owns three core features, each simplifying working with fragment shaders in the browser.
Shader
A tiny, highly-performant WebGL fragment shader renderer.
import { Shader } from 'fragment-shader';
new Shader({
shader: `
void main () {
gl_FragColor = vec4(.8, .2, .6, 1.);
}
`,
});
Small footprint (
3.53kb
).Phenomenal performance characteristics, both in rendering speed and memory consumption.
Zero-configuration instantiation.
Control with pure CSS; uses a ResizeObserver to automatically size itself according to its parent container.
Configuration
export type ShaderConfig = {
parent?: HTMLElement | string; // defaults to document.body
dpr?: number;
onResize?: ({ width, height, dpr }: Artboard) => unknown;
debug?: boolean;
vertexShader?: string;
fragmentShader?: string;
shader?: string; // shorthand for `fragmentShader`
uniforms?: Uniform[];
animate?: boolean; // use internal requestAnimationFrame loop
shaderpad?: boolean;
};
Uniforms
A uniform is structured as [name, type, value]
, where type is mapped as:
const MAP = {
0: 'float'
1: 'bool'
2: 'vec2'
3: 'vec3'
4: 'vec4'
}
type FloatUniform = [string, 0, number];
type BooleanUniform = [string, 1, boolean];
type Vec2Uniform = [string, 2, [number, number]];
type Vec3Uniform = [string, 3, [number, number, number]];
type Vec4Uniform = [string, 4, [number, number, number, number]];
type Uniform =
| FloatUniform
| BooleanUniform
| Vec2Uniform
| Vec3Uniform
| Vec4Uniform;
Editor
An in-browser GLSL editor implemented with Codemirror.
import { Editor } from 'fragment-shader';
new Editor({
doc: `
void main () {
gl_FragColor = vec4(.8, .2, .6, 1.);
}
`,
});
- Smart syntax highlighting.
- Language and uniform-aware autocomplete.
- Automatic bracket closing, bracket matching highlighting.
- Supports both
GLSL
andHTML/CSS/JS
.
Configuration
export type EditorConfig = {
parent?: HTMLElement | string;
uniforms?: Uniform[];
onUpdate?: (update?: string) => void;
language?: 'HTML' | 'GLSL';
doc?: string;
};
SandBox
A
Shader
andEditor
instance, synced – a live-rendered editor environment.
import { SandBox } from 'fragment-shader';
new SandBox({
shader: `
void main () {
gl_FragColor = vec4(.8, .2, .6, 1.);
}
`,
});
- Re-renders on every keystroke.
- Mobile-friendly.
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago