148 lines
4.0 KiB
Markdown
148 lines
4.0 KiB
Markdown
|
# Shader Graph
|
|||
|
|
|
|||
|
|
## 背景
|
|||
|
|
|
|||
|
|
为了降低 Shader 编写的门槛以及拓展程序化生成的能力，鼓励美术/TA 直接在 Cocos Creator 而不是第三方 DCC 中生产材质，避免导入材质时的二次开发工作，我们提供了一个针对 Cocos Creator 的节点材质编辑器。
|
|||
|
|
|
|||
|
|
该插件依赖 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">
|
|||
|
|
|
|||
|
|
### 基本结构
|
|||
|
|
|
|||
|
|
<img src="readme/整体结构.png" width="800px">
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 准备阶段
|
|||
|
|
|
|||
|
|
1. 下载 Cocos Creator 3.8.2 编辑器 与 shader-graph.zip 插件。
|
|||
|
|
2. 打开 Cocos Creator 3.8.2 编辑器，在主菜单中选择 **扩展/扩展管理器** 打开扩展面板。
|
|||
|
|
3. 点击 <img src="readme/导入扩展文件.png" width="200px">，选择 **shader-graph.zip** 扩展文件，进行导入。、
|
|||
|
|
4. 需重启编辑器（**目前 3.8.2 需重启编辑器（为了确保 **.shadergraph** 资源注册生效），后续 >= 3.8.3 版本会完善该流程，可无需重启**）
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 创建资源
|
|||
|
|
|
|||
|
|
1. 到 **Assets** 面板右键选择 **创建/Shader Graph** 菜单进行创建 **.shadergraph** 资源
|
|||
|
|
- Surface (表面着色器)
|
|||
|
|
- Unlit (无光照着色器)
|
|||
|
|
2. 双击资源，进入到编辑面板
|
|||
|
|
3. <img src="readme/创建后的资源.png" width="200px">
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 如何应用到项目中
|
|||
|
|
|
|||
|
|
1. 新建或者选中一个 Material 资源。
|
|||
|
|
2. 到属性检查器面板中找到 **Effect** 属性，然后点击选择 **.shadergraph** 资源同名的 effect。
|
|||
|
|
|
|||
|
|
<img src="readme/属性检查器选择effect.png" width="200px">
|
|||
|
|
|
|||
|
|
3. 在把 Material 赋值给 3D 节点上即可。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 面板内容介绍
|
|||
|
|
|
|||
|
|
初始面板：
|
|||
|
|
|
|||
|
|
<img src="readme/初始面板.png" width="800px">
|
|||
|
|
|
|||
|
|
#### 属性窗口
|
|||
|
|
|
|||
|
|
<img src="readme/创建属性窗口.png" width="300px">
|
|||
|
|
|
|||
|
|
1. 关闭窗口
|
|||
|
|
2. 创建属性入口
|
|||
|
|
|
|||
|
|
属性窗口可创建 8 种基础类型的属性节点分别是：
|
|||
|
|
|
|||
|
|
- Float
|
|||
|
|
- Boolean
|
|||
|
|
- Vector2
|
|||
|
|
- Vector3
|
|||
|
|
- Vector4
|
|||
|
|
- Color
|
|||
|
|
- Texture2D
|
|||
|
|
- TextureCube
|
|||
|
|
|
|||
|
|
#### 预览窗口
|
|||
|
|
|
|||
|
|
<img src="readme/预览窗口.png" width="250px">
|
|||
|
|
|
|||
|
|
1. 关闭窗口
|
|||
|
|
2. 切换灯光（如果是 Unlit 无效果）
|
|||
|
|
3. 强制刷新
|
|||
|
|
- 当遇到无法渲染或无法旋转模式可尝试刷新
|
|||
|
|
4. 按住鼠标左键滑动，可旋转模型
|
|||
|
|
5. 可切换内置或者自定义模型
|
|||
|
|
|
|||
|
|
#### 创建节点菜单
|
|||
|
|
|
|||
|
|
<img src="readme/创建节点菜单.png" width="400px">
|
|||
|
|
|
|||
|
|
1. 关闭窗口
|
|||
|
|
2. 输入需要创建的节点名
|
|||
|
|
3. 回车可以直接创建节点（创建节点的初始位置是鼠标所指向的位置）
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
使用普通节点：
|
|||
|
|
|
|||
|
|
<img src="readme/使用普通节点.png" width="800px">
|
|||
|
|
|
|||
|
|
使用属性节点：
|
|||
|
|
|
|||
|
|
<img src="readme/使用属性节点.png" width="800px">
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
#### 节点库
|
|||
|
|
|
|||
|
|
详细内容可查看 [传送门](shader-node/README.zh-CN.md)
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 快捷键
|
|||
|
|
|
|||
|
|
1. space - 打开创建节点菜单
|
|||
|
|
2. cmd+s/ctrl+s - 保存
|
|||
|
|
3. backspace/delete - 删除
|
|||
|
|
4. cmd+c/ctrl+c - 拷贝
|
|||
|
|
5. cmd+x/ctrl+x - 剪切
|
|||
|
|
6. cmd+v/ctrl+v - 粘贴
|
|||
|
|
7. cmd+d/ctrl+d - 复制
|
|||
|
|
8. cmd+z/ctrl+z - 撤销
|
|||
|
|
9. cmd+shift+z/ctrl+shift+z - 重做
|
|||
|
|
|
|||
|
|
----
|
|||
|
|
|
|||
|
|
### 命令行编译与发布
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
npm install - 初始化
|
|||
|
|
npm run build - 编译
|
|||
|
|
npm run pack - 打包成 zip 包
|
|||
|
|
// 如果要查看具体报错信息，可以在命令行后面加 --log 例如：npm run pack --log
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 已知问题
|
|||
|
|
|
|||
|
|
- 预览面板不支持动态预览
|
|||
|
|
|
|||
|
|
### 开发团队
|
|||
|
|
|
|||
|
|
- Devs: Knox、Youyou
|
|||
|
|
- Framework：VisualSJ
|
|||
|
|
- PM：AndyTian
|
|||
|
|
- UI/UX：派大星
|
|||
|
|
- Director：Jare
|