!!!独り言日記 !!Photosynth（2013/12/31） iPhoneのPhotosynthで全球のパノラマ写真を撮りに、某公園へ。 何枚か撮りましたが、半分くらいは失敗。以下、ずれがありますが比較的まともだったもの（縮小してます）。 {{ref_image oosaka_01_20131231.jpg}} {{ref_image oosaka_02_20131231.jpg}} 私が撮った撮り方としては、 *水平方向にゆっくりと周囲を撮る *少しスマホを上に向けて、水平方向にゆっくりと周囲を撮る *真上を撮る *下方向にスマホを向けて、水平方向にゆっくりと周囲を撮る *真下を撮る みたいな感じ。 *自動で撮る（緑の●が中央に出るまでゆっくり動かす）操作を使用。手動の撮影はしない。 *できるだけスマホは回転させずに、手を固定しながら体を回転させる。 *同じ場所を2回撮らないようにする。 かなぁ。足下は難しいですね。 レタッチでごまかせるとは思いますがやっぱりうまくつながらなかったところは気になるので、RICHO THETAがほしいところ。 パノラマ画像の上と下にわずかに黒い部分が見えますが、この部分はレタッチしないと極部分に穴があいた状態になりそうですね。Photosynth上でグリグリ見たときはこの部分に黒いところはないのですが、なぜかパノラマ画像として出力すると黒い部分が出てしまう、、、。 !![Shade] 全球写真から擬似HDRIを作成し、IBLしよう（2013/12/30） 2013/12/29で撮影した全球のパノラマ写真はjpeg形式のLDR画像です。 3DCGではHDRにしてレンダリングしたいところ。 というわけで、擬似的にHDRにしてしまいましょう。 すべてShadeだけでいけます。 まず、Photosynthなどで撮影したパノラマのjpeg画像を用意。 {{ref_image saitama_park_800x400.jpg}} 色補正のゲインが1.0、ガンマが1.0、背景ウィンドウの「光源としての明るさ」が1.0となっているのを確認します。 !Shadeにマスターイメージとしてパノラマ画像を読み込み 読み込んだ画像をブラウザで選択して、形状情報ウィンドウでガンマを「モニター(1.0/2.2)」にします。これを画像[1]とします。 !グレイスケールの画像を用意 画像[1]の画像編集で、カラーコレクションします。彩度を-1.0にして適用するとグレイスケールの画像になります。 これを画像[2]とします。 !暗い背景画像としてレンダリング 背景ウィンドウにて。 *背景の1レイヤ目に画像[1]を指定。投影は「球」に。 *2レイヤ目に画像[2]を指定。投影は「球」に。2レイヤ目では「乗算」を指定します。 *2レイヤ目を複製（複製ボタンを押します）して20レイヤほど作る。 ,レイヤ番号,画像の種類,備考 ,1,画像[1],オリジナル画像。通常合成。ガンマは1.0/2.2 ,2,画像[2],グレイスケール画像。乗算合成。 ,3,画像[2],グレイスケール画像。乗算合成。 ,4,画像[2],グレイスケール画像。乗算合成。 ,5,画像[2],グレイスケール画像。乗算合成。 のように、22レイヤくらい重ねます。 乗算で合成を繰り返すため、明るいところだけが残って 暗いところはほとんど黒になります。 これを、レンダリング画像の比率を2x1にして、 イメージウィンドウの「効果」タブで「パノラマ-球投影」でレンダリングします。 これをjpeg形式で保存してください。これは、暗い部分を0で足切りするためわざとLDRとして保存してます。 以下のようにレンダリングされました。 {{ref_image shade_background_low_20131230.jpg}} 画像[3]とします。 !明るい背景画像としてレンダリング 背景を一度クリアします。 今度は画像[3]を使って、明るい部分は1.0を越えるようにします。 背景ウィンドウにて。 *背景の1レイヤ目に画像[3]を指定。ガンマは1.0の線形にしたままにします。投影は「球」に。 *2レイヤ目に画像[3]を指定。投影は「球」に。2レイヤ目では「加算」を指定します。 *2レイヤ目を複製（複製ボタンを押します）して9レイヤほど作る。 ,レイヤ番号,画像の種類,備考 ,1,画像[3],通常合成。ガンマは1.0/1.0 ,2,画像[3],加算合成。 ,3,画像[3],加算合成。 ,4,画像[3],加算合成。 のように、10レイヤくらい重ねます。 今度は加算で合成を繰り返すため、明るいところはより明るくなります。 10レイヤ重ねましたので最大10.0くらいです。 これを、レンダリング画像の比率を2x1にして、 イメージウィンドウの「効果」タブで「パノラマ-球投影」でレンダリングします。 今度はhdr形式で保存してください。 以下のようにレンダリングされました。 {{ref_image shade_background_high_20131230.jpg}} 画像[4]とします。 !擬似HDR画像としてレンダリング オリジナルの画像[1]に、明るい部分がより明るくなった画像[4]を加算して最終的なhdr画像にします。 背景を一度クリアします。 背景ウィンドウにて。 *背景の1レイヤ目に画像[1]を指定。ガンマは1.0/2.2。投影は「球」に。 *2レイヤ目に画像[4]を指定。投影は「球」に。2レイヤ目では「加算」を指定します。 ,レイヤ番号,画像の種類,備考 ,1,画像[1],通常合成。ガンマは1.0/2.2 ,2,画像[4],加算合成。ガンマは1.0/1.0 これを、レンダリング画像の比率を2x1にして、 イメージウィンドウの「効果」タブで「パノラマ-球投影」でレンダリングします。 hdr形式で保存してください。 以下のようにレンダリングされました。 {{ref_image shade_background_new_20131230.jpg}} 画像[5]とします。これが最終的に生成された擬似HDR画像になります。 ガンマは1.0/2.2がすでにかかっているものになります。 元の画像で白く飛んでる部分ほど光が強くなります。 では、元のLDR画像だけを使ったレンダリングと擬似HDRを使ったレンダリングを比較してみましょう。 光源は無し、背景のIBLのみです。パストレーシング＋パストレーシングでイラディアンスキャッシュ無しです。 ↓まずは、オリジナルのパノラマ画像だけでレンダリング。 {{ref_image background_test_20131229_no_hdr.jpg}} ↓擬似HDR画像でレンダリング。 {{ref_image background_test_20131229_fake_hdr.jpg}} 全体的に明るくなってますが、背景はほとんど差がありません。 また、全体的に白くなるわけではなく、影がよりそれらしくなったのが分かりますでしょうか。 では、背景としてもう1枚明るいレイヤ（画像[4]）を加算してレンダリング。 最大の明るさは20.0くらいになります。 {{ref_image background_test_20131229_fake_hdr2.jpg}} なお、「レイトレーシングの画質」は300.0。 hdrの暗いところと明るいところの差が大きいほど、高周波ノイズは出やすいですのでサンプリングを増やす必要が出てきます。が、それに見合ったリアリティーが出てくるかと思います。 !![Shade][Unity] 全球写真を活用しよう（2013/12/29） iPhoneで360度全球のパノラマ写真を撮ることができる「Photosynth」というのがあります。 androidでは「Photo Sphere」というものも。 これは、撮影者の周囲をパチパチ撮影していくことで、空や足元も含む全球を包む画像を作ることができます。 最近は、RICHO THETAのような一発でパノラマ画像を撮影できるもの。 https://theta360.com/ja/ まだ出ていませんが「Panono」という投げるカメラのプロジェクトもあったりします。 http://www.indiegogo.com/projects/panono-panoramic-ball-camera なんだか知らないけど、'''パノラマがアツい！！''' で、「Photosynth」は3840x1920 pixelの解像度でした。「RICHO THETA」もレビュー記事を見ると同じ。 「Panono」はもっと実用的な解像度が期待できます。 それを3DCGで活用する方法を記載します。 「Photosynth」で撮影した画像を「share」ボタンから「camera roll」として書き出すと、2x1の比率の画像ができてます。以下のような感じ（縮小してますので実際のサイズとは異なります）。 {{ref_image saitama_park_800x400.jpg}} !Shadeの場合 この画像をShadeの「背景」に読み込んで投影の「球」にすると、そのまま背景として利用できます。 {{ref_image shade_background_20131229.png}} {{h264player http://ft-lab.ne.jp/files/movie/shade_background_20131229.mp4,width=480,height=320}} ※ 2013/12の日記より、H264の動画を再生できるようにしました。iPad/iPhoneでも動画を確認できると思います。過去の動画はそのままFlashのflvなのでモバイルでは再生できませんです。 ただ、画像自身は普通のjpeg画像(LDR)ですので、背景画像自身を光源と見たIBLとしてはあまり効果がないです。 これをなんとかして、フォトリアル表現に活用するのは後ほど。 !Unityの場合 次にUnityでパノラマ画像を使用します。 Unityでは「Skybox」と「cubemap」が存在します。 「Skybox」は6方向の画像を貼り付けて背景としたものです。Shaderとして指定します。 「cubemap」は同じく6方向の画像を貼り付けたものでマテリアルとして指定するものです。cubemapは反射（reflection、リアルタイムなので環境マップです）で使用します。 2013/12/18に書いたAssetの「Panorama To Cubemap」でパノラマ画像から自動的に Skyboxとcubemapは作成できますが、これをもし手動で行う場合の注意点や使用例を記載します。 ShadeからUnityへは、fbx形式でエクスポートして、Unity側でAssetとしてインポートします。 Unityに背景画像を読み込んだ直後は幅が1024に補正されてしまうため、これを実用で使えそうな2048に変更してApplyボタンを押します。 {{ref_image unity_background_01_20131229.png}} 次に「Panorama To Cubemap」のEditor機能を使ってSkyboxとcubemapを出力しました。 「Panorama To Cubemap」は私が作った以下のものです。 https://www.assetstore.unity3d.com/#/content/13616 {{ref_image unity_background_02_20131229.png}} {{ref_image unity_background_03_20131229.png}} メインメニューの「Edit」-「Render Settings」を選択。Inspectorの「Skybox Material」で生成されたSkyboxを指定します。すると、背景としてSkyboxが割り当てられます。 SkyboxはShaderになり「Mobile/Skybox」に6枚の画像が割り当てられています。 {{ref_image unity_background_04_20131229.png}} 反射表現については、Materialを新規作成してShaderの「Reflective/Diffuse」を割り当てます。ここの「Reflection cubemap」で作成されたcubemapを指定します。 球体のGameObjectにReflectionのMaterialを割り当てると反射（環境マップ）が実現できます。 {{ref_image unity_background_05_20131229.png}} なお、背景用の展開された6枚のテクスチャ画像はWrapModeが「Clamp」になっているのを確認してください。 {{ref_image unity_background_06_20131229.png}} もし、自前で6枚のcubemap画像を読み込んだ場合はデフォルトでは「Repeat」になっており、この場合は背景のCubeの境目がちらちら見えてしまうことになります。 最後に、ちょっと細工してlightmapを施してリアルにしてから、グリグリまわしてみましょう。 {{h264player http://ft-lab.ne.jp/files/movie/unity_background_20131229.mp4,width=480,height=320}} lightmapについてはまたの機会に。 こんな感じで、パノラマの背景画像は3DCGでも利用することができます。 ただ、回転ではグリグリできますが前後に移動しても変化がないため、あくまでも遠方の表現になりそうですね。 !!年末（2013/12/29） Shade3D 14.1が出ましたね（反応遅っ）。 モデリングではShadeを使ってますが、本サイトで解説していたモデリング記事での問題がいくつか解決されてます。 解説は引き続き行う予定。 今は私自身、iOS/androidのアプリを作るのがメインプロジェクトになっていますが、 モバイルではUI含めた操作性で悩むことが多いです。 たとえば、3Dでいい感じにモデリングしてリアルタイムにグリグリ、、、とかしても自己満足になりそうなことが多く「視点固定のほうがよくね？」「リアルな表現は見にくいのでカット」とかの判断が出てきます。 スマホなどでは特にですが、いくら解像度が高くなっても4-5インチサイズなので、 3Dよりも2Dで表現するほうがいいかなぁとか、比重をグラフィックに置くか操作性におくかが難しいところ（もちろん、アプリとしての面白さは第一として）。 「片手で操作できる」は大事ですよ、とか。 見た目でごまかせないので、純粋なアプリのコンセプト(一発芸でもいいけど）で勝負しないとな、と原点回帰できたのは今年の大きな収穫だったかもしれません。 !!Panorama To Cubemap（2013/12/18） 12月も後半に突入。 現在のメインプロジェクトが立て込んでいてこちらを更新できてませんでした。 勉強がてら、UnityのAsset Storeに「Panorama To Cubemap」というエディタ機能を登録させてもらいました。 https://www.assetstore.unity3d.com/#/content/13616 最近、iPhoneの「PhotoSynth」というアプリを知り、これで空も地面も含めた全球を撮ることができまして。 この写真をUnityで応用しようとしたのですが、2x1の比率のパノラマ画像（sphere map）をUnityの背景のSkyboxや反射のcubemapに展開する機能がなかったので、拡張機能として作りました。 {{ref_image panorama_to_cubemap_01.png}} {{ref_image panorama_to_cubemap_02.png}} {{ref_image panorama_to_cubemap_03.png}} このサイトの主旨に沿ってソースも公開（Freeです）してますので、もしよろしければご利用くださいませ。 なお、サンプルの背景画像も添付してます。iPhone上のPhotoSynthにて埼玉某所で撮影したものです。 Unity関連の知識はずいぶんたまりましたので（調べた知識を蓄えた専用ページを非公開で作ってたりします）、また折を見て公開できればと思います。 予定はアプリが完成し、公開してからなのですが、、、まだまだ先になりそうです。