普通のデジカメで３Ｄパノラマを作成する（その３）

デジカメ画像修正ソフト


３Ｄパノラマの作例：Bipolarモード３Ｄパノラマの作例：Globeモード３Ｄパノラマの作例：Sphereモード
　パノラマFlashビューアーのウェブでの公開については「360度パノラマ画像をFlashビューアーで表示させる」でも触れました。でも今回はその本領を発揮する一番おいしい部分です。Huginで出力したEquirectangular（正距円筒）投影の全方位画像による３Ｄパノラマは、一枚の元画像でいろんな表示パターンで遊べるので少し詳しく解説したいと思います。必要となる知識としては、少しでもご自分でホームページを作ったことのある方であれば充分OKです。具体的にはファイルをアップロードして公開するためのウェブサーバーが要ります、またそのためのHTML編集やアップロードするためのFTPソフト（またはウェブアップローダー）に関する知識が必要となります。ちなみにここでは.swf、.html、.jpg、.jsファイルは全て同一フォルダに置くという前提で解説しています。

　使用するFlashビューアーはRyubin氏作のビューアーを使わせていただきます。Ryubin's Flash Panoramaのダウンロードページhttp://ryubin.com/PanoGallery/download.htmlからダウンロードします。Ryubin'sFlashPanoramaKit_071220.zipを解凍するといくつかの.swfファイルがありますが、ここではPanoSphereFlash_v10.swfを使います。
※ココで使用しているRyubin's Flash Panoramaのファイルは2008年1月時点のものです。Ryubin氏のサイトで現在ダウンロード可能な最新バージョンのファイルとは差異がある可能性あり、設定内容にも違いがあるかもしれません。最新バージョンでのご使用＆設定をお勧めいたします。

Ryubin'sFlashPanoramaKit を使ってパノラマ画像を公開しているページ（リンク先募集中！）

http://pasokon-maruya.cocolog-nifty.com/blog/　← 和歌山県の古座川を愛する方のブログ

読み込ませる画像サイズについて

読み込み画像の比較　Flashが読み込めるイメージの大きさが最大2880ピクセルなので、PanoSphereFlashで表示する場合2:1のアスペクト比の画像では最大2880×1440ピクセルとなります。今回の800×600ピクセルの画像を使って全方位画像を作成すると5170×2585ピクセルでしたが、PanoSphereFlashで表示するには2880×1440ピクセルに縮小しなければなりません。

　しかし使用する画像のサイズが小さいと、ズームアップしたときの荒さが目立つようになります。できるだけ細部まできれいに見せたい場合は、最大限大きな画像を読み込ませる必要があります。Ryubin氏のサイトをお読みになっている方はご存知だと思いますが、そのための機能として、アスペクト比1:1の最大2880×2880ピクセルを読み込ませて表示することができます。この違いが上図です。今回は5170×2585ピクセルの画像を使ったので2585×2585の解像度となっています。図左側が2880×1440で右側2585×2585を元にした画像です。最大に拡大したときボンヤリした画面がある程度スッキリします。もし元画像が5760×2880以上の解像度であればもう少し鮮明さに差が出たと思います。一方、使用する元画像が小さい場合…だいたいですが、幅が4000で高さが2000ピクセル以下になるとその差は殆ど感じられなくなると思いますので、Huginで出力したままの2:1の画像でも充分でしょう。

アスペクト比2:1の全方位画像を1:1にする

　Gimpや他のグラフィックソフトで幅だけ高さと同じ値にして処理しても良いですが、前回紹介した３ＤパノラマビューアーPanoSphereでも作成できます。PanoSphereで2:1の全方位画像を読み込んで［Save］タブをクリックして表示されるメニューで［Equi-square (Input for PanoSphereFlash)］をクリックして保存します。画像の大小に関わらず保存サイズは2880×2880固定のようです。

　保存する画像の質を変えたい場合は［Control］タブをクリックして表示されるメニューで［Save Quality］で設定します。デフォルトでは60になっています。数値が大きいほど画質は高くなりますが、出力されるファイルサイズは大きくなるので、アップロードするウェブサーバの負荷や規約を考慮に入れて設定してください。わからない場合はとりあえずデフォルトの60で出力しておきましょう。

