Imaginantia

思ったことを書きます

"Derivation"とその周辺

制作解説

f:id:phi16_ind:20200514233459p:plain

#Shader1weekCompoに出した作品 "Derivation" について、かんがえていたことの記録です。

目的

毎度めっちゃ頑張って「予想外なモノ」を作る傾向がある私ですが、今回は他にやりたいことがあったので「頑張らない」ことを第一目標にしていました。 それに伴って「在りがちな見た目」になることが予測されましたが、私はそういうものを意図して作ったことがないのでいい機会だと思い、好き勝手にやることにしました。

一般に、在ると良いと呼ばれるモノはいくらかあります。

  • 沢山のパーティクル
  • 有機的ランダム感
  • 強い光
  • めっちゃBloom

また、今回のテーマが「続く」ということなので疾走感を連想して:

  • トレイル
  • 強いFoV
  • モーションブラー

なども在ると良い要素だと思います。というわけでそれを全部詰め込みました。良いものが出来ました。エンジニアリングですね。

最初から所謂Visual的な映像は想定していたので完全に意図通り、もしくはそれ以上が出てきて私はとても満足しました。うれしい。

制作

床

無限に続く床が欲しかったので、無限に続く床をつくりました。床の生成は次のように行われます。

  • 現在位置 (Vector3) と現在の姿勢 (Quaternion) が記録されています。
  • 姿勢の変化量が3つのランダムなカーブで時間ベースで制御されています。
    • 整数部で rand を取って小数部使って smoothstep 掛けるアレです
    • Quaternionの接ベクトル空間は3次元で、接ベクトル v に対して vec4(v,sqrt(1.-dot(v,v))) というQuaternionを対応させて掛け合わせています
      • 正しくは無いけど線形近似として
    • Y軸 (Yaw) が一番変化しやすく、Z軸 (Roll) が変化しにくいように設定しています (カーブを引き伸ばしてるだけ)

f:id:phi16_ind:20200515005641p:plain

つまり丁寧な制御はしていないわけで、どこにいくか全然わからないんですが、まぁいい感じなので。

また、姿勢の変化量 (smoothstep) の変化量 (x-x^2) の変化量が不連続なはずなんですが、これくらいならまぁ。元々は加速度ベースでやろうと思っていたんですが十分っぽいのです。

見た目に関してはとりあえず帯が頭にあって、その両サイドを強調しつつ中心にもちょっとした装飾を、くらいの気持ちでつくりました。4つ毎に丸が大きくなるのは作品公開後に「ありそう」と思って付け足したものです。

パーティクル

空中に塵が浮かんでる気がしたので、塵を浮かべました。空間やそれに伴う速度の表現にとても便利です。

位置はワールド座標ベースで固定してあります。グリッド分割 → 対応区画それぞれに座標を振って内部的にランダム配置。

f:id:phi16_ind:20200515001058p:plain

パーティクルは最初8000個 (203) あったんですが、足りないと思ったので 64000個 (403) まで増えたりしました。これくらいなら余裕ですね。 各パーティクルが視界のどの辺を描画するかが決まっていて、カメラの位置から実際にワールド座標での位置が判明、そこに描画って感じです。

また中心位置は視点の前方にすることで多少多めに見せたりしました。Stair Hallでやった方法です。

あと透明度は適当にランダムです。それくらいかな。

トレイル

床をいい感じに走ってるトレイルを作ったらかっこいいと思ったのでつくりました。いっぱいあると尚いいですね。さらにそれぞれに違いがあると嬉しい感じです。

床を走る為には本来なら床に沿って動くように速度を調節しなきゃいけないはずなわけですが、今回は面倒だったので「床を基準とした座標系」を取りました。つまり何をやっても床を沿います。

走りつつ適当なタイミングで止めて (線が終わって)、あとはなんかいいタイミングで「生きている誰か」から分岐するという動きをしています。作品名の"Derivation" (導出) はここから来ていて、現在の体系からその先を導出していく、みたいなイメージです。

が、実はこれはフェイクで、常に生き続けているトレイルが一本だけ存在しています。これが無いと復活できずに永遠に床だけ見る感じになっていたので。こういうフェイクの気持ちは大事だとおもいます。私は。

この「芯の一本」から分岐する確率はちょっとだけ高くて、また機構的に「複数の分岐が同時に発生する」ようにしているので一気にぶわってなったりしてかっこいい。感じにしました。

あと唐突に消えるのはとても勿体なかったので、エフェクトを入れました。これがすごい良かった。「V」的になったなと思います。実はこれの実装はめちゃくちゃひどいです。

f:id:phi16_ind:20200515002757p:plain

トレイルは一並びのポリゴンで、GeometryShaderが無いのでその並びを分離することができません。そこで、赤い頂点をNaNに吹っ飛ばすことで関連するポリゴンごと消すという方法を取りました。

数を数えてちょうど2ポリゴンだけ綺麗に残るようにして、それをリング状に加工した感じです。リサイクルです。リサイクル。

 

