【Blender4.5】ジオメトリーノードで計器類・ステータスディスプレイを作る①～直線上の目盛り～

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

左の動画にあるような、ピコピコ動いてるやつです。ヘッドセットの前面に、少し湾曲して立体的に表示しています。

（ちなみにこの子はオリジナルで制作中のブレンヌさんです。）

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

直線上の目盛りや円形のメーターがたまっていくような動き、不規則なサインカーブのアニメーションなど、基礎的な動きをジオメトリーノードで一通り作れるようになることを目指します。基礎的な部品が作れるようになると、自分で考えたオリジナルのもっとかっこいいUI画面を作れるようになれます！

数学の知識や数式を使うところもありますが、なるべく詳しく解説しようと思います。慣れると楽しくなってきますので、ノードをそのまま組んでみるだけでもいいのでやってみてください。

説明が長くなってしまうのでシリーズにします。今回は①です。

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

難易度　3.0

ちなみにジオメトリーノード初めての方はこちらからやると良いかもしれません↓

作るもの
ヘッドセットを用意する
1. ジオメトリノード準備
❶直線上の目盛り
続き

作るもの

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

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

この記事では❶直線上の目盛りの作り方を解説しています。

ヘッドセットを用意する

自分は左図のようなものを作りましたが、みなさん好きなものを作ったり用意してみてください。

別に顔の周辺じゃなくても、時計、スマートウォッチとか、スマホみたいなデバイスの画面上にステータスディスプレイのようなUIが出現してもおもしろいですよね。

ジオメトリノード準備

とりあえず今回解説ではこういうヘッドセットのようなオブジェクトにジオメトリノードをつけていきます。

※オブジェクト無しでやりたい方、練習だけしたい方はPlaneの板を出してそこにジオメトリノードつけといてください。

❶直線上の目盛り

左図のような簡単なメモリを作って、その上を１本の線がランダムに動いていくようなアニメを作っていきます。

短い目盛りを作る

まずは短い目盛りを作ります。

Curve Lineで垂直線（0.05ｍ）を作り、Resample Curveで線上のポイントを21個に増やします。Instance on Pointsノードで短い水平方向の線（0.005ｍ）を21個のポイントに配置すれば短い目盛りが並びます。

長い目盛りを作る

長い目盛りの作り方は短い目盛りの作り方とほぼ一緒です。（※下図では短い目盛りのノードは小さくするために畳んであります）

短い目盛りを作るために最初に用意したCurve Lineノードを利用して、今度はResample Curveでポイントを５個だけ作ります。Instance on Pointsノードで、今度は長さが0.01ｍの水平方向の線を配置していきます。

短い目盛りと長い目盛りをJoin Geometryノードで合わせると、左図のような目盛りができあがります。

目盛りの針を作る

目盛り上を動く針を作ります。短い目盛りや長い目盛りを作ったときに使ったノードを利用していきます。

針は21個の目盛り上を動かしたいので、短い目盛りを作ったときに使ったResample CurveをInstance on Pointsノードにつなげます。針となる線は、長い目盛りを作るときに使った0.01ｍの長さのCurve Lineを使います。

このときInstance on PointsノードのSelectionにどのポイントに針を配置するか、Index（番号）で指定するノードをつなげておきます。IndexにEqualをつなぎ、何番目のインデックス（ポイントの番号）かを選択します。例えば２の数値を入れると、下から3番目の目盛りの位置に針がきます。（Transform Geometryで針の位置を少し左にずらしてわかりやすくします。）

Indexは0から数えているので、ポイントを21個作ったとき、一番下は0になり、上が20になります。

針をアニメーションさせる

Equalノードに特定の数値を入力してしまうと、その場所で固定してしまうので、Scene Timeノードなどをつなぎ、時間やフレームが進むと針が上下ランダムに動くようにします。

Scene TimeノードのSecondをMultiplyノードにつなぎ、0.02をかけてスピードを遅くします。

次にNoise TextureのWにつなぎます。Normalizeにチェックを入れると0～1の範囲の出力になります。DetailやRoughnessを上げると細かく不規則に変動するようになります。お好みで調整してください。

Map Rangeノードにつなぎ、0～1の出力範囲を-15～35にマッピングします。目盛りの範囲は0～20ですが、Noise TextureでDetailなどを上げると、出る数値の範囲が狭くなってしまうのでわざと出る数値の範囲を広くしています。これも実際動かしてみて自分のちょうどいい範囲に調整してください。

最後にClampノードにつなぎ、目盛りからはみ出さないようにMin 0, Max 20と入力し、出力を0～20の範囲に制限します。

これらの出力をEqualノードのＢの値につないで、ランダムに針が動くようにします。