3D画像ファイル(.mpo)を閲覧・公開する方法
3D画像を撮影できるカメラが増えてきました。Nintendo 3DSも3D画像を撮影できますね。
Oculus RiftやHTC ViveやPlayStation VRも登場して、VR視聴環境が整いそうです。
ここでは、3D画像ファイルを閲覧したり、公開したりする方法を紹介します。
2016年8月17日 更新
PC内（ローカル）の3D画像ファイルを並列に表示する
以下のボタンを押して、3D画像ファイル(.mpo)を選択してください。（テスト用3D画像）２枚の写真が表示されるので、平行法・交差法で立体に見えます。・・・目が疲れますが。
PC内（ローカル）の3D画像ファイルを並列に表示するページを作る
一番簡単なページのコードを見てみましょう。 テストページ
<html>
<head>
<script type="text/javascript" src="azo_mpo.js"></script>
</head>
<body>
<div id="test_fileselect"></div>
<div id="test"></div>
<script>oMPOLocalParallelViewControl.AddControl('test', 240, false);</script>
</body>
</html>
- 3D画像を扱うJavaScriptファイル「azo_mpo.js」をダウンロードします。 →azo_mpo.js
- <html>〜</html> の中に、
<script type="text/javascript" src="azo_mpo.js"></script>
を記述します。 - <body>〜</body> の中に、ファイルセレクト用と画像表示用のdivタグを記述します。
ファイルセレクト用のidは「xxx_fileselect」、画像表示用のidは「xxx」としてください。（xxxは同じ文字列にしてください）
<div id="test_fileselect"></div>
<div id="test"></div> - 画像表示用のdivタグの次に、処理用のscriptタグを記述します。
()内は、１番目は'xxx'（画像表示用idと同じ）、２番目は画像の幅、３番目は左右反転をtrue/falseで指定します。
<script>oMPOLocalParallelViewControl.AddControl('test', 240, false);</script>
Web上に3D画像ファイルの並列表示を公開する
3D画像ファイルを、ホームページにアップロードしてみましょう。（この方法は、ローカルでの動作確認は出来ません。）
<html>
<head>
<script type="text/javascript" src="azo_mpo.js"></script>
</head>
<body>
<div id="test"></div>
<script>oMPOParallelViewControl.AddControl('test', 'DSC00006.MPO', 240, false);</script>
</body>
</html>
- 3D画像を扱うJavaScriptファイル「azo_mpo.js」をダウンロードします。 →azo_mpo.js
- <html>〜</html> の中に、
<script type="text/javascript" src="azo_mpo.js"></script>
を記述します。 - <body>〜</body> の中に、画像表示用のdivタグを記述します。
画像表示用のidは「xxx」としてください。
<div id="test"></div> - 画像表示用のdivタグの次に、処理用のscriptタグを記述します。
()内は、１番目は'xxx'（画像表示用idと同じ）、２番目は3D画像ファイル(.mpo)、３番目は画像の幅、４番目は左右反転をtrue/falseで指定します。
<script>oMPOParallelViewControl.AddControl('test', 'DSC00006.MPO', 240, false);</script> - 複数の3D画像ファイルを表示させたい場合は、
idを変えつつ複数のdivタグとscriptタグを記述してください。
PC内（ローカル）の3D画像ファイルをアニメーションで閲覧する
以下のボタンを押して、3D画像ファイル(.mpo)を選択してください。（テスト用3D画像）２枚の写真が交互に表示され、擬似的に立体に見えます。・・・やはり目が疲れますが。
PC内（ローカル）の3D画像ファイルをアニメーションで表示するページを作る
一番簡単なページのコードを見てみましょう。 テストページ
<html>
<head>
<script type="text/javascript" src="azo_mpo.js"></script>
</head>
<body>
<div id="test_fileselect"></div>
<div id="test"></div>
<script>oMPOLocalAnimationViewControl.AddControl('test', 480, 270, 0, 333, true, true);</script>
</body>
</html>
- 3D画像を扱うJavaScriptファイル「azo_mpo.js」をダウンロードします。 →azo_mpo.js
- <html>〜</html> の中に、
<script type="text/javascript" src="azo_mpo.js"></script>
を記述します。 - <body>〜</body> の中に、ファイルセレクト用と画像表示用のdivタグを記述します。
ファイルセレクト用のidは「xxx_fileselect」、画像表示用のidは「xxx」としてください。（xxxは同じ文字列にしてください）
<div id="test_fileselect"></div>
<div id="test"></div> - 画像表示用のdivタグの次に、処理用のscriptタグを記述します。
()内は、１番目は'xxx'（画像表示用idと同じ）、２番目は画像の幅、３番目は画像の高さ、４番目は２つの画像の位置差（マイナス〜0〜プラス）
５番目はアニメーションの周期(250〜500)、６番目はアニメーションの開始をtrue/falseで指定、７番目はスムージングをtrue/falseで指定します。
<script>oMPOLocalAnimationViewControl.AddControl('test', 480, 270, 0, 333, true, true);</script>
Web上に3D画像ファイルのアニメーション表示を公開する
3D画像ファイルを、ホームページにアップロードしてみましょう。（この方法は、ローカルでの動作確認は出来ません。）
<html>
<head>
<script type="text/javascript" src="azo_mpo.js"></script>
</head>
<body>
<div id="test"></div>
<script>oMPOAnimationViewControl.AddControl('test', 'DSC00006.MPO', 480, 270, 0, 333, true, true);</script>
</body>
</html>
- 3D画像を扱うJavaScriptファイル「azo_mpo.js」をダウンロードします。 →azo_mpo.js
- <html>〜</html> の中に、
<script type="text/javascript" src="azo_mpo.js"></script>
を記述します。 - <body>〜</body> の中に、画像表示用のdivタグを記述します。
画像表示用のidは「xxx」としてください。
<div id="test"></div> - 画像表示用のdivタグの次に、処理用のscriptタグを記述します。
()内は、１番目は'xxx'（画像表示用idと同じ）、２番目は3D画像ファイル(.mpo)、３番目は画像の幅、４番目は画像の高さ、５番目は２つの画像の位置差（マイナス〜0〜プラス）
６番目はアニメーションの周期(250〜500)、７番目はアニメーションの開始をtrue/falseで指定、８番目はスムージングをtrue/falseで指定します。
<script>oMPOAnimationViewControl.AddControl('test', 'DSC00006.MPO', 480, 270, 0, 333, true, true);</script> - 複数の3D画像ファイルを表示させたい場合は、
idを変えつつ複数のdivタグとscriptタグを記述してください。
考察
- 3D画像を扱うファイル形式は、MPO(Multi Picture Object)に落ち着いたようなので、このような機能を開発した。
- 3D画像・動画を理想的に閲覧するには、Oculus RiftやPlayStation VRのように、 左右の目にLR画像を別々に表示すると自然に視ることが出来るのだろう。
- 3Dシートに印刷するサービスを利用したい。FUJIFILM 3D プリントとか。
おまけ
MPO <-> JPEG converter (C言語, C lang) ： mpojcnv.zip