はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

【Unity】霧の中の光みたいなVolumetric lightをShaderGraphで作ってみる

はじめに

今回はVolumetricLightをShaderGraphで作ってみようという記事になります!

volumetric lightというのは霧の中にある光みたいな感じですね。完成形はこんな感じ。

before↓
f:id:hanaaaaaachiru:20200121171525p:plain

after↓
f:id:hanaaaaaachiru:20200121190713p:plain

さっそくみていきましょう。

環境

Unity2019.3.0f3
Universal Rendering Pipeline
Probuilder v4.1.2

方針

まずはざっくりとした作る方針を紹介します。

  1. SpotLightで地面を照らす
  1. Probuilderで光の通る道?のような多角錐を作成
  1. ShaderGraphで多角錐のモデルにエフェクトをかける
  1. 配置する

途中でProbuilderでモデリングしますが、とても簡単な図形なので初心者でもすぐできると思います。

またblender等が使いたい場合はそちらでも全くかまいません。

SpotLightで地面を照らす

こんな感じのステージを用意してみました。

f:id:hanaaaaaachiru:20200121171536p:plain

普通は電灯とかな気がしますが、ちょうど作成しているボクセルのゲームで使っているので流用しちゃいます。

ここは好きなように設定してくれれば良いですが、私は環境光を全くなくしてSpotLightを配置し、Bakeしています。(そもそもLWRPだとSpotLightをリアルタイムにできないはず)


ちなみにBakeの時間でいつもイライラしてしまう私のような人に朗報で、Unity2018.3b3(Macは2019.1)からGPUを駆使して爆速でしてくれる機能が追加されました。

一部できない事がありますが必ず設定しておいた方が良いと思います。
【Unity】Progressive LightmapperのGPU accelerationでライトマップのベイクが爆速に - テラシュールブログ

モデルを作成する

Tools -> Probulder -> Probuiler WindowからPrubuilerのウィンドウを開き,以下の画像のように図形を作成します。

f:id:hanaaaaaachiru:20200121170359p:plain


今回はとりあえずこのままConeの原型のまま使いますが、電灯などの場合は上の頂点のところを少しいじって光が出てくる形に合わせたりするとかっこいいかもしれません。

Number of Sideは最大の32にしていますが、こちらの数が多いほどきめ細かく綺麗に見えます

もっときめ細かくしたいなら少し加工するか、blenderで新しく作成するなんかでも良いでしょう。

ちなみにUnityはスマホでも頂点が数万個ぐらいなら余裕なので、気にするほどではないのであしからず。

エフェクトを作成する

次にShaderGraphを使っていい感じの見た目に変更していきましょう。

f:id:hanaaaaaachiru:20200121173009p:plain

透過ができるようにTransparentにする事を忘れないでください。

また内容的に一見難しそうに見えるかもしれませんが、やってることは簡単です。


左上のブロックではカメラの座標と物体の座標の差からアルファ値に影響を及ぼしています


真ん中のブロックでは、uvノードのy座標のみ取り出しています

以前記事を書いたので是非そちらで。
【Unity】ShaderGraphのUVノードについて - はなちるのマイノート
【Unity】ShaderGraphのLerpノードについて - はなちるのマイノート


下のブロックはフレネル効果を用いています。

こちらの記事にまとめました。
【Unity】ShaderGraphでフレネル効果をお手軽に - はなちるのマイノート

配置

マテリアルに先程作成したShaderを設定し,多角錐のゲームオブジェクトに適応してみてください。

後は座標なんかを調整すると・・・

f:id:hanaaaaaachiru:20200121190724p:plain

いい感じなライトを作ることができました。

発展

透明オブジェクトと非透明オブジェクトの接触検知により、アルファ値を変化させる仕組みも付け加えるとなお良いかもしれません。

やり方はこちらの公式サイトが参考になるはずです。
https://www.youtube.com/watch?v=7ToExWKVZW0&t=991s


後は今回めちゃくちゃ参考にさせていただいたこちらの動画の最後にある、光の揺らぎ?を追加してみたりも良さそうですね。
https://www.youtube.com/watch?v=rihJzWq7sE4