360 度 VR 動画による VR ツアーコンテンツの OpenVSLAM を用いた開発フ
レームワークと公開サービス岡田 義広 1),2), 永山 寛二 2), 木佐貫 浩司 2)1) 九州大学 附属図書館付設 教材開発センター
2) 九州大学 データ駆動イノベーション推進本部 次世代型オープンエデュケーション推進部門
okada.yoshihiro.520@m.kyushu-u.ac.jp

Development Framework Using OpenVSLAM for VR Tour Contents of360VR Videos and Its Contents ServiceYoshihiro Okada 1),2), Kanji Nagayama 2), Hiroshi Kisanuki 2)
1) Innovation Center for Educational Resources, University Library, Kyushu Univ.
2) Division of Next generation Open Education promotion, Data-Driven Innovation Initiative, Kyushu Univ.
概要
本稿では、360°VR 動画を使用した Web ベース VR ツアーコンテンツ開発の OpenVSLAMに基づくフレームワークを提案している。著者らはすでに 360°VR 動画のナビゲーションや 360°VR 画像のウォークスルーによる Web ベース VR ツアーコンテンツの開発フレームワークを提案している。ウォークスルーによる VR ツアーコンテンツでは、 数十、数百か所で 360°VR 画像を撮影する必要があり、その作業に必要な時間と労力は非常に大きい。
そこで本稿では、360°VR 動画からナビゲーションとウォークスルーの両方に対応する
Web ベース VR ツアーコンテンツを開発可能な新たなフレームワークを提案している。
360°VR 画像のウォークスルーによる VR ツアーコンテンツには、同じシーンの 360°VR動画から必要な 360°VR 画像を抽出できるため、360°VR 画像を撮影する代わりに 360°VR 動画を撮影し利用する。この場合、2 つの魚眼レンズをもつポータブルな 360°VR カメラを利用し動画を一度撮影するのみでよい。また、ナビゲーションによる VR ツアーコンテンツには移動経路情報が必要であり、ウォークスルーによる VR ツアーコンテンツには撮影された位置の情報が必要である。これまでは、VR ツアー作成者が手作業でこれら情報を抽出しファイル化してきたが、この作業に必要な時間と労力も小さくない。そこで、これら情報を自動的に抽出するために、著者らは OpenVSLAM を採用することとした。本稿では、OpenVSLAM によって 360°VR 動画から正確な移動経路や位置情報の抽出ができるのかを評価した結果を示すとともに、新たなフレーワークにより開発した VR ツアーコ
ンテンツ例を示す。さらに、VR ツアーコンテンツを公開するためのサービスを紹介する。

1

それらを用いるエンターテインメントアプリケー

はじめにションも数多く制作されている。しかし、VR コン

本稿では、九州大学データ駆動イノベーショ

テンツの制作には多大な時間と労力を必要とするン推進本部次世代型オープンエデュケーション推ため、医療系以外で教育用 VR コンテンツはこれ進部門(NOE)の活動の一つを紹介する。NOE の使までほとんど制作されていないのが現状である。

命の一つは、XR(VR,AR,MR の総称)等最新の ICT

そのため、NOE では、VR 技術を活用した教育効を活用した教材の提供と、それら教材の作成支援

果の高い教育コンテンツを数多く制作する必要がである。本稿では特に、360°VR 画像・動画によあ ると考 えている 。一方で 、 LIDAR カ メ ラやる Web ベース VR ツアーコンテンツの開発フレー

360°VR カメラなど、これまでに多くの種類のスムワークを紹介する。実験室や演習室を 360°VRキャンデバイスが研究開発されてきた。これらスコンテンツとして閲覧できることは、実験や演習キャンデバイスを使用し、点群データ (PCD: Pointの予習として有用と考えられる。

Cloud Data)、3D モデルデータ、360°VR 画像・動

最近では、種々の VR ゴーグルが商品化され、59画などの 3D データを取得できる。3D データを教育用 VR コンテンツに活用するために、著者らはる。本稿で扱う 360°VR 画像・動画、PCD のすでに VR ゴーグルに対応した Web ベースの VR

