[Unity makes wheels] Unity ShaderGraph usage tutorial and various special effects cases (continuously updated)

ShaderGraph official case: https://github.com/UnityTechnologies/ShaderGraph_ExampleLibrary

I. Introduction

Focus on not getting lost, and continue to output dry articles.

Hi, everyone, I'm Xiang Yu. I am playing ShaderGraph recently, and decided to record all the effects of my own experiments in this blog, with a complete high-definition connection dynamic diagram, hoping to inspire students who want to learn ShaderGraph. I will continue to update some new ShaderGraph when I find some new ones.

Here I will not explain the basic use of ShaderGraph. Students who want to know more can read this article:
Introduction to Shader Graph

See the end of the article for the source code of the project.

Two, ShaderGraph

1. What is ShaderGraph

ShaderGraph is a visual tool in Unity for creating and editing graph shaders. Its significance is to simplify the process of writing complex shaders, reduce the dependence on specific programming languages, and make it easier for artists and designers to create various artistic effects. Using ShaderGraph, you can set shader properties through a graphical interface, including color, texture, lighting, etc., and display the results instantly in the window preview, so that you can quickly iterate and adjust shaders.

To use ShaderGraph, you need to install Unity 2018.1 or above and add the ShaderGraph plug-in. Once the ShaderGraph panel is open, shaders can be created by dragging and dropping nodes and connecting them. ShaderGraph's nodes include input and output, mathematical operations, textures, lighting, special effects, etc. Users can select corresponding nodes to combine into their own shaders according to their needs.

2. When using ShaderGraph, you need to pay attention to the following points:

1. The use of ShaderGraph requires a certain degree of graphics knowledge, such as understanding the rendering process of vertices and fragment shaders, how to combine Unity's material editor, etc.

2. When the graphics effect is very complex, ShaderGraph may not be able to meet the requirements, and handwritten code is required.

3. The shaders created by ShaderGraph may have an impact on performance and need to be evaluated and optimized in actual projects.

4. Although ShaderGraph simplifies the process of writing shaders, it still requires certain programming skills for some advanced special effects.

3. Advantages

Compared with traditional handwritten shaders, ShaderGraph has the following advantages:

1. Visual editing. ShaderGraph uses a visual editing method to combine shaders by dragging and dropping node connections, avoiding cumbersome handwritten codes, and making the structure of shaders clearer and easier to understand.

2. Fewer mistakes. ShaderGraph adopts a strongly typed node update mechanism, which can avoid errors that often occur in traditional handwritten shaders, such as typos, syntax errors, and type errors.

3. Better maintainability. Because ShaderGraph uses a visual editing method, shaders are easier to understand and maintain. In addition, ShaderGraph also supports version control, which makes it easy to share and synchronize shaders with other team members.

4. Faster iterations. ShaderGraph allows users to see the effect of changed shaders in real-time in the window preview, which can iterate and debug shaders faster and improve development efficiency.

5. Easier to expand. ShaderGraph provides a large number of prefabricated nodes, including math, texture, color, lighting and other nodes, and supports custom nodes, so developers can expand and add nodes by themselves.

To sum up, ShaderGraph has the advantages of visualization, easy understanding and maintenance, fast iteration, and easy expansion. It is especially suitable for designers and artists who do not want to learn to write complex shader codes. At the same time, although programming skills are still required for more advanced shading effects, ShaderGraph can help developers achieve preliminary effects more quickly, and the programming skills required to achieve complex shading effects can be taken care of by technical personnel.

4. Project

In fact, I have used and shared ShaderGrap before, but I haven't organized it systematically. If you need it, you can go and see the previous one. Here I post the link address:

The character moves behind the tree without being blocked

Shader Graph realizes the portal effect

Unity implements a scratch effect

3. Example effect

edge glow

Main node: FresnelEffect,
principle: Fresnel Effect, Fresnel effect, according to the viewing angle, different reflectivity will be produced to affect the surface effect. When you get closer, more light will be reflected. The Fresnel Effect node approximates this by computing the angle between the surface normal and the view direction. The larger the angle, the larger the return value. This effect is often used to achieve rim lighting, which is common in many art styles

Advanced: Fresnel rim light effect with direction

cut out

Main nodes: Position, AlphaClip
Principle: If the value of AlphaClip is greater than the value of Alpha, it will not be displayed
Note: Be sure to adjust the Alpha parameter of the PBR Master panel, otherwise the effect will not be displayed

Advanced cropping with edge color