パノラマFlashビューアーで３ＤパノラマをＷｅｂで公開する

  1. 基本編…HTMLファイルへの記述の仕方
  2. 応用編…角度、視野角、を変えてオートパンで表示する
  3. 応用編…globeモードで地球儀のようにグルグル回す
  4. 応用編…Bipolarモードで空飛ぶ虫の目で見た世界を

◆以下のソースの記述には、このブログサービスのスクリプト記述の無効化により一部表示されない部分があるので、タグに使われる<や>を全角の＜や＞で記述している部分があります。そのままコピペしたい場合は実際に３Ｄパノラマを表示させてブラウザのソース表示からコピーしてください。
◆以下のソースの記述では、スクロールバーが出て読みにくくならないようにブラウザの機能で折り返している部分があります。実際のソースでの改行ではない部分で改行されている箇所がありますのでご注意ください。また自動リンク機能が働いてhttpで始まる記述箇所がそのサイトにリンクしていますが気にしないでください。
◆詳細に関してはRyubin's Flash PanoramaのFAQページをご覧ください。

基本編…HTMLファイルへの記述の仕方

　画像（lateAutumn.jpg）とFlashファイル（PanoSphereFlash_v10.swf）とHTML（index.html）ファイルを同一フォルダに置きます。画像とHTMLファイル名は任意に変更してください。そしてHTMLファイルには最低限以下のように記述すればSphreモードの３Ｄパノラマを公開できます。







PanoSphereFlash
●実際に表示する→その１
　肝心なのは <object classid=… から始まって </object> までの記述部分です。既存のホームページに掲載するのであればそのHTMLファイルにこのobjectタグの部分を書き足します。paramタグとembedタグにはそれぞれ似たような記述がありますが、ブラウザーによって解釈可能なタグが異なるため２箇所にこのように記述しなければなりません。paramタグで指定しているのがインターネットエクスプローラー、embedがそれ以外のブラウザーになります。どちらか間違えるとブラウザーによって表示のされ方が異なったり、動作しないなどの原因になりますので注意してください。

　ふたつも設定するのは面倒くさいゾ！というい場合はjavascriptのみでブラウザにFlashを読み込ませても良いでしょう。javascriptを無効にしているユーザーは一部にすぎないので、javascriptが有効でないと表示できない旨の一文を添えておけば問題ないと思います。同梱されていたスクリプトファイルAC_RunActiveContent.jsを同一フォルダにコピーして以下のような記述をします。
またこのjavascriptの記述によってインターネットエクスプローラーで「コントロールをアクティブ化するには....」のメッセージが出なくなります。







PanoSphereFlash









＜script language="javascript"＞

AC_FL_RunContent(

'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',

'pluginspage', 'http://www.macromedia.com/go/getflashplayer',

'bgcolor', '#000000',

'width', '640',

'height', '480',

'movie', 'PanoSphereFlash_v10',

'FlashVars','img_path=lateAutumn.jpg'

); //end AC code
●実際に表示する→その２（表示自体は「その１」と全く変わりません）
　どんなパソコン環境でも閲覧できるようにしたり、厳格なXHTML準拠のページで間違いなく表示できるように、上の二つを合わせた下のような記述が一般的には望ましいといわれています。ソースコードが多いと初心者にとっては間違いを誘発しやすいので充分気をつけましょう。慣れないうちは上のふたつどちらかで練習してからがよいでしょう。






PanoSphereFlash









＜script language="javascript"＞

AC_FL_RunContent(

'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',

'pluginspage', 'http://www.macromedia.com/go/getflashplayer',

'bgcolor', '#000000',

'width', '640',

'height', '480',

'movie', 'PanoSphereFlash_v10',

'FlashVars','img_path=lateAutumn.jpg'

); //end AC code

＜noscript＞











＜/noscript＞
●実際に表示する→その３（表示自体は「その１」と全く変わりません）

応用編…角度、視野角、を変えてオートパンで表示する

