ゲームエフェクトデザイナーのブログ | A Real-Time VFX Artist's Blog

About Making Materials on UE, Making Tools with C#, etc

UE4 格子付きモザイクマテリアル | Mosaic Material with Checker Pattern

シェーダーアドベントカレンダー2日目の記事になります。
マテリアル初心者でも簡単に作れる内容です。

This is the post that is the second day of "Shader Advent Calendar".
It is content who make easily even a beginner for making material.


きっかけは Ka-punn(@PunnKa)さんのこちらのツイート。

The event that led to me posting this article was a tweet posted by Ka-punn(@PunnKa).


こちらに対して山中(@serano_vfx)さんもツイート。
1つ目はモザイクマテリアル。

Then, on the other hand, Yamanaka(@serano_vfx) also tweeted.
The first tweet was about a mosaic material.


そして2つ目は格子付きモザイク用のUVの生成。

And the second tweet was about generation UV for mosaic pattern with a checker pattern.


面白い!と思って自分も作ってみました。

I thought "so interested!". So I also tried to make mosaic material with a checker pattern.

まず全体はこんな感じでとてもシンプルです。

First, a whole of the material is very simple as this picture.

f:id:moko_03_25:20191128010410j:plain


Make Mosaic」についての説明です。

タテヨコ何個のブロックでモザイクにするかを「Tile Number」で指定して、UVに掛けます。この画像では8倍していますが、すると0~1のUVが0~8になります。
そして「Floor」で切り捨てると0・1・2‥と整数ごとに平らになり、最後に8で割れば0~1の範囲で8つのブロックが出来上がります。

About the description of "Make Mosaic".

First, set a value depending on a number of blocks in U and V for the mosaic to the parameter "Tile Number". This example is setting to 8. So the gradation 0-1 of UV become 0-8.
Next, Use the "Floor" node, and gradation became flat per integer as 0, 1, 2...
Last, Divided by 8, So It make 8 blocks within 0-1.

f:id:moko_03_25:20191128010416j:plain


Make Checker」の説明です。

「Floor」ではなく「Frac」で小数点だけを取り出すと、0~1のグラデーションを8回繰り返す状態になります。そして「Line Width」で指定した格子の太さと一緒に自作のカスタムノード「PULSE」に繋ぐと横と縦の縞模様ができるので、掛け合わせて格子模様にします。

About the description of "Make Checker".

Take out a decimal point by not "Floor" bat "Flac" node, so it become gradation 0-1 of repeating 8 times. Then the result and a width of a checker who is set the parameter "Line Width" connect to the input of self-made custom node "PULSE". So the horizontal and vertical stripes are created. Then multiply by each other, and it becomes a checker pattern.

f:id:moko_03_25:20191128010421j:plain

このカスタムノードではHLSLの「step関数」を2つ使って「矩形波(パルス波)」を作ることで、簡単に格子模様を作成できます。

This custom node makes "square/pulse wave" using the "step" of the HLSL function twice, So you can create the checker pattern easily.

f:id:moko_03_25:20191128025413j:plain

こちらの記事がとても参考になります。

This article is very helpful.


最後にテクスチャのUVsにモザイクの構成を繋げて、格子模様を掛け合わせたら完成です!

Last, the structure of the mosaic connects to "UVs" of any texture, and multiply the result by the checker pattern, so it's complete!

f:id:moko_03_25:20191128011332j:plain

ただしこのモザイクの作り方だと、ブロックごとにテクスチャの左上の色で塗り潰されます。ブロックの中央の色で塗り潰したいですよね。

そこで「Make Mosaic」では「Floor」と「Divide」の間で0.5を足してあげたらOKです。

However, In the case of how to make this mosaic pattern, It uses a top-left pixel of texture per block for coloring.You want to use a center pixel, don't you?

Then, Add 0.5 between "Floor" and "Divide", So that's OK.

f:id:moko_03_25:20191129002423j:plain

こんなテクスチャを用意してみました。白い点が4つあります。

I made this texture. There are 4 white points.

f:id:moko_03_25:20191129002255j:plain

「Tile Number」を2にすると、真っ白に塗り潰されました。バッチリです!

If I set "2" to the parameter "Tile Number", It's colored completely white. Year, it's perfect!

f:id:moko_03_25:20191129002301j:plain

以上になります!

そして次は@vakさんの記事 "[UE4によるunlit芸のすすめ] ライティング完全無視カレー作ります(カレーではな" ‥です!

That's all!

And the next article is made by vak-san!

シェーダーアドベントカレンダー Advent Calendar 2019 - Qiita vak - Qiita