VRでは没入感を高めるためには、きれいな表現が一つの要因だと思います。
そこで、この間作ったUnbounded Space3(下記)の改良や、Oculus Touchが出たとき用のゲーム開発の準備のためにも、シェーダー関係の勉強を再開することにしました。
http://magicbullet.hatenablog.jp/entry/OcuFesSummer2015_JP
そして、見た目がきれいだよね、ということで購入したアセットがSkyshopです。
ただ、入手後にSkyshopの機能をちょっと勘違いしてたことに気づきました。
| やれると思っていたこと | 実際にできること |
|---|---|
| sphereやcubeなど、オブジェクトに、任意の画像で写真のようなシェーダーを貼れる | skyboxに設定した画像の色合いをオブジェクトに反映できる(IBLできる) |
しかし、これはskyshopが悪いのではなく、
・AssetStore紹介ページの見た目で「おお、きれい！」、と思った後あまり調べなかったこと
・映像系に詳しくなくて私自身がHDRIという単語を知らなかったこと
・ついでに時差ぼけで眠かったため
でした(恥ずかしい、、)。
ただ、せっかくなので、これを機会にSkyshopに関する一般的な技術用語、Skyshopの基本的な使い方などを紹介したいと思います。
1. Skyshopに関する一般的な技術用語
HDRI：High Dynamic Ranged Image
通常の画像（24bit）では記録できない明暗の情報を持った画像のこと。通常の画像よりも、人間の目の感覚により近いレンジの色合い、明暗を一つの画像で再現可能
詳細はこちらをご参照ください。
HDR機能はiPhoneにも搭載されています。HDR対応にして撮影すると、一回のシャッターで複数枚撮影し、暗い写真と明るい写真を合成していいとこ取りをした写真が保存されます。
詳細はこちらをご参照ください。
IBL：Image Based Lighting
ライトの代わりに画像を使ってシーンを照明する、の意味だそうです。実写画像に3DCGを合成するときに使われます。詳細はこちらをご参照ください。また、環境マッピングという手法により、物体の表面に周囲の景色を映り込ませることができます。詳細はこちらをご参照ください。
映り込ませる画像、とは基本的にcubemap(skyboxに使うやつです)を指します。ここに設定した画像の色合いを使うことで、たとえば画像が夕焼けの場合、オブジェクトが赤みを帯びるという表現が可能になります。
詳細はこちらをご参照ください。
これらの内容から、HDR対応した画像をシーンの照明に反映させた表現ができる、というのがSkyshopの特徴と判断しました。
2. インポートしたときのフォルダ構成
引き続き、Skyshopアセットのフォルダ構成を説明します。まず、インポートすると、
Gizmos/
Marmoset/
という２つのフォルダが追加されます。以下、_Readme.txtの内容をまとめたものです。
・Marmoset/ はどの位置でもよいが、Gizmos/はAssetフォルダ直下でなければならない。
・Marmoset/Shaders/は変更してはダメ
・Marmoset/Skyshop/はskyshopアセットを動かすためのスクリプトが入っている。
・Marmoset/Example.zipは、サンプルシーンが多数入っている。不要なら削除してもよい
・Shader Forgeという別アセット(通常$90)と連携可能。その場合、Shaderforgeのアセットをインポート後、ShaderforgeExtention_Unity4,5.zipを解凍すればよい。
・Shaderforgeを使わないならShaderforgeExtention_Unity4,5.zipを削除してもよい
2017/9/1追記
Shader Forgeの使い方を書きました
【Unityアセットアドカレ】Shader Forgeでナイトプールを作ろう！ - CrossRoad
余談ですが、_Readme.txtに記載されていたzip解凍について、Windowsのエクスプローラ、またはMacのFinderからzipを解凍すると、UnityのProjectViewの中で自動的にインポートとコンパイルが開始されます。
3.サンプルシーンの実行
2で解説の通り、サンプルシーンはzipを解凍すると出てきます。サンプルシーンの例(CubeProbeDemo.scene)がこちらです。
やや赤色に近い画像がskyboxに設定されており、これを照明に使っています。金属球への反射、および白いオブジェクトがかすかに赤みがかかってます。
画像を任意のものに差し替える手順は、こちらに詳しく書かれているので割愛します。
Marmoset Skyshopを使う - Unityな日々（Unity Geek）
ちなみに、サンプルシーンは他にもたくさんあるので、ぜひお試しください。
4. Androidへの転送
AssetStoreでのSkyshopの説明文にはモバイルにも対応と書かれています。そこで、手元にあったAndroidスマートフォンで表示ができるか確認しました。検証端末；XperiaZ3 (Android5.0)
まず、そのままサンプルシーンをそのままビルドすると、実機転送まで成功しますが、Xperiaでは下記のように見えます。
(XperiaZ3の画面スクショです)
オブジェクトがピンク色になるのは、対応するシェーダーがないことを示しています。
それぞれのオブジェクトのmaterial設定を確認すると、Marmoset提供のシェーダでDifffuse IBL、Specular IBLのようになっていました。Xperiaで表示したときにピンク色だったことから、このシェーダはモバイル非対応のようです。
シェーダの選択画面をさらに探すと、Marmoset/Mobile というフォルダがありました。そこで、Mobile内のシェーダーを下記のように指定して解決しました。
こんな感じになります。
(XperiaZ3の画面スクショです)
別の角度から見ると、こうなります。
(XperiaZ3の画面スクショです)
このシーンでは、金属球が振り子運動してますが、振り子表面にはちゃんと画像が映り込んでいます。
終わりに
今回の私の目的とはちょっと異なってましたが、skyshopは実写とCGを組み合わせたような表現においてとても有効なアセットだと思います。諸事情でまた別のことをやってるかもしれませんが、引き続ききれいな表現について勉強予定です。またよさそうなアセットがあれば紹介いたします。
