Edited at

vvvvでトンネル系のループ映像を作る

More than 3 years have passed since last update.


こんな感じのパッチで

patch.PNG


こんな感じの出力になる

https://gyazo.com/ee67e097db1c2b2145455f9f04942897


パッチはGitHubにおいてある

vvvv-sandbox/HexTunnel.v4p at master · clomie/vvvv-sandbox


B-Splineで3D空間上に曲線を描く

直線上に図形が並んでてもあんまりおもしろくないので、3D空間上に曲線を作る。

曲線はB-Splineノードで生成する。TopologyClosedを指定すると始点と終点でスムーズに値が変化するので扱いやすい。

X軸とY軸の値それぞれに対してB-Splineノードを使ってSpreadを生成しても別に問題はないけど、Controls per Curveピンとかをうまく使ってあげると、1つのノードで複数パターン分のSpreadが生成できる。

bspline.PNG

https://gyazo.com/d2ec055c4a53123fef40a6666e91dca8


図形の配置と向きについて

B-Splineノードで生成した座標上に対し、一定の間隔で図形を配置する。

Z軸の値はLinearSpreadとMapを組み合わせて生成していて、LFOノードで移動させている。配置した図形の中をカメラ(視点)が移動するのではなく、カメラはほとんどXY平面上を向きを変えながら移動し、Z軸方向には図形自体が移動するようなイメージ。

TransformノードのRotateピンは、トンネル感を出すために、1つ前の図形が1つ後の図形の方向を向くように設定する。

隣り合う座標同士をPairwiseで対にして引き算すると、ある座標から次の座標へのベクトルが取得できる。ここで取得したベクトルは方向(Direction)を表すものなので、これを各XYZ軸ごとの回転量(Rotate)に変換するためにPolarノードを使う。

この部分はArrow(EX9)ノード内部のパッチがベースにしたけど、正直言って何故Polarノードを使うとうまく向きが設定できるのかは自分で納得の行く理解ができていないので、使い方が微妙に間違ってるかも。

hex.PNG

https://gyazo.com/3014920bc76f1d9467e39bbd84aa3f5b


カメラ制御について

LookAtノードとPerspectiveノードを組み合わせて使う方法と、Cameraノードを使う方法がある。

視点についてはZ軸方向にはほとんど移動せず、XY座標と向きのみが変化する。つまり曲線を作っている座標からZ軸の値が小さい順に2つのXYZ座標を取り出す。

LookAtノードの場合はそれぞれ視点の位置、視点の向きに設定すればOK。

Camera(Transform Softimage)ノードを使う場合は、視点の向きに当たる座標をInitial Interestピンへ、TransformのRotateにも設定したように起点から次点への向きをPolarノードで再計算したものをそれぞれInitial Yaw / Initial Pitch / Initial Distanceへ設定する。


その他

Fogをかける。DX9の場合はFog(EX9.RenderState)ノードで簡単に設定できる。DX11の場合は自前でシェーダを書くなりする必要があるっぽい。DX11でDX9並に簡単かつ汎用的にFogかける方法ってないのかな……。

あとは、RendererのDepth Bufferを有効化する必要がある。有効化しないと図形の前後関係がうまいこと描画されない。

その他細かい設定値などは直接パッチを見てください。