Edited at

[Unity] ParticleSystemでMeshを描画してバナー等の背景に使うといい感じになる

banner.png

これってトリビアになりませんか? (なりません)


実行環境


  • Unity2018.2.7f1


概要

最近、UnityのParticleSystemでMeshを描画するのにハマっています。

幾何学的な絵を作り、それをIllustratorでサイズ等を加工し、バナー等の背景に利用しています。

Unityで絵作りをしてそれを静的コンテンツに持ってくる手法は非常に楽で良いです。

ParticleSystemでMeshを描画する手法は既に各所で纏められていますが、備忘録として置いておきます。


ParticleSystemにてMeshを描画する

まずはScene上に ParticleSystem を追加します。

particle_mesh1.gif

次に Renderer Moduleを選択し、RenderModelを Mesh に変更します。

そして Mesh の項目から描画したい Mesh を選択します。今回は Cube を選択します。

particle_mesh2.gif

次に Material の項目を設定し、見た目を整えていきます。

Material を新しく作っていきます。Shader はParticle用のものを選択します。

Unity2018から は Particle/Standard Surface および Particle/Standard Unlit が標準になっていくのでそちらを指定します。

(ただしモバイル端末で使用する場合は引き続き Mobile/Particle/* を使用していくのが良いでしょう)

image.png

【CEDEC2018】 パーティクル新機能の紹介 - YouTubeより

Standard Surface は光源の影響を受け、影の付き方等を考慮してくれます。

particle_mesh3.gif

Standard Unlitは光源の影響を無視し、指定した色やテクスチャをそのまま出力します。

particle_mesh4.gif


パラメータを調整する

ParticleSystem における各Moduleの説明はここでは割愛しますが、とりあえず色々なパラメータを触ってみることを推奨します。

1つオススメしたい機能としては Random Between Tow Constants というものがあります。

標準だと各パラメータに1つの固定値しか指定できないですが、上記の設定をすることで「2値の間でランダムに値を決定する」ということができます。

今回に限らず、演出を自然に見せたい時にオススメです。

particle_mesh5.gif

Emission Moduleで出力する数を増やしたり (MaxParticles で指定した数以上には出力されないので注意)

Start Speed ではなく Velocity over Lifetime Moduleで速度を付けたり

Rotation over Lifetime Moduleでそれぞれを回転させたり

カメラの位置を変更したり...

particle_mesh6.gif

パラメータを調整するとこんな感じのものもノーコディングで作ることが出来ます。


Mesh GPU Instancing を有効にする

Unity2018.1からMeshのParticleに対して GPU Instancing を設定できるようになりました。

標準の ParticleSystem ではCPU側でMeshを纏めて(バッチングして)からGPUに渡すことで、DrawCallを減らして負荷が増えないようにしています。

しかし、CPU側のバッチング処理はMeshのポリゴン数が多いとそれだけ負荷になるため、あまり多量のモデルを表示することが出来ません。

Unity 2018.2.7f1 Personal (64bit) - [PREVIEW PACKAGES IN USE] - SampleScene.unity - UnityParticleMesh - PC, Mac & Linux Standal… 2018-10-06 14-22-05.png

GPU Instancingを有効にしないと、上記のようなWarningが出て、表示数が制限されることが確認できました。

GPU Instancingを有効にすることで、同一のMeshを複数、パフォーマンス良く描画することが可能になります (結果として多くのパーティクルを描画できます)

particle_mesh7.gif

仕組みの詳細に関してはテラシュールブログさん/公式ドキュメントをご参照ください。

また GPU Instancingは一部のプラットフォームでのみ有効になります。

WebGL1.0では有効にならなかったのでWebGL2.0で試したのですが、2018.2.7f1ではMeshが描画地点から移動しないという不具合が発生しています。

バナー等の背景で使用する場合は Standalone で試すのが良いでしょう。

(@maoさんアドバイス/検証ありがとうございました!)


作成したParticleをUnityRecorderで出力する

作成した絵をバナー等の絵に使用するために出力します。

Mac標準のスクリーンショットを使用したり、各種ソフトを使う手段も取れますが、今回は UnityRecorder というAssetを使用します。

Unity 2018.2.7f1 Personal (64bit) - [PREVIEW PACKAGES IN USE] - SampleScene.unity - UnityParticleMesh - PC, Mac & Linux Standal… 2018-10-06 14-48-49.png

Unity Recorder - Asset Store

AssetStoreからダウンロード/インポートすると Window > General > Recorder というメニューが追加されます。

そこから Recorder Window を選択します。

スクリーンショット 2018-10-06 15.09.51 2018-10-06 15-10-10.png

以下のようなメニューが表示されます。

Add New Recorders を選択して、新しいRecorderを追加します。この時に以下の4つの出力形式を選択できます。


  • AnimationClip (Unity上で使用する場合に選択する)

  • Movie (MP4/WEBMの形式から選択可能)

  • Image Sequence (静止画を連番で出力する)

  • GIF Animation

静止画で使用する目的の場合は Image Sequence を選択します。

Captureの項目で Game View を選択し、GameViewに描画される内容をキャプチャするように設定します。

また Output Resolution/Aspect Ratio で解像度/アスペクト比を指定します。

(これによりスクリーンショットを取るより、高解像度の絵を取得することができます)

実際にUnityEditorで実行し、Particle再生中に START RECORDING を押してみます。

Game View は止まってしまったように見えますが、フレーム単位で静止し、撮影後にフレームを進める状態となります。

(UnityEditor上で一時停止した状態でも START RECORDING を押すことは可能です)

particle_mesh8.gif

指定した保存場所に静止画が保存されるので、それを利用します。

Recordings 2018-10-06 15-25-31.png

注意事項としては、何回も撮り直して、それぞれの撮り直し内容を保持して起きたい場合

File Name に <Take> を追加してあげる必要があります (もしくは を追加して撮影日時で保存する)

TakeSTART RECORDING 毎に増加する数で File Name に <Take> の指定がない場合、 上書き となってしまいます。

particle_mesh9.gif


最後に

いい絵が撮れたら、Illustrator等に持って行って文字を入れたり加工したりすると良いでしょう。

(もちろん、uGUIやTextMeshProを使って、Unity上でバナーを仕上げて、出力してそのまま使うアプローチも素敵だと思います)

banner.png

ParticleSystem を使ってノーコーディングで幾何学的な背景を作成し、 UnityRecorder を使って静止画出力するところまで

Unityを使っているエンジニアがサイトや技術書の背景に使ったり、Unityに精通していないデザイナーがUnityを触るきっかけになれば幸いです。