TouchDesignerでファーを作る(シェル法)

# はじめに
<img width="600" alt="20230109_190745.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693056/939788a1-3621-8306-6641-3302da9590fe.jpeg">

この前TouchDesigner黙々会でファーを作ってTUNNEL TOKYOのディスプレイに映しました。
このファーの作り方について今回は書こうと思います。
正直難しいことは一切やっておりません。。
プロジェクトファイルは下記に上げております。
https://github.com/usbmasa/Fur_TouchDesigner
中身はこんな映像です↓
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">動きにこだわった…！<br>作品名「ポメラニアン」<br>これで記事にしよう<a href="https://twitter.com/hashtag/TouchDesigner?src=hash&amp;ref_src=twsrc%5Etfw">#TouchDesigner</a> <a href="https://t.co/wb9JgG9nfX">pic.twitter.com/wb9JgG9nfX</a></p>&mdash; MASATONOUSB (@usbhatyu) <a href="https://twitter.com/usbhatyu/status/1613143979511648257?ref_src=twsrc%5Etfw">January 11, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# ファーの作り方
ファーを作るときの手法としてフィン法とシェル法というものがあります。
フィン法は芝生を生やすときによくある板ポリに葉のテクスチャーを貼って法線に沿って生成してモサモサさせる馴染み深い手法です。
対してシェル法は細かいノイズテクスチャーを貼ったメッシュを何層にも重ね、白～黒にかけて透明度を変えると不思議なことにモサモサに見えるというもの。
二つの手法の解説は以下のサイトが図解もありわかりやすいです。

フィン法：https://news.mynavi.jp/article/graphics-31/
シェル法：https://news.mynavi.jp/article/graphics-32/

解説を読んで仕組みが分かったところで他の実装の記事にも目を通すとほとんどの記事でShaderを書いて実装しています。
恐らくTouchDesignerでもGeometoryShaderを書いて実装できると思います。
ただファーの仕組みを理解すると「これインスタンシングである程度実現できるんじゃ…？」という気持ちになったので作ってみました。
それでは解説していきます。

# ノードを繋ぐ
繋ぐノードはとてもシンプルです。
インスタンシングのお手本のように繋ぎます。
Sphereの頂点数は15×15とローポリに設定します。
![TouchDesigner 2022.31030_ C__Users_22033_Documents_TouchDesigner_GLSL_Fur_fur - コピー.toe_ 2023_01_13 23_59_14_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693056/f5859923-aa4b-d2e7-8057-1ceee019361d.png)
次にマテリアルを設定します。
```PBRMAT```の```AlphaMap```にNoiseテクスチャーを設定します。
間の```LevelTOP```はファーの量などの設定用です。
<img width="600" alt="20230109_190745.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693056/22bb522b-3538-ded2-3ae5-b221ca8d5dc9.png">

最後に```PBRMAT```の```Rim```を設定します。
Rimを設定することでファーの外側ほど白くなっていく効果を得られます。
色は```LightCOMP```の色を変えて変更します。
<img width="600" alt="20230109_190745.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693056/c292d00b-5516-040b-ce2e-41cd13d8272e.png">

# インスタンシング
インスタンシングをするためのCHOPを作ります。
全容はこちら。
![TouchDesigner 2022.31030_ C__Users_22033_Documents_TouchDesigner_GLSL_Fur_fur - コピー.toe_ 2023_01_13 23_58_34 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693056/b058b448-83f0-5a14-fe7d-d1766194c471.png)
・layer
一番上の赤い```ConstantCHOP```は重ねる枚数のパラメーターです。

・Scale用
シェル法は何層にも重ねる手法なので徐々に大きくなる値を用意します。
```PatternCHOP```で0～1に向けて等速で増加する```Ramp```を使い```MathCHOP```の```Range```で拡大幅を設定しています。
```1.018～1```という極わずかな差の幅に設定します。
この時値が下がっていくように変換しているのもポイントです。
後述のPositionやRotationの値の都合上このようにしています。
このScaleをインスタンシングに設定するだけで一旦モフモフにはなるはずです。

・Position,Rotation用
この二つは質感をアップさせるアニメーション用です。
二つに共通しているのが中心にあるインスタンスから動き出すことと外側に向かうにつれて値が遅れてくるようにしていることです。
ここは微調整が多いのでプロジェクトファイルを見てもらうのが早いのですが、```LagCHOP```と```TrailCHOP```を使って補完された流動的な動きを作っています。
X軸,Y軸の動きは```NoiseCHOP```で出し、回転はX軸の移動値に合わせて動くようにしています。

ここまででできたパラメーターが```tx```,```ty```,```rz```,```scale```の4つです。
これらを```MargeCHOP```で一つにまとめインスタンシングに使うことでふわっと動くファーが完成します。

# まとめ
今回はノーコードでファーを作ってみました。
GeometoryShaderを書いて作った方が応用が利くとは思いますのでそちらも時間があればやってみようかと。
ちなみに他のやり方でファーを作っている方もいらっしゃるので一つの例として参考にしていただけたらと思います。
応用すると以下みたいなのも作れます。
CHOPの扱いが不慣れでもう少しスマートなやり方があるんじゃないかと感じたのでもしアドバイス等あれば気軽にコメントください！
ここまで読んでいただきありがとうございました！
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ヘドバン<a href="https://twitter.com/hashtag/TouchDesigner?src=hash&amp;ref_src=twsrc%5Etfw">#TouchDesigner</a> <a href="https://t.co/ocWOk5fYW1">pic.twitter.com/ocWOk5fYW1</a></p>&mdash; MASATONOUSB (@usbhatyu) <a href="https://twitter.com/usbhatyu/status/1613843055957934081?ref_src=twsrc%5Etfw">January 13, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>