Unity:絨毯が波打つするシェーダーの実装
はじめに
Shader の勉強として、絨毯(布)が波打つような Unity の Shader を実装してみたく、以下の画像の通りの Shader(シェーダー)を実装しました。デモもあるのでぜひ動かしてみてみてください。
![](http://www.fast-system.jp/wp-content/uploads/2019/02/amimation.gif)
Unityを知らない方は、ぜひ こちらの記事 をご参照ください。
Link
- Github:https://github.com/fastsystem/unity-carpet-shader
- Demo:http://www.fast-system.jp/wp-content/uploads/static/unity-carpet-shader/
実装手順
「Plan」のオブジェクトを追加します。
![](http://www.fast-system.jp/wp-content/uploads/2019/02/WS000000.jpg)
こんな感じで追加されます。
![](http://www.fast-system.jp/wp-content/uploads/2019/02/WS000001.jpg)
次に新しい Material を追加します。
![](http://www.fast-system.jp/wp-content/uploads/2019/02/WS000002-1.jpg)
追加したマテリアルに「Flag」と名前を付けます。
![](http://www.fast-system.jp/wp-content/uploads/2019/02/WS000003.jpg)
次に、Sharder を追加します。
![](http://www.fast-system.jp/wp-content/uploads/2019/02/WS000004.jpg)
名前は「FlagShader」にします。
![](http://www.fast-system.jp/wp-content/uploads/2019/02/WS000006.jpg)
FlagShaderをダブルクリックして編集して、以下のソースコードを張り付けてください。
このシェーダーは、オブジェクトに含まれる頂点(Vertex)のY座標を動的に高さを変更します。変更する高さは sin(経過時間) で計算しており、高さを変えるX/Y座標は原点からの距離で計算しています。
![](http://www.fast-system.jp/wp-content/uploads/2019/02/WS000013.jpg)
次に、「FlagImage」と言う画像を追加します。
![](http://www.fast-system.jp/wp-content/uploads/2019/02/WS000007.jpg)
![](http://www.fast-system.jp/wp-content/uploads/2019/02/FlagImage-1024x772.jpg)
「Flag」マテリアルを選択して、「Standard」Sharderから「Flag」Sharderに変更します。
![](http://www.fast-system.jp/wp-content/uploads/2019/02/WS000008.jpg)
Shaderを変更したら、画像の選択画面から、FlagImageに変更します。
![](http://www.fast-system.jp/wp-content/uploads/2019/02/WS000010.jpg)
「Flag」マテリアルを選択して、「Plan」にドラッグアンドドロップで設定します。
![](http://www.fast-system.jp/wp-content/uploads/2019/02/WS000011-1024x449.jpg)
これで絨毯(布)が揺らめくオブジェクトが作成できました!
![](http://www.fast-system.jp/wp-content/uploads/2019/02/WS000012-1024x448.jpg)
よければ、SNSにシェアをお願いします!