Advanced: Add clipping edge light on the basis of clipping
First use Smoothstep to make an edge gradient
Smoothstep: If the value of the input In is between the values ​​​​of the input Edge1 and Edge2, it returns a smooth Hermite interpolation between 0 and 1 result. If the value of the input In is less than the value of the input Step1, it returns 0; if it is greater than the value of the input Step2, it returns 1

to dissolve

The main node SimpleNoise
Note: Be sure to adjust the Alpha parameter of the PBR Master panel, otherwise the effect will not be displayed

Advanced dissolve with edge color

Dissolve the edge and add luminescence. The principle is to make two Steps to the Noise noise, then subtract them, multiply them by a color, and connect them to the Emission luminescence node.

cartoon shadow

Main node NormalVector, DotProduct, SampleGradient
Principle: Use Sample Gradient to set the color of several shadow color blocks

water ripple

Main node TillingAndOffset, Lerp
principle: use the Offset of the Tilling And Offset node to control the UV offset of the water pattern, and then use Lerp to make a linear difference between the water pattern and the main texture

snow effect

The principle of the main node NomalVector and DotProduct
: use an upward Vector3 and the model's Normal Vertor (normal vector) dot product to get a scalar, indicating the angle between the model normal vector and the vertical vector (similarity in direction), and then The white part to be displayed is obtained by Step filtering, and the white part to be displayed is multiplied by a noise and then input to the Master's Emission luminous slot.

Stainless steel effect, ice crystal effect

The principle of the main nodes ViewDirection., TillingAndOffset, SimpleNoise
: the movement of the View Direction perspective triggers the movement of the Tilling And Offset node texture, resulting in the effect. Note that View Direction uses Tangent tangent space. This effect can also be used for ice crystal effects.

UV dithering

Main nodes: UV, Simple Noise, Split
principle, use Split to separate UV into x and y categories, make a noise jitter for x category, and finally merge with y to apply to the UV of the main texture.
Achieve a flickering effect similar to an old TV screen

Wave effect on the water surface

Main nodes: Gradient Noise, Position
Principle: Use Gradient Noise random noise, and then pass a Normal Vector node to represent the normal vector perpendicular to the object, and then perform a superposition on Position.
Note that the Space of Normal Vector and Position both select Object space

red flag fluttering

Main nodes: Simple Noise, UV, Position
Principle: Through the UV movement of the noise, a dynamic moving noise is formed, which acts on the Position. In order to let the root of the flag, the x component of a UV is used to limit the noise at the root

mosaic

Main nodes: UV, Posterize
Principle: The function of Posterize is color separation

No texture water polo

Main nodes: UV, Ellipse, Step
Principle: Construct a vertically gradient UV through the y direction of the UV, as the Step edge of the noise, forming a wave, and finally difference two colors, and then use the shape to cut.

Fire without textures

Main nodes: Voronoi, Tiling And Offset, Blend
Principle: Through the fusion of two Voronoi, a shape similar to a flame burning upwards is obtained, and then two circular areas are created by UV and a Vector 2 Distance, which are used as the inner and outer areas of the flame respectively area, multiplied by the flame shape, and finally multiplied by the color.

no texture swirl

Main nodes: Twirl, Voronoi
Principle: Use Twirl to generate a swirl shape to Voronoi.
Can be used to achieve the effect of the portal

Lightning without textures

Main nodes: Simple Noise, Rectangle
Principle: After the noise passes through the Rectangle, it can form a shape similar to lightning.
The noise of a UV moving downward and the noise of a UV moving upward are added together, and then pass through the Rectangle to form a dynamic lightning effect.

holographic effect

Main nodes: Position, Fraction, Time, Fresnel Effect
Principle: Obtain the y component of Position through Fraction to obtain a fringe effect, then obtain a scanning effect through UV movement, and finally superimpose with the Fresnel effect.

water ripple effect

Main nodes: UV, Sine
Principle: Use UV and Sine to construct an effect that the center of the circle spreads outward, and then act on the UV of the texture.

Gaussian blur

See this article for specific implementation: Unity ShaderGraph realizes the Gaussian blur effect of pictures

Self-luminous

1. Let's first look at the self-illumination effect under PBR ShaderGraph (Lit ShaderGraph).

Use the self-illumination texture, input it to Emmision, and have the self-illumination effect:

2. Self-illumination in Unlit ShaderGraph

Particle system dissolve effect

For specific implementation, please refer to my article: Unity ShaderGraph Dissolving Effect Applied to Particle System

