fragment-shader

core

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 './classes/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

type ShaderConfig = {
  // Element or selector, defaults to body.
  parent?: HTMLElement | string | undefined;

  // DevicePixelRadio
  dpr?: number;

  // Resize callback.
  onResize?: ({ width, height, dpr }: Artboard) => unknown;

  // Verbose logging.
  debug?: boolean;

  // Shaders
  vertexShader?: string;
  fragmentShader?: string;

  // Alias for `fragmentShader`.
  shader?: string;

  // Utilize internal requestAnimationFrame loop.
  animate?: boolean;

  // Experimental shorthand.
  shaderpad?: boolean;

  // Uniform values.
  uniforms?: Uniform[];
};

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 './classes/Editor';

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.

SandBox

A Shader and Editor instance, synced – a live-rendered editor environment.

import SandBox from './classes/SandBox';

new SandBox({
  shader: `
    void main () {
      gl_FragColor = vec4(.8, .2, .6, 1.);
    }
  `,
});

• Re-renders on every keystroke.
• Mobile-friendly.