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