令和6（2024）年8月27日（火）13:30～＠講習会スペース・中央図書館

360°VR動画教材作成
ワークショップ
岡田 義広
次世代型オープンエデュケーション推進部門(NOE)
データ駆動イノベーション推進本部(DDI2)

2

内容
DDI2・NOEについて[1] 360°VR動画の作成
仕組み・機材・専用ソフトウェア[2] 360°VR動画の視聴仕組み・視聴方法[3] 360°VR動画のWeb公開[4] WebXR版について[5] 研究室紹介の応用例について[6] VRツアーとしての360°VR動画教材[7] OpenVSLAMを用いたVRツアー作成
九州大学UIプロジェクト Kyudai Taro,2007

データ駆動イノベーション推進本部(DDI2)
次世代型オープンエデュケーション推進部門(NOE)

九州大学UIプロジェクト Kyudai Taro,20073

4[1] 360°VR動画の作成
仕組み

左端と右端は連続
RICHO: Theta
２つの魚眼レンズをもつカメラ

1) 撮影・録画

2)ステッチング専用のソフトウェアあるいはデバイス内蔵機能を正距円筒図法(Equirectangular)用いて変換の画像・動画像

２つの半球画像・動画像

九州大学UIプロジェクト Kyudai Taro,2007

3) 専用ソフトウェアで視聴5[1] 360°VR動画の作成
機材

１） ２つの魚眼レンズをもつカメラ
リコー
THETA STHETA VTHETA Z1

Insta360 ONE X2
NOE作成
マニュアル

https://theta360.com/ja/about/theta/v.html

https://www.insta360.com/jp/product/insta360-onex2２） 3つ以上の魚眼レンズをもつカメラ
Insta360 Pro2, 6レンズ
https://www.insta360.com/jp/product/insta360-pro2

Insta360 TITAN, 8レンズ
https://www.insta360.com/jp/product/insta360-titan
九州大学UIプロジェクト Kyudai Taro,2007

6[1] 360°VR動画の作成
専用ソフトウェア(Insta360 ONE X2, X3, X4用のInsta360Studio )九州大学UIプロジェクト Kyudai Taro,2007

NOE作成
マニュアル

7[1] 360°VR動画の作成
専用ソフトウェア(Insta360 ONE X2, X3, X4用のInsta360Studio )九州大学UIプロジェクト Kyudai Taro,2007

NOE作成
マニュアル

8

[1] 360°VR動画の作成
専用ソフトウェア(Insta360 ONE X2, X3, X4用のInsta360Studio )九州大学UIプロジェクト Kyudai Taro,2007

NOE作成
マニュアル

9

[2] 360°VR動画の視聴仕組み
1） 専用ソフトウェアで視聴

2） 3次元CG技術によるもの
球形状の内面にテクスチャーマッピング(球状マッピング)

見える範囲を上下・左右に移動する。
九州大学UIプロジェクト Kyudai Taro,2007

視点を球の中心に置き、視線方向を上下・左右に向ける。

10[2] 360°VR動画の視聴
画像ファイルの視聴方法

１）基本アプリのダウンロードインストール（THEATA用）
https://support.theta360.com/ja/download/

九州大学UIプロジェクト Kyudai Taro,2007

11[2] 360°VR動画の視聴
動画ファイルの視聴方法

1）ローカルPC上にあるファイルの場合
Windowsの’映画 & テレビ’ アプリの360度VRモード‘映画&テレビ’ アプリ

通常モード
九州大学UIプロジェクト Kyudai Taro,2007

360度VRモード

12[2] 360°VR動画の視聴
動画ファイルの視聴方法

２）YouTubeのサービス
https://www.youtube.com/watch?v=WBgsLroGhuc&t=23s

九州大学UIプロジェクト Kyudai Taro,2007

13[2] 360°VR動画の視聴
動画ファイルの視聴方法

３）サーバ上にあるファイルの場合ファイルをダウンロードしローカルPC上で視聴
Windows上の ‘映画 & テレビ’ アプリの360度VRモード
４）他の人に視聴してもらう？
・YouTubeにアップロード
・360度VR動画ファイルのWeb公開

九州大学UIプロジェクト Kyudai Taro,2007

14[3] 360°VR動画のWeb公開
１）Three.jsのご紹介 https://threejs.org/
・WebGLにより３次元CGのWebコンテンツを開発するためのJavaScriptライブラリィ

数多くの応用例の公開 https://threejs.org/examples/
九州大学UIプロジェクト Kyudai Taro,2007

15[3] 360°VR動画のWeb公開
２）360°VR画像・動画コンテンツ(Equirectangular)
Three.jsの応用例（JavaScriptプログラム）

https://threejs.org/examples/?q=equirectangular#webgl_panorama_equirectangular

