fragment-shader

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 and HTML/CSS/JS.

Configuration

export type EditorConfig = {
  parent?: HTMLElement | string;
  uniforms?: Uniform[];
  onUpdate?: (update?: string) => void;
  language?: 'HTML' | 'GLSL';
  doc?: string;
};

SandBox

A Shader and Editor 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.