プロジェクト報告書 Project Report

提出日 (Date) 2019/1/16

UnderwaterWorldb1016011 小橋元春 Motoharu Kohashi
1 背景の勉強には、「入門 Python3」を使用した。
「Umistagram」は Oculus Rift(以下 Rift とする) と

近年、海に親しみを感じていない若者が多い。日本財いう VR ヘッドセットによって海を体験し、写真を撮団の調査によると、海に親しみを感じていない 10 代は影する VR アプリケーションと、ノート PC によって約 42%、20 代は約 36% と、全世代のうち最も多い。まVR アプリケーション内で撮った写真を加工するフィル

た、海水浴に行く意欲のない 10 代は約 55% と過半数

タアプリケーション、スマートフォンに写真を保存するを超えている。その理由は、泳ぐこと自体が好きではな

ための Web サイトの 3 つに分かれている。そこで、メい、海まで距離があり行くのに時間がかかる、日焼けがンバーは Unity 班、画像処理班、Web サーバ班の 3 つ嫌だ、などが挙げられている。に分かれて作業を行う。また、開発とは別に、VR アプ

海に行かずに海を楽しむ方法として、水族館がある。
沖縄県の美ら海水族館では、ジンベイザメが泳ぐことのリケーションの背景として使用するための動画を撮影する。

できる巨大な水槽を作っており、迫力のある大型の魚が動画撮影では、プロジェクトに用意されている 4 種泳ぐ姿を見ることができる。神奈川県の新江ノ島水族館

類のカメラを使用し、海中の映像を撮影する。Unity 班

では、夜間にガイド付きのツアーを行うことで、普段見は、Unity というゲーム制作エンジンを使用し、VR アることのできない夜行性の魚や睡眠中の魚を見ることプリケーションの作成を担当する。画像処理班は、撮影ができる。しかし、水族館はどこにでもあるものではなした全天球動画を加工し、綺麗にすること、およびフィい。例えば函館市に住んでいる人が水族館に行くには、ルタアプリケーションの開発を担当する。Web サーバ最も近い場所で室蘭まで行かなければならない。

班は、Web サーバの構築と Web サイトの作成を担当

そこで、本プロジェクトはどこでも海を楽しむことのする。

できる新しい方法が必要であると考えた。主なユーザである若者の興味を得るために、近年開発された最新技術である VR と、流行している SNS である「Instagram」に

3 課題解決のプロセスとその結果3.1

動画撮影

着想を得て、水中を体験し、インスタ映えする写真を撮

撮影には、4 つのカメラを使用した。GoPro HERO6ることのできるアプリケーションである「Umistagram」

Black(以下 GoPro とする) は小型・軽量で高画質な動を開発することにした。

画を撮影できる。 PIXPRO SP360 4K(以下 SP360 と2 課題の設定と到達目標する) は、半天球動画を撮ることのできるカメラである。Power Ray は水中ドローンであり、スマートフォ

本プロジェクトの目標は、海を楽しむアプリケーションによって操縦し、水中の映像を撮ることができる。

ン「Umistagram」を開発することである。そのため、プPIXPRO 4KVR360(以下 VR360 とする) は、全天球動ロジェクトの課題はアプリケーション開発に必要な知識画を撮影することができる。それぞれの画像を図 1 かを得ることと、アプリケーションを開発することの 2 つら図 4 に示す。GoPro は図 5 に示す BiRod の先端にに設定した。

取り付けて使用した。SP360 と VR360 は図 6 のようにアプリケーション開発に必要な知識は、各個人の勉強によって得る。開発に使用したツールである Unity の防水ケースをつけ、錘に取り付けた状態で鎖や釣り糸によって水に沈めて撮影した。

勉強には、「Unity2018 入門 最新開発環境による簡単

1 回目の撮影はカメラで撮れる映像を確認するため3D&2D ゲーム制作」という書籍を使用した。Pythonに、入船町前浜海水浴場で行った。使用したカメラはいた。また、魚も確認できなかった。この場所で撮影できた映像は図 9 である。

4 回目の撮影は VR アプリケーションに使用する映像を撮影するために、入船町前浜海水浴場で行った。使用したカメラは VR360 である。また、黒岩岬と同じく胴図 2 SP360

図 1 GoPro長を使用した。撮影日は好天で、風はなかったが、波があったため、映像は少し揺れてしまった。また、撮影者の足が映らないようにするために岩場の近くで撮影したため、魚も確認できなかった。

図 3 Power Ray

図 4 VR360
図 7 1 回目の撮影

図 5 BiRod

図6

図 9 3 回目の撮影

錘への取り付け

3.2
GoPro と SP360 である。この場所は水の透明度が高かったが、水中に入る装備がなかったため、浅瀬でしか図 8 2 回目の撮影

アプリケーション開発

