更新 Shader graph README.md (#4)

extensions/shader-graph/README.md

@@ -1,8 +1,18 @@
 # Shader Graph
 
-## Introduction
+## Background
 
-The plugin supports a visual editor for shaders.
+In order to lower the threshold for Shader development and expand the capabilities of procedural generation, and to encourage artists/technical artists to directly produce materials in Cocos Creator instead of third-party Digital Content Creation (DCC) tools, avoiding additional development work when importing materials, we have introduced a node-based material editor specifically designed for Cocos Creator.
+
+This plugin relies on Cocos Creator version 3.8.2 and is developed based on our in-house open-source [Graph component](https://github.com/itharbors/ui/tree/main/element/graph) from the Web UI library.
+
+To promote collaboration and innovation within the developer community, we have open-sourced the full set of source code for this plugin under the MIT license. This means developers are free to use, modify, and distribute this tool. We hope this project inspires more creativity within the community, and encourage everyone to contribute to the improvement of this tool by submitting pull requests.
+
+---
+
+GitHub：[shader-graph](https://github.com/knoxHuang/cocos-creator-extensions/tree/main/extensions/shader-graph)
+
+---
 
 <img src="readme/效果图.png" width="800px">
 
@@ -129,4 +139,11 @@ npm run pack - Package into a zip file
 
 - Preview panel does not support dynamic preview
 
+### Development team
+
+- Devs: Knox、Youyou
+- Framework：VisualSJ
+- PM：AndyTian
+- UI/UX：派大星
+- Director：Jare
 

extensions/shader-graph/README.zh-CN.md

@@ -1,11 +1,18 @@
 # Shader Graph
 
-## 介绍
+## 背景
 
-该插件支持可视化编辑器着色器
+为了降低 Shader 编写的门槛以及拓展程序化生成的能力，鼓励美术/TA 直接在 Cocos Creator 而不是第三方 DCC 中生产材质，避免导入材质时的二次开发工作，我们提供了一个针对 Cocos Creator 的节点材质编辑器。
 
-<img src="readme/效果图.png" width="800px">
+该插件依赖 Cocos Creator 3.8.2 版本，并基于自研的开源 [Web UI 库中的 Graph 组件](https://github.com/itharbors/ui/tree/main/element/graph) 进行开发。
+
+为了促进开发者社区的合作和创新，我们以 MIT 协议开源该插件的全套源码，这意味着开发者可以自由使用、修改和分发这一工具。期待这一项目能激发社区更多的灵感和创造力，希望大家在完善这个工具的时候不要藏着掖着，多多给我们提 PR！
+
+### 源码
 
+GitHub：[shader-graph](https://github.com/knoxHuang/cocos-creator-extensions/tree/main/extensions/shader-graph)
+
+<img src="readme/效果图.png" width="800px">
 
 ### 基本结构
 
@@ -100,7 +107,7 @@
 
 #### 节点库
 
-详细内容可查看 [传送门](shader-node/README.md)
+详细内容可查看 [传送门](shader-node/README.zh-CN.md)
 
 ---
 
@@ -131,3 +138,10 @@ npm run pack - 打包成 zip 包
 
 - 预览面板不支持动态预览
 
+### 开发团队
+
+- Devs: Knox、Youyou
+- Framework：VisualSJ
+- PM：AndyTian
+- UI/UX：派大星
+- Director：Jare

extensions/shader-graph/shader-node/README.md

@@ -1,15 +1,15 @@
 ## Shader Node
 
-用于创建与解析 shader node
+Used for creating and parsing shader nodes.
 
 ---
 
-### 自动创建节点库
+### Automatic Node Library Generation
 
-节点库的代码是通过执行 **.scripts/generate.js** 对 **shader-templates** 内部定义的 **chunk 与 master** 进行解析，动态
-创建代码到 **assets/operation** 目录下。
+The code for the node library is parsed by executing **.scripts/generate.js** on the **chunks and masters** defined within 
+shader-templates, dynamically creating code in the **assets/operation** directory.
 
-**模版**
+**Template**
 - chunk
     - common
     - input_basic
@@ -24,7 +24,7 @@
 
 ---
 
-**生成后的节点**
+**Generated Nodes**
 - Input
     - Basic
         - Float
@@ -142,51 +142,51 @@
 
 ---
 
-## 如何定义节点类
+## How to define the node class
 
 ```typescript
-// 这路径需要根据你存放的路径进行修改
+// This path needs to be modified according to the path where you are storing it
 import { register } from '../../../../graph/register';
 import { ShaderNode } from '../../../base';
 import { slot } from '../../../utils';
 
 @register({
-    // 创建节点的菜单
+    // Menu for creating a node
     menu: 'Custom/Foo',
-    // 节点的名字
+    // The name of the node
     title: 'Foo',
-    // 节点的样式
+    // The style of the node
     style: {
         headerColor: '#ff1e00'
     },
-    // 是否是主节点（主节点不会被删除，只有一个主节点）
+    // Whether the node is a master node (master nodes are not deleted, there is only one master node)
     master: false,
 })
 export class Foo extends ShaderNode {
-    // 定义节点上的属性
-    // slot 与 prop 相近，都是定义节点上属性的信息
-    // 参数一[string]：名字
-    // 参数二[any]：默认值
-    // 参数三[string]：类型
-    // 参数四[string]：连接的类型
-    // 参数五[Object]：自定义对象
+    // Define properties on the node
+    // slot is similar to prop in that it defines information about the properties on the node.
+    // Parameter one [string]: name
+    // parameter two [any]: default value
+    // Parameter three [string]: type
+    // Parameter four [string]: type of connection
+    // Parameter five [Object]: custom object
     data = {
-        // 输入属性列表
+        // Input property list
         inputs: [
             slot('In', 0, 'float', 'vector'),
         ],
-        // 输出属性列表
+        // Output property list
         outputs: [
             slot('Out', 0, 'float', 'vector'),
         ],
-        // 属性列表
+        // List of attributes
         props: [
             prop('Prop', 99, 'float'),
         ],
     };
 
     /**
-     * 生成 effect 
+     * Generating an effect 
      */    
     generateCode() {
         const input0 = this.getInputValue(0);
@@ -199,18 +199,18 @@ export class Foo extends ShaderNode {
 }
 ```
 
-### 效果图：
+### Preview image
 
-菜单：
+Menu:
 
 <img src="../readme/自定义节点菜单.png" width="250px">
 
-节点：
+Node:
 
 <img src="../readme/自定义节点.png" width="250px">
 
 ---
 
-### 已知问题
+### Known issues
 
-- Boolean 变量目前暂不支持
+- Boolean variables are not currently supported