【Blender4.5】ジオメトリーノードで計器類・ステータスディスプレイを作る④～不規則な波形メーター～

Blenderのジオメトリーノードを使って、アニメやゲームによくあるような計器類、ステータスディスプレイ（コンソールやUIとも言われるらしい）を作って動かしてみるシリーズの④です。

左の動画にあるような、ヘッドセットの前でピコピコ動いてるやつを作っていくシリーズの解説記事です。

※うまく再生されない場合は再読み込みしてみてください

この記事は、Blenderのジオメトリーノードでステータスディスプレイの作り方を解説した中級者向けの記事です。

難易度　3.0

前回：シリーズ③はこちら↓
【Blender4.5】ジオメトリーノードで計器類・ステータスディスプレイを作る③～ランダムポイントグリッド～

【Blender4.5】ジオメトリーノードで計器類・ステータスディスプレイを作る③～ランダムポイントグリッド～

Blenderのジオメトリーノードを使って、アニメやゲームによくあるような計器類、ステータスディスプレイ（コンソールやUIとも言われるらしい）を作って動かしてみるシリーズの③です。左の動画にあるような、ヘッドセットの前でピコピコ動いてるやつ...

作るもの
①ラインを作る
②サインカーブを作る
③サインカーブを動かす
④サインカーブを不規則にする
1. カーブの解像度を上げる
2. サインカーブをグループ化する
⑤おまけ　パルス的な波を作る
マテリアルをつけて位置調整
続き

作るもの

作るのは４つの部品です。最後に全体画面をフェイスシールドに合わせて曲げる方法も解説します。

直線上の目盛り
円型のエネルギーメーター
ランダムなポイントを表示するグリッド
不規則な波形メーター
画面をフェイスシールドに合わせて曲げる

この記事では❹不規則な波形メーターの作り方を解説しています。

ただ不規則な波形を作るだけじゃつまらないので、パルス的な波（平坦な部分がある波）を作るところまで解説します。

ラインを作る
サインカーブを作る
サインカーブを動かす
サインカーブを不規則にする
おまけ　パルス的な波を作る

この順番で解説していきます。

①ラインを作る

まずは波形を作るためのラインを作成します。

Curve LineノードをDirectionモードにして、Direction（方向）をXに１を入れて水平方向に延びるカーブを作ります。Length（長さ）は0.03にします。

作ったカーブは始点と終点の２点しかポイントがないので、Resample CurveでCountを50にしてライン上にポイントを50個作ります。（※ポイントは見えません）

そのポイントを動かして波形の形を作っていきます。ポイントの位置を変えるためにSet Positionノードをつないでおきます。まだ何も変化させていないので直線のままですが、これでラインの準備ができました。

②サインカーブを作る

上でつないだSet PositionノードのPosition入力ソケットに位置を変えるノードを接続します。基本的にはSineノードを使ってサイン関数の値を出すことでサインカーブを作ります。

ノードの組み方は上図のように組めば良いですが、細かく何をしているかを以下で解説します。

Positionノードというのは、そのジオメトリのポイントの位置のデータです。例えば始点（0, 0, 0）と終点（1, 0, 0）などの x, y, z 座標のデータが取得できます。

そして、PositionノードのPosition出力ソケットは紫色をしていますが、これはベクトルデータということを表しています。ベクトルデータは（x, y, z）など３つの数がセットになったデータ型です。これをバラバラにしてx, y, zそれぞれ個別に操作したいので、SeparateXYZノードでバラバラにしています。Set PositionノードのPosition入力ソケットは紫色のベクトルデータなので、CombineXYZノードでまた１つのベクトルデータとして統合してから接続する必要があります。

ラインからサインカーブを作る

サインカーブとはY＝sinXという式でX-Yグラフに書かれる波形のカーブです。横軸のXの値が変わると、Yの高さの値が上下に変わっていきます。

