ShaderForge, Masanori Takano, ShaderForge, Unity,

In this article, I introduce how to make a Shader to add up-and-down motion on the water surface by Shaderforge in Unity.

上下に動く波の完成イメージ

The completed image – the waves moving up and down.

We make an animation that the water surface moves up and down slowly.

Confirm sample assets with WebEditor

Confirm sample assets with WebEditor
Launch the WebEditor

* If you  register STYLY, you can check the sample assets created with this TIPS with WebEditor.
If you do not register an account, please register again and click this button again.

Register for account from here
Click here

 

Samples

You can taste a sample space in STYLY GALLERY.
Wave03_Sample

You can download the Unity project in this article.
Wave_Sample

Make a terrain by “Terrain”

Add a Terrain

Make a shape with a depression at the centre to store some water by Terrain.

You can create a Terrain by selecting GameObject > 3D object > Terrain.

Terrainの作成

Create a Terrain

 

Change the size of Terrain

Adjust the size as the default is too large.

Click the cog icon on the right to open the window for the setting.

Adjust the size by Terrain Width and Terrain Width under the Resolution section.

Terrainのサイズを調整

Adjust the size of Terrain

In this example, I set both to 30.

 

Create a terrain

Once you set the shape and the size of the brush and the Opacity value, let’s create a terrain steadily.

ブラシの調整

Adjust the brush

 

Make a terrain so that the surrounding area rises.

I made it like a basin.

地形の作成

Create a terrain.

The terrain is ready now.

Create a Shader for water

Place a Plane to apply Material to

Place a Plane at the centre of the depressed ground to express water.

I adjusted it to a bit larger not to look too shallow when water moves up and down.

Planeの配置

Place a Plane.

 

The setting for Shaderforge

Open Shderforge and select New Shader > Lit(PBR).

Lit(PBR)を選ぶ

Select Lit(PBR).

 

Set Blend Mode to Alpha Blend to adjust transparency.

Set Face Culling to Double Sided to make the backside visible.

Check the box for OpenGL ES3.0.

シェーダーの設定

The setting for the Shader

 

Change the Shader of the Material

Assign a Material to the Plane and change the shader of the Material to the one you made in Shaderforge.

マテリアルのシェーダーを変更

Change the shader of the Material

 

Use Normalmap for water surface

Express the water surface by Normalmap.

水面のNormalmap

Normalmap for water surface

In this example, use the Normalmap as shown above.

 

Assign the Normalmap to “Normalmap” in the Inspector window.

Normalmapを適用する

Apply the Normalmap

 

As the waves are too large with the default setting, adjust Tiling to make them finer.

Adjust X and Y of Tiling to set the number of the tiles.

Tilingを調整

Adjust Tiling.

Set both X and Y to 8 in this example.

 

Add a motion to the Plane by Vertex Offset

Add a back-and-forth motion by Sin.

Adjust the speed by “Time” and the range of the motion by “Remap”.

Vertex Offsetにつなぐ

Connect it to Vertex Offset

The motion will be activated once you connect it to Vertex Offset.

 

Enable the Inspector to adjust the range of the motion.

動きの幅を調整できるようにする

Make the range of the motion adjustable

Add a Value node called “WaveMove” to adjust the range of the motion.

 

Make it move up and down

In this state, the water moves in the all directions, X, Y and Z. So make it move only in the Y direction.

Add a Value node with the value set to zero to stop the motion along X and Z direction.

Connect to “G” of the Append node to restrict the motion to the Y direction.

動く方向を決める

Set the direction of the motion.

 

The setting for the colour of the water

Make two Colour nodes and combine them by a Lerp node.

Connect a Normal Dir and a Value node to a Fresnel, and then, connect the Fresnel to the Lerp.

水の色の設定

The setting for the colour of the water

You can make the colour responsive to viewing angle by Fresnel.

The more perpendicular your viewing angle is against the water surface, the greener it looks.

Likewise, when you look at the water surface with a shallower angle, the colour gets closer to sky blue (=Color2).

Fresnelの効果

The effect of Fresnel

 

The setting for transparency

Adjust transparency to make the water more realistic.

Add a Slider and connect it to Opacity.

I set the default value to 0.7.

透明度の設定

The setting of transparency

This completes the water surface with an up-and-down motion.

上下に動く波の完成イメージ

The completed image – the waves with an up-and-down motion.

 

 

In this article, I introduced how to make the water surface with an up-and-down motion by Shaderforge in Unity.

I wonder it would be quicker to make this kind of motion by key-frame animation. However, you can find a suitable use for this approach as you can easily adjust it by Inspector window

 

How to upload an Asset from Unity to STYLY:
Read the article

Masanori Takano

牧場厩務員→家具職人→大工を経て現在はフリーランスの3DCGアーティスト

Share this article

Shares
Facebook Twitter Google+ Pinterest hatebu

About STYLY

STYLY is a cloud-based service for creating high quality,beautiful VR spaces that doesn’t require any coding. By using STYLY, creators can express their imaginations indefinitely and build a variety of virtual spaces. Through these spaces, we can share experiences that are unachievable in the real world.