HoloLensでよりMixed されたRealityを作ろう！～現実の環境光を反射する水を作ろう～

#野外HoloRangerになろう
　2016年に産声を上げ、今日までMixed Realityデバイスとして技術の先端を築き上げ今年、新型機であるHoloLens2が登場することで再び注目を浴びているHoloLensをこよなく愛し、仕事・趣味かかわらずHoloLensで活躍している人々のことをHoloRangerと呼びます。
　
　実機を持っている持っていないにかかわらず日本には多くのHoloRangerがそれぞれの知識や経験を生かしたコンテンツを作り上げ、MicrosoftのHoloLens開発者アレックス・キップマンからも高い注目を集めています。

　そんな中先日私が
>[「WindowsとMacの違いも判らなかった素人が一年でHoloLensアプリをリリースした」](https://qiita.com/Horomoto-Asahi/items/f4d0392324a13e6f248b)

という初心者がHoloRangerになった記事を書いたところリアクションが大きく驚いています。

　私は屋内（だけ）ではなく屋外で（も）HoloLensを使用することが大好きです。
　HoloLensはマシーンですので外の環境では屋内よりダメージを与えてしまうリスクが高いですが、反面多くの気づきを与えてくれます。

　この記事は野外HoloRanerとして生きている中で生まれた一つの成果をご紹介します。　

　※（注）やがいHoloRangerであってや（ば）いHoloRangerではありません！！

#MR Lighting Toolsとは？
　屋内に対し屋外ではその環境が刻々と変化します。
　例えば…空の色や雲の形、動植物の動き、風のなびき etc.

　HoloLensによるMixedRealityの世界のオブジェクトは、現実世界に存在するように見えてもあくまで仮想のオブジェクトなので開発者が設定しない限り重力や光を含め現実世界の影響を受けることはありません。
　HoloLensではSpatial Mapping（空間認識）を使うことで壁や床、家具といった現実の物理情報を得ることができるため、オブジェクトにコライダー（当たり判定）と重力を与えてあげればきれいに机や床の上にオブジェクトが落ちるといったアプリは簡単に作れます。
　風に関しても、重力と同じように水平方向に力をランダムで加えてあげればキャラクターモデルの髪などであればきれいに揺らすことができます。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">今日の <a href="https://twitter.com/hashtag/HoloLens?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens</a>　<a href="https://twitter.com/hashtag/Vroid?src=hash&amp;ref_src=twsrc%5Etfw">#Vroid</a> <br>lightingで夕焼けを少し強くしすぎたかな…？<br>でもすごく素敵なワンシーンになったと思う。<br><br>風機能は改善しながらいい感じに持っていく！ <a href="https://t.co/q4IQkwDBbF">pic.twitter.com/q4IQkwDBbF</a></p>&mdash; ホロ元@HoloRanger 🍣 (@HoloMotoRanger) <a href="https://twitter.com/HoloMotoRanger/status/1126430098523955200?ref_src=twsrc%5Etfw">2019年5月9日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###では、光は？
 ここで問題となるのが光です。
　重力をはじめとした力はある程度現実の動きと違っていても違和感を感じることは少ないです。
例えば…
　重力であれば空中にあったオブジェクトが最終的に机や床といった現実のものの上で止まれば、そこへ落ちる速度がある程度ゆっくりであっても人は「重力だ！」と感じることができるでしょう。

　ところが光の場合オブジェクトの動きではなく、色の風味を変化させることになるため現実の光による色の風味と違っていた場合「浮いて見える」と違和感が生まれます。

###MR Lighting　Toolsを使おう
　現実の光を反映させる手法として非常に導入しやすく効果があるのがMR　Lighting Toolsです。
　HoloLens単体でネットワークなしで機能し、負荷も比較的少ないのが魅力です。
 
　導入方法に関しては次の記事がわかりやすく参考になります
〇[「HoloLensでMR Lighting Toolsのデモシーンを試す」（MRが楽しい）](http://bluebirdofoz.hatenablog.com/?page=1558879345)

　MR Lighting Toolsは、アプリ起動時に頭を動かすたびに写真を撮影し仮想的な３６０°写真を作成します。
同時にその情報をオブジェクトに反映させることで現実の環境光を反映する体験を可能としています。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ホログラムで日本刀作ってみました！<br>これは存在感が…<br><br>テクスチャとかも付けたらカンペキな日本刀が作れそう！<br>本日の実験は満足！<a href="https://twitter.com/hashtag/HoloLens?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens</a>　<a href="https://twitter.com/hashtag/VRM?src=hash&amp;ref_src=twsrc%5Etfw">#VRM</a> <a href="https://t.co/q2wGlla1xB">pic.twitter.com/q2wGlla1xB</a></p>&mdash; ホロ元@HoloRanger 🍣 (@HoloMotoRanger) <a href="https://twitter.com/HoloMotoRanger/status/1133612823987122177?ref_src=twsrc%5Etfw">2019年5月29日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/HoloLens?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens</a><br>日本刀に刀紋付けたりいろいろした<br>これはたのしい！<br>非常に楽しい<a href="https://twitter.com/hashtag/HoloLens?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens</a> <a href="https://t.co/MIJ3X6Lif6">pic.twitter.com/MIJ3X6Lif6</a></p>&mdash; ホロ元@HoloRanger 🍣 (@HoloMotoRanger) <a href="https://twitter.com/HoloMotoRanger/status/1133661781551796227?ref_src=twsrc%5Etfw">2019年5月29日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

　上記私のツイートの動画ではBlenderを使用して簡単に日本刀を作成し、刀身のテクスチャをMR Lighting Toolsに同梱されている「lightCamera IBL」というshaderを使用しています。
　ここで出てきた　IBLという言葉は「Image Based Lighting」という技術で、写真から環境光を解析する技術（らしい）です。

###MR Lighting Toolsを導入する。
　導入法に関しては前述した記事を見ていただくのがわかりやすいですが、GitHubに公開されているプロジェクトをUnityに導入するだけです。
>[MR Lighting Tools…GitHub](https://unitylist.com/p/juq/MR-Lighting-Tools-Unity)

　インポートが完了したらUnity上部のタグ[MixedRealityToolKit]に[Lighting Tools]というものが追加されるのでその中の[Create Light Capture Object]を選択しましょう。
　するとhierarchyに[LightCapture]というオブジェクトが追加されます。
　これで導入は完了です。
　　
###日本刀を作ろう！
![SharedScreenshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320352/dfda44b5-b686-798d-dc86-dd73aaedbac7.jpeg)

　私はBlenderは勉強中なので、モデル自体はまだ配布できずノウハウだけお伝えします。
簡単にBlenderで日本刀を作りました。
　ここで重要なのが刀紋を別オブジェクトにした点です（テクスチャとかもっと勉強すればこんなことする必要はないらしい）

　これをfbxとして書き出し、Mixed Reality ToolKit を導入しMR用のプロジェクト、scene設定を済ませたUnityにインポートします。
　![SharedScreenshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320352/90878aea-b162-8a1a-1b85-9df795201dbc.jpeg)

　こちらが先ほどの日本刀をUnityへインポートした画面です。（テストプロジェクトなのでいろいろアセットがあるのは無視してください。）
　sceneへと日本刀を配置しましょう。

　次にAssetを右クリック、[Create]から[Material]を選択してマテリアルを作成します。
![SharedScreenshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320352/45159e5d-5d7b-d12b-d594-9243bfc09aa9.jpeg)

ここでは「日本刀」という名前を付けています。
　あとは簡単
Inspectorの「日本刀」下の[Shader]を[Standard]から[MixedReality ToolKit]の[LightCapture IBL]に切り替えます。
　最後に日本刀のオブジェクトに作成したマテリアルをアタッチすれば完成です。
エディタ上で実行してみましょう。

![SharedScreenshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320352/0b5f15c2-86cd-6298-da0d-8288d735fc3d.jpeg)
　
　エディタ上ではPCに搭載されているカメラが起動しインカメがあるPCをお使いの場合自分の顔が画面に現れるでしょう。
　マウスでぐりぐりと視点を変えればわかるのですが、視点を変えるたびに写真が撮影されて全天周写真が作成されていることがわかると思います。
　
　では、先ほど作った日本刀を見てみましょう！
　角度を変えたりすると顔が映り込むではないですか！！！！

　HoloLens実機にビルドした場合これで周りの環境光を反映させる日本刀の完成です。

###ワンポイントアップ

　先ほど作成した[日本刀]マテリアルをコピーして[日本刀　刀紋]と名付けます
![SharedScreenshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320352/4e196ae1-383a-be91-b90a-7f11e36a3e33.jpeg)

Inspectorから[Smoothness]の値を1から下げましょう。
これは滑らかさのパラメータでここをいじることでメッキからくすんだ反射まで再現できます。

ここでは0.7に値を落とすことで日本刀特有の刀紋を再現しています。

あとはHoloLensにデプロイすれば日本刀の完成です。

#応用しよう
　このMR Lighting Toolsを応用させて水を表現してみましょう
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ついにMR Lighting Toolsを応用してshader勉強して現実空間の空を反射する水の完成！（まだ試作品）<br><br>シャボン玉ならもう作れるぞ！<br>よく見ると水のボールに木や空が映り込んでいます。<br>頑張った<br>ほめて！<a href="https://twitter.com/hashtag/HoloLens?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens</a> <a href="https://t.co/fYjzR86mgA">pic.twitter.com/fYjzR86mgA</a></p>&mdash; ホロ元@HoloRanger 🍣 (@HoloMotoRanger) <a href="https://twitter.com/HoloMotoRanger/status/1139107040436019200?ref_src=twsrc%5Etfw">2019年6月13日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 
　先日の私のツイートになりますが、生まれて初めてバズりかけていてうれしいです。
ここではshaderを勉強して試作品を作成しましたが、まだ公開できるレベルではないので、お手軽に似たような表現をする方法を紹介します。
　
　![SharedScreenshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320352/ed8d7f21-4c0f-89eb-9432-f13f589a8cc0.jpeg)
　まずは準備！
　3DオブジェクトからPanelとSphereを作成します。水の画像をインポートして二つのオブジェクトにアタッチします。。
　ここではフリー素材からいい感じのものを使っています。



![SharedScreenshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320352/adcdde79-3ea5-2806-5a42-0f449f1e11c1.jpeg)

　アタッチした3Dオブジェクトのinspectorの最下部[watar（アタッチした画像の名前）]から[Rendering mode]を[Transparent]に切り替え以下のように設定します。
ここで重要なものが[Albedo]からRGBだけでなくAの値を下げていることです。
この値を下げることで透過率を変化させ透明度を上げることができます。

　そしておまけとして適当（適切andランダム）な画像を[NomalMap]や[Occlusion]にアタッチします。
ここではHoloToolKit-Examplsにあった[Panel_albedo]をアタッチしてます（超適当）

![SharedScreenshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320352/cf2a903a-f3c2-667e-a915-e89946dc12dd.jpeg)

あとは実行します。
![SharedScreenshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320352/c6873dff-6c34-670a-2b3e-a0b0ad46438b.jpeg)

![SharedScreenshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320352/f666a1b5-4bf9-bb7d-8d82-294722b13a15.jpeg)

一枚目の画像のパネルを通して見える私の顔wは透過率を持っているためエディタ上で表示されるスキャンした３６０°写真のものですが、二枚目のSphereには私の顔がたくさん映り込んでいることを確認できると思いますw
HoloLens実機で見ることで現実の木や空の雲を映り込ませる水ができました。
　またMR Lighting Toolsの機能の一つに[Default Light]の色を自動的に変更するものがあるため実機では夕焼けなど周囲の明るさによって見え方自体も全く変わります。

　今回はお手軽版ですが、いつか勉強しているshader版もご紹介できればと思います。

#最後に
　かなりわかりにくい内容になってしまったかもしれませんが、HoloLensの可能性を感じることができるツールです。
　HoloLensはかけてなんぼのものです、ぜひ外とは言いませんのでいつもと違う場所でかけてみるということをお勧めします。
　きっと今までとは違った気づきがあることでしょう。

　ありがとうございました。