@xifu/shader-graph-glsl 0.1.0 → 0.3.0

package/dist/editor/index.d.ts

@@ -887,6 +887,7 @@ declare class ShaderGraphEditor$1 extends NodeEditor {
     clearing: boolean;
     editing: 'ShaderGraph' | 'SubGraph';
     subGraphProvider?: SubGraphProvider;
+    shaderConfig?: ShaderConfig;
     disposables: Array<() => void>;
     constructor(id: string, container: HTMLElement);
     private initEvents;
@@ -2490,6 +2491,7 @@ interface SGSetting {
 interface ShaderGraphData extends GraphData {
     type: 'ShaderGraph' | 'SubGraph';
     version: string;
+    shaderConfig?: ShaderConfig;
     UIState: {
         showMainPreview?: boolean;
         showBlackBoard?: boolean;
@@ -2637,6 +2639,8 @@ declare class ShaderGraphEditor {
      * 编译图为 ShaderConfig
      *
      * 返回的 ShaderConfig 可直接用于 ShaderGraphRuntime。
+     * 编译结果会自动存储到 inner.shaderConfig 中，
+     * 并在 save() 时一并导出。
      *
      * @returns 着色器配置
      *

package/dist/editor/index.js

@@ -1,9 +1,333 @@
 var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
+// src/templates/Lit.ts
+var LitSGTemplate, LitMaterialTemplate;
+var init_Lit = __esm({
+  "src/templates/Lit.ts"() {
+    "use strict";
+    LitSGTemplate = Object.freeze({
+      vert: (body) => `void sg_vert(
+  inout vec3 positionOS,
+  inout vec3 normalOS,
+  inout vec3 tangentOS
+) {
+${body}
+}`,
+      frag: (body) => `void sg_frag(
+  inout vec3 baseColor,
+  inout float alpha,
+  inout float metallic,
+  inout float smoothness,
+  inout vec3 emission,
+  inout float ao,
+  inout vec3 normalTS
+) {
+${body}
+}`
+    });
+    LitMaterialTemplate = {
+      vert: (sgCode) => `#version 300 es
+
+// -- \u5185\u7F6E uniform (\u7528\u4E8E gl_Position \u8BA1\u7B97) --
+uniform mat4 sg_Matrix_ModelView;
+uniform mat4 sg_Matrix_Proj;
+
+layout(location = 0) in vec3 position;
+layout(location = 1) in vec2 uv;
+layout(location = 2) in vec3 normal;
+
+${sgCode}
+
+void main() {
+  vec3 sg_position = position;
+  vec3 sg_normal = normal;
+  vec3 sg_tangent = vec3(0.0);
+  sg_vert(sg_position, sg_normal, sg_tangent);
+  gl_Position = sg_Matrix_Proj * sg_Matrix_ModelView * vec4(sg_position, 1.0);
+}`,
+      frag: (sgCode) => `#version 300 es
+precision highp float;
+
+${sgCode}
+
+vec3 LinearToGammaSpace(vec3 linRGB) {
+  return max(vec3(1.055) * pow(max(linRGB, vec3(0.0)), vec3(0.416666667)) - 0.055, vec3(0.0));
+}
+
+layout(location = 0) out vec4 fragColor;
+
+void main() {
+  vec3 sg_baseColor = vec3(0.0);
+  float sg_alpha = 1.0;
+  float sg_metallic = 0.0;
+  float sg_smoothness = 0.5;
+  vec3 sg_emission = vec3(0.0);
+  float sg_ao = 1.0;
+  vec3 sg_normalTS = vec3(0.0, 0.0, 1.0);
+  sg_frag(sg_baseColor, sg_alpha, sg_metallic, sg_smoothness, sg_emission, sg_ao, sg_normalTS);
+  fragColor = vec4(LinearToGammaSpace(sg_baseColor), sg_alpha);
+}`
+    };
+  }
+});
+
+// src/templates/Unlit.ts
+var UnlitSGTemplate, UnlitMaterialTemplate;
+var init_Unlit = __esm({
+  "src/templates/Unlit.ts"() {
+    "use strict";
+    UnlitSGTemplate = Object.freeze({
+      vert: (body) => `void sg_vert(
+  inout vec3 positionOS,
+  inout vec3 normalOS,
+  inout vec4 tangentOS,
+  vec2 uv
+) {
+${body}
+}`,
+      frag: (body) => `void sg_frag(
+  inout vec3 baseColor,
+  inout float alpha
+) {
+${body}
+}`
+    });
+    UnlitMaterialTemplate = {
+      vert: (sgCode) => `#version 300 es
+
+// -- \u5185\u7F6E uniform (\u7528\u4E8E gl_Position \u8BA1\u7B97) --
+uniform mat4 sg_Matrix_ModelView;
+uniform mat4 sg_Matrix_Proj;
+
+// -- Three.js \u6807\u51C6\u5C5E\u6027 (\u5E26 layout \u4EE5\u4FBF\u72EC\u7ACB\u4F7F\u7528) --
+layout(location = 0) in vec3 position;
+layout(location = 1) in vec2 uv;
+layout(location = 2) in vec3 normal;
+layout(location = 3) in vec4 tangent;
+
+// -- \u7F16\u8BD1\u751F\u6210\u7684 uniform / varying / define --
+${sgCode}
+
+void main() {
+  vec3 sg_position = position;
+  vec3 sg_normal = normal;
+  vec4 sg_tangent = tangent;
+  sg_vert(sg_position, sg_normal, sg_tangent, uv);
+  gl_Position = sg_Matrix_Proj * sg_Matrix_ModelView * vec4(sg_position, 1.0);
+}`,
+      frag: (sgCode) => `#version 300 es
+precision highp float;
+
+// -- \u7F16\u8BD1\u751F\u6210\u7684 uniform / varying / define --
+${sgCode}
+
+vec3 LinearToGammaSpace(vec3 linRGB) {
+  return max(vec3(1.055) * pow(max(linRGB, vec3(0.0)), vec3(0.416666667)) - 0.055, vec3(0.0));
+}
+
+layout(location = 0) out vec4 fragColor;
+
+void main() {
+  vec3 sg_baseColor = vec3(0.0);
+  float sg_alpha = 1.0;
+  sg_frag(sg_baseColor, sg_alpha);
+  fragColor = vec4(LinearToGammaSpace(sg_baseColor), sg_alpha);
+}`
+    };
+  }
+});
+
+// src/templates/index.ts
+var MaterialTemplates, SGTemplates, SG_VERT, SG_FRAG;
+var init_templates = __esm({
+  "src/templates/index.ts"() {
+    "use strict";
+    init_Lit();
+    init_Unlit();
+    MaterialTemplates = Object.freeze({
+      unlit: UnlitMaterialTemplate,
+      lit: LitMaterialTemplate,
+      subgraph: UnlitMaterialTemplate
+    });
+    SGTemplates = Object.freeze({
+      lit: LitSGTemplate,
+      unlit: UnlitSGTemplate,
+      subgraph: UnlitSGTemplate
+    });
+    SG_VERT = `// -- shader-graph vertex shader --
+`;
+    SG_FRAG = ``;
+  }
+});
+
+// src/runtime/ThreeAdapter.ts
+var ThreeAdapter_exports = {};
+__export(ThreeAdapter_exports, {
+  applyShaderConfig: () => applyShaderConfig,
+  compilationToShaderConfig: () => compilationToShaderConfig
+});
+import {
+  Matrix4 as Matrix43,
+  Matrix3,
+  Vector2 as Vector24,
+  Vector3 as Vector33,
+  Vector4 as Vector42
+} from "three";
+function toThreeType(glslType) {
+  switch (glslType) {
+    case "float":
+      return "f";
+    case "int":
+      return "i";
+    case "bool":
+      return "b";
+    case "vec2":
+      return "v2";
+    case "vec3":
+      return "v3";
+    case "vec4":
+      return "v4";
+    case "mat2":
+      return "m2";
+    case "mat3":
+      return "m3";
+    case "mat4":
+      return "m4";
+    case "sampler2D":
+      return "t";
+    default:
+      return glslType;
+  }
+}
+function defaultThreeValue(type) {
+  switch (type) {
+    case "mat4":
+      return new Matrix43();
+    case "mat3":
+      return new Matrix3();
+    case "mat2":
+      return [1, 0, 0, 1];
+    case "vec4":
+      return new Vector42();
+    case "vec3":
+      return new Vector33();
+    case "vec2":
+      return new Vector24();
+    case "float":
+      return 0;
+    case "int":
+      return 0;
+    case "bool":
+      return false;
+    case "sampler2D":
+      return null;
+    default:
+      return void 0;
+  }
+}
+function applyShaderConfig(material, config, textureLoader) {
+  const template = MaterialTemplates.unlit;
+  material.vertexShader = config.vertCode;
+  material.fragmentShader = config.fragCode;
+  const uniforms = {};
+  for (const meta of config.uniforms) {
+    if (meta.type === "sampler2D") {
+      uniforms[meta.name] = { value: null, type: "t" };
+    } else {
+      const threeType = toThreeType(meta.type);
+      uniforms[meta.name] = {
+        value: meta.default !== void 0 ? meta.default : defaultThreeValue(meta.type),
+        type: threeType
+      };
+    }
+  }
+  material.uniforms = uniforms;
+  if (config.renderState) {
+    const rs = config.renderState;
+    material.transparent = rs.blending === "transparent" || rs.blending === "additive" || rs.blending === "multiply";
+    material.depthWrite = rs.depthWrite !== false;
+  }
+  material.needsUpdate = true;
+}
+function compilationToShaderConfig(compilation, id, name, subGraphs) {
+  const uniforms = [];
+  const textures = [];
+  for (const [contextKey, info] of Object.entries(compilation.uniformMap)) {
+    uniforms.push({
+      name: info.name,
+      type: toUniformDataType(info.type),
+      contextKey
+    });
+  }
+  for (const [contextKey, info] of Object.entries(compilation.bindingMap)) {
+    const uniformMeta = {
+      name: info.name,
+      type: "sampler2D",
+      contextKey
+    };
+    uniforms.push(uniformMeta);
+    const asset = compilation.resource.texture[contextKey];
+    if (asset) {
+      textures.push({
+        name: info.name,
+        assetId: asset.id,
+        colorSpace: "sRGB"
+      });
+    }
+  }
+  return {
+    version: 1,
+    id,
+    name,
+    vertCode: compilation.vertCode,
+    fragCode: compilation.fragCode,
+    uniforms,
+    textures,
+    parameters: compilation.parameters.map((p) => ({
+      name: p.name,
+      type: toUniformDataType(p.type),
+      default: p.defalutValue
+    })),
+    subGraphs
+  };
+}
+function toUniformDataType(type) {
+  const clean = type.replace(/<.+?>/, "").replace(/x.+$/, "");
+  switch (clean) {
+    case "mat2":
+    case "mat3":
+    case "mat4":
+      return clean;
+    case "vec2":
+    case "vec3":
+    case "vec4":
+      return clean;
+    case "sampler2D":
+    case "sampler2DShadow":
+      return "sampler2D";
+    case "float":
+    case "int":
+    case "bool":
+      return clean;
+    default:
+      return "float";
+  }
+}
+var init_ThreeAdapter = __esm({
+  "src/runtime/ThreeAdapter.ts"() {
+    "use strict";
+    init_templates();
+  }
+});
+
 // src/editors/ShaderGraphEditor.ts
 import { createRoot } from "react-dom/client";
 
@@ -2033,147 +2357,8 @@ var Control2 = ({ className, control, innerRef }) => {
   return /* @__PURE__ */ jsx4("div", { className, ref: (el) => el && innerRef(el, control) });
 };
 
-// src/templates/Lit.ts
-var LitSGTemplate = Object.freeze({
-  vert: (body) => `void sg_vert(
-  inout vec3 positionOS,
-  inout vec3 normalOS,
-  inout vec3 tangentOS
-) {
-${body}
-}`,
-  frag: (body) => `void sg_frag(
-  inout vec3 baseColor,
-  inout float alpha,
-  inout float metallic,
-  inout float smoothness,
-  inout vec3 emission,
-  inout float ao,
-  inout vec3 normalTS
-) {
-${body}
-}`
-});
-var LitMaterialTemplate = {
-  vert: (sgCode) => `#version 300 es
-
-// -- \u5185\u7F6E uniform (\u7528\u4E8E gl_Position \u8BA1\u7B97) --
-uniform mat4 sg_Matrix_ModelView;
-uniform mat4 sg_Matrix_Proj;
-
-layout(location = 0) in vec3 position;
-layout(location = 1) in vec2 uv;
-layout(location = 2) in vec3 normal;
-
-${sgCode}
-
-void main() {
-  vec3 sg_position = position;
-  vec3 sg_normal = normal;
-  vec3 sg_tangent = vec3(0.0);
-  sg_vert(sg_position, sg_normal, sg_tangent);
-  gl_Position = sg_Matrix_Proj * sg_Matrix_ModelView * vec4(sg_position, 1.0);
-}`,
-  frag: (sgCode) => `#version 300 es
-precision highp float;
-
-${sgCode}
-
-vec3 LinearToGammaSpace(vec3 linRGB) {
-  return max(vec3(1.055) * pow(max(linRGB, vec3(0.0)), vec3(0.416666667)) - 0.055, vec3(0.0));
-}
-
-layout(location = 0) out vec4 fragColor;
-
-void main() {
-  vec3 sg_baseColor = vec3(0.0);
-  float sg_alpha = 1.0;
-  float sg_metallic = 0.0;
-  float sg_smoothness = 0.5;
-  vec3 sg_emission = vec3(0.0);
-  float sg_ao = 1.0;
-  vec3 sg_normalTS = vec3(0.0, 0.0, 1.0);
-  sg_frag(sg_baseColor, sg_alpha, sg_metallic, sg_smoothness, sg_emission, sg_ao, sg_normalTS);
-  fragColor = vec4(LinearToGammaSpace(sg_baseColor), sg_alpha);
-}`
-};
-
-// src/templates/Unlit.ts
-var UnlitSGTemplate = Object.freeze({
-  vert: (body) => `void sg_vert(
-  inout vec3 positionOS,
-  inout vec3 normalOS,
-  inout vec4 tangentOS,
-  vec2 uv
-) {
-${body}
-}`,
-  frag: (body) => `void sg_frag(
-  inout vec3 baseColor,
-  inout float alpha
-) {
-${body}
-}`
-});
-var UnlitMaterialTemplate = {
-  vert: (sgCode) => `#version 300 es
-
-// -- \u5185\u7F6E uniform (\u7528\u4E8E gl_Position \u8BA1\u7B97) --
-uniform mat4 sg_Matrix_ModelView;
-uniform mat4 sg_Matrix_Proj;
-
-// -- Three.js \u6807\u51C6\u5C5E\u6027 (\u5E26 layout \u4EE5\u4FBF\u72EC\u7ACB\u4F7F\u7528) --
-layout(location = 0) in vec3 position;
-layout(location = 1) in vec2 uv;
-layout(location = 2) in vec3 normal;
-layout(location = 3) in vec4 tangent;
-
-// -- \u7F16\u8BD1\u751F\u6210\u7684 uniform / varying / define --
-${sgCode}
-
-void main() {
-  vec3 sg_position = position;
-  vec3 sg_normal = normal;
-  vec4 sg_tangent = tangent;
-  sg_vert(sg_position, sg_normal, sg_tangent, uv);
-  gl_Position = sg_Matrix_Proj * sg_Matrix_ModelView * vec4(sg_position, 1.0);
-}`,
-  frag: (sgCode) => `#version 300 es
-precision highp float;
-
-// -- \u7F16\u8BD1\u751F\u6210\u7684 uniform / varying / define --
-${sgCode}
-
-vec3 LinearToGammaSpace(vec3 linRGB) {
-  return max(vec3(1.055) * pow(max(linRGB, vec3(0.0)), vec3(0.416666667)) - 0.055, vec3(0.0));
-}
-
-layout(location = 0) out vec4 fragColor;
-
-void main() {
-  vec3 sg_baseColor = vec3(0.0);
-  float sg_alpha = 1.0;
-  sg_frag(sg_baseColor, sg_alpha);
-  fragColor = vec4(LinearToGammaSpace(sg_baseColor), sg_alpha);
-}`
-};
-
-// src/templates/index.ts
-var MaterialTemplates = Object.freeze({
-  unlit: UnlitMaterialTemplate,
-  lit: LitMaterialTemplate,
-  subgraph: UnlitMaterialTemplate
-});
-var SGTemplates = Object.freeze({
-  lit: LitSGTemplate,
-  unlit: UnlitSGTemplate,
-  subgraph: UnlitSGTemplate
-});
-var SG_VERT = `// -- shader-graph vertex shader --
-`;
-var SG_FRAG = ``;
-
 // src/view/utils.ts
+init_templates();
 var preventDefault = (e) => e.preventDefault();
 var stopPropagation = (e) => e.stopPropagation();
 var isChildOf = (child, parent, maxSearch = 20) => {
@@ -4171,6 +4356,7 @@ var ConnectionPluginClass = class {
 var ConnectionPlugin = new ConnectionPluginClass();
 
 // src/plugins/PreviewPlugin/PreviewClient.ts
+init_templates();
 import { RawShaderMaterial as RawShaderMaterial3 } from "three";
 
 // src/materials/ResourceAdapter.ts
@@ -4217,6 +4403,7 @@ function disposeTexture(texture) {
 }
 
 // src/materials/SGController.ts
+init_templates();
 var glslToThreeUniformType = (glslType) => {
   switch (glslType) {
     case "float":
@@ -6899,6 +7086,9 @@ var GraphCompiler = class {
   }
 };
 
+// src/compilers/ShaderGraphCompiler.ts
+init_templates();
+
 // src/compilers/ShaderGraphTypes.ts
 var initContext = () => ({
   uniforms: {},
@@ -13968,7 +14158,7 @@ var ListIOItem = ({ list, value, onChange }) => {
 // package.json
 var package_default = {
   name: "@xifu/shader-graph-glsl",
-  version: "0.1.0",
+  version: "0.3.0",
   description: "Shader Graph GLSL \u2014 visual node-based shader editor & runtime engine",
   type: "module",
   private: false,
@@ -13983,6 +14173,7 @@ var package_default = {
     },
     "./editor": {
       types: "./dist/editor/index.d.ts",
+      style: "./dist/editor/index.css",
       import: "./dist/editor/index.js"
     }
   },
@@ -14020,6 +14211,7 @@ var package_default = {
     "@types/react-dom": "^18",
     "@types/three": "^0.150.2",
     "@vitejs/plugin-react": "^3.1.0",
+    "esbuild-plugin-less": "^1.3.38",
     less: "^4.1.3",
     tsup: "^8.5.1",
     typescript: "^4.9.3",
@@ -14084,6 +14276,7 @@ var ShaderGraphEditor = class extends rete_exports.NodeEditor {
   clearing = false;
   editing;
   subGraphProvider;
+  shaderConfig;
   disposables = [];
   constructor(id, container) {
     super(id, container);
@@ -14197,6 +14390,7 @@ var ShaderGraphEditor = class extends rete_exports.NodeEditor {
     this.clearing = true;
     super.clear();
     this.blackboardView.fromJSON([]);
+    this.shaderConfig = void 0;
     this.clearing = false;
     if (silent) this.silent = old;
   }
@@ -14208,6 +14402,7 @@ var ShaderGraphEditor = class extends rete_exports.NodeEditor {
     const setting = json.setting || DEFAULT_SETTING();
     if (json.type === "SubGraph") setting.template = "subgraph";
     this.inspectorView.fromJSON(setting);
+    this.shaderConfig = json.shaderConfig;
     const { UIState } = json;
     this.blackboardView.setShowState(UIState?.showBlackBoard ?? true);
     this.mainPreviewView.setShowState(UIState?.showMainPreview ?? true);
@@ -14226,6 +14421,7 @@ var ShaderGraphEditor = class extends rete_exports.NodeEditor {
     json.version = package_default.version;
     json.setting = this.inspectorView.toJSON();
     json.parameters = this.blackboardView.toJSON();
+    if (this.shaderConfig) json.shaderConfig = this.shaderConfig;
     return json;
   }
   afterImport() {
@@ -14366,6 +14562,7 @@ var ShaderGraphEditor2 = class {
    */
   load(data) {
     this.inner.fromJSON(data);
+    this.inner.shaderConfig = data.shaderConfig;
     this._ready = true;
     this._resolveReady();
     this.emit("imported");
@@ -14394,6 +14591,8 @@ var ShaderGraphEditor2 = class {
    * 编译图为 ShaderConfig
    *
    * 返回的 ShaderConfig 可直接用于 ShaderGraphRuntime。
+   * 编译结果会自动存储到 inner.shaderConfig 中，
+   * 并在 save() 时一并导出。
    *
    * @returns 着色器配置
    *
@@ -14404,7 +14603,17 @@ var ShaderGraphEditor2 = class {
    * ```
    */
   async compile() {
-    throw new Error("compile() not yet implemented - use inner.compiler directly");
+    const graphData = this.inner.toJSON();
+    const compilation = await this.inner.compiler.compile(graphData);
+    const { compilationToShaderConfig: compilationToShaderConfig2 } = await Promise.resolve().then(() => (init_ThreeAdapter(), ThreeAdapter_exports));
+    const config = compilationToShaderConfig2(
+      compilation,
+      graphData.id,
+      graphData.id
+    );
+    this.inner.shaderConfig = config;
+    this.emit("compiled", config);
+    return config;
   }
   // ============================================================
   // UI 控制

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xifu/shader-graph-glsl",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Shader Graph GLSL — visual node-based shader editor & runtime engine",
   "type": "module",
   "private": false,
@@ -15,6 +15,7 @@
     },
     "./editor": {
       "types": "./dist/editor/index.d.ts",
+      "style": "./dist/editor/index.css",
       "import": "./dist/editor/index.js"
     }
   },
@@ -52,6 +53,7 @@
     "@types/react-dom": "^18",
     "@types/three": "^0.150.2",
     "@vitejs/plugin-react": "^3.1.0",
+    "esbuild-plugin-less": "^1.3.38",
     "less": "^4.1.3",
     "tsup": "^8.5.1",
     "typescript": "^4.9.3",
@@ -68,4 +70,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}