360度パノラマ画像をFlashビューアーで表示させる


Flashビューアーによる作例 Pandoraで作ったパノラマ画像をFlashのビュワーを使ってウェブで公開する方法をご紹介します。パノラマ写真は撮影範囲が広くなるほど横長になってしまい、それを見るパソコンのモニター画面によっては原寸表示時にすべて表示しきれない場合もあります。ビューワーを使えばデジカメ画像のアスペクト比に近いサイズで、マウス操作で左右を(上下も)移動させてグルリと見回すことができます。
※Pandoraの使い方は、「普通のデジカメ画像を合成してパノラマ写真を作る」をご覧ください。

Ryubin's Flash Panorama Laboratoryサイト パノラマビューアーといえばQTVRパノラマが最もポピュラーではないでしょうか。検索するとその作成ノウハウがたくさんヒットします。しかし残念ながら作成用ソフトはMACでしか使えませんでした。また現在も作成ソフトが配布されているのかは不明です。

 Ryubin's Flash Panorama Laboratory のパノラマビューアーは、swf(Flash)ファイルと画像をアップロードして、HTMLでパラメータを設定すれば簡単にウェブ上で公開できる優れものです。自分で用意するものは画像のみ。パノラマ用画像を作成できれば新たにソフトをインストールする必要はありません。様々な画像形態に対応したFlashビューアーで、簡単に3Dパノラマや2Dパノラマが楽しめます。勿論フリー(無料)ですし、WinodowsだろうとMacだろうとOSを問いません。

 さらに凄いところは動画も使えるという点です。パノラマビューアーは普通の一枚の静止画像に比較して臨場感が格段にアップします。そこに動画が使えることによって生まれる可能性はまだまだ未知数で、今後どんな作品が生まれてくるのか楽しみです。

GIMPプラグインPandoraで360度パノラマ画像を作成する

 普通のデジカメ画像を合成してパノラマ写真を作る」で紹介したPandoraで作成したパノラマ画像の例は、360度カバーする写真ではありませんでした。360度をカバーするには少しだけ手間をかける必要があります。
Pandoraは左右の両端の画像を滑らかにつなげる機能はありません。そのままで360度のパノラマビューアーにセットするとその箇所の接続部分に不自然さがでてしまいます。左右両端の画像をグラデーション透過させて滑らかにつながるように加工します。

シームレスな360度パノラマ画像を作る方法

左端画像の左端部分をコピーする ここでは、すでにPandoraによるパノラマ画像の合成が済んでいるものとして、左右の両端をなめらかにつなげる方法を解説します。Pandoraの使い方やインストール方法は「普通のデジカメ画像を合成してパノラマ写真を作る」を参考にしてください。
[矩形選択]ツール(矩形領域を選択する)で左端に位置する画像の一部分を図のように領域選択します。

貼り付けて右端に移動する 領域選択した部分をコピーして貼り付けて、図のように[移動]ツール(レイヤーや選択領域の移動)を使って右端に移動させます。
レイヤーの使い方に関しては「レイヤーの基本操作について」を参考にしてください。

グラデーション透過させる 画像をグラデーション透過させます。

  1. [貼り付けられたレイヤー]を右クリックしてレイヤーマスクを追加します。
  2. ブレンド]ツール(グラデーションを用いて塗りつぶす)をクリックして、
  3. グラデーションリストで黒→白(またはその逆)のグラデーションを選択します。
  4. 貼り付けた画像の左端から右に向けてマスクにグラデーションを塗ると図のようになります。

画像をつなげる [移動]ツール(レイヤーや選択領域の移動)をクリックして、透明グラデーション処理をした画像をきれいにつながる位置に移動させます。

傾きの調整 撮影された写真は、しっかりした3脚を使用していない限り、小さな角度で傾いている場合が殆どです。左端と右端の画像がきっちりつなぎ合わさるように角度を調整します。[回転]ツール(レイヤーや選択領域を回転する)をクリックして、画像上でドラッグして傾きをびちょうせいします。左右端の画像中に目印になる部分を決めて、引き出したガイドの線の上に並ぶように調整します。大変微妙な調整になることもありますが根気強くきっちり調整ればつなぎ目が目立ちません。

トリミングの目安にガイドを使用する 左右端のつながる部分、たとえばこの場合は砂浜の石とか森の樹木を目印にして、その場所にガイドを引き出しておきます(赤枠部分)。上下にも余白が画面に入らないように図のようにガイドを設定します。100%以上の表示倍率にしてなるべく正確におこないます。

パノラマ画像のトリミング [切り抜き&サイズ変更]ツール(画像を切り抜いたり大きさを変えたりする)をクリックして、その範囲を斜めにドラッグして切り抜き範囲を設定します。[表示]タブをクリックして表示される[ガイドにスナップ]にチェックを入れておくと、範囲指定がやり易くなります。「切り抜き&サイズ変更」画面では後の修正のことを考えて[サイズ変更]ボタンをクリックします。後に修整が生じないようであれば[切り抜き]ボタンのクリックでもOKです。

パノラマビューアーの設置

 Flashのswfファイルはhttp://ryubin.com/PanoGallery/download.htmlからダウンロードします。使うファイルはPanoFlatFlash_v10.swfです。魚眼レンズや特殊な全天撮影用機材を使うと、同梱されている他のFlashビューアーで3Dパノラマを楽しめますが、ベタにカメラの角度を変えて360度撮影してからPandoraで合成させた画像の場合はPanoFlatFlash_v10.swfが最も適していると思います。設定その他は同サイトを参考にしてください。ここでは簡単な説明にとどめています。

主な設定項目は

  • img_path:画像ファイルのパス
  • fov:視野角度
  • hv_ratio:縦横比(横÷縦で算出される数値)

で充分だと思います。作例のように自動で動かす場合は

  • start:自動パン機能を有効にする場合は yes を設定する
  • auto:横方向の移動速度を角度で指定する。-(マイナス)を指定すると左から右へ画像が移動します

を設定します
ちなみに、この作例の設定は…
PanoFlatFlash_v10.swf?img_path=360panoC.jpg&fov=40&hv_ratio=9.52&start=yes&auto=0.1
となっています。
詳細な設定や設置方法に関してはhttp://ryubin.com/PanoGallery/faq.htmlをご覧ください。

 この作例の画像はカメラを横位置で撮影したものでアスペクト比がかなり大きくなってしまい、上下に隙間ができています。360度撮影するときは最大広角域で、カメラを縦位置にして撮影した画像だと、空や近景がたくさん写ってもう少しはダイナミックなパノラマになったと思います。ちなみにこの写真を撮影したデジカメは35〜105ミリズームのコンパクトデジカメです。28ミリやそれ以下の広角で撮影した写真だともっといい感じになりそうです。またこの作例ではPandoraの[Overlap]の設定値を大きくしてしまったために、一部の繋ぎ目で白い線が入ってしまいました。