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.tsimport{defineConfig}from'vite';import{graphimGlsl}from'graphim/vite';exportdefaultdefineConfig({plugins: [graphimGlsl()],});

import{Graphim,gray,blur,source,pass}from'graphim';constg=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 フレーム遅延
単一	graysepianegblurbloompixelfrostedvignettecontrastposterizemirrorchromaticedge
複数	mixmultiplyscreenoverlaydifferenceaddmasktripleMix

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();consturl=g.toDataURL();// image/png by defaultawaitg.download({fileName: 'look',type: 'image/jpeg',quality: 0.9});constblob=awaitg.toBlob({type: 'image/webp'});

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