Object close to local dissolution

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
/// <summary>
/// 脚本挂在到 需要溶解的物体上
/// </summary>
public class Main : MonoBehaviour
{
    
    

    /// <summary>
    /// 材质球
    /// </summary>
    public Material mat;
/// <summary>
/// 要靠近的物体
/// </summary>
    public Transform m_targetObj;
    void Start()
    {
    
    
        
    }

    
    void Update()
    {
    
    
        mat.SetVector("Vector3_B7D1FB9C",m_targetObj.position);
    }
}

running result

Objects close to the local display

And the opposite effect to the above, just adjust the following places and

the running effect is as follows

2D stroke effect

See this article for specific implementation: Unity ShaderGraph 2D Stroke Effect, Irregular Stroke Effect

bullet trailing effect

For the specific implementation, please refer to this article: Unity uses ShaderGraph with the particle system to make bullet trail effects

Ice cube effect, a frozen chicken

Project address: https://gitcode.net/linxinfa/unityurpiceeffect

effect

bend the world

The bending here is only a visual effect and does not affect physical objects such as collision boxes.

black hole absorption effect

energy shield

laser beam

pipeline liquid flow

water bottle liquid

The script is mounted on the object using the material

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Wobble : MonoBehaviour
{
    
    
    Renderer rend;
    Vector3 lastPos;
    Vector3 velocity;
    Vector3 lastRot;
    Vector3 angularVelocity;
    public float MaxWobble = 0.03f;
    public float WobbleSpeed = 1f;
    public float Recovery = 1f;
    public float wobbleAmountX;
    public float wobbleAmountZ;
    float wobbleAmountToAddX;
    float wobbleAmountToAddZ;
    float pulse;
    float time = 0.5f;

    // Use this for initialization
    void Start()
    {
    
    
        rend = GetComponent<Renderer>();
    }
    private void Update()
    {
    
    
        time += Time.deltaTime;
        // 随着时间的推移减少抖动
        wobbleAmountToAddX = Mathf.Lerp(wobbleAmountToAddX, 0, Time.deltaTime * (Recovery));
        wobbleAmountToAddZ = Mathf.Lerp(wobbleAmountToAddZ, 0, Time.deltaTime * (Recovery));

        // 做一个减小摆动的正弦波
        pulse = 2 * Mathf.PI * WobbleSpeed;
        wobbleAmountX = wobbleAmountToAddX * Mathf.Sin(pulse * time);
        wobbleAmountZ = wobbleAmountToAddZ * Mathf.Sin(pulse * time);

        // 修改着色器参数
        rend.material.SetFloat("_WobbleX", wobbleAmountX);
        rend.material.SetFloat("_WobbleZ", wobbleAmountZ);

        // 速率
        velocity = (lastPos - transform.position) / Time.deltaTime;
        angularVelocity = transform.rotation.eulerAngles - lastRot;


        // 摆动
        wobbleAmountToAddX += Mathf.Clamp((velocity.x + (angularVelocity.z * 0.2f)) * MaxWobble, -MaxWobble, MaxWobble);
        wobbleAmountToAddZ += Mathf.Clamp((velocity.z + (angularVelocity.x * 0.2f)) * MaxWobble, -MaxWobble, MaxWobble);

        // 保持最后的位置
        lastPos = transform.position;
        lastRot = transform.rotation.eulerAngles;
    }
}

star

Use the Nefer effect to achieve edge glow, and then use time to control the offset of the noise node, and there will be a feeling similar to the twinkling of stars.

Then the most important thing is to do post-processing settings.
First, you need to install the PostProcessing package
, then you need to set up the camera
, and then right-click on Volume-Global Volume in the Hierarchy panel.
There will be a Global Volume object. First, set the Profule on the Volume component, click New, and
then Click AddOverride, add Tonemapping and Bloom,
set Intensity and Tint on Bloom, adjust the number and color,

to be continued

source code

I will sort it out and post it when I have time later
https://gitee.com/qimingzhihaonan/shader-graph

reference

【文章】：https://blog.csdn.net/m0_46378049/article/details/115000628
【文章】：https://blog.csdn.net/linxinfa/article/details/108049048

end

Well, I am Xiang Yu, https://xiangyu.blog.csdn.net/

A developer who worked silently in a small company, out of interest, began to study unity by himself. Recently, I created a new column [You Ask Me Answer], mainly to collect your questions. Sometimes a question may not be clear in a few words, and I will answer it in the form of an article. Although I may not necessarily know some problems, I will check the information of various parties and try to give the best advice. I hope to help more people who want to learn programming. Let's encourage each other~