はじめに
この前TouchDesigner黙々会でファーを作ってTUNNEL TOKYOのディスプレイに映しました。
このファーの作り方について今回は書こうと思います。
正直難しいことは一切やっておりません。。
プロジェクトファイルは下記に上げております。
https://github.com/usbmasa/Fur_TouchDesigner
中身はこんな映像です↓
動きにこだわった…！
— MASATONOUSB (@usbhatyu) January 11, 2023
作品名「ポメラニアン」
これで記事にしよう#TouchDesigner pic.twitter.com/wb9JgG9nfX
ファーの作り方
ファーを作るときの手法としてフィン法とシェル法というものがあります。
フィン法は芝生を生やすときによくある板ポリに葉のテクスチャーを貼って法線に沿って生成してモサモサさせる馴染み深い手法です。
対してシェル法は細かいノイズテクスチャーを貼ったメッシュを何層にも重ね、白～黒にかけて透明度を変えると不思議なことにモサモサに見えるというもの。
二つの手法の解説は以下のサイトが図解もありわかりやすいです。
フィン法：https://news.mynavi.jp/article/graphics-31/
シェル法：https://news.mynavi.jp/article/graphics-32/
解説を読んで仕組みが分かったところで他の実装の記事にも目を通すとほとんどの記事でShaderを書いて実装しています。
恐らくTouchDesignerでもGeometoryShaderを書いて実装できると思います。
ただファーの仕組みを理解すると「これインスタンシングである程度実現できるんじゃ…？」という気持ちになったので作ってみました。
それでは解説していきます。
ノードを繋ぐ
繋ぐノードはとてもシンプルです。
インスタンシングのお手本のように繋ぎます。
Sphereの頂点数は15×15とローポリに設定します。
次にマテリアルを設定します。
PBRMATのAlphaMapにNoiseテクスチャーを設定します。
間のLevelTOPはファーの量などの設定用です。
最後にPBRMATのRimを設定します。
Rimを設定することでファーの外側ほど白くなっていく効果を得られます。
色はLightCOMPの色を変えて変更します。
インスタンシング
インスタンシングをするためのCHOPを作ります。
全容はこちら。
・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の扱いが不慣れでもう少しスマートなやり方があるんじゃないかと感じたのでもしアドバイス等あれば気軽にコメントください！
ここまで読んでいただきありがとうございました！
ヘドバン#TouchDesigner pic.twitter.com/ocWOk5fYW1
— MASATONOUSB (@usbhatyu) January 13, 2023