【Unity VFX】ブラックホールを作ってみた

2021/06/20に公開

ブラックホール表現を作ってみました。
https://www.youtube.com/watch?v=_xiIXePjpW0

今回は、ブラックホールのゆがみ表現の実装方法について解説します。

環境

Unity 2020.2.0a17

使用したツール・機能など

  • Amplify Shader Editor (シェーダー作成)
  • Bolt (箱の制御)
  • Timeline (エフェクトや箱の制御)
  • After Effects / Substance Designer (テクスチャ作成)

ブラックホールの歪みエフェクト

ブラックホール発生時、以下のような歪みエフェクトが入っています。
https://youtu.be/6V30q516Lhw

実際のエフェクトでは、Custom Dataを使って歪みの強度やゆがみのスクロール強度をアニメーションさせています。
https://youtu.be/-qNBq_uFBnE


CustomDataでゆがみの強度(Distortion Amount)や スクロール(Distortion Scroll)を動かす

ゆがみ表現について

こちらはゆがみ効果をかけるビルボードを床と並行に配置しています。

ゆがみ表現の作り方

ディストーションマップをUVスクロールさせ、スクリーン座標を揺らします。

歪みシェーダー

今回作ったシェーダーです。

https://gist.github.com/rngtm/b4b23e3ea185331e003e47c6aed7afd4#file-voiddistortion-shader

UV Shear (せん断)

今回のシェーダーでは、Shear (せん断)を実装しています。

ShearのX成分を増やすと、UVがヨコに歪みます。

UV ShearのX成分を増やすと、ヨコに歪む

ShearのY成分を増やすと、タテに歪みます。

極座標 + UV Shear

極座標変換したUVにShearを適用すると、渦を巻くような形状を作ることができます。


UV ShearのX成分を増やすと、半径R方向に歪む


UV ShearのY成分を増やすと、角度Θ方向に歪む

UV Shearの実装

Shearを実装したシェーダーは以下になります。

UV Shearというノードがありますが、これはCustom Expressionノードで、せん断を行います。

UV Shear
UV.xy + UV.yx * Shear.xy

Static Switchノード

Static Switchを利用して、極座標変換の有無をチェックボックス上で切り替えられるようにしています。

ゆがみ表現

画面にゆがみをかける方法

Grab Screen Colorノードを使うと、スクリーン座標を指定して画面の色を取得できます。
スクリーン座標にノーマルマップを足すことによりゆがんだような効果を作ることができます。

ディストーションテクスチャでゆがめる

ノーマルマップに極座標変換・UV Shear・UVスクロールを適用することで、
渦が集まるような表現を作ることができます。

シェーダー

マテリアルは以下のように設定しています。


歪みにマスクをかける

歪みシェーダーを適用したビルボードのフチに注目すると、歪みありの領域とそれ以外の領域が不自然に途切れています。
これは違和感の原因になるので、マスクをかけます。

ディストーションマップにマスクを乗算し、外側に近づくほど歪み強度が0に近づくようにします。

結果

歪み全体はこのようになります。

歪みとParticleSystemの連携

エフェクトの進行に従ってゆがみがだんだん強く、歪みの流れが速くなるような演出を作る方法を紹介します。

CustomData / Custom Vertex Streams の設定

Particle Systemの Custom Data にて、
ゆがみテクスチャのUVスクロールとゆがみの強度を追加し、Curveを設定します。

Custom Vertex Streams に CustomDataを追加します。
Custom1.xyzw (TEXCOORD1.xyzw) という表示が出ていればOKです。

最終的なシェーダー

今回のシェーダーはGistに置いてあります。
https://gist.github.com/rngtm/b4b23e3ea185331e003e47c6aed7afd4#file-voiddistortion-shader

Discussion