【アセット紹介】Magic Mirror Lite で鏡を作る【Unity】

こちらはブログからの転載になります。そのままコピーしたので所々レイアウトがおかしい所があるかも。
https://raspberly.hateblo.jp/entry/UnityAdventCalendar2019_11  



この記事は[Unity #3 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/unity3)、11日目の記事です。 
昨日は[@tetsujp84](https://qiita.com/tetsujp84)さんによる「[UniTaskを使ったポップアップの作成](https://tetsujp84.hatenablog.com/entry/2019/12/10/225207)」でした。

<iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="Unity #3 Advent Calendar 2019 - Qiita" src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fqiita.com%2Fadvent-calendar%2F2019%2Funity3" frameborder="0" scrolling="no"></iframe>
<cite class="hatena-citation"><a href="https://qiita.com/advent-calendar/2019/unity3">qiita.com</a></cite>

今回はアセットの紹介をしていきます。 
紹介するのは**Magic Mirror Lite**。鏡を簡単に実装する無料アセットです
[![f:id:Raspberly:20191203112000p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/R/Raspberly/20191203/20191203112000.png "f:id:Raspberly:20191203112000p:plain")](https://www.assetstore.unity3d.com/#!/content/34824?aid=1101l7KK9)
https://assetstore.unity.com/packages/tools/particles-effects/magic-mirror-lite-reflection-for-unity-34824?aid=1101l7KK9
![f:id:Raspberly:20191210235852p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/R/Raspberly/20191210/20191210235852.png "f:id:Raspberly:20191210235852p:plain")

[:contents]

# どんなアセット？

**鏡を実装するアセット**です。  
Unityで鏡を作る方法はいくつかありますが、 
このアセットを使えばとても短い時間で簡単に実装することができます。 

**対応するUnityは5.6.5以上**です。かなり昔のプロジェクトでも導入できそうです。 
**VRChatでも使えそう**。

> このアセットで鏡バグをUnityで再現できた。という情報があったので使ってみたらこっちも再現した！  
> VRChat民必須では！https://t.co/p4pvrq42D5[\#vrchat](https://twitter.com/hashtag/vrchat?src=hash&ref_src=twsrc%5Etfw) [pic.twitter.com/U7wG5iy4jX](https://t.co/U7wG5iy4jX)
> — エルディア (@Lda6lge) [2019年10月26日](https://twitter.com/Lda6lge/status/1188135469000740865?ref_src=twsrc%5Etfw)

アセットパブリッシャーは[Weather Maker](https://raspberly.hateblo.jp/entry/WeatherMaker)でもお馴染み[Jeff Johnson](https://www.digitalruby.com/)さんです。

# 開発環境
Unity2019.3.0f
Magic Mirror Lite ver1.2.0
※SRPには対応していません。BuiltInシェーダーを使いましょう。 
※一部インスペクターに**再帰**や**VRモード**の項目がありますが**Lite版はサポート**していません。
# サンプルシーンの確認
Demoフォルダの中にDemoSceneが入っているのでこちらを確認してみましょう。
![f:id:Raspberly:20191203112604p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/R/Raspberly/20191203/20191203112604.png "f:id:Raspberly:20191203112604p:plain")
すると、密室に黒い鏡と人型のオブジェクトがあるシーンが展開されます。 
黒い鏡には何も映っていません。それではPlayボタンで実行してみましょう。
![f:id:Raspberly:20191203112809p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/R/Raspberly/20191203/20191203112809.png "f:id:Raspberly:20191203112809p:plain")

![f:id:Raspberly:20191210022147g:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/R/Raspberly/20191210/20191210022147.gif "f:id:Raspberly:20191210022147g:plain")
鏡が動きながら、キャラクターのモデルとパーティクルシステムが鏡に反射しているのが見て取れます。

# 実際に鏡を置いてみる

鏡の使い方は簡単です、Mirrorプレハブを自分のシーンに配置するだけ。
![f:id:Raspberly:20191203114850p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/R/Raspberly/20191203/20191203114850.png "f:id:Raspberly:20191203114850p:plain")
ちなみに、この鏡の縁部分などは取り外すことができます。 
Mirrorの中に入っているMirrorFrameを非アクティブにするか削除すればよい。
![f:id:Raspberly:20191210160520p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/R/Raspberly/20191210/20191210160520.png "f:id:Raspberly:20191210160520p:plain")

## インスペクターパラメーター(MirrorReflectionScript)

**Maximum Per Pixel Light** : 鏡像に表示されるピクセルごとのライトの最大数。 
屋外やライトがたくさんある所にこの鏡を置くと、処理不可が高くなる恐れがある。 
そういう時にこの値を小さくすると改善されるようです。
**Texture Size** :&nbsp;ミラーのテクスチャサイズ。これは大きくする必要があります。 
値が小さいほど荒い鏡になります、高いほどよい。
![f:id:Raspberly:20191210022539g:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/R/Raspberly/20191210/20191210022539.gif "f:id:Raspberly:20191210022539g:plain")
**Clip Plane Offset** :&nbsp;ミラーの近接面から減算
![f:id:Raspberly:20191210022601g:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/R/Raspberly/20191210/20191210022601.gif "f:id:Raspberly:20191210022601g:plain")
**FarClipPlane** : カメラに映る平面の距離
**ReflectLayers** : どのレイヤーが反映されるか
**AddFlareLayer** :&nbsp;FlareLayerを含めるかどうか
**NormalIsForward** : 法線の向き。四角形の場合はTrue、平面の場合はFalseにします。
**AspectRatio** :&nbsp;アスペクト比。デフォルトを使用するときは0にする。
**MirrorRecursion** : 複数のミラーで合わせ鏡をするならTrue、そうでないならFalseにする。(Lite版は非サポート)

## インスペクターパラメータ(シェーダー)
リム(輪郭)やスペキュラー(スペキュラー)など、光沢感を強くしたり色を変えたりできます。
![f:id:Raspberly:20191210162357p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/R/Raspberly/20191210/20191210162357.png "f:id:Raspberly:20191210162357p:plain")
Detail Texture : 鏡表面のテクスチャ
Detail Tint Color : 表面の色合い
Specular Color : 鏡面反射の色
Specular Area : 鏡面反射の面積
Specular Intensity : 鏡面反射の強さ
Reflection Tint Color :反射の色合い&nbsp;
少し黒っぽくしたりなど。ただし窓ガラスのような半透明にはできない模様。 
いろいろ値を変えてみると面白いかも。

# まとめ
・プレハブを置くだけで鏡を実装することができる
・**Playモードにしないと鏡は機能しないことに注意**

# Pro版の紹介
こちらのアセットですが、有料のPro版が存在します。
<iframe style="width: 600px; height: 130px; border: 0px;" src="https://api.assetstore.unity3d.com/affiliate/embed/package/103687/widget-wide?aid=1101l7KK9"></iframe>
https://assetstore.unity.com/packages/tools/particles-effects/magic-mirror-pro-recursive-edition-103687?aid=1101l7KK9
無料版との違いは、
・再帰的な反射ができる
・再帰的な影のレンダリングも可能
・VRのサポート(HTC Viveはシングルパスがサポート)
などです。

注意点としては、 
・再帰反射は鏡2枚まで、3枚以上はバグあり
・SRPは未対応
・Android VR、Oculus Questは未対応
・MACの場合マルチパスが壊れる
あたりでしょうか。

# 他にある鏡の実装方法

## MirrorReflection

Unity4からあるやり方。
<iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="UnityのMirrorRefrectionによる鏡の表現 - Qiita" src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fqiita.com%2FUnagiHuman%2Fitems%2F6fae8e52d9c5c73ce3b0" frameborder="0" scrolling="no"></iframe>
<cite class="hatena-citation"><a href="https://qiita.com/UnagiHuman/items/6fae8e52d9c5c73ce3b0">qiita.com</a></cite>
## Reflection Probeの鏡面反射で鏡を作る
周辺をキャプチャするカメラでキューブマップを生成し、 
キューブマップを反射マテリアルに適応することで鏡を実現する方法。
<iframe class="embed-card embed-blogcard" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;" title="Reflection Probeで鏡面反射する床を作る - おもちゃラボ" src="https://hatenablog-parts.com/embed?url=http%3A%2F%2Fnn-hokuson.hatenablog.com%2Fentry%2F2016%2F10%2F17%2F202135" frameborder="0" scrolling="no"></iframe>
<cite class="hatena-citation"><a href="http://nn-hokuson.hatenablog.com/entry/2016/10/17/202135">nn-hokuson.hatenablog.com</a></cite>
## @nkjzmさんの独自実装の鏡
去年の[Unity Advent Calendar 2018](https://qiita.com/advent-calendar/2018/unity)で紹介された方法。
<iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="Unityで鏡を実装する方法 - Qiita" src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fqiita.com%2Fnkjzm%2Fitems%2Fccba41a6e7e5211aae95" frameborder="0" scrolling="no"></iframe>
<cite class="hatena-citation"><a href="https://qiita.com/nkjzm/items/ccba41a6e7e5211aae95">qiita.com</a></cite>    

以上となります。
明日のアドベントカレンダーは[@KoukiShimoya](https://qiita.com/KoukiShimoya)さんによる、
「[UnityでコマンドRPGをキューを使って実装する その2](https://qiita.com/advent-calendar/2019/unity3)」です。
乞うご期待！

余談ですが、[Unity Advent Calendar 2019 #1](https://qiita.com/advent-calendar/2019/unity)の12日目の記事にて、
鏡を使ったおもしろ表現方法について紹介しますのでそちらもどうぞ。
今年のUnity Advent Calendarは3枠あるので、みなさんもいろいろチェックしてみてくださいね！
[Unity Advent Calendar 2019 - Qiita](https://qiita.com/advent-calendar/2019/unity)
[Unity #2 Advent Calendar 2019 - Qiita](https://qiita.com/advent-calendar/2019/unity2)
[Unity #3 Advent Calendar 2019 - Qiita](https://qiita.com/advent-calendar/2019/unity3)

他のアセットの紹介記事はこちら↓   

<iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="アセット紹介 カテゴリーの記事一覧 - Raspberlyのブログ" src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fraspberly.hateblo.jp%2Farchive%2Fcategory%2F%25E3%2582%25A2%25E3%2582%25BB%25E3%2583%2583%25E3%2583%2588%25E7%25B4%25B9%25E4%25BB%258B" frameborder="0" scrolling="no"></iframe>
<cite class="hatena-citation"><a href="https://raspberly.hateblo.jp/archive/category/%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%E7%B4%B9%E4%BB%8B">raspberly.hateblo.jp</a></cite>

他間違っている箇所、わかりにくい所がありましたらコメントにお願いします。