ShaderWeaver Tutorial - Introduction
Disclaimer: This series is a summary of network transportation, mostly in English, please forgive me if the translation is not good. If you want to view the original video tutorial, you can go to YouTube. The author of the plug-in is a Chinese, but there is currently no Chinese-related information. Or check domestic Youku albums. Attached Youku video address
Attached to the official website link: http://www.shaderweaver.com/index.html
Official website information translation
front page
Shader Weaver is a node-based shader creation tool for Unity 2D, giving you artistic freedom to enhance your Sprites/UI in an intuitive visual way. Unique nodes and workflows allow you to easily create impressive 2D effects, saving you a lot of time.
characteristic
example of growth
- A set of sample effects, including shaders and textures, to learn and use freely.
Intuitive interface
- Clear and intuitive user interface.
mask texture creation
- Draw a mask to divide the area of each sub-effect.
UV Distortion
- A visual way to warp uv coordinates.
UV remapping
- A unique way to make effects along the way and around objects.
simple operation
- Simple to use, like you're playing with some gadgets.
preview
- Good width/height corresponding preview.
hotkey
- Comfortable hotkeys speed up editing and drawing.
Undo redo
- Full support for undo/redo on nodes, numbers and textures
Play mode
- Edit and update in play mode.
copy and paste
- Support for copying and pasting to reuse nodes from other Shader Weaver effects.
depth
- Depth sort.
visual mode
- Look at the texture's own RGB channels and choose what to look at by setting up layers.
Synchronize
- No extra files are synced through the version control system. All Shader Weaver data is stored in .shader files.
node
There are currently 4 types of nodes in Shader Weaver.
The blue node output color. Orange nodes output UVs. Red nodes output alpha.
The green nodes are the nodes used for blending.
The UV node and the alpha node behave independently in the space effect, if you want them to follow the node like the color node, just set the same position/rotation/scale/movement...
root
This is the main node. Assign base textures/sprites here.
The picture
shows the texture. The depths are in display order, with the highest depths displayed on top.
Color
Solid color .
Refraction
Creates a refraction effect. There is a background pattern on the back. Use child UV nodes to distort the background. Here are some example effects, frosted glass, water droplets. All shader types are supported.
Reflection
Creates a reflection effect. There is a background graphic behind it. Use child UV nodes to distort the background. Here are some example effects, water, wet floors.
For Sprite, assign a material and add -> Component -> Shader Weaver -> Sprite Reflection. For Default/UI/Text, manually set the reflection line/reflection height of the material.
The UVs
use the rgba channel of this node's texture to reposition the parent's uv coordinates. Mainly used for deformation. Here are some example effects, buoys, flowing water.
Remap
Provides UVs to parent nodes. The drag mode is to place the parent effect on one side of the shape.
Line mode is to make the parent effect follow the path you create. In the texture we made,
Red provided the horizontal encoding for the parent node and Green provided the vertical encoding.
Asix x: R[0,1] = U[0,1]
Asix y: G[0,1] = V[0,1]
If you want to use custum texture for remapping, just press "+" button Remap nodes and assign textures.
Blur Blurs
the parent node.
Retro
Pixelated parent node.
Alpha performs detailed aplha
animations for the parent node using one of the rgba channels in this node's "texture". It provides (1) a multiplier for the color nodes that use it (2) the final graph. multiplier = textureSampledColor.channel + start + spd * spdFactor (sandwiched in [min, max])
mask
Draws a mask to mask the sub-effect. Child node effects of the mask node will only appear in the mask area. If you want to use a custum grayscale texture for masking, just press the "+" button on the mask node and assign the texture. Mixer
Performs animation blending for child nodes using one of the rgba channels in this node's Texture.
It produces a value. value = textureSampledColor.channel + start + spd * spdFactor (clamped in [min, max]) Right click on the left port of the blend node, then we can set the blend area in [min, max]. The mix zone controls how child nodes linked to this port are mixed.
common problem
Open Window-ShaderWeaver and
ask: How to support sprite animation?
Add -> Components -> Shader Weaver -> Sprite Animation to Sprite Render.
Q: How do I use a Texture Sprite Sheet as a node?
Open the node editing window and press the "+" button in the lower right corner. Click the "Animation Sheet" toggle. Set "Tile X", "Tile Y"... If you want to draw your character multiple times with a single texture sprite sheet, you need to use the Shader Weaver's loop instead of using the texture's import settings - Warp Mode.
Q: How do I enable HRD colors?
1. Edit -> Project Settings -> Quality set Anti-Aliasing to Disable
2. In the camera's inspector, enable HDR
3. Set the color properties in the Shader Weave to HDR by right-clicking
Q: How do I remove seams on the border?
In the texture settings, turn off "Generate Mipmaps" or set the "Filter Mode" to "Points".
Q: Why does the impact update take time?
During an update, Shader Weaver updates the shader and applies any changes to the texture. The texture processing stage takes time.
Q: How do I set visible layers in the mask window?
Hold down the Ctrl key and the layer mask popup is in the upper left corner.
Q: How do I edit node properties in the Material Inspector?
Create parameters and use them with nodes.
Q: Unity has been downloading old versions of Shader Weaver, what exactly does it give?
Make sure you are using the version of Unity it supports. If Unity is out of date, it will download the latest compatible version instead of the latest version. For version information, please check the changelog.
Q: Can I sell shaders created by Shader Weaver on the Asset Store?
Yes! If your clients want to open and edit them, it would be nice to add a note stating that the shader is compatible with Shader Weaver.
Q: Will my shaders be optimized enough for mobile?
Unless you've made a super expensive shader, your shader will most likely work, but Shader Weaver is primarily for 2D visual quality, so most things are done on a per-pixel level, not each vertex. Most of the time, they should work on mobile platforms.
Q: Sometimes there is an error when compiling on mac, why?
Unity has its own built-in variables, so be careful with parameter naming. It is strongly recommended to name parameters starting with '_'.
Official website document translation
quick start
(1) Open the editor: Window -> Shader Weaver
(2) Place the node: Drag the node from the left dock to the main canvas
(3) Connect the node: Data flows from left to right, drag the wire port from the node to Create a connection.
(4) Edit: Edit (assign textures, paint masks, create remapping textures...)
(5) Save: Click the save button on the top dock and the result will appear in the top right corner.
space
Effect Space: The entire effect space, shown as a yellow square wireframe in the edit window.
Node space: The texture coordinate space of the node
Screen space: The entire screen.
Refraction and Reflection nodes are in screen space.
For UIText, the root node is in font space.
For other nodes, the effect space is screen space.
hotkey
[All windows]
Drag canvas: Alt + left mouse button
Scale canvas: mouse wheel
Open project: Alt + O
Save project: Alt + S (before saving)
Update project: Alt + S (after saving)
Copy: Ctrl + C
Paste : Ctrl + V
Undo : Ctrl + Z
Redo: Ctrl + Y
Tile background toggle:
[Main window] Right click on it
Disconnect : Alt/Ctrl + click on node port (both end and end)
Delete selection: Delete key
[Edit window] Along x/y axis: Shift + up, down, left and right
[ Mask Window] Brush/Eraser Size: '[' and ']'
Opacity: '-' and '='
Tolerance: '[' and ']'
Invert: Ctrl+I
[Remap Window - Drag]
Bias : '[' and ']'
delete all: Delete key
[remap window-line]
size: '[' and ']'
delete all: Delete key
Texture import settings
Using the following settings in Shader Weaver will automatically set to texture.
Texture: Texture
Read/Write Enable -> true read control
Generate Mip Map -> false Automatically generate MipMap
sprites: Sprites
Mesh Type -> Full Rect mesh type