令和3（2021）年9月24日（金）13:00～＠オンライン

360度VR動画制作講習会
岡田 義広
附属図書館付設教材開発センター

2

内容
教材開発センターについて[1] 360度VR動画の作成
仕組み・機材[2] 360度VR動画の視聴視聴の仕組み視聴方法[3] 360度VR動画のWeb公開[4] WebXR版について[5] 応用例について
九州大学UIプロジェクト Kyudai Taro,2007

附属図書館付設教材開発センターの設置目的
http://www.icer.kyushu-u.ac.jp/
平成23年度（2011年4月）に設置
ICTを積極的に活用した質の高い電子教材の提供による教育の質の向上––––

教員が電子教材を作成する際の支援センター独自の革新的な教材の開発（例：3次元CGを活用した対話型電子教材）
効果的な教育方法の提案
大学図書館の教育への関与

具体的な活動
– 授業等の録画とそれらを編集した講義ビデオ教材の公開– 3次元CGを活用した電子教材の開発と提供– 教材開発技術や著作権等に関する講習会の実施

効果– 学生が、何時でも、何処でも、自律的に、自分のペースで、自由に学習することができる環境の整備 ＝＞ 自学自習：アクティブラーナー– 教員にとっては、講義時間を有効に活用し工夫を凝らした講義の実践＝＞ 反転授業(Flipped Classrooms)，融合型学習(Blended Learning)

連携事業– 多くの教室や主要な共用スペースで使える教育用無線LANの整備– H２５年度入学生よりBYOD（Bring Your Own Device）による学生PC必携化
解説） CG: Computer Graphics
九州大学UIプロジェクト Kyudai Taro,20073

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

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

1) 撮影・録画

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

２つの半球画像・動画像

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

3) 専用ソフトウェアで視聴5[1] 360度VR動画の作成
機材１） ２つの魚眼レンズをもつカメラ
Insta360 ONE X2

リコー
THETA STHETA VTHETA Z1
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[2] 360度VR動画の視聴視聴の仕組み1） 専用ソフトウェアで視聴

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

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

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

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

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

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

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

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

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

360度VRモード

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

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

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

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

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

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

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

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

12[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

13[3] 360度VR動画のWeb公開
３）360度VR画像・動画コンテンツ(Equirectangular)
先の応用例(JavaScriptプログラム)を九大・岡田研究室のWebページ上に配置

https://contsrv.i.kyushuhttps://contsrv.i.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

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

15[3] 360度VR動画のWeb公開
５）360度VR画像・動画ファイル(Equirectangular)を九大・岡田研究室のWebサーバへアップロードする仕組みの提供
https://contsrv.i.kyushu-u.ac.jp/web/360VR/

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

16[4] WebXR版
1) XR(VR/AR/MR/SR） => WebXR
https://contsrv.i.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

17[4] WebXR版
2）360度VR画像・動画ファイル(Equirectangular)を九大・岡田研究室のWebサーバへアップロードする仕組みの提供
https://contsrv.i.kyushu-u.ac.jp/web/360VR/

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

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

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

19

まとめ教材開発センターについて[1] 360度VR動画の作成
仕組み・機材[2] 360度VR動画の視聴視聴の仕組み視聴方法[3] 360度VR動画のWeb公開[4] WebXR版について[5] 応用例について
九州大学UIプロジェクト Kyudai Taro,2007