Graphim

WebGL2 の宣言的 DAG で画像エフェクトを組むライブラリ。

トポロジ（src/graph）と GPU 実行（src/core + src/runtime）を分離している。組み込みルックは src/effects。

Setup

npm install
npm test
npm run build   # optional: dist/

Use (Vite)

// vite.config.ts
import { defineConfig } from 'vite';
import { graphimGlsl } from 'graphim/vite';

export default defineConfig({
  plugins: [graphimGlsl()],
});

import { Graphim, gray, blur, source, pass } from 'graphim';

const g = Graphim.mount({ image: img });
g.setGraph(blur(gray(source()), 8));
g.render();

// custom fragment body (after shared header: uMain, vUv, time, fragColor, …)
g.setGraph(
  pass(
    `
uniform vec2 delta;
void main() {
  fragColor = texture(uMain, vUv + sin(time) * delta);
}
`,
    source(),
    { delta: [0.1, 0.2] },
  ),
);
g.animate();

DAG builders

API	意味
source() / source({ image })	入力テクスチャ
pass(shader, input, uniforms?)	1 入力フルスクリーン
blend(a, b, opts?) / merge([a,b,…], opts)	2〜4 入力合成（uMain…uFourth）
delay(input)	1 フレーム遅延
単一	gray sepia neg blur bloom pixel frosted vignette contrast posterize mirror chromatic edge
複数	mix multiply screen overlay difference add mask tripleMix

Graphim.mount は WebGL2 必須。失敗時は throw。

Structure

src/
  graph/     # 型・validate・schedule・builders（純関数）
  core/      # Program / FBO pool / VAO / uniforms
  effects/   # シェーダ + primitive factories
  runtime/   # Graphim.mount + executor

Scripts

Command	説明
npm test	Vitest
npm run typecheck	tsc --noEmit
npm run build	Vite library → dist/

Shader contract

Fragment bodies are concatenated after FRAG_HEADER (#version 300 es, uMain / uSecond, time, resolution, mouse, isHover, fragColor, vUv). Use texture() (not texture2D) and write to fragColor.

Export

g.render();
const url = g.toDataURL(); // image/png by default
await g.download({ fileName: 'look', type: 'image/jpeg', quality: 0.9 });
const blob = await g.toBlob({ type: 'image/webp' });

Context is created with preserveDrawingBuffer: true so reads after present succeed.