This article has participated in the Denver Nuggets Creators Camp 3 “More Productive writing” track, see details: Digg project | creators Camp 3 ongoing, “write” personal impact.

preface

If you don’t have the basic configuration for your project, please check out my blog post on How to get started with ShaderGraph in Unity. You can follow the steps to complete the configuration and also learn the basic operation process. Experienced children’s shoes can directly jump to the last step, according to the picture can be built.

First, effect display

Old rule, directly on the renderings:

1.1 Simulated Sea surface

1.2 Night Sea

1.3 Calm and calm

1.4 Sparkling

Before Shader Graph: I rely on 😱! That’s kind of cool, isn’t it? After learning Shader Graph: I go to 😒! Is this it? Don’t you just have hands?

PS: The four effects are achieved by using a Shader, and there are parameter Settings at the end of the article. Be sure to adjust the parameters after you finish, maybe you can adjust it to a better effect

Second, principle introduction

Through two different speed, different direction of vertex offset, to achieve the effect of water wave. The two normal maps are then fused. Main nodes:Positon.Tiling And Offset.NormalStrength.NormalBlend: Then through the color, surface gloss and other attributes adjustment to complete the sea effect.

Third, achieve the effect

3.1 Preparations

Right-click in the Project palette -> Create -> Shader -> PBRGraph (I’ll call it “WaterPBRGraph”) and double-click to open the editor palette:

The preparations are complete. The overall implementation steps are divided into three parts. 1. Color control, 2. Normals, 3. Implement the following one by one:

3.2 Color

Create twoColorThe Color nodes (set to public properties, named “MainColor” and “Color”, respectively) are then createdLeroCalculates the difference between the two colors and createsFresnel EffectFresnel node is used as the difference, and the connection relation is shown as follows:

3.3 Surface Gloss

To create aVercotr1Node and set it to a public property named “Smoothess”. Connect it to the master node’s Smoothess:

The preview image is as follows:

3.4 The normal part

  1. Restructuring the vertices

We need to offset the vertices of the X and Z axes of the model to simulate the fluctuation of the water surface, so we need to pass thePositionnodesSplitBreak it down and use itCombineNodes are recombined:PS:(X,Y,Z,W) corresponds to (R,G,B,A).

  1. Setting dynamic Offset

throughTimeNodes andVecror2The product of the nodes (X=-1,Y=0)MultiplyGet a dynamic Vector2, since we need to control the speed from the outside, so will the frontMultiplyNode results, and thenVector1The nodes are multiplied (declare it as a public property, name it “Speed”, default value 1), and finally wire the result toTiling And Offset, as shown below:

  1. Copy dynamic migration

As we said in the introduction, we need two different dynamic offsets. So, select all the nodes created in step 2, and then copy them with shortcut keys C and V. thenVecror2Change the node input to (X=1,Y=0.3)

  1. Vertex offset connection

Split the calculated vertices in step 1CombineThe output is connected to twoTiling And OffsetUV on:

  1. Control the Tiling

To create aVector1The node (declared as a public property, named “Tiling”, default value 0) creates twoMultiplyThe multiplication node, the two Tiling controls are connected as follows:

  1. Create a map

We use one map for two moves, so create oneTexture 2D Asset(Declare it a public property and name it “MainTexture”), twoSample Texture 2D(change Type to Normal), then connect them to the calculated UVs:

  1. Control normal strength

createVector1The node (declared as a public property, named “Strength”, defaults to 0) creates twoNormal StrenghtNormal strength node:

  1. Fusion normals

createNormal BlendThe normal fusion node will be twoNormal StrenghtNodes are fused and connected to the primary node “Normal” :

At this point, all the implementation steps are complete, so remember to Save “Save Asset”.

Four, use examples

4.1 Application Examples

Create the Shader using the Shader you just saved, then create a “Panel” to apply the Shader and adjust its parameters as follows (normal map at the end) to see the effect:

4.2 Simulated Sea surface

To simulate the sea effect I copied N “panels” and positioned the camera to view the sea (tip: Select the camera in Hierarchy and press “Ctrl+Shitft+F” so that the Game view matches the Scene view)

4.3 Parameter Sharing

  1. Day and night seas:
    • MainColor (0186255, 0)
    • Color: white (0,0,0)
    • Smoothess: 1.2
    • Speed: 0.5
    • Tilling: 0.08
    • Strength: 0.6

PS: in addition to the difference in color between day and night, there is also a difference in parallel light. For day, you need to copy a parallel light and rotate it for debugging to achieve the effect shown in figure 1 at the beginning

  1. sparkling
    • MainColor (0186255, 0)
    • Color:(255,255,255,0)
    • Smoothess: 1.2
    • Speed: 0.5
    • Tilling: 0.08
    • Strength：-4.0

  1. In a calm
    • MainColor (0186255, 0)
    • Color: (0,0,0,0)
    • Smoothess: 0.65
    • Speed: 0.6
    • Tilling: 0.08
    • Strength: 0.1

5. Complete illustration

Normal map used to share (found online)