【Blender4.5】ジオメトリーノードで計器類・ステータスディスプレイを作る②～円型のエネルギーメーター～

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

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

難易度　3.0

前回：シリーズ①はコチラ↓
【Blender4.5】ジオメトリーノードで計器類・ステータスディスプレイを作る①～直線上の目盛り～

作るもの

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

この記事では❷円型のエネルギーメーターの作り方を解説しています。

①エネルギーメーター

円状に並んだブロックを作る

まずはエネルギーメーターの円状に並んだブロックを作ります。

Curve CircleノードのResolution（頂点）を16、Radius（半径）を0.02にしてカーブの円を作ります。

Curve CircleノードをInstance on PointsノードのPointsにつなぎます。InstanceにはQuadrilateral（四角形）ノードにFill Curveをつないだ台形を接続し、台形のブロックが円状に並ぶようにします。並べる方向を揃えるためにAlign Rotation to VectorノードとCurve TangentノードをRotationにつなぎます。（台形のX方向をカーブの接線方向に揃える）

※Quadrilateral（四角形）ノードはモードをTrapezoid（台形）にしてください

台形のサイズの計算

台形の大きさに関しては自分がちょうどいいと思ったサイズを入れてください。

これで台形が円状に並んだメーターができました。

π（パイ）は3.14…の円周率を表した記号です。２πは２×3.14…でおよそ6.28…となります。Blenderで円周率を入力するときはpiと打つと入力できます。２πを入力したいときは２×πを表す、2*piと打つこともできるし、tauと打つことでも入力できます。

メーター増減のアニメーションをつける

メーターの増減は、Instance on PointsノードのSelection入力ソケットに、どのポイントに台形ブロックを置くかを決めるノードをつなげるので、そこの数値を変化させて増減します。Endpoint Seclectionノードは、ポイントのインデックスの、上下の端点から何個のポイントにインスタンスを配置するかを設定できますのでこれを使います。

Scene TimeのSecondsにMultiplyで0.1をかけて動きのスピードを遅くしています。

Noise TextureノードはNormalizeにチェックするとランダムに0～1の値を出力するようになります。DetailとRoughnessの値を上げて、細かく振動するような動きを追加できます。

最終的に0～16の範囲で数値を出力したいですが、Noise TextureノードのDetailとRoughnessの値を上げると0～1の範囲より出力される数値の範囲が狭くなるので、Map Rangeノードで出力範囲を-7～25に広げます。（動きを見て各自好きなように調整してください）

Clampノードで最終的に0～16の範囲内の数値が出るように、最小値0、最大値16に制限しておきます。

Endpoint SelectionノードのStartに出力をつなぐことで、0ならメーターブロックなし、16ならインデックス16番までのブロックが出てメーターが満タンになり、メーターの増減を表現できます。

外側のメーターを作る

外側のメータを作りますが、内側のメーターとほぼ同じなので、ノードを複製して作っていきます。

QuqdrilateralとFill Curveを選択し、Ctrl + Shift + Dで線がつながったまま複製します。（外側のメーターの台形ブロックを少し平べったくしたいので、QuadrilateralのHeightを0.003に変更しています。あとからTransform Geometryで拡大します。）

Instance on PointsノードもCtrl + Shift + Dで線がつながったまま複製します。Instance入力に、さっき複製してきたFill Curveノードを接続します。

Transform Geometryノードで好きな角度に回転させます。私はX軸回転132°にしました。また、外側に一回り大きいメーターとして作りたいので、Scaleに1.5を入力し、1.5倍拡大しました。

あとは内側のメーターと外側のメーターをJoin Geometryノードで合体させます。

これでエネルギーメーター部分は完成です。外側のメーターの動きは内側のメーターと同じなので、変えたいという方は外側メーター用にノードを組んでアニメーションを変えてみてください。

②連動して変化する数値

次は、エネルギーメーターが増減するのに連動して変化する数値のテキストを追加します。

エネルギーメーターの増減アニメーションに使ったNoise Textureの出力を利用します。この出力にMultiplyで好きな数値をかけます。（300をかけると0～300くらいの範囲で数値が変化します。）

Value to Stringノードで、数値を文字として扱えるようにします。Desimalsは少数を何桁まで出力するか決めます。

String to CurvesノードのStringにValue to Stringの出力をつなぎます。フォントやサイズ、字間など様々な設定ができます。今回使ってるフォントはGoogle FontのDotoです。サイズは0.01。

Fill Curveノードをつないで、カーブに面を張ってメッシュにしています。

Transform Geometryノードで位置を調整し、Join Geometryノードでエネルギーメーターと合体させています。

String to Curvesノードについては以下で詳しく解説しています。↓

③回転するキューブ

グリッド表示のキューブを用意する

なんかかっこいいのではないかということで真ん中にグリッド表示のキューブを回転させています。好きなオブジェクトを回してください。スザンヌとか回してもよかったかもしれない。

Cubeノードでキューブを出します。Verticesを増やして面や辺の数を増やします。

Mesh to Curveノードでキューブメッシュをカーブに変換します。Curve to Meshノードでメッシュに戻し、Profile Curve（断面）にCurve Circleノード（半径0.0001、Resolution(頂点数)4の正方形）をつないで、辺を太くします。

Transform GeometryでRotationの X,Y軸に45°を入力し回転させます。

Join Geometryで他の部品と合体させておきます。

キューブを回転させるアニメーション

キューブを回転させます。シンプルにZ軸回転させているだけです。

X,Yには45°を入れたいのですが、他のノードを介すと、ラジアンとして読み込まれてしまいます。入力数値をラジアンに変換してくれるTo RadiansノードをX,Y入力ソケットに接続し、45を入力します。

ZにはScene TimeノードのSecondsをつないで、時間が進むと秒数が出力されるようにしています。スピード調整用にMultiplyノードをはさんでいますので、好きなスピードに調整してみてください。

マテリアルをつけて位置調整

最後にマテリアルをつけて、位置を調整します。

エネルギーメーターの部品を全部Join Geometryノードで合体させたら、そのあとにSet Materialノードでマテリアルをつけます。

Transform Geometryをつなげておいて、そのあとにJoin Geometryでシリーズ①で作った目盛りやヘッドセット本体も合体させます。

メーターを真ん中くらいに持ってきて、角度や位置を調整して、出来上がりです。

合体させる部品が多くなってくると混乱してきますが、基本的にJoin Geometryノードで合体させたもの全体を、その後につなぐTransform Geometryノードで移動させたり、拡大縮小させるという手順です。なので、一緒に動かしたくないものは、Join Geometryで合体する前にTransformさせる必要があります。

続き

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

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

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

シリーズ⑤はこちら↓
【Blender4.5】ジオメトリーノードで計器類・ステータスディスプレイを作る⑤～画面を曲げる～