VR空間で写真を取ってS3に保存する

by Marihuana

Slide 1

Slide 1 text

VR空間で写真を取って S3に保存する焼きそばメロンパン

Slide 2

Slide 2 text

自己紹介

Slide 3

Slide 3 text

自己紹介 ● 焼きそばメロンパンです ● clusterでGo書いてました ● VR系の会社立ち上げました

Slide 4

Slide 4 text

今日話すこと

Slide 5

Slide 5 text

今日話すこと ● 目的 ● 手順・構成 ● APIサーバの実装 (ざっくり) ● OculusGoの実装 ● 問題点 ● さいごに

Slide 6

Slide 6 text

目的

Slide 7

Slide 7 text

clusterみたいなカメラ機能作りたい！

Slide 8

Slide 8 text

それを OculusGo で動かしたい！

Slide 9

Slide 9 text

でも仕組みが分からない...

Slide 10

Slide 10 text

試行錯誤しながら実装してみた！

Slide 11

Slide 11 text

手順・構成

Slide 12

Slide 12 text

全体の流れ 1. 撮影用カメラを配置 2. カメラの内容をJPEGに変換 3. 画像をサーバに送信

Slide 13

Slide 13 text

これで良さそう？

Slide 14

Slide 14 text

参考記事を見つけた！

Slide 15

Slide 15 text

画像バイナリ取得のアーキテクチャを整理

Slide 16

Slide 16 text

写真をサーバに送るまでの流れ 1. UIPictureController でトリガー長押しを検知 2. ImageBinaryFetcher から写真バイナリを取得 3. PictureController に写真バイナリを渡す 4. RestGateway 経由でAPIサーバに写真を送信

Slide 17

Slide 17 text

画像URLをDBに入れたいとか色々あってS3直ではなくAPI経由

Slide 18

Slide 18 text

実装してみよう！

Slide 19

Slide 19 text

APIサーバの実装

Slide 20

Slide 20 text

Unityの勉強会なのでざっくりと

Slide 21

Slide 21 text

APIサーバの実装 ● Go + gin + aws-sdk-go ● POST /v1/pictures に multipart/form-data で画像受け取り ● ファイル名は github.com/google/uuid + 拡張子 ● ACL は public-read にしてどこからでも読めるように

Slide 22

Slide 22 text

Advanced REST client で検証 (Chrome拡張)

Slide 23

Slide 23 text

完成！

Slide 24

Slide 24 text

OculusGoの実装

Slide 25

Slide 25 text

OculusGoの実装手順 1. 撮影用カメラUIの用意

Slide 26

Slide 26 text

OculusGoの実装手順 1. 撮影用カメラUIの用意 2. 表示/非表示, 反転, 撮影といった操作を実装

Slide 27

Slide 27 text

OculusGoの実装手順 1. 撮影用カメラUIの用意 2. 表示/非表示, 反転, 撮影といった操作を実装 3. カメラに映ってる画像をJPGにして取得

Slide 28

Slide 28 text

OculusGoの実装手順 1. 撮影用カメラUIの用意 2. 表示/非表示, 反転, 撮影といった操作を実装 3. カメラに映ってる画像をJPGにして取得 4. 取得した画像をサーバサイドに送信する

Slide 29

Slide 29 text

1. 撮影用UIの用意

Slide 30

Slide 30 text

OculusGoは細かな操作が出来ない

Slide 31

Slide 31 text

OculusGoは細かな操作が出来ない腕の動きでカメラが動くようにしよう！

Slide 32

Slide 32 text

写真UIを雑に実装

Slide 33

Slide 33 text

2. 表示/非表示, 反転, 撮影といった操作を実装

Slide 34

Slide 34 text

表示/非表示 (UIPictureController) 1. UIPictureController を撮影UIにアタッチ 2. Enable/Disable メソッドを public で実装 3. 外部のUI操作によって Enable/Disable を call

Slide 35

Slide 35 text

反転 (UIPictureController) 1. コントローラのトリガー押し上げ検知 2. カメラの rotation の y を 180° 回転させる

Slide 36

Slide 36 text

撮影 (UIPictureController) 1. コントローラのトリガー長押し検知 2. 長押しされていたら画像バイナリ取得 3. 取得した画像バイナリをAPIサーバへ ( UniRx を使用) ※ 雑なコードになったのでリファクタします

Slide 37

Slide 37 text

3. カメラに映ってる画像をJPGにして取得

Slide 38

Slide 38 text

画像バイナリ取得のアーキテクチャを整理

Slide 39

Slide 39 text

ImageBinaryFetcherのコード

Slide 40

Slide 40 text

new ImageBinaryFetcher.Fetch(camera) で画像バイナリが取得可能！

Slide 41

Slide 41 text

4. 取得した画像をサーバサイドに送信する

Slide 42

Slide 42 text

取得した画像をサーバサイドに送信する ● MultipartFormFileSection に画像バイナリを追加 ● UnityWebRequest を使用 ● 成功, 失敗時のレスポンスが欲しいので UniRx を使用 ● Observable.FromCoroutine

Slide 43

Slide 43 text

Unity公式マニュアルを参考にした

Slide 44

Slide 44 text

完成！

Slide 45

Slide 45 text

準備できたので早速撮影してみると...

Slide 46

Slide 46 text

S3にアップロード出来てた！

Slide 47

Slide 47 text

撮影出来た！

Slide 48

Slide 48 text

問題点

Slide 49

Slide 49 text

問題点 ● Texture2D の ReadPixel めっちゃ重い

Slide 50

Slide 50 text

問題点 ● Texture2D の ReadPixel めっちゃ重い ● AsyncGPUReadback で高速化出来そうだが...

Slide 51

Slide 51 text

問題点 ● Texture2D の ReadPixel めっちゃ重い ● AsyncGPUReadback で高速化出来そうだが... ● Android で AsyncGPUReadback を動かすには GraphicAPI を Vulkan にする必要があるが OculusGo では非対応

Slide 52

Slide 52 text

問題点 ● Texture2D の ReadPixel めっちゃ重い ● AsyncGPUReadback で高速化出来そうだが... ● Android で AsyncGPUReadback を動かすには GraphicAPI を Vulkan にする必要があるが OculusGo では非対応 ● C++ ネイティブプラグインで高速化可能っぽい？

Slide 53

Slide 53 text

60FPSを下回ってしまう... (Proﬁler)

Slide 54

Slide 54 text

撮影するたびに OVRFade で暗転する?

Slide 55

Slide 55 text

出来ればあんまり暗転させたくない...

Slide 56

Slide 56 text

誰か解決方法教えて下さい

Slide 57

Slide 57 text

さいごに

Slide 58

Slide 58 text

ざっくりまとめ ● multipart/form-data で画像を受け取れるAPIを作る ● API から S3 に画像を送信 ● Unity 側は撮影用カメラから画像バイナリを取得 ● API サーバに UnityWebRequest で画像送信