217 lines
4.0 KiB
Markdown
217 lines
4.0 KiB
Markdown
|
## Shader Node
|
||
|
|
||
|
用于创建与解析 shader node
|
||
|
|
||
|
---
|
||
|
|
||
|
### 自动创建节点库
|
||
|
|
||
|
节点库的代码是通过执行 **.scripts/generate.js** 对 **shader-templates** 内部定义的 **chunk 与 master** 进行解析,动态
|
||
|
创建代码到 **assets/operation** 目录下。
|
||
|
|
||
|
**模版**
|
||
|
- chunk
|
||
|
- common
|
||
|
- input_basic
|
||
|
- math
|
||
|
- noise
|
||
|
- range
|
||
|
- shape
|
||
|
- uv
|
||
|
- master
|
||
|
- SurfaceMasterNode
|
||
|
- UnlitMasterNode
|
||
|
|
||
|
---
|
||
|
|
||
|
**生成后的节点**
|
||
|
- Input
|
||
|
- Basic
|
||
|
- Float
|
||
|
- Boolean
|
||
|
- Slider
|
||
|
- Vector2
|
||
|
- Vector3
|
||
|
- Vector4
|
||
|
- Color
|
||
|
- Time
|
||
|
- Geometry
|
||
|
- NormalVector
|
||
|
- Position
|
||
|
- UV
|
||
|
- VertexColor
|
||
|
- ViewDirection
|
||
|
- Texture
|
||
|
- SimpleTexture2D
|
||
|
- Variable
|
||
|
- GetLocalVar
|
||
|
- RegisterLocalVar
|
||
|
- Math
|
||
|
- Advanced
|
||
|
- Absolute
|
||
|
- Exponential
|
||
|
- Length
|
||
|
- Log
|
||
|
- Module
|
||
|
- Negate
|
||
|
- Normalize
|
||
|
- Posterize
|
||
|
- ReciprocalSquare
|
||
|
- Reciprocal
|
||
|
- Basic
|
||
|
- Add
|
||
|
- Divide
|
||
|
- Multiply
|
||
|
- Power
|
||
|
- Square
|
||
|
- Substract
|
||
|
- Derivative
|
||
|
- DDX
|
||
|
- DDXY
|
||
|
- DDY
|
||
|
- Interpolation
|
||
|
- InverseLerp
|
||
|
- Lerp
|
||
|
- Smoothstep
|
||
|
- Range
|
||
|
- Clamp
|
||
|
- Fraction
|
||
|
- Max
|
||
|
- Min
|
||
|
- OneMinus
|
||
|
- RandomRange
|
||
|
- Remap
|
||
|
- Saturate
|
||
|
- Round
|
||
|
- Ceil
|
||
|
- Floor
|
||
|
- Round
|
||
|
- Sign
|
||
|
- Step
|
||
|
- Truncate
|
||
|
- Trigonometry
|
||
|
- Arccosine
|
||
|
- Arcsine
|
||
|
- Arctangent
|
||
|
- Arctangent2
|
||
|
- Cosine
|
||
|
- DegressToRadians
|
||
|
- HyperbolicCosine
|
||
|
- HyperbolicSine
|
||
|
- Hyperbolic
|
||
|
- RadiansToDegrees
|
||
|
- Sine
|
||
|
- Tangent
|
||
|
- Vector
|
||
|
- CrossProduct
|
||
|
- Distance
|
||
|
- DotProduct
|
||
|
- Fresnel
|
||
|
- Projection
|
||
|
- Reflection
|
||
|
- SphereMask
|
||
|
- Wave
|
||
|
- NoiseSineWave
|
||
|
- SawtoothWave
|
||
|
- SquareWave
|
||
|
- TriangleWave
|
||
|
- Procedural
|
||
|
- Noise
|
||
|
- GradientNoise
|
||
|
- SimpleNoise
|
||
|
- Shape
|
||
|
- Ellipse
|
||
|
- Rectangle
|
||
|
- RoundRectangle
|
||
|
- Uv
|
||
|
- PolarCoordinates
|
||
|
- RotateCoordinates
|
||
|
- TillingAndOffset
|
||
|
- Channel
|
||
|
- Combine
|
||
|
- Split
|
||
|
- Logic
|
||
|
- AI
|
||
|
- And
|
||
|
- Any
|
||
|
- Branch
|
||
|
- Comparison
|
||
|
- IsNan
|
||
|
- Not
|
||
|
- Or
|
||
|
|
||
|
---
|
||
|
|
||
|
## 如何定义节点类
|
||
|
|
||
|
```typescript
|
||
|
// 这路径需要根据你存放的路径进行修改
|
||
|
import { register } from '../../../../graph/register';
|
||
|
import { ShaderNode } from '../../../base';
|
||
|
import { slot } from '../../../utils';
|
||
|
|
||
|
@register({
|
||
|
// 创建节点的菜单
|
||
|
menu: 'Custom/Foo',
|
||
|
// 节点的名字
|
||
|
title: 'Foo',
|
||
|
// 节点的样式
|
||
|
style: {
|
||
|
headerColor: '#ff1e00'
|
||
|
},
|
||
|
// 是否是主节点(主节点不会被删除,只有一个主节点)
|
||
|
master: false,
|
||
|
})
|
||
|
export class Foo extends ShaderNode {
|
||
|
// 定义节点上的属性
|
||
|
// slot 与 prop 相近,都是定义节点上属性的信息
|
||
|
// 参数一[string]:名字
|
||
|
// 参数二[any]:默认值
|
||
|
// 参数三[string]:类型
|
||
|
// 参数四[string]:连接的类型
|
||
|
// 参数五[Object]:自定义对象
|
||
|
data = {
|
||
|
// 输入属性列表
|
||
|
inputs: [
|
||
|
slot('In', 0, 'float', 'vector'),
|
||
|
],
|
||
|
// 输出属性列表
|
||
|
outputs: [
|
||
|
slot('Out', 0, 'float', 'vector'),
|
||
|
],
|
||
|
// 属性列表
|
||
|
props: [
|
||
|
prop('Prop', 99, 'float'),
|
||
|
],
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* 生成 effect
|
||
|
*/
|
||
|
generateCode() {
|
||
|
const input0 = this.getInputValue(0);
|
||
|
const output0 = this.getOutputVarDefine(0);
|
||
|
|
||
|
return `
|
||
|
${output0} = ${input0};
|
||
|
`;
|
||
|
}
|
||
|
}
|
||
|
```
|
||
|
|
||
|
### 效果图:
|
||
|
|
||
|
菜单:
|
||
|
|
||
|
<img src="../readme/自定义节点菜单.png" width="250px">
|
||
|
|
||
|
节点:
|
||
|
|
||
|
<img src="../readme/自定义节点.png" width="250px">
|
||
|
|
||
|
---
|
||
|
|
||
|
### 已知问题
|
||
|
|
||
|
- Boolean 变量目前暂不支持
|