Kodak SP360でlittle planet画像を作成する

Kodak SP360で撮った動画を合成して、360度の動画を作成できるPIXPRO 360 STITCHをKodakがホームページで公開している。最新版のバージョン1.3.4.0をダウンロードして起動してみたら、little planet表示に対応していた。little planetというのは、Ricoh thetaなどで撮った360度の写真や動画を、地面が丸い惑星のように見せる表示方法。

PIXPRO 360 STITCHでlittle planetの画像をつくるまでの手順をまとめておく。


１．PIXPRO 360 STITCHを起動したら［ファイル］＞［ファイルを開く］を開くと以下のウィンドウが開くので、「参照」ボタンを押してSP360で撮った動画を読み込む。同じ動画を2つ読み込んでも合成はできる。

２．画面右下の方にある地球のマークをクックしてlittle planet表示にする。

３．画面下の丸いつまみを移動させて、画像にしたい動画の位置をさがす。

４．画面右上の以下のマークをクリックして全画面表示にする。

５．画面をスクリーンキャプチャする。WindowsならキーボードのPrt Scでスクリーンキャプチャできるので、あとは画像編集アプリなどでクリップボードからコピーすればよい。


このような画像ができる。

ちなみに元の動画から切り出した画像は以下の通り。この画像を2つ合成したことになる。

残念なのは、このアプリでは動画の再生ができないし、little planetでの動画出力もできない。Kodakにはがんばってもらって、できるようにしてほしい。

1台のKodak SP360で360度パノラマ写真を撮る

Kodak PIXPRO SP360は水平方向に360度、垂直方向に214度の範囲が撮影できるので、このカメラで撮った写真で全方位360度の写真（Equirectangular）を合成できないかと試してみた。

持っている三脚はこのように雲台などを取り付ける台が取り外せる。

この台に水平にSP360を取り付けると、この台のを水平に180度回して三脚に取り付け直すだけで180回転した方向の写真がとれる。これを利用して2回に分けて360度の写真を撮る。

上記方法で撮った写真の合成にはPTGuiの体験版使う。体験版でもすべての機能が利用できるが、合成した画像に透かしが入る。以下は合成する手順。

１．写真を開く
PTGuiを起動したら［Project Assistant］タブ ＞［Load Images... ］から合成する2つの画像を開く。開いたら以下の設定になっていることを確認。
Lens type: Circular Fisheye
Field of View: 180

２．クリップ範囲の調整
［Crop］タブを開き、クリップする範囲を設定する。

３．コントロールポイントの設定
［Control Points］タブを開き、2つの画像で一致するポイントを設定する。

４．合成後の画像形式の確認
［Panorama Settings］タブを開き、以下の設定になっていることを確認する。
Projection: Equirectangular
Field of View: 360 x 180

５．合成方法の調整
［Project Assistant］タブを開き、［Align Images...］を押すと別ウィンドウが開くので、［Edit Individual Images］アイコンを押して合成するそれぞれの画像の位置を調整する。

６．画像の合成
［Create Panorama］タブを開いて、合成画像の縦横の長さやフォーマットを設定する。設定したら、［Create Panorama］を押す。

以下のような画像が作成される。合成画像にずれができているが、合成の調整をきっちりやれば改善できるかもしれない。体験版なので透かしが入るが、79ユーロか93ドルのライセンス料を払えば透かしの無い画像が合成できる。

Three.jsのOculus Rift対応

Three.js（r74）でOculus Rift対応を試したので、その手順をまとめる。必要なものはThree.jsのサイトからダウンロードした圧縮ファイルにあるVRControls.jsとVREffect.js。それからブラウザは通常のfirefoxではなく、firefox nightyにaddonを追加して使用する。firefox nightyと必要なaddonのインストールについてはこちらを参照。

１．ダウンロードしたThree.jsの圧縮ファイルから以下の2つのjsファイルを適当なフォルダにコピー。ここではjsというフォルダを作成してコピー。
\three.js-master\examples\js\effects\VREffect.js
\three.js-master\examples\js\controls\VRControls.js

２．htmlからVREffect.jsとVRControls.jsを読み込む。

３．VRControlsとVREffectのインスタンス作成

// VRControlsインスタンス作成
var controls = new THREE.VRControls(camera);
// VREffectインスタンス作成
var effect   = new THREE.VREffect(renderer);
// 画面サイズの設定
effect.setSize(window.innerWidth , window.innerHeight );

３．レンダリングのループでVRControlsをアップデートし、通常のレンダリングをVREffectのレンダリングに置き換える

// VRControlsのアップデート
controls.update();
// renderer.render(scene,camera)と置き換え
effect.render(scene, camera);

４．Oculus Riftに表示させるために全画面表示する必要があるが、VREffect.setFullScreen(true)すればよい。vrというidのボタンを作成しておいて、ボタンがクリックされたときに画面表示をPCからOculus Riftに遷移させるときは以下のように記述する。

var vr = document.getElementById( 'vr' );
vr.addEventListener('click', function(){ effect.setFullScreen( true ) }, false);

※VREffectインスタンス作成と同じ場所にeffect.setFullScreen( true )を記述しても動作しなかった。

５．以上でOculus Riftで見られるようになるはずなのだが、家の環境ではVREffectで画面が均等に2分されない。この状態でOculus Riftで見てもオブジェクトがずれて見える。

VREffect.jsをみると、画面解像度の情報はOculus Riftから取得しているよう。このOculusRiftから取得している解像度の情報が正しくない。VREffect.jsにはこの情報が取得できていない場合の処理が記述されていて、この場合はThree.jsのrendererから取得するようになっている。常にThree.jsのrendererから解像度を取得するようにif文をコメントアウトしたら、均等に2分されるようになった。

// render left eye
if ( renderRectL === undefined ) { // この行をコメントアウト
renderRectL = { x: 0, y: 0, width: size.width / 2, height: size.height };
}　// この行をコメントアウト

※left eyeとright eyeの両方に対して行った。
※Oculus Riftのライブラリが更新されたためか、この問題が解消されていた（2016.12.20追記）

firefox nightyで開くと以下のようにように画面が２分割されて表示される。Oculus Riftが接続されていれば、ボタンを押すとOculus Riftで回転する立方体が見える。

Oculus RiftからPC画面表示へ戻るにはESCキーを押す。

• サンプルの表示