https://threejs.org/examples/?q=equirectangular#webgl_video_panorama_equirectangular

九州大学UIプロジェクト Kyudai Taro,2007

16[3] 360°VR動画のWeb公開
３）360°VR画像・動画コンテンツ(Equirectangular)
先の応用例(JavaScriptプログラム)をNOEのWebページ上に配置

https://contsrv.icer.kyushuhttps://contsrv.icer.kyushuu.ac.jp/web/360VR/examples/webgl_video
u.ac.jp/web/360VR/examples/webgl_pan_panorama_equirectangular.html
九州大学UIプロジェクト Kyudai Taro,2007
orama_equirectangular.html

17[3] 360°VR動画のWeb公開
４）360°VR画像・動画コンテンツ(Equirectangular)
先の応用例(JavaScriptプログラム)を画像・動画ファイルを入れ替えて自部局のWebページ上に配置
https://contsrv.icer.kyushu-u.ac.jp/web/360VR.zip>360VR>build
three.module.js>examples>jsm>textures
2294472375_24a3b8ef46_o.jpg
pano.mp4
webgl_panorama_equirectangular.html
webgl_video_panorama_equirectangular.html
九州大学UIプロジェクト Kyudai Taro,2007

18[3] 360°VR動画のWeb公開
５）360°VR画像・動画ファイル(Equirectangular)をWebサーバへアップロードし公開する仕組みの提供
https://contsrv.icer.kyushu-u.ac.jp/web/360VR/

九州大学UIプロジェクト Kyudai Taro,2007

19[4] WebXR版
1) XR(VR/AR/MR/SR） => WebXR
https://contsrv.icer.kyushu-u.ac.jp/web/360VR/examples/VRゴーグルに対応# VR: Virtual Reality (仮想現実), AR: Augmented Reality (拡張現実), MR: Mixed Reality (複合現実), SR: Substitutional Reality (代替現実)、
また、これらの総称として、XR: Cross Reality という場合がある
九州大学UIプロジェクト Kyudai Taro,2007

20[4] WebXR版
2）360°VR画像・動画ファイル(Equirectangular)をWebサーバへアップロードし公開する仕組みの提供
https://contsrv.icer.kyushu-u.ac.jp/web/360VR/

九州大学UIプロジェクト Kyudai Taro,2007

21[5] 応用例について研究室紹介の例
https://contsrv.i.kyushuu.ac.jp/web/THETA_20191205_Okadalab_Speech/vr360_img_line.html

九州大学UIプロジェクト Kyudai Taro,2007

22[6] VRツアーとしての360°VR動画教材

九州大学UIプロジェクト Kyudai Taro,2007

23[7] OpenVSLAMを用いたVRツアー作成
OpenVSLAM(Open Visual SLAM) は360°VR動画に対応
次のURLからダウンロード可能
https://github.com/OpenVSLAM-Community/openvslam.git.

九州大学UIプロジェクト Kyudai Taro,2007

24[7] OpenVSLAMを用いたVRツアー作成
実験結果

OpenVSLAMが出力した移動経路情報

九州大学UIプロジェクト Kyudai Taro,2007

25[7] OpenVSLAMを用いたVRツアー作成
新VRツアー

ナビゲーション
コンテンツ

ウォークスルーコンテンツ

九州大学UIプロジェクト Kyudai Taro,2007

26[7] OpenVSLAMを用いたVRツアー作成
学内教職員・学生

次世代型オープンエデュケーション
推進部門① VRツアーコンテンツ作成の申込

作成依頼の受信② 360°VRカメラと専用ソフトウェア用ノートPCの貸し出し③ 360°VRカメラ動画の撮影専用ソフトウェア( Insta360 Studio)④ 360°VR動画（正距円筒図）へ変換
動画送信

OpenVSLAMサーバ

360°VR動画⑤ 移動経路情報
ファイル生成⑥ VRツアーコンテンツ
公開URL生成⑦ コンテンツ確認

新フレームワークのAssetsとして登録

九州大学UIプロジェクト Kyudai Taro,2007
https://contsrv.icer.kyushu-u.ac.jp/public/OpenVSLAM360VR/upload_360vr_video.html

27

内容
DDI2・NOEについて[1] 360°VR動画の作成
仕組み・機材・専用ソフトウェア[2] 360°VR動画の視聴仕組み・視聴方法[3] 360°VR動画のWeb公開[4] WebXR版について[5] 研究室紹介の応用例について[6] VRツアーとしての360°VR動画教材[7] OpenVSLAMを用いたVRツアー作成
九州大学UIプロジェクト Kyudai Taro,2007

28

おわりに本日は360度VR動画教材作成ワークショップへご参加いただきありがとうございます。

九州大学UIプロジェクト Kyudai Taro,2007

29

九州大学UIプロジェクト Kyudai Taro,2007