3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

海洋大技術系サークルAdvent Calendar 2023

Day 18

BlenderのShaderグラフで動くラインを描画する

Last updated at Posted at 2023-12-19

この記事は海洋大の技術系サークルのアドベントカレンダーの18日目です

はじめに

ここ最近はずっとUnityで個人開発をしていたのですがたまには息抜きでblenderで遊んでいきます。

今回作っていくもの

以下のような線が下から上に動いていくようなアニメーションを作っていきます
Line.gif

Step1 線の描画

スクリーンショット 2023-12-20 003808.png

まずは上の画像のような線をShaderでPlaneに描画します。

Planeを作成し新規マテリアルを作成したら以下のようにノードを接続してください
スクリーンショット 2023-12-20 005340.png

SeparateXYZでPlaneのYの値を取得して0.5以上0.6以下の部分を描画しています。これは僕のイメージなのですがMultiplyで2つの値を接続するとその共通部分が現れる、という感じです。

Step2 フレームで線が移動するようにする、線の太さの調節をできるようにする

スクリーンショット 2023-12-20 010723.png
スクリーンショット 2023-12-20 010732.png
Step1からの変更点は黄色で囲んだ部分です。Thresholdから線の位置が変更でき、Thicknessから線の太さが変えられます。
スクリーンショット 2023-12-20 011144.png
ここでThresholdに"#frame"と打ちこみます。こうすると現在のフレーム数に応じて値が変化するようになります。
ただこのまま再生するとあまりにも動きが速すぎて一瞬でいなくなってしまうのでThresholdにmathノードのdivideを接続して下の値を100くらいに設定してください(下図)
スクリーンショット 2023-12-20 011429.png
ここで一度再生してみると下のようになります
Line2.gif

Step3 線をぐちゃぐちゃにする

スクリーンショット 2023-12-20 012031.png
スクリーンショット 2023-12-20 012043.png

黄色い線で囲んだ部分がStep2からの変更点です。SeparateXYZとLess than/Greater thanの間にミックスカラーノードを挟みノイズテクスチャとミックスさせることで線がぐちゃぐちゃになっていい感じになります。
Line3.gif
冒頭の動画の物はこれのThicknessを0.010に設定したものになります

終わりに

 線を動かす表現は色々なところで使えます。個人的に気に入ってる表現です。Z座標を取得して3Dモデルにこのシェーダーを適用すれば下の動画のようなものも作れます
Grass_and_Line.gif

 シェーダ―はUnityの方でも気になっている部分で、ちゃんとゲームエンジン内部のとこまで理解して自分の思っている画を自由に出力できるようになりたいなあなんて思ってます。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?