アプリケーション開発は後期に行い、「Umistagram」を完成させることができた。

撮影できなかった。撮影できた映像は、遠くまで見るこ

まず、VR アプリケーションでは、Rift によって仮想とのできるものであったが、魚は GoPro の映像に 1 匹的な海の中を楽しむことができる。背景には実際の海のしか映らなかった。この場所で撮影できた映像は図 7 で画像が使用されているため、本当の海の中にいるようなある。

感覚になる。仮想の海の中は 7 種類の魚が泳いでおり、2 回目の撮影は水深の深い場所で撮影を行うためと、左手で魚に触れることができる。魚は手を素早く動かす

Power Ray を使用できる障害物のない場所で撮影を行と逃げるなど、リアルな挙動をとる。また、右手にはスうために、函館市国際水産・海洋総合研究センター前のマートフォンを持っており、海中の写真を撮ることがで岸壁で行った。使用したカメラは SP360 と Power Rayきる。

である。岸壁であるため、水深の深い場所での撮影をフィルタアプリケーションは、VR アプリケーショ行うことができた。しかし、水の透明度が低いため、近ン内で撮った海の写真をフィルタによって加工できる。

くしか見えない映像となった。SP360 には多数の魚がGUI による操作が可能で、ドラッグアンドドロップに映ったが、色までは確認できず、種類の判別はできな

よって加工する画像を簡単に選択できる。フィルタはかった。この場所で撮影できた映像は図 8 である。

12 種類用意されており、ボタンによって簡単にフィル3 回目の撮影は再び水の透明度の高い場所で撮影する

タを適用できる。フィルタは複数同時に適用可能で、組ために、黒岩岬で行った。使用したカメラは GoPro とみ合わせることによって、自分好みの写真を作ることがVR360 である。また、水中に入る装備として胴長を使できる。

用した。水の透明度は高かったが、撮影日は強風・高波

Web サイトでは、フィルタアプリケーションで加工のため、撮影が困難であった。映像は泡が多く遠くが見された写真を閲覧できる。スマートフォンから Web

えず、VR360 は波によって大きく揺れる映像となってサイトにアクセスすることで、ユーザは自分で加工した写真を自分のスマートフォンに保存できる。こうし松本は、魚の群れの自動生成を担当した。近距離と遠て入手した海の写真を SNS に投稿してもらうのが、距離に分けて生成し、近距離の移動範囲を制限するこ「Umistagram」の狙いである。とで、ユーザが魚に触れやすいように配慮した。また、

3.2.1 Unity 班

ユーザが確実に魚に触れられるように、ユーザの位置にUnity 班は、VR アプリケーションを完成させた。

行くように調整した魚の群れをシーンに直接配置した。

工藤は、Unity によって音を再生する方法、およびス3.2.2

マートフォン型オブジェクトの作成、泡の作成を担当した。音の再生は、インターネット上からフリーの効果音

画像処理班

画像処理班は、背景画像の輝度調整とフィルタアプリケーションを完成させた。

を入手し、Audio Source コンポーネントをオブジェク

今泉は、Python によって背景の全天球画像の輝度調トにアタッチすることで実装した。使用した効果音は、整を行った。本来は動画を使用する予定であったが、揺環境音となる泡の音と写真撮影時のシャッター音であれ補正が VR360 のアプリケーション内で行われているる。スマートフォン型オブジェクトは、Unity に用意さため、画像処理によって揺れをなくすことができなかっれている単純な形のオブジェクトを組み合わせることた。そのため、VR 酔い対策として、動画から切り抜いで作成した。胴体には Cube オブジェクト、ディスプレた静止画を利用した。VR360 の各レンズの映像を抜き

イには Plane オブジェクト、ボタンには Cylinder オブ出すマスク画像を作成し、それぞれ平均輝度を計算すジェクトを使用し、iPhone のような形で作成した。まる。その後 Rift によって確認しながら、映像のつなぎた、カメラオブジェクトを設置し、その映像をテクス目の違和感がなくなるように調整した。防水ケースに光チャとしてディスプレイに貼ることで、スマートフォンが当たり特に明るくなっている部分は、手動でマスク画型オブジェクトに映っている映像を確認できる。泡は、像を作り、輝度を下げることで調整した。

2D の画像によって作成した。10 種類の泡の画像を作

酒田は、フィルタアプリケーションの作成を担当しり、それらを組み合わせて 4 種類の泡オブジェクトを作た。ユーザが簡単にフィルタを使用できるように、GUI成した。上昇しながら左右に移動するスクリプトを作成によって操作できるようにした。作成には、Python のし、泡オブジェクトにアタッチすることで、泡の動きもGUI 作成用のライブラリを使用した。加工する写真の実装した。

