自己発光マテリアルを利用してより液晶画面っぽさを出す

# はじめに
Unityの基本的な部分を理解している方向けですが、難しい内容ではないのでUnity初心者向けの記事です。
自己発光マテリアルを使用して、オブジェクトを光らせるだけ。

## 自己発光マテリアルって？
簡単に言うと言葉そのままの意味で、自分で発光するマテリアルです。[詳しくはこちら](https://docs.unity3d.com/ja/2018.4/Manual/StandardShaderMaterialParameterEmission.html)
この自己発光マテリアルを適応したオブジェクトは、暗い場所であっても明るいままになります。
PostProcessingというものと組み合わせると間接照明なども作れたりします。PostProcessingについては[こちら。](https://qiita.com/sudare222/items/5be4b93de07dc3d7fd02#%E6%A6%82%E8%A6%81)


## 環境
・Unity2019.4.29f1

# 自己発光マテリアルの設定
いたって簡単です。
スタンダートシェーダーのマテリアルを作成します。
そして、`Inspector`の`Emission`にチェックを入れれば自己発光マテリアル完成です。

今回は液晶画面を作りたいので、液晶画面に写したいもののテクスチャを`Albedo`に設定します。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1303641/76928b77-ad39-a561-e9f0-f66d2acb02b9.png)

# 液晶画面の質感を出す
PC画面の液晶画面をより **「液晶画面っぽく」** していこうと思います。

## ステップ1
まずこれが、先ほど設定した自己発光マテリアルです。自己発光マテリアルじゃない場合と比べてみてもあまり変わってませんね。
明るいところでは問題ないかもしれませんが、暗いところだと若干違和感があります。
めちゃくちゃ画面の明るさを落としている人だとこんな感じかもしれませんが。
ここからさらに液晶画面っぽくしていきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1303641/25290870-f2bf-73a0-8174-e2c382f1ccb1.png)

## ステップ2
`Emission`の`Color`にも同じテクスチャを設定しましょう。
ここにテクスチャを設定することでマテリアルのどの部分を発光させるのかを制御することができます。今回の例の場合は、液晶画面のみで1マテリアルなのでテクスチャまるまる全部を設定しています。同一マテリアルで一部のみを発光させたい場合は、光らせたい部分のみをテクスチャをここに割り当てましょう。

そしてその後、`Color`の横にあるHDRと書いてある部分をクリックすると`HDR Color`というタブが開かれ、色を選べるようになると思います。
そこで、自然な見た目になるように色を調節しましょう。
恐らく最初は白飛びしたような感じになっていると思うので、色を少し黒寄りに寄せましょう。RGB値がそれぞれ真ん中になるくらいがちょうどいいかと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1303641/7207d886-3bf1-efa9-d6cc-9ccb7a15b637.png)

設定が終われば、二つを比較してみましょう。右側の方が液晶画面っぽさがあるのではないでしょうか。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1303641/120ab088-ca31-986e-d6d2-e3880ce1dcb8.png)

## ステップ3
次はさらに、液晶画面の明るさを弄ってみましょう。
`HDR Color`を開き、`Intensity`を 0.5 くらいにしてみましょう。液晶画面が少し明るくなったのではないでしょうか。

発光する色を指定したい場合は`Color`を、発光する強さ変えたい場合は`Intensity`を弄りましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1303641/2ace5c85-bcc9-6a24-c86d-2000e09de1d3.png)

最終的な結果を比較してみましょう。先ほどよりも画面が明るくなり、最初と比べると液晶画面感がさらに出たと思います。
これでも十分ですが、さらに質感を出すこともできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1303641/8cd62646-0f1c-8956-2594-0610ae2395ab.png)

次は応用です。

## PostProcessingを使ってみる。
PostProcessingsというものを使うと、さらに質感を出せます。
使い方については[こちら（別記事）](https://qiita.com/sudare222/items/5be4b93de07dc3d7fd02#%E6%A6%82%E8%A6%81)を読むか、調べてください。
一番最初のただのスタンダートシェーダーと、自己発光マテリアル化しつつPPS（PostProcessingsの略）を使った場合でだと、圧倒的な差があることが分かると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1303641/b56f4c5c-dcac-150a-98de-3192696a60fb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1303641/b9037531-3005-7e0f-62ff-6bf98b110b01.png)

# 部分的に発光させる場合
同一マテリアルで部分的な発光をさせる場合について解説します。
方法としては`Emission`の`Color`に光らせたい部分のみをテクスチャをに割り当てるだけです。
詳しく解説すると……

例えば、以下のようなオブジェクトの黄色部分だけを発光させたいと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1303641/8310f46d-6ada-74e3-40ba-1cbaf75d1415.png)


その場合、通常通り以下のようなテクスチャを`Albedo`に設定します。

<img width="200" alt="MainMap" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1303641/d18279a6-bae0-6906-cf5f-95b23c50a5d6.png">

そして、以下のような発光させたい部分のみのテクスチャを用意し、`Emission`の`Color`に設定します。（黄色以外の部分は透過している画像）

<img width="200" alt="MainMap" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1303641/175f8c9d-a146-67d0-d2e8-7e564c17edfd.png">

最後にEmissionの色や強さを調節すると、黄色部分のみが発光するオブジェクトが完成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1303641/c7bc8925-02c8-54de-5092-0dc828dcc8ad.png)
※画像はPostProcessingsがON状態のときのもの



# さいごに
「液晶画面感をより出す」といっても、今回の記事は液晶画面に当たるオブジェクトを自己発光マテリアルで光らせただけで、難しいことはしていません。
自己発光マテリアルは間接照明やライトの光っている部分の表現など、使い方は様々あるので使ってみてください。