追記 2017/2/15
huginのパノラマ結合はいまいちだったので、Image Composite Editorで「sphere」を指定してパノラマを書き出して、それをペイントとかで縦横比1:2のキャンバスに貼り付ける方法の方がいいかもしれません。（水平線が中央になるように貼り付ける。空と地面を撮影していない場合は上下は空白になります。）
ドローンで撮影した画像を合成して、360°パノラマ画像をブラウザで表示する方法を紹介します。
※これまではMicrosoftのImage Composite EditorとPhotosynthで出来たのですが、残念ながら2017年の2月でPhotosynthがサービス終了となるので、その代替手段です
パノラマ画像の作成
写真を合成してパノラマ画像を作成するためにHuginというソフトを利用します。
http://hugin.sourceforge.net/
インストールして、起動したらアシスタントメニューに従って作業をするだけですが、「パノラマを作成...」の前に、別のウインドウのメニューにあるステッチャーの作成で以下のように設定します。
- 投影法をEquirectangular（正距円筒図法）にする。
- 画角を水平方向：360、鉛直方向：180にする
- 切り抜きをキャンパスサイズに合わせる
出力ファイル名は、panorama_fused.tifとしておきます。
パノラマ画像をタイル化
合成したパノラマ画像をタイル化します。
以下のプログラムを保存します。
https://github.com/mpetroff/pannellum/blob/master/utils/multires/generate.py
pythonのコンソールで、以下のように実行します。
python generate.py -n "C:\Program Files\Hugin\bin\nona.exe" panorama_fused.tif
outputフォルダにタイル化された画像ができます。
html作成
ブラウザで表示するために、以下のライブラリを使って、htmlを作成します。
https://pannellum.org/
こんな感じです。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仙台市 井土浦（2016年3月4日ドローンにより撮影）</title>
<link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/>
<script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script>
<style>
#panorama {
width: 100%;
height: 500px;
}
h1 {
text-align:center;
font-size:14pt;
}
</style>
</head>
<body>
<H1>仙台市 井土浦（2016年3月4日ドローンにより撮影）</H1>
<div id="panorama"></div>
<script>
pannellum.viewer('panorama', {
"type": "multires",
"multiRes": {
"basePath": "output",
"path": "/%l/%s%y_%x",
"fallbackPath": "/fallback/%s",
"extension": "jpg",
"tileResolution": 512,
"maxLevel": 4,
"cubeResolution": 3176
},
"autoLoad": true,
"compass": true,
"northOffset": 0,
"pitch": -17
});
</script>
</body>
</html>この部分の設定は、outputフォルダのconfig.jsonにあるのでコピペすればOKです。
"tileResolution": 512,
"maxLevel": 4,
"cubeResolution": 3176できあがり
http://www.ecoris.co.jp/introduction/drone/panorama.html
ツアーバージョン
http://www.ecoris.co.jp/introduction/drone/natori/panorama.html
