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

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

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

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

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

難易度　3.0

前回：シリーズ②はこちら↓
【Blender4.5】ジオメトリーノードで計器類・ステータスディスプレイを作る②～円型のエネルギーメーター～

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

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

作るもの
①グリッドを作る
②グリッド上を光るポイント、輪を作る
1. グリッド上に丸いオブジェクトを配置
2. 同じ位置に輪っかを作る
③ランダムで場所を変えるアニメーション
1. 一定の間隔でランダムに位置を変える
  1. Seed値
  2. １秒ごとにSeed値を変える
2. 円が放射状に拡大縮小する
④テキストを入れる
マテリアル設定と位置調整
続き

作るもの

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

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

この記事では❸ランダムなポイントを表示するグリッドの作り方を解説しています。

ただグリッド上にポイントが出てくるだけだとつまらないので、輪っかが出てきて広がっていくアニメーションも付けてみようと思います。

グリッドを作る
グリッド上を光るポイント、輪を作る
ランダムで場所を変えるアニメーション
テキストを入れる

この順番で作っていきます。

動きはこんな感じ。

ランダムに場所を変える
円が放射状に広がる

というアニメーションをしています。

①グリッドを作る

まずはグリッドを作ります。

Gridノードを
Size X,Y…0.04m
Vertices X,Y…10
に設定します。

Mesh to Curveノードでグリッドメッシュをカーブに変換します。

Curve to Meshノードでメッシュに再変換します。そのときProfile Curveにカーブの断面の形となるようにCurve Circleノードを接続します。Resolution（頂点数）4、Radius（半径）0.0001ｍに設定しておきます。

②グリッド上を光るポイント、輪を作る

グリッド上に丸いオブジェクトを配置

グリッド上に丸いオブジェクトを配置します。

最初に作ったグリッドの元となるGridノードを利用して、Instance on PointsノードでIco Sphereを配置します。

Ico SphereノードをRadius（半径）0.001に設定してインスタンスにします。

Instance on PointsノードのSelectionにRandom Valueノードをつなげます。Randome ValueノードのBooleanモードはProbability（確率）を設定でき、グリッド上のポイントの何割を選択するかを調整できます。例えば、0.3とかにすると、グリッド全体のポイントの30％を選択できることになります。今回はあまり多くのポイントを選択したくないので、0.07に設定しています（７％です。）

Join GeometryノードでInstance on Pointsで配置したIco Sphereと最初に作ったグリッドを合体させます。

同じ位置に輪っかを作る

次は、配置したIco Sphereと同位置に輪っかを配置します。

Instance on Pointsノードを最初のGridノードにつなぎます。

ここでインスタンスにするのは、輪っかなので、Curve CircleノードでまずRadius（半径）0.002の円を作って、Curve to Meshノードで断面の形（Profile Curve）を指定してメッシュ化します。断面の形はCurve CircleノードでResolution(頂点数)４、Radius（半径）0.0001と設定します。

Instance on PointsノードのSelectionに、Ico Sphereを配置したとき使用したのと同じRandom Valueノードを接続します。これで同じランダムな場所に輪っかが配置できます。

③ランダムで場所を変えるアニメーション

一定の間隔でランダムに位置を変える

まずは、左の動画のように特定の間隔でランダムに位置を変える動きを作ってみます。

Seed値

まず、どうやってランダムな値が変化していくのかというと、Random ValueノードのSeed値を変化させることで出力されるランダム値を変化させます。

例えば左図のように、Seed値が0のとき、３個のランダムなポイントが選択され、Seed値が１のときは、８個の別のランダムなポイントが選択されています。

１秒ごとにこのSeed値を変化させれば、１秒ごとに違う地点が選択されるようになります。

１秒ごとにSeed値を変える

１秒ごとに違う値を出すということは、１秒間の間は同じ数値を出力してほしいということです。一定の間隔で同じ数値を出したい場合はSnapノードを使うことができます。

左図のようにSeed値にScene TimeノードとSnapノードを接続します。

Snene TimeノードはFrameにして、フレーム数を出力するようにします。

Snapノード

Snapノードは、Incrementを３とすると、３の整数倍の値のみを出力するようになります。

数値が切り替わるのは元の数値が３の整数倍のときのみです。左図のように、特定の間隔で同じ数値を出し続けることができます。

なので、Incrementに24を入れることで、24フレーム中（一秒間）は一定の値を出し続けることができます。

今は24フレーム（１秒）で変化するようにしていますが、48フレーム（２秒）や、36フレーム（1.5秒）など好みのタイミングにすることもできます。

Scene Timeノードについて

Scene TimeノードのSecondsは時計のように秒単位で数値を増やしています。0.33秒…1.2秒…とかそんな感じで増えていきます。それに対してFrameは、現在のフレーム数を出力しています。

タイムラインの画面で見ると青いバーが移動していますが、ここで出てる数値がフレーム数です。デフォルトの設定では１秒間に24フレーム進みます。

円が放射状に拡大縮小する

次はこの動画のように、ポイントの周りに配置した円を放射状に拡大縮小していくアニメーションをつけていきます。

１秒ごとに円の大きさが、小→大→小（0～1～0）と変わっているので、その動きを作ることがポイントになります。

輪っかを配置したときに使ったInstance on Pointsノードの次にScale Instancesノードをつなぎ、輪っかのインスタンスを拡大縮小します。

このScale InstancesノードのScaleの値を（0～1～0）に変える１秒ごとのサイクルを作っています。

Wrapノード

Wrapノードはある間隔のサイクルを作るのに適したノードです。

例えばMin=0, Max=3とすると、0のとき0から0，1，２…と増えていき、3のときまた0となるようなサイクルを作ることができます。

WrapノードのValueにScene TimeノードのFrameを接続し、Min=0, Max=24とすることで、24フレーム（１秒間）ごとに0～23を繰り返すサイクルを作ります。

0～23を0～1に直したいので、Divideノードで23で割り算をして、出力を0～1のサイクルに直します。

Float Curveノード

Float Curveノードは0～１の入力値を、グラフの形を使って別の出力に変えることができます。

横軸をX、縦軸をY軸とすると、Xが入力値、Yが出力値となります。

例えば上図の左側はY＝Xの直線なので、入力値のまま出力されます。式で考えると難しいですが、グラフの形を視覚的に変えることで、どのような値を出したいかを制御しやすくなります。右図のようにグラフを山の形にすると、最初は0、真ん中らへんで最大値１になって、また最後に0で小さくなるという動きを簡単に作れます。しかも曲線が作れるので、だんだん速くなるとか、動きのイージングも簡単につけることができます！（直線だと一定の速さで動きます。）