選択は、ドラッグアンドドロップによって行えるように小橋は、Rift によって全天球画像を鑑賞する機能の実した。各フィルタを適用するボタン、オリジナルの画像装、VR 空間への干渉、写真撮影機能の実装、魚の作成に戻すボタン、90°回転させるボタンによって、簡単にを行った。全天球画像の鑑賞は、法線を逆にした球オブ自分好みの写真に加工できる。加工した写真を保存する

ジェクトに全天球画像を貼り付け、中心にカメラを設置

ボタンを押すことで、Web サイトのサムネイル用のサイすることで実装した。VR 空間の干渉には、Rift のコンズの小さい画像が作成される。また、Dropbox によっトローラである Oculus Touch(以下 Touch とする) をて Web サーバと写真を同期するための設定を行った。

使用した。VR 空間上の Touch の位置に手を表示する

長谷川は、Python と OpenCV によって、写真加工用ことで、ユーザは自分の手で触れているように VR 空のフィルタを作成した。水彩画フィルタや漫画フィルタ間に干渉することができる。写真撮影機能は、工藤の作など、Instagram にはないようなフィルタを 12 種類作成したスマートフォン型オブジェクトのカメラの映像成した。また、VR アプリケーションでカメラを横にしをテクスチャにして、png 形式の画像に変換し、保存すた状態で撮影した写真の向きを調整するために、写真をることで実装した。魚の 3D モデルには、Asset Store90°回転させる機能を実装した。

で購入したモデルを使用した。Craig(1987) の提唱した

3.2.3

Boids という群行動アルゴリズムを実装し、群れ単位で魚を動かすことで、リアルな魚の動きを再現した。魚の移動方法を 2 種類用意し、魚が近くにいても遠くにいても綺麗に見えるようにした。

Web サーバ班

Web サーバ班は、Web サーバを構築し、Web サイトを完成させた。

Web サ ー バ に は Mac mini を 使 用 し た 。WSL のUbuntu によって SSH 接続することで設定を行った。

Dropbox のフォルダと Web サイト用のディレクトリのOYT8T50008.html?page no=3. 2018 (20190114

画像フォルダをリンクさせることで、フィルタアプリ

アクセス).

ケーションの写真を共有できるようにした。Web サイ[4] Social Media Lab .

2018 年 11 月 更 新 ！ 11

トの作成には、佐藤 (2016) の作成した photoswipe とのソーシャルメディア最新動向データまというギャラリー風ライブラリを使用した。スワイプする

め. [online] https://gaiax-socialmedialab.jp/post-

ことで開いている画像を変更することができる。保存さ30833/. 2018 (20190114 アクセス).

れている画像枚数を確認し、4 枚ごとに並べて配置する[5] J-WAVE NEWS .

Instagram 広 告 は 、実 際ことで、画像の枚数が変わっても、スマートフォン、PCどのくらい効果があるのか？

ビジネスの画面どちらでも正常に表示できるようにした。サイト

活 用 例 を 紹 介 ！.のアクセスにかかる時間を短くするために、画像ファイ

wave.co.jp/blog/news/2018/05/instagram.html.

ルを jpg 形式にすることで容量を削減した。

2018 (20190114 アクセス).

[online] https://www.j-[6] CraigReynolds. Flocks, Herds, and Schools: A

4 今後の課題

Distributed Behavioral Model. Computer Graph本プロジェクトでは、目的としていた「Umistagram」は完成させることができた。しかし、「Umistagram」のics, 1987.
さとう

課題は 2 つある。

アプリケーション-フィルタアプリケーション間にはMicrosoft OneDrive、フィルタアプリケーション-Webサーバ間には Dropbox を用いている。データの共有を円滑に行うためには、これらの方法を統一する必要がある。

2 つ目は、動画の撮影方法の確立である。今回、VRアプリケーションの背景には静止画を使用した。これは動画の揺れの対策ができなかったためである。揺れの補正は画像処理によって行うことができないと判明したた
め、カメラを揺らさずに撮影する方法を確立する必要がある。

参考文献にほんざいだん

識 調 査.

「 海 と 日 本 」に 関 す る 意[online]

https://www.nippon-foundation.or.jp/news/pr/2017/31.html.

2017(20180718 アクセス).
[2] MAG2 NEWS .

りこ

1design.

[online]https://1design.jp/web-development/1154. 2016

1 つ目はファイル共有方法の統一である。現在、VR[1] 日本財団 .

ま[7] 佐藤 まり子 .

日 本 の「 海 水 浴 離 れ 」が 深 刻化 。そ れ で も 湘 南・三 浦 が 賑 わ う 理 由.

[on-line] https://blogos.com/article/318062/.

2018(20190114 アクセス).
[3] YOMIURI ONLINE .

日 本 人 の「 海離 れ 」が 止 ま ら な い 理 由.

[online]https://www.yomiuri.co.jp/fukayomi/ichiran/20180705-(20181109 アクセス).