前回の記事 の続きです。
ドット絵のキャラクターを自然に3D空間に馴染ませるテクニック https://t.co/juxESYa1sE #Qiita pic.twitter.com/WnlyWOtoRn
— 徳川バガ寅 (@flankids) August 26, 2019
こういうことをやりました
逆光の表現 pic.twitter.com/DTrxBnRllD
— 徳川バガ寅 (@flankids) August 27, 2019
- 前回記事で用意したSpriteRendererに 裏から光を当てて影を落とす
- ボリュームライト を適用
SpriteRendererに裏から光を当てて影を落とす
普通にライトの角度変えればいいんじゃないの?と思ってましたが
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F184294%2F91123ef2-ff97-dbcc-90d5-9b0f2e621631.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3e3f32f1b4da4b2157daa5c5039a3124)
こっちは影が出るのに
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F184294%2Fb5c55010-a4ac-f6e3-9874-9d96d9d6bc37.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=eb50ad93aed7c349fad4b62fa9256318)
こっちは出ない。。。
これはどういうことかというと、カメラをSpriteRendererの後ろに回るとわかるのですが、裏面に表示用の面が無いため です。その結果、光を遮って影を作ることができることができていません。
Standardシェーダーに細工をする
前回、もろもろの表現をするために、SpriteRendererにStandardシェーダーを適用しました。このStandardシェーダーは ポリゴンの面が無い方向には何も表示しない(カリング) という処理しているのですが、裏面にポリゴンの面がないSpriteRendererにおいてはそれだと都合が悪いです。
1. Starndardシェーダーをダウンロード
そこで、カリング処理をしないStandardシェーダー を用意しましょう。StandardシェーダーはUnity組み込みのシェーダーで、普通は編集することはできません。Unity ダウンロード アーカイブ へアクセスし、今使っているUnityのバージョンから、ビルトインシェーダーをダウンロードしましょう。
ダウンロードしたzipを展開し、フォルダ内から Standard.shader を見つけましょう。それをプロジェクト内にインポートしてください。
2. シェーダー名を変える
インポートしたままだと、Unity内組み込みのStandardシェーダーと名前がバッティングしてややこしいです。ファイル名と、シェーダー名定義を**「StandardCullOff」**とでも変えておきましょう。
// Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)
Shader "StandardCullOff" // ← ここがシェーダー名定義!
{
Properties
{
...
3.カリング処理をOFFにする
Shaderファイル内の54行目くらいの以下の場所に Cull Offと記述しましょう。
SubShader
{
Tags { "RenderType"="Opaque" "PerformanceChecks"="False" }
LOD 300
Cull Off // ← これを追加!
// ------------------------------------------------------------------
4.シェーダーをマテリアルに設定
これで背面からの光でも影が出るようになります!
ボリュームライトを適用
初回の記事でも触れましたが、ボリュームライトとは、本来見えない光の形が、霧やホコリによって見えることです。(参照)空間に奥行きを感じてリアリティが出て、リッチな印象を与えます。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F184294%2F9a542f49-4b06-a6d9-239d-092ab6080565.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=277803022a00535b9f06f7b824abe98a)
ボリュームライトの実現にはいくつか手段がありますが、今回はGitHubで公開されているVolumetric Lightsというアセットを利用します。
1. Volumetric Lightsをダウンロード
GitHubのプロジェクトページ にアクセスし、Download ZIPをクリック。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F184294%2F9ece5042-819e-298e-e5f3-1076c0f39955.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d69ed7c5bec049a13133178af0167038)
2. 必要なファイルをプロジェクトにインポート
フォルダごとプロジェクトにインポートしてもいいですが、最低限必要なのは以下のファイルと思われます。
- Resources
- Scripts
- Shaders
- Textures
適宜プロジェクト内に取り込みましょう。
3.コンポーネントを設定
- Cameraに Volumetric Light Renderer
- Lightに Volumetric Light
をアタッチして、シーンを実行するだけでOKです!ただし、Volumetric Lightのほうは、Directional か Spot のタイプのライトでしか有効にならないとのことなので、ご注意を。
光のシルエットが見えやすいように、光の通り道を部分的に作ったり、影のシルエットを意識したりするとその真価が発揮できる・・・かもしれません。
このあたりコツを掴むのがやや難しいように感じたので、コンポーネントのパラメータの内容や、ライト・オブジェクトの配置の仕方について調べてみようと思います。
所感
後ろから光が当たったときは、リムライト的な考え方でSpriteRendererのフチが明るくなるといいのですが、あくまで平面にノーマルマップを持たせたにすぎないので、今のところまだできていません。いよいよシェーダーをちゃんと触らないといけないかも…!
今後はそのあたりと、Depth of Fieldを組み合わせて「オクトパストラベラー」や「The Last Night」っぽいジオラマシーンを作ってみようかなと思っています。