あとおまけ話として、「トレイルの太さ」「リングの大きさ/透明度」にはランダム性が入っています。均一的すぎるなと思ったらだいたいランダムを適当に乗せているわけですが、これらは単なる一様乱数じゃないらしいです。

  • 幅は mix(0.02, 0.04, pow(rand(..),2.)) なので、ちょっと細めのトレイルが多くなります (0 に近づくので)。個というよりは全体的に細く見えるはずで、集合としての密度感の制御には pow は便利なイメージです。
  • リングの大きさは mix(1., 4., exp(-6.*rand(..))) と指数関数を入れています。これは「リングの出現が瞬間的」なので個としてのランダム感を重視して、とても大きいリングが稀に出る、感じを意図しています。
    • リングの透明度は大きさ s に対して mix(1., 0.1, pow((s-1.)/3., 0.5)) で決まっているようで、基本的には「大きいと薄い」けどそのままだと薄すぎるので 0.5 乗で持ち上げています。

こういう調節、ほぼ感覚でやっているので言語化が難しいんですが、この辺で結構変わってくるものがあるので是非という気持ちです。

カメラ

適当に床を滑っているだけだと明らかにもったいなかったので、カメラをちゃんといじりました。とりあえずFoVは高め(120°くらい)で、速いとほんのちょっとだけ更に広がるようにもしてます、が、私も違いがわかりません。

  • 位置はMass-Spring-Damper的なやつで移動していきます。なのでちょっと「行き過ぎる」わけですが、いい感じな気がします。
  • 向きは床の向きにちょっと回転 (Roll無し) を加えたもの、に近づくように適当に動かしています。
    • Quaternionを直接 rot += (target - rot) / 4.0, rot = normalize(rot); しているんですが、案外 (？) 綺麗に動きますね。

で、描画自体のカメラ位置は「計算したカメラ位置」から後方3mくらいの場所に置いています。速いと近づくらしいです。

今回のシーンは結構いろんな「表情」があるので、それらを満足に見ることができるようにカメラをぶんぶん回しています。カメラを回すとたのしい。VRはしんどい。

そういえば最初はカメラに振動 (指数関数ベース) を入れていて、「高速に動く物体のブレ」を表現していたんですが、床が結構綺麗になめらかに動くので要らんなとおもって消しました。

ポスプロ

まずここまででこんな感じです。

f:id:phi16_ind:20200515004625p:plain

とりあえず私はVignettingが大好きなので強く入れました。写真っぽくなるので好き。

あとChromaticAberrationはこういうシーンに向いてそうなことが Stair Hallの動画 でわかったので、適当に実装しました。あとガンマを掛けています。

f:id:phi16_ind:20200515004710p:plain

で、後はBloomです。Bloomの実装はいろいろあるんだと思いますが、今回は「画像全体を縮小しつつ全体に重ねる」のをやりました (名前がわかりませんがUnityのPPSのBloomがやってるやつです)。 参考実装とかもわからなかったのでノリでつくりましたがいい感じになったと思います。これはサンプルする位置を敢えてピクセル中心にしたやつ。

f:id:phi16_ind:20200515005145p:plain

というわけで全部掛けるとこうなります。

f:id:phi16_ind:20200515005305p:plain

ポスプロ、こう、品質に直結する感じがあり、今回練習できてよかったなという思いが強いです。うん。

追記: そういえばポスプロを頑張ろうと思ったきっかけは前回の#Shader1weekCompoの かねたさんの作品 "Delayed" でした。 これを見たときにはPBR的リアルタイムレンダやらなきゃなぁみたいな気持ちになっていたわけですが、今こうなったのはなんだか理解できる部分があります。

あと追記:

お話

「この見た目」、思い浮かぶものが色々 (私にも) あるし、(色んな人にも) あると思います。

www.teamlab.art

www.ubisoft.co.jp

個人的に結構印象が深かったのがコレだったりします:

beautifl.net

昔からこの辺「見たい」し「作りたい」部分があったような気がするので、今回はそれをある程度達成できてめちゃうれしみがありました。 どこか意識に残っている風景を今になってやっと作ることができた、みたいなのは成長を感じる部分もあり、感情的な部分もあり、こう、いいなと思うところです。はい。 特に「抽象の世界で作った」ことが良くて、ある種の本質を観られたということでもあるわけで。うん。

そういう作りたい風景があるのかはなかなかわからないわけですが、どうせあるんだろうし、作ってわかる部分もあるだろうし、まぁやっていきだと思います。

以上、お話でした。

追記: カーブがちょうど逆を向くことで今までの綺麗な軌跡が観られる、というのは実は偶然です。 目の前でトレイルがわちゃわちゃしてることしか頭には無かったんですが、気づいたら軌跡が知らないうちに綺麗になってました。 そういう面から「予想以上」が出てきてすごい嬉しいし「囚われてしまった」感じもあって、こう、はい。いいことではあります。

これを観察できたということはこれを再現できるというところがあるわけで、「身」が増えて嬉しいです。

おまけ

f:id:phi16_ind:20200515104717p:plain

この話を書き忘れていました。色反転したら綺麗だろうなぁと最初から思っていたんですが結局光のままにしたのでした。 色反転は結構文脈的で、光学現象としては存在しないし実際使われているのはエフェクトとしてが多いとは思うわけですが、この「重み」はうまく扱ってあげたいなぁとは思うものです。

「勝手に読み取った文脈」からスローモーション感とかを感じてしまうので単純にはいかないなと思いました。まる。