How to create ‘Domain Warping’ with Unity

Summary

I explain how to create an effect by using the method called ‘Domain Warping’.
ドメインワーピング表現

The ‘Domain Warping’ effect

View the sample asset by WebEditor

View the sample asset by WebEditorLaunch the WebEditor

※If you have your STYLY account, you can view the sample asset created in this article by WebEditor.
If you don’t, create a new STYLY account and then press the button above.

You can create a new STYLY account >>
Click here

 

Samples

The sample project in GitHub:

https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/DomainWarpingShader_Sample

 

The sample VR space in STYLY Gallery

I published a sample VR space that has the boards with the domain-warping effect applied.

http://gallery.styly.cc/r-ngtm/fddede56-ec09-11e8-b34d-4783bb2170d0

 

What is ‘Domain Warping’?

‘Domain Warping’ is a way to render something like clouds or water by computing a certain type of noise, which is called fbm(Fractional Brownian motion).

ドメインワーピング

Domain warping

 

ドメインワーピング

Domain warping

 

 

How ‘Domain Warping’ works

I explain how domain warping generates a pattern.

 

Calculate the fbm associated with the pixel coordinate p

A cloud-like pattern is generated by calculating the fbm associated with the pixel coordinate p.

fbm(p)

fbm(p)

 

It can be described as a shader code like this:

 

Additional note

The visualizations of the X coordinate(p.x)  and the Y coordinate(p.y) are shown below.

p.xとp.yの表示

Visualization of p.x and p.y

Calculate fbm(fbm(p))

By applying another fbm to fbm(p), the pattern is ‘distorted’ more and results in the shown below.

Iterative application of fbm to the pixel coordinate p to generate a complicated pattern is called ‘Domain Warping’.

fbm(fbm(p))

fbm(fbm(p))

 

It can be described as a shader code like this:

 

Animate a domain warping

You can animate the pattern by adding ‘Time’ to the argument of the domain-warping function.

時間を足す

Add ‘Time’ to the argument

 

 

In the same way, I animated the domain-warping effect shown in this tutorial.

 

 

How to create the effect shown in this article

Create a pattern by domain warping

Create the pattern shown below by using domain warping.

Domain warping

Apply the Mosaic effect

Apply the mosaic effect to the pattern created by domain warping.

モザイクエフェクト

The mosaic effect

Mask with a polka-dot pattern

Mask with a polka-dot pattern.

水玉でくりぬく

Mask with a polka-dot pattern

In order to improve visual impression, I increased the contrast by making the dot lager where the colour is bright and making the dot smaller where the colour is dark.

 

Animate the pattern ~ Completion

Animate the pattern by add ‘Time’ to the argument of the fbm function. It completes the visual effect to create this time.

動きを与える

Animate the pattern

 

How to create it with Unity

I explain how to make this domain-warping effect by using Unity’s shader.

Regarding the mouse operation, I assume Windows is used.

 

Create a shader

Firstly, select Create > Shader > Unlit Shader in the Project window to create a shader file.

シェーダーファイル作成

Create a shader file

 

Name the shader file ‘DomainWarpingShader’.

 

Edit the shader file

Open the created shader file and paste the below code in it.

 

Create a material

Right-click the shader file and select Create >  Material.

マテリアル作成

Create a material

作成したマテリアル

The material created

Create a board object

I explain how to create a board object to attach the created material to.

Planeオブジェクトの作成

Create a Plane object.

 

作成したPlaneオブジェクト

The Plane object created

 

Assign the material to the board object

Drag the material into the created Plane object to assign.

マテリアルの登録

Assign the material to the Plane object.

 

The domain-warping effect has been applied to the board. It should look like the shown below.

マテリアルを登録した結果

How it looks after the material is applied.

 

Colour the domain-warping effect

Next, colour this domain-warping effect.

You can colour this shader by specifying a gradation texture.

グラデーションテクスチャ

Gradation texture

 

グラデーション用テクスチャをマテリアルへ登録

Assign the gradation texture to the material

 

By applying the texture, the pattern is coloured. It should look like the shown below.

テクスチャ設定結果

How it looks after applying a gradation texture

 

How is it coloured?

As shown below, this domain-warping shader applies the colour on the left to the larger dots and the colour on the right to the smaller dots.

グラデーションテクスチャを利用して色を付ける

Colour the pattern by using a gradation texture.

 

How to upload an asset from Unity to STYLY

Please read the article below to learn how to upload an asset from Unity to STYLY.

https://styly.cc/ja/manual/unity-asset-uploader/