360°パノラマ画像の作り方

追記 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