@xifu/shader-graph-glsl 0.1.0

package/README.md

@@ -0,0 +1,86 @@
+# Shader Graph GLSL
+
+一个 Unity `Shader Graph` 高仿，纯 GLSL ES 3.00 实现，渲染器无关。
+
+## 📦 双包架构
+
+```
+@xifu/shader-graph-glsl/runtime    — 轻量运行时引擎 (零外部依赖，纯 WebGL2)
+@xifu/shader-graph-glsl/editor     — 可视化编辑器 (基于 Rete.js + React + Three.js)
+```
+
+| 包 | 描述 | 依赖 |
+|---|---|---|
+| `@xifu/shader-graph-glsl/runtime` | 独立 WebGL2 渲染引擎，加载 ShaderConfig 渲染 | 无 |
+| `@xifu/shader-graph-glsl/editor` | 可视化节点编辑器，编译产出 ShaderConfig | React, Three.js |
+
+## 🚀 快速开始
+
+### 运行时最小用例
+
+```ts
+import { ShaderGraphRuntime } from '@xifu/shader-graph-glsl/runtime'
+
+const runtime = new ShaderGraphRuntime(canvas)
+const program = runtime.load(shaderConfig)  // ShaderConfig 由编辑器编译产出
+
+runtime.uniforms(program)
+  .set('uColor', [1, 0, 0, 1])
+  .commit()
+
+runtime.draw({
+  geometry: { attributes: { aPosition: { data, size: 3 } }, vertexCount: 3 },
+  program,
+  uniforms: {},
+})
+```
+
+### 编辑器最小用例
+
+```ts
+import { ShaderGraphEditor } from '@xifu/shader-graph-glsl/editor'
+
+const editor = new ShaderGraphEditor(document.getElementById('editor')!)
+await editor.createGraph()
+
+// 编译导出
+const config = await editor.compile()
+```
+
+## 📖 文档
+
+- [API 文档](https://a876691666.github.io/shader-graph-glsl/#/api)
+- [使用用例](https://a876691666.github.io/shader-graph-glsl/#/examples)
+  - Three.js 集成
+  - PixiJS 集成  
+  - 原生 WebGL2
+  - PlayCanvas 集成
+
+## 🖼️ 截图
+
+<div style="display: grid; grid: repeat(2, 180px) / auto-flow 290px;">
+  <img width="280" alt="fresnelOutline" src="./screenshots/fresnelOutline.png">
+  <img width="280" alt="dissolve" src="./screenshots/dissolve.png">
+  <img width="280" alt="procedural" src="./screenshots/procedural.png">
+  <img width="280" alt="subgraph" src="./screenshots/subgraph.png"> 
+  <img width="280" alt="subgraph" src="./screenshots/previewNumber.png"> 
+  <img width="280" alt="subgraph" src="./screenshots/flowmap.png"> 
+</div>
+
+## 🔧 开发
+
+```bash
+# 安装依赖
+pnpm install
+
+# 启动编辑器 dev server
+pnpm dev
+
+# 启动文档站点
+pnpm dev:docs
+
+# 构建文档站点
+pnpm build:docs
+```
+
+MIT 仅供学习交流使用

package/dist/ShaderConfig-RGrO5cST.d.ts

@@ -0,0 +1,110 @@
+/**
+ * ShaderConfig — 结构化着色器配置导出格式
+ *
+ * 这是运行时引擎与编辑器之间的契约类型。
+ * 编辑器编译导出的 ShaderConfig 可由运行时引擎直接加载渲染。
+ */
+/** Uniform 元数据 (用于运行时更新) */
+interface UniformMeta {
+    /** GLSL 中的变量名 */
+    name: string;
+    /** GLSL 类型 */
+    type: UniformDataType;
+    /** 默认值 */
+    default?: UniformValue;
+    /** 编辑器上下文键 (用于编辑器映射) */
+    contextKey?: string;
+}
+type UniformDataType = 'float' | 'int' | 'bool' | 'vec2' | 'vec3' | 'vec4' | 'mat2' | 'mat3' | 'mat4' | 'sampler2D';
+type UniformValue = number | [number, number] | [number, number, number] | [number, number, number, number] | number[];
+/** 纹理绑定配置 */
+interface TextureBinding {
+    /** uniform 变量名 */
+    name: string;
+    /** 纹理 URL 或 asset ID */
+    url?: string;
+    /** 纹理 asset ID (编辑器资源引用) */
+    assetId?: string;
+    /** 颜色空间 */
+    colorSpace?: 'sRGB' | 'Linear';
+    /** 类型 (default / normal) */
+    type?: 'default' | 'normal';
+}
+/** 参数配置 (编辑器暴露的可调参数) */
+interface ParameterConfig {
+    name: string;
+    type: UniformDataType;
+    default: UniformValue;
+}
+/** 子图配置 */
+interface SubGraphConfig {
+    /** 子图 ID (与主图中引用的 asset.id 对应) */
+    id: string;
+    /** 子图名称 */
+    name?: string;
+    /** 子图的完整着色器配置 */
+    config: ShaderConfig;
+}
+/** 导出着色器配置 v1 */
+interface ShaderConfig {
+    /** 配置版本 */
+    version: 1;
+    /** 唯一标识 */
+    id: string;
+    /** 可读名称 */
+    name?: string;
+    /** 完整顶点着色器 GLSL ES 3.00 源码 */
+    vertCode: string;
+    /** 完整片段着色器 GLSL ES 3.00 源码 */
+    fragCode: string;
+    /** 所有 uniform 元数据 */
+    uniforms: UniformMeta[];
+    /** 纹理绑定信息 */
+    textures: TextureBinding[];
+    /** 暴露的参数 (可在运行时覆盖) */
+    parameters: ParameterConfig[];
+    /** 渲染状态 */
+    renderState?: {
+        /** 混合模式 */
+        blending?: 'opaque' | 'transparent' | 'additive' | 'multiply';
+        /** 面剔除 */
+        cullMode?: 'front' | 'back' | 'none';
+        /** 深度写入 */
+        depthWrite?: boolean;
+        /** 深度测试 */
+        depthTest?: 'never' | 'less' | 'equal' | 'lequal' | 'greater' | 'notequal' | 'gequal' | 'always';
+        /** 精度 */
+        precision?: 'highp' | 'mediump' | 'lowp';
+    };
+    /** 引用的子图 (key = asset.id) */
+    subGraphs?: Record<string, SubGraphConfig>;
+}
+/** 编译选项 (编辑器 → 编译器) */
+interface ShaderCompileOptions {
+    /** 模板类型 */
+    template: 'unlit' | 'lit' | 'subgraph';
+    /** precision */
+    precision?: 'single' | 'float';
+    /** 表面类型 */
+    surfaceType?: 'opaque' | 'transparent';
+    /** 渲染面 */
+    renderFace?: 'front' | 'back' | 'both';
+    /** 深度写入 */
+    depthWrite?: 'auto' | 'enable' | 'disable';
+    /** 深度测试 */
+    depthTest?: string;
+    /** alpha 裁剪 */
+    alphaClipping?: boolean;
+    /** 投射阴影 */
+    castShadows?: boolean;
+    /** 混合模式 */
+    blendingMode?: 'alpha' | 'additive' | 'multiply' | 'premultiply';
+    /** 允许材质覆盖 */
+    allowMaterialOverride?: boolean;
+}
+/** Uniform 运行时值集合 */
+interface UniformValues {
+    [name: string]: UniformValue | WebGLTexture | null;
+}
+
+export type { ParameterConfig as P, ShaderConfig as S, TextureBinding as T, UniformMeta as U, UniformValue as a, UniformValues as b, ShaderCompileOptions as c, SubGraphConfig as d, UniformDataType as e };