平成 25 年度第 4 回芸術科学会東北支部・研究会論文【研究会論文 25-04-09】

全周パノラマ画像 WebGL / CSS 3D Transforms ビューアーの開発	 
小久保温+	 +

青森大学	 	 1. 全周パノラマ撮影技術の普及
従来、全周パノラマ写真を制作するには、①Googleストリートビューの撮影[1]で用いられているように、カメラ間の相対的な方向が正確にわかっている複数台のカメラで、複数方向を同時に撮影する、あるいは②1 台カメラで全周囲を分割撮影し、スティッチング・ソフトウェアを用いてつなぎ合わせる必要があった。複数台のカメラで同時撮影する方法は、機材が高価になる。1 台のカメラで撮影する方法は、撮影枚数が多く、撮影に手間がかかり、撮影した画像をつなぎ合わせるための目印が天頂や地面の方向は乏しくつなぐための処理に時間がかかるなどの課題があった。
しかし、2013 年秋期頃から、RICOH THETA[2]や Google の Photo Sphere[3]などのように、一般の個人が簡単に全周パノラマ画像を制作できる技術が普及した。RICOH THETA は、前後 2 つの魚眼レンズを持ったカメラで、1 回のシャッターで全周画像を内部で自動的に合成し、保存する。Google の Photo
Sphere は全周画像であり、Android 端末の Google
Nexus シリーズを用いると、簡単なガイド付きで分割撮影し、内部で自動的に合成して保存することができる。なお、RICOH THETA や Google Photo
Sphere の全周パノラマ画像は、緯線と経線が直角に交わり等間隔に並ぶ投影法の正距円筒図法(図 1)が採用されている。

図 1: 正距円筒図法の全周パノラマ画像プリケーションを目指した。
そこで、アプリケーションは、Web コンテンツ開発者の間でよく用いられている jQuery[4]のプラグイン形式で提供し、表示領域とする HTML の要素のid と表示する全周パノラマ画像の URL やパスを指定することで、表示できるようにした。jQuery は、JavaScript を容易に使用できるように開発されたライブラリである。具体的には、id が theta-viewer の要素に、パスが img/theta.jpg の画像を表示するには、以下のように jQuery プラグインを用いたプログラムを JavaScript で記述する。
jQuery('#theta-viewer').createThetaViewer('img/theta.jpg');
また、PC、スマートフォン、タブレット端末で閲覧可能なようにすることにした。

3. WebGL 版の実装
WebGL[5]により描画するプログラムを開発した。
これは、主に PC での表示に使用することを考えている。WebGL は、OpenGL ES 2.0 相当の機能を Webブラウザ上で使用できるようにしたもので、近年、使用できるブラウザが増えている。プログラムは、
JavaScript で記述する。
開発を容易にするために、three.js[6]ライブラリを用いた。three.js は、WebGL を抽象化したオブジェクトを提供するライブラリで、シーンに 3D オブジェクト、光源などを追加していき、カメラを用いてレンダリングするといった記述で 3D CG を表示することができる。
本研究開発では、3D 空間に球体を置き、球体に全周パノラマ画像をテクスチャー・マッピングし、球体の中心にカメラを設置して表示している。注視点の移動はマウスのドラッグによりカメラの方角を変更、拡大・縮小はマウスのホイールにより視野角を変更することにより実現している。

2. 本研究開発の目標と仕様

4. CSS 3D Transforms 版の実装

本研究開発では、普及のすすむ全周パノラマ画像を、一般の方が Web 上で容易に公開・閲覧できるア

今後、スマートフォンでも WebGL が使用できる環境が整う可能性もあるが、現状では使用できる機1

平成 25 年度第 4 回芸術科学会東北支部・研究会論文

6. まとめと課題種は少ない。一方、スマートフォンでは、CSS
Transforms Module Level 1[7]の 3D(以降、CSS 3DTransforms)は使用可能である。そのため、CSS 3DTransforms により描画するプログラムも開発した。
CSS 3D Transforms では、HTML 要素にパースをつけて表示することができる。そこで、立方体にテクスチャー・マッピングし、その中心にカメラを置くことで、3D 空間を表現することにした。
立方体にテクスチャー・マッピングするために、正距円筒図法のパノラマ画像をキューブ・マップに変換(図 2)している。ピクセル操作には、HTML5 のcanvas 要素を用いている。
ただし、スマートフォンの代表的な OS の一つである iOS のリソースには制限[8]がかけられており、canvas 要素のサイズは、デバイスの RAM が 256MBよりも小さい場合 3 メガピクセルまで、256MB 以上でも 5 メガピクセルまでである。また、JavaScriptの実行時間も 10 秒以下である。そこで、それ以上のサイズのパノラマ画像の場合、これをサブサンプリングする Mega pixel image rendering library foriOS6 Safari ライブラリ[9]を使用した。また、変換の際に行う画像補間では、最近傍法を用いた。

全周パノラマ画像を PC、スマートフォン、タブレット端末などを利用し、Web で閲覧できるビューアーを開発し、ソースコードを公開している[10]。Web
コンテンツ開発者の間でよく用いられている jQueryのプラグインの形式で提供している。閲覧時にブラウザが WebGL に対応しているときは、球体にパノラマ画像をテクスチャー・マッピングして WebGLでレンダリングするようにした。CSS 3D
Transforms に対応しているときは、立方体にテクスチャー・マッピングして CSS 3D Transforms でレンダリングするようにした。
今後の課題としては、さまざまな閲覧環境に対応するためライブラリを使用したところ、ライブラリのインクルードが煩雑になってしまったが、一般の利用者のことを考えると、外部のライブラリを用いず独自に実装した方が望ましいだろう。また、Photo
Sphere などの画像には撮影した方角の情報などが付加されているが、これらを活用することで、仰角方向の傾きなども自動的に補正できるようになる。

参考文献	 
[1] Google マップ: 概要: ストリートビューについて
http://www.google.co.jp/intl/ja/maps/about/behind-the-scenes/streetview/[2] RICOH THETA
https://theta360.com/ja/[3] Google マップ: 概要: Photo Sphere
http://www.google.co.jp/intl/ja/maps/about/contribute/photosphere/[4] jQuery
http://jquery.com/[5] WebGL
http://www.khronos.org/webgl/[6] three.js
http://threejs.org/

図 2: キューブ・マップに変換した全周パノラマ画像[7] CSS Transforms Module Level 1
http://www.w3.org/TR/css-transforms-1/

5. ハイブリッド化[8] Safari Web Content Guide: Creating Compatible

WebGL に対応した環境では WebGL 版、CSS 3D
Transforms に対応した環境では CSS 3D
Transforms 版でレンダリングするようにした。
WebGL が使用可能かは、JavaScript の window
オブジェクトの WebGLRenderingContext プロパテ
ィの値と、canvas 要素に対して webgl あるいはwebgl-experimental のコンテキストが取得できるかを調べて判定している。これには、three.js 付属のDetector.js ライブラリを使用した。

Web Content: Know iOS Resource Limits
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/C
reatingContentforSafarioniPhone/CreatingContentfo
rSafarioniPhone.html#//apple_ref/doc/uid/TP400064
82-SW15[9] Mega pixel image rendering library for iOS6 Safari
https://github.com/stomita/ios-imagefile-megapixel[10] ThetaViewer
https://github.com/akokubo/ThetaViewer2