３Ｄパノラマの作例：Sphereモード　いろいろな初期設定機能があるのでそれを使ってみます。初期表示時に「この構図で見せたい」「この大きさで見せたい」場合はこれらを設定します。ここでは初期表示時の視点の角度と画角を変えて、自動で回転させてみます。設定するパラメータは以下の通りです。

  • fov=80：視野角（画角）ちょっと広めの80に設定する。何も指定しないと60度です
  • pitch=30：垂直方向の角度、地球儀で見れば緯度です。あまり地面は表示させなくてもいいので、すこし上向きの30度を設定する。下向きにしたい場合は"-"マイナスを付けます。指定しない場合は0度です。
  • yaw=270：水平方向の角度、地球儀で見れば経度です。時計回りの角度で指定します。真っ赤な紅葉から表示させたいので270度に設定する
  • auto=0.1：滑らかな動きでパンしたいので0.1度に設定。反対方向（半時計回り）に回転させたい場合は"-"マイナスを付けます。
  • start=yes：起動時のオートパンの設定。yesに設定します。
  • smooth=yes：ピクセル補間の有無です。オートパンさせるとチカチカするのを抑えてくれます。yesを設定します。

上記の設定を"&"（アンドの文字）でつなげて画像ファイル名の後に記述します。この他にも上下方向に角度を変化させたり、その周期を設定するなどできます。詳しくはRyubin氏のサイトをご覧ください。

lateAutumn.jpg&fov=80&pitch=30&yaw=270&auto=0.1&start=yes&smooth=yes
これを「その３」の設定例に適用したのが以下の記述となります。






PanoSphereFlash









＜script language="javascript"＞

AC_FL_RunContent(

'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',

'pluginspage', 'http://www.macromedia.com/go/getflashplayer',

'bgcolor', '#000000',

'width', '640',

'height', '480',

'movie', 'PanoSphereFlash_v10',

'FlashVars','img_path=lateAutumn.jpg&fov=80&pitch=30&yaw=270&auto=0.1&start=yes&smooth=yes'

); //end AC code

＜/script＞

＜noscript＞











＜/noscript＞
●実際に表示する→その４

応用編…globeモードで地球儀のようにグルグル回す

３Ｄパノラマの作例：Globeモード　表示モードを変えるにはPanoSphereFlash上で右クリックして表示されるメニューから自由に選択して切り替え可能ですが、初期表示でglobeモードにしたい場合はパラメータにmodeを追加します。modeの設定は以下のようになっています。

  • mode=1：Sphereモード、設定しないとデフォルトでこのモードです。上のパターン全てがsphereモードとなります。
  • mode=2：Globeモード。
  • mode=3：Bipolarモード。

大きく表示させるために視野角を狭くしてfov=60として、回転を速めにauto=0.5としました。以下が設定例です。







PanoSphereFlash









＜script language="javascript"＞

AC_FL_RunContent(

'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',

'pluginspage', 'http://www.macromedia.com/go/getflashplayer',

'bgcolor', '#000000',

'width', '640',

'height', '480',

'movie', 'PanoSphereFlash_v10',

'FlashVars','img_path=lateAutumn.jpg&mode=2&fov=60&pitch=30&yaw=270&auto=0.5&start=yes&smooth=yes'

); //end AC code

＜/script＞

＜noscript＞











＜/noscript＞
●実際に表示する→Globeモード

応用編…Bipolarモードで空飛ぶ虫の目で見た世界を

３Ｄパノラマの作例：Bipolarモード　Bipolarモードは視野角を広く表示させることで、ちょっと変わった風景を楽しめます。ほぼ全方向を見られる複眼をもったトンボはこんな風に世界を見ているのか…と思わせてくれます。他のモードでもそうですが、視野角を広げるほどオートパン処理にかかる負荷が大きくなるようです。おそらくCPUのキャッシュメモリが多いほど滑らかに表示されるのではないでしょうか。なので、低スペックのパソコンでも少しでも滑らかな動きになるように smooth=no としています。







PanoSphereFlash









＜script language="javascript"＞

AC_FL_RunContent(

'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',

'pluginspage', 'http://www.macromedia.com/go/getflashplayer',

'bgcolor', '#000000',

'width', '640',

'height', '480',

'movie', 'PanoSphereFlash_v10',

'FlashVars','img_path=lateAutumn.jpg&mode=3&fov=150&pitch=-30&yaw=270&auto=0.2&start=yes&smooth=no'

); //end AC code

＜/script＞

＜noscript＞











＜/noscript＞
●実際に表示する→Bipolarモード

おまけ…

３Ｄパノラマの作例：Bipolarモード respect to Arakawa Shusaku　荒川修作の作品「太陽の部屋」を彷彿とさせる？表示例→Bipolarモードその２
近づいているのに遠ざかっている、静止しているのに動いている、後を振り向けない前だけの世界…個の存在とその知覚を異次元に飛ばしてくれる、そんな空間を感じる…かもね