どうも！新入社員のタケです！
今日は朝のツイートで紹介したバリアっぽいシェーダのノードの解説をしてみたいと思います！
動画でお見せしましたが、サイバーチックなラインが上下へアニメーションしていくみたいな感じです。
このシェーダの一番の見どころはテクスチャを一切使わずにノードだけでこのアニメーションとラインを表現しているという点です。
どのようにつくったのか見てみましょう！
今回のノードはこのような構成になっています。
しましま模様を生成してFresnel Effectと合成してあげる、といった感じです。
しましま模様の作り方…まずはこちらのノードをご覧ください。
これはズバリ、グラデーションを生成するためのノードです。
UVの画像の緑色成分を抜き取ることで上から下へのグラデーションを手に入れることができます。
しましま模様を作るのになぜグラデーション？と思うかもしれませんが、あとからわかるので大丈夫です。
最終的にはアニメーションさせたいのでTimeノードとMultiplyを使って自由に調節できる時間の力を手に入れましょう。
Bにつながっているのはアニメーション速度を操作するための値です。
このようにつなげると時間×変数の値という式になるので、自由に速さをいじれるというわけですね。
ここまでできたら先ほど作ったグラデーションとAddで組み合わせます。
これでアニメーションするようになりました！
次に使うのはFractionという新しいノードです。
これはInにつなげたノードの小数点以下の部分だけを出力するノードです。
挟まなかった場合、うまくいかないので挟んであげましょう。
次にまた新しいStepというノードを使います。
これはInに入れた画像データをEdgeに入れた数値で2値化（白か黒だけ）にしてくれます。
Edgeにはスライダーを入れて設定しやすくしておきます。
次にちょっと似たSmoothStepというノードを使います。
先ほどの上位互換のようなもので、グラデーションを残しつつ白と黒の調節ができます。コントラストみたいですね。
うっすら半透明に色を付けたかったので、このように真っ黒の部分をちょっとだけ白くしてみました。
ここまでできたらいままでやったノードをもう一セット作ります。
コピーしたら簡単ですね！
二つ目のラインセットはオンオフ機能を付けます。
いつものBranchとBooleanで設定しましょう。
これでしましま模様が完成しました！
最後にFresnel Effectというエフェクトをかけてカラーを設定できるようにしたら完成です！
Fresnel Effectはオブジェクトの外側に輝くエフェクトが追加されると思っていて大丈夫です。
…
あ～なんだかシェーダでアニメーションするってだけでも結構テンション上がりますね！
お望みのものが作れてとても嬉しいです…！
今日の成果物！
床に配置する光のエフェクト
制作時間：2時間
動画の制作に使用する動画の撮影
制作時間：3時間
オープニング動画
制作時間：1時間
次は開発中のプロジェクトのオープニング動画？を作ることになりました！
AfterEffectもやっていきます…初めて触るので難しいのですが、なんとかがんばります！
今日は朝のツイートで紹介したバリアっぽいシェーダのノードの解説をしてみたいと思います！
動画でお見せしましたが、サイバーチックなラインが上下へアニメーションしていくみたいな感じです。
このシェーダの一番の見どころはテクスチャを一切使わずにノードだけでこのアニメーションとラインを表現しているという点です。
どのようにつくったのか見てみましょう！
今回のノードはこのような構成になっています。
しましま模様を生成してFresnel Effectと合成してあげる、といった感じです。
しましま模様の作り方…まずはこちらのノードをご覧ください。
これはズバリ、グラデーションを生成するためのノードです。
UVの画像の緑色成分を抜き取ることで上から下へのグラデーションを手に入れることができます。
しましま模様を作るのになぜグラデーション？と思うかもしれませんが、あとからわかるので大丈夫です。
最終的にはアニメーションさせたいのでTimeノードとMultiplyを使って自由に調節できる時間の力を手に入れましょう。
Bにつながっているのはアニメーション速度を操作するための値です。
このようにつなげると時間×変数の値という式になるので、自由に速さをいじれるというわけですね。
ここまでできたら先ほど作ったグラデーションとAddで組み合わせます。
これでアニメーションするようになりました！
次に使うのはFractionという新しいノードです。
これはInにつなげたノードの小数点以下の部分だけを出力するノードです。
挟まなかった場合、うまくいかないので挟んであげましょう。
次にまた新しいStepというノードを使います。
これはInに入れた画像データをEdgeに入れた数値で2値化（白か黒だけ）にしてくれます。
Edgeにはスライダーを入れて設定しやすくしておきます。
次にちょっと似たSmoothStepというノードを使います。
先ほどの上位互換のようなもので、グラデーションを残しつつ白と黒の調節ができます。コントラストみたいですね。
うっすら半透明に色を付けたかったので、このように真っ黒の部分をちょっとだけ白くしてみました。
ここまでできたらいままでやったノードをもう一セット作ります。
コピーしたら簡単ですね！
二つ目のラインセットはオンオフ機能を付けます。
いつものBranchとBooleanで設定しましょう。
これでしましま模様が完成しました！
最後にFresnel Effectというエフェクトをかけてカラーを設定できるようにしたら完成です！
Fresnel Effectはオブジェクトの外側に輝くエフェクトが追加されると思っていて大丈夫です。
…
あ～なんだかシェーダでアニメーションするってだけでも結構テンション上がりますね！
お望みのものが作れてとても嬉しいです…！
今日の成果物！
床に配置する光のエフェクト
制作時間：2時間
動画の制作に使用する動画の撮影
制作時間：3時間
オープニング動画
制作時間：1時間
次は開発中のプロジェクトのオープニング動画？を作ることになりました！
AfterEffectもやっていきます…初めて触るので難しいのですが、なんとかがんばります！
--------------------------------------------------------------------------------
シェルパでは、3DCGや建築パースはもちろん
VRやARアプリの開発も行っています！
新しいことに興味のある方はきっと楽しめると思います！
新人研修も充実していて初心者でも3DCG経験者でも安心！
株式会社シェルパ
【福岡本社】
〒810-0042 福岡県福岡市中央区赤坂1丁目13-10赤坂有楽ビル7F
【東京オフィス】
〒101-0041 東京都千代田区神田須田町2丁目13-1YKS黒田ビル5F
TEL 092-717-6800 / FAX 092-717-6801
--------------------------------------------------------------------------------
コメント
コメントを投稿