ハロー！新入社員のタケです！
今朝のツイートで紹介したエフェクトの作り方について紹介していきたいと思います。
パーティクルと自作シェーダの合わせ技になっています。
私がイメージしたのはRPGゲームのエフェクトなどでよくある下から光がふわーっと出てきている雰囲気です。
結構説明することが多くなってしまったのでシェーダ偏とパーティクル編に分けたいと思います。
まずはShaderGraphの完成形から見ていきましょう。
このようになっています！
何やら横に長くなっていますね。
大きく分けるとアニメーションさせる部分、グラデーションを作る部分、ランダムな線を生成する部分、結合する部分に分かれています。
時間のほうはもう昨日の記事で説明したので飛ばしていきます。
ランダムな動く線を作っていく方法ですが、簡単な仕組みとしてはノイズをめっちゃ縦に引き延ばしている感じです。
UVノードをSplitしてRの部分だけをノイズ生成につなげると、このように縦に引き伸ばされて線が生成されているように見えます。
Combineを使ってアニメ部分と結合するとアニメーションするように設定できます。
これで自動的にアニメーションする線をノードで表現することができました。
Gradient NoiseはScaleの値を大きくしたり小さくしたりすると線が太くなったり細くなったりします。
今回は細い線がたくさん線が欲しいのでScaleの値は大きめにしましょう。
次に、これで生成したランダム線とグラデーションを合成します。
合成するのに使うグラデーションですが、UVのGの値をとってきて作ります。
そこまでは同じなのですが、One Minusというノードを経由していますね。
このノードはInに入れた値を逆転した値をOutから出力するというノードです。汎用性が高くてよく使うので覚えておきましょう！
今は上が黒で下に行くほど白のグラデーションがほしいのでOne Minusを経由して逆転させてからつなげます。
これまでできたらAddでグラデーションとアニメーションする線をくっつけます。
だいぶ光っぽくなってきました！
次はSmoothStepで黒と白のバランスを調整します。
白のグラデーションが明るすぎるので暗くしています。
ここまでできましたが、このまま使うと光のエフェクトの上部が切れているような見た目になってしまいます。
こういう時はさらにMultiplyでグラデーションを重ねましょう。
Simple Gradientノードを使うとGradientで作ったグラデーションをUVをベースに色を変えることができます。
上部を真っ黒に調整してあげましょう！
これでちゃんと上部がグラデーションできれいに消えていくように見えます！
とりあえずシェーダ部分はこれで完成です。
まだノードの右のほうにいじる部分がありますが…それはパーティクルの時に解説します！
…
論理的に考えて様々な模様を生み出せるのは楽しいですね。
数学のちからって（あまり詳しく理解していないけど）すげー！
今日の成果物！
オープニング動画
制作時間：6時間
ローポリ3Dモデル（目標500ポリゴン）
制作時間：30分
今日はず～～～～っとAfter Effectと格闘しながら動画を作っていました。
再生時間は1分弱ほどの動画ですが、これほどまでに制作に時間がかかるとは…動画も作るの大変だあ！
結構良い感じのができたので楽しみにしておいて下さい！
今朝のツイートで紹介したエフェクトの作り方について紹介していきたいと思います。
パーティクルと自作シェーダの合わせ技になっています。
私がイメージしたのはRPGゲームのエフェクトなどでよくある下から光がふわーっと出てきている雰囲気です。
結構説明することが多くなってしまったのでシェーダ偏とパーティクル編に分けたいと思います。
まずはShaderGraphの完成形から見ていきましょう。
このようになっています！
何やら横に長くなっていますね。
大きく分けるとアニメーションさせる部分、グラデーションを作る部分、ランダムな線を生成する部分、結合する部分に分かれています。
時間のほうはもう昨日の記事で説明したので飛ばしていきます。
ランダムな動く線を作っていく方法ですが、簡単な仕組みとしてはノイズをめっちゃ縦に引き延ばしている感じです。
UVノードをSplitしてRの部分だけをノイズ生成につなげると、このように縦に引き伸ばされて線が生成されているように見えます。
Combineを使ってアニメ部分と結合するとアニメーションするように設定できます。
これで自動的にアニメーションする線をノードで表現することができました。
Gradient NoiseはScaleの値を大きくしたり小さくしたりすると線が太くなったり細くなったりします。
今回は細い線がたくさん線が欲しいのでScaleの値は大きめにしましょう。
次に、これで生成したランダム線とグラデーションを合成します。
合成するのに使うグラデーションですが、UVのGの値をとってきて作ります。
そこまでは同じなのですが、One Minusというノードを経由していますね。
このノードはInに入れた値を逆転した値をOutから出力するというノードです。汎用性が高くてよく使うので覚えておきましょう！
今は上が黒で下に行くほど白のグラデーションがほしいのでOne Minusを経由して逆転させてからつなげます。
これまでできたらAddでグラデーションとアニメーションする線をくっつけます。
だいぶ光っぽくなってきました！
次はSmoothStepで黒と白のバランスを調整します。
白のグラデーションが明るすぎるので暗くしています。
ここまでできましたが、このまま使うと光のエフェクトの上部が切れているような見た目になってしまいます。
こういう時はさらにMultiplyでグラデーションを重ねましょう。
Simple Gradientノードを使うとGradientで作ったグラデーションをUVをベースに色を変えることができます。
上部を真っ黒に調整してあげましょう！
これでちゃんと上部がグラデーションできれいに消えていくように見えます！
とりあえずシェーダ部分はこれで完成です。
まだノードの右のほうにいじる部分がありますが…それはパーティクルの時に解説します！
…
論理的に考えて様々な模様を生み出せるのは楽しいですね。
数学のちからって（あまり詳しく理解していないけど）すげー！
今日の成果物！
オープニング動画
制作時間：6時間
ローポリ3Dモデル（目標500ポリゴン）
制作時間：30分
今日はず～～～～っとAfter Effectと格闘しながら動画を作っていました。
再生時間は1分弱ほどの動画ですが、これほどまでに制作に時間がかかるとは…動画も作るの大変だあ！
結構良い感じのができたので楽しみにしておいて下さい！
--------------------------------------------------------------------------------
シェルパでは、3DCGや建築パースはもちろん
VRやARアプリの開発も行っています！
新しいことに興味のある方はきっと楽しめると思います！
新人研修も充実していて初心者でも3DCG経験者でも安心！
株式会社シェルパ
【福岡本社】
〒810-0042 福岡県福岡市中央区赤坂1丁目13-10赤坂有楽ビル7F
【東京オフィス】
〒101-0041 東京都千代田区神田須田町2丁目13-1YKS黒田ビル5F
TEL 092-717-6800 / FAX 092-717-6801
--------------------------------------------------------------------------------
コメント
コメントを投稿