パノラマ工房パノラマ撮影、360度撮影、VRコンテンツ制作のことならパノラマ工房にお任せ下さい。前回の更新からずいぶん時間が経ってしまいましたが、拡大縮小ソリューションの第2弾のご紹介です。第2弾はマイクロソフトの提供する「DeepZoom」です。DeepZoom自体は2008年頃に公開された技術で、Silverlight2の機能として実装されました。名称からもわかるようにSilverlightはAdobeのFlashを意識したRIAアプリケーション開発用のフレームワークです。マイクロソフト製ということでVisualStudioとの親和性が非常に高く、おなじみの.NET系言語で開発できるところも大きな強みでした。ところが、その後の時代の流れはSilverlightでもFlashでもなく、汎用的なHtml5へとシフトしていったのは皆さんも御存知のとおりです。DeepZoomについては、Silverlightから独立してHtml5版がマイクロソフト自身からリリースされています。Html5版は名称が変わりSeadragonAjax※1といいます。現在ではマイクロソフトの公式版はプロジェクトが終了していますが、その後継としてオープンソース版のOpenSeadragonが開発されています※2。DeepZoomの原理としては前述のGoogleMapsと同じく、ズーム率に応じてタイリングされた画像を動的に読み込む仕掛けです。元がSiverlightというリッチアプリケーションに由来するので動作は非常にスムーズで、GoogleMapsよりも操作感は滑らかです。GoogleMapsが地図表示APIという前提があるのに対して、DeepZoomは画像表示のための汎用的な作りになっているので、扱いもシンプルです。以下が作成したサンプルになります(OpenSeadragonでの実装)。DeepZoomコンテンツのサンプル(16415×6660ピクセル)DeepZoomで画像を読み込むには、元画像をタイルに分割する必要がありますが、分割についてはマイクロソフトから公式ツールが出ています。Composer」というこのソフトを使うと極めて簡単にタイリングができます。複数の画像を並べてひとつのイメージにすることもできますし、分割したイメージをSilverLightアプリケーションとして出力することもできます。DeepZoomComposerの操作画面OpenSeadragonはJavaScriptライブラリで仕様が公開されているため、カスタマイズもしやすくなっています。弊社の担当したプロジェクトでは、このライブラリを使用して巨大な図面ファイルを表示し、その図面上に作画できるHtml5アプリケーションを開発しました※3。作画部分にSVGを使用することで、PhotoshopやIllustratorのようなアプリケーションをブラウザ上で実現することができます。Software社が開発した技術だからです。OpenSeadragonはGitHubに登録されていて、JavaScript用のパッケージマネージャのbowerからインストールすることもできます。顧客案件のため画面をお見せすることができませんが、このような技術にご興味のある方は弊社までお問い合わせください。Vol.012014年6月9日パノラマビューワーの特徴の一つに、自在に拡大縮小できるという点があげられます。制作の過程として複数枚の画像を合成するという手順があるため、画像の解像度が高すぎて画面内に表示しきれないという理由もありますが、元来文化的にもパノラマは拡大・縮小と縁が深い装置でした。様々な観光名所のパノラマポイントに登ると、大抵の場所には望遠鏡が置かれています。望遠鏡を除けば、普通の目線では見えない細部が手に取るように近くに現れ、視界を望遠鏡から外すと世界が豆粒のように小さく見えます。したマクロな視点とミクロな視点を縦横無尽に移動できることが、パノラマの快楽の一つであると言えます。地球規模の視点からご近所の視点まで、縦横無尽に移動することができるという操作感覚は、我々の地図体験に革命をもたらしました。Mapsを使ってみると、このエンジンを使用してオリジナルの画像を表示することはできないのかと思いつくこともあるでしょう。APIにはカスタムマップという機能があり、ユーザがオリジナルの地図を表示することができます。GoogleMapsの原理はタイリングです。高解像度の画像をすべて読み込むのではなく、必要な部分だけを読み込むことで高速なレスポンスを実現しています。タイリングという技術は極めてポピュラーな手法で、KRPanoでもタイリングを導入することで、高速なロードが出来るようになっています。皆さんもよくご存知のJPEGも、実はタイリングで画像を圧縮しています。(JPEGではブロックと呼んでいます)タイリングで画像を読み込むためには、事前に画像をタイルに分割しておく必要があります。ズームに応じて精細度を変えておくとより効率的になります。タイル化自体はPhotoshopなどを使用して手作りすることもできますが、高解像度の画像になるととても手作業では追いつきません。GoogleMaps用のタイルファイルについては、GMapImageCutterというツールが無料で公開されていますので、これを使用するのが現実的です。5884のEquirectagler画像を分割すると5461タイルにもなるGMapImageCutterには簡易的なHtmlを生成する機能も備わっているので、アップロードすればそのままWebページにカスタムマップを表示することができます。GMICで生成したカスタムマップのサンプルGoogleMapと同じ操作感覚でパノラマを表示することが出来ました。GoogleMapsAPIがそのまま使用できますので、この画像の上にマーカーを載せたり、線分を描いたりと様々な応用が考えられます。過去の事例では、社内のフロアマップを表示し、社員の在籍状態を表示するというソリューションを手がけたことがあります。次回は、IT業界の巨人がプロデュースした、もうひとつの拡大縮小ソリューションを紹介します。Vol.042014年5月17日KRPanoスクリプトを使ったゲーム制作。前回はパドルが動くところまで作成しましたが、今回は一気にゲームを仕上げます。完成品をご覧ください。