Web ベース VR ツアーコンテンツの開発フレーム

ツアーコンテンツの開発フレームワークを提案し、ワークも Three.js を使用している。360°VR 画

多くの VR ツアーコンテンツを開発してきた[1,像・動画および PCD については、それらを使用し2]。360°VR 動画のナビゲーションや 360°VR 画て対話的な Web VR コンテンツを作成するための像のウォークスルーによる VR ツアーコンテンツ商用サービスがいくつかある。RICOH のサービの開発フレームワークを提案してきたが、数十、ス (https://www.theta360.biz/) は 360°VR 画

数百か所の 360°VR 画像を用意するための時間と像に対応しているが、360°VR 動画や PCD には労力は非常に大きい。例えば、本稿で紹介する VR対応していない。本サービスの注目点は、エンドツアーでは、300 ヶ所以上の 360°VR 画像を撮影ユーザーでも独自の 360°VR 画像の対話型 Webした。そこで本稿では、360°VR 動画のみからナコンテンツを作成できる、Web ベース編集機能をビゲーションおよびウォークスルーの両方の Web提供することである。残念ながら、著者らのフレベース VR ツアーコンテンツを開発する新たなフームワークはそのような機能を提供していない。

レームワークを提案する。

Matterport のサービス(https://matterport.com/)

ナビゲーションによる VR ツアーコンテンツには、360°VR 画像と PCD に対応しているが、は 360°VR 動画の移動経路情報が必要であり、ウ360°VR 動画には対応していない。本サービスのォークスルーによる VR ツアーコンテンツには

注目点は、360°VR 画像と PCD から位置情報マ

360°VR 画像が撮影された位置の情報が必要であップを自動生成する Matterport キャプチャアプる。これまでは、VR ツアー作成者が手作業でこれリケーションと呼ばれる AI 技術をベースとしたら情報を抽出しファイル化してきたが、この作業強力なツールを提供することである。残念ながら、に必要な時間と労力も小さくない。そこで、これ著者らの既存フレームワークでは、そのようなツら を 自 動 生 成 す る た め に 、 OpenVSLAM(OpenVisual SLAM: Simultaneous Localization andMapting)[3] の 採 用 を 試 み た 。 本 稿 で は 、ールは提供していない。そこで、本稿ではOpenVSLAM を使用して 360°VR 動画から移動経路と位置情報を自動抽出することを提案する。

OpenVSLAM によって正確な移動経路や位置情報が生成できるのか評価した結果を示し、OpenVSLAM を用いた新たな開発フレームワークの有用性を明らかにする。
本稿の残りの部分は以下の通りである。次の 2
節では、関連研究について述べる。3 節では、既既存フレームワーク

3

本節では、既存フレームワークの機能紹介として、360°VR 画像・動画による Web ベース
VR ツアーコンテンツを紹介する。

存フレームワークを紹介する。4 節では、OpenVSLAM に基づく開発フレームワークについ3.1

360°VR カメラと専用ソフトウェアて 説 明 す る 。 OpenVSLAM を 紹 介 し 、360°VR 画像・動画による Web ベース VR ツア

OpenVSLAM によって正確な移動経路と位置情報ーコンテンツを開発するには、まずこれらメディがどのように生成されるかを示す。また、新たなアファイルを準備する必要がある。360°VR 画フレームワークによって開発された VR ツアーコ

像・動画のセンシングデバイスとして、6 台の魚ンテンツ例を示す。5 節では、VR ツアーコンテン眼レンズカメラを搭載し、最大 8K 解像度の 360°ツを公開するためのサービスの概要を述べる。最VR 画像・動画が撮影できる高品質な Insta360 Pro

後の 6 節で、本稿のまとめと今後の課題を述べる。

を使用している。360°VR 動画の場合、図 1 の左側に示すように、Insta360 ONE X2 や RICOH Theta

関連研究などのポータブルな 360°VR カメラを使用する。

著者らは、Three.js に基づく開発フレームワー

図 1 の右に示すように、天辺にカメラを取り付けク[4-9]を使用して、いくつかの Web ベース 3Dたヘルメットを被り移動することでナビゲーショ教材を開発してきた。Three.js は、人気のあるン動画を撮影する。

2WebGL ベース 3D グラフィックス JavaScript ラ

図 2 の上図に示す魚眼レンズ画像・動画を撮影

イブラリシステム(https://threejs.org/)の 1 つであした後、Insta360 Stitcher などの専用ソフトウェア

60

を使用し変換することで、図 2 の下図に示す正距介する。360°VR 画像・動画を利用したウォーク円筒図法画像・動画が得られる。最後に、テクススルーコンテンツとナビゲーションコンテンツ、チャマッピング技術を使用して、正距円筒図法画像・動画を 3D 空間の球の内面にマッピングする

PCD を利用したウォークスルーコンテンツのそれぞれを開発するために、フレームワークは 3 つのシステムから構成される。3 つのシステムのすべことで、360°VR 画像・動画コンテンツが利用可ての JavaScript ファイルと HTML ファイルを図 3能となる。に示す。

図3システムのファイル構成

3 つのシステムはそれぞれ、*_map.html のような

1 つ の HTML フ ァ イ ル ( つ ま り 、{walk_map.html 、 video_map.html 、 pcd_map.html})
図1と、*_map.js のような 1 つのメイン JavaScript

360°VR カメラ

ファイル (つまり、{walk_map.js、video_map.js、pcd_map.js})、および *_map_controls.js のような
1 つ の 補 助 JavaScript フ ァ イ ル ( つ ま り 、{walk_map_controls.js 、 video_map_controls.js 、pcd_map_controls.js}) で構成される。 *_map.js は、Three.js ライブラリから派生したいくつかの関数を利用している。新しいコンテンツを作成する場
合、これらのプログラムを変更する必要はない。
必要な作業は、必要なメディア ファイル (つまり、Assets ディレクトリに含まれる 360°VR 画
像 ・ 動 画 と PCD フ ァ イ ル ) を 準 備 し 、*_map_controls.js を適当に変更して、必要なメディアファイルを 3 つのメイン JavaScript プログラムのそれぞれに読み込むだけである。
実は、昨年度のオープンキャンパス向けに、日本最大級の大学図書館であることをアピールするために、九州大学の中央図書館の VR ツアーコンテンツを制作した。以下では、これら 360°VR画像・動画の VR ツアーコンテンツを紹介し、既存の開発フレームワークの機能を個別に説明する。
図 2

3.2.1

専用ソフトウェアを使用して魚眼レンズ画

ツアーコンテンツ

像から正距円筒画像を生成

3.2

360°VR 画像のウェークスルーによる VR

図 4 は、360°VR 画像を使用したウォークス

360°VR 画像・動画の VR ツアーコンテンツ

開発フレームワーク
本稿では主に 360°VR 画像・動画を利用したVR ツアーコンテンツの開発フレームワークを紹61

ルーによる VR ツアーコンテンツ(中央図書館 3F)の 3 つのスクリーンショットとマップ画像である。
図左上のマップは、各スクリーンショットの左上にも表示されている。ご覧の通り、地図上には合計 100 を超える多くのオレンジ色の点が見える。

図4

360°VR 画像のウォークスルーによる VR ツアーコンテンツ(中央図書館 3 階)

それぞれは、対応する 360°VR 画像が 360°いる。同様に、図の右下は標準動画の 1 つが中央

VR カメラ・Insta360 Pro によって撮影された場所に表示されたスクリーンショットである。対応すを示している。オレンジ色の点の 1 つをクリック

る赤い球オブジェクトをクリックすることにより、すると、対応する 360°VR 画像が次の 360°VR

これらメディアが表示・非表示される。

シーンとして表示される。同様に、360°VR シー

3.2.2

ン内の灰色の薄い円柱の 1 つをクリックすると、

ツアーコンテンツ

360°VR 動画のナビゲーションによる VR

その場所で撮影された 360°VR 画像が次の 360°

図 5 は、360°VR 動画を使用したナビゲーショ

VR シーンとして表示される。さらに、このフレーンによる VR ツアーコンテンツ(中央図書館 3F) のムワークは標準の画像や動画などのマルチメディ

3 つのスクリーンショットとマップ画像である。

アにも対応している。例えば、図の右上は標準画

図の左上のマップは、各スクリーンショットの左像の 1 つが表示されたスクリーンショットであり、上にも表示されている。ご覧の通り、各スクリー

中央には標準画像として説明パネルが表示されてンショットの中央下部には、360°VR 動画を制御

図5360°VR 動画のナビゲーションによる VR ツアーコンテンツ(中央図書館 3 階)62

するため(再生、一時停止、後進、早送りなど)のンツとウォークスルーコンテンツの両方に地図情コントロールパネルがある。左上のマップには、報が必要である。これまでは、この地図情報を手シアン色の閉じたポリラインが表示されている。

作業で時間をかけて作成してきた。この作業を自これは 360°VR 動画を撮影した際の移動経路を示動化するために、OpenVSLAM の利用を検討した。

している。ポリライン上をクリックすると、360°以下では、OpenVSLAM の紹介と評価結果を示す。

VR 動画のフレームが対応する位置に移動する。ウ

その後、360°VR 動画のみを使用したナビゲーシォークスルーコンテンツと同様に、標準画像など

ョンとウォークスルーの両方に対応する新しいのマルチメディアにも対応している。例えば、図360°VR ツアーコンテンツを示す。の右上と右下には、その中央に画像ファイルが表示されている。360°VR シーンは、360°VR 動画

4.1

OpenVSLAM と評価結果の対応する表示フレームであり、動画再生により天辺に 360°VR カメラを備えたヘルメットを被自動的に変化する。したがって、この例のコンテり、移動してビデオ撮影した際の歩行経路を取得

ンツをナビゲーションコンテンツと呼んでいる。

するには、 SLAM (Simultaneous Localization and

中央下部に表示されている CG キャラクターは、Mapping) などのツールを使用する必要がある。著

エスコート役である。学生風キャラクターと教師者らは、Visual SLAM アルゴリズムの 1 つである風キャラクターを用意している。

OpenVSLAM(Open Visual SLAM) を使用することにした。これは、360°VR 動画に対応しており、4ポータブル 360°VR カメラを使用した VR ツ ア ー コ ン テ ン ツ の た め のOpenVSLAM ベース開発フレームワーク

そのツールは以下からダウンロード可能である。
https://github.com/OpenVSLAM-Community/openvsl
am.gitすでに 360°VR 動画のナビゲーションコンテ
ンツや 360°VR 画像のウォークスルーコンテンツ

図 6 は、中央図書館 3F の 360°VR 動画におけの開発フレームワークを提案してきたが、画像数る OpenVSLAM の実行画面である。右側は中央図が多すぎると 360°VR 画像を用意する手間は非常

書館 3F の 360°VR 動画の 1 フレーム、左側はに大きくなる。例えば、前節の中央図書館 3F の例

VSLAM アルゴリズムにより抽出された移動経路

では、100 カ所以上の 360°VR 画像を用意した。

を示している。ランドマークと呼ばれる多くの特そこで本稿では、360°VR 動画のみを用いたナビ

徴点と、キーフレームの位置 (緑の三角形)と、歩ゲーションとウォークスルーの両方に対応する

行経路 (紫色のポリライン) が見える。

Web ベース VR ツアーコンテンツ開発の新たなフレームワークを提案する。ナビゲーションコンテ

図6

OpenVSLAM の実行画面(中央図書館 3 階 360°VR 動画)

63

図7

手作業により作成された経路図と OpenVSLAM により自動抽出された経路次のコマンドをパラメータ「-eval-log-dir eval」

動経路情報の評価結果である。中央図書館は 4 階とともに使用して OpenVSLAM ツールを実行す建てなので、4 つの 360°VR 動画がある。この図

ると、キーフレームの位置データを「eval」ディレには、手作業で作成された移動経路付きマップとクトリ内の 1 つのテキストファイルOpenVSLAM によって生成された移動経路情報の「keyframe_trajectory.txt」として取得できる。ファ4 つのペアが示されている。OpenVSLAM の各移イルの内容を以下に示す。各行には、time_stamp

動経路情報は、各「keyframe_trajectory.txt」ファイ(システム時間)、x、y、z 座標値、および回転をルに記述されたすべての x 座標値と z 座標値か表す四元数の値が含まれている。

ら生成した。各ペアの左マップと右マップを比較

Command:

すると、OpenVSLAM によって抽出された移動経路情報は非常に正確であると言える。スケールや./run_video_slam -v /vocab/orb_vocab.fbow -m

向きの調整は必要だが、OpenVSLAM で抽出されlibrary3F.mp4 -c equirectangular.yaml --no-sleep

た移動経路は、ナビゲーション VR ツアーの移動--map-db-out library3F.msg --eval-log-dir eval

経路やウォークスルーVR ツアーの位置情報として十分で有効であると言える。

File ‘keyframe_trajectory.txt’:
4.2

1692445872.59002 -0 -0 -0 0 0 0 1

360°VR 動画のナビゲーションとウォークスルーによる 360°VR ツアーコンテンツ1692445873.99002 0.0035851773 -0.000222045069

新しいフレームワークは、既存の開発フレーム-0.000110629381 -0.000992051701 -0.0146692998

ワークを少し変更し、手作業により作成したマッ-0.000758150407 0.99989162

プの代わりに OpenVSLAM によって抽出された…

移動経路を使用する。このように、OpenVSLAM

1692446093.95648 1.30501332 -0.102533099の利用により、手作業でのマップ作成の必要が無

6.09009006 -0.0161551557 0.99928409 0.0232693377

くなった。図 8 は、著者らの居室がある九州大学

0.0250770024

附属図書館付設教材開発センター内を 360°VR カ
メラで動画撮影したものを、VR ツアーコンテンツ

前節で紹介した中央図書館 VR ツアーコンテン
ツの 360°VR 動画について OpenVSLAM を評価した。図 7 は、OpenVSLAM によって抽出された移64として閲覧できるようにしたものである。左はナビゲーション版で、右はウォークスルー版の VRツアーコンテンツのスクリーンショットである。

図8

ナビゲーションとウォークスルーによる VR ツアーコンテンツ例(教材開発センター)

それぞれのスクリーンショット左上にはOpenVSLAM が生成した移動経路が表示されている。オレンジ色の点の 1 つをクリックすると、360°VR 動画の現在のフレームが対応する位置のURL を申請者へ通知する。
申請者は、③に示す 360°VR カメラで動画を撮影するのみであり、当部門は、④、⑤に示さフレームに変更される。すなわち、位置が移動すれる専用ソフトウェアでの 360°VR 動画へのる。ナビゲーション版（図 8 左図）では、「再生」、変換と OpenVSLAM での移動経路情報生成の「一時停止」などの動画を制御するコントロールみを行えばよい。このように、労力と時間を掛パネルが表示されている。ウォークスルー版（図けずに 360°VR ツアーコンテンツ公開が可能

8 右図）では、代わりに灰色の薄い円柱オブジェとなる。

クトが多数表示されている。いずれかをクリック
すると、360°VR 動画の現在のフレームが対応する位置のフレームに変更される。すなわち、位置が移動する。ナビゲーション版では、中央下部にエスコート役の CG キャラクターが表示されているが、ウォークスルー版では非表示となっている。

5. 公開サービスの概要
図 9 に、VR ツアーコンテンツ公開サービスの概要を示す。著者らの所属する次世代型オープンエデュケーション推進部門が学内の教職員・学生からの作成申請を受けると、360°VRカメラとヘルメットのセットを申請者へ貸し出

図9

VR ツアーコンテンツ公開サービス

す。申請者は、自ら 360°VR カメラ動画を撮影し、その動画を当部門へ送信する。Insta360
Stitcher 等の専用ソフトウェアを使用して受信

6. おわりにした動画を 360°VR 動画へ変換する。その後、最近では、LIDAR スキャナや 360°VR カメラ

OpenVSLAM を使用して移動経路情報ファイなど、さまざまな種類のスキャンデバイスが研究ルを生成する。
変換した 360°VR 動画と生成し開発されている。これらのスキャンデバイスを使た移動経路情報の二つのファイルを新フレームワークの Assets ディレクトリへ保存し、当該の65用すると、点群データ（PCD: Point Cloud Data）、3D モデルデータ、360°VR 画像・動画などの 3Dデータを取得できるようになる。これらの 3D データを教育用 VR コンテンツとして活用するために、著者らはすでに 360°VR 画像・動画と PCDを用いた Web ベースのウォークスルーとナビゲーションによる VR ツアーコンテンツの開発フレームワークを提案している。しかし、360°VR 画像の数が多すぎるとそれを用意するための作業時間と労力が大きくなる。そこで本稿では、OpenVSLAM をベースとした新たな開発フレームワークを提案した。評価結果から、OpenVSLAMによって抽出された移動経路は非常に正確であり、手作業で作成する移動経路の代わりにこれを採用することとした。
今後は、提案した開発フレームワークを活用して、VR ツアーコンテンツの有用性を実証するた
めの VR ツアーコンテンツをさらに作成していく予定である。また、RICOH Theta サービスの Web
ベース編集機能と同様の編集機能の実装を試みる予定である。

謝辞
本研究の一部は、JSPS 科研費 JP22H03705 および九州大学 VISION EXPO プロジェクトの助成を受けて行われたものである。

参考文献[1] Okada, Y., Kaneko, K., Shi, W. (Feb 2023,Development Framework Using 360VR Cameras
and Lidar Scanners for Web-Based XR
Educational Materials Supporting VR Goggles.
In: Barolli, L. (eds) Advances in Internet, Data &Web Technologies. EIDWT 2023. Lecture Notes
on Data Engineering and Communications
Technologies, vol 161. Springer, pp. 401-412.
[2] Okada, Y., Kaneko, K., Shi, W. (July 2023).
Development Framework for Web-based VR
Tours and Its Examples. 27th International
Conference Information Visualisation (IV), pp.
420-425.
[3] Sumikura,S., Shibuya, M. and Sakurada, K., 2019,
OpenVSLAM: A Versatile Visual SLAM
Framework, MM '19: Proceedings of the 27th
ACM
International
ConferenceonMultimediaOctober 2019Pages 2292–2295.
[4] Okada, Y. et al, 2016. Framework forDevelopment of Web-based Interactive 3D
Educational
Contents,
10thInternational
Technology, Education and Development
Conference, pp. 2656-2663.
[5] Okada, Y. el al, 2016. Interactive Educational
Contents Development Framework Based on
Linked Open Data Technology, 9th annual
International Conference of Education, Research66and Innovation, pp. 5066-5075.
[6] Okada, Y. et al, 2017. Interactive Educational
Contents Development Framework and Its
Extension for Web-based VR/AR Applications,
Proc. of the GameOn 2017, Eurosis, ISBN:
978-90-77381-99-1, pp. 75-79.
[7] Ma, C. et al, 2018. E-Learning Material
Development Framework Supporting VR/AR
Based on Linked Data for IoT Security Education,
Proc. of 6th Interna tional Conference onEmerging Internet, Data & Web Technologies(EIDWT 2018), ISBN: 978-3-319-75928-9, pp.
479-491.
[8] Hirayama, D. et al, 2019. Web-Based Interactive3D
Educational
MaterialDevelopment
Framework and Its Authoring Functionalities,
Proc. of the 22nd International Conference onNetwork-BasedInformationSystems(NBiS-2019), ISBN 978-3-030-29028-3, pp.
258-269.
[9] Yamamura, H. et al, 2020. A Development
Framework for RP-type Serious Games in a 3D
Virtual Environment, VENOA 2020 in Proc. ofthe 14th International Conference on Complex,
Intelligent, and Software Intensive Systems(CISIS-2020), pp. 166-176.