最初に用意したX方向に伸びた線、この上にある各ポイントのX座標にSineノードをつないでサイン関数の値を出します。今回はこの出力された値をZ座標に渡しています。（Blenderでは上下方向がZのため）

X,Y座標はそのままX,Y座標に渡して、Z座標（高さ）だけ、サイン関数の値を出力するようにすると、ラインがサインカーブの形に変形するようになります。

波形の数の増やし方

用意したラインの長さがかなり短いので、全然波形ができないと思います。なので、Sineノードの前にMultiplyノードをつなげて、Xの値に500をかけて波形の数を増やしています。

サインカーブは２π（パイ）で山、谷の波形１セットができるので、Ｘの値を３倍すると波形が３倍に増えます。

Ｘに数をかけて値を変えることで、波形の数を調整することができます。

振幅を変化させる

また、振幅の高さの調整もできます。

Sineノードで計算が終わった後の出力に数をかけたいので、Sineノードの後にMultiplyノードをつなげて掛け算します。

すると、出力された値が変化するので、サインカーブの山や谷の高さが変わります。

Sineノードの前で掛け算するか、後で掛け算をするかで、どの値が変わるのかが変わってきます。

ジオメトリノードは数学を勉強した方がいいの？

三角関数とかサイン、コサインとか出てくるじゃん、やっぱり数学勉強した方がいいんじゃないの？って思う方も多いと思います。

正直、三角関数とか、サイン、コサインくらいは、大体なんとなくわかっていた方がジオメトリノードもいろいろ作りやすくなるとは思います。でも、最初から勉強で完璧に理解する必要はありません。

ちなみに自分もここらへんの分野すごい苦手です。Blenderでジオメトリノードいじってたらなんとなくわかるようになってきました。ジオメトリノードですごい難しいことやってる方も、数学とかあまり勉強してないけどノードいじってたらできた、みたいな人多いです。あまり細かいこと考えず「このノードつないだらどうなるんだろう？」って実験しまくってると、原理を知らなくても、なんとなく使い方がわかるようになります。（勉強して理解すると、何度もいろんなノードつなげて実験する必要がなくなるので作るのが速くなるだけです）

なんかノードつなげて数を掛けてみたらいい感じになった、で解決することもあります！

③サインカーブを動かす

今度はサインカーブを動かしてみましょう。

サインカーブを動かすには、Xの値に数値を足して移動させます。

サインカーブを作るためにつないだ３つのノードの前にAddノードをつないで、Scene Timeノードから出てくる数値を足していきます。Multiplyノードでスピードを調整できます。

Xに正の数を足すと、元のグラフより進んだ場所の値が出ることになり、グラフ全体が後ろに下がります。

こうしてサインカーブが動きます。

スピード調整のMuliplyノードを-0.01など負の数にするとサインカーブは逆に動きます。

④サインカーブを不規則にする

規則正しい波だとつまらないので、少し不規則なサインカーブを作ってみましょう

波を不規則にするため、波長の長さや振幅の違う波を複数足していきます。

２つの波を足しただけでは、まだ少し周期的なサインカーブになります。もう少し不規則にしてみましょう。

カーブの解像度を上げる

波形を増やすと、カーブがカクカクして綺麗な曲線にならなくなってきます。

Resample CurveのCount数を増やすと、ライン上のポイントが増えて、細かい波形が表現できるようになります。

サインカーブをグループ化する

サインカーブを複数作りたいのですが、ノードが多くなるので、グループ化して１つのノードにまとめます。

Sineノードと前後のMultiplyノードの３つを選択して、Ctrl + Gを押します。

この３つのノードが１つのノードにグループ化され、その内部の画面がでてきます。

グループ化された内部の画面です。MultiplyノードのValueをGroup Inputノードの開いてるソケットにつないで、X Factor（波形を増やす）やHeight Factor（振幅を変える）などわかりやすい名前をつけておきます。外部から値を調整できるようになります。Tabを押すと元の画面に戻ります。