pannellumというJavascriptベースのパノラマビューワーをwordpressで利用できるようプラグイン化し、ブログ内にショートコードで記述できるようにした。
まだ完成していないのだけど、いろいろなデバイスで試す必要もあって公開した。必要に応じて修正を入れていく予定。
神代植物公園の芝生広場のパノラマ
8月の比較的涼しい日(最高気温が30℃程度だった)に、神代植物公園に行ったとき、パノラマ写真が作りたくなってなんとなく撮影してみたもの。この画像は合成によって全周囲(360度)をカバーしているが、ただ見ただけではよく分からないのでパノラマビューワーで表示させてみる。
インライン表示
パノラマ表示されている中身はpannellumそのままなので、操作方法などは同じ。
以下のようなショートコードを記述することで、インラインで表示できるようにした。
|
1 2 3 4 5 6 7 8 |
[wp_pannellum url="/blog/wp-content/uploads/samples/panorama2.jpg" vaov="116" minPitch="-58" maxPitch="58" pitch="-58" hfov="40" autoRotate="2" autoLoad="true"] |
url は画像の位置を表しており、その他の要素もpannellumにそのまま渡す。
ポップアップ表示
インライン表示では、ブログのコンテンツ表示サイズより幅を大きくできないので、最大横1200pxでポップアップするような仕組みも追加した。下のリンクをクリックするとポップアップします。
芝生広場のパノラマをポップアップ こちらは自動的な回転(autoRotate)をしないようにしているので、マウスでドラッグしたりホイールを回すと見え方が変わる。
ショートコードはポップアップ表示の指定とアンカー文字列のために、popup_viewとanchor_textという2つを追加した。
|
1 2 3 4 5 6 7 8 9 |
[wp_pannellum url="/blog/wp-content/uploads/samples/panorama2.jpg" vaov="116" minPitch="-58" maxPitch="58" pitch="-58" hfov="60" autoLoad="true" popup_view="1" anchor_text="芝生広場のパノラマをポップアップ"] |
ポップアップといっても、パノラマ用の<div>を表示したり消したりするためのcss操作を記述しただけ。もともとのpannellumスクリプトに表示のためのdivを指定するだけなのであまり工夫する必要もなかった。
メディアライブラリ内の画像(縮小済)を使った場合
このブログにふつうにアップロードした画像の横幅は1200ピクセルまで縮小するようにしているので、広い範囲を写し込んだパノラマ画像を上げるとかなり汚い絵になってしまう。そのため、最初の方のパノラマ画像(3840×2150) はサーバーに直接置いている。
まあ、1200pxでも構わないようなこともあるので、メディアライブラリに登録済の画像idも指定できるようにした。
アップロード時に自動的に付加しているCopyrightメッセージも回転してしまう。
|
1 2 3 4 5 6 7 |
[wp_pannellum attachment_id="7728" vaov="116" minPitch="-58" maxPitch="58" pitch="-58" hfov="40" autoLoad="true"] |
シャープネスを上げるともうちょっと見栄えはよくなると思うが、いずれにしろ汚い。もともとの合成画像の横幅は13000px程度だったから、アンシャープマスクを広くかける必要があると思うのだけど、それはやってない。
パノラマ写真の撮影と合成
今回の画像は、E-M1mkIIにLaowa 7.5mmを付けて撮影者が360度回転しながら17枚(目線の高さの9枚と空に向けた8枚)撮影したものをRAW現像の過程でiFinish仕上げ、 階調オート、露出補正などをほどこしたのち、後述するソフトを使ったパノラマ合成した。
芝生広場のパンパスグラスを中央にして写した最初の一枚が以下で、iFinish仕上げらしい色合いになっている。
OM-Dに付けた7.5mmレンズの画角は水平方向が約98度で、垂直方向が約82度なので東西南北4枚撮ればいちおう全周がカバーできるのだけど、端の方は歪み(垂直のものが斜めになる)が大きくなるので多めに撮影して合成ソフトにうまくやってもらった。一枚ずつ手動で歪補正していくより簡単。
なお、Laowa 7.5mmの仕様を見ると、Angle of Viewは110°になっているが、これは対角線上の値で水平と垂直の画角は上記の値になる。
パノラマ合成には、Microsoft社のImage Composite Editor (ICE) というプログラムを使った。パノラマを意識して写した複数の画像をドラッグ&ドロップして適当に操作すると、うまいこと合成してくれる。いろいろなパターンのパノラマ写真に対応しているようなので、もうちょっと勉強して試してみたいところ。
そういえば、E-M1mkIIには従来のOM-Dにあったパノラマ撮影を補助する機能がないのである。そのためOlympus Viewer 3で合成することができない。撮影時には、EVF内の水準器を見て水平を保つことにだけ気をつけた。
ふと、Olympus Air + ステッピングモーターによる自動撮影というのも思い出したが、こういった風景ならばぐるぐる周りながら手持ちで撮っても結果に大差はないだろう。パノラマの中に自分が何度も登場するような、パノラマ自撮りには必要か。
wikipediaにあった天の川のパノラマ画像
wikipediaに良さそうな画像があったので、表示例として画像のurlを直接指定してみた。
|
1 2 3 4 5 6 7 8 |
[wp_pannellum url="https://upload.wikimedia.org/wikipedia/commons/9/9e/Milky_Way_Arch.jpg" vaov="95" minPitch="-45" hfov="120" maxPitch="50" pitch="-45" autoRotate="4" autoLoad="true"] |
この画像についての詳細およびライセンスについてはこちらを参照のこと。
Popup wikipedia Milky_Way_Arch.jpg こういうのも撮ってみたいもんです。
プラグインについて
もうちょっと改善してから、ブログ内にソースをベタっと貼り付ける予定です。pannellum用のパラメータについてなどの細かい話もその際に。wordpressへのプラグインの追加方法としては、サーバーにすべてのファイルをアップロードし、wordpressのpluginディレクトリに展開してやるのが簡単なので、一応pannellumスクリプトも含めたzipファイルも用意する予定。
追記
最初の投稿のあとで、インライン表示の位置や大きさ、ポップアップ表示を閉じるためのボタンなどを変更しました。プラグインを直すとパノラマ表示を使ってるすべてのページの表示が変わることになります。
wp-pannellumプラグインを公開
wp-pannelumプラグインを公開したので、それに合わせてショートコードの内容を変更しました。