ドット絵のキャラクターに逆光を当ててみる

#### [前回の記事](https://qiita.com/flankids/items/3a69bbdc4b52d0a516ef) の続きです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ドット絵のキャラクターを自然に3D空間に馴染ませるテクニック <a href="https://t.co/juxESYa1sE">https://t.co/juxESYa1sE</a> <a href="https://twitter.com/hashtag/Qiita?src=hash&amp;ref_src=twsrc%5Etfw">#Qiita</a> <a href="https://t.co/WnlyWOtoRn">pic.twitter.com/WnlyWOtoRn</a></p>&mdash; 徳川バガ寅 (@flankids) <a href="https://twitter.com/flankids/status/1166051747288080385?ref_src=twsrc%5Etfw">August 26, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# こういうことをやりました

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">逆光の表現 <a href="https://t.co/DTrxBnRllD">pic.twitter.com/DTrxBnRllD</a></p>&mdash; 徳川バガ寅 (@flankids) <a href="https://twitter.com/flankids/status/1166417827290435585?ref_src=twsrc%5Etfw">August 27, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

* 前回記事で用意したSpriteRendererに **裏から光を当てて影を落とす**
* **ボリュームライト** を適用

# SpriteRendererに裏から光を当てて影を落とす

　普通にライトの角度変えればいいんじゃないの？と思ってましたが

<img height = 300 src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/91123ef2-ff97-dbcc-90d5-9b0f2e621631.png">

こっちは影が出るのに

<img height = 300 src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/b5c55010-a4ac-f6e3-9874-9d96d9d6bc37.png">

こっちは出ない。。。

　これはどういうことかというと、カメラをSpriteRendererの後ろに回るとわかるのですが、**裏面に表示用の面が無いため** です。その結果、光を遮って影を作ることができることができていません。

### Standardシェーダーに細工をする

　前回、もろもろの表現をするために、SpriteRendererに**Standardシェーダーを適用**しました。このStandardシェーダーは **ポリゴンの面が無い方向には何も表示しない（カリング）** という処理しているのですが、裏面にポリゴンの面がないSpriteRendererにおいてはそれだと都合が悪いです。

#### 1. Starndardシェーダーをダウンロード

　そこで、**カリング処理をしないStandardシェーダー** を用意しましょう。StandardシェーダーはUnity組み込みのシェーダーで、普通は編集することはできません。[**Unity ダウンロード アーカイブ**](https://unity3d.com/jp/get-unity/download/archive) へアクセスし、今使っているUnityのバージョンから、**ビルトインシェーダー**をダウンロードしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/a141dde5-167a-1744-ebb6-7e8c4f22d81e.png)

　ダウンロードしたzipを展開し、フォルダ内から **Standard.shader** を見つけましょう。それをプロジェクト内にインポートしてください。

#### 2. シェーダー名を変える

　インポートしたままだと、Unity内組み込みのStandardシェーダーと名前がバッティングしてややこしいです。**ファイル名**と、**シェーダー名定義**を**「StandardCullOff」**とでも変えておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/7f55f466-4313-fe71-5257-3479a5aa4a5a.png)

```StandardCullOff.shader
// Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)

Shader "StandardCullOff" // ← ここがシェーダー名定義！
{
    Properties
    {
...
```

#### 3.カリング処理をOFFにする

Shaderファイル内の54行目くらいの以下の場所に **Cull Off**と記述しましょう。

```StandardCullOff.shader
    SubShader
    {
        Tags { "RenderType"="Opaque" "PerformanceChecks"="False" }
        LOD 300

        Cull Off // ← これを追加！

        // ------------------------------------------------------------------
```

#### 4.シェーダーをマテリアルに設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/da94dd91-f0f8-01b0-4044-a3af8c059b20.png)

これで背面からの光でも影が出るようになります！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/e8b6ce63-b092-f285-e01f-be5599a24062.png)


# ボリュームライトを適用

　[初回の記事](https://qiita.com/flankids/items/f389531a8e3213f047bc)でも触れましたが、ボリュームライトとは、本来見えない光の形が、霧やホコリによって見えることです。（[参照](http://www.asahi-net.or.jp/~qb3k-kwsk/3dcg/know/layout/lay32.html)）空間に奥行きを感じてリアリティが出て、リッチな印象を与えます。

<img height = 300 src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/9a542f49-4b06-a6d9-239d-092ab6080565.png">

　ボリュームライトの実現にはいくつか手段がありますが、今回はGitHubで公開されている**Volumetric Lights**というアセットを利用します。

#### 1. Volumetric Lightsをダウンロード

　[**GitHubのプロジェクトページ**](https://github.com/SlightlyMad/VolumetricLights/) にアクセスし、**Download ZIP**をクリック。

<img height = 400 src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/9ece5042-819e-298e-e5f3-1076c0f39955.png">

#### 2. 必要なファイルをプロジェクトにインポート

　フォルダごとプロジェクトにインポートしてもいいですが、最低限必要なのは以下のファイルと思われます。

* Resources
* Scripts
* Shaders
* Textures

適宜プロジェクト内に取り込みましょう。

#### 3.コンポーネントを設定

* Cameraに **Volumetric Light Renderer** 
* Lightに **Volumetric Light**

をアタッチして、シーンを実行するだけでOKです！ただし、**Volumetric Light**のほうは、**Directional** か **Spot** のタイプのライトでしか有効にならないとのことなので、ご注意を。

<img height = 200 src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/bf36b756-692f-6f20-e68b-b3d220352197.png">　<img height = 200 src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/9a542f49-4b06-a6d9-239d-092ab6080565.png">

　光のシルエットが見えやすいように、光の通り道を部分的に作ったり、影のシルエットを意識したりするとその真価が発揮できる・・・かもしれません。
　このあたりコツを掴むのがやや難しいように感じたので、コンポーネントのパラメータの内容や、ライト・オブジェクトの配置の仕方について調べてみようと思います。

# 所感

　後ろから光が当たったときは、**リムライト的な考え方でSpriteRendererのフチが明るくなるといい**のですが、あくまで平面にノーマルマップを持たせたにすぎないので、今のところまだできていません。いよいよシェーダーをちゃんと触らないといけないかも…！
　今後はそのあたりと、Depth of Fieldを組み合わせて「オクトパストラベラー」や「The Last Night」っぽいジオラマシーンを作ってみようかなと思っています。